CYFER: Governance Edition — Phase Task Breakdown

Timeline: March 16 - March 22, 2026 (6 Days)

Team Size: 4 members Video Deadline: March 22, 2026 (11:59 PM) GitHub Repo: Must be public before submission Challenge: #3 — Transparency, Accountability, and Good Governance

---

Hackathon Judging Criteria & How CYFER Addresses Each

Criterion	Weight	How CYFER Addresses It
Mastery and Use of Software Concepts	30%	Custom SHA-256 blockchain, UCP consensus protocol, Next.js App Router, Supabase with RLS, Anthropic Claude AI API, TypeScript strict typing, server-side security
Novelty and Innovation	30%	Blockchain-backed document verification for LGUs is rare in PH gov tech. UCP (unanimous multi-official approval) is a novel accountability mechanism. AI summarizer bridges the literacy gap for citizens.
Real-world Impact and Viability	30%	Targets city/municipal LGUs in the Philippines. Directly addresses document tampering, lack of transparency, and single-point-of-failure publishing. Deployable on Vercel + Supabase free tier. SDG 16 aligned.
Compliance to Rules and Restrictions	10%	Must disclose AI use (Anthropic Claude API). Video 3-5 min. Public GitHub repo. Working prototype demonstrated (not slides-only).

Video Requirements Checklist (Due March 22, 11:59 PM)

• 3-5 minutes (strictly enforced — deductions for violations)
• Demonstrates working prototype (not slides-only)
• Explains the problem (corruption, document tampering, lack of transparency in PH LGUs)
• Explains the solution (CYFER — blockchain verification, UCP, AI summarizer)
• Shows real-world application (city/municipal government use case)
• Clearly states all technologies used:
  • Languages: TypeScript, SQL
  • Framework: Next.js 14+ (App Router)
  • Styling: Tailwind CSS
  • Database: Supabase (PostgreSQL)
  • Storage: Supabase Storage
  • Auth: Supabase Auth
  • Blockchain: Custom SHA-256 (Web Crypto API)
  • AI: Anthropic Claude API (claude-sonnet-4-20250514) ← must disclose
  • Icons: lucide-react
  • Charts: Custom bar chart (Recharts installed)
  • Deployment: Vercel
• Source code submitted via public GitHub repository
• README file included (encouraged by judges)

Key Selling Points to Emphasize in Video

1. Tamper-proof — SHA-256 hash stored on custom blockchain. Any modification is instantly detectable.
2. Unanimous Consensus — No single official can unilaterally publish. All must approve.
3. AI Accessibility — Complex ordinances/budgets summarized in plain language for citizens.
4. Public Verifiability — Anyone can verify any document with no account needed.
5. SDG 16 alignment — Peace, Justice and Strong Institutions.

---

Phase 0: Project Setup (Day 1 — March 16)

Task 0.1: Initialize Next.js Project

• Run npx create-next-app@latest cyfer with App Router, TypeScript, Tailwind CSS, ESLint
• Set up project folder structure:

cyfer/
├── src/
│   ├── app/
│   │   ├── (public)/              # Public-facing pages
│   │   │   ├── page.tsx           # Landing page
│   │   │   ├── documents/
│   │   │   │   ├── page.tsx       # Document portal
│   │   │   │   └── [id]/
│   │   │   │       └── page.tsx   # Document detail
│   │   │   ├── verify/
│   │   │   │   └── page.tsx       # Verification tool
│   │   │   ├── budget/
│   │   │   │   └── page.tsx       # Budget dashboard
│   │   │   └── audit/
│   │   │       └── page.tsx       # Audit trail
│   │   ├── (admin)/
│   │   │   ├── admin/
│   │   │   │   ├── page.tsx       # Admin dashboard
│   │   │   │   ├── upload/
│   │   │   │   │   └── page.tsx   # Upload document
│   │   │   │   ├── approvals/
│   │   │   │   │   └── page.tsx   # Pending approvals
│   │   │   │   ├── documents/
│   │   │   │   │   └── page.tsx   # Manage documents
│   │   │   │   ├── budget/
│   │   │   │   │   └── page.tsx   # Manage budget data
│   │   │   │   └── users/
│   │   │   │       └── page.tsx   # User management
│   │   │   └── login/
│   │   │       └── page.tsx       # Admin login
│   │   ├── api/
│   │   │   ├── documents/
│   │   │   │   └── route.ts       # Document CRUD
│   │   │   ├── blockchain/
│   │   │   │   └── route.ts       # Blockchain ops
│   │   │   ├── verify/
│   │   │   │   └── route.ts       # Verification
│   │   │   ├── consensus/
│   │   │   │   └── route.ts       # UCP workflow
│   │   │   ├── audit/
│   │   │   │   └── route.ts       # Audit trail
│   │   │   ├── budget/
│   │   │   │   └── route.ts       # Budget CRUD
│   │   │   ├── summarize/
│   │   │   │   └── route.ts       # AI document summarization
│   │   │   └── auth/
│   │   │       └── route.ts       # Authentication
│   │   ├── layout.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── ui/                    # Reusable UI components
│   │   │   ├── Button.tsx
│   │   │   ├── Card.tsx
│   │   │   ├── Badge.tsx
│   │   │   ├── Modal.tsx
│   │   │   ├── Table.tsx
│   │   │   ├── Input.tsx
│   │   │   └── Navbar.tsx
│   │   ├── documents/
│   │   │   ├── DocumentCard.tsx
│   │   │   ├── DocumentList.tsx
│   │   │   ├── DocumentDetail.tsx
│   │   │   └── VerificationResult.tsx
│   │   ├── budget/
│   │   │   ├── BudgetChart.tsx
│   │   │   └── BudgetTable.tsx
│   │   ├── audit/
│   │   │   └── AuditTimeline.tsx
│   │   ├── consensus/
│   │   │   ├── ApprovalCard.tsx
│   │   │   └── ApprovalStatus.tsx
│   │   └── admin/
│   │       ├── AdminSidebar.tsx
│   │       ├── UploadForm.tsx
│   │       └── StatsOverview.tsx
│   ├── lib/
│   │   ├── supabase.ts            # Supabase client
│   │   ├── blockchain.ts          # Blockchain logic
│   │   ├── hash.ts                # SHA-256 hashing utils
│   │   ├── ai.ts                  # AI API client + summarization prompt
│   │   └── types.ts               # TypeScript types
│   └── utils/
│       ├── formatters.ts          # Date, number formatters
│       └── constants.ts           # App constants
├── public/
│   └── assets/                    # Static assets, logos
├── .env.local                     # Environment variables
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Task 0.2: Set Up Supabase

• ✅ Create Supabase project (Singapore region, free tier)
• ✅ Create all database tables per the PRD schema:
  • ✅ users
  • ✅ documents
  • ✅ blockchain
  • ✅ approvals
  • ✅ transactions
  • ✅ budget_data
• ✅ Set up Supabase Storage bucket documents (public, 50MB limit, 2 policies)
• ✅ Configure Row Level Security (RLS) policies:
  • ✅ Public read access for published documents, budget data, audit trail
  • ✅ Admin-only write access for uploads, approvals, budget management
  • ✅ Security fixes applied (002_security_fixes.sql — no user_metadata in RLS)
• ✅ Set up Supabase Auth (email provider, confirm email OFF)
• ✅ Store Supabase URL, anon key, and service role key in .env.local
• ✅ Seed data inserted and verified (3 admins, genesis block, budget data, sample document)
• ✅ Blockchain hash bug fixed (timestamp normalization + JSONB key sort)

Task 0.3: Install Dependencies

• ✅ Installed @supabase/supabase-js — Supabase client
• ✅ Installed recharts — Charts for budget dashboard
• ✅ Installed lucide-react — Icons
• ✅ Installed date-fns — Date formatting
• ✅ Installed @anthropic-ai/sdk — Anthropic Claude API for AI summarization
• ✅ Note: Did NOT install crypto-js — using built-in Web Crypto API instead

Task 0.4: Set Up Core Utilities

• ✅ Implement lib/supabase.ts — Supabase client initialization (browser + server clients)
• ✅ Implement lib/hash.ts — SHA-256 hashing function for files (hashFile, hashBuffer, hashString)
• ✅ Implement lib/blockchain.ts — Core blockchain class:
  • ✅ createGenesisBlock()
  • ✅ addBlock(data)
  • ✅ getLatestBlock()
  • ✅ validateChain()
  • ✅ computeHash(block)
  • ✅ initialize() — bonus helper method
• ✅ Implement lib/types.ts — All TypeScript interfaces and enums
• ✅ Implement lib/ai.ts — Anthropic Claude API client with summarization prompt template
• ✅ Implement utils/formatters.ts — Date/number formatting helpers (9 utility functions)
• ✅ Implement utils/constants.ts — App-wide constants (categories, statuses, file constraints, etc.)
• ✅ Create app/api/summarize/route.ts — AI summarization API endpoint

Task 0.5: Seed Demo Data

• ✅ Created supabase/migrations/001_initial_schema.sql — Complete database schema (6 tables)
• ✅ Created supabase/policies/001_rls_policies.sql — Row-Level Security policies
• ✅ Created supabase/seeds/001_demo_data.sql — Demo data:
  • ✅ 3 admin accounts (Mayor, Treasurer, Municipal Secretary)
  • ✅ Sample budget data for "Municipality of Sample City" (8 categories, FY 2026)
  • ✅ Genesis block in blockchain table
  • ✅ 1 sample published ordinance with full approval chain
  • ✅ Sample audit trail transactions
• ✅ Created SUPABASE_SETUP.md — Complete step-by-step setup guide (10 steps + troubleshooting)
• ✅ Updated .env.local.example — Added ANTHROPIC_API_KEY

✅ Phase 0 COMPLETE! Build verified (TypeScript compilation successful)

Estimated Time: 3-4 hours Assignee: Team lead + backend-focused member

---

Phase 1: Core Backend — Blockchain + Documents + UCP (Day 2 — March 17)

Task 1.1: Document Upload API

Endpoint: POST /api/documents

• ✅ Accept file upload (multipart form data)
• ✅ Compute SHA-256 hash of the uploaded file
• ✅ Store file in Supabase Storage
• ✅ Create document record in documents table with status pending_approval
• ✅ Add a new block to the blockchain with the document hash
• ✅ Create a transaction entry in the audit trail
• ✅ Create approval requests in approvals table for all other admins

Task 1.2: Document Retrieval APIs

Endpoints:

• ✅ GET /api/documents — List all published documents (public) or all documents (admin)
• ✅ GET /api/documents/[id] — Get single document with approval chain details
• ✅ Support query params: category, search, status, page, limit

Task 1.3: Document Verification API

Endpoint: POST /api/verify

• ✅ Accept file upload from citizen
• ✅ Compute SHA-256 hash of the uploaded file
• ✅ Search blockchain for matching hash
• ✅ Return verification result:
  • ✅ Match found → verified: true with document details
  • ✅ No match → verified: false with tampering warning
• ✅ Log verification action in the audit trail

Task 1.4: Blockchain Integrity API

Endpoint: GET /api/blockchain/validate

• ✅ Fetch all blocks from the blockchain table
• ✅ Run chain validation (verify hashes and previous_hash links)
• ✅ Return validation result: valid: true/false with details on any broken links

Task 1.5: UCP Consensus API

Endpoints:

• ✅ GET /api/consensus — Get all documents pending approval for current admin (with ?status= filter)
• ✅ POST /api/consensus/[documentId]/approve — Approve a document
• ✅ POST /api/consensus/[documentId]/reject — Reject a document with reason
• ✅ On approve: Check if ALL admins have now approved → if yes, change document status to published and record on blockchain
• ✅ On reject: Change document status to rejected, log reason
• ✅ All actions recorded in audit trail

Task 1.6: Audit Trail API

Endpoints:

• ✅ GET /api/audit — Get all transactions, newest first, with pagination
• ✅ Support filters: action_type, date_range, document_id

Task 1.7: Budget Data API

Endpoints:

• ✅ GET /api/budget — Get budget data for dashboard (public)
• ✅ POST /api/budget — Add/update budget entries (admin only)
• ✅ GET /api/budget?summary=true — Aggregated data for charts (integrated as query param)

Task 1.8: Authentication API

Endpoints:

• ✅ POST /api/auth/login — Admin login via Supabase Auth
• ✅ POST /api/auth/logout — Admin logout
• ✅ GET /api/auth — Get current user session
• ✅ Authentication middleware helper (lib/auth.ts) to protect admin routes

Task 1.9: AI Document Summarization API

Endpoint: POST /api/summarize

• ✅ Accept document_id in request body
• ✅ Fetch document content/text from Supabase Storage
• ✅ Send document text to Anthropic Claude API with structured summarization prompt
• ✅ Prompt should request: key points, affected parties, budget implications (if any), plain-language explanation
• ✅ Return structured AI summary as JSON
• ✅ Handle errors gracefully (API rate limits, unavailable service, oversized documents)
• Cache summaries in memory or DB to avoid re-calling AI for same document (deferred — not critical for demo)
• ✅ API key stored server-side only (ANTHROPIC_API_KEY in env)

Additional files created:

• ✅ lib/audit.ts — Reusable audit trail logging helper with hash-linked transactions
• ✅ lib/auth.ts — Authentication middleware for admin route protection (Bearer token + Supabase Auth)

✅ Phase 1 COMPLETE! Build verified (Next.js 16.1.6 Turbopack compilation successful)

Estimated Time: Full day (8-10 hours) Assignee: 2 backend-focused members working in parallel

---

Phase 2: Frontend — Public Pages (Day 2-3 — March 17-18)

Task 2.1: Global Layout & Navigation

• ✅ Create responsive Navbar with CYFER branding/logo (Shield icon + gold accent)
• ✅ Navigation links: Home, Documents, Verify, Budget, Audit Trail
• ✅ Admin login link
• ✅ Footer with SDG 16 badge and team info
• ✅ Set up global styles, color scheme, and Tailwind theme
  • Deep navy primary (#1a2332), white backgrounds, green verified, red tampered, gold accent (#d4a843)
• ✅ Mobile-responsive hamburger menu
• ✅ Styled UI components: Button (5 variants), Card, Badge (6 variants), Input, Table, Modal

Task 2.2: Landing Page (/)

• ✅ Hero section: CYFER tagline + brief description of the platform
• ✅ Feature highlights: 4 cards for core features with lucide-react icons
• ✅ Call-to-action: "Verify a Document" button and "Browse Documents" button
• ✅ CTA section for Budget Dashboard and Audit Trail
• ✅ SDG 16 badge in hero section

Task 2.3: Public Document Portal (/documents)

• ✅ Search bar with real-time filtering
• ✅ Filter dropdown: category
• ✅ Document card grid showing: title, category badge, upload date, verification icon, uploader name/department, hash preview
• ✅ Pagination with page controls
• ✅ Loading skeleton animation
• ✅ Click through to document detail page

Task 2.4: Document Detail Page (/documents/[id])

• ✅ Full document metadata display (file info, hash, dates, uploader)
• ✅ File hash displayed prominently in styled box
• ✅ Approval chain sidebar: shows each official's approval status, messages, timestamps
• ✅ Download button
• ✅ "Verify This Document" shortcut link
• ✅ "AI Summary" button — calls /api/summarize, shows loading spinner, displays structured summary card with TLDR, key points, affected parties, budget implications
• ✅ Summary card with clean typography

Task 2.5: Verification Tool (/verify)

• ✅ File upload dropzone (drag & drop + click to upload)
• ✅ Upload triggers hash computation and blockchain lookup
• ✅ Result display:
  • ✅ Verified: Green checkmark, matching document details
  • ✅ Tampered/Not Found: Red warning with shake animation
• ✅ Loading animation during verification
• ✅ "How it works" explainer section (3-step process)

Task 2.6: Budget Dashboard (/budget)

• ✅ Horizontal bar chart: Budget allocation by sector (percentage bars)
• ✅ Summary cards: Total budget (PHP formatted), fiscal year, number of categories
• ✅ Table view of all budget categories with amounts and percentages
• Pie chart using Recharts (deferred — bar chart sufficient for demo)

Task 2.7: Audit Trail Page (/audit)

• ✅ Timeline view of all transactions with vertical connector line
• ✅ Each entry shows: action type icon, description, timestamp, transaction hash
• ✅ Color-coded badges by action type (upload=blue, approve=green, reject=red, verify=warning)
• ✅ Filter by action type dropdown
• ✅ Pagination

✅ Phase 2 COMPLETE! Build verified (Next.js 16.1.6 — all 26 routes compiled successfully)

Estimated Time: 10-12 hours across 2 days Assignee: 2 frontend-focused members

---

Phase 3: Frontend — Admin Pages (Day 3 — March 18)

Task 3.1: Admin Login Page (/login)

• ✅ Clean login form: email + password
• ✅ Supabase Auth integration
• ✅ Redirect to admin dashboard on success
• ✅ Error handling for invalid credentials

Task 3.2: Admin Layout & Sidebar

• ✅ Sidebar navigation: Dashboard, Upload, Approvals, Documents, Budget, Users
• ✅ Current user display with role badge
• ✅ Logout button
• Breadcrumb navigation (deferred — sidebar navigation sufficient for demo)

Task 3.3: Admin Dashboard (/admin)

• ✅ Stats overview cards: pending approvals, total documents, published count
• ✅ Recent activity feed (last 10 audit trail entries)
• ✅ Quick action buttons: Upload Document, View Pending Approvals

Task 3.4: Document Upload Page (/admin/upload)

• ✅ Upload form with fields:
  • ✅ Document title (text input)
  • ✅ Category (dropdown: ordinance, budget, resolution, contract, permit, other)
  • ✅ Description (textarea)
  • ✅ File upload (drag & drop zone)
• ✅ On submit:
  • ✅ Show hash being generated (visual feedback — "Uploading & Hashing..." button state)
  • ✅ Show "Sent for approval" confirmation with success message
• ✅ Validation: required fields check before submission

Task 3.5: Approval Queue (/admin/approvals)

• ✅ List of documents pending the current admin's approval
• ✅ Each card shows: document title, category, description, file name, upload date, file preview link
• ✅ Approve button (green) and Reject button (red) with prompt for rejection reason
• ✅ After action: card removed from pending list
• Show approval progress: "2 of 3 officials approved" (deferred — requires additional API data)

Task 3.6: Document Management (/admin/documents)

• ✅ Table of all documents with status column (pending, published, rejected)
• ✅ Filter by status dropdown
• ✅ Click to view details (links to public document detail page)
• ✅ Displays document hash and creation date

Task 3.7: Budget Management (/admin/budget)

• ✅ Form to add budget entries: category, amount, description, fiscal year
• ✅ Table of existing entries with amounts and descriptions
• ✅ Changes reflected on public budget dashboard (same API)

Task 3.8: User Management (/admin/users) — Super Admin Only

• ✅ List of admin users (displays current user info from localStorage)
• Add new admin form (deferred — requires Supabase Admin API integration)
• ✅ Role display with badge
• ✅ Simple table view with super admin notice

Additional files created:

• ✅ app/(admin)/admin/layout.tsx — Admin layout wrapper with sidebar + content area
• ✅ components/admin/AdminSidebar.tsx — Full sidebar with nav links, user info, logout, role badge

✅ Phase 3 COMPLETE! Build verified (Next.js 16.1.6 — all 28 routes compiled successfully)

Estimated Time: 8-10 hours Assignee: 2 frontend members (can overlap with Phase 2)

---

Phase 4: Integration & Polish (Day 4 — March 19)

Infrastructure Completed (March 17) ✅

• ✅ Supabase project created (Singapore region, free tier)
• ✅ Database schema deployed (001_initial_schema.sql — all 6 tables)
• ✅ RLS policies applied (001_rls_policies.sql + 002_security_fixes.sql)
• ✅ Supabase Auth configured (email provider, confirm email OFF)
• ✅ Storage bucket documents created (public, 50MB, 2 policies)
• ✅ .env.local configured with Supabase URL, anon key, service role key, Anthropic key
• ✅ Blockchain hash bug fixed in lib/blockchain.ts:
  • Timestamps normalized to Unix ms (JS ISO string ≠ Supabase-returned format)
  • JSON keys sorted before hashing (PostgreSQL JSONB doesn't preserve insertion order)
• ✅ Production build verified — 26 routes compiled, 0 errors
• ✅ All tests passing (test-supabase.ts — connection, tables, blockchain validation)

⚠️ Known Issues & Lessons Learned (IMPORTANT for Phase 4)

1. Auth Users — Do NOT use seed SQL to create auth.users

The seed SQL (001_demo_data.sql) attempts to insert directly into auth.users and auth.identities with hardcoded UUIDs. This does not work reliably. The Supabase new secret key format (sb_secret_*) also does not support auth.admin.* API methods.

What actually worked: Create auth users manually in Supabase Dashboard → Authentication → Users → Add User (with "Auto Confirm User" checked).

Current admin credentials:

Role	Email	Password	Auth UUID
Super Admin	mayor@samplecity.gov.ph	DemoPassword123!	d471eda7-f4a7-42ab-b835-541756fce3e3
Admin	treasurer@samplecity.gov.ph	DemoPassword123!	159291dd-7701-4264-995b-6e31295bf930
Admin	clerk@samplecity.gov.ph	DemoPassword123!	c28d6485-36a0-42ef-b144-6ebf4fab3ad0

public.users table has been synced with these real auth UUIDs.

2. RLS Infinite Recursion on public.users

The Super admins can manage users RLS policy queries public.users to check role. When a client that has called signInWithPassword() tries to write to public.users, the policy evaluates and queries the same table → infinite recursion.

Fix: Always use a separate Supabase client instance for DB writes after calling auth methods. The session from signInWithPassword contaminates the client's subsequent requests.

In API routes: createServerClient() (service role key) bypasses RLS entirely — this is correct and will work fine. The issue only occurs in scripts that mix auth + DB operations on the same client.

3. Sample Document & Budget Data — uploaded_by is NULL

During the auth user cleanup, documents.uploaded_by and budget_data.uploaded_by were set to NULL to clear FK constraints. The sample data still exists but has no uploader linked.

Action needed in Task 4.5: Re-seed proper demo documents with correct uploaded_by UUIDs (use the real UUIDs above, not the old hardcoded ones).

4. Service Role Key Format

Supabase now issues sb_secret_* format secret keys instead of JWT format. This key works for all database operations via supabase-js, but does NOT work with supabase.auth.admin.* methods. For admin auth operations, use the Supabase Dashboard directly.

Task 4.1: Connect Frontend to Backend

• ✅ Wire all public pages to their respective API endpoints (already wired from Phase 2/3)
• ✅ Wire all admin pages to their respective API endpoints (already wired from Phase 2/3)
• ✅ Fix: Verify API now returns fileHash in response to match frontend expectations
• ✅ Fix: Users page data access corrected (json.data instead of json.data.user)
• ✅ Fix: Admin dashboard now shows correct published count (separate API call for published vs total)
• ✅ Fix: Admin layout now has client-side auth guard (redirects to /login if no token)
• ✅ Fix: VerificationResult type updated to include fileHash field
• ✅ Production build verified — 28 routes compiled, 0 errors
• ✅ Fix uploaded_by = NULL — updated 1 document + 8 budget entries with mayor UUID
• ✅ Test complete flows end-to-end:
  • ✅ Admin login → upload document → other admins approve → document appears on public portal
  • ✅ Citizen clicks "AI Summary" on a published document → summary generates correctly (AI summarization route now extracts file content from Supabase Storage with best-effort PDF/DOCX/TXT parsing)
  • ✅ Citizen verifies document → verified result (with fileHash displayed)
  • ✅ Citizen verifies tampered document → tampered result (different hash, not found)
  • ✅ View budget dashboard with real data (8 categories, ₱60M total, FY 2026)
  • ✅ View audit trail with real entries (11 transactions — uploads, approvals, verifications, publish)
  • ✅ Blockchain validation — 6 blocks, chain integrity verified, all hashes valid

Task 4.2: Tamper Detection Demo

• ✅ Enhanced verification page with clear verified vs tampered visual states:
  • ✅ Verified: Green checkmark with matching document details and "Hashes match" confirmation
  • ✅ Tampered/Not Found: Red warning with shake animation, AlertTriangle icon, detailed explanation
  • ✅ "Try Another" button for easy re-testing during demo
  • ✅ "Why Tamper Detection Matters" explainer card for video context
  • ✅ Enhanced "How Verification Works" section with step-by-step explanation
• ✅ Demo flow: Upload original document → Verified (green). Modify file → Upload again → Tampered (red).

Task 4.3: UI Polish

• ✅ Consistent spacing, typography, and color usage across all pages
• ✅ Loading states for all async operations (skeleton loaders or spinners) — already in place from Phase 2/3
• ✅ Empty states for pages with no data — already in place from Phase 2/3
• ✅ Toast notification system (ToastProvider + useToast hook) — applied to login, upload, approvals
• ✅ Hover effects, transitions, and micro-animations:
  • ✅ Button active:scale-[0.98] press effect and transition-all
  • ✅ Card hover with scale and border-accent highlight
  • ✅ Drag-and-drop zones with scale-[1.01] on drag-over
  • ✅ animate-fade-in-up, animate-slide-down, animate-pulse-glow, animate-checkmark animations
  • ✅ Staggered animations for list items (.stagger-1 through .stagger-6)
  • ✅ Error shake animation on validation errors
  • ✅ Custom scrollbar styling, selection color (gold accent)
  • ✅ Global smooth transitions for all interactive elements
• ✅ CYFER branding applied consistently (Shield icon + gold accent, navy primary)

Task 4.4: Responsive Design Check

• ✅ Admin sidebar now responsive — hidden on mobile with hamburger menu toggle + slide-in overlay
• ✅ Admin layout padding adjusted for mobile (pt-16 for menu button clearance)
• ✅ All public pages already responsive from Phase 2 (flex-col/row, grid breakpoints, mobile navbar)
• ✅ Desktop layout optimized for video recording at standard resolutions

Task 4.5: Seed Production Demo Data

• ✅ Created supabase/seeds/002_production_demo_data.sql with realistic demo data:
  • ✅ 7 government documents (6 published + 1 pending approval):
    • Municipal Ordinance (Public Market Operating Hours)
    • Annual Budget Appropriation FY 2026
    • Resolution (Road Improvement Project)
    • Contract (Medical Supplies Procurement)
    • Environmental Compliance Certificate (Permit)
    • Ordinance (Anti-Littering and Clean Streets Program)
    • Resolution (Senior Citizen Discount Extension) — pending approval for UCP demo
  • ✅ Full budget data already in place (8 categories, ₱60M total, FY 2026)
  • ✅ 25 audit trail entries (uploads, approvals, publishes, verifications, tamper detection)
  • ✅ 3 admin accounts with different departments (Mayor, Treasurer, Municipal Secretary)
  • ✅ Full approval chains for all published documents (3 approvals each)
  • ✅ Blockchain blocks for all published documents
  • ✅ 1 pending document with partial approvals (for live UCP demo)

Additional Phase 4 improvements:

• ✅ UploadForm.tsx component rebuilt as full reusable component (was previously a stub)
• ✅ AI summarization route (/api/summarize) now extracts file content from Supabase Storage (PDF/DOCX/TXT parsing)
• ✅ AI summarizer demo fallback — when Claude API is unavailable (no credits), returns realistic pre-written summaries matched by document category (ordinance, budget, resolution, contract, permit)
• ✅ Landing page enhanced with "Verification Flow" section, trust indicators, staggered animations
• ✅ Upload success page now shows generated SHA-256 hash with checkmark animation
• ✅ Blockchain Explorer page (/blockchain) — new public page to visualize the chain:
  • Visual chain with connected blocks and hash linkage
  • Stats bar: total blocks, chain integrity status, published docs count, latest hash
  • Click-to-expand blocks: current hash (green), previous hash (blue), nonce, block data JSON
  • Color-coded action badges: uploads (amber), approvals (blue), publications (green), genesis (gold)
  • "How the Blockchain Works" explainer section
  • Added to navbar between Verify and Budget
• ✅ Production build verified — 29 routes compiled, 0 errors (Next.js 16.1.6 Turbopack)

✅ Phase 4 COMPLETE! Build verified (Next.js 16.1.6 Turbopack — all 29 routes compiled successfully)

Estimated Time: 6-8 hours Assignee: Full team

---

Phase 5: Demo Prep & Video Script (Day 5 — March 20)

Task 5.1: Full Demo Run-Through

• ✅ Run through the entire demo flow — verified all pages render correctly at 1440x900
• ✅ Identify and fix any bugs or visual glitches — no blocking bugs found
• ✅ Ensure all data looks realistic and professional — seeded demo data in place
• ✅ Time the demo — scripted to ~4:00 minutes (within 3–5 min limit)
• ✅ Production build verified — 28 routes compiled, 0 errors

Task 5.2: Write Video Script

• ✅ Full video script written at docs/VIDEO_SCRIPT.md with 9 scenes and timestamps:
  • Scene 1: The Problem (0:00–0:20) — governance transparency challenges
  • Scene 2: Introducing CYFER (0:20–0:40) — landing page + core concept
  • Scene 3: Public Document Portal (0:40–1:10) — browse & document details
  • Scene 4: Upload & UCP Approval (1:10–2:00) — admin flow + consensus demo
  • Scene 5: AI Summarizer (2:00–2:30) — Claude AI plain-language summaries
  • Scene 6: Verification & Tamper Detection (2:30–3:15) — verified vs tampered
  • Scene 7: Budget Dashboard (3:15–3:35) — budget visualization
  • Scene 8: Tech Stack & SDGs (3:35–3:50) — technology disclosure + SDG 16
  • Scene 9: Closing (3:50–4:00) — team credits
• ✅ Demo login credentials included in script
• ✅ Timestamp summary table for quick reference

Task 5.3: Prepare Video Recording Environment

• ✅ Demo preparation checklist created at docs/DEMO_CHECKLIST.md:
  • ✅ Pre-recording environment setup (browser, resolution, notifications)
  • ✅ Browser window configuration (public + admin + optional second admin)
  • ✅ Demo data verification steps
  • ✅ Files needed (original, tampered, new upload)
  • ✅ Recording tools guidance (OBS/Loom, 1080p, MP4)
  • ✅ Demo flow rehearsal checklist with timing per step
  • ✅ Post-recording checklist (overlays, music, export)
  • ✅ Troubleshooting guide for common issues
  • ✅ Hackathon compliance checklist (video requirements, tech disclosure, GitHub)

Additional Phase 5 deliverables:

• ✅ docs/VIDEO_SCRIPT.md — Full 9-scene video script with voiceover text, actions, and timestamps (~4:00 total)
• ✅ docs/DEMO_CHECKLIST.md — Complete preparation checklist covering setup, rehearsal, recording, post-production, and compliance

✅ Phase 5 COMPLETE! Video script and demo materials ready for recording.

Estimated Time: 4-5 hours Assignee: Full team

---

Phase 6: Record & Submit (Day 6 — March 21-22)

Task 6.1: Record Video (March 21)

• Record screen captures of the full demo
• Record voiceover (or use on-screen text/captions)
• Multiple takes if needed — keep the best

Task 6.2: Edit Video (March 21)

• Combine screen recordings with intro/outro
• Add text overlays for feature names, tech stack, SDGs
• Add background music (royalty-free)
• Keep total length within hackathon requirements
• Export in required format/resolution

Task 6.3: Review & Submit (March 22)

• Full team reviews the final video
• Check all requirements are met:
  • Working prototype demonstrated
  • Key features and functionality highlighted
  • Problem explained
  • Proposed solution explained
  • Real-world application shown
  • SDGs mentioned
  • Technologies listed (languages, frameworks, APIs, platforms, AI tools)
• Submit before deadline

Estimated Time: 6-8 hours across 2 days Assignee: Full team (video editing by designated member)

---

Task Assignment Suggestion (4 Members)

Member	Primary Focus	Key Tasks
Member 1 (Francis Gabriel)	Full-stack lead / Backend	Phase 0 setup, Phase 1 APIs (documents, blockchain, verification), Phase 4 integration
Member 2 (Om Shanti)	Frontend lead	Phase 2 public pages (portal, verify, budget, audit), Phase 4 UI polish
Member 3	Backend + Database	Phase 0 Supabase setup, Phase 1 APIs (consensus, audit, budget, auth), Phase 4 demo data
Member 4	Frontend + Video	Phase 3 admin pages, Phase 2 landing page, Phase 5 video script, Phase 6 recording/editing

Daily Standups: Quick 10-minute sync at start of each day to review progress and blockers.

---

Risk Mitigation

Risk	Mitigation
Supabase setup takes too long	Fall back to local SQLite with Prisma
Team member unavailable	Each member has a buddy who understands their tasks
Feature not ready in time	Cut budget dashboard first (least critical for demo), then audit trail
Video quality issues	Record backup takes, keep video simple with screen recording + voiceover
Deployment fails	Demo from localhost — still valid as working prototype

---

Feature Priority (If Running Out of Time)

1. MUST HAVE: Document upload + hashing + verification + tamper detection (this IS the demo)
2. MUST HAVE: UCP approval workflow (this is the differentiator)
3. SHOULD HAVE: AI Document Summarizer
4. SHOULD HAVE: Audit trail / transaction chain
5. NICE TO HAVE: Budget transparency dashboard
6. NICE TO HAVE: Polished landing page with animations