Files
Goa-gel-fullstack/frontend-plan.md
Mahi 80566bf0a2 feat: Goa GEL Blockchain e-Licensing Platform - Full Stack Implementation
Complete implementation of the Goa Government e-Licensing platform with:

Backend:
- NestJS API with JWT authentication
- PostgreSQL database with Knex ORM
- Redis caching and session management
- MinIO document storage
- Hyperledger Besu blockchain integration
- Multi-department workflow system
- Comprehensive API tests (266/282 passing)

Frontend:
- Angular 21 with standalone components
- Angular Material + TailwindCSS UI
- Visual workflow builder
- Document upload with progress tracking
- Blockchain explorer integration
- Role-based dashboards (Admin, Department, Citizen)
- E2E tests with Playwright (37 tests)

Infrastructure:
- Docker Compose orchestration
- Blockscout blockchain explorer
- Development and production configurations
2026-02-07 10:23:29 -04:00

451 lines
171 KiB
Markdown

Here is Claude's plan:
╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌
Goa-GEL Full Stack Implementation Plan
Overview
Build a complete end-to-end working system: Angular 21 frontend, Solidity smart contracts, and full integration with the existing NestJS backend.
Current State Summary
- Backend: 11 modules, 50+ endpoints, fully implemented
- Frontend: Angular 21 skeleton - models exist, no components/services/routes
- Blockchain: 4 Besu nodes running, backend services coded, NO contracts deployed
- Docker: 8 containers operational (api, postgres, redis, minio, 4 besu nodes)
---
Phase 1: Core Infrastructure (Frontend)
1.1 Core Services
Create the foundation services that all features depend on.
┌────────────────────────────────────────────────────────┬──────────────────────────────────────────────────────────────────────┐
│ File │ Purpose │
├────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ frontend/src/app/core/services/storage.service.ts │ LocalStorage wrapper for tokens/user data │
├────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ frontend/src/app/core/services/api.service.ts │ HttpClient wrapper, handles {success,data,timestamp} response format │
├────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ frontend/src/app/core/services/auth.service.ts │ Login/logout, token management, current user state │
├────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ frontend/src/app/core/services/notification.service.ts │ MatSnackBar wrapper for toast notifications │
├────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ frontend/src/app/core/services/index.ts │ Barrel export │
└────────────────────────────────────────────────────────┴──────────────────────────────────────────────────────────────────────┘
Key Implementation Details:
- ApiService: Generic methods get<T>(), post<T>(), put<T>(), patch<T>(), delete<T>() that unwrap the {success, data} envelope
- AuthService: Exposes currentUser$ BehaviorSubject, isAuthenticated$, userRole$ observables
- Use environment.ts for apiBaseUrl and storage keys
1.2 HTTP Interceptors
┌─────────────────────────────────────────────────────────┬───────────────────────────────────────────────┐
│ File │ Purpose │
├─────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/core/interceptors/auth.interceptor.ts │ Adds Authorization: Bearer <token> header │
├─────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/core/interceptors/error.interceptor.ts │ Global error handling, 401 -> logout redirect │
├─────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/core/interceptors/index.ts │ Barrel export │
└─────────────────────────────────────────────────────────┴───────────────────────────────────────────────┘
1.3 Route Guards
┌────────────────────────────────────────────┬───────────────────────────────────────────────────────────┐
│ File │ Purpose │
├────────────────────────────────────────────┼───────────────────────────────────────────────────────────┤
│ frontend/src/app/core/guards/auth.guard.ts │ Blocks unauthenticated access, redirects to /login │
├────────────────────────────────────────────┼───────────────────────────────────────────────────────────┤
│ frontend/src/app/core/guards/role.guard.ts │ Blocks access based on user role (data.roles route param) │
├────────────────────────────────────────────┼───────────────────────────────────────────────────────────┤
│ frontend/src/app/core/guards/index.ts │ Barrel export │
└────────────────────────────────────────────┴───────────────────────────────────────────────────────────┘
1.4 Layouts
┌─────────────────────────────────────────────────────────────────┬─────────────────────────────────────────────────┐
│ File │ Purpose │
├─────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────┤
│ frontend/src/app/layouts/main-layout/main-layout.component.ts │ Sidenav + toolbar shell for authenticated pages │
├─────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────┤
│ frontend/src/app/layouts/main-layout/main-layout.component.html │ Template with mat-sidenav-container │
├─────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────┤
│ frontend/src/app/layouts/main-layout/main-layout.component.scss │ Layout styles │
├─────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────┤
│ frontend/src/app/layouts/auth-layout/auth-layout.component.ts │ Minimal centered layout for login │
├─────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────┤
│ frontend/src/app/layouts/auth-layout/auth-layout.component.html │ Template │
├─────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────┤
│ frontend/src/app/layouts/auth-layout/auth-layout.component.scss │ Styles │
└─────────────────────────────────────────────────────────────────┴─────────────────────────────────────────────────┘
1.5 App Configuration
┌────────────────────────────────┬───────────────────────────────────────────────┐
│ File │ Purpose │
├────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/app.config.ts │ Update to add provideHttpClient, interceptors │
├────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/app.routes.ts │ Root routes with lazy loading │
├────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/app.ts │ Update root component │
├────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/app.html │ Minimal template (just router-outlet) │
├────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/styles.scss │ Global Material theme + base styles │
└────────────────────────────────┴───────────────────────────────────────────────┘
Verification: ng serve runs without errors, hitting / redirects to /login
---
Phase 2: Authentication Feature
2.1 Auth Components
┌─────────────────────────────────────────────────────────────────────────────────┬─────────────────────────────────────────────────────┐
│ File │ Purpose │
├─────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────────┤
│ frontend/src/app/features/auth/auth.routes.ts │ Auth feature routes │
├─────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────────┤
│ frontend/src/app/features/auth/login-select/login-select.component.ts │ Choose login type (Department/DigiLocker) │
├─────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────────┤
│ frontend/src/app/features/auth/department-login/department-login.component.ts │ Department login form (apiKey, departmentCode) │
├─────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────────┤
│ frontend/src/app/features/auth/department-login/department-login.component.html │ Form template │
├─────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────────┤
│ frontend/src/app/features/auth/digilocker-login/digilocker-login.component.ts │ DigiLocker login (digilockerId, name, email, phone) │
├─────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────────────────┤
│ frontend/src/app/features/auth/digilocker-login/digilocker-login.component.html │ Form template │
└─────────────────────────────────────────────────────────────────────────────────┴─────────────────────────────────────────────────────┘
Login Flow:
1. /login -> LoginSelectComponent (two buttons: Department Login, DigiLocker Login)
2. Department: POST /auth/department/login with {apiKey, departmentCode}
3. DigiLocker: POST /auth/digilocker/login with {digilockerId, name?, email?, phone?}
4. On success: Store token, redirect to /dashboard
Test Credentials (from seed):
- Department: FIRE_SAFETY / fire_safety_api_key_12345
- Department: BUILDING_DEPT / building_dept_api_key_12345
- DigiLocker: Any digilockerId (auto-creates user)
Verification: Can login as department and applicant, token stored, redirects to dashboard
---
Phase 3: Dashboard & Requests
3.1 Shared Components
┌─────────────────────────────────────────────────────────────────────────────────┬───────────────────────────────────────────┐
│ File │ Purpose │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────┤
│ frontend/src/app/shared/components/page-header/page-header.component.ts │ Reusable page title + actions bar │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────┤
│ frontend/src/app/shared/components/status-badge/status-badge.component.ts │ Colored badge for request/approval status │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────┤
│ frontend/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts │ MatDialog confirmation modal │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────┤
│ frontend/src/app/shared/components/loading-spinner/loading-spinner.component.ts │ Centered spinner │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────┤
│ frontend/src/app/shared/components/empty-state/empty-state.component.ts │ "No data" placeholder │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────┤
│ frontend/src/app/shared/components/index.ts │ Barrel export │
└─────────────────────────────────────────────────────────────────────────────────┴───────────────────────────────────────────┘
3.2 Dashboard Feature
┌────────────────────────────────────────────────────────────────────────────────────────────┬──────────────────────────────────────┐
│ File │ Purpose │
├────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────┤
│ frontend/src/app/features/dashboard/dashboard.routes.ts │ Dashboard routes │
├────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────┤
│ frontend/src/app/features/dashboard/dashboard.component.ts │ Role-based dashboard switcher │
├────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────┤
│ frontend/src/app/features/dashboard/admin-dashboard/admin-dashboard.component.ts │ Admin stats (calls GET /admin/stats) │
├────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────┤
│ frontend/src/app/features/dashboard/department-dashboard/department-dashboard.component.ts │ Pending approvals list │
├────────────────────────────────────────────────────────────────────────────────────────────┼──────────────────────────────────────┤
│ frontend/src/app/features/dashboard/applicant-dashboard/applicant-dashboard.component.ts │ My requests list │
└────────────────────────────────────────────────────────────────────────────────────────────┴──────────────────────────────────────┘
Dashboard Content by Role:
- ADMIN: Platform stats cards (total requests, approvals, documents, departments), system health, recent activity
- DEPARTMENT: Pending requests needing approval, recent approvals made
- APPLICANT: My requests with status, quick action to create new request
3.3 Requests Feature
┌─────────────────────────────────────────────────────────────────────────────────┬───────────────────────────────────────────────┐
│ File │ Purpose │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/requests.routes.ts │ Request feature routes │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/request-list/request-list.component.ts │ Paginated list with filters │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/request-list/request-list.component.html │ MatTable with pagination │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/request-detail/request-detail.component.ts │ Full request view + timeline │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/request-detail/request-detail.component.html │ Tabs: Details, Documents, Approvals, Timeline │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/request-create/request-create.component.ts │ Create new request form │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/request-create/request-create.component.html │ Stepper form │
├─────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────┤
│ frontend/src/app/features/requests/services/request.service.ts │ Request API methods │
└─────────────────────────────────────────────────────────────────────────────────┴───────────────────────────────────────────────┘
Request Workflow:
1. Create (DRAFT) -> Upload documents -> Submit (SUBMITTED)
2. Department reviews -> Approve/Reject/Request Changes
3. If approved by all stages -> License minted as NFT
Verification: Can create request, view list, view details, submit request
---
Phase 4: Documents & Approvals
4.1 Documents Feature
┌──────────────────────────────────────────────────────────────────────────────────┬─────────────────────────────────────────┐
│ File │ Purpose │
├──────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────┤
│ frontend/src/app/features/documents/documents.routes.ts │ Document routes (nested under requests) │
├──────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────┤
│ frontend/src/app/features/documents/document-upload/document-upload.component.ts │ File upload with drag-drop │
├──────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────┤
│ frontend/src/app/features/documents/document-list/document-list.component.ts │ Documents table with download/delete │
├──────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────┤
│ frontend/src/app/features/documents/document-viewer/document-viewer.component.ts │ Preview modal (PDF/images) │
├──────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────┤
│ frontend/src/app/features/documents/services/document.service.ts │ Document API methods │
└──────────────────────────────────────────────────────────────────────────────────┴─────────────────────────────────────────┘
Document Types: FIRE_SAFETY_CERTIFICATE, BUILDING_PLAN, PROPERTY_OWNERSHIP, INSPECTION_REPORT, etc.
4.2 Approvals Feature
┌────────────────────────────────────────────────────────────────────────────────────┬───────────────────────────────────────┐
│ File │ Purpose │
├────────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────┤
│ frontend/src/app/features/approvals/approvals.routes.ts │ Approval routes │
├────────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────┤
│ frontend/src/app/features/approvals/pending-list/pending-list.component.ts │ Pending approvals for department │
├────────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────┤
│ frontend/src/app/features/approvals/approval-action/approval-action.component.ts │ Approve/Reject/Request Changes dialog │
├────────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────┤
│ frontend/src/app/features/approvals/approval-history/approval-history.component.ts │ Approval trail for a request │
├────────────────────────────────────────────────────────────────────────────────────┼───────────────────────────────────────┤
│ frontend/src/app/features/approvals/services/approval.service.ts │ Approval API methods │
└────────────────────────────────────────────────────────────────────────────────────┴───────────────────────────────────────┘
Approval Actions:
- Approve: Remarks (min 10 chars), select reviewed documents
- Reject: Remarks, rejection reason (enum)
- Request Changes: Remarks, list required documents
Verification: Department can approve/reject requests, applicant sees updated status
---
Phase 5: Admin Features
5.1 Departments Management
┌────────────────────────────────────────────────────────────────────────────────────────┬────────────────────────┐
│ File │ Purpose │
├────────────────────────────────────────────────────────────────────────────────────────┼────────────────────────┤
│ frontend/src/app/features/departments/departments.routes.ts │ Department routes │
├────────────────────────────────────────────────────────────────────────────────────────┼────────────────────────┤
│ frontend/src/app/features/departments/department-list/department-list.component.ts │ Departments table │
├────────────────────────────────────────────────────────────────────────────────────────┼────────────────────────┤
│ frontend/src/app/features/departments/department-form/department-form.component.ts │ Create/edit form │
├────────────────────────────────────────────────────────────────────────────────────────┼────────────────────────┤
│ frontend/src/app/features/departments/department-detail/department-detail.component.ts │ Stats + actions │
├────────────────────────────────────────────────────────────────────────────────────────┼────────────────────────┤
│ frontend/src/app/features/departments/services/department.service.ts │ Department API methods │
└────────────────────────────────────────────────────────────────────────────────────────┴────────────────────────┘
5.2 Workflows Management
┌────────────────────────────────────────────────────────────────────────────────────┬────────────────────────────────┐
│ File │ Purpose │
├────────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────┤
│ frontend/src/app/features/workflows/workflows.routes.ts │ Workflow routes │
├────────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────┤
│ frontend/src/app/features/workflows/workflow-list/workflow-list.component.ts │ Workflows table │
├────────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────┤
│ frontend/src/app/features/workflows/workflow-form/workflow-form.component.ts │ Create/edit with stage builder │
├────────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────┤
│ frontend/src/app/features/workflows/workflow-preview/workflow-preview.component.ts │ Visual workflow preview │
├────────────────────────────────────────────────────────────────────────────────────┼────────────────────────────────┤
│ frontend/src/app/features/workflows/services/workflow.service.ts │ Workflow API methods │
└────────────────────────────────────────────────────────────────────────────────────┴────────────────────────────────┘
5.3 Webhooks Management
┌───────────────────────────────────────────────────────────────────────────┬─────────────────────┐
│ File │ Purpose │
├───────────────────────────────────────────────────────────────────────────┼─────────────────────┤
│ frontend/src/app/features/webhooks/webhooks.routes.ts │ Webhook routes │
├───────────────────────────────────────────────────────────────────────────┼─────────────────────┤
│ frontend/src/app/features/webhooks/webhook-list/webhook-list.component.ts │ Webhooks table │
├───────────────────────────────────────────────────────────────────────────┼─────────────────────┤
│ frontend/src/app/features/webhooks/webhook-form/webhook-form.component.ts │ Register/edit form │
├───────────────────────────────────────────────────────────────────────────┼─────────────────────┤
│ frontend/src/app/features/webhooks/webhook-logs/webhook-logs.component.ts │ Delivery logs │
├───────────────────────────────────────────────────────────────────────────┼─────────────────────┤
│ frontend/src/app/features/webhooks/services/webhook.service.ts │ Webhook API methods │
└───────────────────────────────────────────────────────────────────────────┴─────────────────────┘
5.4 Audit Logs
┌────────────────────────────────────────────────────────────────────────┬──────────────────────────────┐
│ File │ Purpose │
├────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
│ frontend/src/app/features/audit/audit.routes.ts │ Audit routes │
├────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
│ frontend/src/app/features/audit/audit-list/audit-list.component.ts │ Filterable audit log table │
├────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
│ frontend/src/app/features/audit/entity-trail/entity-trail.component.ts │ Timeline for specific entity │
├────────────────────────────────────────────────────────────────────────┼──────────────────────────────┤
│ frontend/src/app/features/audit/services/audit.service.ts │ Audit API methods │
└────────────────────────────────────────────────────────────────────────┴──────────────────────────────┘
Verification: Admin can manage departments, workflows, webhooks, view audit logs
---
Phase 6: Smart Contracts
6.1 Hardhat Project Setup
┌──────────────────────────────┬──────────────────────────────────┐
│ File │ Purpose │
├──────────────────────────────┼──────────────────────────────────┤
│ blockchain/package.json │ Hardhat dependencies │
├──────────────────────────────┼──────────────────────────────────┤
│ blockchain/hardhat.config.ts │ Besu network config (chain 1337) │
├──────────────────────────────┼──────────────────────────────────┤
│ blockchain/tsconfig.json │ TypeScript config │
├──────────────────────────────┼──────────────────────────────────┤
│ blockchain/.env │ Private key for deployment │
└──────────────────────────────┴──────────────────────────────────┘
6.2 Solidity Contracts
┌───────────────────────────────────────────┬─────────────────────────────────────┐
│ File │ Purpose │
├───────────────────────────────────────────┼─────────────────────────────────────┤
│ blockchain/contracts/LicenseNFT.sol │ ERC721 license tokens │
├───────────────────────────────────────────┼─────────────────────────────────────┤
│ blockchain/contracts/ApprovalManager.sol │ Approval recording │
├───────────────────────────────────────────┼─────────────────────────────────────┤
│ blockchain/contracts/DocumentChain.sol │ Document hash verification │
├───────────────────────────────────────────┼─────────────────────────────────────┤
│ blockchain/contracts/WorkflowRegistry.sol │ Workflow registration (placeholder) │
└───────────────────────────────────────────┴─────────────────────────────────────┘
LicenseNFT.sol Functions:
function mint(address to, string calldata requestId, string calldata metadataUri) public returns (uint256)
function tokenOfRequest(string calldata requestId) public view returns (uint256)
function exists(uint256 tokenId) public view returns (bool)
function ownerOf(uint256 tokenId) public view returns (address)
function revoke(uint256 tokenId) public
function isRevoked(uint256 tokenId) public view returns (bool)
function getMetadata(uint256 tokenId) public view returns (string memory)
ApprovalManager.sol Functions:
function recordApproval(string calldata requestId, address departmentAddress, uint8 status, string calldata remarksHash, string[] calldata documentHashes) public returns (bytes32)
function getRequestApprovals(string calldata requestId) public view returns (Approval[] memory)
function invalidateApproval(bytes32 approvalId) public
function verifyApproval(bytes32 approvalId, string calldata remarksHash) public view returns (bool)
function getApprovalDetails(bytes32 approvalId) public view returns (Approval memory)
DocumentChain.sol Functions:
function recordDocumentHash(string calldata requestId, string calldata documentId, string calldata hash, uint256 version) public returns (bytes32)
function verifyDocumentHash(string calldata documentId, string calldata hash) public view returns (bool)
function getDocumentHistory(string calldata documentId) public view returns (DocumentRecord[] memory)
function getLatestDocumentHash(string calldata documentId) public view returns (string memory)
6.3 Deployment
┌──────────────────────────────────┬─────────────────────────────────────────────┐
│ File │ Purpose │
├──────────────────────────────────┼─────────────────────────────────────────────┤
│ blockchain/scripts/deploy.ts │ Deploy all contracts, output addresses │
├──────────────────────────────────┼─────────────────────────────────────────────┤
│ blockchain/scripts/update-env.ts │ Update backend/.env with deployed addresses │
└──────────────────────────────────┴─────────────────────────────────────────────┘
Verification: Contracts deployed, addresses in .env, backend connects successfully
---
Phase 7: Integration & Polish
7.1 Frontend-Blockchain Integration
┌───────────────────────────────────────────────────────────────────────────────────┬─────────────────────────────────────┐
│ File │ Purpose │
├───────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────┤
│ frontend/src/app/features/requests/request-detail/blockchain-info.component.ts │ Show NFT token ID, tx hash │
├───────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────┤
│ frontend/src/app/features/documents/document-list/verification-badge.component.ts │ Show blockchain verification status │
└───────────────────────────────────────────────────────────────────────────────────┴─────────────────────────────────────┘
7.2 Final Polish
┌───────────────────┬───────────────────────────────────────────────┐
│ Task │ Description │
├───────────────────┼───────────────────────────────────────────────┤
│ Error handling │ Consistent error messages across all features │
├───────────────────┼───────────────────────────────────────────────┤
│ Loading states │ Spinners on all async operations │
├───────────────────┼───────────────────────────────────────────────┤
│ Responsive design │ Mobile-friendly sidenav collapse │
├───────────────────┼───────────────────────────────────────────────┤
│ Form validation │ Client-side validation matching backend DTOs │
├───────────────────┼───────────────────────────────────────────────┤
│ Empty states │ Meaningful messages when no data │
└───────────────────┴───────────────────────────────────────────────┘
---
File Count Summary
┌──────────────────────────────┬───────────┬────────────────┐
│ Phase │ New Files │ Modified Files │
├──────────────────────────────┼───────────┼────────────────┤
│ Phase 1: Core │ 16 │ 4 │
├──────────────────────────────┼───────────┼────────────────┤
│ Phase 2: Auth │ 8 │ 0 │
├──────────────────────────────┼───────────┼────────────────┤
│ Phase 3: Dashboard/Requests │ 18 │ 0 │
├──────────────────────────────┼───────────┼────────────────┤
│ Phase 4: Documents/Approvals │ 12 │ 0 │
├──────────────────────────────┼───────────┼────────────────┤
│ Phase 5: Admin │ 20 │ 0 │
├──────────────────────────────┼───────────┼────────────────┤
│ Phase 6: Contracts │ 10 │ 1 │
├──────────────────────────────┼───────────┼────────────────┤
│ Phase 7: Integration │ 4 │ 2 │
├──────────────────────────────┼───────────┼────────────────┤
│ Total │ ~88 │ ~7 │
└──────────────────────────────┴───────────┴────────────────┘
---
Verification Checklist
After Phase 1-2
- ng serve runs without errors
- Can navigate to /login
- Department login works with test credentials
- DigiLocker login works with any ID
- Token stored in localStorage
- Authenticated routes protected
After Phase 3-4
- Dashboard shows role-appropriate content
- Can create new license request
- Can upload documents to request
- Can submit request for approval
- Department can see pending approvals
- Department can approve/reject requests
After Phase 5
- Admin can manage departments
- Admin can manage workflows
- Admin can view audit logs
- Webhooks can be configured and tested
After Phase 6
- Contracts deployed to Besu network
- Backend connects to contracts
- License minting works on approval
End-to-End Flow
- Applicant creates request -> uploads docs -> submits
- Department reviews -> approves
- License NFT minted on blockchain
- Applicant sees token ID and tx hash
- Document hashes verified on chain
---
Critical Files to Modify
Backend (update .env after contract deployment):
- backend/.env - Update CONTRACT_ADDRESS_* variables
Frontend (main configuration):
- frontend/src/app/app.config.ts - Add HTTP providers
- frontend/src/app/app.routes.ts - Define all routes
- frontend/src/styles.scss - Material theme
---
Implementation Order
Phase 1 (Core) -> Phase 2 (Auth) -> Phase 3 (Dashboard/Requests)
-> Phase 4 (Docs/Approvals) -> Phase 5 (Admin)
-> Phase 6 (Contracts) -> Phase 7 (Integration)