Skip to main content

Specialized Components

Specialized components are domain-specific implementations designed for particular use cases within the WorkPay application. These components combine multiple basic components to create complex, feature-rich interfaces.

Page Templates​

WPTabbedPage​

Comprehensive page template with tabs, filters, and table integration.

Location: src/components/WPagesTemplates/WPTabbedPage.tsx

Features:

  • Breadcrumb navigation
  • Page title and actions
  • Tabbed content with badges
  • Integrated filtering
  • Table variants (basic, expandable, selectable)
  • Responsive design

Usage:

import { WPTabbedPage } from 'components/WPagesTemplates';

<WPTabbedPage>
  <WPTabbedPage.BreadCrumb>
    <HStack as={Link} to='/dashboard'>
      <ChevronLeftOutline />
      &lt;Text&gt;Back to Dashboard</Text>
    </HStack>
  </WPTabbedPage.BreadCrumb>

  <WPTabbedPage.Title title='User Management' />

  <WPTabbedPage.Body>
    <WPTabbedPage.HeaderSection>
      <WPTabbedPage.TabsNFilters tabData={tabData}>
        <FilterForm />
      </WPTabbedPage.TabsNFilters>

      <WPTabbedPage.RightSection>
        <StatCard />
        <ActionButtons />
      </WPTabbedPage.RightSection>
    </WPTabbedPage.HeaderSection>

    <WPTabbedPage.Content tabData={tabData} />
  </WPTabbedPage.Body>
</WPTabbedPage>;

WPTabbedPage.Table​

Integrated table component with multiple variants.

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | tabData | Array | Yes | Tab configuration with table data | | isBasic | boolean | No | Use basic table variant | | expandable | boolean | No | Use expandable table variant | | isSubCompExpandable | boolean | No | Use sub-component expandable variant | | customColumn | Array | Yes | Table column definitions | | tableData | Array | Yes | Table data | | isLoading | boolean | Yes | Loading state | | error | Object | No | Error state | | paginatedData | Object | No | Pagination configuration |

Example:

const tabData = [
  {
    id: 1,
    title: 'Active Users',
    columns: userColumns,
    data: activeUsers,
    isLoading: false,
    tableVariant: 'isBasic',
  },
  {
    id: 2,
    title: 'Inactive Users',
    columns: userColumns,
    data: inactiveUsers,
    isLoading: false,
    tableVariant: 'isExpandable',
  },
];

<WPTabbedPage.Table
  tabData={tabData}
  isBasic={false}
  expandable={false}
  initialState={{ pageSize: 10 }}
/>;

WPPage​

Simple page wrapper for basic layouts.

Location: src/components/WPagesTemplates/WPage.tsx

Usage:

import { WPPage } from 'components/WPagesTemplates';

<WPPage spacing={6} p={8}>
  <PageHeader />
  <PageContent />
</WPPage>;

WPPageContainer​

Structured page container with title, description, and actions.

Location: src/components/WPagesTemplates/WPPageContainer.tsx

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | children | ReactNode | Yes | Page content | | pageTitle | ReactNode | No | Page title | | pageDescription | ReactNode | No | Page description | | pageActions | ReactNode | No | Action buttons | | BackButton | ReactNode | No | Back navigation button |

Usage:

import WpPageContainer from 'components/WPagesTemplates/WPPageContainer';

<WpPageContainer
  pageTitle='Employee Management'
  pageDescription='Manage employee records and permissions'
  pageActions={<Button colorScheme='green'>Add Employee</Button>}
  BackButton={<BackButton />}
>
  <EmployeeList />
</WpPageContainer>;

Status Components​

Status Workflow Component​

Displays approval workflow stages with progress indicators.

Location: src/components/Status/index.tsx

Features:

  • Multi-stage approval workflows
  • Progress visualization
  • Stage history tracking
  • Status badges
  • Tooltips for detailed information

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | stages | Array | Yes | Array of workflow stages | | module | string | Yes | Module identifier | | isNewDesign | boolean | No | Use new design variant |

Usage:

import { ApprovalActionStageHistory } from 'components/Status';

const stages = [
  {
    id: 1,
    name: 'Submitted',
    status: 'completed',
    date: '2023-01-01',
    user: 'John Doe',
  },
  {
    id: 2,
    name: 'Manager Review',
    status: 'in_progress',
    date: null,
    user: 'Jane Smith',
  },
  {
    id: 3,
    name: 'Final Approval',
    status: 'pending',
    date: null,
    user: 'Admin',
  },
];

<ApprovalActionStageHistory
  stages={stages}
  module='expense'
  isNewDesign={true}
/>;

Status Formatters​

Domain-specific status formatting components.

Available Formatters:

  • ExpenseStatusFormatter
  • LoansStatusFormatter
  • V2LoansStatusFormatter
  • OvertimeStatusFormatter
  • SalaryAdvanceStatusFormatter
  • WPStatusFormatter

Usage:

import ExpenseStatusFormatter from 'containers/Expenses/statusFormatter';

<ExpenseStatusFormatter status='pending' amount={1000} currency='USD' />;

Filter Components​

Filter (Drawer)​

Comprehensive filter interface with tabs for different filter types.

Location: src/components/Filter/Filter.tsx

Features:

  • Drawer-based interface
  • Multiple filter tabs
  • Form-based filtering
  • Exempt functionality
  • File upload support

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | isOpen | boolean | Yes | Drawer open state | | onClose | function | Yes | Close handler |

Usage:

import Filter from 'components/Filter/Filter';

<Filter isOpen={isFilterOpen} onClose={handleFilterClose} />;

FilterTabForm​

Basic filter form for employee filtering.

Location: src/components/Filter/FilterTabForm.tsx

Features:

  • Employee selection
  • Status filtering
  • Department filtering
  • Assignment filtering

Usage:

import FilterTabForm from 'components/Filter/FilterTabForm';

<FilterTabForm onClose={handleFilterClose} />;

ExemptTabForm​

Form for exempting employees from processes.

Location: src/components/Filter/ExemptTabForm.tsx

Features:

  • Employee exemption
  • Status-based exemption
  • Department exemption
  • Excel file upload for bulk exemption

Usage:

import ExemptTabForm from 'components/Filter/ExemptTabForm';

<ExemptTabForm onClose={handleExemptClose} />;

Calendar Components​

WPCalendar​

Custom calendar component with event management.

Location: src/components/Calendar/index.tsx

Features:

  • React Big Calendar integration
  • Custom toolbar
  • Event handling
  • Multiple view modes
  • Responsive design
  • Loading states

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | events | Array | Yes | Calendar events | | loading | boolean | No | Loading state | | views | Array | No | Available view modes | | viewDate | Date | No | Current view date | | onSelectEvent | function | No | Event selection handler | | tooltipAccessor | string | No | Event tooltip property | | onShowMore | function | No | Show more events handler | | eventPropGetter | function | No | Event styling function | | showAllEvents | boolean | No | Show all events flag | | components | Object | No | Custom components | | showToday | boolean | No | Show today button | | showViews | boolean | No | Show view selector | | page | string | No | Page identifier | | colorDesc | string | No | Color description |

Usage:

import WPCalendar from 'components/Calendar';

const events = [
  {
    id: 1,
    title: 'Meeting with Team',
    start: new Date(2023, 5, 1, 10, 0),
    end: new Date(2023, 5, 1, 11, 0),
    resource: { type: 'meeting' },
  },
];

<WPCalendar
  events={events}
  loading={false}
  views={['month', 'week', 'day']}
  onSelectEvent={handleEventSelect}
  showToday={true}
  showViews={true}
  page='dashboard'
/>;

WPCalendarToolbar​

Custom toolbar for calendar navigation.

Features:

  • Navigation controls
  • View switching
  • Today button
  • Color legend
  • Custom styling

Usage:

// Used internally by WPCalendar
<WPCalendarToolbar
  showViews={true}
  showToday={true}
  page='dashboard'
  colorDesc='Event colors'
/>

Main application sidebar with navigation menu.

Location: src/components/Sidebar/index.tsx

Features:

  • Hierarchical navigation
  • Permission-based menu items
  • Collapsible sections
  • Search functionality
  • User portal switching
  • Responsive design
  • Analytics tracking

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | width | ResponsiveValue | No | Sidebar width | | position | string | No | CSS position | | overflow | string | No | Overflow behavior |

Usage:

import Sidebar from 'components/Sidebar';

<Sidebar
  width={{ base: '0%', lg: '16%' }}
  position='fixed'
  h='100vh'
  overflow='initial'
/>;

Global sidebar for multi-tenant applications.

Location: src/components/GlobalSidebar.tsx

Features:

  • Multi-tenant navigation
  • Global settings access
  • Company switching
  • Feature-based menu visibility
  • Subscription-based access control

Usage:

import GlobalSidebar from 'components/GlobalSidebar';

<GlobalSidebar />;

Empty State Components​

ComingSoon​

Empty state component for features under development.

Location: src/components/ComingSoon.tsx

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | page | string | No | Page/feature name | | plural | boolean | No | Use plural form | | variant | string | No | Variant (maintenance, under-maintenance) |

Usage:

import ComingSoon from 'components/ComingSoon';

// Feature coming soon
<ComingSoon page="Reports" plural={true} />

// Under maintenance
<ComingSoon
  page="Dashboard"
  variant="maintenance"
/>

// System maintenance
<ComingSoon variant="under-maintenance" />

BlankPage​

Minimal empty page component.

Location: src/components/commons/BlankPage.tsx

Usage:

import BlankPage from 'components/commons/BlankPage';

<BlankPage />;

Advanced Tab Components​

WPTabPage​

Advanced tab page wrapper with complex layout support.

Location: src/components/Tabs/AdvancedTabsWrapper.tsx

Features:

  • Nested tab structures
  • Complex content areas
  • Header and filter sections
  • Responsive design

Components:

  • WPTabPage.BreadCrumb
  • WPTabPage.Title
  • WPTabPage.Body
  • WPTabPage.HeaderSection
  • WPTabPage.TabsNFilters
  • WPTabPage.Filters
  • WPTabPage.RightSection
  • WPTabPage.Content

Usage:

import { WPTabPage } from 'components/Tabs/AdvancedTabsWrapper';

&lt;WPTabPage&gt;
  <WPTabPage.BreadCrumb>
    <BreadcrumbNavigation />
  </WPTabPage.BreadCrumb>

  <WPTabPage.Title title='Advanced Dashboard' />

  <WPTabPage.Body>
    <WPTabPage.HeaderSection>
      <WPTabPage.TabsNFilters tabData={tabData}>
        <FilterControls />
      </WPTabPage.TabsNFilters>

      <WPTabPage.RightSection>
        <StatCards />
      </WPTabPage.RightSection>
    </WPTabPage.HeaderSection>

    <WPTabPage.Content tabData={tabData} />
  </WPTabPage.Body>
</WPTabPage>;

Integration Patterns​

Page Template Integration​

// Complete page implementation
&lt;WPTabbedPage&gt;
  <WPTabbedPage.BreadCrumb>
    <Link to='/dashboard'>Dashboard</Link>
  </WPTabbedPage.BreadCrumb>

  <WPTabbedPage.Title title='Employee Management' />

  <WPTabbedPage.Body>
    <WPTabbedPage.HeaderSection>
      <WPTabbedPage.TabsNFilters tabData={employeeTabs}>
        &lt;FilteringComponent&gt;
          <EmployeeFilters />
        </FilteringComponent>
      </WPTabbedPage.TabsNFilters>

      <WPTabbedPage.RightSection>
        <EmployeeStats />
        <ActionButtons />
      </WPTabbedPage.RightSection>
    </WPTabbedPage.HeaderSection>

    <WPTabbedPage.Table
      tabData={employeeTabs}
      isBasic={false}
      expandable={true}
    />
  </WPTabbedPage.Body>
</WPTabbedPage>

Status Workflow Integration​

// Expense approval workflow
&lt;Card&gt;
  &lt;CardHeader&gt;
    <Heading size='md'>Expense Request</Heading>
  </CardHeader>
  &lt;CardBody&gt;
    <ExpenseDetails />
    <ApprovalActionStageHistory
      stages={approvalStages}
      module='expense'
      isNewDesign={true}
    />
  </CardBody>
</Card>

Filter Integration​

// Filter with table integration
<VStack spacing={4}>
  <HStack justify='space-between' w='full'>
    &lt;Heading&gt;Employee List</Heading>
    <Button onClick={onFilterOpen}>
      <FilterOutline />
      Filter
    </Button>
  </HStack>

  <DataTable data={filteredData} />

  <Filter isOpen={isFilterOpen} onClose={onFilterClose} />
</VStack>

Best Practices​

Page Template Usage​

  • Use WPTabbedPage for complex data management interfaces
  • Use WPPage for simple layouts
  • Use WPPageContainer for structured single-page layouts
  • Always provide breadcrumb navigation for better UX

Status Component Usage​

  • Use consistent status formatting across modules
  • Provide tooltips for detailed stage information
  • Use color coding for different status types
  • Include timestamps for workflow tracking

Filter Component Usage​

  • Group related filters logically
  • Provide clear labels and placeholders
  • Include reset functionality
  • Show filter state in the UI
  • Support bulk operations through exemptions

Calendar Component Usage​

  • Provide loading states during data fetching
  • Use consistent event styling
  • Support multiple view modes
  • Include event details in tooltips
  • Handle timezone considerations

Performance Considerations​

Page Templates​

  • Lazy load tab content
  • Implement virtual scrolling for large datasets
  • Optimize table rendering with pagination
  • Use React.memo for expensive computations

Status Components​

  • Cache status formatter results
  • Minimize re-renders with proper dependencies
  • Use efficient data structures for workflow stages

Filter Components​

  • Debounce filter inputs
  • Optimize filter queries
  • Cache filter results
  • Implement progressive disclosure

Calendar Components​

  • Virtualize large event datasets
  • Optimize event rendering
  • Use efficient date calculations
  • Implement intelligent caching

Migration Guidelines​

From Legacy Components​

// Old approach
<div className="page-container">
  <div className="page-header">
    <h1>Title</h1>
  </div>
  <div className="page-content">
    <table>...</table>
  </div>
</div>

// New approach
<WPPageContainer
  pageTitle="Title"
  pageDescription="Description"
>
  <WPTabbedPage.Table
    tabData={tabData}
    isBasic={true}
  />
</WPPageContainer>

Status Migration​

// Old approach
<span className={`status-${status}`}>
  {status.toUpperCase()}
</span>

// New approach
<StatusFormatter
  status={status}
  module="expense"
/>

Testing Strategies​

Component Testing​

  • Test all tab variations
  • Verify filter functionality
  • Test status workflow progression
  • Validate calendar event handling
  • Check responsive behavior

Integration Testing​

  • Test page template assemblies
  • Verify filter-table integration
  • Test status workflow updates
  • Validate calendar event management

Performance Testing​

  • Measure table rendering with large datasets
  • Test filter performance with many options
  • Validate calendar performance with many events
  • Monitor memory usage in complex pages
  • Table Components: Integrated with page templates
  • Form Components: Used in filter interfaces
  • Modal Components: Used in calendar event details
  • Button Components: Used in page actions
  • Display Components: Used in status displays

Accessibility Features​

All specialized components include:

  • ARIA labels and descriptions
  • Keyboard navigation support
  • Screen reader compatibility
  • Focus management
  • High contrast mode support
  • Semantic HTML structure