Almatiq Dashboard

Full-stack business management dashboard integrating Square payments, Google Sheets CRM, and real-time analytics.

Built for a recovery services business - tracks bookings, manages customers, and auto-matches leads to paying clients.

---

Features

Dashboard Overview

• Total bookings, active customers, and revenue at a glance
• Recent bookings feed with status indicators
• Real-time data pulled from Square API

Bookings Management

• Complete bookings table with ID, time, duration, status, and notes
• Color-coded status badges (accepted, cancelled, pending)
• Synced with Square's booking system

Customer CRM

• Customer profiles pulled from Square
• Name, email, phone, and account creation date
• Graceful error handling with fallback states

Leads Hub

• Leads imported from Google Sheets
• Auto-matching - cross-references leads against Square customers via email/phone
• Three lead states: NEW > MATCHED > BOOKED
• Instantly see which leads have already converted

---

Architecture

NEXT.JS APP  -->  SERVER ACTIONS  -->  EXTERNAL APIs

Dashboard         getDashboardData     Square SDK
Bookings          getBookings          (bookings, customers, catalog)
Customers         getCustomers
Leads Hub         matchLeads           Google Sheets (lead data)

---

Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript 5
Styling	Custom CSS with glassmorphism design
Payments	Square SDK 38.0
Leads	Google Sheets API with JWT auth
Icons	Lucide React
Hosting	Vercel

---

Quick Start

Prerequisites

• Node.js 18+
• Square Developer account
• Google Cloud project with Sheets API enabled

Setup

git clone https://github.com/CodeWithArhum/DASHBOARD.git
cd DASHBOARD
npm install

Create .env.local:

SQUARE_ACCESS_TOKEN=your_square_access_token
SQUARE_LOCATION_ID=your_location_id
GOOGLE_SERVICE_ACCOUNT_EMAIL=your_service_account@project.iam.gserviceaccount.com
GOOGLE_PRIVATE_KEY=your_private_key
GOOGLE_SHEET_ID=your_sheet_id

npm run dev

Open http://localhost:3000

---

Project Structure

DASHBOARD/
├── src/
│   ├── app/
│   │   ├── page.tsx              # Dashboard overview
│   │   ├── layout.tsx            # Root layout with sidebar
│   │   ├── globals.css           # Glassmorphism theme
│   │   ├── bookings/page.tsx     # Bookings management
│   │   ├── customers/page.tsx    # Customer CRM
│   │   └── leads/page.tsx        # Leads hub with auto-matching
│   ├── components/
│   │   ├── Sidebar.tsx           # Navigation with active states
│   │   └── AlmatiqLogo.tsx       # Brand logo component
│   └── lib/
│       ├── actions.ts            # Server actions (data fetching)
│       ├── sheets.ts             # Google Sheets JWT integration
│       └── square.ts             # Square SDK client
├── fetch_services.mjs            # Square catalog fetcher
├── live_server.mjs               # Standalone API server
└── package.json

---

Pages

Route	Description
/	Dashboard overview with metrics cards and recent bookings
/leads	Leads hub with Google Sheets import and auto-matching
/bookings	Full bookings table synced with Square
/customers	Customer CRM pulled from Square

---

Design

• Theme: Dark glassmorphism with backdrop blur effects
• Colors: Black background, white text, indigo (#6366F1) accents
• Font: Outfit with elegant letter spacing
• Components: Glass-card containers, color-coded status badges, smooth hover states
• Layout: Fixed sidebar + dynamic content area with CSS Grid

---

Built by @CodeWithArhum