docs: ARCHITECTURE.md bijgewerkt voor v3.0 (React SPA + /api/spa)

ARCHITECTURE.md

@@ -9,13 +9,20 @@ dashboarding en rapportage. Drie Python-microservices verzorgen
 aanvullende functionaliteit: een visuele rack-editor, leadgeneratie
 via scraping, en datakwaliteitscontroles.
 
+Sinds v3.0 heeft de app een moderne **React 19 SPA** als primaire UI
+(`/app`), gebouwd met Vite + Tailwind CSS v4. De klassieke EJS-interface
+bestaat nog steeds op de oorspronkelijke paden. De SPA praat met een
+JSON-API (`/api/spa`) die naast de bestaande EJS-routes draait.
+
 ## Tech Stack
 
 | Laag | Technologie |
 |------|-------------|
+| **Frontend (nieuw)** | React 19 + Vite 6 + Tailwind CSS v4 + react-router 7 + recharts (`frontend/`) |
 | **Backend** | Node.js 18 + Express 4 |
+| **JSON API (nieuw)** | `routes/spa/` gemount op `/api/spa` (sessie-auth, 401-JSON) |
 | **Database** | SQLite (via better-sqlite3) |
-| **Templating** | EJS — server-side rendered views |
+| **Templating (legacy)** | EJS — server-side rendered views |
 | **Auth** | bcryptjs + express-session |
 | **Microservices** | Python 3 + Flask (3 stuks) |
 | **Container** | Docker + docker-compose |
@@ -26,8 +33,14 @@ via scraping, en datakwaliteitscontroles.
 ```
 consulting-framework/
 ├── server.js                 # Entrypoint Express app
-├── routes/                   # ~30 route modules per domein
-│   ├── auth.js, 2fa.js, users.js, password.js
+├── frontend/                 # NIEUW: React 19 SPA (Vite)
+│   ├── src/api.js            #   API-client (/api/spa, fmt helpers)
+│   ├── src/auth.jsx          #   AuthContext (login/logout/me)
+│   ├── src/components/       #   Layout (sidebar/topbar) + ui.jsx design system
+│   └── src/pages/            #   24 pagina's (Dashboard, Clients, Time, ...)
+├── public/spa/               # Gebouwde SPA (vite build output, geserveerd op /app)
+├── routes/                   # ~30 route modules per domein (EJS, legacy)
+│   ├── auth.js, users.js, password.js
 │   ├── clients.js, engagements.js, projects.js
 │   ├── invoices.js, finance.js, time.js
 │   ├── dashboard.js, reports.js, report.js
@@ -36,25 +49,27 @@ consulting-framework/
 │   ├── settings.js, search.js, notifications.js
 │   ├── infrastructure.js, networking.js, racks.js
 │   ├── architecture.js, sizing.js, quality.js
-│   ├── market.js, integrations.js, automations.js
-│   ├── audit.js, api.js
-│   └── views/               # Sub-route EJS views
+│   ├── market.js, integrations.js, audit.js, api.js
+│   └── spa/                  # NIEUW: JSON API voor de SPA
+│       ├── index.js          #   mount + sessie-guard + /dashboard aggregatie
+│       ├── auth.js           #   POST /auth/login, /auth/logout, GET /auth/me
+│       ├── crm.js            #   clients, notes, engagements, tasks
+│       ├── finance.js        #   time entries, invoices, finance-stats
+│       ├── infra.js          #   racks, rack devices, networking, diagrams
+│       └── misc.js           #   calendar, projects, notifications, search,
+│                             #   settings, users, audit, backup, market, ai, email
 ├── lib/                      # Bedrijfslogica
 │   ├── ai.js                 # AI provider interface
 │   ├── backup.js             # Backup/restore engine
 │   ├── consulting-hub.js     # Consultancy hub logica
 │   ├── crm.js                # CRM kernel
-│   ├── nav.js                # Navigatieopbouw
+│   ├── nav.js                # Navigatieopbouw (legacy EJS)
 │   ├── rack-diagram.js       # Rack diagram generator
 │   └── services.js           # Services registry
-├── views/                    # EJS templates (~40+)
-│   ├── index.ejs, login.ejs, dashboard.ejs
-│   ├── client-*.ejs, engagement-*.ejs
-│   ├── invoice-*.ejs, finance.ejs
-│   └── partials/             # Herbruikbare EJS partials
+├── views/                    # EJS templates (~40+, legacy UI)
 ├── data/                     # SQLite DB, JSON configs
 ├── locales/                  # i18n (en.json, nl.json)
-├── public/                   # Static assets (icons, SW)
+├── public/                   # Static assets (icons, SW, spa build)
 ├── python-editor/            # Microservice 1: diagram editor
 ├── python-leadgen/           # Microservice 2: lead scraping
 ├── python-quality/           # Microservice 3: data quality
@@ -65,6 +80,24 @@ consulting-framework/
 
 ## Data Flow
 
+### Nieuwe SPA (primair)
+
+```
+Browser → React SPA (/app, static uit public/spa)
+            └── fetch /api/spa/* (sessie-cookie)
+                  ├── routes/spa/ (JSON, 401 bij geen sessie)
+                  ├── lib/ + db.js (business logic, SQLite)
+                  └── Python microservices (via proxy's waar nodig)
+```
+
+- SPA login: `POST /api/spa/auth/login` → express-session cookie
+- Globale guard in server.js: `/api/*` zonder sessie → **401 JSON**
+  (nooit redirect); browser-routes zonder sessie → redirect `/login` (legacy)
+- `/app` is publiek bereikbaar; de SPA toont zelf een loginpagina
+- Vite dev-server proxied `/api` naar de productieserver (zie frontend/vite.config.js)
+
+### Legacy EJS (behouden)
+
 ```
 Browser → Express (server.js)
             ├── routes/ (auth check, params)
@@ -73,11 +106,6 @@ Browser → Express (server.js)
             └── views/ (EJS render → HTML response)
 ```
 
-- Alle routes doorlopen `server.js` voor sessie- en middleware setup
-- Business logic zit in `lib/`, niet in routes
-- Templates in `views/` worden server-side gerenderd
-- Python microservices worden aangeroepen via HTTP van de Node.js app
-
 ## Microservices
 
 | Service | Poort | Map | Functie |
@@ -103,6 +131,19 @@ services:
 
 Alle services draaien op `0.0.0.0` en zijn bereikbaar op het LAN.
 
+### SPA ontwikkelen & deployen
+
+```bash
+cd frontend
+npm install
+npm run dev        # dev-server op :5173, proxied /api naar 192.168.1.247:3000
+npm run build      # bouwt naar frontend/dist
+```
+
+Deploy = build kopiëren naar `public/spa/` en committen; de container
+krijgt die via de bestaande `./public` bind-mount binnen. Daarna op de
+server: `git pull && docker compose restart consulting`.
+
 ### Recovery (bij crash)
 
 1. `git clone` vanuit Gitea: `http://git.211:3000/mo/mek-tech-consulting.git`