/feesapi/users/invite — Feeinvite Overview

• File: app/fees/page.tsxuser
• Type:GET Client/api/settings/tax component— tax settings
• Auth:PATCH None/api/settings/tax — update tax settings
• ComponentsGET used:/api/integrations ChevronLeft,— Receiptintegration (lucide)list
• Purpose:POST Transparent/api/integrations/:id/connect fee— disclosureconnect page (Norwegian language)integration
• Sections:GET
  /api/settings/notifications
  1. Overføring— tilnotification utlandet:
     • Transaction fee: 1.5% per transferpreferences
     • CurrencyPATCH markup:/api/settings/notifications 0.5%— onupdate mid-market ratepreferences
     • TypicalGET total:/api/security/audit-log ~2%— (compareaudit withlog
     banks
     • POST at/api/security/data-export 3-7%)— request data export
     • DELETE /api/company — delete company
  2. QR-betalingCurrent i butikk:State:
     Mock
     • Fordata, customer:form Free (no chargesubmits to payer)
     • For merchant: 0.5% (lower than card terminals)
     console
  3. Kontotjenester:Mobile Responsive:
     Sidebar
     • Accountnav creation:stacks, Free
     forms
     • Monthly fee: Free
     • Bank account linking (AISP): Free
  4. Viktig informasjon:
     • Fees can change with 30-day notice
     • Exchange rates updated in real-time from market
     • Always see final amount before confirming
  adapt

Screenshot Descriptions

/profile/personalDashboard

User Personal Informationsees:

• File:3 app/profile/personal/page.tsxmetric cards at top (cash balance with green arrow, revenue MTD, unpaid invoices with warning badge)
• Type:3 Clientcharts componentin row below (P&L bar chart, receivables aging stacked bar, expenses donut)
• Auth:Bottom Yesrow: recent transactions table on left, quick action buttons on right

Invoices List

User sees:

• Header with "Invoices" title and "New Invoice" button
• Filter row (useAuth()status dropdown, search input, date range dropdown)
• Table with all invoices (sortable columns, status badges, action menu per row)
• Summary bar at bottom showing totals by status

Invoice Wizard

User sees:

• Progress bar with 6 steps at top
• Current step content in card below
• Back/Next buttons at bottom (Send on final step)
• Step 3 shows line items with add/remove, running total calculation
• Step 5 shows formatted invoice preview

Expenses

User sees:

• "Expenses" header with "Add Expense" button
• Filters (period, category, search)
• Table with date, description, category, amount, vendor, status badge, receipt icon
• Summary bar with totals (total €, pending count, approved count, paid count)
• Add dialog: form with amount+currency, category, date, vendor, payment method, receipt upload, description

Banking

User sees:

• 3 tabs: Accounts, Reconcile, Transactions
• Accounts tab: table of bank accounts with type, currency, balance
• Reconcile tab: account selector, period, unreconciled transaction table with match confidence indicators, action buttons (✓ approve, 🔗 link, ➕ create)
• Transactions tab: full transaction history with reconciled status (✓/○)

VAT Report

User sees:

• Components3-step used:tabs ChevronLeft,at ShieldCheck (lucide), BottomNavtop
• State:Step Reads1: userWarning fromcard authif hookunreconciled transactions exist, "Reconcile Now" and "Continue" buttons
• Layout:Step
  2: VAT transaction table (type badge, net amount, VAT rate, VAT amount), summary boxes (collected, paid, net due)
  1. Step 3: VAT return boxes (Box 1, Box 2, Box 3 highlighted), export buttons (PDF, XML), submit button (disabled, "Coming in Phase 2")

Settings

User avatarsees:

• Sidebar nav on left (6 sections)
• Content area on right showing active section
• Company section: form fields for company data
• Users section: table with initialsinvite (green gradient)button
• FullIntegrations namesection: andconnected emailintegrations displaycards, available integrations grid
• Read-onlySecurity formsection: fields:danger firstName,zone lastName,at email, phonebottom (+47delete 987company, 65red 432), dateOfBirth (15. mars 1995)
• BankID verification badge (green banner with ShieldCheck icon)
• Note: All fields are disabled (cannot edit) — verified via BankIDborder)

/profile/security — Security Settings

Notes

• File:All pages use mock data from app/profile/security/page.tsxlib/mock-data.ts
• Type:No authentication Clientimplemented component(Phase 2)
• Auth:No persistence Yes— (useAuth())refreshing page loses all changes
• ComponentsMobile-first used:design ChevronLeft, ChevronRight, Lock, Smartphone, Laptop (lucide), BottomNav
• Sections:
  1. Passord: Change password button (shows "Sist endret: Aldri")
  2. To-faktor autentisering:
     • BankID verification: Active (green badge)
     • Vipps verification: Not activated (gray badge)
  3. Aktive enheter:
     • iPhone 15 Pro: Oslo, Norge — Aktiv nå (green dot indicator)
     • MacBook Pro: Oslo, Norge — I går kl. 18:45
  4. Footer: Support contact ([email protected])
• Note: UI only, no actual functionality connected

/profile/notifications — Notification Settings

• File: app/profile/notifications/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: ChevronLeft, Bell, Mail (lucide), BottomNav
• State: pushEnabled, emailEnabled, settingsLoaded
• Data fetching:
  • GET /api/settings (on mount)
  • PATCH /api/settings with { pushEnabled: boolean } or { emailEnabled: boolean } (on toggle)
• Layout:
  1. Push-varsler toggle switch (Bell icon)
  2. E-postvarsler toggle switch (Mail icon)
• Behavior: Toggles immediately update state and send PATCH request, revert on failure

/profile/language — Language Settings

• File: app/profile/language/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: ChevronLeft, Check (lucide), BottomNav
• State: selected, saving
• Data fetching:
  • GET /api/settings (on mount)
  • PATCH /api/settings with { language: string } (on save)
• Languages: nb (Norsk Bokmål), en (English), bs (Bosanski), sq (Shqip)
• Layout:
  1. Language list with radio selection (green checkmark for selected)
  2. "Lagre" button (green) to save selection
• Behavior: Selection updates local state, user must click "Lagre" to persist

/notifications — Notifications Center

• File: app/notifications/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: BottomNav, ArrowLeft, Bell, ArrowUpRight, ScanLine, Smartphone, TrendingUp (lucide)
• State: notifications, fetching
• Data fetching:
  • GET /api/notifications (on mount)
  • PATCH /api/notifications with { notificationIds: [ids] } (mark read, fire-and-forget)
• Interface: Notification { id, type, title, body, read, createdAt }
• Layout:
  1. Header with back button + "Varsler" title
  2. Empty state: Bell icon + "Ingen varsler enna" message
  3. Grouped notifications: I DAG / I GÅR / date groups
  4. Notification cards: icon based on type, title, body, timestamp, unread dot indicator
  5. BottomNav
• Notification types: transaction_complete (green), qr_payment (yellow), security (blue), rate_update (yellow), default (gray)
• Auto-read: Automatically marks all unread notifications as read on page load
• Time formatting: "I dag kl. HH:MM", "I går kl. HH:MM", or "DD.MM.YYYY kl. HH:MM"

/cards — Card Management (FUTURE — feature-flagged)

Note: Cards are a FUTURE feature, gated behind feature flags (all default to false). Requires a card issuing partner before activation.

• File: app/cards/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Feature flags: virtualCards (gate), physicalCards, cardPin, spendingLimits — all defaultpages totested falseat mobile/tablet/desktop breakpoints
• ComponentsDark used: Button, Dialog, various lucide icons (CreditCard, Plus, ArrowLeft, Smartphone, Eye, EyeOff, Lock, X, Check, Copy, RefreshCw)
• State: cards, selectedCard, showDetails, showOrderForm, orderForm, loading
• Data fetching:
  • GET /api/cards (list)
  • POST /api/cards (create virtual)
  • POST /api/cards with type "physical"sidebar + addresslight (ordercontent physical)
  area
  • PATCH— /api/cards/{id}consistent withlayout {status:across "frozen"all | "active"}
  • DELETE /api/cards/{id}pages
• Card visual: Green gradient background, masked card number (•••• •••• •••• 4242), expiry, cardholder name