Constants Documentation

Overview

The constants directory (src/constants/) contains application-wide constants, enums, configuration objects, and static data structures. These are pure TypeScript/JavaScript values that don’t change at runtime.

Directory Structure


src/constants/
├── action.ts                      # Action type definitions
├── beneficiary-data/              # Beneficiary data constants
├── beneficiary-enrollment.ts      # Enrollment constants
├── client-company-tabs.ts         # Company tab configurations
├── cocolife-plan-tabs.ts          # Cocolife plan structure
├── cocolife-tabs.ts               # Cocolife tab definitions
├── dependent-principal-schema.ts  # Dependent validation schemas
├── enums.ts                       # Basic enums
├── etiqa-tabs.ts                  # Etiqa tab definitions
├── generali-tabs.ts               # Generali tab definitions
├── hr-tabs.tsx                    # HR portal tabs (React)
├── icare-dependent-schema.ts    # Icare dependent schemas
├── icare.ts                       # Icare constants
├── insurance-companies.ts         # Company configurations
├── insurance-providers.ts         # Provider list
├── intellicare-tabs.ts           # Intellicare tab definitions
├── interface.ts                   # TypeScript interfaces
├── maxicare.ts                    # Maxicare constants
├── member-info.ts                 # Member information constants
├── nav-routes.ts                  # Navigation routes
├── new-interface.ts               # Extended interfaces
├── plan-tabs/                     # Plan tab configurations
├── tabs.tsx                       # Tab utilities
└── title.ts                       # Page/document titles

Core Constants

Insurance Providers (`insurance-providers.ts`)

Central registry of supported insurance providers:


export const INSURANCE_PROVIDERS = [
  'Etiqa',
  'Intellicare',
  'Cocolife',
  'Generali',
  'Maxicare',
  'Icare',
] as const;
 
export type InsuranceProviders = (typeof INSURANCE_PROVIDERS)[number];

Usage:


import { INSURANCE_PROVIDERS, InsuranceProviders } from '@/constants/insurance-providers';
 
// Type-safe provider selection
function handleProvider(provider: InsuranceProviders) {
  // provider can only be one of the 6 values
}
 
// Iterate all providers
INSURANCE_PROVIDERS.forEach(provider => {
  console.log(provider); // 'Etiqa', 'Intellicare', etc.
});

Actions (`action.ts`)

Audit action type definitions for tracking user activities:


export const AUDIT_ACTIONS = {
  CREATE: 'create',
  UPDATE: 'update',
  DELETE: 'delete',
  VIEW: 'view',
  EXPORT: 'export',
  // ... more actions
} as const;
 
export type AuditAction = typeof AUDIT_ACTIONS[keyof typeof AUDIT_ACTIONS];

Purpose:

Standardized action names for audit logging
Used in useAuditActions hook
Tracks user interactions across the application

Enums (`enums.ts`)

Basic TypeScript enums for the application:


export enum UserType {
  BROKER = 'Broker',
  PRINCIPAL = 'Principal',
  BENEFICIARY = 'Beneficiary',
}
 
export enum EnrollmentStatus {
  PENDING = 'Pending',
  APPROVED = 'Approved',
  REJECTED = 'Rejected',
}

Tab Configurations

Tab configurations define the navigation structure for different user roles and insurance providers.

Provider Tab Constants

Each provider has its own tab configuration:

File	Provider	Purpose
`cocolife-tabs.ts`	Cocolife	Tab definitions and content
`etiqa-tabs.ts`	Etiqa	Tab definitions and content
`generali-tabs.ts`	Generali	Tab definitions and content
`icare.ts`	Icare	Combined tabs + constants
`intellicare-tabs.ts`	Intellicare	Tab definitions and content
`maxicare.ts`	Maxicare	Combined tabs + constants

Structure Pattern:


// cocolife-tabs.ts
export const COCOLIFE_TABS = [
  {
    id: 'members',
    label: 'Members',
    component: 'MemberInformationTab',
    permissions: ['view_members'],
  },
  {
    id: 'enrollment',
    label: 'Enrollment',
    component: 'EnrollmentTab',
    permissions: ['manage_enrollment'],
  },
  // ... more tabs
] as const;
 
export type CocolifeTabId = typeof COCOLIFE_TABS[number]['id'];

Usage:


import { COCOLIFE_TABS } from '@/constants/cocolife-tabs';
 
function CocolifePage() {
  const [activeTab, setActiveTab] = useState(COCOLIFE_TABS[0].id);
  
  return (
    <Tabs value={activeTab} onValueChange={setActiveTab}>
      {COCOLIFE_TABS.map(tab => (
        <TabsTrigger key={tab.id} value={tab.id}>
          {tab.label}
        </TabsTrigger>
      ))}
    </Tabs>
  );
}

HR Tabs (`hr-tabs.tsx`)

React component for HR portal tab configuration:


export const HR_TABS = [
  { id: 'dashboard', label: 'Dashboard', icon: DashboardIcon },
  { id: 'employees', label: 'Employees', icon: UsersIcon },
  { id: 'enrollment', label: 'Enrollment', icon: FileTextIcon },
  // ... more tabs
];

Schema Constants

Dependent Principal Schema (`dependent-principal-schema.ts`)

Zod validation schemas for dependent and principal data:


export const DependentSchema = z.object({
  firstName: z.string().min(1, 'First name is required'),
  lastName: z.string().min(1, 'Last name is required'),
  dateOfBirth: z.date(),
  relationship: z.enum(['spouse', 'child', 'parent']),
  // ... more fields
});
 
export type Dependent = z.infer<typeof DependentSchema>;

Usage:


import { DependentSchema } from '@/constants/dependent-principal-schema';
 
// Form validation
const form = useForm({
  resolver: zodResolver(DependentSchema),
});
 
// Data validation
const result = DependentSchema.safeParse(formData);

Icare Dependent Schema (`icare-dependent-schema.ts`)

Provider-specific schema for Icare:


export const IcareDependentSchema = z.object({
  // Icare-specific validation rules
  memberId: z.string().regex(/^IC-\d{6}$/),
  planType: z.enum(['basic', 'premium', 'elite']),
  // ...
});

Insurance Plan Tabs (`plan-tabs/`)

Directory containing plan-specific tab configurations:


plan-tabs/
├── cocolife-plan-tabs.ts    # Cocolife plan structures
├── etiqa-plan-tabs.ts       # Etiqa plan structures
├── generali-plan-tabs.ts    # Generali plan structures
├── intellicare-plan-tabs.ts # Intellicare plan structures
└── maxicare-plan-tabs.ts    # Maxicare plan structures

Each file defines the tab structure for plan management within a provider.

Interface Definitions

Main Interface (`interface.ts`)

Core TypeScript interfaces used across the application:


export interface Member {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  insuranceProvider: InsuranceProviders;
  planType: string;
  status: EnrollmentStatus;
  // ... more fields
}
 
export interface Company {
  id: string;
  name: string;
  code: string;
  insuranceProviders: InsuranceProviders[];
  principalContact: ContactInfo;
  // ...
}

New Interface (`new-interface.ts`)

Extended interfaces for newer features:


export interface AuditLog {
  id: string;
  userId: string;
  action: AuditAction;
  entityType: string;
  entityId: string;
  timestamp: Date;
  details: Record<string, unknown>;
}

Navigation Routes (`nav-routes.ts`)

Application route definitions:


export const ROUTES = {
  HOME: '/',
  DASHBOARD: '/dashboard',
  LOGIN: '/login',
  BENEFICIARY_PORTAL: '/beneficiary-portal',
  PRINCIPAL_PORTAL: '/principal-portal',
  // ... more routes
} as const;
 
export type Route = typeof ROUTES[keyof typeof ROUTES];

Page Titles (`title.ts`)

Document title configurations:


export const PAGE_TITLES = {
  DASHBOARD: 'Dashboard | Howden Client',
  LOGIN: 'Sign In | Howden Client',
  BENEFICIARY_ENROLLMENT: 'Beneficiary Enrollment | Howden Client',
  // ... more titles
} as const;
 
export function getPageTitle(page: keyof typeof PAGE_TITLES): string {
  return PAGE_TITLES[page];
}

Usage:


import { getPageTitle } from '@/constants/title';
 
useEffect(() => {
  document.title = getPageTitle('DASHBOARD');
}, []);

Usage Patterns

Import Patterns

Direct Import:


import { INSURANCE_PROVIDERS } from '@/constants/insurance-providers';
import { COCOLIFE_TABS } from '@/constants/cocolife-tabs';

Type-Only Import:


import type { InsuranceProviders } from '@/constants/insurance-providers';
import type { Member } from '@/constants/interface';

Creating New Constants

For Simple Values:


// constants/my-feature.ts
export const MY_FEATURE_CONFIG = {
  API_TIMEOUT: 5000,
  MAX_ITEMS: 100,
  DEFAULT_SORT: 'createdAt',
} as const;
 
export type MyFeatureConfig = typeof MY_FEATURE_CONFIG;

For Arrays with Types:


// constants/my-options.ts
export const OPTIONS = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
] as const;
 
export type OptionValue = typeof OPTIONS[number]['value'];

For Zod Schemas:


// constants/my-schema.ts
import { z } from 'zod';
 
export const MyDataSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1).max(100),
  email: z.string().email(),
  isActive: z.boolean().default(true),
});
 
export type MyData = z.infer<typeof MyDataSchema>;

Best Practices

Use as const assertion for array/object constants to enable type inference
Export types derived from constants for type safety
Group related constants in dedicated files
Use Zod schemas for data validation constants
Keep constants pure - no runtime logic or side effects
Document complex structures with JSDoc comments

Constants Documentation

Overview

Directory Structure

Core Constants

Insurance Providers (insurance-providers.ts)

Actions (action.ts)

Enums (enums.ts)

Tab Configurations

Provider Tab Constants

HR Tabs (hr-tabs.tsx)

Schema Constants

Dependent Principal Schema (dependent-principal-schema.ts)

Icare Dependent Schema (icare-dependent-schema.ts)

Insurance Plan Tabs (plan-tabs/)

Interface Definitions

Main Interface (interface.ts)

New Interface (new-interface.ts)

Navigation Routes (nav-routes.ts)

Page Titles (title.ts)

Usage Patterns

Import Patterns

Creating New Constants

Best Practices

Related Documentation

Insurance Providers (`insurance-providers.ts`)

Actions (`action.ts`)

Enums (`enums.ts`)

HR Tabs (`hr-tabs.tsx`)

Dependent Principal Schema (`dependent-principal-schema.ts`)

Icare Dependent Schema (`icare-dependent-schema.ts`)

Insurance Plan Tabs (`plan-tabs/`)

Main Interface (`interface.ts`)

New Interface (`new-interface.ts`)

Navigation Routes (`nav-routes.ts`)

Page Titles (`title.ts`)