Skip to main content

Component Inventory

Bilko Component Inventory

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

Layout Components

Sidebar

  • File: components/sidebar.tsx
  • Purpose: Dark left navigation sidebar with hierarchical menu
  • Props: None (uses pathname from Next.js navigation)
  • Features:
    • Expandable sections (Sales, Purchases, Reports)
    • Active link highlighting (primary green border + background)
    • Dark theme (#111113 background)
    • Logo at top ("BILKO" in primary color)
    • Collapsible sub-navigation with chevron icons
  • Navigation Items:
    • Dashboard (direct link)
    • Sales → Invoices
    • Purchases → Expenses
    • Banking (direct link)
    • Reports → VAT Report
    • Settings (direct link)
  • State: Local state for expanded sections
  • Dependencies: Lucide icons (ChevronDown, ChevronRight, LayoutDashboard, Receipt, ShoppingCart, Landmark, BarChart3, Settings)

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

UI Components (shadcn/ui)

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

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: 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)

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

Project: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: {{PROJECT_NAME}}Utility function for conditional class names
  • Version:Usage: {{VERSION}}cn("base-class", condition && "conditional-class")
  • Date:Dependencies: {{DATE}}clsx + tailwind-merge

Page-Specific Components

Author:None. {{AUTHOR}}All Status:components Draftare |reusable Inshadcn/ui Reviewcomponents |+ Approvedlayout Reviewers:components. {{REVIEWERS}}No page-specific components exist 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)

DocumentComponent HistoryUsage Map

draft
VersionComponent DateUsed In AuthorChangesCount
0.ButtonAll pages50+
CardDashboard, Reports, Banking, Settings, Expenses20+
TableInvoices, Expenses, Banking, Reports, Dashboard, Settings10+
InputInvoice wizard, Expenses, Settings, TopBar30+
SelectInvoices, Expenses, Banking, Settings, Invoice wizard20+
BadgeInvoices, Expenses, Banking, Reports, Settings15+
DialogInvoice wizard, Expenses2
Dropdown MenuInvoices, TopBar2
TabsBanking, VAT Report2
TextareaInvoice wizard3
SidebarAll pages1
{{DATE}}TopBar {{AUTHOR}}All pages Initial1
LabelAll forms40+
SeparatorMinimal1-2
AvatarNone yet0
SheetNone yet0
SkeletonNone yet0

1. OverviewNotes

Total components: {{N}} Library location: src/components/ Storybook: {{https://storybook.PROJECT_NAME.example.com}} Design source: {{Figma file URL}} Owner team: {{TEAM_NAME}}

This inventory tracks every reusable component in {{PROJECT_NAME}}. It follows Atomic Design categorization: atoms → molecules → organisms → templates → pages.

2. Component Hierarchy Diagram

graph TB
    subgraph Pages
        PageLogin["LoginPage"]
        PageDashboard["DashboardPage"]
    end
    subgraph Templates
        TplAuth["AuthLayout"]
        TplApp["AppLayout"]
    end
    subgraph Organisms
        OrgNavbar["Navbar"]
        OrgSidebar["Sidebar"]
        OrgDataTable["DataTable"]
        OrgUserForm["UserForm"]
    end
    subgraph Molecules
        MolFormField["FormField"]
        MolCard["Card"]
        MolSearchBar["SearchBar"]
        MolDropdown["Dropdown"]
        MolPagination["Pagination"]
    end
    subgraph Atoms
        AtomButton["Button"]
        AtomInput["Input"]
        AtomBadge["Badge"]
        AtomSpinner["Spinner"]
        AtomAvatar["Avatar"]
        AtomIcon["Icon"]
    end

    Pages --> Templates
    Templates --> Organisms
    Organisms --> Molecules
    Molecules --> Atoms

TODO: Update diagram to reflect actual component tree.

3. Atoms (Primitive Components)

3.1 Button

PropertyValue
CategoryAtom
Status`{{Done
File pathsrc/components/ui/Button/Button.tsx
Storybook{{URL}}
Design ref{{Figma frame URL}}

Props API:

PropTypeDefaultRequiredDescription
variant'primary' | 'secondary' | 'ghost' | 'danger' | 'link''primary'NoVisual style variant
size'sm' | 'md' | 'lg''md'NoButton size
disabledbooleanfalseNoDisables interaction
loadingbooleanfalseNoShows spinner, disables click
leftIconReactNodeundefinedNoIcon before label
rightIconReactNodeundefinedNoIcon after label
onClick(e: MouseEvent) => voidundefinedNoClick handler
type'button' | 'submit' | 'reset''button'NoHTML button type
fullWidthbooleanfalseNo100% width

Variants & States: primary, secondary, ghost, danger, link × default, hover, focus, active, disabled, loading

Accessibility:

  • RendersAll asUI <button>components are from shadcn/ui (no custom variants yet)
  • No phantom components — neverthis <div>list oris <span>exhaustive based on filesystem scan
  • loadingRadix state:UI aria-busy="true",primitives spinnerprovide hasaccessibility aria-label="Loading"out of the box
  • disabled:Tailwind aria-disabled="true",CSS not4 removedfor fromstyling tab(all ordertokens in tailwind.config.ts)
  • FocusLucide ring:React 2pxfor offset,all brandicons color(consistent icon library)

Dependencies: Icon component, Spinner component

3.2 Input

PropertyValue
CategoryAtom
Status{{Status}}
File pathsrc/components/ui/Input/Input.tsx
Storybook{{URL}}

Props API:

PropTypeDefaultRequiredDescription
type'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url''text'NoInput type
valuestring—Yes (controlled)Input value
onChange(e: ChangeEvent) => void—YesChange handler
placeholderstring''NoPlaceholder text
disabledbooleanfalseNoDisabled state
errorbooleanfalseNoTriggers error visual state
errorMessagestringundefinedNoError text (also sets aria-describedby)
leftAdornmentReactNodeundefinedNoIcon or element left of input
rightAdornmentReactNodeundefinedNoIcon or element right of input
size'sm' | 'md' | 'lg''md'NoInput height/font size

Variants & States: default, focused, error, disabled, with-left-icon, with-right-icon

Accessibility:

  • Must always be paired with <label> (use FormField molecule)
  • Error: aria-invalid="true" + aria-describedby pointing to error message id
  • Password: toggle visibility button must have aria-label

3.3 Badge

PropertyValue
CategoryAtom
Status{{Status}}
File pathsrc/components/ui/Badge/Badge.tsx

Props API:

PropTypeDefaultRequiredDescription
variant'success' | 'warning' | 'error' | 'info' | 'neutral''neutral'NoSemantic color variant
size'sm' | 'md''md'NoBadge size
dotbooleanfalseNoShows colored dot instead of text
childrenReactNode—YesBadge content

TODO: Add remaining atom components following the same pattern (Select, Checkbox, Radio, Toggle, Textarea, Avatar, Tooltip, Spinner, Divider).

4. Molecules (Composite Components)

4.1 FormField

PropertyValue
CategoryMolecule
Status{{Status}}
File pathsrc/components/ui/FormField/FormField.tsx
ComposesInput, Label, ErrorMessage, HelpText

Props API:

PropTypeDefaultRequiredDescription
labelstring—YesVisible label text
htmlForstring—YesLinks label to input id
errorstringundefinedNoError message text
helpTextstringundefinedNoHelper text below input
requiredbooleanfalseNoShows required indicator
childrenReactNode—YesInput component

Accessibility: Label always associated with input via htmlFor/id pair.

4.2 Card

PropertyValue
CategoryMolecule
Status{{Status}}
File pathsrc/components/ui/Card/Card.tsx

Props API:

PropTypeDefaultRequiredDescription
variant'default' | 'bordered' | 'elevated''default'NoVisual style
padding'sm' | 'md' | 'lg' | 'none''md'NoInternal padding
asElementType'div'NoPolymorphic render element
childrenReactNode—YesCard content

Sub-components: Card.Header, Card.Body, Card.Footer

TODO: Add remaining molecule components: Modal, Dropdown, Table, Pagination, Toast, SearchBar, Breadcrumb, Tabs, Accordion, DatePicker.

5. Organisms (Complex Components)

5.1 DataTable

PropertyValue
CategoryOrganism
Status{{Status}}
File pathsrc/components/features/DataTable/DataTable.tsx
DependenciesTable (molecule), Pagination, SearchBar, Spinner, Badge

Features:

  • Sortable columns (client + server-side)
  • Pagination (configurable page sizes)
  • Row selection (single + multi)
  • Column visibility toggle
  • Export action slot
  • Loading skeleton state
  • Empty state slot
  • Row action slot (per-row dropdown)

TODO: Document full props API for DataTable.

5.2 Navigation / Sidebar

PropertyValue
CategoryOrganism
Status{{Status}}
File pathsrc/components/layouts/Sidebar/Sidebar.tsx

TODO: Add remaining organism components.

6. Shared Hooks / Composables Inventory

HookFilePurposeUsed By
useDebouncesrc/hooks/useDebounce.tsDebounce value changesSearchBar, Input
useLocalStoragesrc/hooks/useLocalStorage.tsPersistent local stateTheme, preferences
useMediaQuerysrc/hooks/useMediaQuery.tsResponsive breakpoint checksLayout components
useClickOutsidesrc/hooks/useClickOutside.tsClose on outside clickDropdown, Modal
useFocusTrapsrc/hooks/useFocusTrap.tsTrap focus inside elementModal, Drawer
useToastsrc/hooks/useToast.tsTrigger toast notificationsGlobal
usePermissionsrc/hooks/usePermission.tsCheck user permissionsAuth-gated components
{{HOOK_NAME}}{{PATH}}{{PURPOSE}}{{CONSUMERS}}

7. Third-Party Component Usage

PackageVersionComponents UsedWrapping Strategy
{{@radix-ui/react-dialog}}{{1.x}}Modal baseWrapped in src/components/ui/Modal — custom styling
{{@radix-ui/react-select}}{{2.x}}Select baseWrapped in src/components/ui/Select
{{react-hook-form}}{{7.x}}Form stateUsed directly + FormField wrapper
{{recharts}}{{2.x}}ChartsWrapped in src/components/charts/

Policy: Never use third-party components directly in feature code — always wrap in local component to control API surface and allow future swap.

8. Component Deprecation Process

Active → Deprecated (soft) → Deprecated (hard) → Removed
StageAction Required
Deprecated (soft)Add @deprecated JSDoc comment, console warning in dev, migration guide in Storybook
Deprecated (hard)TypeScript @deprecated annotation triggers IDE warning, added to removal milestone
RemovedDelete component, update CHANGELOG, run codemod if available

Deprecation notice minimum period: 2 sprint cycles before hard removal.

Approval

RoleNameDateSignature
Author
Frontend Lead
Design System Owner
Back to top