Pages

Each page corresponds to a route in the application. Pages are in frontend/src/pages/.

Route Map

Route	Page	Description
/	Dashboard	Overview with key metrics (Phase 6)
/clients	Client List	Browse active applications from ClickHouse
/clients/:key	Client Detail	Application + customer + worklog details
/generate	Generate Wizard	3-step invoice generation flow
/invoices	Invoice Registry	List, filter, and manage invoices
/invoices/:id	Invoice Detail	View/edit invoice with line items
/invoices/:id/pdf	PDF Viewer	Preview generated PDF
/calculator	Pricing Calculator	Margin analysis and quotes (Phase 5)

Client List

Displays all active applications from ClickHouse with:

• Company name as primary title, CDM key + application name as subtitle
• Deal type badge, currency
• Monthly limit (SUP) or hourly rate (HR)
• Link to generate invoice

Generate Wizard

A 3-step flow for creating invoices:

Step 1: Select Client & Period

• Dropdown of active applications
• Date range picker (defaults to previous month)
• "Preview" button triggers prefill API

Step 2: Review & Edit

• Pre-filled invoice data from ClickHouse
• Editable financial fields (base amount, overtime, total)
• Line items table with add/edit/remove
• Real-time total recalculation

Step 3: Confirm & Generate

• Summary of the invoice to be created
• "Generate Draft" button saves to PostgreSQL
• Redirects to invoice detail page

Invoice Registry

The main invoice management view:

• Filters: Status, application, date range
• Columns: Number, client (company name + CDM key), period, deal type, amount, status, actions
• Actions: View, edit (draft only), finalize, download PDF
• Pagination: Server-side with page/per_page params
• URL persistence: Filters saved in URL search params
• Company names: Enriched from ClickHouse (graceful degradation if CH unavailable)

Invoice Detail

Full-page view at /invoices/:id with a side-by-side layout:

• Left column: HTML preview (sandboxed iframe) for drafts, embedded PDF viewer for finalized invoices — fills available height
• Right column (480px): All detail cards and actions
  • Header: Invoice number, company name, status badge, "Back to Invoices" link
  • Details card: Client (with CDM key link), period (dd.MM.yyyy – dd.MM.yyyy), date, deal type
  • Display Settings card: 4 toggle switches (show_task_list, show_tracked_time, show_task_pricing, show_overtime) — editable for drafts, read-only otherwise
  • Legal Text card: Editable text area with Edit/Save/Cancel and "Reset to default" from client config
  • Calculation card: Base amount, overtime breakdown via CalculationBreakdown component
  • Line Items: Task list with Jira key links, worklog dates, hours, pricing
  • Approval Trail: Who approved/declined/rejected, timestamps, decline/reject reasons
  • HTML Editor: "Edit HTML" button (draft only) toggles between preview and raw HTML textarea. Save persists to html_override, Reset clears it back to template default. Shows "(custom HTML)" indicator when override is active
  • Integrations card: Shown for approved+ invoices — PDF Archive row (Open PDF link when r2_public_url set, "Not uploaded" otherwise) + PlanFact row ("Synced" with green badge when planfact_shipment_id set, "Not synced" + Retry button for approved/sent invoices)
  • Actions: Status-aware buttons — Finalize (draft), Approve/Decline (needs_review), Mark as Sent + Regenerate (approved), Accept/Reject (sent), Mark as Paid (accepted), Regenerate (declined/rejected/approved)