Display Components

Display components provide visual representation of data, status indicators, timelines, charts, and user avatar displays throughout the WorkPayCore Frontend application.

Component Overview

Core Components

Dashboard Components - Statistics cards and dashboard widgets
Status Components - Status badges and workflow indicators
Timeline Components - Progress and history visualization
Chart Components - Data visualization components
Avatar Components - User profile image displays

Dashboard Components

Dashboard components provide statistical displays and summary cards for key metrics.

TopStatCard

Main statistics card component for displaying key metrics with icons and hover effects.

Component Location

import TopStatCard from 'components/Dashboard/TopStatCard';

Props

Prop	Type	Default	Description
`stat`	`object`	-	Statistics data object
`meta`	`object`	-	Metadata including id, loading state, links
`isPercentage`	`boolean`	`false`	Whether to display percentage symbol

Usage Examples

Basic Stat Card

import TopStatCard from 'components/Dashboard/TopStatCard';

function EmployeeStatsCard() {
  const employeeStats = {
    total: 150,
  };

  const metaData = {
    id: 'employees',
    statFor: 'Total Employees',
    linkTo: '/employees',
    linkLabel: 'View All',
    isLoading: false,
  };

  return <TopStatCard stat={employeeStats} meta={metaData} />;
}

Loading State

import TopStatCard from 'components/Dashboard/TopStatCard';

function LoadingStatsCard() {
  const metaData = {
    id: 'leaves',
    statFor: 'Leave Requests',
    isLoading: true,
  };

  return <TopStatCard stat={{ total: 0 }} meta={metaData} />;
}

Percentage Display

import TopStatCard from 'components/Dashboard/TopStatCard';

function TurnoverStatsCard() {
  const turnoverStats = {
    total: 15.5,
  };

  const metaData = {
    id: 'employee_turnover',
    statFor: 'Employee Turnover',
    linkTo: '/reports/turnover',
    linkLabel: 'View Report',
  };

  return <TopStatCard stat={turnoverStats} meta={metaData} isPercentage />;
}

StatCardBluePrint

Blueprint component for creating custom statistics cards with header, body, and footer sections.

Component Location

import StatCardBluePrint, {
  StatCardHeader,
  StatCardBody,
  StatCardFooter,
} from 'components/Dashboard/StatCardBluePrint';

Usage Examples

Custom Dashboard Card

import StatCardBluePrint, {
  StatCardHeader,
  StatCardBody,
  StatCardFooter,
} from 'components/Dashboard/StatCardBluePrint';
import { Text, VStack } from '@chakra-ui/react';

function CustomMetricsCard() {
  const header = (
    <StatCardHeader heading='Monthly Overview' subHeading='September 2024' />
  );

  const body = (
    &lt;StatCardBody&gt;
      <VStack spacing={4} p={4}>
        <Text fontSize='2xl' color='green'>
          85%
        </Text>
        <Text fontSize='sm'>Employee Satisfaction</Text>
      </VStack>
    </StatCardBody>
  );

  const footer = (
    &lt;StatCardFooter&gt;
      <Text fontSize='sm' color='green'>
        +5% from last month
      </Text>
    </StatCardFooter>
  );

  return <StatCardBluePrint header={header} body={body} footer={footer} />;
}

import StatCardBluePrint, {
  StatCardHeader,
  StatCardBody,
} from 'components/Dashboard/StatCardBluePrint';

function SimpleCard() {
  return (
    <StatCardBluePrint
      header={<StatCardHeader heading='Quick Stats' />}
      body={
        &lt;StatCardBody&gt;
          &lt;Text&gt;Card content here</Text>
        </StatCardBody>
      }
      noFooter
    />
  );
}

Status Components

Status components display various states, approval workflows, and progress indicators.

StatusFormatter

Main status badge component with customizable colors and labels.

Component Location

import StatusFormatter from 'components/Status/StatusFormatter';

Props

Prop	Type	Default	Description
`status`	`string`	-	Status value to display
`showTooltip`	`boolean`	`true`	Whether to show tooltip
`tooltip`	`string`	-	Custom tooltip text

Usage Examples

Basic Status Badge

import StatusFormatter from 'components/Status/StatusFormatter';

function EmployeeStatus({ employee }) {
  return (
    <StatusFormatter
      status={employee.status}
      showTooltip
      tooltip='Employee current status'
    />
  );
}

Multiple Status Displays

import StatusFormatter from 'components/Status/StatusFormatter';
import { HStack } from '@chakra-ui/react';

function LeaveRequestStatuses({ requests }) {
  return (
    <HStack spacing={2}>
      {requests.map(request => (
        <StatusFormatter key={request.id} status={request.status} showTooltip />
      ))}
    </HStack>
  );
}

ApprovalWorkflowStatus

Complex status component for displaying approval workflow progress and stages.

Component Location

import { ApprovalWorkflowStatus } from 'components/Status';

Props

Prop	Type	Default	Description
`original`	`object`	-	Data object with approval information
`module`	`string`	-	Module name (e.g., 'Leaves', 'Expenses')
`isNewDesign`	`boolean`	`false`	Use new design layout

Usage Examples

Leave Approval Workflow

import { ApprovalWorkflowStatus } from 'components/Status';

function LeaveApprovalStatus({ leaveRequest }) {
  return (
    <ApprovalWorkflowStatus
      original={leaveRequest}
      module='Leaves'
      isNewDesign
    />
  );
}

Expense Approval Workflow

import { ApprovalWorkflowStatus } from 'components/Status';

function ExpenseApprovalStatus({ expense }) {
  return <ApprovalWorkflowStatus original={expense} module='Expenses' />;
}

WpBaseStatusFormatter

Reusable base status component with customizable styling and icons.

Component Location

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

Props

Prop	Type	Default	Description
`status`	`string`	-	Status value
`statusMap`	`object`	-	Custom status mapping
`title`	`string`	-	Custom title override
`hasDot`	`boolean`	`true`	Show status dot indicator
`leftIcon`	`object`	-	Custom left icon with tooltip
`rightIcon`	`object`	-	Custom right icon with tooltip
`customColors`	`object`	-	Color overrides
`size`	`string`	`'md'`	Badge size

Usage Examples

Custom Status Mapping

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function PaymentStatus({ status }) {
  const paymentStatusMap = {
    pending: {
      bgColor: 'yellow.100',
      color: 'yellow.800',
      dotColor: 'yellow.500',
      defaultTitle: 'Payment Pending',
    },
    completed: {
      bgColor: 'green.100',
      color: 'green.800',
      dotColor: 'green.500',
      defaultTitle: 'Payment Completed',
    },
    failed: {
      bgColor: 'red.100',
      color: 'red.800',
      dotColor: 'red.500',
      defaultTitle: 'Payment Failed',
    },
  };

  return (
    <WpBaseStatusFormatter
      status={status}
      statusMap={paymentStatusMap}
      hasDot
    />
  );
}

Status with Custom Icons

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';
import { CheckIcon, WarningIcon } from '@chakra-ui/icons';

function TaskStatus({ status }) {
  const leftIcon =
    status === 'completed'
      ? {
          icon: <CheckIcon />,
          tooltip: 'Task completed successfully',
        }
      : undefined;

  return (
    <WpBaseStatusFormatter status={status} leftIcon={leftIcon} size='lg' />
  );
}

PolicyViolationBadge

Specialized badge for displaying policy violations with tooltip information.

Component Location

import PolicyViolationBadge from 'components/Status/PolicyViolationBadge';

Usage Examples

Policy Violation Display

import PolicyViolationBadge from 'components/Status/PolicyViolationBadge';

function AttendanceViolation({ violation }) {
  return (
    <PolicyViolationBadge
      statusText='Policy Violation'
      tooltip={violation.description}
    />
  );
}

Timeline Components

Timeline components visualize progress, history, and sequential events.

WPDotTimeline

Basic timeline component with dots and content display.

Component Location

import WPDotTimeline from 'components/Timeline/WpDotTimeline';

Props

Prop	Type	Default	Description
`options`	`array`	-	Array of timeline options

Option Structure

interface TimelineOption {
  title: string | ReactNode;
  display: string | ReactNode;
  icon?: ReactNode;
}

Usage Examples

Project Timeline

import WPDotTimeline from 'components/Timeline/WpDotTimeline';

function ProjectTimeline() {
  const timelineOptions = [
    {
      title: 'Project Started',
      display: 'Project initialization and team assignment completed.',
    },
    {
      title: 'Development Phase',
      display: 'Core features development in progress.',
    },
    {
      title: 'Testing Phase',
      display: 'Quality assurance and user acceptance testing.',
    },
    {
      title: 'Deployment',
      display: 'Production deployment and go-live.',
    },
  ];

  return <WPDotTimeline options={timelineOptions} />;
}

Timeline with Custom Icons

import WPDotTimeline from 'components/Timeline/WpDotTimeline';
import { CheckIcon, TimeIcon } from '@chakra-ui/icons';

function ProcessTimeline() {
  const processSteps = [
    {
      title: 'Application Submitted',
      display: 'Application received and under review.',
      icon: <CheckIcon color='green' />,
    },
    {
      title: 'In Review',
      display: 'Currently being reviewed by the team.',
      icon: <TimeIcon color='orange' />,
    },
  ];

  return <WPDotTimeline options={processSteps} />;
}

WPCheckedTimeline

Timeline component with checkmarks for completed steps.

Component Location

import WPCheckedTimeline from 'components/Timeline/WpCheckedTimeline';

Usage Examples

Onboarding Progress

import WPCheckedTimeline from 'components/Timeline/WpCheckedTimeline';

function OnboardingProgress() {
  const onboardingSteps = [
    {
      title: 'Account Created',
      display: 'User account has been successfully created.',
    },
    {
      title: 'Profile Completed',
      display: 'All required profile information has been provided.',
    },
    {
      title: 'Training Completed',
      display: 'Mandatory training sessions have been finished.',
    },
  ];

  return <WPCheckedTimeline options={onboardingSteps} />;
}

Approval Process

import WPCheckedTimeline from 'components/Timeline/WpCheckedTimeline';

function ApprovalTimeline({ approvals }) {
  const approvalSteps = approvals.map(approval => ({
    title: `${approval.stageName}`,
    display: `Approved by ${approval.approverName} on ${approval.date}`,
  }));

  return <WPCheckedTimeline options={approvalSteps} spacing={4} />;
}

Chart Components

Chart components provide data visualization capabilities.

NotDataFound

Component for displaying "no data" states in charts and visualizations.

Component Location

import NotDataFound from 'components/Charts/NotDataFound';

Props

Prop	Type	Default	Description
`message`	`string`	-	Message to display when no data is found

Usage Examples

Chart Empty State

import NotDataFound from 'components/Charts/NotDataFound';

function SalesChart({ data }) {
  if (!data || data.length === 0) {
    return (
      <NotDataFound message='No sales data available for the selected period' />
    );
  }

  return (
    // Render chart component
    <div>Chart content here</div>
  );
}

import NotDataFound from 'components/Charts/NotDataFound';

function MetricsWidget({ metrics }) {
  return (
    <div>
      {metrics ? (
        <div>Display metrics</div>
      ) : (
        <NotDataFound message='Metrics data is currently unavailable' />
      )}
    </div>
  );
}

Avatar Components

Avatar components display user profile images and related information.

AvatarLabel

Avatar component with accompanying label and description text.

Component Location

import AvatarLabel from 'components/Avatar/AvatarLabel';

Props

Prop	Type	Default	Description
`name`	`string`	-	User's name for avatar fallback
`src`	`string`	-	Avatar image URL
`label`	`string`	-	Primary label text
`labelDesc`	`string`	-	Secondary description text
`size`	`string`	`'sm'`	Avatar size

Usage Examples

Employee Avatar

import AvatarLabel from 'components/Avatar/AvatarLabel';

function EmployeeCard({ employee }) {
  return (
    <AvatarLabel
      name={employee.fullName}
      src={employee.profilePicture}
      label={employee.fullName}
      labelDesc={employee.designation}
      size='md'
    />
  );
}

User Profile Display

import AvatarLabel from 'components/Avatar/AvatarLabel';

function UserProfile({ user }) {
  return (
    <AvatarLabel
      name={user.name}
      src={user.avatar}
      label={user.name}
      labelDesc={user.email}
      size='lg'
    />
  );
}

AvatarGroupDropdown

Avatar group component with dropdown to show additional users.

Component Location

import AvatarGroupDropdown from 'components/Avatar/AvatarGroupDropdown';

Props

Prop	Type	Default	Description
`data`	`array`	-	Array of user objects
`size`	`string`	`'md'`	Avatar group size

User Object Structure

interface User {
  name: string;
  src?: string;
}

Usage Examples

Team Members Display

import AvatarGroupDropdown from 'components/Avatar/AvatarGroupDropdown';

function TeamMembersCard({ teamMembers }) {
  const userList = teamMembers.map(member => ({
    name: member.fullName,
    src: member.profilePicture,
  }));

  return <AvatarGroupDropdown data={userList} size='lg' />;
}

Project Assignees

import AvatarGroupDropdown from 'components/Avatar/AvatarGroupDropdown';

function ProjectAssignees({ assignees }) {
  return (
    <div>
      <h3>Project Team</h3>
      <AvatarGroupDropdown data={assignees} size='md' />
    </div>
  );
}

SelectedUserAvatar

Component for displaying selected users with removal capability.

Component Location

import SelectedUserAvatar from 'components/Avatar/SelectedUserAvatar';

Props

Prop	Type	Default	Description
`users`	`array`	-	Array of selected users
`maxUsersToDisplay`	`number`	`5`	Maximum users to display
`onRemoveUser`	`function`	-	Callback for removing users

Usage Examples

Selected Team Members

import SelectedUserAvatar from 'components/Avatar/SelectedUserAvatar';

function TeamSelection({ selectedMembers, onRemoveMember }) {
  return (
    <SelectedUserAvatar
      users={selectedMembers}
      maxUsersToDisplay={3}
      onRemoveUser={onRemoveMember}
    />
  );
}

Form User Selection

import SelectedUserAvatar from 'components/Avatar/SelectedUserAvatar';

function UserSelectionForm() {
  const [selectedUsers, setSelectedUsers] = useState([]);

  const handleRemoveUser = userId => {
    setSelectedUsers(users => users.filter(user => user.id !== userId));
  };

  return (
    <div>
      <h3>Selected Users</h3>
      <SelectedUserAvatar
        users={selectedUsers}
        onRemoveUser={handleRemoveUser}
      />
    </div>
  );
}

WPCountryCell

Specialized avatar component for displaying country flags with names.

Component Location

import { WPCountryCell } from 'components/Forms/V7/WPCountryCell';

Props

Prop	Type	Default	Description
`countryFlag`	`string`	-	Country flag image URL
`countryName`	`string`	-	Country name
`height`	`string`	`'20px'`	Flag height
`width`	`string`	`'20px'`	Flag width

Usage Examples

Country Selection

import { WPCountryCell } from 'components/Forms/V7/WPCountryCell';

function CountryDisplay({ country }) {
  return (
    <WPCountryCell
      countryFlag={country.flagUrl}
      countryName={country.name}
      height='24px'
      width='24px'
    />
  );
}

Integration Patterns

Dashboard Layout

import { Grid, GridItem } from '@chakra-ui/react';
import TopStatCard from 'components/Dashboard/TopStatCard';
import StatCardBluePrint from 'components/Dashboard/StatCardBluePrint';

function DashboardLayout({ stats }) {
  return (
    <Grid templateColumns='repeat(4, 1fr)' gap={6}>
      &lt;GridItem&gt;
        <TopStatCard
          stat={stats.employees}
          meta={{
            id: 'employees',
            statFor: 'Total Employees',
            linkTo: '/employees',
          }}
        />
      </GridItem>

      &lt;GridItem&gt;
        <TopStatCard
          stat={stats.leaves}
          meta={{
            id: 'leaves',
            statFor: 'Pending Leaves',
            linkTo: '/leaves',
          }}
        />
      </GridItem>

      <GridItem colSpan={2}>
        <StatCardBluePrint
          header={<StatCardHeader heading='Recent Activity' />}
          body={&lt;StatCardBody&gt;Activity content</StatCardBody>}
        />
      </GridItem>
    </Grid>
  );
}

Status with Timeline

import StatusFormatter from 'components/Status/StatusFormatter';
import WPDotTimeline from 'components/Timeline/WpDotTimeline';
import { VStack } from '@chakra-ui/react';

function RequestProgress({ request }) {
  const timelineOptions = request.history.map(event => ({
    title: event.action,
    display: `${event.user} - ${event.date}`,
  }));

  return (
    <VStack spacing={4} align='stretch'>
      <StatusFormatter status={request.currentStatus} showTooltip />

      <WPDotTimeline options={timelineOptions} />
    </VStack>
  );
}

Avatar with Status

import AvatarLabel from 'components/Avatar/AvatarLabel';
import StatusFormatter from 'components/Status/StatusFormatter';
import { HStack } from '@chakra-ui/react';

function EmployeeListItem({ employee }) {
  return (
    <HStack justify='space-between' p={4}>
      <AvatarLabel
        name={employee.name}
        src={employee.avatar}
        label={employee.name}
        labelDesc={employee.department}
      />

      <StatusFormatter status={employee.status} showTooltip />
    </HStack>
  );
}

Styling and Theming

Custom Status Colors

import StatusFormatter from 'components/Status/StatusFormatter';

// Define custom status styles
const customStatusStyles = {
  urgent: {
    backgroundColor: 'red.100',
    color: 'red.800',
    borderColor: 'red.300',
  },
  normal: {
    backgroundColor: 'blue.100',
    color: 'blue.800',
    borderColor: 'blue.300',
  },
};

function CustomStatusDisplay({ status }) {
  return <StatusFormatter status={status} sx={customStatusStyles[status]} />;
}

Timeline Styling

import WPDotTimeline from 'components/Timeline/WpDotTimeline';
import { Box } from '@chakra-ui/react';

function StyledTimeline({ options }) {
  return (
    <Box
      bg='gray.50'
      p={6}
      borderRadius='md'
      border='1px solid'
      borderColor='gray.200'
    >
      <WPDotTimeline options={options} spacing={6} />
    </Box>
  );
}

Accessibility Features

ARIA Labels: All components include proper ARIA labeling
Keyboard Navigation: Interactive components support keyboard navigation
Screen Reader Support: Status changes and updates are announced
Color Contrast: Status indicators meet WCAG contrast requirements
Focus Management: Proper focus indicators for interactive elements

Performance Optimization

Memoized Components

import { memo } from 'react';
import TopStatCard from 'components/Dashboard/TopStatCard';

const MemoizedTopStatCard = memo(TopStatCard);

function OptimizedDashboard({ stats }) {
  return (
    <>
      {stats.map(stat => (
        <MemoizedTopStatCard key={stat.id} stat={stat} meta={stat.meta} />
      ))}
    </>
  );
}

Lazy Loading

import { lazy, Suspense } from 'react';
import { Skeleton } from '@chakra-ui/react';

const LazyChart = lazy(() => import('components/Charts/SalesChart'));

function DashboardWithLazyChart() {
  return (
    <Suspense fallback={<Skeleton height='200px' />}>
      <LazyChart />
    </Suspense>
  );
}

Best Practices

Consistent Status Mapping: Use standardized status values across the application
Loading States: Always provide loading states for dynamic content
Error Handling: Include proper error states and fallbacks
Accessibility: Ensure all components are accessible to screen readers
Performance: Use memoization and lazy loading for heavy components
Responsive Design: Ensure components work well on all screen sizes
Testing: Include comprehensive tests for component states and interactions

Tables - Data display and table components
Form Components - Form and input components
Interactive Components - Drawers, tabs, and interactive elements
Utility Components - Loading, error, and utility components

Component Overview​

Core Components​

Dashboard Components​

TopStatCard​

Component Location​

Props​

Usage Examples​

Basic Stat Card​

Loading State​

Percentage Display​

StatCardBluePrint​

Component Location​

Usage Examples​

Custom Dashboard Card​

Card Without Footer​

Status Components​

StatusFormatter​

Component Location​

Props​

Usage Examples​

Basic Status Badge​

Multiple Status Displays​

ApprovalWorkflowStatus​

Component Location​

Props​

Usage Examples​

Leave Approval Workflow​

Expense Approval Workflow​

WpBaseStatusFormatter​

Component Location​

Props​

Usage Examples​

Custom Status Mapping​

Status with Custom Icons​

PolicyViolationBadge​

Component Location​

Usage Examples​

Policy Violation Display​

Timeline Components​

WPDotTimeline​

Component Location​

Props​

Option Structure​

Usage Examples​

Project Timeline​

Timeline with Custom Icons​

WPCheckedTimeline​

Component Location​

Usage Examples​

Onboarding Progress​

Approval Process​

Chart Components​

NotDataFound​

Component Location​

Props​

Usage Examples​

Chart Empty State​

Dashboard Widget Empty State​

Avatar Components​

AvatarLabel​

Component Location​

Props​

Usage Examples​

Employee Avatar​

User Profile Display​

AvatarGroupDropdown​

Component Location​

Props​

User Object Structure​

Usage Examples​

Team Members Display​

Project Assignees​

SelectedUserAvatar​

Component Location​

Props​

Usage Examples​

Selected Team Members​

Form User Selection​

WPCountryCell​

Component Location​

Component Overview

Core Components

Dashboard Components

TopStatCard

Component Location

Props

Usage Examples

Basic Stat Card

Loading State

Percentage Display

StatCardBluePrint

Component Location

Usage Examples

Custom Dashboard Card

Card Without Footer

Status Components

StatusFormatter

Component Location

Props

Usage Examples

Basic Status Badge

Multiple Status Displays

ApprovalWorkflowStatus

Component Location

Props

Usage Examples

Leave Approval Workflow

Expense Approval Workflow

WpBaseStatusFormatter

Component Location

Props

Usage Examples

Custom Status Mapping

Status with Custom Icons

PolicyViolationBadge

Component Location

Usage Examples

Policy Violation Display

Timeline Components

WPDotTimeline

Component Location

Props

Option Structure

Usage Examples

Project Timeline

Timeline with Custom Icons

WPCheckedTimeline

Component Location

Usage Examples

Onboarding Progress

Approval Process

Chart Components

NotDataFound

Component Location

Props

Usage Examples

Chart Empty State

Dashboard Widget Empty State

Avatar Components

AvatarLabel

Component Location

Props

Usage Examples

Employee Avatar

User Profile Display

AvatarGroupDropdown

Component Location

Props

User Object Structure

Usage Examples

Team Members Display

Project Assignees

SelectedUserAvatar

Component Location

Props

Usage Examples

Selected Team Members

Form User Selection

WPCountryCell

Component Location