Phase 4: Web Portal Update — Implementation Plan

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Update the Next.js web portal to use the new Supabase tables (notifications, badges, recommendations), complete stub admin/vendor pages, and wire analytics to real data.

Architecture: The web portal already uses Supabase directly via @supabase/supabase-js + TanStack Query. Changes are mainly: (1) add notification management to admin dashboard, (2) add badge management, (3) complete vendor dashboard, (4) wire analytics with real KPI data.

Tech Stack: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Supabase JS, TanStack Query, Chart.js

Spec: flow_docs/docs/superpowers/specs/2026-03-29-supabase-only-migration-design.md Depends on: Phase 1-3 completed.

File Structure

Action	File	Purpose
Create	`flow_backend/web/app/admin/(dashboard)/badges/page.tsx`	Badge management CRUD
Create	`flow_backend/web/app/admin/(dashboard)/notifications/page.tsx`	System notification management
Modify	`flow_backend/web/app/admin/(dashboard)/analytics/page.tsx`	Wire real KPI data
Modify	`flow_backend/web/app/vendor/(dashboard)/dashboard/page.tsx`	Complete vendor dashboard
Modify	`flow_backend/web/app/vendor/(dashboard)/analytics/page.tsx`	Wire vendor analytics

Chunk 1: Admin Badge Management

Task 1: Create badge management page

Step 1: Read existing admin page patterns

Read an existing admin page (e.g., flow_backend/web/app/admin/(dashboard)/users/page.tsx or similar) to understand the component patterns, Supabase client usage, and layout conventions.

Step 2: Create badge management page

Create flow_backend/web/app/admin/(dashboard)/badges/page.tsx following existing patterns. Features:

List all badges from badges table with category filters
Create new badge (name, description, category, icon_url, criteria JSON)
Edit existing badge
View which users have earned each badge (from user_badges)
Delete badge
Step 3: Commit

cd /c/Users/elia-/Documents/flowproject/flow_backend
git add web/app/admin/\(dashboard\)/badges/
git commit -m "feat(web): add badge management page to admin dashboard
 
CRUD for badges table. View badge holders via user_badges.
Filter by category (explorer, social, organizer, veteran)."

Task 2: Create notification management page

Step 1: Create system notification page

Create flow_backend/web/app/admin/(dashboard)/notifications/page.tsx:

View all notifications (filterable by type, user, read status)
Send system-wide notification to all users or specific user
View notification delivery stats
Step 2: Commit

cd /c/Users/elia-/Documents/flowproject/flow_backend
git add web/app/admin/\(dashboard\)/notifications/
git commit -m "feat(web): add notification management to admin dashboard
 
View, filter, and send system notifications.
Inserts into notifications table (triggers send-notification Edge Function)."

Chunk 2: Analytics & Vendor Dashboard

Task 3: Wire admin analytics with real data

Step 1: Read current analytics page

Read flow_backend/web/app/admin/(dashboard)/analytics/page.tsx to understand what’s currently implemented.

Step 2: Wire charts to real Supabase data

Update the analytics page to query:

kpi_events table for event views, ticket purchases, referral conversions
profiles count for total users, new users (last 30 days)
events count for active events, total events
event_attendees for attendance rates
user_interactions for engagement metrics
recommendations_cache for recommendation coverage

Use TanStack Query for data fetching + Chart.js for visualization.

Step 3: Commit

cd /c/Users/elia-/Documents/flowproject/flow_backend
git add web/app/admin/\(dashboard\)/analytics/
git commit -m "feat(web): wire admin analytics to real Supabase KPI data
 
Charts for user growth, event metrics, attendance rates, engagement.
Data from kpi_events, profiles, events, event_attendees tables."

Task 4: Complete vendor dashboard

Step 1: Read current vendor dashboard

Read flow_backend/web/app/vendor/(dashboard)/dashboard/page.tsx and analytics/page.tsx.

Step 2: Wire vendor dashboard to real data

Update to show:

Vendor’s events (from events where organizer_id = current_user)
Ticket sales (from user_tickets joined with ticket_types)
Revenue stats (sum of amount_paid from user_tickets)
Attendee counts per event
PR referral performance (from referral_links + pr_conversions)
Step 3: Commit

cd /c/Users/elia-/Documents/flowproject/flow_backend
git add web/app/vendor/
git commit -m "feat(web): complete vendor dashboard with real data
 
Shows events, ticket sales, revenue, attendees, PR performance.
Queries events, user_tickets, ticket_types, referral_links tables."

Chunk 3: Verification

Task 5: Test all portal roles

Step 1: Test admin dashboard

cd /c/Users/elia-/Documents/flowproject/flow_backend/web
npm run dev

Navigate to admin dashboard, verify: badge management, notification management, analytics charts all load with real data.

Step 2: Test vendor dashboard

Step 3: Test moderator dashboard

Step 4: Update spec and commit

Phase 4: Web Portal Update — ✅ COMPLETED

Summary

Task	What	Est.
1	Badge management page	15 min
2	Notification management page	15 min
3	Wire admin analytics	15 min
4	Complete vendor dashboard	15 min
5	Test all roles	10 min

Total: ~70 minutes

Flow Docs

Explorer

2026-03-30-supabase-migration-phase4-web-update