Bernt
bae705aa97
- Add NFC ePassport roadmap (ICAO 9303, eIDAS) - Add TensorFlow.js edge face detection (BlazeFace) - Add structured audit logger (GDPR-compliant) - Risk scoring support Part of KYC Apple Native UX v1.1.0
206 lines
7.4 KiB
Markdown
206 lines
7.4 KiB
Markdown
# 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)*
|