Frontend Architecture

frontend/src/
├── main.ts                    # App bootstrap (Pinia, Router, VueQuery)
├── App.vue                    # Root: AppShell if auth'd, else raw RouterView
├── router/index.ts            # 17 routes with auth guards
├── stores/
│   ├── auth.ts                # User profile, JWT, isPremium, login/logout
│   └── ui.ts                  # Mobile menu state, search query
├── lib/
│   ├── api.ts                 # Axios instance with Bearer interceptor + 401 redirect
│   └── utils.ts               # cn(), formatCurrency, formatDate, daysUntil
├── components/
│   ├── layout/                # AppShell, TopNav, SearchBar, UserMenu
│   └── shared/                # Reusable across pages
│       ├── DataTable.vue      # Sortable, paginated, expandable rows
│       ├── KpiCard.vue        # Metric + delta + subtitle
│       ├── StatusBadge.vue    # Color-coded status pills
│       ├── AlertStrip.vue     # Dismissible alert banner
│       ├── DealEditModal.vue  # Full deal edit form in modal
│       ├── ContractViewer.vue # MinIO presigned URL download modal
│       └── SaveToast.vue      # Floating save indicator (saving/saved/error)
└── pages/                     # 15 page components

Navy:    #0f1f38   (primary, nav, buttons)
Gold:    #e8a020   (accent, premium, warnings)
Sky:     #3b82c4   (links, focus states)
Success: #22c55e   (verified, positive deltas)
Danger:  #ef4444   (errors, over-budget, expiring)
Warning: #f59e0b   (pending, amber alerts)
Background: #f7f9fc

Fonts: Outfit (body), DM Serif Display (headings), DM Mono (IDs, values, labels)