# 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