Component Inventory

BilkoDrop Frontend — Component Inventory

LastAuto-generated Updated:from 2026-02-20source Sourcecode ofanalysis. Truth:All Filesystemfile scanpaths ofrelative to apps/web/components/src/drop-app/src/.

---

LayoutCustom Components

SidebarBottomNav

• File: components/sidebar.bottom-nav.tsx
• Purpose: Dark left navigation sidebar with hierarchical menu
• Props: None (uses pathname from Next.js navigation)
• Features:Description:
  Fixed
  • Expandablebottom sectionsnavigation (Sales, Purchases, Reports)
  • Active link highlighting (primary green border + background)
  • Dark theme (#111113 background)
  • Logo at top ("BILKO" in primary color)
  • Collapsible sub-navigationbar with chevron5 icons
  tabs.
  Uses usePathname() for active state detection. Active tab: text-[#0B6E35], inactive: text-[#9CA3AF].
• Navigation Items:
  • Dashboard
  link)
  • Sales
  →Invoices
  • Purchases → Expenses
  • Banking
  link)
  • Reports
  →VATReport
  • Settings
  link)

  Label	Route	Icon
  Hjem	/dashboard	Home (directlucide)
  Aktivitet	/history	Clock (directlucide)
  Skann	/scan	IconQrScan (directcustom)
  Kontoer	/accounts	Landmark (lucide)
  Profil	/profile	User (lucide)

  • State:Used in: Localdashboard, stateaccounts, forhistory, expandedprofile, sections
  scan
  • Dependencies: Lucide icons (ChevronDown, ChevronRight, LayoutDashboard, Receipt, ShoppingCart, Landmark, BarChart3, Settings)pages

  TopBarDropLogo

  • File: components/top-bar.tsxdrop-logo.tsx:5
  • Purpose: Header bar with search, notifications, user menu
  • Props:
    { size?: number; className?: string } (LogoProps)
    • onMenuClick?:Description: ()Forward =>D voidSVG mark — callbackletter for"d" mobilewith menustem togglesweeping into gold arrow. Default size 40. Colors: #0B6E35 (green body), #D4A017 (gold arrow).
  • Features:
    • Mobile menu button (hidden on desktop)
    • Mobile logo (hidden on desktop)
    • Search input (placeholder: "Search... (Cmd+K)")
    • Notification bell icon (no badge count yet)
    • User dropdown menu (Profile, Settings, Logout)
  • Dependencies: Lucide icons (Search, Bell, Menu, User), shadcn/ui dropdown-menu
  • Mobile Responsive: Shows menu button + logo on mobile, hides on desktop

  ---

  UI Components (shadcn/ui)

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

  AvatarDropWordmark

  • File: components/ui/avatar.tsxdrop-logo.tsx:30
  • Purpose:Props: User{ avatarsize?: withnumber; fallbackclassName?: string } (LogoProps)
  • Radix Primitive:Description: @radix-ui/react-avatar
  Text
  • Usage:"drop" Not yet usedrendered in currentFraunces pagesfont, bold, color #1A1A1A. Default size 24 (ready for user profile)font-size).

  BadgeDropLogoFull

  • File: components/ui/badge.tsxdrop-logo.tsx:44
  • Purpose: Status 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: variant?{ size?: "default"number; |className?: "secondary"string |} "destructive"(LogoProps)
  |
  • Description: "outline"Combines |DropLogo "success"mark |+ "warning"DropWordmark side by side. Default size 40. Used on marketing/landing pages.

  ButtonDropAppIcon

  • File: components/ui/button.tsxdrop-logo.tsx:57
  • Purpose:Props: Primary{ UIsize?: buttonnumber; className?: string } (LogoProps)
  • Variants:Description: default, destructive, outline, secondary, ghost, link
  • Sizes: default, sm, lg,App icon
  • Usage:— Allrounded actiongreen buttonssquare throughoutwith thedollar sign and circular arrows. Default size 64. Used as favicon/app
  • Radixlauncher Primitive: @radix-ui/react-slot (asChild support)icon.

  CardCookieConsent

  • File: components/ui/card.cookie-consent.tsx
  • Purpose:Props: Content container with header/content sectionsNone
  • Sub-components:Description:
    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 Card/api/consents — outer wrapper
    • CardHeader — header section
    • CardTitle — title text
    • CardDescription — subtitle/description text
    • CardContent — body content
    • CardFooter — footer section (not used yet)
    endpoint.
  • Usage:State:
    visible,
    • DashboardshowModal, metricpreferences cards
    • Report cards
    • Settings content wrapper
    • Banking account/transaction tables
    (CookiePreferences)
  • Shadow:Components used: shadow-cardX (0lucide), 2pxDialog 8pxcomponents
  rgba(0,
  • Used 0,in: 0,Root 0.08))layout

  DialogPrePaymentDisclosure

  • File: components/ui/dialog.pre-payment-disclosure.tsx
  • Purpose: Modal dialogs
  • Radix Primitive:Props: @radix-ui/react-dialog{ amount, fee, exchangeRate, receiveAmount, receiveCurrency, estimatedDelivery, onConfirm, onCancel }
  • Sub-components:Description:
    PSD2-compliant
    • Dialogpre-payment — wrapper
    • DialogTrigger — trigger button
    • DialogContent —disclosure modal content
    for
    • DialogHeaderremittance. —Shows headerfull section
    breakdown:
    • DialogTitleamount, —fee modal(with title
    %),
    • DialogDescriptionexchange —rate, modalrecipient description
    gets,
    • DialogFootertotal —cost, actionestimated buttons
    delivery.
    Explicit confirm/cancel buttons. Norwegian language.
  • Usage:Components used:
    • Add Customer dialogInfo (invoice wizard)
    • Add Expense dialog
    lucide)
  • Overlay:Used in: Black/send 50%page opacity,(remittance click-to-closeflow)

  Dropdown MenuPWARegister

  • File: components/ui/dropdown-menu.pwa-register.tsx
  • Purpose:Props: Context menus and dropdownsNone
  • Radix Primitive:Description: Service Worker registration component. Registers @radix-ui/react-dropdown-menu/sw.js on mount. Silent registration (console logs only). Returns null (no UI).
  • Sub-components:Used in:
    Root
    • 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: Not yet used (ready for loading states)
  • 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)layout

  ---

  ChartCustom ComponentsIcons (drop-icons.tsx)

  ChartsFile: arecomponents/drop-icons.tsx builtShared Props Interface: IconProps { size?: number; className?: string } Style: Outlined, 2px stroke, round linecap/linejoin, currentColor fill for theming.

  (notcustomcomponents).Keycharttypes
  BarChart
  —Wrapperfor 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)

  Export	Description	Default Size	Notes
  IconSendMoney	Arrow going up-right from horizontal line	24
  IconQrScan	QR code frame with Rechartsscan 2.15.0corners	24
  IconVirtualCard	Credit used: card outline	24
  IconShield	Shield with checkmark	24
  IconFastTransfer	Lightning bolt	24
  IconCorridors	Globe with meridians	24
  IconWallet	Wallet outline	24	Unused — P&Lno trend,wallet receivablesin agingpass-through PieChartmodel
  IconHistory	Clock with arrow	24
  IconTopUp	Plus inside circle	24	Unused — Expensesno bytop-up categoryin (donut)pass-through ResponsiveContainermodel

  ---

  Utility Components

  cn (lib/utils.ts)

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

  ---

  Page-Specificshadcn/ui Components

  None.Directory: components/ui/

  All components are reusablestandard shadcn/ui componentsprimitives built on Radix UI. Styled via Tailwind + layoutCSS components.variables Nodefined page-specificin components exist yet.globals.css.

  Potential future page-specific components:

  • InvoicePreview (extracted from wizard step 5)
  • MetricCard (extracted from dashboard)
  • TransactionRow (extracted from dashboard/banking)
  • ExpenseFormDialog (extracted from expenses page)

  ---

  Component Usage Map

  Component	Used InFile	CountRadix Primitive
  Alert	ui/alert.tsx	— (div-based)
  Avatar	ui/avatar.tsx	@radix-ui/react-avatar
  Badge	ui/badge.tsx	— (span-based, cva variants)
  Button	All pagesui/button.tsx	50+@radix-ui/react-slot
  Card	Dashboard, Reports, Banking, Settings, Expensesui/card.tsx	20+— (div-based)
  TableDialog	Invoices, Expenses, Banking, Reports, Dashboard, Settingsui/dialog.tsx	10+@radix-ui/react-dialog
  Input	Invoice wizard, Expenses, Settings, TopBarui/input.tsx	30+— (input element)
  ScrollArea	ui/scroll-area.tsx	@radix-ui/react-scroll-area
  Select	Invoices, Expenses, Banking, Settings, Invoice wizardui/select.tsx	20+@radix-ui/react-select
  BadgeSeparator	Invoices, Expenses, Banking, Reports, Settingsui/separator.tsx	15+@radix-ui/react-separator
  DialogSheet	Invoice wizard, Expensesui/sheet.tsx	2@radix-ui/react-dialog (side panel)
  Dropdown MenuSkeleton	Invoices, TopBarui/skeleton.tsx	2— (div with pulse animation)
  Sonner	ui/sonner.tsx	sonner (toast library)
  Tabs	Banking, VAT Reportui/tabs.tsx	2
  Textarea	Invoice wizard	3
  Sidebar	All pages	1
  TopBar	All pages	1
  Label	All forms	40+
  Separator	Minimal	1-2
  Avatar	None yet	0
  Sheet	None yet	0
  Skeleton	None yet	0@radix-ui/react-tabs

  ---

  NotesExternal Dependencies (UI-related)

  • All
  UIcomponentsarefromshadcn/ui tokensintailwind.config.ts)for

  Package	Usage
  lucide-react	Icon library (noMail, customLock, variantsEye, yet)EyeOff, NoArrowRight, phantomHome, componentsClock, —User, thisLandmark, listBell, isLogOut, exhaustiveChevronRight, basedShield, onSettings, filesystemHelpCircle, scan CreditCard, RadixPlus, UIX, primitivesCheck, provideArrowLeft, accessibilityChevronDown, outCopy, ofRefreshCw, theSmartphone, box Globe, TailwindZap, CSSStore, 4QrCode, forTrendingUp, stylingDollarSign, BarChart3, Download, Camera)
  next/image	Image optimization
  next/link	Client-side navigation
  next/navigation	useRouter, usePathname
  class-variance-authority	Component variant system (allcva)
  clsx Lucide+ Reacttailwind-merge	Class allname iconsmerging (consistentvia iconcn() library)utility