landvex-finance-sprint3/UI-REFACTOR-PLAN.md

# LandveX Finance — UI-Refaktoreringsplan

> **Status:** Plan & grundstruktur (Sprint 3)  
> **Mål:** Modularisera 172KB / 3081 rader monolitisk HTML till underhållbara ES-moduler  
> **Nuvarande:** `index.html` = 177KB, 3081 rader, allt i ett (CSS + HTML + JS)

---

## 1. Nuvarande Arkitektur (Monolit)

```
index.html (177KB)
├── <style>        ~900 rader CSS
├── <body>         ~400 rader HTML-struktur
│   ├── Topbar (brand, period, tabs, status)
│   ├── 8 st tab-sektioner:
│   │   ├── Översikt (KPI, P&L, journal, actions)
│   │   ├── Tasks (checklista, onboarding)
│   │   ├── Transaktioner (tabell + mobilkort)
│   │   ├── Fakturor (fakturatabell)
│   │   ├── Skatt & Moms (VAT-grid, momsberäkning)
│   │   ├── Löner (payroll, personer, perioder)
│   │   ├── Period (stängning, checklista)
│   │   └── Prognos (forecast, likviditet)
│   └── Modaler (verifikat, faktura, balans, kvitton)
└── <script>       ~1700 rader vanilla JS
    ├── State & utils
    ├── API-layer (fetch-wrapper)
    ├── 8 st tab-controllers
    ├── Modalfunktioner
    ├── Kvitto-hantering (drag-drop, upload)
    ├── Onboarding (ob-*)
    └── Mobilnavigation (drawer, FAB)
```

### Identifierade Komponenter/Vyer

| Vy | DOM-id | Rader JS | Komplexitet |
|----|--------|----------|-------------|
| Översikt | `tab-overview` | ~200 | Medel |
| Tasks | `tab-tasks` | ~80 | Låg |
| Transaktioner | `tab-transactions` | ~250 | HÖG (paginering, sök, filter) |
| Fakturor | `tab-invoices` | ~150 | Medel |
| Skatt & Moms | `tab-vat` | ~180 | Medel |
| Löner | `tab-payroll` | ~220 | HÖG (två vyer: person+period) |
| Period | `tab-period` | ~120 | Medel |
| Prognos | `tab-forecast` | ~100 | Låg |
| **Modaler** | `modal-*` | ~300 | HÖG (5 modaler) |
| **Kvitto** | `drop-zone` | ~150 | Medel |
| **Onboarding** | `ob-*` | ~200 | Medel |

---

## 2. Föreslagen Modulär Struktur

### 2.1 Filstruktur (ES Modules, vanilla JS)

```
finance/
├── index.html              # Shell: <100 rader, laddar moduler
├── css/
│   ├── main.css            # Variabler, layout, utilities
│   ├── components.css      # Kort, knappar, tabeller, modaler
│   ├── responsive.css      # Mobilanpassningar
│   └── onboarding.css      # Onboarding-overlay
├── js/
│   ├── main.mjs            # Entry point: init, routing, state
│   ├── state.mjs           # Global state (S-objektet)
│   ├── api.mjs             # Fetch-wrapper, auth headers
│   ├── utils.mjs           # fmt, esc, pLabel, pParam, etc.
│   ├── components/
│   │   ├── kpi-row.mjs     # 5 KPI-kort
│   │   ├── pl-table.mjs    # Resultaträkning
│   │   ├── journal-widget.mjs # Senaste verifikat
│   │   ├── tx-table.mjs    # Transaktionstabell + paginering
│   │   ├── tx-cards.mjs    # Mobilkort för transaktioner
│   │   ├── invoice-table.mjs
│   │   ├── vat-grid.mjs    # Moms-kort
│   │   ├── payroll-table.mjs
│   │   ├── period-close.mjs
│   │   └── forecast-chart.mjs
│   ├── modals/
│   │   ├── entry-modal.mjs      # Ny/redigera verifikat
│   │   ├── invoice-modal.mjs    # Ny faktura
│   │   ├── balance-modal.mjs    # Balansräkning
│   │   ├── detail-modal.mjs     # Verifikatdetalj
│   │   └── kassa-modal.mjs      # Kassadetalj
│   ├── features/
│   │   ├── receipts.mjs     # Kvitto-upload, drag-drop
│   │   ├── onboarding.mjs   # Steg-för-steg guide
│   │   ├── mobile-nav.mjs   # Drawer, FAB, hamburgare
│   │   └── period-picker.mjs # Månad/kvartal/custom
│   └── tabs/
│       ├── overview.mjs
│       ├── transactions.mjs
│       ├── invoices.mjs
│       ├── vat.mjs
│       ├── payroll.mjs
│       ├── period.mjs
│       ├── tasks.mjs
│       └── forecast.mjs
└── docs/
    ├── UI-REFACTOR-PLAN.md   # Denna fil
    └── ARCHITECTURE.md
```

### 2.2 Modulgränssnitt (kontrakt)

```javascript
// js/tabs/overview.mjs
export function init() { /* en gång vid startup */ }
export function activate(period) { /* vid tab-switch */ }
export function deactivate() { /* cleanup */ }

// js/components/kpi-row.mjs  
export function render(container, data) { /* rendera till DOM */ }
export function update(kpiId, value) { /* uppdatera en KPI */ }

// js/api.mjs
export async function api(path, method, body) { /* auth + fetch */ }
export async function getJournal(params) { /* typade wrappers */ }
export async function postJournal(entry) { }
```

### 2.3 State-hantering (förenklad Redux-pattern)

```javascript
// js/state.mjs
const S = {
  period: '2026-06',
  periodMode: 'month',
  tab: 'overview',
  data: {}, // cache per tab
  filters: {},
  user: null,
};

const listeners = new Set();
export const state = {
  get: () => S,
  set: (patch) => { Object.assign(S, patch); listeners.forEach(l => l(S)); },
  subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); }
};
```

---

## 3. Migreringsplan (fasad)

| Fas | Uppgift | Tid | Risk |
|-----|---------|-----|------|
| **3.1** | Skapa filstruktur, `main.mjs`, `state.mjs`, `api.mjs`, `utils.mjs` | 2h | Låg |
| **3.2** | Extrahera CSS → `css/*.css` | 2h | Låg |
| **3.3** | Bygg `tabs/overview.mjs` + `components/kpi-row.mjs` | 3h | Medel |
| **3.4** | Bygg `tabs/transactions.mjs` + `components/tx-table.mjs` | 4h | HÖG |
| **3.5** | Bygg övriga tabs (invoices, vat, payroll, period, tasks, forecast) | 6h | Medel |
| **3.6** | Bygg modaler till `modals/*.mjs` | 4h | Medel |
| **3.7** | Extrahera features (receipts, onboarding, mobile-nav) | 3h | Medel |
| **3.8** | Integrationstest, bugfix, rollback-plan | 4h | Medel |
| **3.9** | Ta bort gammal inline JS/CSS från index.html | 1h | Låg |

**Totalt: ~29h** (3–4 dagar för 1 person)

---

## 4. Tekniska Beslut

| Fråga | Beslut | Motivering |
|-------|--------|------------|
| React/Vue eller vanilla? | **Vanilla ES modules** | Ingen build-step, snabb laddning, team-kompetens |
| CSS framework? | **Egen CSS** | Redan design-system, ingen extra beroende |
| State management? | **Egen ~50 rader** | För litet för Redux/Zustand |
| Byggverktyg? | **Inget** | `<script type="module">` räcker |
| Bakåtkompatibilitet? | **Feature-flagg** | `?v2=1` aktiverar nya moduler |

---

## 5. Risker & Mitigering

| Risk | Sannolikhet | Mitigering |
|------|-------------|------------|
| Bugg i transaktionstabell (komplex paginering) | Medel | Bevara gammal som fallback, A/B-testa |
| Mobile-nav bryts | Låg | Testa på fysisk mobil direkt |
| Onboarding-state förloras | Låg | LocalStorage-nycklar oförändrade |
| API-ändringar | Låg | `api.mjs` wrapper isolerar ändringar |

---

## 6. Definition of Done

- [ ] `index.html` < 100 rader
- [ ] All JS i `.mjs`-filer med explicita exports/imports
- [ ] All CSS i `.css`-filer
- [ ] Ingen global state (förutom `state.mjs`)
- [ ] Mobilnavigation fungerar identiskt
- [ ] Onboarding fungerar identiskt
- [ ] Kvitto-upload fungerar identiskt
- [ ] Alla 8 tabs renderar korrekt
- [ ] Alla 5 modaler fungerar
- [ ] Ingen regression i API-anrop

---

*Skapad: 2026-06-24*  
*Nästa steg: Påbörja fas 3.1 (filstruktur + core modules)*