docs(coder): add server deployment guide (#467)

MohsinHashmi-DataInn · mohsin-wiser · claude · web-flow · commit 213530b0e391 · 2026-01-05T17:58:17.000-05:00
* feat(ui): enhance remember me toggle with neumorphic curved design Improved the "Remember me" toggle on the login page with a more pronounced curved neumorphic design that better matches the design system. Changes: - Increased toggle size (h-7 w-14) for better visibility and proportions - Applied neumorphic shadows: - OFF state: Inset shadow (pressed/recessed appearance) - ON state: Raised shadow with primary gradient background - Enhanced knob styling with gradient and subtle shadow - Improved curve appearance with consistent rounded-full styling - Smoother transitions (300ms) for better visual feedback - Added focus ring for better accessibility The toggle now properly follows the neumorphic design system with: - Dual shadows (light + dark) for depth - Rounded corners matching design guidelines - Primary blue gradient for active state - Soft neumorphic background for inactive state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix(ui): ensure toggle has perfect pill-shaped rounded corners - Explicitly set borderRadius: 9999px for perfect rounding - Added overflow: hidden for clean edges - Increased size to h-8/w-16 for better curved appearance - Larger knob (h-6/w-6) for better visibility - Removed focus ring classes that may cause rectangular appearance - Added border-0 to prevent any border issues This ensures the toggle appears as a smooth, curved pill shape without any rectangular appearance. * chore(debug): add console logging to diagnose login redirect issue Added detailed console logs to track: - Login action response and type - Action fulfillment status - Target route for navigation - AccessToken presence in localStorage - Navigate function execution This will help debug why login success message shows but redirect to dashboard is not happening. * feat(ui): use logo green color for input focus border Changed input field focus styling from black to logo green (#21d8aa): - Added 2px green border on focus state - Updated focus shadow to use subtle green tint - Maintains neumorphic inset shadow effect - Error state shows red border for validation This matches the SimpleAccounts brand green color from the logo. * fix(login): remove black outline from input focus, show only green border - Added focus:outline-none to email and password input fields - Removes default browser outline causing double border appearance - Only custom green border (#21d8aa from logo) now shows on focus - Fixes issue where both black and green borders appeared simultaneously 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix(ui): remove default focus ring from input component - Removed focus-visible:ring-2 and focus-visible:ring-ring classes - Removed focus-visible:ring-offset-2 class - Allows custom neumorphic focus styles without ring interference - Fixes black border appearing on input focus across the app 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix(auth): add authorization header to api requests - Added request interceptor to attach accessToken to all api requests - Fixes login redirect loop where checkAuthStatus() was failing - The /rest/user/current call now includes bearer token - Resolves issue where user couldn't navigate to /admin after login 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix(login): use replace navigation to prevent history issues - Changed navigate() to navigate(targetRoute, { replace: true }) - Prevents login page from staying in browser history - May help resolve redirect issues after successful login 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix(auth): add null check for access token in auth api interceptor - prevent sending 'Bearer null' or 'Bearer undefined' to backend - only add authorization header if access token exists in local storage - fixes login redirect issue where auth check fails immediately after login * fix(auth): improve token validation and add debug logging - add robust token validation in both api and authApi interceptors - check for empty/whitespace-only tokens - add comprehensive debug logging to admin layout component - log token presence, length, and checkAuthStatus responses - helps diagnose login redirect loop issue * fix(backend): resolve hibernate lazy initialization errors Fix multiple 500 errors caused by Hibernate lazy loading issues when serializing entities to JSON after session closes. Backend Changes: - Add @transactional annotations to keep session open during JSON serialization - UserController.currentUser(): Added @transactional and explicit Hibernate.initialize() - CompanyController.getCompanyDetails(): @transactional - CurrencyConversionController.getActiveCurrencyList(): @transactional - BankAccountController.getBankAccountList(): @transactional - RoleModuleController.getModuleListByRoleCode(): @transactional - Add @JsonIgnoreProperties to User entity for Hibernate proxies - Add exception logging to UserController - Add JWT header logging to JwtRequestFilter Frontend Changes: - Fix API_ROOT_URL to route through Vite proxy (config.js) - Add debug logging to axios interceptor (auth_api.js) - Add proxy logging to Vite config - Remove invalid datasetKeyProvider prop from Chart.js components (bank_account, cash_flow, paid_invoices) Testing: - Add Playwright E2E test for login redirect flow Fixes: - Empty sidebar navigation (roleModule 500 error) - Dashboard API failures (company details, currency conversion, bank list) - Login redirect after authentication - React console warnings about invalid DOM props 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * feat(ui): migrate from neumorphic to minimal corporate theme Complete UI redesign following modern SaaS design patterns (Stripe, Linear, OpenAI): BREAKING CHANGES: - Replaced neumorphic soft UI with clean corporate design - Updated all CSS variables from --neu-* to --corp-* - Changed from gray backgrounds (#e8eef5) to white (#ffffff) - Replaced dual shadows with subtle single shadows + borders Core Changes: - index.css: Complete CSS variable rewrite for corporate theme - tailwind.config.js: Added corporate color system and utilities - DESIGN-GUIDE.md: Comprehensive design system documentation - MIGRATION-TO-CORPORATE.md: Step-by-step migration guide - CLAUDE.md: Updated to reference corporate design system Layout Updates: - sidebar.jsx: Fixed visibility bug (removed hidden class), applied corporate styling - header.jsx: Updated to corporate theme with clean borders - admin/index.js: Corporate page header and breadcrumb styling Dashboard Migration: - screen.js: All inline neumorphic styles replaced with corporate variables - style.scss: Complete SCSS rewrite with corporate mixins and classes Design Features: - White/light gray backgrounds for maximum readability - Clean 1px borders with subtle shadows - Professional minimal appearance - Proper hover states and transitions - WCAG AA accessibility compliance - Brand blue (#2064d8) reserved for primary actions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * test(sidebar): update test to match corporate theme active state Changed test assertion from checking amber border to checking blue background + white text, matching the new corporate theme active state styling. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * feat(coder): add code-server web ide support - Add official code-server module to Coder template - Configure auto-install of VS Code extensions from devcontainer.json - Remove redundant code-server installation from Dockerfile - Reduces Docker image size and improves Coder integration This enables browser-based VS Code access through Coder's app system with proper authentication and automatic URL handling. * fix(coder): upgrade coder provider to v2.13.1 for code-server compatibility - Update coder provider version from ~> 0.12 to >= 2.5.0 - code-server module requires coder provider >= 2.5.0 - Regenerate .terraform.lock.hcl with upgraded provider versions - Fixes CI/CD template deployment failure * feat(coder): add app shortcuts for frontend, backend, and swagger ui - Add Frontend app (React on port 3000) with healthcheck - Add Backend API app (Spring Boot on port 8080) with healthcheck - Add Swagger UI app for API documentation - Apps appear in Coder workspace UI for easy access - Enables one-click access to running applications * fix(coder): use existing endpoint for backend healthcheck and preserve neu utilities - Change backend healthcheck from /actuator/health to /rest/config/getreleasenumber (actuator endpoint doesn't exist, was causing 404 and unhealthy status) - Add neu-* shadow and color utilities to Tailwind config for backward compatibility (existing screens still use neu classes during migration to corporate theme) Addresses PR review comments on #466 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * docs(coder): add server deployment guide with docker configuration * feat(devcontainer): auto-start frontend and backend on workspace startup - Add automatic startup of Frontend (React + Vite) on port 3000 - Add automatic startup of Backend (Spring Boot) on port 8080 - Servers run in background with logs at /tmp/frontend.log and /tmp/backend.log - Display helpful commands for viewing logs and stopping servers - Prevents duplicate starts if servers are already running 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * feat(coder): make workspace apps optional to avoid confusion - Add 'Enable Workspace Apps' parameter (default: disabled) - Frontend, Backend, and Swagger apps only show when enabled - Prevents confusing unhealthy app links in workspace UI - Users can enable apps via workspace parameters when needed --------- Co-authored-by: Mohsin Hashmi <mhashmi@wiser.com> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
diff --git a/.coder/DEPLOYMENT.md b/.coder/DEPLOYMENT.md
@@ -0,0 +1,210 @@
+# Coder Server Deployment Guide
+
+This document describes how to deploy and configure the Coder server for SimpleAccounts-UAE.
+
+## Prerequisites
+
+- Docker and Docker Compose installed
+- Domain: `coder.dev.simpleaccounts.io`
+- Wildcard DNS: `*.apps.coder.dev.simpleaccounts.io` → server IP
+- GitHub OAuth App credentials
+
+## Server Configuration
+
+### 1. Docker Compose Setup
+
+Create `/home/mohsin/coder/docker-compose.yaml`:
+
+```yaml
+services:
+  database:
+    image: postgres:17
+    container_name: coder-database-1
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_DB}
+    volumes:
+      - coder_coder_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+    networks:
+      - coder_network
+
+  coder:
+    image: ghcr.io/coder/coder:latest
+    container_name: coder-coder-1
+    depends_on:
+      database:
+        condition: service_healthy
+    environment:
+      CODER_PG_CONNECTION_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@database/${POSTGRES_DB}?sslmode=disable
+      CODER_HTTP_ADDRESS: 0.0.0.0:7080
+      CODER_ACCESS_URL: ${CODER_ACCESS_URL}
+      CODER_WILDCARD_ACCESS_URL: ${CODER_WILDCARD_ACCESS_URL}
+      CODER_OAUTH2_GITHUB_CLIENT_ID: ${CODER_OAUTH2_GITHUB_CLIENT_ID}
+      CODER_OAUTH2_GITHUB_CLIENT_SECRET: ${CODER_OAUTH2_GITHUB_CLIENT_SECRET}
+      CODER_OAUTH2_GITHUB_ALLOWED_ORGS: SimpleAccounts
+      CODER_OAUTH2_GITHUB_ALLOW_SIGNUPS: true
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    # CRITICAL: Add docker group (988) so Terraform can provision workspaces
+    group_add:
+      - '988'
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.coder.rule=Host(`coder.dev.simpleaccounts.io`)'
+      - 'traefik.http.routers.coder.entrypoints=websecure'
+      - 'traefik.http.routers.coder.tls.certresolver=letsencrypt'
+      - 'traefik.http.services.coder.loadbalancer.server.port=7080'
+      # Wildcard apps routing
+      - 'traefik.http.routers.coder-apps.rule=HostRegexp(`{subdomain:[a-z0-9-]+}.apps.coder.dev.simpleaccounts.io`)'
+      - 'traefik.http.routers.coder-apps.entrypoints=websecure'
+      - 'traefik.http.routers.coder-apps.tls.certresolver=letsencrypt'
+      - 'traefik.http.routers.coder-apps.tls.domains[0].main=apps.coder.dev.simpleaccounts.io'
+      - 'traefik.http.routers.coder-apps.tls.domains[0].sans=*.apps.coder.dev.simpleaccounts.io'
+    restart: unless-stopped
+    networks:
+      - coder_network
+      - dev-proxy-network
+
+networks:
+  coder_network:
+    name: coder_network
+  dev-proxy-network:
+    external: true
+
+volumes:
+  coder_coder_data:
+    external: true
+```
+
+### 2. Environment Variables
+
+Create `/home/mohsin/coder/.env`:
+
+```env
+CODER_ACCESS_URL=https://coder.dev.simpleaccounts.io
+CODER_WILDCARD_ACCESS_URL=*.apps.coder.dev.simpleaccounts.io
+POSTGRES_USER=coder
+POSTGRES_PASSWORD=coder_secure_password_123
+POSTGRES_DB=coder
+CODER_OAUTH2_GITHUB_CLIENT_ID=<your-github-oauth-client-id>
+CODER_OAUTH2_GITHUB_CLIENT_SECRET=<your-github-oauth-client-secret>
+```
+
+### 3. Important Configuration Notes
+
+#### Docker Socket Access
+
+The `group_add: ["988"]` setting is **CRITICAL**. It adds the docker group to the Coder container so Terraform's Docker provider can provision workspaces. Without this, workspace creation will fail with:
+
+```
+Error: permission denied while trying to connect to the Docker daemon socket
+```
+
+#### Wildcard Access URL
+
+The `CODER_WILDCARD_ACCESS_URL` enables subdomain-based workspace applications. Without this, apps with `subdomain = true` will show a warning and won't be accessible.
+
+## Deployment Steps
+
+1. **Create directory structure**:
+
+   ```bash
+   mkdir -p /home/mohsin/coder
+   cd /home/mohsin/coder
+   ```
+
+2. **Copy configuration files** (docker-compose.yaml and .env)
+
+3. **Create database volume** (if first time):
+
+   ```bash
+   docker volume create coder_coder_data
+   ```
+
+4. **Start Coder**:
+
+   ```bash
+   docker compose up -d
+   ```
+
+5. **Verify**:
+   ```bash
+   docker compose logs -f coder
+   ```
+
+## Updating Coder
+
+To update to the latest Coder version:
+
+```bash
+cd /home/mohsin/coder
+docker compose pull
+docker compose up -d
+```
+
+## Troubleshooting
+
+### Workspace Creation Fails with Docker Permission Error
+
+**Symptom**: `Error: permission denied while trying to connect to the Docker daemon socket`
+
+**Solution**: Ensure `group_add: ["988"]` is in docker-compose.yaml
+
+**Verify**:
+
+```bash
+docker exec coder-coder-1 id
+# Should show: groups=988,1000(coder)
+```
+
+### Subdomain Apps Show Warning
+
+**Symptom**: "One or more apps in this workspace have subdomain = true, but subdomain applications are not configured"
+
+**Solution**: Ensure `CODER_WILDCARD_ACCESS_URL` is set in .env and DNS wildcard is configured
+
+**Verify**:
+
+```bash
+docker exec coder-coder-1 env | grep WILDCARD
+# Should show: CODER_WILDCARD_ACCESS_URL=*.apps.coder.dev.simpleaccounts.io
+
+dig +short test.apps.coder.dev.simpleaccounts.io
+# Should return server IP
+```
+
+## Template Deployment
+
+The workspace template is automatically deployed via GitHub Actions when changes are pushed to `develop` or `main` branches. See `.github/workflows/coder-template-push.yml`.
+
+## Backup
+
+The Coder database is stored in the `coder_coder_data` Docker volume. To backup:
+
+```bash
+docker run --rm \
+  -v coder_coder_data:/source \
+  -v $(pwd):/backup \
+  alpine \
+  tar czf /backup/coder-backup-$(date +%Y%m%d).tar.gz -C /source .
+```
+
+## Restore
+
+To restore from backup:
+
+```bash
+docker volume create coder_coder_data
+docker run --rm \
+  -v coder_coder_data:/target \
+  -v $(pwd):/backup \
+  alpine \
+  tar xzf /backup/coder-backup-YYYYMMDD.tar.gz -C /target
+```
diff --git a/.coder/template.tf b/.coder/template.tf
@@ -40,6 +40,16 @@ data "coder_parameter" "git_clone_url" {
   icon         = "/icon/git.svg"
 }
 
+data "coder_parameter" "enable_workspace_apps" {
+  name         = "enable_workspace_apps"
+  display_name = "Enable Workspace Apps"
+  description  = "Show app shortcuts for Frontend, Backend API, and Swagger UI. Only enable if you're running these services."
+  type         = "bool"
+  default      = "false"
+  mutable      = true
+  icon         = "/icon/apps.svg"
+}
+
 # Docker provider configuration
 provider "docker" {
   host = "unix:///var/run/docker.sock"
@@ -394,7 +404,10 @@ module "code-server" {
 }
 
 # Frontend application (React + Vite on port 3000)
+# Only shown if workspace apps are enabled via parameter
 resource "coder_app" "frontend" {
+  count = data.coder_parameter.enable_workspace_apps.value == "true" ? 1 : 0
+
   agent_id     = coder_agent.main.id
   slug         = "frontend"
   display_name = "Frontend (React)"
@@ -411,7 +424,10 @@ resource "coder_app" "frontend" {
 }
 
 # Backend API application (Spring Boot on port 8080)
+# Only shown if workspace apps are enabled via parameter
 resource "coder_app" "backend" {
+  count = data.coder_parameter.enable_workspace_apps.value == "true" ? 1 : 0
+
   agent_id     = coder_agent.main.id
   slug         = "backend"
   display_name = "Backend API"
@@ -428,7 +444,10 @@ resource "coder_app" "backend" {
 }
 
 # Swagger UI for API documentation
+# Only shown if workspace apps are enabled via parameter
 resource "coder_app" "swagger" {
+  count = data.coder_parameter.enable_workspace_apps.value == "true" ? 1 : 0
+
   agent_id     = coder_agent.main.id
   slug         = "swagger"
   display_name = "API Docs (Swagger)"
diff --git a/.devcontainer/post-start.sh b/.devcontainer/post-start.sh
@@ -310,3 +310,56 @@ echo ""
 echo "MCP Servers (pre-installed):"
 echo "  SonarQube - Code quality analysis (~/.local/share/mcp-servers/)"
 echo ""
+
+# =============================================================================
+# Auto-start Frontend and Backend Development Servers
+# =============================================================================
+echo "🚀 Starting development servers..."
+
+# Start Backend (Spring Boot)
+if [ -f "apps/backend/mvnw" ]; then
+    if ! pgrep -f "spring-boot:run" > /dev/null; then
+        echo "☕ Starting Backend API (Spring Boot) on port 8080..."
+        cd apps/backend
+        nohup ./mvnw spring-boot:run > /tmp/backend.log 2>&1 &
+        echo "✅ Backend started (logs: /tmp/backend.log)"
+        cd ../..
+    else
+        echo "✅ Backend already running"
+    fi
+else
+    echo "⚠️  Backend mvnw not found, skipping auto-start"
+fi
+
+# Start Frontend (Vite)
+if [ -f "apps/frontend/package.json" ]; then
+    if ! pgrep -f "vite" > /dev/null; then
+        echo "⚛️  Starting Frontend (React + Vite) on port 3000..."
+        cd apps/frontend
+        nohup npm start > /tmp/frontend.log 2>&1 &
+        echo "✅ Frontend started (logs: /tmp/frontend.log)"
+        cd ../..
+    else
+        echo "✅ Frontend already running"
+    fi
+else
+    echo "⚠️  Frontend package.json not found, skipping auto-start"
+fi
+
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "🎯 Development Servers:"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "  Frontend: http://localhost:3000 (React + Vite)"
+echo "  Backend:  http://localhost:8080 (Spring Boot)"
+echo "  Swagger:  http://localhost:8080/swagger-ui.html"
+echo ""
+echo "📋 View logs:"
+echo "  Frontend: tail -f /tmp/frontend.log"
+echo "  Backend:  tail -f /tmp/backend.log"
+echo ""
+echo "🛑 Stop servers:"
+echo "  pkill -f vite      (stop frontend)"
+echo "  pkill -f spring-boot:run  (stop backend)"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
