A full-featured customer-support ticket system built with Next.js 16, Supabase, Tailwind CSS, and TypeScript. End-users submit and track support requests while agents and admins manage, respond to, and resolve them.
- Create, view, and reply to support tickets with Markdown support
- Ticket types, categories, tags, urgency, and severity
- Custom fields (text, number, dropdown, checkbox, date)
- SEO-friendly URLs with slugs
- Public and private ticket visibility
- File attachments with image previews and SVG sanitization
- Filterable/sortable paginated ticket list with saved views
- Agent actions: assign, change status, priority, type, category, privacy
- Mark as duplicate, merge tickets, bulk operations (close, assign, tag, delete)
- Personal stats panel (assigned, resolved, response time, CSAT, SLA)
- Real-time updates via Supabase Realtime
- Article management with draft/published/archived states
- Public help center with full-text search
- Article feedback (helpful / not helpful)
- Suggested articles on ticket creation
- Create ticket from article
- Configurable SLA policies with severity-based targets
- Business hours support
- Timer tracking (first response & resolution deadlines)
- SLA indicators on ticket detail and dashboard
- Automated breach/approaching notifications via
pg_cron
- Token-based rating page (no login required)
- Automatic survey scheduling on ticket close
- Rating display on ticket detail
- CSAT summary in reporting dashboard
- In-app notifications with bell icon and unread count
- Email notifications via SMTP with customizable templates
- Notification coalescing (batched digest emails)
- User notification preferences
- Real-time notification updates
- Auto-categorization on ticket creation
- Duplicate ticket detection (semantic similarity)
- Suggested replies for agents
- Ticket summary generation
- KB article generation from tickets
- Configurable AI provider, model, and per-feature toggles
- Ticket volume, resolution metrics, agent performance
- CSAT summary and SLA compliance stats
- Backlog overview with trend charts
- CSV export
- Agent-scoped vs admin-scoped access
- Role management (User / Agent / Admin) with last-admin guard
- Team management (create, rename, assign members)
- Ticket types, categories, tags, custom fields CRUD
- Email/SMTP configuration and notification templates
- SLA policies, CSAT settings, file upload settings
- Subscription tiers with capability and limit overrides
- Authentication modes (built-in, social OAuth, external SSO)
- Logo/URL configuration, error page templates
- Audit log
- Create tickets and replies via email
- Attachment handling and signature stripping
- Unknown sender auto-replies with rate limiting
- Blocked user and duplicate ticket rejection
- Subscription tiers with per-tier capabilities and rate limits
- Canned responses (personal and shared)
- Follow/unfollow tickets
- User profile management with account deletion (anonymization)
- User notes (agent-viewable)
- Mobile responsive design
- WCAG 2.1 Level AA accessibility
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Backend | Supabase (Postgres, Auth, Storage, Realtime, pg_cron) |
| Styling | Tailwind CSS 4 |
| Language | TypeScript |
| Font | Geist |
| Charts | Recharts |
| Markdown | unified / remark / rehype with sanitization |
| Nodemailer | |
| Testing | Vitest (database), Playwright (E2E), axe-core (accessibility) |
- Server-rendered — No client-side state management. Minimal
"use client"wrappers only for Realtime subscriptions, Markdown preview, charts, and notification bell. - No custom API — All mutations via Next.js Server Actions. Data reads via Supabase client.
- Database-enforced security — Row-Level Security on every table. Helper functions (
is_agent(),is_admin(),is_teammate(),user_has_tier_capability()) used in RLS policies. - URL-driven state — Filters, pagination, and views use URL search params.
- Cookie-based auth —
@supabase/ssrwith session refresh middleware.
See docs/architecture.md for full details.
- Node.js 20+
- Supabase CLI
- Docker (for local Supabase)
# Install dependencies
npm install
# Start local Supabase (runs Postgres, Auth, Storage, Realtime)
supabase start
# Apply migrations and seed data
supabase db reset
# Start the dev server
npm run devOpen http://localhost:3000 in your browser.
Create a .env.local file:
NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>
SUPABASE_SERVICE_ROLE_KEY=<your-service-role-key>The anon key and service role key are printed by supabase start.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run typecheck |
Run TypeScript type checking |
npm run test:db |
Run database/RLS tests (Vitest) |
npm run test:e2e |
Run end-to-end tests (Playwright) |
npm run test |
Run all tests (db + e2e) |
src/
├── app/ # Next.js App Router pages
│ ├── (auth)/ # Login, signup, forgot password
│ ├── (main)/ # Authenticated layout
│ │ ├── tickets/ # Ticket pages
│ │ ├── agent/ # Agent dashboard
│ │ ├── admin/ # Admin setup
│ │ ├── kb/ # Knowledge base management
│ │ ├── help/ # Public help center
│ │ ├── reports/ # Reporting dashboard
│ │ ├── notifications/ # Notifications page
│ │ ├── profile/ # User profile
│ │ └── canned-responses/
│ ├── api/ # API routes (webhooks)
│ └── csat/ # CSAT rating page
├── components/
│ ├── ui/ # Reusable primitives (Badge, Button, Card, etc.)
│ ├── layout/ # NavBar, Sidebar, Footer
│ └── features/ # Feature-specific components
├── lib/
│ ├── actions/ # Server Actions by feature
│ ├── ai/ # AI provider client
│ ├── email/ # Email sending and templates
│ ├── queries/ # Complex data queries
│ ├── supabase/ # Supabase client helpers
│ └── utils/ # Shared utilities
supabase/
├── migrations/ # 20 SQL migrations
├── seed.sql # Development seed data
└── config.toml # Supabase local config
tests/
├── db/ # Database/RLS tests (Vitest)
├── e2e/ # End-to-end tests (Playwright)
└── helpers/ # Test utilities
- docs/requirements.md — Full product specification
- docs/design.md — UI design and layout
- docs/architecture.md — Architecture constraints
- docs/build-plan.md — Phased build plan (22 phases)
- docs/seed-data.md — Seed data specification
MIT — Copyright (c) 2026 SurveyJS