TicketScanner Admin

Admin dashboard for managing a Supabase-backed ticketing system.

Features

• Dark mode UI
• Auth (email/password via Supabase)
• Dashboard with time-range scans (1h / 24h / 7d) and KPIs
• Realtime table refresh (tickets, devices, scan_logs)
• Tables: sorting, pagination, full CSV export

Stack

• React + TypeScript + Vite
• Tailwind CSS v4
• React Router, TanStack Query
• Supabase JS
• Recharts, Day.js

Quickstart

1. Install deps

npm install

2. Create .env.local in project root:

VITE_SUPABASE_URL=your_project_url
VITE_SUPABASE_ANON_KEY=your_anon_key

3. Enable Realtime (Supabase dashboard → Database → Replication → Realtime)

• Turn on for tables: tickets, devices, scan_logs

4. Dev server

npm run dev

5. Production build

npm run build
npm run preview

Supabase schema notes

Expected public tables:

• tickets(id uuid primary key, scanned_at timestamptz, devalued bool)
• devices(id text primary key, platform text, last_seen_at timestamptz, app_version text)
• scan_logs(id bigint primary key, created_at timestamptz, device_id text, action text, ticket_code text, is_valid bool, was_devalued bool, success bool, message text, meta jsonb)

Optional audit (already supported in UI, can be created with migration):

• admin_audit(id bigserial, created_at timestamptz default now(), actor_user_id uuid, actor_email text, action text, table_name text, record_id text, details jsonb)

Policies should allow authenticated users to select the above tables. Realtime should be enabled to see instant updates on the dashboard and lists.

Scripts

• dev: start local dev server
• build: type-check + bundle for production
• preview: preview production build

Deploy

• Deploy to Vercel/Netlify
• Set the same env vars: VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY

Roadmap

• Filters (date range, validity) and deep links from KPIs
• Audit page for admin_audit
• Role-based admin actions