Skip to main content

Component Inventory

Bilko Component Inventory

Last Updated: 2026-02-20 Source of Truth: Filesystem scan of apps/web/components/

Component Hierarchy 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 --> 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

Sidebar

  • File: components/sidebar.tsx
  • Purpose: Dark left navigation sidebar with hierarchical menu
  • Props: None (uses pathname from Next.js navigation)
  • Features:
    • Active link highlighting (primary green border + background)
    • Dark theme (#111113 background)
    • Logo at top ("bilko" with SVG 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 — uses usePathname() for active detection
  • Dependencies: Lucide icons (LayoutDashboard, DollarSign, CreditCard, Landmark, BarChart3, Settings, ChevronRight)

TopBar

  • File: components/top-bar.tsx
  • Purpose: Header bar with search, notifications, user menu
  • Props:
    • onMenuClick?: () => void — callback for mobile menu toggle
  • 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
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"]

Avatar

  • File: components/ui/avatar.tsx
  • Purpose: User avatar with fallback
  • Radix Primitive: @radix-ui/react-avatar
  • Usage: Not yet used in current pages (ready for user profile)

Badge

  • File: components/ui/badge.tsx
  • 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?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning"

Button

  • File: components/ui/button.tsx
  • Purpose: Primary UI button
  • Variants: default, destructive, outline, secondary, ghost, link
  • Sizes: default, sm, lg, icon
  • Usage: All action buttons throughout the app
  • Radix Primitive: @radix-ui/react-slot (asChild support)

Card

  • File: components/ui/card.tsx
  • Purpose: Content container with header/content sections
  • Sub-components:
    • Card — outer wrapper
    • CardHeader — header section
    • CardTitle — title text
    • CardDescription — subtitle/description text
    • CardContent — body content
    • CardFooter — footer section (not used yet)
  • Usage:
    • Dashboard metric cards
    • Report cards
    • Settings content wrapper
    • Banking account/transaction tables
  • Shadow: shadow-card (0 2px 8px rgba(0, 0, 0, 0.08))

Dialog

  • File: components/ui/dialog.tsx
  • Purpose: Modal dialogs
  • Radix Primitive: @radix-ui/react-dialog
  • Sub-components:
    • Dialog — wrapper
    • DialogTrigger — trigger button
    • DialogContent — modal content
    • DialogHeader — header section
    • DialogTitle — modal title
    • DialogDescription — modal description
    • DialogFooter — action buttons
  • Usage:
    • Add Customer dialog (invoice wizard)
    • Add Expense dialog
  • Overlay: Black 50% opacity, click-to-close

Dropdown Menu

  • File: components/ui/dropdown-menu.tsx
  • Purpose: Context menus and dropdowns
  • Radix Primitive: @radix-ui/react-dropdown-menu
  • Sub-components:
    • 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"]

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

AuthProvider (lib/auth-provider.tsx)

  • Purpose: Route guard — redirects unauthenticated users to /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

Page-Specific Components

Currently none standalone. All components are reusable shadcn/ui components + layout components. No page-specific extracted components yet.

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 In Count
Button All pages 50+
Card Dashboard, Reports, Banking, Settings, Expenses 20+
Table Invoices, Expenses, Banking, Reports, Dashboard, Settings 10+
Input Invoice wizard, Expenses, Settings, TopBar 30+
Select Invoices, Expenses, Banking, Settings, Invoice wizard 20+
Badge Invoices, Expenses, Banking, Reports, Settings 15+
Dialog Invoice wizard, Expenses 2
Dropdown Menu Invoices, TopBar 2
Tabs Banking, VAT Report 2
Textarea Invoice wizard 3
Sidebar All pages 1
TopBar All pages 1
Label All forms 40+
Skeleton AuthProvider, P&L Report 2+
Separator Minimal 1-2
Avatar None yet 0
Sheet None yet 0

Component Relationships by Page

graph 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

  • All UI components are from shadcn/ui (no custom variants yet)
  • No phantom components — this list is exhaustive based on filesystem scan
  • Radix UI primitives provide accessibility out of the box
  • Tailwind CSS 4 for styling (all tokens in tailwind.config.ts)
  • Lucide React for all icons (consistent icon library)
  • Landing components exist in components/landing/ — not covered in original docs
  • Chatbot components exist in components/chatbot/ — ChatWidget, ChatMessage, ChatInput

No comments to display

Back to top