Component Map - ThriveSend B2B2G

Component Map - ThriveSend B2B2G

Version: 0.1.4 Last Updated: December 10, 2025 Status: Production Total Components: 96+ UI Library: Radix UI + shadcn/ui

---

Overview

ThriveSend B2B2G uses a component-based architecture with clear separation between base UI components, feature components, and page compositions. All components are built with TypeScript, Tailwind CSS, and follow the Enhanced Minimalist Design system.

---

Component Hierarchy

1. Component Layer Architecture

graph TB
    subgraph Pages["Pages Layer (14 pages)"]
        Dashboard[Dashboard Pages]
        Auth[Auth Pages]
        Onboard[Onboarding Pages]
    end

    subgraph Features["Feature Components Layer (29 components)"]
        DashComps[Dashboard Components]
        AnalyticsComps[Analytics Components]
        ContentComps[Content Components]
        ComplianceComps[Compliance Components]
    end

    subgraph Layout["Layout Layer (3 components)"]
        AppLayout[AppLayout]
        DashLayout[DashboardLayout]
        Sidebar[Sidebar]
    end

    subgraph Base["Base UI Layer (46 components)"]
        Radix[Radix UI Primitives]
        Shadcn[shadcn/ui Components]
        Custom[Custom Components]
    end

    subgraph Context["Context Layer"]
        SPContext[ServiceProviderContext]
        ThemeContext[Theme Context]
    end

    subgraph Services["Services Layer (25 services)"]
        API[API Services]
        Utils[Utility Services]
    end

    Pages --> Features
    Pages --> Layout

    Features --> Base
    Features --> Context
    Features --> Services

    Layout --> Base
    Layout --> Context

    Base --> Radix
    Base --> Shadcn
    Base --> Custom

    style Pages fill:#e3f2fd
    style Features fill:#f3e5f5
    style Layout fill:#e8f5e9
    style Base fill:#fff3e0

---

Base UI Components (46 Components)

2. Core UI Components

graph LR
    subgraph Form["Form Components (8)"]
        Button[Button]
        Input[Input]
        Textarea[Textarea]
        Select[Select]
        Checkbox[Checkbox]
        Radio[Radio Group]
        Switch[Switch]
        Label[Label]
    end

    subgraph Data["Data Display (10)"]
        Table[Table]
        Card[Card]
        Badge[Badge]
        Avatar[Avatar]
        Separator[Separator]
        Skeleton[Skeleton]
        Progress[Progress]
        Chart[Chart Recharts]
        DataTable[Data Table]
        Calendar[Calendar]
    end

    subgraph Feedback["Feedback (8)"]
        Alert[Alert]
        Toast[Toast/Sonner]
        Dialog[Dialog]
        AlertDialog[Alert Dialog]
        Tooltip[Tooltip]
        Popover[Popover]
        Sheet[Sheet]
        Drawer[Drawer]
    end

    subgraph Navigation["Navigation (6)"]
        Tabs[Tabs]
        Accordion[Accordion]
        Menu[Dropdown Menu]
        Command[Command]
        Breadcrumb[Breadcrumb]
        Pagination[Pagination]
    end

    subgraph Layout["Layout (6)"]
        Container[Container]
        Grid[Grid]
        Flex[Flex]
        AspectRatio[Aspect Ratio]
        Scroll[Scroll Area]
        Resizable[Resizable]
    end

    subgraph Utility["Utility (8)"]
        Context[Context Menu]
        Hover[Hover Card]
        Collapsible[Collapsible]
        Toggle[Toggle]
        ToggleGroup[Toggle Group]
        Slider[Slider]
        DatePicker[Date Picker]
        Form[Form react-hook-form]
    end

    style Form fill:#e3f2fd
    style Data fill:#f3e5f5
    style Feedback fill:#e8f5e9
    style Navigation fill:#fff3e0

Base Component Details:

Component	Source	Props	Usage
Button	shadcn/ui	variant, size, disabled	Primary actions, CTAs
Input	shadcn/ui	type, placeholder, value	Text input, forms
Select	shadcn/ui (Radix)	items, value, onChange	Dropdown selections
Dialog	shadcn/ui (Radix)	open, onOpenChange	Modals, confirmations
Table	shadcn/ui	columns, data	Data tables, listings
Card	shadcn/ui	-	Content containers
Toast	Sonner	title, description	Notifications
Tabs	shadcn/ui (Radix)	tabs, defaultValue	Tab navigation

---

Dashboard Components (29 Components)

3. Dashboard Component Structure

graph TB
    subgraph Analytics["Analytics Components (6)"]
        AnalyticsDash[AnalyticsDashboard]
        MetricsCard[MetricsCard]
        PerformanceChart[PerformanceChart]
        TrendIndicator[TrendIndicator]
        ComparisonView[ComparisonView]
        ExportButton[ExportButton]
    end

    subgraph Campaign["Campaign Components (7)"]
        CampaignList[CampaignList]
        CampaignCard[CampaignCard]
        CampaignForm[CampaignForm]
        CampaignStatus[CampaignStatus]
        CampaignMetrics[CampaignMetrics]
        TargetingBuilder[TargetingBuilder]
        SchedulePicker[SchedulePicker]
    end

    subgraph Client["Client Components (5)"]
        ClientList[ClientList]
        ClientCard[ClientCard]
        ClientForm[ClientForm]
        SecurityBadge[SecurityClearanceBadge]
        SectorBadge[SectorBadge]
    end

    subgraph Content["Content Components (6)"]
        ContentEditor[ContentEditor TipTap]
        ContentList[ContentList]
        ContentCard[ContentCard]
        ApprovalFlow[ApprovalFlowStatus]
        VersionHistory[VersionHistory]
        MediaUpload[MediaUploadDropzone]
    end

    subgraph Compliance["Compliance Components (3)"]
        ComplianceDash[ComplianceDashboard]
        AuditTable[AuditLogTable]
        ConsentManager[ConsentManager]
    end

    subgraph Team["Team Components (2)"]
        TeamList[TeamMemberList]
        InviteForm[InviteForm]
    end

    AnalyticsDash --> MetricsCard
    AnalyticsDash --> PerformanceChart
    PerformanceChart --> TrendIndicator

    CampaignList --> CampaignCard
    CampaignCard --> CampaignStatus
    CampaignCard --> CampaignMetrics
    CampaignForm --> TargetingBuilder
    CampaignForm --> SchedulePicker

    ClientList --> ClientCard
    ClientCard --> SecurityBadge
    ClientCard --> SectorBadge

    ContentEditor --> MediaUpload
    ContentList --> ContentCard
    ContentCard --> ApprovalFlow
    ContentCard --> VersionHistory

    ComplianceDash --> AuditTable
    ComplianceDash --> ConsentManager

    TeamList --> InviteForm

    style Analytics fill:#e1f5fe
    style Campaign fill:#f3e5f5
    style Client fill:#e8f5e9
    style Content fill:#fff3e0
    style Compliance fill:#ffebee

---

Layout Components (3 Components)

4. Layout Structure

graph TB
    AppLayout[AppLayout<br/>Root Layout]

    DashLayout[DashboardLayout<br/>Dashboard Shell]

    Sidebar[Sidebar<br/>Navigation Menu]

    Header[Header<br/>Top Navigation]

    Content[Content Area<br/>Page Content]

    Footer[Footer<br/>Optional]

    AppLayout --> DashLayout
    DashLayout --> Sidebar
    DashLayout --> Header
    DashLayout --> Content
    DashLayout --> Footer

    Sidebar -.Links.-> NavItems[Navigation Items<br/>- Dashboard<br/>- Clients<br/>- Campaigns<br/>- Content<br/>- Analytics<br/>- Team<br/>- Settings]

    Header -.Contains.-> HeaderItems[Header Items<br/>- Organization Switcher<br/>- User Menu<br/>- Notifications<br/>- Search]

    style AppLayout fill:#e3f2fd
    style DashLayout fill:#f3e5f5
    style Sidebar fill:#e8f5e9

Layout Component Details:

// AppLayout (app/layout.tsx)
interface AppLayoutProps {
  children: React.ReactNode
}
// Provides: Theme, Clerk, React Query, Toaster

// DashboardLayout (app/(dashboard)/layout.tsx)
interface DashboardLayoutProps {
  children: React.ReactNode
}
// Provides: Sidebar, Header, ServiceProviderContext

// Sidebar (components/layout/Sidebar.tsx)
interface SidebarProps {
  organizationName: string
  userRole: UserRole
  activeRoute: string
}
// Provides: Navigation menu with role-based items

---

Page-Component Relationships

5. Dashboard Page Components

graph TB
    subgraph DashPage["Dashboard Page"]
        DashRoute[/dashboard]
    end

    subgraph ClientsPage["Clients Page"]
        ClientsRoute[/dashboard/clients]
    end

    subgraph CampaignsPage["Campaigns Page"]
        CampaignsRoute[/dashboard/campaigns]
    end

    subgraph ContentPage["Content Page"]
        ContentRoute[/dashboard/content]
    end

    subgraph AnalyticsPage["Analytics Page"]
        AnalyticsRoute[/dashboard/analytics]
    end

    subgraph Components["Shared Components"]
        direction TB
        BaseUI[Base UI Components]
        DashComps[Dashboard Components]
        Services[API Services]
    end

    DashRoute -.Uses.-> AnalyticsDash
    DashRoute -.Uses.-> MetricsCard
    DashRoute -.Uses.-> RecentActivity

    ClientsRoute -.Uses.-> ClientList
    ClientsRoute -.Uses.-> ClientForm
    ClientsRoute -.Uses.-> ClientCard

    CampaignsRoute -.Uses.-> CampaignList
    CampaignsRoute -.Uses.-> CampaignForm
    CampaignsRoute -.Uses.-> CampaignCard

    ContentRoute -.Uses.-> ContentEditor
    ContentRoute -.Uses.-> ContentList
    ContentRoute -.Uses.-> MediaUpload

    AnalyticsRoute -.Uses.-> AnalyticsDash
    AnalyticsRoute -.Uses.-> PerformanceChart
    AnalyticsRoute -.Uses.-> ExportButton

    AnalyticsDash --> BaseUI
    ClientList --> BaseUI
    CampaignList --> BaseUI
    ContentEditor --> BaseUI

    AnalyticsDash --> Services
    ClientList --> Services
    CampaignList --> Services
    ContentEditor --> Services

    style DashRoute fill:#e3f2fd
    style ClientsRoute fill:#e8f5e9
    style CampaignsRoute fill:#f3e5f5
    style ContentRoute fill:#fff3e0
    style AnalyticsRoute fill:#e1f5fe

---

Component Dependencies

6. Component Dependency Graph

graph LR
    subgraph External["External Libraries"]
        React[React 18]
        NextJS[Next.js 15]
        Radix[Radix UI]
        TailwindCSS[Tailwind CSS 4]
        ReactQuery[React Query]
        Zod[Zod]
        ReactHookForm[React Hook Form]
        TipTap[TipTap]
        Recharts[Recharts]
    end

    subgraph Internal["Internal Dependencies"]
        Utils[lib/utils]
        Constants[lib/constants]
        Services[lib/services]
        Context[Context Providers]
    end

    subgraph Components["Component Layers"]
        Base[Base UI]
        Feature[Feature Components]
        Pages[Page Components]
    end

    React --> NextJS
    Radix --> Base
    TailwindCSS --> Base
    Zod --> Base
    ReactHookForm --> Base
    TipTap --> Feature
    Recharts --> Feature

    Utils --> Base
    Constants --> Base
    Services --> Feature
    Context --> Feature

    Base --> Feature
    Feature --> Pages
    ReactQuery --> Services

    style External fill:#e3f2fd
    style Internal fill:#f3e5f5
    style Components fill:#e8f5e9

---

Component Patterns

7. Common Component Patterns

Server Components (React Server Components)

// app/(dashboard)/clients/page.tsx
export default async function ClientsPage() {
  // Server-side data fetching
  const clients = await getClients()

  return <ClientList clients={clients} />
}

Client Components (Interactive)

components/dashboard/client-form.tsx

'use client'

export function ClientForm({ onSubmit }: ClientFormProps) {
  const form = useForm<ClientFormValues>({
    resolver: zodResolver(clientSchema),
  })

  return (
    <Form {...form}>
      {/* Form fields */}
    </Form>
  )
}

Compound Components

components/ui/card.tsx

export const Card = {
  Root: CardRoot,
  Header: CardHeader,
  Title: CardTitle,
  Description: CardDescription,
  Content: CardContent,
  Footer: CardFooter,
}

// Usage
<Card.Root>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Content>Content</Card.Content>
</Card.Root>

Context-Aware Components

components/dashboard/campaign-card.tsx

'use client'

export function CampaignCard({ campaign }: CampaignCardProps) {
  const { organization, user } = useServiceProvider()
  const canEdit = hasPermission(user, 'campaigns:write')

  return (
    <Card>
      {canEdit && <EditButton />}
    </Card>
  )
}

---

Component Communication

8. Data Flow Between Components

sequenceDiagram
    participant User
    participant Page as Page Component
    participant Feature as Feature Component
    participant Base as Base UI Component
    participant Context as Context Provider
    participant Service as API Service
    participant API as API Route

    User->>Page: Interact
    Page->>Feature: Pass Props
    Feature->>Context: Read Context
    Context-->>Feature: Context Data

    Feature->>Base: Render with Props
    Base-->>User: Display UI

    User->>Base: User Input
    Base->>Feature: Event Handler
    Feature->>Service: Call Service
    Service->>API: HTTP Request
    API-->>Service: Response
    Service-->>Feature: Update State
    Feature->>Context: Update Context (if needed)
    Feature->>Base: Re-render
    Base-->>User: Updated UI

    Note over User,API: Component<br/>Communication Flow

---

Component Testing Strategy

Test Coverage by Component Type

Component Type	Unit Tests	Integration Tests	E2E Tests
Base UI	✅ Yes	✅ Yes	-
Feature Components	✅ Yes	✅ Yes	✅ Yes
Layout Components	✅ Yes	✅ Yes	✅ Yes
Page Components	-	✅ Yes	✅ Yes

Testing Tools:

• Unit Tests: Jest + React Testing Library
• Integration Tests: Jest + MSW (Mock Service Worker)
• E2E Tests: Playwright

---

Component File Structure

src/
├── components/
│   ├── ui/                          # Base UI Components (46 files)
│   │   ├── button.tsx
│   │   ├── input.tsx
│   │   ├── select.tsx
│   │   ├── dialog.tsx
│   │   ├── table.tsx
│   │   ├── card.tsx
│   │   ├── badge.tsx
│   │   ├── form.tsx
│   │   └── ...
│   ├── dashboard/                   # Dashboard Components (29 files)
│   │   ├── analytics-dashboard.tsx
│   │   ├── campaign-list.tsx
│   │   ├── client-card.tsx
│   │   ├── content-editor.tsx
│   │   └── ...
│   ├── layout/                      # Layout Components (3 files)
│   │   ├── app-layout.tsx
│   │   ├── dashboard-layout.tsx
│   │   └── sidebar.tsx
│   ├── analytics/                   # Analytics Components (6 files)
│   │   ├── metrics-card.tsx
│   │   ├── performance-chart.tsx
│   │   └── ...
│   ├── auth/                        # Auth Components
│   │   ├── sign-in-form.tsx
│   │   └── sign-up-form.tsx
│   ├── compliance/                  # Compliance Components (3 files)
│   │   ├── audit-log-table.tsx
│   │   ├── consent-manager.tsx
│   │   └── compliance-dashboard.tsx
│   └── content/                     # Content Components
│       ├── content-editor.tsx
│       ├── media-upload.tsx
│       └── version-history.tsx

---

Component Styling

Enhanced Minimalist Design System

// Semantic color classes (CRITICAL: Use these, not raw Tailwind)
const semanticColors = {
  primary: 'bg-primary text-primary-foreground',
  secondary: 'bg-secondary text-secondary-foreground',
  success: 'bg-success text-success-foreground',
  warning: 'bg-warning text-warning-foreground',
  error: 'bg-error text-error-foreground',
  muted: 'bg-muted text-muted-foreground',
}

// Component size variants
const sizes = {
  sm: 'h-8 px-3 text-sm',
  md: 'h-10 px-4 text-base',
  lg: 'h-12 px-6 text-lg',
}

// Component variants
const variants = {
  default: semanticColors.primary,
  outline: 'border border-primary text-primary bg-transparent',
  ghost: 'text-primary hover:bg-primary/10',
  link: 'text-primary underline-offset-4 hover:underline',
}

---

Performance Optimization

Component Optimization Strategies

1. Code Splitting: Dynamic imports for large components

const ContentEditor = dynamic(() => import('./content-editor'), {
  ssr: false,
  loading: () => <Skeleton />,
})

2. Memoization: React.memo for expensive components

export const CampaignCard = React.memo(({ campaign }) => {
  // Component logic
})

3. Virtual Scrolling: For large lists

import { useVirtualizer } from '@tanstack/react-virtual'

4. Lazy Loading: Images and media

import Image from 'next/image'
// Automatic lazy loading with Next.js Image

---

Component Documentation

Each component should include:

1. TypeScript Interface: Props definition
2. JSDoc Comments: Component description
3. Usage Examples: Code examples
4. Accessibility: ARIA attributes, keyboard navigation
5. Testing: Test file alongside component

Example:

/**
 * ClientCard displays client information with sector badge and security clearance.
 *
 * @component
 * @example
 * ```tsx
 * <ClientCard
 *   client={client}
 *   onEdit={handleEdit}
 *   onDelete={handleDelete}
 * />
 * ```
 */
interface ClientCardProps {
  /** Client data object */
  client: Client
  /** Edit handler function */
  onEdit?: (client: Client) => void
  /** Delete handler function */
  onDelete?: (client: Client) => void
}

export function ClientCard({ client, onEdit, onDelete }: ClientCardProps) {
  // Component implementation
}

---

Related Documentation

• System Design

---

Last Updated: December 10, 2025 Verified: Production v0.1.4