Jakob Wennberg
729 lines
53 KiB
Markdown
729 lines
53 KiB
Markdown
# UI/UX Specification
|
|
|
|
## Design Principles
|
|
|
|
1. **Calm over busy**: Financial apps induce anxiety. Use whitespace, muted colors, clear hierarchy.
|
|
2. **One action per screen**: Each view has one primary action.
|
|
3. **Instant feedback**: Every action shows immediate result.
|
|
4. **Mobile-first**: Influencers manage finances on phone.
|
|
|
|
Color System
|
|
CSS
|
|
|
|
:root {
|
|
/* Primary - Deep Forest & Sage (Trustworthy but aesthetic) */
|
|
--primary-50: #f4fbf7;
|
|
--primary-500: #4d8b73;
|
|
--primary-600: #3a6b58;
|
|
--primary-700: #2c4f42;
|
|
|
|
/* Success - Muted Mint (Profit/Growth) */
|
|
--success-500: #10b981;
|
|
|
|
/* Warning - Burnt Amber (Pending/Alerts) */
|
|
--warning-500: #d97706;
|
|
|
|
/* Danger - Soft Brick (Expenses/Loss) */
|
|
--danger-500: #e11d48;
|
|
|
|
/* Neutral - "Stone" (Warmer than standard gray, feels like paper) */
|
|
--gray-50: #fafaf9; /* Background base */
|
|
--gray-100: #f5f5f4; /* Card background */
|
|
--gray-200: #e7e5e4; /* Borders */
|
|
--gray-500: #78716c; /* Secondary text */
|
|
--gray-900: #1c1917; /* Primary text (Soft Black) */
|
|
}
|
|
Typography
|
|
Headings: Plus Jakarta Sans or Outfit (600/700 weight) — More editorial feel
|
|
|
|
Body: Inter (400/500 weight) — Clean readability
|
|
|
|
Numbers/Money: JetBrains Mono or Inter (Tabular figures enabled)
|
|
|
|
## Page Layouts
|
|
|
|
### Onboarding Wizard (/onboarding)
|
|
|
|
Full-screen wizard. User cannot access app until complete. Progress saved between sessions.
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ │
|
|
│ Logo Steg 1 av 6 │
|
|
│ │
|
|
│ ━━━━━━━━━━○○○○○○ │
|
|
│ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ VÄLKOMMEN! LÅT OSS KOMMA IGÅNG │
|
|
│ │
|
|
│ Vilken bolagsform har du? │
|
|
│ │
|
|
│ ┌─────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ ○ Enskild firma │ │
|
|
│ │ Enskild näringsidkare │ │
|
|
│ │ │ │
|
|
│ └─────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ ○ Aktiebolag (AB) │ │
|
|
│ │ Eget bolag med org.nummer │ │
|
|
│ │ │ │
|
|
│ └─────────────────────────────────────┘ │
|
|
│ │
|
|
│ │
|
|
│ │
|
|
│ ┌─────────────────────────────────────┐ │
|
|
│ │ Fortsätt → │ │
|
|
│ └─────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Wizard Steps:**
|
|
|
|
1. **Entity Type** - Enskild firma or Aktiebolag
|
|
2. **Company Details** - Name, org.nr (required for AB), address
|
|
3. **Tax Registration** - F-skatt status, VAT registered?, momsperiod
|
|
4. **Preliminary Tax** - Monthly F-skatt amount (for comparison warnings)
|
|
5. **Bank Details** - Account info for invoice payments (IBAN/BIC or Swedish format)
|
|
6. **Connect Bank** - Enable Banking integration (at least one account required)
|
|
|
|
```
|
|
STEP 2: FÖRETAGSUPPGIFTER
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ │
|
|
│ Företagsnamn * │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Anna Andersson Content │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Organisationsnummer * (för AB) │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ 559123-4567 │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Adress * │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Storgatan 1 │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Postnummer * Ort * │
|
|
│ ┌──────────────┐ ┌────────────────────────────┐ │
|
|
│ │ 111 22 │ │ Stockholm │ │
|
|
│ └──────────────┘ └────────────────────────────┘ │
|
|
│ │
|
|
│ │
|
|
│ ┌──────────────┐ ┌─────────────────────────────────┐ │
|
|
│ │ ← Tillbaka │ │ Fortsätt → │ │
|
|
│ └──────────────┘ └─────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
```
|
|
STEP 3: SKATTEREGISTRERING
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ │
|
|
│ ☑ Jag har F-skattsedel │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ Räkenskapsår * │
|
|
│ ○ Kalenderår (jan-dec) │
|
|
│ ○ Brutet räkenskapsår │
|
|
│ │
|
|
│ [Visas om brutet:] │
|
|
│ Räkenskapsåret börjar * │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Juli (1 jul - 30 jun) ▼ │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ Är du momsregistrerad? * │
|
|
│ │
|
|
│ ○ Ja, jag är momsregistrerad │
|
|
│ ○ Nej, min omsättning är under 80 000 kr/år │
|
|
│ │
|
|
│ [Visas om momsregistrerad:] │
|
|
│ │
|
|
│ Momsnummer │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ SE559123456701 │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Momsperiod * │
|
|
│ ○ Kvartalsvis (vanligast) │
|
|
│ ○ Månadsvis │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
```
|
|
STEP 4: PRELIMINÄRSKATT
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ │
|
|
│ Hur mycket betalar du i F-skatt per månad? │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ 15 000 kr │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ⓘ Vi använder detta för att varna dig om din beräknade │
|
|
│ skatt skiljer sig mycket från det du betalar in. │
|
|
│ │
|
|
│ Hittar du det på: │
|
|
│ • Ditt senaste F-skattbeslut från Skatteverket │
|
|
│ • Skattekontot på skatteverket.se │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Jag vet inte just nu - hoppa över │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
```
|
|
STEP 6: KOPPLA BANK
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ │
|
|
│ Koppla ditt företagskonto │
|
|
│ │
|
|
│ Vi hämtar dina transaktioner automatiskt så du slipper │
|
|
│ mata in dem manuellt. │
|
|
│ │
|
|
│ 🔒 Säkert via BankID. Vi kan aldrig flytta dina pengar. │
|
|
│ │
|
|
│ ┌─────────────────────────────────────┐ │
|
|
│ │ 🏦 Koppla bankkonto │ │
|
|
│ └─────────────────────────────────────┘ │
|
|
│ │
|
|
│ Populära banker: │
|
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
|
│ │ Nordea │ │ SEB │ │Swedbank │ │ Handels │ │
|
|
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
|
|
│ │
|
|
│ ⓘ Du kan koppla fler konton senare i inställningar. │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Validation Rules:**
|
|
- All fields marked * are required
|
|
- Org.nr validated against format (NNNNNN-NNNN)
|
|
- At least one bank account must be connected
|
|
- Cannot proceed without completing current step
|
|
|
|
---
|
|
|
|
### Dashboard (/)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Logo [Settings] [Avatar]│
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ DISPONIBELT ATT SPENDERA │ │
|
|
│ │ │ │
|
|
│ │ 136 205 kr │ │
|
|
│ │ ─────────────────── │ │
|
|
│ │ │ │
|
|
│ │ Total: 450 000 kr │ │
|
|
│ │ ┌────────────────────────────┬──────────────┐ │ │
|
|
│ │ │██████████████████████████ │░░░░░░░░░░░░░░│ │ │
|
|
│ │ │ Disponibelt 30% │ Låst 70% │ │ │
|
|
│ │ └────────────────────────────┴──────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ [Visa skatteberäkning ↓] │ │
|
|
│ │ │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────┐ ┌─────────────────────┐ │
|
|
│ │ ⚠️ 23 transaktioner │ │ 📄 2 obetalda │ │
|
|
│ │ att sortera │ │ fakturor │ │
|
|
│ │ │ │ 45 000 kr │ │
|
|
│ │ [Sortera nu →] │ │ [Visa →] │ │
|
|
│ └─────────────────────┘ └─────────────────────┘ │
|
|
│ │
|
|
│ INTÄKTER 2024 ┌────────────────────────┐ │
|
|
│ ────────────── │ ____│ │
|
|
│ 450 000 kr │ ____/ │ │
|
|
│ │ ____/ │ │
|
|
│ │ ____/ │ │
|
|
│ │____/ │ │
|
|
│ └────────────────────────┘ │
|
|
│ Jan Feb Mar Apr May Jun │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
│ [Dashboard] [Transaktioner] [Fakturor] [+] │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Components:**
|
|
|
|
1. **BalanceCard**: Hero component showing available balance
|
|
- Large number, animated on load
|
|
- Expandable tax breakdown panel
|
|
- Color-coded bar chart (green=available, gray=locked)
|
|
|
|
2. **AlertCard**: Action items requiring attention
|
|
- Badge with count
|
|
- Clear CTA button
|
|
- Subtle warning color for urgency
|
|
|
|
3. **RevenueChart**: Simple line/area chart
|
|
- Recharts or Chart.js
|
|
- Hover shows month details
|
|
- No unnecessary decoration
|
|
|
|
---
|
|
|
|
### Tax Breakdown (Expanded)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ │
|
|
│ SKATTEBERÄKNING 2024 [Så räknar vi] │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ Intäkter 450 000 kr │
|
|
│ - Avdragsgilla kostnader -85 000 kr │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ = Resultat 365 000 kr │
|
|
│ │
|
|
│ Egenavgifter (28,97%) -105 745 kr ░░░░ │
|
|
│ Inkomstskatt (~32%) -116 800 kr ░░░░░ │
|
|
│ Moms att betala -91 250 kr ░░░░ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ = Låst för skatt 313 795 kr │
|
|
│ │
|
|
│ ⓘ Detta är en uppskattning. Faktisk skatt kan variera. │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Transactions - Swipe View (/transactions)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ← Tillbaka Sortera transaktioner │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 23 kvar att sortera │
|
|
│ │
|
|
│ ← PRIVAT FÖRETAG → │
|
|
│ │
|
|
│ ┌─────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ ADOBE SYSTEMS │ │
|
|
│ │ -1 500,00 kr │ │
|
|
│ │ │ │
|
|
│ │ 15 jan 2024 │ │
|
|
│ │ │ │
|
|
│ │ ┌─────────────────┐ │ │
|
|
│ │ │ Företag │ │ │
|
|
│ │ │ [▼ Välj typ] │ │ │
|
|
│ │ └─────────────────┘ │ │
|
|
│ │ │ │
|
|
│ └─────────────────────────┘ │
|
|
│ │
|
|
│ [Osäker?] │
|
|
│ │
|
|
│ ──────────────────────────────────────────────────────────│
|
|
│ │
|
|
│ Redan sorterade [Visa alla] │
|
|
│ │
|
|
│ ● Adobe Systems -1 500 kr Programvara ✓ │
|
|
│ ● Spotify AB -149 kr Privat ✓ │
|
|
│ ● Influencer AB +25 000 kr Inkomst ✓ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Interaction:**
|
|
- Swipe right = Business (show expense type selector)
|
|
- Swipe left = Private
|
|
- Tap "Osäker?" = Mark for later / add note
|
|
- Cards animate smoothly with spring physics
|
|
|
|
**Components:**
|
|
|
|
1. **SwipeCard**: Draggable card with gesture handling
|
|
- Use `@use-gesture/react` + `framer-motion`
|
|
- Threshold: 100px triggers categorization
|
|
- Background color hints direction
|
|
|
|
2. **ExpenseTypeSelector**: Dropdown/bottom sheet
|
|
- Only shown for business expenses
|
|
- Quick-select common types
|
|
|
|
---
|
|
|
|
### Transactions - List View (/transactions?view=list)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Transaktioner [Filter] [+ Manual] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ 🔍 Sök transaktioner... │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [Alla] [Osorterade (23)] [Företag] [Privat] │
|
|
│ │
|
|
│ JANUARI 2024 │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ 15 jan ADOBE SYSTEMS -1 500,00 kr │
|
|
│ Software subscription [Programvara] → │
|
|
│ │
|
|
│ 14 jan Influencer Agency AB +25 000,00 kr │
|
|
│ Faktura #INV-2024-012 [Inkomst] → │
|
|
│ │
|
|
│ 12 jan ICA MAXI -847,00 kr │
|
|
│ Osorterad [Sortera] → │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Create Invoice (/invoices/new)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ← Avbryt Ny faktura [Förhandsv]│
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ KUND │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ 🔍 Sök eller skapa ny kund... │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌──────────────────┐ ┌──────────────────┐ │
|
|
│ │ Google Ireland │ │ Influencer AB │ │
|
|
│ │ EU-företag │ │ Svenskt företag │ │
|
|
│ └──────────────────┘ └──────────────────┘ │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ FAKTURADETALJER │
|
|
│ │
|
|
│ Fakturadatum Förfallodatum │
|
|
│ ┌────────────┐ ┌────────────┐ │
|
|
│ │ 2024-01-15 │ │ 2024-02-14 │ (30 dagar) │
|
|
│ └────────────┘ └────────────┘ │
|
|
│ │
|
|
│ Er referens │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ PO-12345 │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ RADER │
|
|
│ │
|
|
│ Beskrivning Antal À-pris │
|
|
│ ┌────────────────────────────────┐ ┌────┐ ┌─────────┐ │
|
|
│ │ Instagram kampanj November │ │ 1 │ │ 20 000 │ │
|
|
│ └────────────────────────────────┘ └────┘ └─────────┘ │
|
|
│ = 20 000 kr │
|
|
│ │
|
|
│ [+ Lägg till rad] │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ Summa exkl. moms 20 000,00 kr │
|
|
│ Moms 25% 5 000,00 kr │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ ATT BETALA 25 000,00 kr │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ [Spara utkast] [Skapa & skicka] │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**VAT Logic Display:**
|
|
|
|
For EU customer with valid VAT:
|
|
```
|
|
│ Summa 20 000,00 kr │
|
|
│ Moms 0,00 kr │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ ATT BETALA 20 000,00 kr │
|
|
│ │
|
|
│ ⓘ Omvänd skattskyldighet tillämpas (EU B2B) │
|
|
```
|
|
|
|
**Components:**
|
|
|
|
1. **CustomerSelect**: Searchable dropdown with recent customers
|
|
- Shows customer type badge
|
|
- "Create new" option at bottom
|
|
|
|
2. **InvoiceLineItem**: Repeatable row
|
|
- Auto-calculate line total
|
|
- Drag to reorder
|
|
|
|
3. **VatSummary**: Auto-updating totals
|
|
- Shows applicable VAT rule
|
|
- Explanation tooltip
|
|
|
|
---
|
|
|
|
### Invoice Preview (Modal/Slide-over)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Förhandsgranskning [✕ Stäng] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ ANNA ANDERSSON CONTENT │ │
|
|
│ │ Storgatan 1, 111 22 Stockholm │ │
|
|
│ │ F-skatt: Ja | Moms: SE123456789001 │ │
|
|
│ │ │ │
|
|
│ │ ───────────────────────────────────────────────── │ │
|
|
│ │ │ │
|
|
│ │ FAKTURA │ │
|
|
│ │ Fakturanummer: INV-2024-015 │ │
|
|
│ │ Fakturadatum: 2024-01-15 │ │
|
|
│ │ Förfallodatum: 2024-02-14 │ │
|
|
│ │ │ │
|
|
│ │ Till: │ │
|
|
│ │ Google Ireland Limited │ │
|
|
│ │ Gordon House, Barrow Street │ │
|
|
│ │ Dublin 4, Ireland │ │
|
|
│ │ VAT: IE6388047V │ │
|
|
│ │ │ │
|
|
│ │ ───────────────────────────────────────────────── │ │
|
|
│ │ │ │
|
|
│ │ Beskrivning Antal Pris Summa │ │
|
|
│ │ ───────────────────────────────────────────────── │ │
|
|
│ │ YouTube AdSense Jan 2024 1 st €1,850 €1,850 │ │
|
|
│ │ │ │
|
|
│ │ ───────────────────────────────────────────────── │ │
|
|
│ │ Summa exkl. moms €1,850 │ │
|
|
│ │ Moms (0%) €0 │ │
|
|
│ │ ───────────────────────────────────────────────── │ │
|
|
│ │ ATT BETALA €1,850 │ │
|
|
│ │ │ │
|
|
│ │ Reverse charge - Article 196 Council Directive │ │
|
|
│ │ 2006/112/EC │ │
|
|
│ │ │ │
|
|
│ │ ───────────────────────────────────────────────── │ │
|
|
│ │ Betalning till: IBAN SE12 3456 7890 1234 5678 90 │ │
|
|
│ │ BIC: SWEDSESS │ │
|
|
│ │ │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ [Ladda ner PDF] [Skicka via email] │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Salary Management (/salary) - Aktiebolag only
|
|
|
|
Only visible for users with entity_type = 'aktiebolag'.
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ← Tillbaka Lön & Arbetsgivaravgifter│
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 2024 [+ Registrera lön]│
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ HITTILLS I ÅR │ │
|
|
│ │ │ │
|
|
│ │ Bruttolön 150 000 kr │ │
|
|
│ │ Arbetsgivaravgifter 47 130 kr │ │
|
|
│ │ ───────────────────────────────── │ │
|
|
│ │ Total lönekostnad 197 130 kr │ │
|
|
│ │ │ │
|
|
│ │ Innehållen skatt 45 000 kr ⚠️ Att betala in │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ LÖNEUTBETALNINGAR │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ Mars 2024 │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Brutto 50 000 kr Arb.avg 15 710 kr │ │
|
|
│ │ Skatt -15 000 kr Totalt 65 710 kr │ │
|
|
│ │ ───────────────── │ │
|
|
│ │ Netto 35 000 kr AGI: ✓ Rapporterad │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Februari 2024 │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Brutto 50 000 kr Arb.avg 15 710 kr │ │
|
|
│ │ Skatt -15 000 kr Totalt 65 710 kr │ │
|
|
│ │ ───────────────── │ │
|
|
│ │ Netto 35 000 kr AGI: ⚠️ Ej rapporterad │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Register Salary Modal:**
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Registrera löneutbetalning [✕] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Löneperiod * │
|
|
│ ┌──────────────┐ till ┌──────────────┐ │
|
|
│ │ 2024-03-01 │ │ 2024-03-31 │ │
|
|
│ └──────────────┘ └──────────────┘ │
|
|
│ │
|
|
│ Bruttolön * │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ 50 000 kr │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Skattetabell * │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Tabell 33 - Stockholm ▼ │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ ⓘ Hittas på ditt skattsedelsbesked │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ BERÄKNAT │
|
|
│ Arbetsgivaravgifter (31,42%) 15 710 kr │
|
|
│ Preliminärskatt (enligt tabell) 15 000 kr │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ Nettolön till dig 35 000 kr │
|
|
│ Total kostnad för bolaget 65 710 kr │
|
|
│ │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Registrera löneutbetalning │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Settings (/settings)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ← Tillbaka Inställningar │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ FÖRETAGSINFORMATION │
|
|
│ │
|
|
│ Företagsnamn │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ Anna Andersson Content │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ☑ Jag har F-skattsedel │
|
|
│ ☑ Jag är momsregistrerad │
|
|
│ │
|
|
│ Momsnummer │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ SE199001011234 │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ SKATTEBERÄKNING │
|
|
│ │
|
|
│ Kommunalskattesats │
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ 31.5 % [Hitta min →] │ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
│ ⓘ Används för att beräkna ungefärlig inkomstskatt │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ FAKTURAINSTÄLLNINGAR │
|
|
│ │
|
|
│ Betalningsvillkor (dagar) │
|
|
│ ┌────────┐ │
|
|
│ │ 30 │ │
|
|
│ └────────┘ │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ BANKUPPGIFTER (visas på fakturor) │
|
|
│ │
|
|
│ Bank Clearingnummer Kontonummer │
|
|
│ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
|
|
│ │ Nordea │ │ 3300 │ │ 123 456 789 │ │
|
|
│ └──────────┘ └──────────┘ └──────────────────┘ │
|
|
│ │
|
|
│ ───────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ KOPPLAD BANK │
|
|
│ │
|
|
│ ✓ Nordea ****4567 [Koppla bort] │
|
|
│ Senast synkad: idag 08:15 │
|
|
│ │
|
|
│ [Spara ändringar] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Component Library
|
|
|
|
Use shadcn/ui as base. Key components needed:
|
|
|
|
### Core
|
|
- Button (primary, secondary, ghost, destructive)
|
|
- Input (text, number, date)
|
|
- Select (with search)
|
|
- Checkbox
|
|
- Card
|
|
- Badge
|
|
- Dialog / Sheet (slide-over)
|
|
- Toast (notifications)
|
|
|
|
### Custom
|
|
- SwipeCard (gesture-based)
|
|
- MoneyDisplay (formatted SEK/EUR with color)
|
|
- StatusBadge (invoice/transaction status)
|
|
- PercentageBar (disponibelt visualization)
|
|
- DatePicker (Swedish locale)
|
|
|
|
---
|
|
|
|
## Responsive Behavior
|
|
|
|
| Breakpoint | Layout |
|
|
|------------|--------|
|
|
| < 640px (mobile) | Single column, bottom nav, swipe UI default |
|
|
| 640-1024px (tablet) | Two columns where appropriate |
|
|
| > 1024px (desktop) | Sidebar nav, multi-column dashboard |
|
|
|
|
Mobile is primary. All features must work on 375px width.
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
- All interactive elements keyboard accessible
|
|
- ARIA labels for icons
|
|
- Color contrast AA minimum
|
|
- Focus indicators visible
|
|
- Screen reader tested
|