Frontend Development - React 19, Tailwind CSS v4, Recharts

Develop, enhance, and scale the existing MVP to production grade front-end integrated with backend and embedded with AI features.

1. Login & Identity Security
• Authentication Provider: Integrate Firebase Auth or Google Identity Platform.
• Multi-Factor Authentication (MFA): Mandatory for GRC. Enable SMS or Authenticator app (TOTP) verification.
• JWT & Secure Cookies: Move from localStorage to HttpOnly
• Server-Side RBAC:

2. Database Integration (The "Missing Link")
The frontend currently uses mockData.ts. You need to:
• API Layer: Build an Express.js backend.
• ORM/Query Builder: Connect your React app to the schema.sql you've defined.
• Multi-Tenant Enforcement

3. Table & Data Grid Enhancements
• Server-Side Operations: Tables must support pagination, sorting, and filtering on the server to handle thousands of risks or audit logs without crashing the browser.
• Data Export: Add "Export to Excel/PDF" buttons.
• Audit Trails (History): Every table row should have a "View History" button that shows the audit_logs table data for that specific record (who changed the risk rating, when, and why).

4. Advanced Forms
• Schema Validation: Use Zod or Yup to ensure that data entered into forms is perfectly formatted before it hits the database.
• Auto-Save / Drafts: Implementing a "Save as Draft" feature ensures users don't lose work if their session expires.
• Evidence Uploads: Integrate with Google Cloud Storage. When a user uploads the file should be stored in a tenant-isolated bucket, and only the URL should be saved in the database.

5. Reports & Dashboards
• Live Data Streams: Replace the static MOCK_DASHBOARD_STATS with real-time aggregations from your PostgreSQL database.
• Drill-Down Capability: Clicking a bar in a chart should navigate the user to the details.
• Scheduled Reporting: Implement a background worker (using Cloud Tasks) that generates a PDF and emails it to the team.


Summary of the "Production" Architecture
Feature Current (Prototype) Production (Grade)
Auth Mock / LocalStorage Firebase Auth / Secure Cookies
Data Static JSON Files PostgreSQL (Cloud SQL)
Logic Client-Side Only Express.js / Python Fast API + Serverless Cloud Run
Files N/A Google Cloud Storage (Isolated Buckets)
Multi-Tenancy UI Filter Database Row-Level Security (RLS)


Summary of the "Production" Flow
1. User logs in: Frontend sends credentials to FastAPI /token.
2. FastAPI validates: Returns a JWT containing user_id and tenant_id.
3. Frontend stores JWT: (Preferably in an HttpOnly cookie).
4. Data Request: Frontend calls /api/v1/risks.
5. FastAPI intercepts: Extracts tenant_id from JWT, queries Postgres with that filter, and returns only that tenant's data.