# Component Inventory

# Bilko Component Inventory

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

---

## Component Hierarchy Overview

```mermaid
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

```mermaid
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).

```mermaid
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

```mermaid
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

```mermaid
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

```mermaid
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