'use client'; import { useState, useEffect } from 'react'; import Link from 'next/link'; const API = process.env.NEXT_PUBLIC_API_URL || ''; // ─── Types ──────────────────────────────────────────────────────────────────── interface Stats { organizers: number; events: number; attendees: number; checkins: number; contacts: number; } interface ByStatus { status: string; count: number; } interface RecentEvent { title: string; start_at: string; status: string; organizer_name: string; registered: number; } interface Organizer { id: number; name: string; email: string; plan: string; event_count: number; attendee_count: number; created_at: string; } interface Event { id: number; slug: string; title: string; status: string; is_public: boolean; category: string | null; start_at: string; organizer_name: string; organizer_email: string; registered: number; checked_in: number; } interface NotifSummary { type: string; channel: string; status: string; count: number; } interface WishlistItem { id: number; title: string; description: string | null; category: string; status: string; votes: number; author_name: string | null; author_type: string; created_at: string; } interface SponsorProfile { id: number; company: string; contact_name: string | null; contact_email: string; contact_phone: string | null; industries: string[] | null; event_types: string[] | null; budget_range: string | null; description: string | null; website: string | null; status: string; created_at: string; } interface SeekingEvent { id: number; event_id: number; title: string; slug: string; start_at: string; organizer_name: string; organizer_email: string; brief: string | null; package_types: string[] | null; budget_range: string | null; } interface SponsorMatch { id: number; event_id: number; sponsor_id: number; notes: string | null; status: string; created_at: string; event_title: string; slug: string; company: string; contact_email: string; } interface KolProfile { id: number; name: string; handle: string | null; platforms: string[] | null; follower_counts: Record; categories: string[] | null; bio: string | null; contact_email: string; rate_range: string | null; status: string; created_at: string; } interface KolBrief { id: number; event_id: number; organizer_id: number; budget_range: string | null; deliverables: string[] | null; deadline: string | null; categories: string[] | null; notes: string | null; status: string; created_at: string; event_title: string; organizer_name: string; } interface Ambassador { id: number; name: string; email: string; social_handle: string | null; platform: string | null; follower_count: number | null; bio: string | null; categories: string[] | null; status: string; created_at: string; } interface AgencyInquiry { id: number; service_slug: string; contact_name: string; email: string; phone: string | null; company: string | null; event_date: string | null; budget_range: string | null; notes: string | null; status: string; created_at: string; } const PLAN_LABELS: Record = { free: { label: 'Free', color: 'text-slate-400 bg-slate-700' }, pro: { label: 'Pro', color: 'text-blue-400 bg-blue-500/15' }, explab_staff: { label: 'ExpLab Staff', color: 'text-amber-400 bg-amber-500/15' }, }; const STATUS_COLORS: Record = { published: 'text-green-400 bg-green-500/15', draft: 'text-slate-400 bg-slate-700', ended: 'text-slate-500 bg-slate-800', cancelled: 'text-red-400 bg-red-500/15', }; const WISHLIST_STATUS_COLORS: Record = { open: 'text-blue-400 bg-blue-500/15', planned: 'text-amber-400 bg-amber-500/15', done: 'text-green-400 bg-green-500/15', declined: 'text-slate-500 bg-slate-700', }; type Tab = 'overview' | 'organizers' | 'events' | 'notifications' | 'wishlist' | 'sponsors' | 'kol' | 'ambassadors' | 'inquiries' | 'flows' | 'status'; // ─── Flows data (inline for admin panel) ────────────────────────────────────── interface FlowStep { icon: string; label: string; sub?: string; highlight?: boolean; } interface Flow { id: string; title: string; role: string; accent: string; icon: string; steps: FlowStep[]; link?: { href: string; label: string }; } const FLOWS: Flow[] = [ { id: 'organizer', title: 'Organizer Flow', role: 'Event Creator', accent: '#f59e0b', icon: '🏢', link: { href: '/eventflow/organizer', label: 'Open Dashboard' }, steps: [ { icon: '✍️', label: 'Sign Up', sub: 'Create organizer account' }, { icon: '📅', label: 'Create Event', sub: 'Title, date, location, banner', highlight: true }, { icon: '🎟️', label: 'Set Tiers', sub: 'Pricing, capacity, colors' }, { icon: '🔑', label: 'Set Check-in PIN', sub: 'For kiosk & reception staff' }, { icon: '🚀', label: 'Publish', sub: 'Event goes live on /eventflow' }, { icon: '📊', label: 'Monitor', sub: 'Real-time registrations & check-ins', highlight: true }, { icon: '👥', label: 'CRM', sub: 'Contact list grows with each RSVP' }, { icon: '📩', label: 'Notifications', sub: '7d, 1d reminders + thank you auto-sent' }, ] }, { id: 'participant', title: 'Participant Flow', role: 'Event Attendee', accent: '#3b82f6', icon: '👤', steps: [ { icon: '🌐', label: 'Browse Events', sub: 'Public listing at /eventflow' }, { icon: '🎫', label: 'Select Event', sub: 'View details, tiers, date, location' }, { icon: '📋', label: 'Register', sub: 'Name, email, organization (one form)', highlight: true }, { icon: '✅', label: 'Confirmation', sub: 'QR code emailed + shown on screen' }, { icon: '📧', label: '7-Day Reminder', sub: 'Email sent automatically' }, { icon: '🔔', label: '1-Day Reminder', sub: 'Email + WhatsApp/LINE if opted in' }, { icon: '🚪', label: 'Doors Open Alert', sub: 'Day-of notification' }, { icon: '🙏', label: 'Post-Event Thanks', sub: 'Thank you email day after', highlight: true }, ] }, { id: 'checkin', title: 'Kiosk Check-in Flow', role: 'Self-service Kiosk', accent: '#22c55e', icon: '🖥️', link: { href: '/eventflow/checkin', label: 'Open Kiosk' }, steps: [ { icon: '🔐', label: 'Enter PIN', sub: 'Staff unlocks kiosk with event PIN' }, { icon: '📷', label: 'QR Scan', sub: 'Attendee scans their QR code' }, { icon: '👁️', label: 'Preview Card', sub: 'Name, tier, status shown' }, { icon: '✅', label: 'Confirm Check-in', sub: 'One tap to mark arrived', highlight: true }, { icon: '🎉', label: 'Success Screen', sub: 'Welcome message displayed' }, { icon: '📊', label: 'Live Counter', sub: 'Real-time count updates', highlight: true }, ] }, { id: 'reception', title: 'Reception Staff Flow', role: 'RD / Front Desk', accent: '#a855f7', icon: '🎫', link: { href: '/eventflow/reception', label: 'Open Reception' }, steps: [ { icon: '🔐', label: 'PIN Login', sub: 'Event ID + check-in PIN' }, { icon: '📊', label: 'Live Dashboard', sub: 'Real-time check-in progress bar' }, { icon: '🔍', label: 'Name Search', sub: 'Find attendee instantly', highlight: true }, { icon: '📷', label: 'QR Scan', sub: 'Camera scan from phone/email' }, { icon: '👁️', label: 'Confirm Card', sub: 'View attendee details + tier' }, { icon: '✅', label: 'One-tap Check-in', sub: 'Mark arrived with single tap', highlight: true }, { icon: '🔁', label: 'Next Attendee', sub: 'Instantly ready for next scan' }, ] }, { id: 'admin', title: 'Super Admin Flow', role: 'ExpLab Staff', accent: '#f59e0b', icon: '⚡', steps: [ { icon: '🔑', label: 'Admin Secret', sub: 'x-admin-secret header auth' }, { icon: '📈', label: 'Platform Stats', sub: 'All organizers, events, attendees' }, { icon: '🏢', label: 'Manage Organizers', sub: 'Set plan: Free / Pro / ExpLab Staff', highlight: true }, { icon: '📅', label: 'Manage Events', sub: 'Change status, delete events' }, { icon: '💡', label: 'Wishlist Admin', sub: 'Review & curate community requests', highlight: true }, { icon: '📩', label: 'Notifications', sub: 'View notification pipeline status' }, ] }, { id: 'ai-studio', title: 'AI Studio Flow', role: 'Organizer — AI Tools', accent: '#a855f7', icon: '🤖', steps: [ { icon: '📅', label: 'Select Event', sub: 'Open event management → AI Studio tab' }, { icon: '✍️', label: 'Event Description', sub: 'AI generates SEO-friendly copy', highlight: true }, { icon: '📣', label: 'Social Posts', sub: 'LinkedIn, Twitter, Facebook captions' }, { icon: '📧', label: 'Email Draft', sub: 'Announcement email for attendees', highlight: true }, { icon: '📋', label: 'Agenda Builder', sub: 'Structured schedule from your notes' }, { icon: '🎨', label: 'Banner Prompt', sub: 'Midjourney / DALL-E prompt for art' }, ] }, { id: 'wishlist', title: 'Wishlist Board Flow', role: 'Community Members', accent: '#22c55e', icon: '💡', link: { href: '/eventflow/wishlist', label: 'Open Wishlist' }, steps: [ { icon: '🌐', label: 'Browse Wishlist', sub: 'Public board at /eventflow/wishlist' }, { icon: '➕', label: 'Submit Idea', sub: 'Suggest a feature or integration', highlight: true }, { icon: '👍', label: 'Vote on Ideas', sub: 'Upvote community suggestions' }, { icon: '🏷️', label: 'Filter by Category', sub: 'Feature, UX, AI, Integration…' }, { icon: '📊', label: 'Admin Review', sub: 'Admin curates top-voted ideas', highlight: true }, { icon: '🎉', label: 'Ships to Roadmap', sub: 'Planned → Done lifecycle' }, ] }, { id: 'rsvp-form', title: 'Custom RSVP Form Flow', role: 'Organizer — Form Builder', accent: '#f59e0b', icon: '📋', steps: [ { icon: '📅', label: 'Event Settings', sub: 'Open event → RSVP Form tab' }, { icon: '🔒', label: 'Core Fields', sub: 'First/Last name, Email always required' }, { icon: '📝', label: 'Toggle Optional', sub: 'Make phone, org, title required or not' }, { icon: '➕', label: 'Add Custom Fields', sub: 'Text, select, date, checkbox, etc.', highlight: true }, { icon: '💾', label: 'Save & Preview', sub: 'Changes live immediately on event page' }, { icon: '👤', label: 'Participant Fills', sub: 'Custom fields shown in RSVP form', highlight: true }, { icon: '🗃️', label: 'Responses Stored', sub: 'In attendee metadata, exportable' }, ] }, ]; // ─── Platform Status Data ──────────────────────────────────────────────────── type DevStatus = 'live' | 'in-dev' | 'scaffold' | 'planned'; interface PlatformFeature { id: string; name: string; category: string; status: DevStatus; description: string; files: string[]; dbTables: string[]; apiEndpoints: string[]; notes: string; devPrompt: string; } const STATUS_BADGE: Record = { live: { label: '✅ Live', cls: 'bg-green-500/15 text-green-400 border border-green-500/30' }, 'in-dev': { label: '🔧 In Dev', cls: 'bg-amber-500/15 text-amber-400 border border-amber-500/30' }, scaffold: { label: '🪜 Scaffold', cls: 'bg-blue-500/15 text-blue-400 border border-blue-500/30' }, planned: { label: '📋 Planned', cls: 'bg-slate-700 text-slate-400 border border-white/[0.06]' }, }; const PLATFORM: PlatformFeature[] = [ // ── Infrastructure ────────────────────────────────────────────────────────── { id: 'db', name: 'PostgreSQL Database', category: 'Infrastructure', status: 'live', description: 'Fly.io managed Postgres. All tables prefixed ef_. Migrations run on startup via db.init(). pgvector extension available.', files: ['use-cases/eventflow/api/db.js', 'db.js (root pool)'], dbTables: ['ef_organizers','ef_events','ef_ticket_tiers','ef_attendees','ef_contacts','ef_notification_schedule','ef_wishlist','+ all P2–P6 tables'], apiEndpoints: [], notes: 'Root pool (db.js) used for admin queries. Feature pool (api/db.js) handles migrations and per-feature queries.', devPrompt: 'Add a new table ef_example with columns (id SERIAL PRIMARY KEY, event_id INT REFERENCES ef_events(id), created_at TIMESTAMPTZ DEFAULT NOW()). Add migration in db.init() using IF NOT EXISTS pattern. Export CRUD helpers from api/db.js.', }, { id: 'auth', name: 'Auth System', category: 'Infrastructure', status: 'live', description: 'Two auth layers: Organizer JWT (Bearer token via x-organizer-token header) and Admin secret (x-admin-secret header or ?_secret query param).', files: ['use-cases/eventflow/api/auth.js', 'use-cases/eventflow/api/routes/admin.js'], dbTables: ['ef_organizers (email + password_hash + token)'], apiEndpoints: ['POST /api/eventflow/organizer/login', 'POST /api/eventflow/organizer/register'], notes: 'requireAuth middleware attaches req.organizer. requireAdmin in admin.js checks EVENTFLOW_ADMIN_SECRET env var (default: 5milesLab01).', devPrompt: 'To add a new protected organizer route: import { requireAuth } from "../auth"; then router.get("/my-route", requireAuth, async (req, res) => { /* req.organizer.id available */ }). For admin routes add to routes/admin.js after router.use(requireAdmin).', }, { id: 'notifications', name: 'Notification Engine', category: 'Infrastructure', status: 'live', description: 'Background cron engine that processes ef_notification_schedule. Sends email via SMTP (Nodemailer). WhatsApp and LINE channels are scaffolded but not wired to real APIs.', files: ['use-cases/eventflow/api/notifications/engine.js', 'use-cases/eventflow/api/notifications/email.js', 'use-cases/eventflow/api/routes/notifications.js'], dbTables: ['ef_notification_schedule'], apiEndpoints: ['GET /api/eventflow/notifications/status', 'POST /api/eventflow/notifications/trigger (admin)'], notes: 'Engine runs engine.start() at route load. Processes pending notifications every 60s. Types: registration_confirm, reminder_7d, reminder_1d, doors_open, post_event_thanks.', devPrompt: 'To add a new notification type: 1) Add type to engine.js HANDLERS map. 2) Insert rows into ef_notification_schedule with type=\'your_type\', scheduled_at=target time. 3) Implement handler function that calls email.send() or mock WhatsApp. 4) Test with POST /api/eventflow/notifications/trigger?event_id=X.', }, // ── Core Event Management ─────────────────────────────────────────────────── { id: 'events', name: 'Event CRUD', category: 'Core', status: 'live', description: 'Full event lifecycle: create, read, update, delete, publish/unpublish. Slug auto-generated. Supports banner image, location, capacity, check-in PIN, category tags.', files: ['use-cases/eventflow/api/routes/events.js', 'use-cases/eventflow/api/routes/organizer.js', 'frontend/app/eventflow/organizer/page.tsx'], dbTables: ['ef_events', 'ef_ticket_tiers'], apiEndpoints: ['GET /api/eventflow/events/:slug', 'POST /api/eventflow/organizer/events', 'PATCH /api/eventflow/organizer/events/:id', 'DELETE /api/eventflow/organizer/events/:id', 'GET /api/eventflow/admin/events'], notes: 'Events must be published (status=published, is_public=true) to appear in public listing. Check-in PIN is stored plaintext (acceptable for low-security venue use).', devPrompt: 'To add a field to events: 1) ALTER TABLE ef_events ADD COLUMN new_field TEXT in db.init(). 2) Add to SELECT in relevant queries. 3) Add to PATCH handler body parse. 4) Add input to organizer/page.tsx event form.', }, { id: 'tiers', name: 'Ticket Tiers', category: 'Core', status: 'in-dev', description: 'Pricing tiers per event (Free/Paid/VIP/Early Bird etc.). Basic tier: name, price, capacity, color. Extended fields added: tier_type, sale_starts_at, sale_ends_at, benefits, visibility, max_per_order — DB migrated but UI not yet built.', files: ['use-cases/eventflow/api/routes/organizer.js', 'use-cases/eventflow/api/db.js', 'frontend/app/eventflow/organizer/page.tsx'], dbTables: ['ef_ticket_tiers'], apiEndpoints: ['GET /api/eventflow/organizer/events/:id/tiers', 'POST /api/eventflow/organizer/events/:id/tiers', 'PATCH /api/eventflow/organizer/events/:id/tiers/:tierId', 'DELETE /api/eventflow/organizer/events/:id/tiers/:tierId'], notes: 'Extended columns added via IF NOT EXISTS: tier_type VARCHAR(20), sale_starts_at TIMESTAMPTZ, sale_ends_at TIMESTAMPTZ, benefits TEXT[], visibility VARCHAR(20) DEFAULT public, max_per_order INT.', devPrompt: 'Extend the tier builder UI in organizer/page.tsx TierForm component to add: 1) tier_type selector (general/vip/early_bird/group/staff). 2) sale_starts_at + sale_ends_at date-time pickers. 3) benefits: array of text inputs with add/remove. 4) visibility toggle (public/hidden/invite_only). 5) max_per_order number input. All fields already exist in DB.', }, { id: 'checkin', name: 'QR Check-in Kiosk', category: 'Core', status: 'live', description: 'Self-service kiosk at /eventflow/checkin. Staff enters PIN, attendees scan QR from email. Shows name/tier/status. One-tap check-in. Live counter.', files: ['frontend/app/eventflow/checkin/page.tsx', 'use-cases/eventflow/api/routes/checkin.js'], dbTables: ['ef_attendees (status: checked_in)', 'ef_events (checkin_pin)'], apiEndpoints: ['POST /api/eventflow/checkin/verify-pin', 'POST /api/eventflow/checkin/scan', 'GET /api/eventflow/checkin/stats/:eventId'], notes: 'QR code = attendee UUID. Scan endpoint validates UUID, checks event PIN, updates attendee status to checked_in and sets checked_in_at timestamp.', devPrompt: 'To add badge printing on check-in: 1) Add POST /api/eventflow/checkin/print-badge endpoint that returns attendee name+tier as PDF/label data. 2) In checkin/page.tsx success screen, call print endpoint and trigger window.print() or thermal printer API. Consider adding a badge_template field to ef_events.', }, { id: 'reception', name: 'Reception Staff View', category: 'Core', status: 'live', description: 'Mobile-optimized reception panel at /eventflow/reception. PIN login, real-time check-in progress bar, name search, QR scan, attendee card with tier info.', files: ['frontend/app/eventflow/reception/page.tsx'], dbTables: ['ef_attendees', 'ef_events', 'ef_ticket_tiers'], apiEndpoints: ['POST /api/eventflow/checkin/verify-pin', 'GET /api/eventflow/checkin/attendees/:eventId', 'POST /api/eventflow/checkin/scan'], notes: 'No separate backend — reuses checkin routes. Differs from kiosk in UX: search-first vs scan-first, staff-operated vs self-service.', devPrompt: 'To add bulk check-in (mark all in a tier as checked in): 1) Add POST /api/eventflow/checkin/bulk endpoint accepting event_id + tier_id. 2) UPDATE ef_attendees SET status=checked_in WHERE event_id=$1 AND tier_id=$2 AND status=registered. 3) Add "Mark Tier as Present" button in reception panel.', }, { id: 'participant', name: 'Participant Registration', category: 'Core', status: 'live', description: 'Public RSVP form at /eventflow/[slug]. Supports tier selection, custom form fields, QR code generation on success. Email confirmation triggered automatically.', files: ['frontend/app/eventflow/[slug]/page.tsx', 'use-cases/eventflow/api/routes/public.js', 'use-cases/eventflow/api/routes/participant.js'], dbTables: ['ef_attendees', 'ef_contacts'], apiEndpoints: ['GET /api/eventflow/public/event/:slug', 'POST /api/eventflow/participant/register', 'GET /api/eventflow/participant/ticket/:uuid'], notes: 'Custom RSVP form fields stored as JSONB in ef_attendees.custom_fields. Promo/referral code field not yet added to form UI (discount codes table exists but validation not wired into registration).', devPrompt: 'Add promo code field to registration: 1) Add input below tier selector in [slug]/page.tsx. 2) On input blur/submit call POST /api/eventflow/events/:eventId/discounts/validate with {code}. 3) Show discount info if valid. 4) Pass discount_code_id to POST /api/eventflow/participant/register. 5) In register handler, apply discount and increment code uses.', }, { id: 'crm', name: 'CRM / Contact List', category: 'Core', status: 'live', description: 'Every registration auto-upserts into ef_contacts (per organizer). Organizer can view and export contact list. Tracks event history per contact.', files: ['use-cases/eventflow/api/routes/organizer.js', 'frontend/app/eventflow/organizer/page.tsx (Contacts tab)'], dbTables: ['ef_contacts'], apiEndpoints: ['GET /api/eventflow/organizer/contacts', 'GET /api/eventflow/organizer/contacts/:id', 'GET /api/eventflow/organizer/contacts/export'], notes: 'Contact is identified by email per organizer. If same person registers for 2 events under same organizer, one contact record with multiple event references.', devPrompt: 'Add contact tags/segmentation: 1) ALTER TABLE ef_contacts ADD COLUMN tags TEXT[] DEFAULT \'{}\'. 2) Add PATCH /api/eventflow/organizer/contacts/:id endpoint to update tags. 3) Add tag filter to GET /api/eventflow/organizer/contacts. 4) Add tag chip UI in Contacts tab.', }, { id: 'ai-studio', name: 'AI Studio', category: 'Core', status: 'live', description: 'Organizer AI tools: event description, social post copy (LinkedIn/Twitter/Facebook), email draft, agenda builder, banner art prompt. Uses DeepSeek reasoner via platform AI service.', files: ['use-cases/eventflow/api/routes/ai.js', 'frontend/app/eventflow/organizer/page.tsx (AI Studio tab)'], dbTables: [], apiEndpoints: ['POST /api/eventflow/ai/generate'], notes: 'Stateless — no DB storage of generated content. Organizer copies output. Prompt type selected via body.type field. Falls back to Claude Haiku if DeepSeek unavailable.', devPrompt: 'Add new AI generation type: 1) In routes/ai.js, add case to PROMPTS map with type key and system+user prompt template. 2) In organizer/page.tsx AI Studio tab, add a button for the new type. 3) Types currently available: description, social_linkedin, social_twitter, social_facebook, email_draft, agenda, banner_prompt.', }, { id: 'wishlist', name: 'Community Wishlist', category: 'Core', status: 'live', description: 'Public feature request board at /eventflow/wishlist. Anyone can submit ideas, vote, filter by category. Admins can update status (open/planned/done/declined).', files: ['frontend/app/eventflow/wishlist/page.tsx', 'use-cases/eventflow/api/routes/wishlist.js'], dbTables: ['ef_wishlist'], apiEndpoints: ['GET /api/eventflow/wishlist', 'POST /api/eventflow/wishlist', 'PATCH /api/eventflow/wishlist/:id/vote', 'PATCH /api/eventflow/wishlist/:id (admin)'], notes: 'Voting is session-based (localStorage) with no duplicate vote enforcement on backend. Categories: feature, ux, integration, ai, other.', devPrompt: 'Add comment threads to wishlist: 1) CREATE TABLE ef_wishlist_comments (id SERIAL PK, item_id INT REFS ef_wishlist, author_name VARCHAR, content TEXT, created_at TIMESTAMPTZ). 2) Add GET/POST /api/eventflow/wishlist/:id/comments. 3) Add collapsible comment section in wishlist/page.tsx per item card.', }, { id: 'rsvp-forms', name: 'Custom RSVP Forms', category: 'Core', status: 'live', description: 'Organizer can define custom registration form fields per event: toggle optional built-in fields, add custom fields (text/select/date/checkbox/radio). Responses stored as JSONB.', files: ['use-cases/eventflow/api/routes/organizer.js', 'frontend/app/eventflow/organizer/page.tsx (RSVP Form tab)', 'frontend/app/eventflow/[slug]/page.tsx'], dbTables: ['ef_events (rsvp_fields JSONB)', 'ef_attendees (custom_fields JSONB)'], apiEndpoints: ['GET /api/eventflow/organizer/events/:id/rsvp-fields', 'PUT /api/eventflow/organizer/events/:id/rsvp-fields'], notes: 'rsvp_fields schema: [{key, label, type, required, options?}]. Core fields (first_name, last_name, email) are always included and cannot be removed.', devPrompt: 'Add field ordering (drag-and-drop): 1) Add an order property to each field object in rsvp_fields JSONB. 2) Integrate @dnd-kit/sortable in the RSVP Form tab. 3) On drop, update field.order values and save. 4) In [slug]/page.tsx render fields sorted by order.', }, // ── P2 — Discount Codes ───────────────────────────────────────────────────── { id: 'discounts', name: 'Discount Codes', category: 'P2 — Discounts', status: 'scaffold', description: 'Organizer-created promo codes per event. Supports percentage or fixed amount discounts. Max uses, expiry date, active toggle. Referral codes stored here too (source=referral).', files: ['use-cases/eventflow/api/routes/discounts.js', 'use-cases/eventflow/api/db.js (discount fns)'], dbTables: ['ef_discount_codes'], apiEndpoints: ['GET /api/eventflow/events/:eventId/discounts', 'POST /api/eventflow/events/:eventId/discounts', 'PATCH /api/eventflow/events/:eventId/discounts/:id', 'DELETE /api/eventflow/events/:eventId/discounts/:id', 'POST /api/eventflow/events/:eventId/discounts/validate'], notes: 'Backend complete. Missing: 1) Discounts tab in organizer event management UI. 2) Promo code input in registration form. 3) Discount application logic in participant/register endpoint.', devPrompt: 'Add Discounts tab to organizer event management: 1) Add "Discounts" to the event detail tab list in organizer/page.tsx. 2) Fetch GET /api/eventflow/events/:id/discounts. 3) Render table: code | type | value | uses/max | expires | active | actions. 4) Add "New Code" form: code (text), type (percent/fixed), value (number), max_uses (optional), expires_at (optional). 5) Wire POST to create, PATCH :id to toggle active, DELETE :id to remove.', }, // ── P3 — Referral & Ambassadors ───────────────────────────────────────────── { id: 'referral', name: 'Referral Program', category: 'P3 — Referral', status: 'scaffold', description: "Organizer creates a referral program per event with two schemes: scheme A (referrer gets reward when referee registers), scheme B (both get discount). Auto-generates a referral code stored in ef_discount_codes with source='referral'.", files: ['use-cases/eventflow/api/routes/referral.js', 'use-cases/eventflow/api/db.js (referral fns)'], dbTables: ['ef_referral_programs', 'ef_discount_codes (source=referral)', 'ef_referral_events'], apiEndpoints: ['POST /api/eventflow/referral/programs', 'GET /api/eventflow/referral/programs/:eventId', 'POST /api/eventflow/referral/validate-code'], notes: 'Backend routes done. Missing: 1) Referral tab in organizer portal. 2) Referral code field in registration form. 3) Payout/reward tracking UI.', devPrompt: 'Add Referral tab in organizer event management: 1) Add "Referral" to event detail tabs. 2) GET /api/eventflow/referral/programs/:eventId to check if program exists. 3) If none: show setup form (scheme: A or B, discount_pct, reward_amount, reward_type: credit/cash/gift). 4) POST to create. 5) Show generated referral code + shareable link. 6) Show referral events table (who referred whom, reward status). The validate-code endpoint already handles attribution on registration.', }, { id: 'ambassadors', name: 'Ambassador Program', category: 'P3 — Referral', status: 'scaffold', description: 'Public ambassador registration form. Ambassadors promote events and earn commissions. Admin approves/rejects. Organizers see their ambassador list.', files: ['use-cases/eventflow/api/routes/referral.js', 'use-cases/eventflow/api/db.js (ambassador fns)', 'use-cases/eventflow/api/routes/admin.js'], dbTables: ['ef_ambassador_profiles'], apiEndpoints: ['POST /api/eventflow/referral/ambassador', 'GET /api/eventflow/referral/ambassadors (organizer)', 'GET /api/eventflow/admin/ambassadors', 'PATCH /api/eventflow/admin/ambassadors/:id/status'], notes: 'Backend done. Missing: 1) Public /eventflow/ambassadors registration page. 2) Admin UI for ambassador approval. 3) Ambassador code generation (referral code linked to ambassador).', devPrompt: 'Create public ambassador registration page at /eventflow/ambassadors: 1) Light-themed marketing page explaining ambassador benefits. 2) Registration form: name, email, social handle, platform (Instagram/TikTok/YouTube/LinkedIn), follower count, bio, categories (tech/lifestyle/business/etc), referral code preference. 3) POST /api/eventflow/referral/ambassador. 4) Thank-you confirmation. Admin panel ambassador tab: list pending profiles with approve/reject buttons calling PATCH /api/eventflow/admin/ambassadors/:id/status.', }, // ── P4 — Agency Services ──────────────────────────────────────────────────── { id: 'services', name: 'Agency Service Catalog', category: 'P4 — Agency', status: 'scaffold', description: 'Static catalog of 5 agency services: Full-Service Event Management, Event Production, PR & Media, LED Sphere Rental, AI Photo Booth. Public listing + inquiry submission form.', files: ['use-cases/eventflow/api/routes/services.js', 'use-cases/eventflow/api/db.js (createAgencyInquiry)'], dbTables: ['ef_agency_inquiries'], apiEndpoints: ['GET /api/eventflow/services', 'GET /api/eventflow/services/:slug', 'POST /api/eventflow/services/inquire'], notes: 'Catalog is static (edit SERVICES array in services.js). Inquiries stored in DB. Backend done. Missing: public frontend page at /eventflow/services.', devPrompt: 'Create /eventflow/services page: 1) Light-themed marketing page. 2) Hero section: "Professional Event Production & Agency Services". 3) Service cards grid: name, tagline, price_hkd/price_unit, features list, "Enquire" CTA. 4) Inquiry modal: pre-fill service_slug, collect contact_name, email, phone, company, event_date, budget_range, notes. 5) POST /api/eventflow/services/inquire. 6) Thank-you state. Prices: services.base_price_hkd is in HKD cents (/100 to display).', }, { id: 'inquiries', name: 'Agency Inquiry Management', category: 'P4 — Agency', status: 'scaffold', description: 'Admin panel view of all agency service inquiries. Status workflow: new → contacted → quoted → won/lost.', files: ['use-cases/eventflow/api/routes/admin.js', 'use-cases/eventflow/api/db.js'], dbTables: ['ef_agency_inquiries'], apiEndpoints: ['GET /api/eventflow/admin/inquiries', 'PATCH /api/eventflow/admin/inquiries/:id/status'], notes: 'Backend done. Missing: Admin UI tab for inquiries in admin/page.tsx.', devPrompt: 'Add Inquiries tab to admin panel: 1) Add "📨 Inquiries" to Tab type and TABS array. 2) loadInquiries() fetches GET /api/eventflow/admin/inquiries. 3) Table: service | company | contact | email | event_date | budget | status | actions. 4) Status select: new/contacted/quoted/won/lost. 5) PATCH :id/status on change. Also add Services/Inquiries summary card to Overview tab.', }, // ── P5 — Sponsor Matching ─────────────────────────────────────────────────── { id: 'sponsors', name: 'Sponsor Matching', category: 'P5 — Sponsors', status: 'scaffold', description: 'Three-sided marketplace: sponsors register publicly, organizers flag events as seeking sponsors, admin creates matches. Sponsors see open events. No self-serve matching.', files: ['use-cases/eventflow/api/routes/sponsors.js', 'use-cases/eventflow/api/routes/admin.js', 'use-cases/eventflow/api/db.js (sponsor fns)'], dbTables: ['ef_sponsor_profiles', 'ef_event_sponsor_flags', 'ef_sponsor_matches'], apiEndpoints: ['POST /api/eventflow/sponsors/register', 'GET /api/eventflow/sponsors/seeking', 'POST /api/eventflow/sponsors/events/:eventId/flag (organizer)', 'GET /api/eventflow/admin/sponsors', 'POST /api/eventflow/admin/sponsors/match', 'PATCH /api/eventflow/admin/sponsors/matches/:id/status'], notes: 'All backend routes done. Missing: 1) /eventflow/sponsors public registration page. 2) Sponsor seeking page. 3) Admin Sponsors tab in admin/page.tsx. 4) Organizer event flag tab.', devPrompt: 'Add Sponsors tab to admin panel: 1) Add "🤝 Sponsors" to Tab type and TABS. 2) loadSponsors() fetches GET /api/eventflow/admin/sponsors (returns {sponsors, seeking, matches}). 3) Three sub-sections: Sponsor Profiles (table: company, industries, budget_range, status + approve/reject), Seeking Events (event title + organizer + brief), Matches (event + sponsor + status + notes + PATCH status). 4) "Create Match" form: select event_id from seeking list, select sponsor_id from approved sponsors, notes text area. POST /api/eventflow/admin/sponsors/match.', }, // ── P6 — KOL Program ──────────────────────────────────────────────────────── { id: 'kol', name: 'KOL / KOC Program', category: 'P6 — KOL', status: 'scaffold', description: 'KOLs register publicly (status: pending → admin approves to active). Organizers create KOL briefs per event. Admin matches KOLs to briefs. KOLs apply to briefs.', files: ['use-cases/eventflow/api/routes/kol.js', 'use-cases/eventflow/api/routes/admin.js', 'use-cases/eventflow/api/db.js (kol fns)'], dbTables: ['ef_kol_profiles', 'ef_kol_briefs', 'ef_kol_applications'], apiEndpoints: ['POST /api/eventflow/kol/register', 'GET /api/eventflow/kol/profiles (public active)', 'POST /api/eventflow/kol/briefs (organizer)', 'GET /api/eventflow/kol/briefs (organizer)', 'GET /api/eventflow/admin/kol', 'PATCH /api/eventflow/admin/kol/:id/status'], notes: 'follower_counts stored as JSONB: {instagram: 50000, youtube: 10000}. All backend done. Missing: public /eventflow/kol page, admin KOL tab, organizer brief tab.', devPrompt: 'Add KOL tab to admin panel: 1) Add "🌟 KOL" to Tab type and TABS. 2) loadKol() fetches GET /api/eventflow/admin/kol (returns {profiles, briefs}). 3) Profiles table: name, handle, platforms, follower totals, categories, status + approve/reject (PATCH /admin/kol/:id/status). 4) Briefs table: event, budget_range, deliverables, deadline, categories, status. 5) Consider a "suggest match" button that opens a modal to select a KOL for a brief. Public /eventflow/kol page: KOL registration form with multi-platform follower count inputs (JSONB), categories multi-select, rate range.', }, // ── Public Pages ──────────────────────────────────────────────────────────── { id: 'public-listing', name: 'Public Event Listing', category: 'Public Pages', status: 'live', description: 'Homepage at /eventflow showing all published public events. Category filter, search, event cards with date/location/tier info.', files: ['frontend/app/eventflow/page.tsx'], dbTables: ['ef_events', 'ef_ticket_tiers'], apiEndpoints: ['GET /api/eventflow/public/events'], notes: 'Filter by category works. Search by title works. Pagination not yet implemented.', devPrompt: 'Add pagination to public event listing: 1) Add limit/offset query params to GET /api/eventflow/public/events. 2) Return total_count in response. 3) Add "Load more" button or page controls in eventflow/page.tsx. Also add a featured events section (pin 1-3 events via ef_events.featured boolean column).', }, { id: 'flows-page', name: 'Flows / Journey Map', category: 'Public Pages', status: 'live', description: 'Visual stakeholder journey map at /eventflow/flows. Shows step-by-step flows for all roles: organizer, participant, kiosk, reception, admin, AI studio, wishlist, RSVP forms.', files: ['frontend/app/eventflow/flows/page.tsx'], dbTables: [], apiEndpoints: [], notes: 'Static page. Flows data is duplicated in admin/page.tsx for the Flows tab. If flows are updated, update both files.', devPrompt: 'Add new flow: 1) Add flow object to FLOWS array in flows/page.tsx AND admin/page.tsx (both files). Fields: id, title, role, accent (hex color), icon (emoji), steps [{icon, label, sub, highlight?}], link? {href, label}. Accent colors should be distinct from existing: amber (#f59e0b), blue (#3b82f6), green (#22c55e), purple (#a855f7). Use teal (#14b8a6) or rose (#f43f5e) for new flows.', }, ]; // ─── Component ──────────────────────────────────────────────────────────────── export default function AdminPage() { const [secret, setSecret] = useState(''); const [authed, setAuthed] = useState(false); const [authErr, setAuthErr] = useState(''); const [tab, setTab] = useState('overview'); const [stats, setStats] = useState(null); const [byStatus, setByStatus] = useState([]); const [recentEvents, setRecentEvents] = useState([]); const [organizers, setOrganizers] = useState([]); const [events, setEvents] = useState([]); const [notifSummary, setNotifSummary] = useState([]); const [wishlist, setWishlist] = useState([]); const [loading, setLoading] = useState(false); const [expandedFeature, setExpandedFeature] = useState(null); const [planUpdating, setPlanUpdating] = useState(null); const [eventStatusUpdating, setEventStatusUpdating] = useState(null); const [wishlistUpdating, setWishlistUpdating] = useState(null); // P5 Sponsors const [sponsors, setSponsors] = useState<{ profiles: SponsorProfile[]; seeking: SeekingEvent[]; matches: SponsorMatch[] } | null>(null); const [matchForm, setMatchForm] = useState({ event_id: '', sponsor_id: '', notes: '' }); const [matchSubmitting, setMatchSubmitting] = useState(false); // P6 KOL const [kol, setKol] = useState<{ profiles: KolProfile[]; briefs: KolBrief[] } | null>(null); // P3 Ambassadors const [ambassadors, setAmbassadors] = useState([]); // P4 Inquiries const [inquiries, setInquiries] = useState([]); function headers() { return { 'x-admin-secret': secret }; } async function login() { setAuthErr(''); try { const r = await fetch(`${API}/api/eventflow/admin/stats`, { headers: headers() }); if (!r.ok) { setAuthErr('Invalid secret'); return; } const data = await r.json(); setStats(data.stats); setByStatus(data.byStatus || []); setRecentEvents(data.recentEvents || []); setAuthed(true); } catch { setAuthErr('Connection error'); } } async function loadOrganizers() { setLoading(true); const r = await fetch(`${API}/api/eventflow/admin/organizers`, { headers: headers() }); const data = await r.json(); setOrganizers(data.organizers || []); setLoading(false); } async function loadEvents() { setLoading(true); const r = await fetch(`${API}/api/eventflow/admin/events`, { headers: headers() }); const data = await r.json(); setEvents(data.events || []); setLoading(false); } async function loadNotifications() { setLoading(true); const r = await fetch(`${API}/api/eventflow/admin/notifications`, { headers: headers() }); const data = await r.json(); setNotifSummary(data.summary || []); setLoading(false); } async function loadWishlist() { setLoading(true); const r = await fetch(`${API}/api/eventflow/wishlist?limit=100`, { headers: headers() }); const data = await r.json(); setWishlist(data.items || []); setLoading(false); } async function updatePlan(orgId: number, plan: string) { setPlanUpdating(orgId); await fetch(`${API}/api/eventflow/admin/organizers/${orgId}`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ plan }), }); await loadOrganizers(); setPlanUpdating(null); } async function updateEventStatus(eventId: number, status: string) { setEventStatusUpdating(eventId); await fetch(`${API}/api/eventflow/admin/events/${eventId}/status`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ status }), }); await loadEvents(); setEventStatusUpdating(null); } async function updateWishlistStatus(itemId: number, status: string) { setWishlistUpdating(itemId); await fetch(`${API}/api/eventflow/wishlist/${itemId}`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ status }), }); await loadWishlist(); setWishlistUpdating(null); } async function loadSponsors() { setLoading(true); const r = await fetch(`${API}/api/eventflow/admin/sponsors`, { headers: headers() }); const data = await r.json(); setSponsors({ profiles: data.sponsors || [], seeking: data.seeking || [], matches: data.matches || [] }); setLoading(false); } async function updateSponsorProfileStatus(id: number, status: string) { await fetch(`${API}/api/eventflow/admin/sponsors/${id}/status`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ status }), }); await loadSponsors(); } async function updateMatchStatus(id: number, status: string) { await fetch(`${API}/api/eventflow/admin/sponsors/matches/${id}/status`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ status }), }); await loadSponsors(); } async function createMatch(e: React.FormEvent) { e.preventDefault(); setMatchSubmitting(true); await fetch(`${API}/api/eventflow/admin/sponsors/match`, { method: 'POST', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ event_id: parseInt(matchForm.event_id), sponsor_id: parseInt(matchForm.sponsor_id), notes: matchForm.notes || undefined, }), }); setMatchForm({ event_id: '', sponsor_id: '', notes: '' }); setMatchSubmitting(false); await loadSponsors(); } async function loadKol() { setLoading(true); const r = await fetch(`${API}/api/eventflow/admin/kol`, { headers: headers() }); const data = await r.json(); setKol({ profiles: data.profiles || [], briefs: data.briefs || [] }); setLoading(false); } async function updateKolProfileStatus(id: number, status: string) { await fetch(`${API}/api/eventflow/admin/kol/${id}/status`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ status }), }); await loadKol(); } async function loadAmbassadors() { setLoading(true); const r = await fetch(`${API}/api/eventflow/admin/ambassadors`, { headers: headers() }); const data = await r.json(); setAmbassadors(data.ambassadors || []); setLoading(false); } async function updateAmbassadorProfileStatus(id: number, status: string) { await fetch(`${API}/api/eventflow/admin/ambassadors/${id}/status`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ status }), }); await loadAmbassadors(); } async function loadInquiries() { setLoading(true); const r = await fetch(`${API}/api/eventflow/admin/inquiries`, { headers: headers() }); const data = await r.json(); setInquiries(data.inquiries || []); setLoading(false); } async function updateInquiryStatus(id: number, status: string) { await fetch(`${API}/api/eventflow/admin/inquiries/${id}/status`, { method: 'PATCH', headers: { ...headers(), 'Content-Type': 'application/json' }, body: JSON.stringify({ status }), }); await loadInquiries(); } useEffect(() => { if (!authed) return; if (tab === 'organizers') loadOrganizers(); if (tab === 'events') loadEvents(); if (tab === 'notifications') loadNotifications(); if (tab === 'wishlist') loadWishlist(); if (tab === 'sponsors') loadSponsors(); if (tab === 'kol') loadKol(); if (tab === 'ambassadors') loadAmbassadors(); if (tab === 'inquiries') loadInquiries(); }, [tab, authed]); // ─── Login gate ───────────────────────────────────────────────────────────── if (!authed) { return (
🔐

EventFlow Admin

ExpLab internal panel

setSecret(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && login()} className="w-full px-4 py-3 bg-slate-800/60 border border-white/[0.08] rounded-xl text-white text-sm focus:outline-none focus:border-amber-500/50 transition-colors" /> {authErr &&

{authErr}

}

← Back to EventFlow

); } // ─── Admin Panel ───────────────────────────────────────────────────────────── const TABS: { key: Tab; label: string }[] = [ { key: 'overview', label: 'Overview' }, { key: 'organizers', label: `Organizers (${stats?.organizers ?? '…'})` }, { key: 'events', label: `Events (${stats?.events ?? '…'})` }, { key: 'notifications', label: 'Notifications' }, { key: 'wishlist', label: '💡 Wishlist' }, { key: 'sponsors', label: '🤝 Sponsors' }, { key: 'kol', label: '🌟 KOL' }, { key: 'ambassadors', label: '🎯 Ambassadors' }, { key: 'inquiries', label: '📨 Inquiries' }, { key: 'flows', label: '🗺️ Flows' }, { key: 'status', label: '🏗️ Platform Status' }, ]; return (
{/* Header */}
🎟 EventFlow / Admin ExpLab Staff
{/* Tabs */}
{TABS.map(({ key, label }) => ( ))}
{/* Overview */} {tab === 'overview' && stats && (
{/* KPIs */}
{[ { label: 'Organizers', value: stats.organizers, color: 'text-blue-400', icon: '👤' }, { label: 'Events', value: stats.events, color: 'text-amber-400', icon: '🎟' }, { label: 'Registered', value: stats.attendees, color: 'text-purple-400', icon: '📋' }, { label: 'Checked In', value: stats.checkins, color: 'text-green-400', icon: '✓' }, { label: 'Contacts', value: stats.contacts, color: 'text-cyan-400', icon: '📇' }, ].map(({ label, value, color, icon }) => (
{icon}
{value.toLocaleString()}
{label}
))}
{/* By Status */}

Events by Status

{byStatus.map(({ status, count }) => (
{status} {count}
))}

Recent Events

{recentEvents.map((e, i) => (
{e.title}
{e.organizer_name}
{e.registered} {e.status}
))}
{/* Check-in rate */} {stats.attendees > 0 && (

Platform Check-in Rate

{Math.round(stats.checkins / stats.attendees * 100)}%

{stats.checkins} checked in out of {stats.attendees} registered

)}
)} {/* Organizers */} {tab === 'organizers' && (
{loading ? (
Loading…
) : ( {organizers.map((org) => { const planInfo = PLAN_LABELS[org.plan] || PLAN_LABELS.free; return ( ); })}
Organizer Plan Events Attendees Joined
{org.name}
{org.email}
 {planInfo.label} {org.event_count} {org.attendee_count} {new Date(org.created_at).toLocaleDateString('en-HK', { month: 'short', day: 'numeric', year: 'numeric' })}
)}
)} {/* Events */} {tab === 'events' && (
{loading ? (
Loading…
) : ( {events.map((ev) => ( ))}
Event Organizer Date Registered Check-ins Visibility Status
{ev.title}
{ev.slug}
{ev.category && ( {ev.category} )}
{ev.organizer_name}
{ev.organizer_email}
 {new Date(ev.start_at).toLocaleDateString('en-HK', { month: 'short', day: 'numeric', year: 'numeric' })} {ev.registered} {ev.checked_in} {ev.is_public ? '🌐 Public' : '🔒 Private'} {ev.status}
View
)}
)} {/* Notifications */} {tab === 'notifications' && (
{loading ? (
Loading…
) : (

Notification Summary

All scheduled notifications across all events

{notifSummary.map((n, i) => ( ))}
Type Channel Status Count
{n.type} {n.channel} {n.status} {n.count}
)}
)} {/* Wishlist */} {tab === 'wishlist' && (
{loading ? (
Loading…
) : wishlist.length === 0 ? (
💡

No wishlist items yet.

) : (
{wishlist.map((item) => ( ))}
Idea Category Votes Author Date Status
{item.title}
{item.description && (
{item.description}
)} 		{item.category} {item.votes}
{item.author_name || 'Anonymous'}
{item.author_type}
 {new Date(item.created_at).toLocaleDateString('en-HK', { month: 'short', day: 'numeric' })}
)}
)} {/* Sponsors */} {tab === 'sponsors' && (
{loading ? (
Loading…
) : sponsors ? ( <> {/* Sponsor Profiles */}

Sponsor Profiles

{sponsors.profiles.length} total
{sponsors.profiles.length === 0 ? (
No sponsors registered yet.
) : ( {sponsors.profiles.map(sp => ( ))}
Company Contact Industries Budget Status
{sp.company}
{sp.website &&
{sp.website}
}
{sp.contact_name || '—'}
{sp.contact_email}
{sp.industries?.slice(0, 2).map(ind => ( {ind} ))} {(sp.industries?.length ?? 0) > 2 && ( +{sp.industries!.length - 2} )}
{sp.budget_range || '—'} {sp.status}
{sp.status !== 'approved' && ( )} {sp.status !== 'rejected' && ( )}
)}
{/* Seeking Events */}

Events Seeking Sponsors

{sponsors.seeking.length} open
{sponsors.seeking.length === 0 ? (
No events currently seeking sponsors.
) : ( {sponsors.seeking.map(ev => ( ))}
Event Date Organizer Packages Budget
{ev.title}
{ev.brief &&
{ev.brief}
} 		{new Date(ev.start_at).toLocaleDateString('en-HK', { month: 'short', day: 'numeric', year: 'numeric' })}
{ev.organizer_name}
{ev.organizer_email}
{ev.package_types?.map(p => ( {p} ))}
{ev.budget_range || '—'}
)}
{/* Create Match + Matches list */}

Create Match