BOC v1.0: RS256 auth, Ledger integration, Prometheus metrics, CI/CD, backup

web-v1-backup/FRONTEND_REFACTOR_PROPOSAL.md

@@ -0,0 +1,101 @@
+# BOC Frontend Refactor Proposal
+
+## Problem
+12 HTML-filer (dashboard.html, crm.html, sales.html, ...) var och en med ~80 rader identisk sidebar-kod. En ändring = 12 filer att uppdatera. Risk för divergens.
+
+## Alternativ
+
+### A. Vanilla JS Component System (Rekommenderas)
+Ett enda HTML-skelett, JavaScript laddar modul-innehåll dynamiskt.
+
+```
+web/
+  index.html          # Single shell: sidebar + main container
+  assets/
+    boc.js            # Router + auth + API
+    components.js     # Sidebar, Header, KPI cards, Tables
+    modules/
+      dashboard.js    # Dashboard-specific rendering
+      crm.js          # CRM module
+      sales.js        # Sales module
+      ...
+```
+
+**Fördelar:**
+- En sidebar, en källa till sanning
+- Ingen build step (vanilla JS)
+- Fungerar med nuvarande nginx static hosting
+- ~2h att implementera
+
+**Nackdelar:**
+- Ingen type safety
+- Manuell DOM-hantering
+
+### B. HTMX + Go Templates
+Go backend servar HTML fragments. HTMX swappar innehåll.
+
+```
+backend/templates/
+  layout.html       # Shell med sidebar
+  dashboard.html    # Fragment
+  crm/
+    list.html
+    detail.html
+```
+
+**Fördelar:**
+- Server-side rendering, SEO-vänligt
+- Minimal JS
+- Go standard library
+
+**Nackdelar:**
+- Kräver template engine i backend
+- Mindre interaktivt utan extra JS
+
+### C. Lit/Web Components (Modern vanilla)
+Web standard, inget framework. Lit ger reaktivitet.
+
+**Fördelar:**
+- Web standard, inget build step med import maps
+- Reaktiva komponenter
+- Framtidssäkert
+
+**Nackdelar:**
+- Learning curve
+- ~4h att implementera
+
+### D. Full SPA (React/Vue/Svelte)
+**AVVISAS** — För tungt för adminplattform. Byggsteg, bundle size, komplexitet.
+
+## Rekommendation: Alternativ A (Vanilla JS Router)
+
+Snabbast att implementera, lättast att underhålla, matchar nuvarande arkitektur.
+
+### Implementation (estimerad 2-3h):
+1. `index.html` — shell med sidebar + `<main id="app">`
+2. `assets/router.js` — hash-based routing (`#/crm`, `#/sales`)
+3. `assets/components.js` — `renderSidebar()`, `renderKpiGrid()`, `renderTable()`
+4. `assets/modules/*.js` — en fil per modul, exporterar `render()`
+5. Sidebar-markup i ett JSON-objekt, renderas dynamiskt
+
+### Exempel:
+```js
+// router.js
+const routes = {
+  '/': () => import('./modules/dashboard.js'),
+  '/crm': () => import('./modules/crm.js'),
+  '/sales': () => import('./modules/sales.js'),
+  // ...
+};
+
+window.addEventListener('hashchange', () => {
+  const path = location.hash.slice(1) || '/';
+  routes[path]().then(m => m.render(document.getElementById('app')));
+});
+```
+
+### Migration path:
+1. Skapa shell + router
+2. Konvertera en modul (dashboard) som proof-of-concept
+3. Konvertera resten en i taget
+4. Ta bort gamla HTML-filer