Pages

BilkoDrop Frontend — Pages

Framework:All pages are in src/drop-app/src/app/ using Next.js 15 (App Router)Router Currentfile-based State:routing.

Fully implemented with mock data Future State: Will require API integration to replace mock data

---

LayoutsPage Index

Route	File	Type	Auth Required	BottomNav
/	page.tsx	Server	No	No
/login	login/page.tsx	Client	No	No
/register	register/page.tsx	Client	No	No
/dashboard	dashboard/page.tsx	Client	Yes	Yes
/accounts	accounts/page.tsx	Client	Yes	Yes
/transactions	transactions/page.tsx	Client	Yes	Yes
/scan	scan/page.tsx	Client	Yes	Yes
/send	send/page.tsx	Client	Yes	No
/profile	profile/page.tsx	Client	Yes	Yes
/profile/personal	profile/personal/page.tsx	Client	Yes	No
/profile/security	profile/security/page.tsx	Client	Yes	No
/profile/notifications	profile/notifications/page.tsx	Client	Yes	No
/profile/language	profile/language/page.tsx	Client	Yes	No
/notifications	notifications/page.tsx	Client	Yes	Yes
/cards	cards/page.tsx	Client	Yes	No
/complaints	complaints/page.tsx	Client	No	No
/fees	fees/page.tsx	Client	No	No
/privacy	privacy/page.tsx	Client	No	No
/terms	terms/page.tsx	Client	No	No
/withdrawal	withdrawal/page.tsx	Client	No	No

---

Page Details

Root/ Layout— Home / Marketing Page

• Route: /
• File: app/layout.page.tsx
• Purpose:Type: RootServer HTMLcomponent wrapper,(no applies"use Inter font, sets metadataclient")
• Metadata:Auth:
  • Title: "Bilko - Accounting Made Simple"
  • Description: "Modern accounting software for Balkan businesses"
  None
• Dependencies:Components used: InterDropLogoFull, fontDropAppIcon, fromLink, GoogleImage, Fontscustom icons (IconSendMoney, IconQrScan, IconVirtualCard, IconShield, IconFastTransfer, IconCorridors)
• Current State:Data: FullyStatic implementedarrays features (3 items) and stats (3 items) defined inline
• Sections:
  1. Header with DropLogoFull + nav links (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

Dashboard/login Layout— Login

• Route: /(dashboard)/*
• File: app/(dashboard)/layout.login/page.tsx
• Purpose:Type: LayoutClient wrapper for all authenticated pagescomponent
• Key Components:Auth:
  • SidebarNone (desktopentry persistent, mobile overlay)point)
  • TopBarComponents used: Image, Link, Button, Mail/Lock/Eye/EyeOff/ArrowRight (headerlucide)
  • State: email, password, showPassword, error, loading
  • Data fetching: POST /api/auth/login with search,{ notifications,email, userpassword menu)}
  • 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] / demo1234

/register

State— Management: Local state for mobile sidebar toggle

Mobile Responsiveness: Responsive sidebar with overlay

Current State: Fully implemented

---

Pages

Dashboard (Home)Registration

• Route: /dashboard
• File: app/(dashboard)/dashboard/register/page.tsx
• Purpose:Type: FinancialClient overview and quick actionscomponent
• Key Components:Auth:
  • 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
  None
• DataComponents Requirementsused: ArrowLeft/ArrowRight/Check/Eye/EyeOff/Phone/Mail/User/Calendar/Lock (Futurelucide), API):
  • GET /api/metrics — cashBalance, revenueMTD, unpaidInvoices, expensesMTD, profitMTD, cashFlowChange
  • GET /api/pl/monthly — monthly P&L data (revenue, expenses, 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
  Button
• 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

Invoices List

• Route: /invoices
• File: app/(dashboard)/invoices/page.tsx
• Purpose: Invoice management with search, filter, sort
• Key Features:
  • Status filterstep (all/draft/sent/paid/overdue)
  1-4),
  • Searchform byfields, customerotp, namepin, 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 wizard to create and send invoiceserrors
• Steps:
  1. Customer SelectionInfo — SelectfirstName, existinglastName, customeremail, or add newphone (dialog)+47 prefix), dateOfBirth, password
  2. Invoice DetailsVerify — Invoice6-digit number,OTP issue/dueinput dates,(MVP: netany terms,6 currencydigits accepted)
  3. Line ItemsPIN — Add/remove4-digit itemsPIN (description,with qty,custom unitnumpad price, VAT rate), auto-calculate totalsUI
  4. CustomizationSuccess — OptionalWelcome notesmessage, andredirect paymentto terms/dashboard
• PreviewValidation:
  • Age >= 18 (calculated from dateOfBirth)
  • XSS protection: names reject < > " ' & ; ( ) { } [ ]
  • Password: min 8 chars, must contain letters AND numbers
  • Phone: must be 8 digits (Norwegian format)
• Data fetching: POST /api/auth/register

/dashboard — Main Dashboard

• File: app/dashboard/page.tsx
• Type: Client component
• Auth: Yes (useAuth() with redirect)
• Components used: DropLogo, BottomNav, ScrollArea, Bell/LogOut (lucide)
• State: transactions, loading
• Data fetching: GET /api/transactions?limit=10
• Interfaces: Transaction { id, type, status, amount, currency, recipientName, createdAt }
• Layout:
  1. Header: DropLogo + 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

/accounts — Bank Accounts

• File: app/accounts/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: BottomNav, Card, ArrowLeft/Landmark/Plus/ChevronRight (lucide)
• Data: Reads user.bankAccounts from auth hook (no separate fetch)
• Layout:
  1. PSD2/Open Banking info banner (blue)
  2. Account cards: bankName, masked accountNumber, balance, currency, isPrimary badge
  3. Total balance summary
  4. "Legg til bankkonto" button (BankID connection note)

/transactions — Transaction History

• File: app/transactions/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: BottomNav, Tabs/TabsList/TabsTrigger, ArrowLeft/Clock (lucide)
• State: transactions, filter, loading
• Data fetching: GET /api/transactions?type={filter}&limit=50
• Filters: Alle (all), Overforinger (remittance), QR-betalinger (qr_payment)
• Grouping: groupByDate() function groups into: I dag, I gar, Denne uken, Eldre
• Display: Amount with +/- prefix and color coding (green for received, red for sent)

/scan — QR Scanner

• File: app/scan/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: BottomNav, Button, ArrowLeft/Camera/Check/X/Store (lucide)
• State: scanState (scanning | payment | paying | success), scannedMerchant, amount, paymentResult
• Interfaces: ScannedMerchant { id, name, category }, PaymentResult { id, status, amount, fee, merchant }
• Flow:
  1. Scanning — VisualCamera previewviewfinder ofUI generatedwith invoicescan frame, "Simuler skanning" button (demo)
  2. SendPayment — EmailShows formmerchant (to,info, subject,amount message,input, copy1% tofee self)calculation
  +
  3. Paying save/download— optionsLoading spinner
  4. Success — Confirmation with transaction details
• Data Requirements (Future API):fetching:
  POST
  • GET /api/customerstransactions/qr-payment —with customer{ listmerchantId, foramount dropdown}
  • POSTDemo /api/customersmerchant: —"Ahmetov createKebab" new(id: customer"merchant_001", category: "Restaurant")

  POST /api/invoices — create invoice (draft)

• POST /api/invoices/:id/send — sendSend invoiceMoney via email
• GET /api/invoices/:id/pdf — download PDF

Form Validation:

• Step 1: Customer required
• Step 3: At least 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(Remittance)

• Route: /expenses
• File: app/(dashboard)/expenses/send/page.tsx
• Purpose:Type: ExpenseClient tracking with categorization and approval workflowcomponent
• Key Features:Auth:
  • Period filterYes (this 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 Requirements (Future API):
  • GET /api/expenses?period=X&category=Y&search=Z — filtered expense list
  • POST /api/expenses — 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

Purchases (Alias)

• Route: /purchases
• File: app/(dashboard)/purchases/page.tsx
• Purpose: Alias to expenses page
• Current State: Same component as /expenses

Banking

• Route: /banking
• File: app/(dashboard)/banking/page.tsx
• Purpose: Bank account management and reconciliation
• Key Features:
  • 3 tabs: Accounts, Reconcile, Transactions
  • Accounts Tab: List of bank accounts with balances (multiple currencies)
  • Reconcile Tab: Unreconciled transactions with match confidence, period selector
  • Transactions Tab: All bank transactions (chronological)
  • Import Transactions button (placeholder)
  • Match actions (approve, link, create new)
• Data Requirements (Future API):
  • GET /api/bank-accounts — list accounts
  • POST /api/bank-accounts — add account
  • GET /api/bank-accounts/:id/transactions?reconciled=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
• Match Confidence Logic: Visual indicators for 0%, <50%, 50-89%, 90%+
• Current State: Mock data, no reconciliation logic
• Mobile Responsive: Tabs stack, tables scroll

Reports Hub

• Route: /reports
• File: app/(dashboard)/reports/page.tsx
• Purpose: Financial report selection and P&L preview
• Report Cards:
  • Profit & Loss (implemented preview)
  • Balance Sheet (coming soon)
  • Cash Flow Statement (coming soon)
  • VAT/PDV Report (live at /reports/vatuseAuth())
  • TrialComponents Balanceused: Button, ArrowLeft/ArrowRight/Check/ChevronDown/Globe/User (coming soon)
  • General Ledger (coming soon)
  lucide)
• P&L Preview:
  • Expandable Revenue/Expenses sections
  • Current month detailed breakdown
  • Export buttons (PDF, Excel) — placeholders
• Data Requirements (Future API):
  • GET /api/reports/pl?month=YYYY-MM — P&L report data
  • GET /api/reports/balance-sheet?date=YYYY-MM-DD — balance sheet
  • GET /api/reports/cash-flow?period=X — cash flow statement
• Current State: Only P&L and VAT reports implemented, others show "Coming Soon" badge
• Mobile Responsive: Report cards grid adapts

VAT Report

• Route: /reports/vat
• File: app/(dashboard)/reports/vat/page.tsx
• Purpose: 3-step VAT(1-4), returnselectedRecipient, preparationamount, recipients, rates, sending, txResult
• Steps:
  1. ReconciliationSelect CheckRecipient — WarnsList iffrom unreconciledGET bank/api/recipients, transactionsshows existname + country flag
  2. VATEnter AuditAmount — TableNOK ofinput, allreal-time VAT transactions (invoices + expenses)conversion with net/VATexchange amountsrate, 0.5% fee display
  3. Return SummaryReview — VATSummary returnof boxesrecipient, (Boxamount, 1:rate, collected,fee, Boxtotal
  2:
  4. Success paid,— BoxConfirmation 3:with netreference due)number
• Data Requirements (Future API):fetching:
  • GET /api/bank-accounts/unreconciled-countrecipients —(on reconciliation statusmount)
  • GET /api/vat/transactions?period=YYYY-MMrates —(on all VAT transactionsmount)
  • POST GET /api/vat/return?period=YYYY-MMtransactions/remittance —with calculated{ VATrecipientId, returnamountNOK, data
  targetCurrency
  • POST /api/vat/submit} — e-filing (Phase 2)
  • GET /api/vat/export/pdf — PDF export
  • GET /api/vat/export/xml — XML for e-filing
• Calculations:Country flags: AssumesRS 20%(Serbia), standardBA VAT(Bosnia), rate,TR converts(Turkey), allPK currencies(Pakistan), toPL EUR equivalent(Poland)
• Current State:Interface: MockTxResult data,{ noid, submission,status, exportamount, placeholders
fee,
• Mobilerate, Responsive:recipientName, TabstargetAmount, adapt,targetCurrency tables scroll, boxes stack}

Settings/profile — User Profile

• Route: /settings
• File: app/(dashboard)/settings/profile/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: Multi-sectionFinansavtaleloven settings§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 policy page (Norwegian language)
• Sections:
  1. CompanyBehandlingsansvarlig: —ALAI CompanyHolding profileAS (name,as legaldata form, address, tax ID, currency, fiscal year)controller
  2. UsersHvilke opplysninger vi samler inn: — User management tableIdentification (name, email, role,phone, status)BankID), inviteFinancial buttondata (bank accounts via Open Banking, transaction history), Technical data (IP, device, app version)
  3. TaxFormaal &med Compliancebehandlingen: —Transaction Country,processing VAT(PSD2/PISP), registration,KYC/AML VATcompliance, number/rate,AML/terrorism complianceprevention, remindersservice improvement
  4. IntegrationsRettslig grunnlag: — Connected integrationsContract (IntesaGDPR Bank CSV, Email SMTP)6(1)(b)), availableLegal integrationsobligation (Stripe,6(1)(c)) Fiken,for GoogleAML/KYC, Sheets,Legitimate Slack,interest DocuSeal)(6(1)(f)) for service improvement
  5. NotificationsDine rettigheter: —Innsyn Email(access), andRetting in-app(rectification), notificationSletting preferences(erasure with 5-year AML retention), Dataportabilitet (portability)
  6. SecurityOppbevaring: Minimum 5 years per hvitvaskingsloven, anonymization on account deletion but AML data retained
  7. Kontakt: [email protected], complaint to Datatilsynet

---

/terms — 2FA,Terms sessionof timeout,Service

password

policy,
• File: auditapp/terms/page.tsx
log,
• Type: dataClient export,component
delete
• Auth: companyNone
• 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 full list
  5. Ansvar: 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

---

/fees — Fee Overview

• File: app/fees/page.tsx
• Type: Client component
• Auth: None
• Components used: ChevronLeft, Receipt (lucide)
• Purpose: Transparent fee disclosure page (Norwegian language)
• Sections:
  1. Overføring til utlandet:
     • Transaction fee: 1.5% per transfer
     • Currency markup: 0.5% on mid-market rate
     • Typical total: ~2% (compare with banks at 3-7%)
  2. QR-betaling i butikk:
     • For customer: Free (no charge to payer)
     • For merchant: 0.5% (lower than card terminals)
  3. Kontotjenester:
     • Account creation: Free
     • 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

---

/profile/personal — Personal Information

• File: app/profile/personal/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: ChevronLeft, ShieldCheck (lucide), BottomNav
• State: Reads user from auth hook
• Layout:
  1. User avatar with initials (green gradient)
  2. Full name and email display
  3. Read-only form fields: firstName, lastName, email, phone (+47 987 65 432), dateOfBirth (15. mars 1995)
  4. BankID verification badge (green banner with ShieldCheck icon)
• DataNote: RequirementsAll fields are disabled (Futurecannot API):edit) — verified via BankID

---

/profile/security — Security Settings

• File: app/profile/security/page.tsx
• Type: Client component
• Auth: Yes (useAuth())
• Components used: ChevronLeft, ChevronRight, Lock, Smartphone, Laptop (lucide), BottomNav
• Sections:
  1. Passord: Change password button (shows "Sist endret: Aldri")
  2. To-faktor autentisering:
     • GETBankID /api/settings/companyverification: —Active company(green databadge)
     • PATCHVipps /api/settings/companyverification: —Not updateactivated company
     (gray
     • GET /api/users — user list
     • POST /api/users/invite — invite user
     • GET /api/settings/tax — tax settings
     • PATCH /api/settings/tax — update tax settings
     • GET /api/integrations — integration list
     • POST /api/integrations/:id/connect — connect integration
     • GET /api/settings/notifications — notification preferences
     • PATCH /api/settings/notifications — update preferences
     • GET /api/security/audit-log — audit log
     • POST /api/security/data-export — request data export
     • DELETE /api/company — delete companybadge)
  3. CurrentAktive State:enheter: Mock
     data,
     • iPhone form15 submitsPro: toOslo, consoleNorge — Aktiv nå (green dot indicator)
     • MacBook Pro: Oslo, Norge — I går kl. 18:45
  4. Footer: Support contact ([email protected])
• Mobile Responsive:Note: SidebarUI navonly, stacks,no formsactual adaptfunctionality connected

---

Screenshot

/profile/notifications Descriptions

—

DashboardNotification Settings

User sees:

• 3File: metricapp/profile/notifications/page.tsx
cards
• Type: atClient topcomponent
• Auth: Yes (cashuseAuth())
balance
• Components used: ChevronLeft, Bell, Mail (lucide), BottomNav
• State: pushEnabled, emailEnabled, settingsLoaded
• Data fetching:
  • GET /api/settings (on mount)
  • PATCH /api/settings with green{ arrow,pushEnabled: revenueboolean MTD,} unpaidor invoices{ withemailEnabled: warningboolean badge)
  • 3 charts in row below} (P&L bar chart, receivables aging stacked bar, expenses donut)
  • Bottom row: recent transactions table on left, quick action buttons on righttoggle)
• 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

---

Invoices/profile/language List— Language Settings

User

sees:
• 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 + "Invoices"Varsler" title and "New Invoice" button
  2. FilterEmpty rowstate: (statusBell dropdown,icon search+ input,"Ingen varsler enna" message
  3. Grouped notifications: I DAG / I GÅR / date range dropdown)groups
  4. TableNotification withcards: 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 invoicesunread (sortablenotifications columns,as statusread badges,on actionpage menu per row)load
• SummaryTime 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 withformatting: "AddI Expense"dag button
kl.
• Filters (period, category, search)
• Table with date, description, category, amount, vendor, status badge, receipt icon
• Summary bar with totals (total €HH:MM", pending"I count,går approvedkl. count,HH:MM", 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,or "ReconcileDD.MM.YYYY Now"kl. 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:

• Sidebar nav on left (6 sections)
• Content area on right showing active section
• Company section: form fields for company data
• Users section: table with invite button
• Integrations section: connected integrations cards, available integrations grid
• Security section: danger zone at bottom (delete company, red border)HH:MM"

---

Notes

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

• All pages use mock dataFile: from lib/mock-data.tsapp/cards/page.tsx
• No authenticationType: implementedClient (Phase 2)component
• No persistenceAuth: —Yes refreshing page loses all changes(useAuth())
• Mobile-firstFeature designflags: virtualCards (gate), physicalCards, cardPin, spendingLimits — all pagesdefault testedto at mobile/tablet/desktop breakpointsfalse
• DarkComponents sidebarused: 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" + lightaddress content(order areaphysical)
  —
  • PATCH consistent/api/cards/{id} layoutwith across{status: all"frozen" pages| "active"}
  • DELETE /api/cards/{id}
• Card visual: Green gradient background, masked card number (•••• •••• •••• 4242), expiry, cardholder name