Page DetailsLayouts

Root Layout

• Route: / — Home / Marketing Page
  • File: app/page.layout.tsx
  • Type:Purpose: ServerRoot componentHTML (nowrapper, "useapplies client")Inter font, sets metadata, registers service worker
  • Auth:Metadata: None
    • Title: "Bilko - Accounting Made Simple"
    • Description: "Modern accounting software for Balkan businesses"
    • manifest: /manifest.json (PWA)
    • appleWebApp: capable: true, statusBarStyle: "default", title: "Bilko"
    • icons.apple: /icons/icon-192.png
    • viewport.themeColor: #00E5A0
    • html lang: sr (Serbian)
  • Components used:Dependencies: DropLogoFull,Inter DropAppIcon,font Link,from Image,Google customFonts, iconsServiceWorkerRegistrar (IconSendMoney, IconQrScan, IconVirtualCard, IconShield, IconFastTransfer, IconCorridors)component
  • Data:Current State: StaticFully arraysimplemented, featuresPWA-ready (3 items) and stats (3 items) defined inline
  • Sections:
    1. Header with DropLogoFullmanifest + navservice linksworker (Tjenester, Priser, Om oss, Logg inn, Kom i gang)
    2. Hero with headline, subtext, CTA buttons, phone mockup placeholder
    3. Features grid (Send penger, Betal med QR, Virtuelt kort)
    4. Stats bar (0.5% Gebyr, <2t Leveringstid, 30+ Land)
    5. Trust section (BankID verified, Rask overføring, 30+ land)
    6. Merchant CTA section
    7. Footer with ALAI Holding AS credit
    registration)

  /loginDashboard — LoginLayout

  • Route: /(dashboard)/*
  • File: app/login/page.(dashboard)/layout.tsx
  • Type:Purpose: ClientLayout componentwrapper for all authenticated pages
  • Auth:Key Components: None
    • Sidebar (entrydesktop point)persistent, mobile overlay)
    • TopBar (header with search, notifications, user menu)
  • ComponentsState used:Management: Image,Local Link,state Button,for Mail/Lock/Eye/EyeOff/ArrowRightmobile (lucide)sidebar toggle
  • State:Mobile Responsiveness: email,Responsive password,sidebar showPassword,with error, loadingoverlay
  • DataCurrent fetching:State: POSTFully /api/auth/login with { email, password }
  • Validation: Email regex ^[^\s@]+@[^\s@]+\.[^\s@]+$, required fields check
  • On success: router.push("/dashboard")
  • Social login buttons: BankID, Vipps (UI only, not functional)
  • Dev mode: Shows demo credentials [email protected] / demo1234implemented

  graph LR
      DL["DashboardLayout\napp/(dashboard)/layout.tsx"]
  
      DL --> SB["Sidebar\ncomponents/sidebar.tsx\n• Logo\n• Main nav (5 items)\n• Bottom nav (Settings)\n• Active state via usePathname"]
      DL --> TB["TopBar\ncomponents/top-bar.tsx\n• Mobile menu button\n• Search (Cmd+K)\n• Notifications bell\n• User dropdown menu"]
      DL --> SLOT["Page Slot\n{children}"]
  
      SB -->|"dark sidebar #111113"| SCREEN["Rendered Screen"]
      TB -->|"white top bar"| SCREEN
      SLOT -->|"light content #FAFAFA"| SCREEN
  

  ---

  Pages

  /registerDashboard — Registration(Home)

  • Route: /dashboard
  • File: app/register/(dashboard)/dashboard/page.tsx
  • Type:Purpose: ClientFinancial componentoverview and quick actions
  • Auth:Key Components: None
    • Metric cards (Cash Balance, Revenue MTD, Unpaid Invoices)
    • P&L Bar Chart (6-month trend)
    • Receivables Aging (stacked bar chart)
    • Expenses by Category (donut chart)
    • Recent Transactions table
    • Quick Actions card
  • ComponentsData used:Requirements (Future API): ArrowLeft/ArrowRight/Check/Eye/EyeOff/Phone/Mail/User/Calendar/Lock
    • GET /api/metrics — cashBalance, revenueMTD, unpaidInvoices, expensesMTD, profitMTD, cashFlowChange
    • GET /api/pl/monthly — monthly P&L data (lucide),revenue, Buttonexpenses, profit)
    • GET /api/receivables/aging — receivables breakdown (current, 30d, 60d, 90d+)
    • GET /api/expenses/by-category — expenses grouped by category
    • GET /api/transactions/recent?limit=5 — recent transactions
  • Charts: Recharts (BarChart, PieChart) with responsive containers
  • Current State: Mock data from lib/mock-data.ts
  • Mobile Responsive: Grid adapts 1/2/3 columns based on breakpoint

  graph TD
      DP["Dashboard Page\n/dashboard"]
  
      DP --> ROW1["Row 1 — Metric Cards\ngrid-cols-1 md:grid-cols-3"]
      DP --> ROW2["Row 2 — Charts\ngrid-cols-1 md:grid-cols-3"]
      DP --> ROW3["Row 3 — Tables + Actions\ngrid-cols-1 lg:grid-cols-3"]
  
      ROW1 --> MC1["Cash Balance\nwith trend arrow"]
      ROW1 --> MC2["Revenue MTD\ncurrent month total"]
      ROW1 --> MC3["Unpaid Invoices\nwith warning badge"]
  
      ROW2 --> CH1["P&L Bar Chart\nRecharts BarChart\n6-month revenue/expenses/profit"]
      ROW2 --> CH2["Receivables Aging\nRecharts StackedBarChart\ncurrent/30d/60d/90d+"]
      ROW2 --> CH3["Expenses by Category\nRecharts PieChart (donut)\nper-category breakdown"]
  
      ROW3 --> TBL["Recent Transactions\nRecharts Table\nlast 5 transactions"]
      ROW3 --> QA["Quick Actions\nNew Invoice\nNew Expense\nImport Bank Statement"]
  

  Invoices List

  • Route: /invoices
  • File: app/(dashboard)/invoices/page.tsx
  • Purpose: Invoice management with search, filter, sort
  • Key Features:
    • Status filter (all/draft/sent/paid/overdue)
    • Search by customer name or invoice number
    • Date range filter (this month, last month, quarter, all)
    • Sortable columns (number, customer, date, due date, amount)
    • Row actions (view, edit, send, download PDF, delete)
    • Summary row with totals by status
  • Data Requirements (Future API):
    • GET /api/invoices?status=X&search=Y&dateRange=Z&sort=field&dir=asc — filtered/sorted invoice list
    • PATCH /api/invoices/:id — update invoice
    • DELETE /api/invoices/:id — delete invoice
    • POST /api/invoices/:id/send — send invoice via email
    • GET /api/invoices/:id/pdf — generate PDF
  • Current State: Mock data, client-side filtering/sorting
  • Mobile Responsive: Table scrolls horizontally, filters stack vertically

  Invoice Creation Wizard

  • Route: /invoices/new
  • File: app/(dashboard)/invoices/new/page.tsx
  • Purpose: 6-step (1-4),wizard formto fields,create otp,and pin,send errorsinvoices
  • Steps:
    1. InfoCustomer Selection — firstName,Select lastName,existing email,customer phoneor add new (+47 prefix), dateOfBirth, passworddialog)
    2. VerifyInvoice Details — 6-digitInvoice OTPnumber, inputissue/due (MVP:dates, anynet 6terms, digits accepted)currency
    3. PINLine Items — 4-digitAdd/remove PINitems with(description, customqty, numpadunit UIprice, VAT rate), auto-calculate totals
    4. SuccessCustomization — WelcomeOptional notes and payment terms
    5. Preview — Visual preview of generated invoice
    6. Send — Email form (to, subject, message, redirectcopy to /dashboardself) + save/download options
  • Data Requirements (Future API):
    • GET /api/customers — customer list for dropdown
    • POST /api/customers — create new customer
    • POST /api/invoices — create invoice (draft)
    • POST /api/invoices/:id/send — send invoice via email
    • GET /api/invoices/:id/pdf — download PDF
  • Form Validation:
    • AgeStep >=1: 18Customer (calculated from dateOfBirth)required
    • XSSStep protection:3: namesAt rejectleast one line item with description required
    • Step 6: Email address required
  • Current State: Mock data, local state, no persistence
  • Mobile Responsive: Wizard steps adapt, form fields stack on mobile

  Expenses List

  • Route: < > " ' & ; ( ) { } [ ]/expenses
  • Password:File: min 8 chars, must contain letters AND numbersapp/(dashboard)/expenses/page.tsx
  • Phone:Purpose: mustExpense betracking 8with digitscategorization and approval workflow
  • Key Features:
    • Period filter (Norwegianthis format)month, last month, quarter, year)
    • Category filter (Office, Travel, Meals, Utilities, Marketing, Infrastructure, Software, Professional Services)
    • Search by description or vendor
    • Status badges (pending, approved, paid)
    • Receipt attachment indicator
    • Add Expense dialog (with upload placeholder)
    • Summary stats (total, pending, approved, paid counts)
  • Data fetching:Requirements (Future API):
    • GET /api/expenses?period=X&category=Y&search=Z — filtered expense list
    • POST /api/auth/registerexpenses — create expense
    • PATCH /api/expenses/:id — update expense status
    • POST /api/expenses/:id/receipt — upload receipt (multipart)
    • GET /api/expenses/:id/receipt — download receipt
  • Form Fields:
    • Amount + currency (EUR, RSD, BAM)
    • Category (dropdown)
    • Date
    • Vendor (searchable input)
    • Payment method (Cash, Card, Bank Transfer)
    • Receipt upload (placeholder UI)
    • Description (optional)
  • Current State: Mock data, form submits to console
  • Mobile Responsive: Filters stack, table scrolls

  /dashboardAdd —Expense Main(Dedicated DashboardPage)

  • Route: /expenses/new
  • File: app/dashboard/(dashboard)/expenses/new/page.tsx
  • Type:Purpose: ClientStandalone componentadd-expense page (mobile-friendly, separate from the dialog on /expenses)
  • Auth:Key Features: Yes
    • "Scan Receipt" prominent CTA button (useAuth()Camera icon, no backend yet)
    • Amount field with redirect)currency symbol prefix
    • ComponentsCategory used: DropLogo, BottomNav, ScrollArea, Bell/LogOutselect (lucide)Office Supplies, Travel, Software, Infrastructure, Professional Services, Marketing, Utilities, Other)
    • State:Date transactions,picker loading(defaults to today)
    • Vendor input (optional)
    • Payment Method select (Bank Transfer, Credit/Debit Card, Cash, PayPal)
    • Receipt attachment button (Paperclip icon, no upload yet)
    • Description textarea (optional)
    • Back arrow to /expenses
  • Data fetching:Requirements (Future API): GET
    • POST /api/expenses — create expense via /api/transactions?limit=10useExpenseStore.createExpense()
  • Interfaces:Current State: Calls TransactionuseExpenseStore.createExpense() {with id,mock type,fallback; status,redirects amount,to currency,/expenses recipientName,on createdAt }success
  • Layout:Mobile Responsive:
    Single
    1. Header:column DropLogolayout, +max-w-lg notification bell + logout + avatar initials
    2. Balance card: primary account balance, formatted NOK
    3. Action buttons: Send penger (→ /send), Skann QR (→ /scan)
    4. Recent transactions list in ScrollArea
    5. BottomNav
    centered

  /accounts — Bank AccountsPurchases

  • Route: /purchases
  • File: app/accounts/(dashboard)/purchases/page.tsx
  • Type:Purpose: ClientBills componentand vendor management (NOT a simple alias to /expenses — fully independent page)
  • Auth:Key Features: Yes
    • Summary Cards (useAuth()3): Total Unpaid, Overdue, Due This Week
    • Two Tabs: Bills (table of expenses mapped as bills) | Vendors (table from contacts where type='vendor')
    • Components used:Filters: BottomNav, Card, ArrowLeft/Landmark/Plus/ChevronRightStatus (lucide)All/Unpaid/Overdue/Paid), Vendor (from contacts), Period (This Month/Last Month/This Quarter)
    • Uses useExpenseStore + useContactStore from Zustand
    • Loading states with Skeleton components
  • Data:Data Requirements (Future API): Reads
    • GET /api/expenses — fetched via user.bankAccountsuseExpenseStore.fetchExpenses()
    • GET /api/contacts?type=vendor from— authfetched hookvia (nouseContactStore.fetchContacts()
    separate
    fetch)
  • Layout:Current State:
    Mock
    1. PSD2/Opendata Bankingfallback infovia bannerZustand (blue)stores; bills derived from expenses, vendors derived from contacts of type 'vendor'
    2. AccountMobile cards:Responsive: bankName,Cards maskedand accountNumber,filters balance,stack currency,on isPrimary badge
    3. Total balance summary
    4. "Legg til bankkonto" button (BankID connection note)
    mobile

  /transactions — Transaction HistoryBanking

  • Route: /banking
  • File: app/transactions/(dashboard)/banking/page.tsx
  • Type:Purpose: ClientBank componentaccount management and reconciliation
  • Auth:Key Features: Yes
    (useAuth())
    • 3 tabs: Accounts, Reconcile, Transactions
    • ComponentsAccounts used:Tab: BottomNav,List Tabs/TabsList/TabsTrigger,of ArrowLeft/Clockbank accounts with balances (lucide)multiple currencies)
    • State:Reconcile Tab: transactions,Unreconciled filter,transactions loadingwith match confidence, period selector
    • Transactions Tab: All bank transactions (chronological)
    • Import Transactions button (placeholder)
    • Match actions (approve, link, create new)
  • Data fetching:Requirements (Future API):
    • GET /api/bank-accounts — list accounts
    • POST /api/bank-accounts — add account
    • GET /api/bank-accounts/:id/transactions?type={filter}&limit=50reconciled=false — unreconciled transactions
    • POST /api/bank-accounts/:id/import — CSV import
    • POST /api/bank-accounts/:id/transactions/:txId/reconcile — mark reconciled
    • POST /api/bank-accounts/:id/transactions/:txId/link?invoiceId=X — link to invoice/expense
  • Filters:Match Confidence Logic: AlleVisual (all)indicators for 0%, Overforinger (remittance)<50%, QR-betalinger50-89%, (qr_payment)90%+
  • Grouping:Current State: groupByDate()Mock functiondata, groupsno into:reconciliation I dag, I gar, Denne uken, Eldrelogic
  • Display:Mobile Responsive: AmountTabs withstack, +/-tables prefix and color coding (green for received, red for sent)scroll

  /scanReports — QR ScannerHub

  • Route: /reports
  • File: app/scan/(dashboard)/reports/page.tsx
  • Type:Purpose: ClientFinancial componentreport selection and P&L preview
  • Auth:Report Cards: Yes
    • Profit & Loss (implemented at useAuth()/reports/profit-loss)
    • ComponentsBalance used: BottomNav, Button, ArrowLeft/Camera/Check/X/StoreSheet (lucide)coming soon)
    • Cash Flow Statement (coming soon)
    • VAT/PDV Report (live at /reports/vat)
    • Trial Balance (coming soon)
    • General Ledger (coming soon)
  • State:P&L Preview: scanState
    (scanning
    • Expandable |Revenue/Expenses payment | paying | success), scannedMerchant, amount, paymentResultsections
    • Interfaces:Current ScannedMerchantmonth {detailed id, name, category }, PaymentResult { id, status, amount, fee, merchant }breakdown
    • Flow:Export
      buttons
      1. Scanning(PDF, Excel) — Camera viewfinder UI with scan frame, "Simuler skanning" button (demo)placeholders
      2. Payment — Shows merchant info, amount input, 1% fee calculation
      3. Paying — Loading spinner
      4. Success — Confirmation with transaction details
  • Data fetching:Requirements (Future API): POST
    • GET /api/transactions/qr-paymentreports/pl?month=YYYY-MM with— P&L report data
    • {GET merchantId,/api/reports/balance-sheet?date=YYYY-MM-DD amount— }balance sheet
    • GET /api/reports/cash-flow?period=X — cash flow statement
  • DemoCurrent merchant:State: "AhmetovOnly Kebab"P&L (id:and VAT reports implemented, others show "merchant_001",Coming category:Soon" "Restaurant")badge
  • Mobile Responsive: Report cards grid adapts

  /sendgraph TD
      RH["Reports Hub\n/reports"]
  
      RH --> PL["Profit & Loss\n/reports/profit-loss\nLIVE — Sendexpandable Moneyrevenue/expenses\nfetches (Remittance)from API with mock fallback"]
      RH --> BS["Balance Sheet\nCOMING SOON"]
      RH --> CF["Cash Flow Statement\nCOMING SOON"]
      RH --> VAT["VAT/PDV Report\n/reports/vat\nLIVE — 3-step wizard"]
      RH --> TB["Trial Balance\nCOMING SOON"]
      RH --> GL["General Ledger\nCOMING SOON"]
  
      PL --> PL_R["Revenue Section\n(expandable, breakdown by category)"]
      PL --> PL_E["Expenses Section\n(expandable, breakdown by category)"]
      PL --> PL_NP["Net Profit + Margin"]
      PL --> PL_EX["Export PDF / Export Excel"]
  
      VAT --> VAT_S1["Step 1: Reconciliation Check\n(warn if unreconciled transactions)"]
      VAT --> VAT_S2["Step 2: VAT Audit\n(all VAT transactions table)"]
      VAT --> VAT_S3["Step 3: Return Summary\nBox 1 / Box 2 / Box 3"]
  
      classDef live fill:#1e3a2f,color:#a6e3a1,stroke:#a6e3a1
      classDef soon fill:#2a1e2e,color:#888,stroke:#555
      class PL,VAT live
      class BS,CF,TB,GL soon
  

  VAT Report

  • Route: /reports/vat
  • File: app/send/(dashboard)/reports/vat/page.tsx
  • Type:Purpose: Client component
  • Auth: Yes (useAuth())
  • Components used: Button, ArrowLeft/ArrowRight/Check/ChevronDown/Globe/User (lucide)
  • State: 3-step (1-4),VAT selectedRecipient,return amount, recipients, rates, sending, txResultpreparation
  • Steps:
    1. SelectReconciliation RecipientCheck — ListWarns fromif GETunreconciled /api/recipients,bank showstransactions name + country flagexist
    2. EnterVAT AmountAudit — NOKTable input,of real-timeall conversionVAT transactions (invoices + expenses) with exchangenet/VAT rate, 0.5% fee displayamounts
    3. ReviewReturn Summary — SummaryVAT ofreturn recipient,boxes amount,(Box rate,1: fee,collected, total
    Box
    4. Success2: —paid, ConfirmationBox with3: referencenet numberdue)
  • Data fetching:Requirements (Future API):
    • GET /api/recipientsbank-accounts/unreconciled-count (on— mount)reconciliation status
    • GET /api/ratesvat/transactions?period=YYYY-MM (on— mount)all VAT transactions
    • GET /api/vat/return?period=YYYY-MM — calculated VAT return data
    • POST /api/transactions/remittancevat/submit with— e-filing (Phase 2)
    • {GET recipientId,/api/vat/export/pdf amountNOK,— targetCurrencyPDF }export
    • GET /api/vat/export/xml — XML for e-filing
  • Country flags:Calculations: RSAssumes (Serbia),20% BAstandard (Bosnia),VAT TRrate, (Turkey),converts PKall (Pakistan),currencies PLto (Poland)EUR equivalent
  • Interface:Current State: TxResultMock {data, id,no status,submission, amount,export fee,placeholders
  rate,
  • Mobile recipientName,Responsive: targetAmount,Tabs targetCurrencyadapt, }tables scroll, boxes stack

  /profile — User ProfileSettings

  • Route: /settings
  • File: app/profile/(dashboard)/settings/page.tsx
  • Type: Client component
  • Auth: Yes (useAuth())
  • Components used: BottomNav, ArrowLeft/ChevronRight/LogOut/Settings/Shield/HelpCircle/Bell/CreditCard/Landmark (lucide)
  • Data: Reads user from auth hook
  • Layout:
    1. User info card with initials avatar (green bg), full name, email
    2. Menu items: Mine kontoer (→ /accounts), Varsler, Innstillinger, Sikkerhet, Hjelp og stotte
    3. Logout button with confirmation
    4. Version: "Drop v0.1.0 · ALAI Holding AS"

  /withdrawal — Angrerett (Right of Withdrawal)

  • File: app/withdrawal/page.tsx
  • Type: Client component
  • Auth: No
  • Components used: ChevronLeft, RotateCcw, CheckCircle (lucide)
  • State: submitted, loading
  • Purpose: Norwegian angrerettloven compliance — 14-day right of withdrawal form
  • Layout:
    1. Info section explaining angrerett (right to cancel service agreement within 14 days)
    2. Warning banner: Angrerett does not apply to completed payment transactions, only to the service agreement itself
    3. Form with optional reason dropdown (not_needed, alternative, not_satisfied, other) and comment textarea
    4. Submit button (red) with AML retention notice (data kept for 5 years per hvitvaskingsloven)
    5. Success screen with confirmation message (14-day processing time)

  ---

  /complaints — Send Complaint

  • File: app/complaints/page.tsx
  • Type: Client component
  • Auth: Yes (useAuth())
  • Components used: MessageSquare, CheckCircle, ChevronLeft, ExternalLink (lucide)
  • State: submitted, loading, formData (category, subject, description)
  • Data fetching: POST /api/complaints with { category, subject, description }
  • Purpose: FinansavtalelovenMulti-section §3-53 compliance — formal complaint submission with 15 business day response requirement
  • Layout:
    1. Info text: All complaints taken seriously, up to 15 business days processing time
    2. Form with required fields:
       • Category dropdown: transaction, fees, service, privacy, other
       • Subject text input (max 200 chars)
       • Description textarea (max 2000 chars)
    3. Submit button with POST to /api/complaints
    4. External complaint authority section: Finansklagenemnda (FinKN) contact info with link to finansklagenemnda.no
    5. Success screen: Complaint received, 15 business day review commitment

  ---

  /privacy — Privacy Policy

  • File: app/privacy/page.tsx
  • Type: Client component
  • Auth: None
  • Components used: ChevronLeft, Shield (lucide)
  • Purpose: GDPR-compliant privacy policysettings page (Norwegian language)
  • Sections:
    1. Behandlingsansvarlig:Company ALAI— HoldingCompany ASprofile as(name, datalegal controllerform, address, tax ID, currency, fiscal year)
    2. Hvilke opplysninger vi samler inn:Users Identification— User management table (name, email, phone,role, BankID)status), Financialinvite data (bank accounts via Open Banking, transaction history), Technical data (IP, device, app version)button
    3. FormaalTax med& behandlingen:Compliance Transaction— processingCountry, (PSD2/PISP),VAT KYC/AMLregistration, compliance,VAT AML/terrorismnumber/rate, prevention,compliance service improvementreminders
    4. Rettslig grunnlag:Integrations Contract— Connected integrations (GDPRIntesa 6(1)(b))Bank CSV, Email SMTP), Legalavailable obligationintegrations (6(1)(c))Stripe, forFiken, AML/KYC,Google LegitimateSheets, interestSlack, (6(1)(f)) for service improvementDocuSeal)
    5. Dine rettigheter:Notifications Innsyn— (access),Email Rettingand (rectification),in-app Slettingnotification (erasure with 5-year AML retention), Dataportabilitet (portability)preferences
    6. Oppbevaring:Security Minimum— 52FA, yearssession pertimeout, hvitvaskingsloven,password anonymizationpolicy, onaudit account deletion but AMLlog, data retained
    export,
    7. Kontakt:delete [email protected], complaint to Datatilsynetcompany
• Data

  ---

  Requirements

  (Future API):

  • GET /termsapi/settings/company — Termscompany of Service

  • File: app/terms/page.tsxdata
  • Type:PATCH Client/api/settings/company component— update company
  • Auth:GET None
  /api/users
  • Components— used: ChevronLeft, FileText (lucide)
  • Purpose: Legal terms of service (Norwegian language)
  • Sections:
    1. Om tjenesten: Drop as PISP/AISP under PSD2, provided by ALAI Holding AS
    2. Krav til brukere: 18+ age, Norwegian residency with BankID, KYC required, Norwegian phone (+47)
    3. Betalingsmodell: Drop never holds customer money, pass-through model via Open Banking
    4. Gebyrer: All fees shown before transaction confirmation, see fees page for fulluser list
    5. Ansvar:POST Drop responsible for correct payment execution per betalingstjenesteloven, refund rights per law, not liable for bank/recipient delays
    6. Misbruk og sperring: Right to block accounts for suspected AML/fraud, mandatory STR reporting to Økokrim/EFE
    7. Angrerett: 14-day withdrawal right per angrerettloven (does not apply to completed transactions)
    8. Tvister: Norwegian law, Oslo tingrett jurisdiction, complaint to Finansklagenemnda

  ---

  /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

  ---

  Authentication Flow

  sequenceDiagram
      participant U as User
      participant AP as AuthProvider
      participant AS as useAuthStore
      participant R as Router
      participant API as Backend API
  
      U->>AP: Navigate to /profile/personaldashboard
      AP->>AS: checkAuth()
      AS->>API: GET /api/auth/me (Bearer token)
  
      alt API not configured (demo mode)
          AP-->>U: Render page directly (demoFallback=true)
      else Token valid
          API-->>AS: 200 OK — Personaluser Informationdata
          AS-->>AP: isAuthenticated=true
          AP-->>U: Render protected page
      else Token invalid / no token
          API-->>AS: 401 Unauthorized
          AS-->>AP: isAuthenticated=false
          AP->>R: router.replace('/login')
          R-->>U: Redirect to /login
          U->>U: Enter email + password
          U->>AS: login(email, password)
          AS->>API: POST /api/auth/login
          API-->>AS: 200 OK — JWT token
          AS->>R: router.push('/dashboard')
          R-->>U: Redirect to /dashboard
      end
  

  ---

  Screenshot Descriptions

  Dashboard

  User sees:

  • 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:

  • 3-step tabs at top
  • Step 1: Warning card if unreconciled transactions exist, "Reconcile Now" and "Continue" buttons
  • Step 2: VAT transaction table (type badge, net amount, VAT rate, VAT amount), summary boxes (collected, paid, net due)
  • 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 sees:

  • ComponentsSidebar used:nav ChevronLeft,on ShieldCheckleft (lucide),6 BottomNavsections)
  • State:Content Readsarea useron fromright authshowing hookactive section
  • Layout:Company
    section: form fields for company data
    1. UserUsers avatarsection: table with initialsinvite (green gradient)button
    2. FullIntegrations namesection: andconnected emailintegrations displaycards, available integrations grid
    3. Read-onlySecurity formsection: fields:danger firstName,zone lastName,at email, phonebottom (+47delete 987company, 65red 432), dateOfBirth (15. mars 1995)
    4. 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:Authentication Clientimplemented componentvia AuthProvider + useAuthStore — demo mode active when NEXT_PUBLIC_API_URL not set
  • 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