📌 Project Overview
The Admin Dashboard / CRM template is a powerful internal tooling platform built for teams that need to manage contacts, track deals, visualize performance data, and control user access — all from a single, cohesive interface. With TanStack Table v8, drag-and-drop Kanban pipelines, Supabase Realtime live updates, and role-based access control, this template delivers enterprise-grade data management without enterprise-grade complexity.
Ideal for sales teams, operations managers, and agencies managing client relationships, this platform is designed to be adapted into any internal tool — from a CRM to a project tracker to a content operations dashboard.
🧩 Core Features
1. TanStack Table v8 Data Grids
The Contacts page is built with TanStack Table v8, providing sortable columns, per-column filters, cursor-based pagination, multi-row selection, and bulk delete — all without a third-party data grid library.
2. Drag-and-Drop Kanban Pipeline
The Deals page features a full Kanban pipeline with draggable deal cards between stages, powered by dnd-kit. Stage changes are persisted to Supabase in real time.
3. Supabase Realtime Dashboard
The main Dashboard subscribes to Supabase Realtime channels so live deal updates — new wins, stage changes — appear on-screen instantly without manual refreshes.
4. Role-Based Access Control
Three user roles — admin, editor, and viewer — are enforced both at the middleware level and through Supabase RLS policies. Editors can create and modify; viewers can only read.
5. Reports with Date Range & CSV Export
A Reports page lets admins filter data by date range, view Recharts visualizations, and export tabular data as CSV — ready for spreadsheet analysis or client reporting.
6. User Management Panel
Admins can invite new team members via email, assign or change their roles, and deactivate accounts — all from a dedicated User Management page backed by Supabase Auth.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Authenticated app shell |
| Styling & UI | Tailwind CSS + shadcn/ui | Data tables, forms, modals |
| Data Tables | TanStack Table v8 | Sortable, filterable data grids |
| Drag & Drop | dnd-kit | Kanban pipeline drag-and-drop |
| Charts | Recharts + Tremor | KPI cards and bar/line charts |
| Forms | React Hook Form + Zod | Complex form validation |
| Data Fetching | React Query (TanStack) | Server state, pagination, mutations |
| Database | Supabase (PostgreSQL) | CRM data: contacts, deals, activities |
| Auth & Roles | Supabase Auth + RLS | Role-based access (admin/editor/viewer) |
| Live Updates | Supabase Realtime | Live dashboard data subscriptions |
| Files | Supabase Storage | File attachments per record |
| Hosting | Vercel / Railway | Deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Dashboard | Tremor KPI cards, Recharts charts, Realtime deal feed |
| Contacts | TanStack Table with sort, filter, pagination, bulk actions |
| Deals / Pipeline | Drag-and-drop Kanban with stages persisted to Supabase |
| Reports | Date range filters, chart views, and CSV export |
| Settings | Organization settings and user profile management |
| User Management | Invite, edit roles, and deactivate team members |
🔒 Key Technical Highlights
- Realtime subscription hook for live dashboard updates
- CSV export utility for contact and deal data
- Supabase RLS policies scoped per role across all tables
- TanStack Table column configs with server-side sorting and filtering
- Supabase schema: contacts, deals, deal_stages, activities, users, roles, file_attachments