FedMCP - Federal Parliamentary Information

# Phase 4.3 Complete: Key Frontend Pages **Completed:** 2025-11-02 ## Overview Phase 4.3 implemented all remaining key pages for the CanadaGPT frontend, completing the core user experience. The frontend is now feature-complete with comprehensive pages for exploring Canadian parliamentary data, MP accountability, bill tracking, and lobbying transparency. ## Pages Implemented ### 1. Bills List Page (`/bills/page.tsx`) **Lines:** 140 | **Type:** Client Component **Features:** - Search bills by title with real-time filtering - Status filter dropdown (Passed, Royal Assent, In Committee, First/Second/Third Reading) - Color-coded status badges (green for passed, blue for readings, yellow for in committee) - Sponsor information with party affiliation - Date formatting with date-fns - Responsive grid layout - Empty state handling **GraphQL Integration:** ```typescript useQuery(GET_BILLS, { variables: { where: { title_CONTAINS: searchTerm, status: statusFilter, }, options: { limit: 50, sort: [{ introduced_date: 'DESC' }], }, }, }); ``` **UI Components:** - Search input with Search icon - Status select dropdown - Clickable Card components linking to bill details - Loading and error states --- ### 2. Bill Detail Page (`/bills/[session]/[number]/page.tsx`) **Lines:** 260 | **Type:** Client Component with Dynamic Routes **Features:** - Dynamic routing with session and bill number parameters - Bill header with large status badge - Full bill summary (if available) - Recent votes widget with yea/nay counts and ThumbsUp/ThumbsDown icons - Lobbying activity widget showing organizations and meeting counts - Legislative timeline with key dates (introduced, current stage, passed, royal assent) - Sponsor link to MP profile - Date formatting throughout **Parallel GraphQL Queries:** ```typescript // Main bill data useQuery(GET_BILL, { variables: { number: params.number.toUpperCase(), session: params.session, }, }); // Lobbying data (custom query) useQuery(GET_BILL_LOBBYING, { variables: { billNumber: params.number.toUpperCase(), session: params.session, }, }); ``` **Key Widgets:** - **Votes Widget:** Shows recent votes with results, dates, and yea/nay counts - **Lobbying Widget:** Displays organizations lobbying on this bill with event counts - **Timeline:** Visual timeline of bill's legislative journey --- ### 3. Lobbying Registry Page (`/lobbying/page.tsx`) **Lines:** 180 | **Type:** Client Component **Features:** - Statistics cards showing registry scope (100K+ registrations, 350K+ communications, 15K+ lobbyists) - Search by organization name with real-time filtering - Active-only checkbox filter for current registrations - Subject matters display as tags (showing first 5, with overflow count) - Registration details (reg number, registrant name, effective date) - Active status badge - Information section explaining lobbying registry **GraphQL Query (Inline):** ```typescript const GET_LOBBY_REGISTRATIONS = gql` query GetLobbyRegistrations($where: LobbyRegistrationWhere, $options: LobbyRegistrationOptions) { lobbyRegistrations(where: $where, options: $options) { id reg_number client_org_name registrant_name effective_date active subject_matters } } `; ``` **UI Highlights:** - Info cards with Building, Users, FileText icons - Search input with Search icon - Active filter checkbox with custom styling - Subject matter tags with slice(0, 5) overflow handling - TrendingUp icon for information section --- ### 4. About Page (`/about/page.tsx`) **Lines:** 270 | **Type:** Static Page **Features:** - Mission statement explaining CanadaGPT's purpose - Feature cards highlighting key capabilities: - **Unified Data:** 1.6M+ data points from multiple sources - **Real-time Updates:** Nightly data sync - **Open Source:** Fully transparent code and methodology - Data sources section with external links: - OpenParliament (API for MPs, bills, votes, debates) - LEGISinfo (official bill status and legislative history) - Lobbying Registry (100K+ registrations, 350K+ communications) - MP Proactive Disclosure (quarterly expense reports) - CanLII (case law and legislation, optional with API key) - Technology stack explanation: - Neo4j Graph Database (1.6M nodes, 10M relationships) - GraphQL API (auto-generated from Neo4j schema) - Next.js Frontend (server-rendered React) - Google Cloud Platform (scalable infrastructure) - Open Source & Transparent section with GitHub link - Get Involved section with Report Issue and Email Us CTAs **Icons Used:** - MapleLeafIcon (size="lg") for header - Database, Zap, Shield for feature cards - ExternalLink for data source links - Github for open source section - Users for contact section **Design Notes:** - No GraphQL queries (all static content) - Can be statically generated for instant page loads - External links use `target="_blank"` and `rel="noopener noreferrer"` - Placeholder GitHub URL (`https://github.com/yourusername/FedMCP`) - should be updated - Placeholder email (`contact@canadagpt.ca`) - should be updated --- ## Total Frontend Code **Phase 4.1 (Core Pages):** ~1,110 lines **Phase 4.3 (Additional Pages):** ~850 lines **Total:** ~1,960 lines of TypeScript/TSX ## Complete Page Inventory The frontend now includes: 1. **Landing Page** (`/page.tsx`) - Hero, features, stats, CTA 2. **Dashboard** (`/dashboard/page.tsx`) - Overview widgets and quick stats 3. **MPs List** (`/mps/page.tsx`) - Browse all MPs with search and filters 4. **MP Detail** (`/mps/[id]/page.tsx`) - Individual MP profile with biography, committees, expenses 5. **Bills List** (`/bills/page.tsx`) - Browse bills with search and status filters ✅ 6. **Bill Detail** (`/bills/[session]/[number]/page.tsx`) - Bill details with votes and lobbying ✅ 7. **Lobbying Registry** (`/lobbying/page.tsx`) - Browse lobbying registrations ✅ 8. **About** (`/about/page.tsx`) - Mission, data sources, technology, contact ✅ ## GraphQL Queries Used From `lib/queries.ts`: - `GET_BILLS` - List bills with filtering and sorting - `GET_BILL` - Individual bill details with votes and sponsor - `GET_BILL_LOBBYING` - Custom query for lobbying activity on a bill Inline: - `GET_LOBBY_REGISTRATIONS` - Lobbying registry search (lobbying/page.tsx) ## Design System Usage All pages use components from `@canadagpt/design-system`: - `Card` with `elevated` prop for depth - `MapleLeafIcon` for Canadian branding - `Header` and `Footer` for consistent layout - `Loading` component for loading states - Lucide icons for UI elements ## Tailwind Design Tokens Consistently used throughout: - `text-text-primary` - Main text color - `text-text-secondary` - Secondary text (descriptions) - `text-text-tertiary` - Tertiary text (metadata) - `bg-bg-elevated` - Elevated backgrounds - `bg-bg-secondary` - Secondary backgrounds - `bg-bg-overlay` - Overlay backgrounds - `border-border-subtle` - Subtle borders - `border-border-emphasis` - Emphasized borders - `text-accent-red` - Canada red accent (#DC2626) - `hover:text-accent-red-hover` - Hover state for accent ## Status Badge Color System Implemented consistently across Bills List and Bill Detail pages: - **Green (Passed/Royal Assent):** `bg-green-500/20 text-green-400` - Indicates successful completion of legislative process - **Blue (Readings):** `bg-blue-500/20 text-blue-400` - Indicates bill is in active legislative stages (First/Second/Third Reading) - **Yellow (In Committee/Other):** `bg-yellow-500/20 text-yellow-400` - Indicates bill is under review or in intermediate stages ## Technical Highlights ### Parallel Data Loading Bill detail page uses two separate `useQuery` hooks to load bill data and lobbying data in parallel, allowing partial rendering while lobbying data loads. ### Dynamic Routing Bill detail page uses Next.js 15 App Router dynamic routes with `[session]` and `[number]` parameters, demonstrating proper parameter extraction and type safety. ### Real-time Filtering All list pages (Bills, Lobbying) use controlled inputs with `useState` to update GraphQL query variables in real-time as user types. ### Responsive Design All pages use responsive Tailwind classes (`sm:`, `md:`, `lg:`) for optimal viewing on mobile, tablet, and desktop. ### Loading States All data-driven pages implement proper loading, error, and empty states for better UX. ## Next Steps Phase 4.3 is now **complete**. The frontend is feature-complete and ready for deployment once the GraphQL API is deployed to Cloud Run. **Remaining phases:** - **Phase 2.2:** Initial data load to Neo4j (populate database with real data) - **Phase 3.2:** Deploy GraphQL API to Cloud Run (make API accessible over HTTPS) - **Phase 4.4:** Deploy frontend to Cloud Run (deploy Next.js app) - **Phase 5:** Set up scheduled data pipeline (nightly data sync with Cloud Scheduler) - **Phase 6:** CI/CD pipeline (GitHub Actions + Cloud Build) - **Phase 7:** Monitoring & documentation - **Phase 8:** Beta testing & launch **Recommended next phase:** Phase 2.2 (Initial data load) to populate the Neo4j database with real parliamentary data, enabling the GraphQL API to serve actual data instead of empty results.