# 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**
```bash
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**
```bash
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**
```bash
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**
```bash
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**
```bash
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**
Login as vendor, verify: events list, ticket sales, revenue stats display correctly.
- [ ] **Step 3: Test moderator dashboard**
Login as moderator, verify: content moderation, reports, audit logs work.
- [ ] **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**