feat: Runtime configuration and Docker deployment improvements

Frontend:
- Add runtime configuration service for deployment-time API URL injection
- Create docker-entrypoint.sh to generate config.json from environment variables
- Update ApiService, ApprovalService, and DocumentViewer to use RuntimeConfigService
- Add APP_INITIALIZER to load runtime config before app starts

Backend:
- Fix init-blockchain.js to properly quote mnemonic phrases in .env file
- Improve docker-entrypoint.sh with health checks and better error handling

Docker:
- Add API_BASE_URL environment variable to frontend container
- Update docker-compose.yml with clear documentation for remote deployment
- Reorganize .env.example with clear categories (REQUIRED FOR REMOTE, PRODUCTION, AUTO-GENERATED)

Workflow fixes:
- Fix DepartmentApproval interface to match backend schema
- Fix stage transformation for 0-indexed stageOrder
- Fix workflow list to show correct stage count from definition.stages

Cleanup:
- Move development artifacts to .trash directory
- Remove root-level package.json (was only for utility scripts)
- Add .trash/ to .gitignore
This commit is contained in:
Mahi
2026-02-08 18:44:05 -04:00
parent 2c10cd5662
commit d9de183e51
171 changed files with 10236 additions and 8386 deletions

View File

@@ -1,38 +1,93 @@
<!-- Skip to main content - GIGW 3.0 Accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<div class="auth-layout">
<!-- Animated Background -->
<div class="animated-background">
<!-- Floating Blockchain Nodes -->
<div class="node node-1"></div>
<div class="node node-2"></div>
<div class="node node-3"></div>
<div class="node node-4"></div>
<div class="node node-5"></div>
<div class="node node-6"></div>
<div class="landing-page">
<!-- Immersive Background with Blockchain Visualization -->
<div class="hero-background">
<!-- Animated Gradient Mesh -->
<div class="gradient-mesh"></div>
<!-- Connection Lines -->
<svg class="connections" viewBox="0 0 100 100" preserveAspectRatio="none">
<line class="connection" x1="20" y1="30" x2="50" y2="50" />
<line class="connection" x1="50" y1="50" x2="80" y2="25" />
<line class="connection" x1="80" y1="25" x2="70" y2="70" />
<line class="connection" x1="70" y1="70" x2="30" y2="80" />
<line class="connection" x1="30" y1="80" x2="20" y2="30" />
<line class="connection" x1="50" y1="50" x2="70" y2="70" />
<line class="connection" x1="50" y1="50" x2="30" y2="80" />
</svg>
<!-- Floating Blockchain Network -->
<div class="blockchain-network">
<!-- Primary Nodes -->
<div class="bc-node primary" style="--x: 15%; --y: 20%; --delay: 0s; --size: 20px;"></div>
<div class="bc-node primary" style="--x: 75%; --y: 15%; --delay: 1.5s; --size: 24px;"></div>
<div class="bc-node primary" style="--x: 85%; --y: 60%; --delay: 3s; --size: 18px;"></div>
<div class="bc-node primary" style="--x: 25%; --y: 70%; --delay: 2s; --size: 22px;"></div>
<div class="bc-node primary" style="--x: 50%; --y: 45%; --delay: 0.5s; --size: 28px;"></div>
<!-- Gradient Overlay -->
<div class="gradient-overlay"></div>
<!-- Secondary Nodes -->
<div class="bc-node secondary" style="--x: 35%; --y: 30%; --delay: 0.8s; --size: 12px;"></div>
<div class="bc-node secondary" style="--x: 65%; --y: 35%; --delay: 2.3s; --size: 10px;"></div>
<div class="bc-node secondary" style="--x: 45%; --y: 75%; --delay: 1.2s; --size: 14px;"></div>
<div class="bc-node secondary" style="--x: 90%; --y: 30%; --delay: 3.5s; --size: 8px;"></div>
<div class="bc-node secondary" style="--x: 10%; --y: 50%; --delay: 1.8s; --size: 10px;"></div>
<!-- Connection Lines SVG -->
<svg class="network-connections" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="lineGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="rgba(99, 102, 241, 0.8)" />
<stop offset="100%" stop-color="rgba(168, 85, 247, 0.4)" />
</linearGradient>
<linearGradient id="lineGrad2" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(16, 185, 129, 0.6)" />
<stop offset="100%" stop-color="rgba(99, 102, 241, 0.3)" />
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="1" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Network Connections -->
<path class="connection-line" d="M15,20 Q30,35 50,45" filter="url(#glow)"/>
<path class="connection-line" d="M50,45 Q65,30 75,15" filter="url(#glow)"/>
<path class="connection-line" d="M75,15 Q85,35 85,60" filter="url(#glow)"/>
<path class="connection-line" d="M85,60 Q60,65 50,45" filter="url(#glow)"/>
<path class="connection-line" d="M50,45 Q35,60 25,70" filter="url(#glow)"/>
<path class="connection-line" d="M25,70 Q15,45 15,20" filter="url(#glow)"/>
<path class="connection-line secondary" d="M35,30 Q42,38 50,45" filter="url(#glow)"/>
<path class="connection-line secondary" d="M65,35 Q58,40 50,45" filter="url(#glow)"/>
<path class="connection-line secondary" d="M45,75 Q47,60 50,45" filter="url(#glow)"/>
<!-- Data Packets Animation -->
<circle class="data-packet" r="1">
<animateMotion dur="4s" repeatCount="indefinite" path="M15,20 Q30,35 50,45 Q65,30 75,15"/>
</circle>
<circle class="data-packet" r="1">
<animateMotion dur="5s" repeatCount="indefinite" path="M75,15 Q85,35 85,60 Q60,65 50,45 Q35,60 25,70"/>
</circle>
<circle class="data-packet" r="0.8">
<animateMotion dur="3s" repeatCount="indefinite" path="M25,70 Q15,45 15,20 Q30,35 50,45"/>
</circle>
</svg>
</div>
<!-- Floating Particles -->
<div class="particles">
<div class="particle" style="--x: 10%; --y: 15%; --duration: 20s;"></div>
<div class="particle" style="--x: 20%; --y: 80%; --duration: 25s;"></div>
<div class="particle" style="--x: 80%; --y: 25%; --duration: 22s;"></div>
<div class="particle" style="--x: 90%; --y: 85%; --duration: 28s;"></div>
<div class="particle" style="--x: 40%; --y: 10%; --duration: 18s;"></div>
<div class="particle" style="--x: 60%; --y: 90%; --duration: 24s;"></div>
</div>
<!-- Ambient Light Effects -->
<div class="ambient-light light-1"></div>
<div class="ambient-light light-2"></div>
<div class="ambient-light light-3"></div>
</div>
<!-- Main Content Container -->
<div class="auth-container">
<!-- Left Side - Branding -->
<div class="auth-branding">
<div class="branding-content">
<div class="emblem-wrapper">
<!-- Main Content Area -->
<div class="landing-content">
<!-- Top Navigation Bar -->
<header class="top-nav">
<div class="nav-brand">
<div class="emblem-container">
<img
src="assets/images/goa-emblem.svg"
alt="Government of Goa Emblem"
@@ -40,80 +95,105 @@
onerror="this.style.display='none'"
/>
</div>
<div class="brand-text">
<span class="brand-name">Government of Goa</span>
<span class="brand-subtitle">Blockchain e-Licensing Platform</span>
</div>
</div>
<div class="nav-status">
<div class="status-indicator">
<span class="status-dot"></span>
<span class="status-label">Network Active</span>
</div>
</div>
</header>
<h1 class="brand-title">
<span class="title-line">Government of Goa</span>
<span class="title-highlight">Blockchain e-Licensing</span>
<!-- Hero Section with Login -->
<main class="hero-section" id="main-content" role="main">
<!-- Left Column - Hero Content -->
<div class="hero-content">
<div class="hero-badge">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
</svg>
<span>Powered by Hyperledger Besu</span>
</div>
<h1 class="hero-title">
<span class="title-line-1">Secure &amp; Transparent</span>
<span class="title-line-2">License Management</span>
</h1>
<p class="brand-tagline">
Secure, Transparent, Immutable
<p class="hero-description">
Experience the future of government services with blockchain-backed
license applications, instant verification, and tamper-proof records.
</p>
<div class="features-grid">
<div class="feature-item">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
</svg>
</div>
<div class="feature-text">
<span class="feature-title">Blockchain Secured</span>
<span class="feature-desc">Tamper-proof license records</span>
</div>
<!-- Feature Pills -->
<div class="feature-pills">
<div class="feature-pill">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<span>Instant Verification</span>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</div>
<div class="feature-text">
<span class="feature-title">Instant Verification</span>
<span class="feature-desc">Real-time license validity</span>
</div>
<div class="feature-pill">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
</svg>
<span>Tamper-Proof</span>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
<path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
</svg>
</div>
<div class="feature-text">
<span class="feature-title">Multi-Dept Workflow</span>
<span class="feature-desc">Streamlined approvals</span>
</div>
<div class="feature-pill">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
</svg>
<span>Multi-Department</span>
</div>
</div>
<!-- Network Status -->
<div class="network-status">
<div class="status-dot"></div>
<span class="status-text">Hyperledger Besu Network</span>
<span class="status-badge">Live</span>
<!-- Benefits List -->
<div class="benefits-list">
<div class="benefit-item">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
<span>100% Paperless Process</span>
</div>
<div class="benefit-item">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
</svg>
<span>Apply Anytime, Anywhere</span>
</div>
<div class="benefit-item">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</svg>
<span>Real-time Status Tracking</span>
</div>
</div>
</div>
</div>
<!-- Right Side - Login Form -->
<div class="auth-content" id="main-content" role="main">
<div class="auth-card">
<router-outlet></router-outlet>
<!-- Right Column - Login Card -->
<div class="login-container">
<div class="login-card">
<div class="card-glow"></div>
<router-outlet></router-outlet>
</div>
</div>
</main>
<!-- Footer -->
<footer class="auth-footer" role="contentinfo">
<p class="copyright">&copy; 2024 Government of Goa. All rights reserved.</p>
<!-- Footer -->
<footer class="landing-footer" role="contentinfo">
<div class="footer-content">
<p class="copyright">&copy; {{ currentYear }} Government of Goa, India. All rights reserved.</p>
<div class="footer-links">
<a href="#">Privacy Policy</a>
<span class="divider">|</span>
<a href="#">Terms of Service</a>
<span class="divider">|</span>
<a href="#">Help</a>
<a href="/policies" aria-label="Website Policies">Policies</a>
<a href="/terms" aria-label="Terms and Conditions">Terms</a>
<a href="/accessibility" aria-label="Accessibility Statement">Accessibility</a>
<a href="/contact" aria-label="Contact Information">Contact</a>
</div>
</footer>
</div>
</div>
</footer>
</div>
</div>