Goa-gel-fullstack/fixes-prompt.md

# Claude Code Prompt: Frontend Overhaul — Blockchain Document Verification Platform (Angular)

## Context

You are working on the **Blockchain-based Document Verification Platform** for the **Government of Goa, India**. This is an Angular project that is already integrated with backend APIs but has significant UI/UX issues and buggy code. The backend APIs are being fixed in a parallel terminal — your job is **exclusively the frontend**.

This platform handles multi-department approval workflows for licenses/permits (starting with Resort License POC). Departments include Fire Department, Tourism Department, and Municipality. Each department has a custodial blockchain wallet managed by the platform.

**This is a demo-critical project. The UI must look world-class — think enterprise crypto/Web3 dashboard meets government platform. We need to impress government stakeholders.**

---

## Your Mission

### 1. Audit & Fix the Existing Angular Codebase
- Scan the entire frontend project for errors, broken imports, misconfigured modules, and failing builds
- Fix all TypeScript compilation errors, template errors, and runtime issues
- Ensure `ng serve` runs cleanly with zero errors and zero warnings
- Fix all existing API integrations — ensure HTTP calls, interceptors, auth headers (API Key + X-Department-Code), and error handling are working correctly
- Fix any broken routing, guards, lazy loading issues

### 2. Complete UI/UX Overhaul — World-Class Design (DBIM & GIGW 3.0 Compliant)

**⚠️ MANDATORY COMPLIANCE: India's Digital Brand Identity Manual (DBIM v3.0, Jan 2025) & GIGW 3.0**

This is a Government of India / Government of Goa platform. It MUST comply with the official DBIM (Digital Brand Identity Manual) published by MeitY and the GIGW 3.0 (Guidelines for Indian Government Websites and Apps). Below are the extracted requirements:

**Color Palette — DBIM Primary Colour Group + Functional Palette:**

The DBIM requires each government org to pick ONE primary colour group. For a blockchain/technology platform under Government of Goa, select the **Blue colour group** from the DBIM primary palette. This aligns with the "Deep Blue" (#1D0A69) used for Gov.In websites and gives the modern tech feel we need.

```
DBIM PRIMARY COLOUR GROUP — BLUE (selected for this project):
├── Key Colour (darkest):  Use for footer background, primary headers, sidebar
├── Mid variants:          Use for primary buttons, active states, links
├── Light variants:        Use for hover states, card accents, subtle backgrounds

DBIM FUNCTIONAL PALETTE (mandatory for all govt platforms):
├── Background Primary:    #FFFFFF (Inclusive White) — page backgrounds
├── Background Secondary:  #EBEAEA (Linen) — highlight sections, card backgrounds, quote blocks
├── Text on Light BG:      #150202 (Deep Earthy Brown) — NOT black, this is the official text color
├── Text on Dark BG:       #FFFFFF (Inclusive White)
├── State Emblem on Light:  #000000 (Black)
├── State Emblem on Dark:   #FFFFFF (White)
├── Deep Blue (Gov.In):    #1D0A69 — distinct government identity color
├── Success Status:        #198754 (Liberty Green) — approved, confirmed
├── Warning Status:        #FFC107 (Mustard Yellow) — pending, in-review
├── Error Status:          #DC3545 (Coral Red) — rejected, failed
├── Information Status:    #0D6EFD (Blue) — also for hyperlinks
├── Grey 01:               #C6C6C6
├── Grey 02:               #8E8E8E
├── Grey 03:               #606060
```

**IMPORTANT COLOR RULES:**
- The DBIM allows gradients of any two variants from the selected colour group
- Hyperlinks must use #0D6EFD (DBIM Blue) or the key colour of the selected group
- Footer MUST be in the key colour (darkest shade) of the selected primary group
- Status colors are FIXED by DBIM — do not use custom colors for success/warning/error
- Text color on light backgrounds must be #150202 (Deep Earthy Brown), NOT pure black

**Design Philosophy:**
- **Light theme primary** with professional government institutional aesthetics (DBIM mandates #FFFFFF as primary page background). Use the blue colour group for headers, sidebars, and accent areas to create the modern tech/blockchain feel
- For internal dashboards (department portal, admin portal), you MAY use a darker sidebar/nav with light content area — this is common in enterprise SaaS and not prohibited by DBIM
- Clean, modern, data-dense dashboard layouts
- Subtle card elevation with #EBEAEA (Linen) backgrounds for card sections
- Goa Government State Emblem + "Government of Goa" header (MANDATORY — see Logo section below)
- National Emblem of India (Ashoka Lions) at the top per DBIM lockup guidelines
- Smooth micro-animations (route transitions, card hovers, status changes)
- Fully responsive (desktop-first, but mobile must work for demo)
- WCAG 2.1 AA compliant contrast ratios (GIGW 3.0 mandates this)

**Logo & Header — DBIM Mandatory Requirements:**
- Since this is a State Government platform, use **DBIM Lockup Style appropriate for State Government**
- Display the **Goa State Emblem** (Vriksha Deep / diya lamp with coconut leaves, Ashoka Lions on top, supported by two hands) prominently in the header
- Sanskrit motto: "सर्वे भद्राणि पश्यन्तु मा कश्चिद् दुःखमाप्नुयात्" (may appear in emblem)
- Text: "Government of Goa" below or beside the emblem
- Platform name: "Blockchain Document Verification Platform" as secondary text
- Header must include: Logo lockup, search bar, language selection (अ | A), accessibility controls, navigation menu
- On dark backgrounds use white emblem; on white backgrounds use black emblem

**Footer — DBIM Mandatory Elements:**
- Footer MUST be in the darkest shade of the selected blue colour group
- Must include: Website Policies, Sitemap, Related Links, Help, Feedback, Social Media Links, Last Updated On
- Must state lineage: "This platform belongs to Government of Goa, India"
- Powered by / Technology credits may be included

**Typography — DBIM Mandatory:**
- Font: **Noto Sans** (DBIM mandates this for ALL Government of India digital platforms — it supports all Indian scripts)
- Desktop scale: H1=36px, H2=24px, H3/Subtitle=20px, P1=16px, P2=14px, Small=12px
- Mobile scale: H1=24px, H2=20px, H3=16px, P1=14px, P2=12px, Small=10px
- Weights: Bold, Semi Bold, Medium, Regular
- Body text must be left-aligned
- Tables: left-aligned text, right-aligned numbers, center-aligned column names
- Line height: 1.2 to 1.5 times the type size
- NO all-caps for long sentences or paragraphs (DBIM rule)
- British English throughout (GIGW 3.0 requirement)

**Icons — DBIM Guidelines:**
- Use icons from the DBIM Toolkit icon bank (https://dbimtoolkit.digifootprint.gov.in) where available
- Pick ONE icon style and stick with it: either Line icons or Filled icons (not mixed)
- Icons must be in the key colour (darkest shade) of selected group or Inclusive White
- Available sizes: standardized with 2px padding as per DBIM spec
- For icons not in DBIM toolkit, use **Lucide icons** or **Phosphor icons** but maintain consistent style
- Icons for significant actions MUST have text labels alongside them
- Include tooltips for all icons

**Accessibility — GIGW 3.0 / WCAG 2.1 AA Mandatory:**
- Screen reader support with proper ARIA labels
- Keyboard navigation for all interactive elements
- Skip to main content link
- Accessibility controls in header (text size adjustment, contrast toggle)
- Alt text for all images (max 140 characters, no "image of..." prefixes)
- Proper heading hierarchy (H1, H2, H3)
- Sufficient color contrast (4.5:1 for normal text, 3:1 for large text)
- No content conveyed through color alone — use icons + text + color

**Forms — DBIM Form Guidelines:**
- Instructions at the start of each form
- Fields arranged vertically (one per line)
- Mandatory fields marked with asterisk (*) or "Required"
- Multi-step forms for complex workflows (stepper UI)
- Labels above fields (not inline for complex forms), clickable labels
- Primary buttons prominent, secondary buttons less visual weight
- Validation feedback before submission
- Radio buttons instead of dropdowns for ≤6 options

**CSS Framework & Tooling:**
- Use **Tailwind CSS** as the primary utility framework — configure custom theme with DBIM color tokens
- Extend Tailwind config with the exact DBIM hex values above as custom colors (e.g., `dbim-brown: '#150202'`, `dbim-linen: '#EBEAEA'`, `dbim-success: '#198754'`, etc.)
- Use **Angular Material** or **PrimeNG** for complex components (data tables, dialogs, steppers, file upload) — pick whichever is already partially in use, or install PrimeNG if starting fresh
- Custom CSS/SCSS for subtle card effects, gradients within the blue colour group, and animations
- Google Fonts: **Noto Sans** (mandatory per DBIM) — load all needed weights (400, 500, 600, 700)

**Balancing Government Compliance with Modern Blockchain Aesthetic:**
The DBIM gives us a professional, trustworthy foundation. Layer the blockchain/Web3 feel through:
- Data visualization (charts, timelines, transaction hashes)
- Wallet cards with gradient backgrounds (using blue colour group variants)
- Blockchain transaction badges, hash displays, block explorers
- Modern micro-animations and transitions
- Dense, information-rich dashboards
- The blue colour group naturally gives a tech/blockchain feel while being DBIM compliant

### 3. Core Pages & Components to Build/Rebuild

#### A. **Login / Auth Page**
- Mock login for applicants
- Department login with API Key
- Admin login
- Animated background (subtle particle/grid animation or gradient mesh)
- Goa Government emblem + platform name prominent

#### B. **Applicant Portal**

**Dashboard:**
- Summary cards: Total Requests, Pending, Approved, Rejected (with animated counters)
- Recent activity timeline
- Quick action: "New Request" button (prominent CTA)

**New Request Page:**
- Multi-step form (stepper UI):
  1. Select License Type (Resort License for POC)
  2. Fill Application Details (metadata form)
  3. Upload Required Documents (drag-drop file upload with preview)
  4. Review & Submit
- Each step validates before proceeding
- Document upload shows file name, type, size, upload progress, and hash after upload

**Request Detail Page (`/requests/:id`):**
- Full request info card
- **Document section**: List of uploaded documents with version history, download links, and on-chain hash display
- **Approval Timeline**: Vertical timeline component showing each department's approval status, remarks, timestamps, and blockchain tx hash (clickable, links to block explorer or shows tx details modal)
- **Status Badge**: Large, prominent status indicator (DRAFT, SUBMITTED, IN_REVIEW, APPROVED, REJECTED, etc.) with appropriate colors and icons
- Action buttons: Upload New Document, Withdraw Request (if applicable)

#### C. **Department Portal**

**Dashboard:**
- Pending requests count (large, prominent number with pulse animation if > 0)
- **Department Wallet Section** (NEW — CRITICAL):
  - Display department's Ethereum wallet address (truncated with copy button)
  - Wallet balance (ETH or native token)
  - Recent transactions list (approval txs sent from this wallet)
  - Visual wallet card with gradient background (like a crypto wallet card)
- Queue of pending requests in a data table with sorting, filtering, search
- Recent approvals/rejections list

**Request Review Page:**
- Split layout: Documents on the left (with viewer/preview), approval form on the right
- Document viewer: PDF preview, image preview inline
- Action buttons: Approve, Reject, Request Changes — each with remarks textarea
- Show which documents this department is required to review (highlighted)
- Show other departments' approval statuses for this request
- Confirmation dialog before submitting approval (shows tx will be recorded on-chain)
- Should give fully a crypto wallet experience to the department portal. 

#### D. **Admin Portal**

**Dashboard:**
- System-wide stats: Total Requests, Active Workflows, Registered Departments, Blockchain Stats (block height, total txs, node count)
- Stat cards with sparkline mini-charts or progress indicators
- Recent system activity feed

**Department Management:**
- CRUD table for departments
- Each department row shows: Name, Code, Wallet Address, API Key status, Webhook status, Active/Inactive toggle
- Department detail page with wallet info, approval history, performance metrics

**Workflow Builder Page (`/admin/workflows/builder`):**
- **Visual drag-and-drop workflow builder** using a library like `ngx-graph`, `elkjs`, or a custom implementation with Angular CDK drag-drop
- Canvas where you can:
  - Add stages (nodes)
  - Connect stages with arrows (edges) showing sequential or parallel flow
  - Configure each stage: name, execution type (SEQUENTIAL/PARALLEL), departments assigned, required documents, completion criteria (ALL/ANY/THRESHOLD), rejection behavior, timeout
- Stage nodes should be visually distinct (colored by status type, department icons)
- Toolbar: Add Stage, Delete, Connect, Zoom, Pan, Auto-layout
- Right sidebar: Stage configuration panel (appears when a stage is selected)
- Preview mode: Shows how a request would flow through the workflow
- Save workflow as JSON, load existing workflows

**Audit Logs:**
- Searchable, filterable table of all system actions
- Filter by entity type, action, actor, date range
- Each row expandable to show old/new values diff

**Blockchain Explorer (Mini):**
- Recent blocks list
- Recent transactions list with type badges (MINT_NFT, APPROVAL, DOC_UPDATE, etc)
- Transaction detail view: from, to, block number, gas used, status, related entity link

#### E. **Shared Components**

- **Blockchain Transaction Badge**: Shows tx hash (truncated), status (confirmed/pending/failed), clickable to show details
- **Status Badge Component**: Reusable, colored badges for all status types
- **Wallet Card Component**: Reusable wallet display with address, balance, copy, QR
- **Document Hash Display**: Shows hash with copy button, verification icon
- **Approval Timeline Component**: Vertical timeline with department avatars, status, remarks
- **Notification Toast System**: For webhook events, approval updates, errors
- **Loading Skeletons**: Shimmer loading states for all data-heavy pages
- **Empty States**: Illustrated empty states (no requests yet, no pending items, etc.)

### 4. Wallet Section — Detailed Requirements

This is a key differentiator for the demo. Every department has a custodial Ethereum wallet.

**Department Wallet Dashboard Widget:**
```
┌─────────────────────────────────────────────┐
│  🔷 Fire Department Wallet                  │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │  Address: 0x1234...abcd  📋         │    │
│  │  Balance: 0.045 ETH                 │    │
│  │  Transactions: 23                   │    │
│  │  Last Active: 2 hours ago           │    │
│  └─────────────────────────────────────┘    │
│                                             │
│  Recent Transactions                        │
│  ├─ ✅ Approval TX  0xabc...  2h ago        │
│  ├─ ✅ Approval TX  0xdef...  1d ago        │
│  └─ ❌ Rejected TX  0x789...  3d ago        │
│                                             │
│  [View All Transactions]  [View on Explorer]│
└─────────────────────────────────────────────┘
```

**Admin Wallet Overview:**
- Table of all department wallets with balances
- Total platform wallet stats
- Fund department wallets action (for gas)

### 5. Technical Requirements

- **State Management**: Use NgRx or Angular Signals for complex state (requests list, workflow builder state, wallet data). Use simple services with BehaviorSubjects for simpler state.
- **API Integration**: All API calls should go through proper Angular services with:
  - HTTP interceptors for auth headers
  - Global error handling interceptor
  - Loading state management
  - Retry logic for blockchain tx endpoints (which may take a few seconds)
  - Proper TypeScript interfaces for ALL API request/response types
- **Routing**: Lazy-loaded feature modules for each portal (applicant, department, admin)
- **Guards**: Auth guards, role-based route guards
- **Real-time**: If WebSocket is available, use it for live status updates. Otherwise, implement polling for pending request updates on department dashboard.
- **Responsive**: CSS Grid + Tailwind responsive utilities. Sidebar collapses on mobile.
- **Accessibility**: ARIA labels, keyboard navigation, proper contrast ratios
- **Performance**: Virtual scrolling for long lists, lazy loading images, OnPush change detection where possible

### 6. File/Folder Structure Target

```
src/
├── app/
│   ├── core/
│   │   ├── interceptors/          # Auth, error, loading interceptors
│   │   ├── guards/                # Auth, role guards
│   │   ├── services/              # Auth, blockchain, wallet services
│   │   ├── models/                # TypeScript interfaces for all entities
│   │   └── constants/             # API URLs, status enums, colors
│   ├── shared/
│   │   ├── components/            # Reusable components (status-badge, wallet-card, tx-badge, etc.)
│   │   ├── pipes/                 # Truncate address, format date, etc.
│   │   ├── directives/            # Click-outside, tooltip, etc.
│   │   └── layouts/               # Shell layout with sidebar + topbar
│   ├── features/
│   │   ├── auth/                  # Login pages
│   │   ├── applicant/             # Applicant portal (dashboard, requests, documents)
│   │   ├── department/            # Department portal (dashboard, review, wallet)
│   │   ├── admin/                 # Admin portal (dashboard, departments, workflows, explorer)
│   │   └── workflow-builder/      # Visual workflow builder module
│   ├── app.component.ts
│   ├── app.routes.ts
│   └── app.config.ts
├── assets/
│   ├── images/                    # Goa emblem, logos, illustrations
│   ├── icons/                     # Custom SVG icons if needed
│   └── animations/                # Lottie files if used
├── styles/
│   ├── tailwind.css               # Tailwind imports
│   ├── _variables.scss            # Color palette, spacing, typography tokens
│   ├── _glassmorphism.scss        # Glass card mixins
│   ├── _animations.scss           # Keyframe animations
│   └── global.scss                # Global styles, resets
└── environments/
    ├── environment.ts
    └── environment.prod.ts
```

### 7. API Endpoints Reference

- refer the backend api docs for the api endpoints.

**Auth Headers for Department APIs:**
```
X-API-Key: {department_api_key}
X-Department-Code: {department_code}  // e.g., "FIRE_DEPT"
```

### 8. Priority Order

Execute in this order:
1. **Fix build errors** — get `ng serve` running clean
2. **Install and configure Tailwind CSS** (if not already)
3. **Create the shared layout** (dark theme shell with sidebar, topbar)
4. **Build shared components** (status badge, wallet card, tx badge, etc.)
5. **Rebuild Applicant Portal** pages
6. **Rebuild Department Portal** pages (with wallet section)
7. **Rebuild Admin Portal** pages
8. **Build Workflow Builder** (most complex, do last)
9. **Polish**: animations, loading states, empty states, error states
10. **Test all API integrations** end-to-end

### 9. Important Notes

- **DO NOT** change backend API contracts — the backend team is fixing those separately
- **DO** add proper error handling and fallback UI if an API is temporarily unavailable (show friendly error states, not blank pages)
- **DO** use mock/dummy data in the UI for any endpoints not yet ready, clearly mark with `// TODO: Replace with real API` comments. mock data should be realistic and should look like real data.
- **DO** make the wallet section functional even if the wallet API isn't ready — show realistic mock data with a clean UI- double check backend API docs for wallet API endpoints.
- **DO** ensure all environment-specific values (API base URL, etc.) come from environment files
- The demo scenario is: Applicant creates request → uploads docs → submits → departments review → approve/reject → NFT minted. **Every step of this flow must work and look incredible.**

### 10. Design References & Compliance Resources

**MANDATORY Government References (read these before designing):**
- DBIM v3.0 (Digital Brand Identity Manual): https://dbimtoolkit.digifootprint.gov.in/static/uploads/2025/10/8bc5c5028b2396be4cc07d0acba47ff7.pdf
- DBIM Toolkit (icons, templates, resources): https://dbimtoolkit.digifootprint.gov.in
- GIGW 3.0 (Guidelines for Indian Government Websites): https://guidelines.india.gov.in
- Goa State Emblem reference: https://dip.goa.gov.in/state-emblem/

**For Visual/UX Inspiration (adapt to DBIM constraints):**
- India's gov.in portal (reference for government header/footer pattern)
- Etherscan (block explorer aesthetics — transaction lists, hash displays)
- Aave/Uniswap dashboards (DeFi dashboard data density)
- Linear.app (clean enterprise SaaS patterns)
- Vercel dashboard (developer-focused, clean layout)

**Key Tailwind Config Additions for DBIM Compliance:**
```typescript
// tailwind.config.js — extend with DBIM tokens
theme: {
  extend: {
    colors: {
      'dbim': {
        'white': '#FFFFFF',        // Inclusive White
        'linen': '#EBEAEA',        // Background secondary
        'brown': '#150202',        // Deep Earthy Brown - text color
        'black': '#000000',        // Emblem on light BG
        'deep-blue': '#1D0A69',    // Gov.In identity blue
        'success': '#198754',      // Liberty Green
        'warning': '#FFC107',      // Mustard Yellow
        'error': '#DC3545',        // Coral Red
        'info': '#0D6EFD',         // Blue - info & hyperlinks
        'grey-1': '#C6C6C6',
        'grey-2': '#8E8E8E',
        'grey-3': '#606060',
      }
    },
    fontFamily: {
      'sans': ['Noto Sans', 'sans-serif'],  // DBIM mandatory font
    }
  }
}
```

The goal: When a government official sees this, they should think "this is the future of governance" — modern, trustworthy, transparent, and beautiful — **while recognizing it immediately as an official Government of India platform** because it follows DBIM branding standards they've seen on other government websites.

---

**Start by scanning the existing codebase, listing all issues, then fix and rebuild systematically following the priority order above. Ask me if you need clarification on any specific API contract or business logic.**