Components Documentation

Overview

The components directory (src/components/) contains all React components organized by purpose and responsibility. This follows a feature-based organization pattern that scales with the application’s complexity.

Directory Structure


src/components/
├── feature/        # Feature-specific business logic components
├── icons/          # Custom SVG icon components
├── layouts/        # Page layout wrappers
├── providers/      # React context providers
└── ui/             # Reusable shadcn/ui base components

Feature Components (`components/feature/`)

Feature components contain business logic and are organized by domain functionality. These are the primary building blocks of the application’s UI.

Directory Organization

Directory	Purpose	File Count
`AuditLogs/`	Audit logging and tracking UI	5
`BeneficiaryEnrollment/`	Enrollment workflow components	6
`BeneficiaryInformation/`	Beneficiary data display	2
`BeneficiaryPortal/`	Portal-specific components	16
`ClientCompanyList/`	Company listing and management	5
`CompanyInformation/`	Company detail views	4
`Dialog/`	Modal dialogs and popups	118
`Editor/`	Rich text editor (BlockNote)	1
`Enrollment/`	Enrollment management	1
`Forms/`	Form components and handlers	17
`InsuranceCompanies/`	Provider-specific UI (653 items)	653
`IntellicareEnrollment/`	Intellicare-specific enrollment	1
`ManageInsurance/`	Insurance management	2
`NotFound/`	404/error pages	1
`PrincipalPortal/`	Principal portal components	1
`Tables/`	Data tables and grids	198
`Tabs/`	Tab navigation components	111
`Tooltip/`	Tooltip components	1
`RootInjector.tsx`	Global component injector	-

Key Feature Areas

1. InsuranceCompanies (`InsuranceCompanies/`)

The largest feature directory containing provider-specific implementations:


InsuranceCompanies/
├── CocolifeTabs/           # Cocolife provider tabs (76 items)
├── CompanyProviderPlan/    # Plan configurations (134 items)
├── EtiqaTabs/              # Etiqa provider tabs (79 items)
├── Generali/               # Generali provider UI (92 items)
├── Icare/                  # Icare provider UI (81 items)
├── IntellicareTabs/        # Intellicare tabs (102 items)
├── Maxicare/               # Maxicare provider UI (76 items)
├── helper/                 # Shared utilities
├── InsuranceCompanies.tsx  # Main container
├── StandardInsCompEmployee.tsx
├── StandardKpi.tsx
└── StandardValues.tsx

Usage Pattern:

Each provider has its own tab structure and data display components
Standard*.tsx files provide reusable layouts across providers
The CompanyProviderPlan/ directory handles plan-specific configurations

2. Dialogs (`Dialog/`)

Centralized modal/dialog components for user interactions:

Dialog Category	Purpose
`AcknowledgeDialog/`	Confirmation acknowledgments
`Add*Dialog/`	Entity creation dialogs (Employee, Company, Plan, etc.)
`DeleteDialog/`	Deletion confirmations
`EnrollmentDialog/`	Enrollment-specific modals
`GuidelineDialog/`	Policy/guideline displays
`MemberInformationButtonDialog/`	Member action buttons (40 variants)
`OpenEnrollment/`	Open enrollment period dialogs
`PlanLevelDialog/`	Plan configuration dialogs

Import Pattern:


import { AddEmployeeDialog } from '@/components/feature/Dialog/AddEmployeeDialog';
import { DeleteDialog } from '@/components/feature/Dialog/DeleteDialog';

3. Tables (`Tables/`)

Data display components using @tanstack/react-table:


Tables/
├── AuditLogs/              # Audit log displays
├── BeneficiaryEnrollment/  # Enrollment tables
├── ClientCompany/          # Company data tables (78 items)
├── HR/                     # HR-related tables (13 items)
├── IntellicareEnrollment/  # Intellicare-specific
├── OpenEnrollment/         # Open enrollment tables (18 items)
├── PrincipalPortal/        # Principal portal tables (15 items)
├── TabsColumn/             # Column definitions (55 items)
├── Column.tsx              # Column utilities
├── DataGrid.tsx            # Grid layout component
├── DataTable.tsx           # Main table component
├── Pagination.tsx          # Pagination controls
└── PlanDataTable.tsx       # Plan-specific table

Key Components:

DataTable.tsx - Primary table component with sorting, filtering, pagination
DataGrid.tsx - Alternative grid layout for data display
Column.tsx - Column definition utilities
Pagination.tsx - Reusable pagination controls

4. Tabs (`Tabs/`)

Navigation tab components organized by user role:


Tabs/
├── BeneficiaryEnrollment/  # Enrollment workflow tabs (21 items)
├── BrokersTabs.tsx         # Main broker navigation
├── ClientCompanyTabs/      # Company management tabs
├── HRTabs/                 # HR portal tabs (83 items)
├── InsuranceCompaniesTab/  # Provider selection tabs
└── brokersTabHelper.tsx    # Tab configuration helper

5. Forms (`Forms/`)

Form components organized by feature area:

Form Directory	Purpose
`BeneficiaryEnrollment/`	Enrollment forms
`BeneficiarySignIn/`	Portal sign-in
`ForgotPassword/`	Password recovery
`HR/`	HR-specific forms
`InsurerChangePassword/`	Password change
`MDSISignIn/`	MDSI authentication
`PrincipalPortalSignIn/`	Principal authentication
`ResetPassword/`	Password reset flow
`SignIn/`	Main authentication
`TurnAroundTime/`	TAT forms

Shared Components:

SelectField.tsx - Reusable select field with search

6. AuditLogs (`AuditLogs/`)

Audit logging display components:


// Usage
import { AuditLogsPage } from '@/components/feature/AuditLogs';
 
<AuditLogsPage />  // Shows dual-pane: logs + active users

Features:

Split-pane layout (ResponsiveContentLayout)
AuditLogsTable - Historical action logs
LoggedInuUsersTable - Currently active users

UI Components (`components/ui/`)

Base UI components built on shadcn/ui with Radix UI primitives. These are low-level, reusable components without business logic.

Available Components

Component	Primitive	Purpose
`Accordion.tsx`	`@radix-ui/react-accordion`	Collapsible content panels
`Alert.tsx`	Custom	Status alerts
`AlertDialog.tsx`	`@radix-ui/react-alert-dialog`	Modal confirmations
`AlertMessage.tsx`	Custom	Inline alert messages
`Badge.tsx`	Custom	Status badges
`Button.tsx`	Custom	Primary action button
`Calendar.tsx`	`react-day-picker`	Date picker
`Card.tsx`	Custom	Content containers
`Checkbox.tsx`	`@radix-ui/react-checkbox`	Form checkboxes
`Command.tsx`	`cmdk`	Command palette/combobox
`Dialog.tsx`	`@radix-ui/react-dialog`	Modal dialogs
`DropdownMenu.tsx`	`@radix-ui/react-dropdown-menu`	Context menus
`Form.tsx`	`@radix-ui/react-form`	Form primitives
`Input.tsx`	Custom	Text inputs
`InputOTP.tsx`	`input-otp`	OTP code input
`Label.tsx`	`@radix-ui/react-label`	Form labels
`Popover.tsx`	`@radix-ui/react-popover`	Floating panels
`Resizable.tsx`	`react-resizable-panels`	Draggable panels
`ScrollArea.tsx`	`@radix-ui/react-scroll-area`	Custom scrollbars
`Select.tsx`	`@radix-ui/react-select`	Dropdown selects
`Separator.tsx`	`@radix-ui/react-separator`	Visual dividers
`Skeleton.tsx`	Custom	Loading placeholders
`Sonner.tsx`	`sonner`	Toast notifications
`Table.tsx`	Custom	Table primitives
`Tabs.tsx`	`@radix-ui/react-tabs`	Tab navigation
`Textarea.tsx`	Custom	Multi-line inputs
`Toast.tsx`	Custom	Toast notifications
`Toggle.tsx`	`@radix-ui/react-toggle`	Toggle buttons
`Tooltip.tsx`	`@radix-ui/react-tooltip`	Hover tooltips
`Typography.tsx`	Custom	Text variants

Component Patterns

Styling:

All components use Tailwind CSS
class-variance-authority (CVA) for variant management
tailwind-merge for class merging
CSS variables for theming via globals.css

Import Pattern:


import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';

Testing & Stories

Some components include Storybook stories and tests:

Button.stories.tsx, Button.test.tsx
Select.stories.tsx
Tabs.stories.tsx
Toast.stories.tsx
DataTable.stories.tsx

Layout Components (`components/layouts/`)

Page layout wrappers that define the structural composition of pages.

Components

Component	Purpose
`AppLayout.tsx`	Root application layout with navigation
`ContentLayout.tsx`	Two-pane responsive layout (sidebar + content)

ResponsiveContentLayout Pattern:


import { ResponsiveContentLayout } from '@/components/layouts/ContentLayout';
 
<ResponsiveContentLayout
  left={<SidebarComponent />}
  right={<MainContent />}
/>

Provider Components (`components/providers/`)

React context providers for application-wide state and configuration.

Available Providers

Provider	Purpose
`CommonInsurancePolicy.tsx`	Shared insurance policy context
`IcareInsurancePolicy.tsx`	Icare-specific policy data
`MaxicareInsurancePolicy.tsx`	Maxicare-specific policy data
`ReactQuery.tsx`	TanStack Query configuration

Usage: Providers are typically composed in _app.tsx:


<ReactQueryProvider>
  <CommonInsurancePolicyProvider>
    <App />
  </CommonInsurancePolicyProvider>
</ReactQueryProvider>

Icon Components (`components/icons/`)

Custom SVG icon components as React components.

Available Icons

Icon	Purpose
`howden-logo.tsx`	Company logo (SVG)
`no-selected-data.tsx`	Empty state illustration
`not-found.tsx`	404 page illustration

Usage:


import { HowdenLogo } from '@/components/icons/howden-logo';
import { NoSelectedData } from '@/components/icons/no-selected-data';

Component Development Guidelines

Creating New Feature Components

Location: Place in appropriate feature/ subdirectory
Naming: Use PascalCase for component names
Exports: Use named exports for clarity
Index Pattern: Create index.tsx for clean imports

Example Structure:


// src/components/feature/MyFeature/index.tsx
import { useQuery } from '@tanstack/react-query';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
 
export function MyFeature() {
  // Component logic
}
 
// Usage elsewhere:
import { MyFeature } from '@/components/feature/MyFeature';

Component Composition Pattern

Feature components compose UI components:


// Feature component (business logic + layout)
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { DataTable } from '@/components/feature/Tables/DataTable';
 
export function ClientCompanyView() {
  return (
    <Card>
      <CardHeader title="Companies" />
      <CardContent>
        <DataTable columns={columns} data={data} />
        <Button>Add Company</Button>
      </CardContent>
    </Card>
  );
}

shadcn/ui Component Updates

To add/update shadcn/ui components:


npx shadcn add <component-name>

Components are stored in components/ui/ and can be customized as needed.

ARCHITECTURE.md - High-level architecture
UI Components - shadcn/ui documentation
Radix UI - Primitive documentation

Components Documentation

Overview

Directory Structure

Feature Components (components/feature/)

Directory Organization

Key Feature Areas

1. InsuranceCompanies (InsuranceCompanies/)

2. Dialogs (Dialog/)

3. Tables (Tables/)

4. Tabs (Tabs/)

5. Forms (Forms/)

6. AuditLogs (AuditLogs/)

UI Components (components/ui/)