boc/web/FRONTEND_REFACTOR_PROPOSAL.md

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:

// 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