Skip to main content

Component Inventory

Bilko Component Inventory

Project:Last Drop — Fintech Payment App Version: 0.1.0 Date:Updated: 2026-02-2320 Author:Source of Truth: JohnFilesystem (AIscan Director, ALAI) Status: In Review Reviewers: Alem Bašić (CEO)

Document History

VersionDateAuthorChanges
0.12026-02-23JohnInitial draft from source code analysis (src/drop-app/src/)

Overview

All file paths are relative toof src/drop-app/src/apps/web/components/.

Total custom components: 13 (including sub-exports) shadcn/ui components: 14 Custom icons: 9

1.Component CustomHierarchy Overview

graph TD
    APP["app/layout.tsx\nRoot Layout"]

    APP --> LAND["Landing Page\napp/page.tsx"]
    APP --> AUTH_GRP["Auth Group\napp/(auth)"]
    APP --> DASH_GRP["Dashboard Group\napp/(dashboard)/layout.tsx"]

    LAND --> LN["Landing Components\ncomponents/landing/"]
    LN --> NAVBAR["Navbar"]
    LN --> HERO["Hero"]
    LN --> FEATURES["Features"]
    LN --> PRICING["Pricing"]
    LN --> TESTIMONIALS["Testimonials"]
    LN --> FOOTER["Footer"]

    AUTH_GRP --> LOGIN_PG["LoginPage\ncomponents/ui/input\ncomponents/ui/button"]
    AUTH_GRP --> REG_PG["RegisterPage\ncomponents/ui/input\ncomponents/ui/button"]

    DASH_GRP --> SIDEBAR["Sidebar\ncomponents/sidebar.tsx"]
    DASH_GRP --> TOPBAR["TopBar\ncomponents/top-bar.tsx"]
    DASH_GRP --> PAGES["Dashboard Pages"]

    PAGES --> DP["Dashboard\n/dashboard"]
    PAGES --> IP["Invoices\n/invoices"]
    PAGES --> IWP["Invoice Wizard\n/invoices/new"]
    PAGES --> EP["Expenses\n/expenses"]
    PAGES --> ENP["Add Expense\n/expenses/new"]
    PAGES --> BP["Banking\n/banking"]
    PAGES --> RP["Reports\n/reports"]
    PAGES --> PLP["Profit & Loss\n/reports/profit-loss"]
    PAGES --> VP["VAT Report\n/reports/vat"]
    PAGES --> SP["Settings\n/settings"]

    classDef layout fill:#1e2235,color:#89b4fa,stroke:#89b4fa
    classDef landing fill:#2a1e35,color:#cba6f7,stroke:#cba6f7
    classDef auth fill:#2a1e1e,color:#f38ba8,stroke:#f38ba8
    classDef page fill:#1e2e1e,color:#a6e3a1,stroke:#a6e3a1
    class APP,DASH_GRP layout
    class LAND,LN,NAVBAR,HERO,FEATURES,PRICING,TESTIMONIALS,FOOTER landing
    class AUTH_GRP,LOGIN_PG,REG_PG auth
    class SIDEBAR,TOPBAR,PAGES,DP,IP,IWP,EP,BP,RP,PLP,VP,SP page

Layout Components

BottomNavSidebar

  • File: components/bottom-nav.sidebar.tsx
  • Purpose: Dark left navigation sidebar with hierarchical menu
  • Props: None (uses pathname from Next.js navigation)
  • Description:Features: Fixed
      bottom
    • Active navigationlink barhighlighting (primary green border + background)
    • Dark theme (#111113 background)
    • Logo at top ("bilko" with 5SVG tabs.icon)
    • Arrow indicators on Sales and Purchases (hasSubmenu)
  • Navigation Items:
    • Dashboard (direct link, LayoutDashboard icon)
    • Sales → /invoices (DollarSign icon, hasSubmenu)
    • Purchases → /purchases (CreditCard icon, hasSubmenu)
    • Banking (Landmark icon)
    • Reports (BarChart3 icon)
    • Settings (bottom nav, Settings icon)
  • State: None — stateless component. Uses usePathname() for active state detection. ActiveNo tab:expandedSections text-[#0B6E35], inactive: text-[#9CA3AF]. Fixed to viewport bottom with h-16 border-t bg-white.state.
  • NavigationDependencies: Items:Lucide icons (LayoutDashboard, DollarSign, CreditCard, Landmark, BarChart3, Settings, ChevronRight)
LabelRouteIcon
Hjem/dashboardHome (lucide)
Aktivitet/historyClock (lucide)
Skann/scanIconQrScan (custom)
Kontoer/accountsLandmark (lucide)
Profil/profileUser (lucide)
  • Used in: dashboard, accounts, history, profile, scan, notifications pages
  • Requirements: Pages using BottomNav must add pb-24 to content container

DropLogoTopBar

  • File: components/drop-logo.top-bar.tsx (line 5)
  • Export:Purpose: DropLogoHeader bar with search, notifications, user menu
  • Props:
    • { size?onMenuClick?: number;() className?:=> string }void (LogoProps)— callback for mobile menu toggle
  • Description:Features: Forward-D
      SVG
    • Mobile markmenu —button letter(hidden on desktop)
    • Mobile logo (hidden on desktop)
    • Search input (placeholder: "d"Search... with(Cmd+K)")
      • stem
    • Notification sweepingbell intoicon gold(no arrow.badge Defaultcount sizeyet)
      • 40.
    • User dropdown menu (Profile, Settings, Logout)
  • Colors:Dependencies: #0B6E35Lucide icons (greenSearch, body)Bell, Menu, User), #D4A017shadcn/ui (gold arrow)dropdown-menu
  • UsedMobile in:Responsive: dashboardShows pagemenu headerbutton + logo on mobile, hides on desktop
graph LR
    SB["Sidebar\ncomponents/sidebar.tsx"]

    SB --> LOGO["Logo Section\nImage svg + 'bilko' text"]
    SB --> MAINNAV["Main Navigation\nnav > ul > li"]
    SB --> BOTTOMNAV["Bottom Navigation\n(Settings)"]

    MAINNAV --> DASH_LI["Dashboard\nLayoutDashboard icon"]
    MAINNAV --> SALES_LI["Sales (→ /invoices)\nDollarSign icon + ChevronRight"]
    MAINNAV --> PURCH_LI["Purchases (→ /purchases)\nCreditCard icon + ChevronRight"]
    MAINNAV --> BANK_LI["Banking\nLandmark icon"]
    MAINNAV --> REP_LI["Reports\nBarChart3 icon"]

    BOTTOMNAV --> SET_LI["Settings\nSettings icon"]

    SB -->|"isActive(href)"| ACTIVE["Active State\nbg-primary/10 + text-primary"]
    SB -->|"inactive"| INACTIVE["Hover State\nhover:bg-sidebar-hover"]

UI Components (shadcn/ui)

All components in components/ui/ are from shadcn/ui library (Radix UI primitives + Tailwind).

graph TD
    SHADCN["shadcn/ui Components\ncomponents/ui/"]

    SHADCN --> FORM_GRP["Form Components"]
    SHADCN --> DISPLAY_GRP["Display Components"]
    SHADCN --> OVERLAY_GRP["Overlay Components"]
    SHADCN --> FEEDBACK_GRP["Feedback Components"]

    FORM_GRP --> INPUT["Input\ntext, email, number, date, search"]
    FORM_GRP --> SELECT["Select\nRadix Select primitive\nSelectTrigger + SelectContent + SelectItem"]
    FORM_GRP --> TEXTAREA["Textarea\nmulti-line input, 3-6 rows"]
    FORM_GRP --> LABEL["Label\nRadix Label, accessible"]

    DISPLAY_GRP --> CARD["Card\nCard + CardHeader + CardTitle\n+ CardDescription + CardContent + CardFooter"]
    DISPLAY_GRP --> TABLE["Table\nTable + TableHeader + TableBody\n+ TableRow + TableHead + TableCell"]
    DISPLAY_GRP --> BADGE["Badge\ndefault / secondary / success\n/ warning / destructive"]
    DISPLAY_GRP --> AVATAR["Avatar\nRadix Avatar (not yet used)"]
    DISPLAY_GRP --> SEPARATOR["Separator\nhorizontal/vertical"]
    DISPLAY_GRP --> SKELETON["Skeleton\npulse animation (not yet used)"]

    OVERLAY_GRP --> DIALOG["Dialog\nRadix Dialog\nDialogContent + DialogHeader\n+ DialogFooter"]
    OVERLAY_GRP --> DROPDOWN["DropdownMenu\nRadix DropdownMenu\nTrigger + Content + Item"]
    OVERLAY_GRP --> TABS["Tabs\nRadix Tabs\nTabsList + TabsTrigger + TabsContent"]
    OVERLAY_GRP --> SHEET["Sheet\nRadix Dialog styled\n(not yet used)"]

    FEEDBACK_GRP --> BUTTON["Button\ndefault / destructive / outline\n/ secondary / ghost / link\nsm / default / lg / icon sizes"]

DropWordmarkAvatar

  • File: components/drop-logo.ui/avatar.tsx (line 30)
  • Export: DropWordmark
  • Props:Purpose: {User size?:avatar number;with className?: string } (LogoProps)fallback
  • Description:Radix Primitive: Text "drop" (always lowercase) rendered in Fraunces font, bold, color #1A1A1A@radix-ui/react-avatar. Default size 24 (font-size).
  • Logo rules:Usage: AlwaysNot lowercaseyet "drop" — never "Drop" or "DROP"used in logocurrent contextpages (ready for user profile)

DropLogoFullBadge

  • File: components/drop-logo.ui/badge.tsx (line 44)
  • Export:Purpose: DropLogoFullStatus indicators (draft, sent, paid, overdue, success, warning, etc.)
  • Variants: default, secondary, success, warning, destructive
  • Usage:
    • Invoice status badges
    • Expense status badges
    • "Coming Soon" tags on report cards
    • User status in settings
  • Props: { size?variant?: number;"default" className?:| string"secondary" }| "destructive" | "outline" | "success" | "warning" (LogoProps)
  • Description: Combines DropLogo mark + DropWordmark side by side. Default size 40.
  • Used in: / (marketing page) header

DropAppIconButton

  • File: components/drop-logo.ui/button.tsx (line 57)
  • Export: DropAppIcon
  • Props:Purpose: {Primary size?:UI number; className?: string } (LogoProps)button
  • Description:Variants: Appdefault, icondestructive, —outline, roundedsecondary, greenghost, square with dollar sign and circular arrows. Default size 64.link
  • UsedSizes: in:default, sm, lg, icon
  • Usage: All action buttons throughout the app
  • Radix Primitive: /@radix-ui/react-slot (marketingasChild page), favicon/app launchersupport)

CookieConsentCard

  • File: components/cookie-consent.ui/card.tsx
  • Props:Purpose: NoneContent (self-contained)container with header/content sections
  • Description:Sub-components: GDPR
      cookie consent banner and modal. Manages localStorage consent preferences:
    • necessary, analytics, marketing. Shows banner on first visit. "Tilpass" button opens modal for granular control. Saves consent to /api/consentsCard endpoint.— outer wrapper
    • CardHeader — header section
    • CardTitle — title text
    • CardDescription — subtitle/description text
    • CardContent — body content
    • CardFooter — footer section (not used yet)
  • State:Usage: visible,
      showModal,
    • Dashboard preferences:metric CookiePreferencescards
    • Report cards
    • Settings content wrapper
    • Banking account/transaction tables
  • Components used:Shadow: Xshadow-card (lucide),0 Dialog2px components
    • 8px
  • Storage:rgba(0, localStorage0, key0, for consent preferences
  • Used in: Root layout (app/layout.tsx0.08))
  • Compliance: GDPR — required for all EU users

PrePaymentDisclosureDialog

  • File: components/pre-payment-disclosure.ui/dialog.tsx
  • Props:Purpose: 
    Modal dialogs
  • Radix Primitive: {@radix-ui/react-dialog
    • amount:
  • Sub-components: number;
      fee:
    • Dialog number;— exchangeRate:wrapper
      • number;
    • DialogTrigger receiveAmount:— number;trigger receiveCurrency:button
      • string;
    • DialogContent estimatedDelivery:— string;modal onConfirm:content
      • ()
    • DialogHeader =>— void;header onCancel:section
      • ()
    • DialogTitle =>— void;modal }title
    • DialogDescription — modal description
    • DialogFooter — action buttons
  • Description:Usage: PSD2-compliant
      pre-payment
    • Add disclosureCustomer modal for remittance. Shows full breakdown: amount, feedialog (withinvoice %),wizard)
      • exchange
    • Add rate,Expense recipientdialog
      • receives,
    total cost, estimated delivery. Explicit confirm/cancel buttons. Norwegian language.
  • Components used:Overlay: InfoBlack (lucide)
    • 50%
  • Usedopacity, in: /send page (remittance flow, step before confirmation)
  • Compliance: PSD2 PISP — required before initiating paymentclick-to-close

Dropdown

PWARegisterMenu

  • File: components/pwa-register.ui/dropdown-menu.tsx
  • Props:Purpose: NoneContext menus and dropdowns
  • Description:Radix Primitive: Service@radix-ui/react-dropdown-menu
    • Worker
  • Sub-components: registration
      component.
    • DropdownMenu — wrapper
    • DropdownMenuTrigger — trigger button
    • DropdownMenuContent — menu content
    • DropdownMenuItem — menu item
    • DropdownMenuLabel — label text
    • DropdownMenuSeparator — divider
  • Usage:
    • Invoice row actions (view, edit, send, download, delete)
    • User menu in top bar
  • Shadow: shadow-dropdown (0 4px 16px rgba(0, 0, 0, 0.10))

Input

  • File: components/ui/input.tsx
  • Purpose: Text input field
  • Types Supported: text, email, number, date, search
  • Usage:
    • All form inputs (invoice wizard, expense form, settings)
    • Search inputs (invoice list, expense list)
    • Filter inputs
  • Styling: Border, padding, focus ring (primary color)

Label

  • File: components/ui/label.tsx
  • Purpose: Form field labels
  • Radix Primitive: @radix-ui/react-label
  • Usage: All form field labels
  • Accessibility: Proper label-input association

Select

  • File: components/ui/select.tsx
  • Purpose: Dropdown select input
  • Radix Primitive: @radix-ui/react-select
  • Sub-components:
    • Select — wrapper
    • SelectTrigger — trigger button
    • SelectValue — selected value display
    • SelectContent — dropdown content
    • SelectItem — option item
  • Usage:
    • Status filters (invoices, expenses)
    • Date range filters
    • Currency selectors
    • Category selectors
    • Settings dropdowns
  • Styling: Chevron icon, border, focus ring

Separator

  • File: components/ui/separator.tsx
  • Purpose: Visual divider line
  • Radix Primitive: @radix-ui/react-separator
  • Orientations: horizontal, vertical
  • Usage: Not heavily used yet (potential in settings/forms)

Sheet

  • File: components/ui/sheet.tsx
  • Purpose: Slide-out panel (mobile sidebar alternative)
  • Radix Primitive: @radix-ui/react-dialog (styled as sheet)
  • Usage: Not yet used (potential for mobile sidebar instead of overlay)
  • Direction: Can slide from left/right/top/bottom

Skeleton

  • File: components/ui/skeleton.tsx
  • Purpose: Loading placeholder
  • Usage: Used in AuthProvider loading state and reports/profit-loss page
  • Animation: Pulse animation
  • Future Use: Data fetching loading states

Table

  • File: components/ui/table.tsx
  • Purpose: Data table
  • Sub-components:
    • Table — wrapper
    • TableHeader — header section
    • TableBody — body section
    • TableRow — row
    • TableHead — header cell
    • TableCell — data cell
    • TableCaption — caption text (not used)
    • TableFooter — footer section (not used)
  • Usage:
    • Invoice list
    • Expense list
    • Bank transactions
    • VAT transactions
    • Recent transactions (dashboard)
    • Settings (users, integrations)
  • Styling: Border, alternating row hover

Tabs

  • File: components/ui/tabs.tsx
  • Purpose: Tab navigation
  • Radix Primitive: @radix-ui/react-tabs
  • Sub-components:
    • Tabs — wrapper
    • TabsList — tab button container
    • TabsTrigger — tab button
    • TabsContent — tab panel
  • Usage:
    • Banking page (Accounts, Reconcile, Transactions)
    • VAT Report (Reconciliation, Audit, Summary)
  • Styling: Primary underline for active tab

Textarea

  • File: components/ui/textarea.tsx
  • Purpose: Multi-line text input
  • Usage:
    • Invoice notes (customization step)
    • Invoice terms (customization step)
    • Email message (send step)
    • Expense description (optional)
  • Rows: Configurable (default: 3-6 rows)

Landing Components

graph TD
    LP["Landing Page\napp/page.tsx"]

    LP --> LNAV["Navbar\ncomponents/landing/navbar.tsx\nlogo + nav links + CTA button"]
    LP --> LHERO["Hero\ncomponents/landing/hero.tsx\nheadline + subtext + CTAs"]
    LP --> LFEAT["Features\ncomponents/landing/features.tsx\nfeature grid cards"]
    LP --> LPRICE["Pricing\ncomponents/landing/pricing.tsx\npricing tiers"]
    LP --> LTESTI["Testimonials\ncomponents/landing/testimonials.tsx\ncustomer quotes"]
    LP --> LFOOT["Footer\ncomponents/landing/footer.tsx\nlinks + copyright"]

Chatbot Components

graph TD
    CW["ChatWidget\ncomponents/chatbot/ChatWidget.tsx\nfloating chat button + panel"]

    CW --> CM["ChatMessage\ncomponents/chatbot/ChatMessage.tsx\nindividual message bubble"]
    CW --> CI["ChatInput\ncomponents/chatbot/ChatInput.tsx\ntext input + send button"]
    CW --> UCB["useChatbot (hook)\ncomponents/chatbot/useChatbot.ts\nstate + API calls + demo mode fallback"]

useChatbot hook:

  • Manages message history, loading state, error state
  • Sends messages to NEXT_PUBLIC_API_URL/api/v1/chat
  • Falls back to demo responses when API unavailable
  • Returns: messages, isLoading, sendMessage, clearMessages

Chart Components

Charts are built with Recharts 2.15.0 (not custom components). Key chart types used:

  • BarChart — P&L trend, receivables aging
  • PieChart — Expenses by category (donut)
  • ResponsiveContainer — Wrapper for all charts (100% width, fixed height)
  • XAxis, YAxis, CartesianGrid, Tooltip, Legend — Chart primitives

Chart Colors (from tailwind.config.ts):

  • Revenue: #22C55E (chart-revenue)
  • Expense: #EF4444 (chart-expense)
  • Profit: #3B82F6 (chart-profit)
  • Neutral: #6B7280 (chart-neutral)

Utility Components

cn (lib/utils.ts)

  • Purpose: Utility function for conditional class names
  • Usage: cn("base-class", condition && "conditional-class")
  • Dependencies: clsx + tailwind-merge

ServiceWorkerRegistrar (components/service-worker-registrar.tsx)

  • Purpose: Registers /sw.js service worker on mount.mount Silentfor registrationPWA offline support
  • Usage: Rendered in app/layout.tsx (consoleroot logslayout, only).every Returnspage)
  • Renders: null (no— UI).side-effect only component
  • UsedError in:Handling: RootSilent layoutfailure (non-critical)

AuthProvider (lib/auth-provider.tsx)

  • Purpose: Route guard — redirects unauthenticated users to app/layout.tsx/login)
  • Demo Mode: Activates automatically when NEXT_PUBLIC_API_URL is not set, bypassing auth check
  • Public Paths: /login, /register, /forgot-password, /
  • Loading State: Uses Skeleton component while checking auth

2. Custom Icons (drop-icons.tsx)

File: components/drop-icons.tsx

Shared Props Interface:

interface IconProps {
  size?: number;    // Default: 24
  className?: string;
}

Style: Outlined, 2px stroke, round linecap/linejoin, currentColor fill for theming.

ExportDescriptionDefault SizeStatus
IconSendMoneyArrow going up-right from horizontal line24Active
IconQrScanQR code frame with scan corners24Active
IconVirtualCardCredit card outline24Active
IconShieldShield with checkmark24Active
IconFastTransferLightning bolt24Active
IconCorridorsGlobe with meridians24Active
IconWalletWallet outline24Unused — no wallet in pass-through model
IconHistoryClock with arrow24Active
IconTopUpPlus inside circle24Unused — no top-up in pass-through model

3. shadcn/uiPage-Specific Components

Directory:Currently none standalone. components/ui/

All

Allcomponents are standardreusable shadcn/ui primitives built on Radix UI. Styled via Tailwindcomponents + CSSlayout variablescomponents. definedNo inpage-specific extracted components yet.

Potential future page-specific components:

  • globals.css. The --primary token is #0B6E35InvoicePreview (Dropextracted Forestfrom Green).

    wizard step5) extracteddashboard/banking) from
    ComponentFileRadix PrimitiveUsed In
    Alert
  • ui/alert.tsxMetricCard
    		• — (div-based) Accountsfrom pagedashboard)
  • TransactionRow (PSD2extracted infofrom banner)
    		•
    Avatar
  • ui/avatar.tsxExpenseFormDialog
    		• @radix-ui/react-avatarProfile pages
    Badgeui/badge.tsx— (cvaextracted variants) Accountsexpenses (isPrimary),page) Security (2FA status)
    Buttonui/button.tsx@radix-ui/react-slotAll pages
    Cardui/card.tsx— (div-based)Accounts page
    Dialogui/dialog.tsx@radix-ui/react-dialogCookieConsent, Cards (feature-flagged)
    Inputui/input.tsx— (input element)Forms
    ScrollAreaui/scroll-area.tsx@radix-ui/react-scroll-areaDashboard (transactions list)
    Selectui/select.tsx@radix-ui/react-selectComplaints, Language, Withdrawal
    Separatorui/separator.tsx@radix-ui/react-separatorDividers
    Sheetui/sheet.tsx@radix-ui/react-dialogSide panel (if used)
    Skeletonui/skeleton.tsx— (pulse animation)Loading states
    Sonnerui/sonner.tsxsonner toast libraryToast notifications
    Tabsui/tabs.tsx@radix-ui/react-tabsTransactions page (filters)

4. External Dependencies (UI-Related)

PackageVersionUsage
lucide-reactLatestIcon library — Mail, Lock, Eye, EyeOff, ArrowRight, Home, Clock, User, Landmark, Bell, LogOut, ChevronRight, Shield, Settings, HelpCircle, CreditCard, Plus, X, Check, ArrowLeft, ChevronDown, Copy, RefreshCw, Smartphone, Globe, Zap, Store, QrCode, TrendingUp, DollarSign, BarChart3, Download, Camera
next/imageNext.js 15Image optimization
next/linkNext.js 15Client-side navigation
next/navigationNext.js 15useRouter, usePathname
class-variance-authorityLatestComponent variant system (cva)
clsxLatestClass name conditional merging
tailwind-mergeLatestTailwind class deduplication
@radix-ui/*LatestHeadless UI primitives (via shadcn)
sonnerLatestToast notification library

5. Page-Level Component Usage Map

UsedIconSendMoney, IconQrScan, IconVirtualCard, IconShield, IconFastTransfer, IconCorridorsEyeOff, ArrowRight lucide icons)EyeOff, Phone, Mail, User, Calendar, Lock lucide)(lucide)(lucide), AlertClock (lucide)Camera, Check, X, Store (lucide)ArrowLeft, ArrowRight, Check, ChevronDown, Globe, User (lucide)LogOut, Settings, Shield, HelpCircle, Bell, CreditCard, Landmark (lucide)ShieldCheck (lucide)ChevronRight, Lock, Smartphone, Laptop (lucide)Bell, Mail (lucide)Check (lucide)ArrowUpRight, ScanLine, Smartphone, TrendingUp (lucide)Dialog (feature-flagged — all flags false by default)ChevronLeft, ExternalLink (lucide)
PageComponent KeyUsed ComponentsIn Count
/ (marketing)Button DropLogoFull,All DropAppIcon,pages 50+
/loginCard Button,Dashboard, InputReports, (Mail,Banking, Lock,Settings, Eye,Expenses 20+
/registerTable Button,Invoices, InputExpenses, (ArrowLeft,Banking, ArrowRight,Reports, Check,Dashboard, Eye,Settings 10+
/dashboardInput DropLogo,Invoice BottomNav,wizard, ScrollArea,Expenses, Bell,Settings, LogOutTopBar 30+
/accountsSelect BottomNav,Invoices, Card,Expenses, ArrowLeft,Banking, Landmark,Settings, Plus,Invoice ChevronRightwizard 20+
/transactionsBadge BottomNav,Invoices, Tabs,Expenses, TabsList,Banking, TabsTrigger,Reports, ArrowLeft,Settings 15+
/scanDialog BottomNav,Invoice Button,wizard, ArrowLeft,Expenses 2
/sendDropdown Menu Button,Invoices, PrePaymentDisclosure,TopBar 2
/profileTabs BottomNav,Banking, ArrowLeft,VAT ChevronRight,Report 2
/profile/personalTextarea BottomNav,Invoice ChevronLeft,wizard 3
/profile/securitySidebar BottomNav,All ChevronLeft,pages 1
/profile/notificationsTopBar BottomNav,All ChevronLeft,pages 1
/profile/languageLabel BottomNav,All ChevronLeft,forms 40+
/notificationsSkeleton BottomNav,AuthProvider, ArrowLeft,P&L Bell,Report 2+
/cardsSeparator Button,Minimal 1-2
/complaintsAvatar MessageSquare,None CheckCircle,yet 0
/withdrawalSheet ChevronLeft,None RotateCcw, CheckCircle (lucide)
/feesyet ChevronLeft, Receipt (lucide)
/privacyChevronLeft, Shield (lucide)
/termsChevronLeft, FileText (lucide)0

6. Component StandardsRelationships by Page

Naming
graph Conventions

LR subgraph INVOICE_LIST["Invoice List /invoices"] IL_CARD["Card\n(filter container)"] IL_SEL["Select\n(status filter)"] IL_INP["Input\n(search)"] IL_TBL["Table\n(invoice rows)"] IL_BADGE["Badge\n(status)"] IL_DD["DropdownMenu\n(row actions)"] IL_BTN["Button\n(New Invoice)"] end subgraph INVOICE_WIZ["Invoice Wizard /invoices/new"] IW_DLG["Dialog\n(Add Customer)"] IW_SEL["Select\n(customer, currency, VAT)"] IW_INP["Input\n(fields per step)"] IW_TA["Textarea\n(notes, terms, email)"] IW_BTN["Button\n(Back, Next, Send)"] end subgraph BANKING["Banking /banking"] BK_TABS["Tabs\n(Accounts, Reconcile, Txs)"] BK_TBL["Table\n(transactions)"] BK_BADGE["Badge\n(match confidence)"] BK_BTN["Button\n(approve, link, create)"] end subgraph REPORTS["Reports /reports/vat"] R_TABS["Tabs\n(3-step VAT wizard)"] R_TBL["Table\n(VAT transactions)"] R_CARD["Card\n(return boxes)"] R_BADGE["Badge\n(invoice/expense type)"] end

Notes

  • CustomAll DropUI components:components PascalCase,are descriptivefrom shadcn/ui (DropLogoFull,no BottomNav,custom PrePaymentDisclosure)variants yet)
  • CustomNo icons:phantom Iconcomponents prefix— +this domainlist nameis (IconSendMoney,exhaustive IconQrScan)based on filesystem scan
  • shadcn/uiRadix components:UI PascalCaseprimitives matchingprovide shadcnaccessibility conventionout (Button,of Dialog,the Tabs)

File Organization

  • One component per file (except drop-logo.tsx which exports 4 related logo variants)box
  • CustomTailwind CSS 4 for styling (all tokens in tailwind.config.ts)
  • Lucide React for all icons grouped(consistent inicon single file drop-icons.tsxlibrary)
  • shadcn/uiLanding components exist in components/ui/landing/ directory— not covered in original docs
  • Chatbot components exist in components/chatbot/ — ChatWidget, ChatMessage, ChatInput

Accessibility Baseline

  • All interactive elements: keyboard accessible, visible focus ring (focus:ring-[#0B6E35])
  • Touch targets: minimum 44×44px (buttons h-12 = 48px, inputs h-11 = 44px)
  • Icons: aria-hidden="true" when decorative, aria-label when meaningful
  • Form inputs: always associated <label> elements

Approval

RoleNameDateSignature
AuthorJohn (AI Director)2026-02-23
Frontend Lead
Tech Lead
Back to top