Component Inventory
Component Inventory
Project: Drop — Fintech Payment App Version: 0.1.0 Date: 2026-02-23 Author: John (AI Director, ALAI) Status: In Review Reviewers: Alem Bašić (CEO)
Document History
| Version | Date | Author | Changes |
|---|---|---|---|
| 0.1 | 2026-02-23 | John | Initial draft from source code analysis (src/drop-app/src/) |
Overview
All file paths are relative to src/drop-app/src/.
Total custom components: 13 (including sub-exports) shadcn/ui components: 14 Custom icons: 9
1. Custom Components
BottomNav
- File:
components/bottom-nav.tsx - Props: None
- Description: Fixed bottom navigation bar with 5 tabs. Uses
usePathname()for active state detection. Active tab:text-[#0B6E35], inactive:text-[#9CA3AF]. Fixed to viewport bottom withh-16 border-t bg-white. - Navigation Items:
| Label | Route | Icon |
|---|---|---|
| Hjem | /dashboard | Home (lucide) |
| Aktivitet | /history | Clock (lucide) |
| Skann | /scan | IconQrScan (custom) |
| Kontoer | /accounts | Landmark (lucide) |
| Profil | /profile | User (lucide) |
- Used in: dashboard, accounts, history, profile, scan, notifications pages
- Requirements: Pages using BottomNav must add
pb-24to content container
DropLogo
- File:
components/drop-logo.tsx(line 5) - Export:
DropLogo - Props:
{ size?: number; className?: string }(LogoProps) - Description: Forward-D SVG mark — letter "d" with stem sweeping into gold arrow. Default size 40.
- Colors:
#0B6E35(green body),#D4A017(gold arrow) - Used in: dashboard page header
DropWordmark
- File:
components/drop-logo.tsx(line 30) - Export:
DropWordmark - Props:
{ size?: number; className?: string }(LogoProps) - Description: Text "drop" (always lowercase) rendered in Fraunces font, bold, color
#1A1A1A. Default size 24 (font-size). - Logo rules: Always lowercase "drop" — never "Drop" or "DROP" in logo context
DropLogoFull
- File:
components/drop-logo.tsx(line 44) - Export:
DropLogoFull - Props:
{ size?: number; className?: string }(LogoProps) - Description: Combines DropLogo mark + DropWordmark side by side. Default size 40.
- Used in:
/(marketing page) header
DropAppIcon
- File:
components/drop-logo.tsx(line 57) - Export:
DropAppIcon - Props:
{ size?: number; className?: string }(LogoProps) - Description: App icon — rounded green square with dollar sign and circular arrows. Default size 64.
- Used in:
/(marketing page), favicon/app launcher
CookieConsent
- File:
components/cookie-consent.tsx - Props: None (self-contained)
- 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/api/consentsendpoint. - State:
visible,showModal,preferences: CookiePreferences - Components used:
X(lucide), Dialog components - Storage: localStorage key for consent preferences
- Used in: Root layout (
app/layout.tsx) - Compliance: GDPR — required for all EU users
PrePaymentDisclosure
- File:
components/pre-payment-disclosure.tsx - Props:
{ amount: number; fee: number; exchangeRate: number; receiveAmount: number; receiveCurrency: string; estimatedDelivery: string; onConfirm: () => void; onCancel: () => void; } - Description: PSD2-compliant pre-payment disclosure modal for remittance. Shows full breakdown: amount, fee (with %), exchange rate, recipient receives, total cost, estimated delivery. Explicit confirm/cancel buttons. Norwegian language.
- Components used:
Info(lucide) - Used in:
/sendpage (remittance flow, step before confirmation) - Compliance: PSD2 PISP — required before initiating payment
PWARegister
- File:
components/pwa-register.tsx - Props: None
- Description: Service Worker registration component. Registers
/sw.json mount. Silent registration (console logs only). Returnsnull(no UI). - Used in: Root layout (
app/layout.tsx)
2. Custom Icons (drop-icons.tsx)
File: components/drop-icons.tsx
interface IconProps {
size?: number; // Default: 24
className?: string;
}
Style: Outlined, 2px stroke, round linecap/linejoin, currentColor fill for theming.
| Export | Description | Default Size | Status |
|---|---|---|---|
IconSendMoney |
Arrow going up-right from horizontal line | 24 | Active |
IconQrScan |
QR code frame with scan corners | 24 | Active |
IconVirtualCard |
Credit card outline | 24 | Active |
IconShield |
Shield with checkmark | 24 | Active |
IconFastTransfer |
Lightning bolt | 24 | Active |
IconCorridors |
Globe with meridians | 24 | Active |
IconWallet |
Wallet outline | 24 | Unused — no wallet in pass-through model |
IconHistory |
Clock with arrow | 24 | Active |
IconTopUp |
Plus inside circle | 24 | Unused — no top-up in pass-through model |
3. shadcn/ui Components
Directory: components/ui/
All are standard shadcn/ui primitives built on Radix UI. Styled via Tailwind + CSS variables defined in globals.css. The --primary token is #0B6E35 (Drop Forest Green).
| Component | File | Radix Primitive | Used In |
|---|---|---|---|
| Alert | ui/alert.tsx |
— (div-based) | Accounts page (PSD2 info banner) |
| Avatar | ui/avatar.tsx |
@radix-ui/react-avatar | Profile pages |
| Badge | ui/badge.tsx |
— (cva variants) | Accounts (isPrimary), Security (2FA status) |
| Button | ui/button.tsx |
@radix-ui/react-slot | All pages |
| Card | ui/card.tsx |
— (div-based) | Accounts page |
| Dialog | ui/dialog.tsx |
@radix-ui/react-dialog | CookieConsent, Cards (feature-flagged) |
| Input | ui/input.tsx |
— (input element) | Forms |
| ScrollArea | ui/scroll-area.tsx |
@radix-ui/react-scroll-area | Dashboard (transactions list) |
| Select | ui/select.tsx |
@radix-ui/react-select | Complaints, Language, Withdrawal |
| Separator | ui/separator.tsx |
@radix-ui/react-separator | Dividers |
| Sheet | ui/sheet.tsx |
@radix-ui/react-dialog | Side panel (if used) |
| Skeleton | ui/skeleton.tsx |
— (pulse animation) | Loading states |
| Sonner | ui/sonner.tsx |
sonner toast library | Toast notifications |
| Tabs | ui/tabs.tsx |
@radix-ui/react-tabs | Transactions page (filters) |
4. External Dependencies (UI-Related)
| Package | Version | Usage |
|---|---|---|
lucide-react |
Latest | Icon 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/image |
Next.js 15 | Image optimization |
next/link |
Next.js 15 | Client-side navigation |
next/navigation |
Next.js 15 | useRouter, usePathname |
class-variance-authority |
Latest | Component variant system (cva) |
clsx |
Latest | Class name conditional merging |
tailwind-merge |
Latest | Tailwind class deduplication |
@radix-ui/* |
Latest | Headless UI primitives (via shadcn) |
sonner |
Latest | Toast notification library |
5. Page-Level Component Usage Map
| Page | Key Components Used |
|---|---|
/ (marketing) |
DropLogoFull, DropAppIcon, IconSendMoney, IconQrScan, IconVirtualCard, IconShield, IconFastTransfer, IconCorridors |
/login |
Button, Input (Mail, Lock, Eye, EyeOff, ArrowRight lucide icons) |
/register |
Button, Input (ArrowLeft, ArrowRight, Check, Eye, EyeOff, Phone, Mail, User, Calendar, Lock lucide) |
/dashboard |
DropLogo, BottomNav, ScrollArea, Bell, LogOut (lucide) |
/accounts |
BottomNav, Card, ArrowLeft, Landmark, Plus, ChevronRight (lucide), Alert |
/transactions |
BottomNav, Tabs, TabsList, TabsTrigger, ArrowLeft, Clock (lucide) |
/scan |
BottomNav, Button, ArrowLeft, Camera, Check, X, Store (lucide) |
/send |
Button, PrePaymentDisclosure, ArrowLeft, ArrowRight, Check, ChevronDown, Globe, User (lucide) |
/profile |
BottomNav, ArrowLeft, ChevronRight, LogOut, Settings, Shield, HelpCircle, Bell, CreditCard, Landmark (lucide) |
/profile/personal |
BottomNav, ChevronLeft, ShieldCheck (lucide) |
/profile/security |
BottomNav, ChevronLeft, ChevronRight, Lock, Smartphone, Laptop (lucide) |
/profile/notifications |
BottomNav, ChevronLeft, Bell, Mail (lucide) |
/profile/language |
BottomNav, ChevronLeft, Check (lucide) |
/notifications |
BottomNav, ArrowLeft, Bell, ArrowUpRight, ScanLine, Smartphone, TrendingUp (lucide) |
/cards |
Button, Dialog (feature-flagged — all flags false by default) |
/complaints |
MessageSquare, CheckCircle, ChevronLeft, ExternalLink (lucide) |
/withdrawal |
ChevronLeft, RotateCcw, CheckCircle (lucide) |
/fees |
ChevronLeft, Receipt (lucide) |
/privacy |
ChevronLeft, Shield (lucide) |
/terms |
ChevronLeft, FileText (lucide) |
6. Component Standards
Naming Conventions
- Custom Drop components: PascalCase, descriptive (
DropLogoFull,BottomNav,PrePaymentDisclosure) - Custom icons:
Iconprefix + domain name (IconSendMoney,IconQrScan) - shadcn/ui components: PascalCase matching shadcn convention (
Button,Dialog,Tabs)
File Organization
- One component per file (except
drop-logo.tsxwhich exports 4 related logo variants) - Custom icons grouped in single file
drop-icons.tsx - shadcn/ui components in
components/ui/directory
Accessibility Baseline
- All interactive elements: keyboard accessible, visible focus ring (
focus:ring-[#0B6E35]) - Touch targets: minimum 44×44px (buttons
h-12= 48px, inputsh-11= 44px) - Icons:
aria-hidden="true"when decorative,aria-labelwhen meaningful - Form inputs: always associated
<label>elements
Approval
| Role | Name | Date | Signature |
|---|---|---|---|
| Author | John (AI Director) | 2026-02-23 | |
| Frontend Lead | |||
| Tech Lead |