Files

T

Bernt bae705aa97 ARCHITECTURE: NFC roadmap, edge AI, audit logging

- 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

2026-06-29 16:24:48 +00:00

7.4 KiB

Raw Blame History

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)

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

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

7.4 KiB Raw Blame History Unescape Escape

LandveX Finance — UI-Refaktoreringsplan

1. Nuvarande Arkitektur (Monolit)

Identifierade Komponenter/Vyer

2. Föreslagen Modulär Struktur

2.1 Filstruktur (ES Modules, vanilla JS)

2.2 Modulgränssnitt (kontrakt)

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

3. Migreringsplan (fasad)

4. Tekniska Beslut

5. Risker & Mitigering

6. Definition of Done

7.4 KiB

Raw Blame History