Skip to main content

Options

Collection of predefined options and configuration choices used in dropdowns, forms, and UI components throughout the WorkPayCore frontend application.

Overview​

The options constants provide standardized choices for various form inputs, ensuring consistency across the application and supporting internationalization and localization requirements.

Time & Date Options​

months​

Array of month names in lowercase for date-related operations.

export const months = [
  'january',
  'february',
  'march',
  'april',
  'may',
  'june',
  'july',
  'august',
  'september',
  'october',
  'november',
  'december',
];

Use Cases:

  • Date picker month selection
  • Report filtering by month
  • Payroll period definitions

daysOfTheWeek​

Array of weekday options for scheduling and time management.

export const daysOfTheWeek = [
  { value: 'Sunday', label: 'Sunday' },
  { value: 'Monday', label: 'Monday' },
  { value: 'Tuesday', label: 'Tuesday' },
  { value: 'Wednesday', label: 'Wednesday' },
  { value: 'Thursday', label: 'Thursday' },
  { value: 'Friday', label: 'Friday' },
  { value: 'Saturday', label: 'Saturday' },
];

Use Cases:

  • Work schedule configuration
  • Leave policy settings
  • Business hours setup

CompanyBusinessHours​

Detailed configuration object for company business hours across all days of the week.

export const CompanyBusinessHours = [
  {
    label: 'Monday',
    value: 'monday',
    opening: 'monday_opening_time',
    closing: 'monday_closing_time',
    isHalf: 'monday_is_half_day',
  },
  // ... similar objects for each day
];

Properties:

  • label: Display name for the day
  • value: Programmatic value for the day
  • opening: Field name for opening time
  • closing: Field name for closing time
  • isHalf: Field name for half-day flag

Employee Demographics​

ages​

Generational categories for employee demographics and analytics.

export const ages = [
  'Gen Z',
  'Millennials',
  'Gen X',
  'Boomers II',
  'Boomers I',
  'Unknown',
];

nationalities​

Supported nationalities for employee records.

export const nationalities = [
  { value: 'Burundian', label: 'Burundian' },
  { value: 'Ethiopian', label: 'Ethiopian' },
  { value: 'Kenyan', label: 'Kenyan' },
  { value: 'Rwandese', label: 'Rwandese' },
  { value: 'South Sudanese', label: 'South Sudanese' },
  { value: 'Tanzanian', label: 'Tanzanian' },
];

maritalStatus​

Primary marital status options for employee profiles.

export const maritalStatus = [
  { value: 'SINGLE', label: 'Single' },
  { value: 'MARRIED', label: 'Married' },
  { value: 'DIVORCED', label: 'Divorced' },
  { value: 'WIDOW', label: 'Widow' },
  { value: 'WIDOWER', label: 'Widower' },
];

maritalStatus2​

Extended marital status options for comprehensive employee records.

export const maritalStatus2 = [
  { value: 'SINGLE', label: 'SINGLE' },
  { value: 'MARRIED', label: 'MARRIED' },
  { value: 'SEPARATED', label: 'SEPARATED' },
  { value: 'WIDOWED', label: 'WIDOWED' },
  { value: 'UNKNOWN', label: 'UNKNOWN' },
];

genderOptions​

Gender selection options for employee profiles.

export const genderOptions = [
  { value: 'MALE', label: 'Male' },
  { value: 'FEMALE', label: 'Female' },
  { value: 'UNKNOWN', label: 'Other' },
];

genderSelect​

Gender options including "Both" for filtering and reporting.

export const genderSelect = [
  { value: 'MALE', label: 'Male' },
  { value: 'FEMALE', label: 'Female' },
  { value: 'BOTH', label: 'Both' },
];

educationLevel​

Educational qualification options for employee records.

export const educationLevel = [
  { value: 'CERTIFICATE', label: 'Certificate' },
  { value: 'CPA', label: 'CPA' },
  { value: 'DIPLOMA', label: 'Diploma' },
  { value: 'DEGREE', label: 'Degree' },
  { value: 'MASTERS', label: 'Masters' },
  { value: 'DOCTORATE', label: 'Doctorate' },
  { value: 'PROFESSOR', label: 'Professor' },
];

Employment & Payroll​

employementTypes​

Employment classification options for contract management.

export const employementTypes = [
  { value: 'PERMANENT', label: 'Permanent' },
  { value: 'CONTRACT', label: 'Contract' },
  { value: 'CASUAL', label: 'Casual' },
  { value: 'CONSULTANT', label: 'Consultant' },
  { value: 'COMMISSION', label: 'Commission' },
  { value: 'INTERNSHIP', label: 'Internship' },
];

paymentFrequencies​

Payroll frequency options for salary disbursement.

export const paymentFrequencies = [
  { value: 'MONTHLY', label: 'Monthly' },
  { value: 'BI-WEEKLY', label: 'Bi-Weekly' },
  { value: 'WEEKLY', label: 'Weekly' },
  { value: 'DAILY', label: 'Daily' },
];

employeeRatingOptions​

Performance rating categories for employee evaluations.

export const employeeRatingOptions = [
  { value: 'excellent', label: 'Excellent' },
  { value: 'good', label: 'Good' },
  { value: 'fair', label: 'Fair' },
  { value: 'poor', label: 'Poor' },
  { value: 'non_performer', label: 'Non Performer' },
];

employeeFieldsToEdit​

Editable employee profile fields for administrative management.

export const employeeFieldsToEdit = [
  { value: 'employment_type', label: 'Employment Type' },
  { value: 'department', label: 'Department & Designation' },
  { value: 'payment_method', label: 'Payment Method' },
  { value: 'off_days', label: 'Off Days' },
  { value: 'payment_frequency', label: 'Payment Frequency' },
  { value: 'employment_date', label: 'Employment Date' },
  { value: 'gender', label: 'Gender' },
  { value: 'reports_to', label: 'Supervisor/Reports to' },
  { value: 'currency_id', label: 'Currency' },
  { value: 'identity_type', label: 'Identity Type' },
];

Compliance & Benefits​

payePaymentOptions​

PAYE (Pay As You Earn) tax compliance options.

export const payePaymentOptions = [
  { value: 'PAYE_KENYA', label: 'Yes' },
  { value: 'None', label: 'No' },
];

nssfAndNhifPaymentOptions​

NSSF (National Social Security Fund) and NHIF (National Health Insurance Fund) options.

export const nssfAndNhifPaymentOptions = [
  { value: 'Yes', label: 'Yes' },
  { value: 'No', label: 'No' },
];

Common Form Options​

yesNoOptions​

Standard yes/no selection for boolean choices.

export const yesNoOptions = [
  { value: 'YES', label: 'Yes' },
  { value: 'NO', label: 'No' },
];

valueTypes​

Value type selection for financial calculations.

export const valueTypes = [
  { value: 'AMOUNT', label: 'Amount' },
  { value: 'PERCENT', label: 'Percent' },
];

WorkingDays​

Working day calculation methods for payroll and attendance.

export const WorkingDays = [
  { value: 'WORKING_DAYS', label: 'Enter Number of Days' },
  { value: 'CALENDAR_DAYS', label: 'Select Days of the Week' },
];

Dynamic Option Functions​

percentageOptions(categories)​

Generates percentage-based options from category data.

export function percentageOptions(categories) {
  // Returns dynamically generated percentage options based on categories
}

Parameters:

  • categories (array): Category data to generate percentage options from

Returns:

  • Array of percentage-based options for category allocation

countryHealthInsuranceOptions(countryOfResidence)​

Generates health insurance options based on country of residence.

export function countryHealthInsuranceOptions(countryOfResidence) {
  // Returns country-specific health insurance options
}

Parameters:

  • countryOfResidence (string): Employee's country of residence

Returns:

  • Array of health insurance options specific to the country

countryPensionOptions(countryOfResidence)​

Generates pension scheme options based on country of residence.

export function countryPensionOptions(countryOfResidence) {
  // Returns country-specific pension options
}

countryTaxPinOptions(countryOfResidence)​

Generates tax PIN/identification options based on country.

export function countryTaxPinOptions(countryOfResidence) {
  // Returns country-specific tax identification options
}

Usage Examples​

Employee Form Setup​

import {
  genderOptions,
  maritalStatus,
  educationLevel,
  employementTypes,
} from '@/utils/constants/options';

const EmployeeForm = () => {
  return (
    <form>
      <Select name='gender' options={genderOptions} />
      <Select name='marital_status' options={maritalStatus} />
      <Select name='education' options={educationLevel} />
      <Select name='employment_type' options={employementTypes} />
    </form>
  );
};

Business Hours Configuration​

import { CompanyBusinessHours } from '@/utils/constants/options';

const BusinessHoursSetup = () => {
  return (
    <div>
      {CompanyBusinessHours.map(day => (
        <div key={day.value}>
          <h3>{day.label}</h3>
          <TimeInput name={day.opening} label='Opening Time' />
          <TimeInput name={day.closing} label='Closing Time' />
          <Checkbox name={day.isHalf} label='Half Day' />
        </div>
      ))}
    </div>
  );
};

Payroll Frequency Selection​

import { paymentFrequencies } from '@/utils/constants/options';

const PayrollSetup = ({ employee, onUpdate }) => {
  return (
    <Select
      name='payment_frequency'
      value={employee.payment_frequency}
      options={paymentFrequencies}
      onChange={frequency => onUpdate({ payment_frequency: frequency })}
      placeholder='Select payment frequency'
    />
  );
};

Dynamic Country-Based Options​

import {
  countryHealthInsuranceOptions,
  countryPensionOptions,
} from '@/utils/constants/options';

const CountrySpecificBenefits = ({ country }) => {
  const healthOptions = countryHealthInsuranceOptions(country);
  const pensionOptions = countryPensionOptions(country);

  return (
    <div>
      <Select name='health_insurance' options={healthOptions} />
      <Select name='pension_scheme' options={pensionOptions} />
    </div>
  );
};

Internationalization Support​

Multi-Language Options​

// Example of extending options for internationalization
const getLocalizedGenderOptions = locale => {
  const translations = {
    en: genderOptions,
    fr: [
      { value: 'MALE', label: 'Masculin' },
      { value: 'FEMALE', label: 'Féminin' },
      { value: 'UNKNOWN', label: 'Autre' },
    ],
    es: [
      { value: 'MALE', label: 'Masculino' },
      { value: 'FEMALE', label: 'Femenino' },
      { value: 'UNKNOWN', label: 'Otro' },
    ],
  };

  return translations[locale] || translations.en;
};

Validation Helpers​

Option Validation​

import { genderOptions, maritalStatus } from '@/utils/constants/options';

const validateEmployeeData = data => {
  const errors = {};

  // Validate gender
  const validGenders = genderOptions.map(option => option.value);
  if (!validGenders.includes(data.gender)) {
    errors.gender = 'Invalid gender selection';
  }

  // Validate marital status
  const validStatuses = maritalStatus.map(option => option.value);
  if (!validStatuses.includes(data.marital_status)) {
    errors.marital_status = 'Invalid marital status';
  }

  return {
    isValid: Object.keys(errors).length === 0,
    errors,
  };
};

Best Practices​

1. Consistent Value Formats​

  • Use UPPERCASE for standard values (e.g., 'MALE', 'FEMALE')
  • Use descriptive labels for user display
  • Maintain consistent naming conventions

2. Extensibility​

// Extend existing options for specific use cases
const extendedGenderOptions = [
  ...genderOptions,
  { value: 'PREFER_NOT_SAY', label: 'Prefer not to say' },
];

3. Type Safety​

// Create type-safe option types
type EmploymentType = (typeof employementTypes)[number]['value'];
type PaymentFrequency = (typeof paymentFrequencies)[number]['value'];

interface Employee {
  employment_type: EmploymentType;
  payment_frequency: PaymentFrequency;
}

TypeScript Definitions​

interface OptionItem {
  value: string;
  label: string;
}

interface BusinessHour {
  label: string;
  value: string;
  opening: string;
  closing: string;
  isHalf: string;
}

export const months: string[];
export const ages: string[];
export const nationalities: OptionItem[];
export const maritalStatus: OptionItem[];
export const maritalStatus2: OptionItem[];
export const genderOptions: OptionItem[];
export const genderSelect: OptionItem[];
export const educationLevel: OptionItem[];
export const daysOfTheWeek: OptionItem[];
export const CompanyBusinessHours: BusinessHour[];
export const yesNoOptions: OptionItem[];
export const valueTypes: OptionItem[];
export const employeeRatingOptions: OptionItem[];
export const employeeFieldsToEdit: OptionItem[];
export const payePaymentOptions: OptionItem[];
export const nssfAndNhifPaymentOptions: OptionItem[];
export const paymentFrequencies: OptionItem[];
export const employementTypes: OptionItem[];
export const WorkingDays: OptionItem[];

export function percentageOptions(categories: any[]): OptionItem[];
export function countryHealthInsuranceOptions(
  countryOfResidence: string,
): OptionItem[];
export function countryPensionOptions(countryOfResidence: string): OptionItem[];
export function countryTaxPinOptions(countryOfResidence: string): OptionItem[];

These option constants provide a consistent foundation for form inputs and user selections throughout the WorkPayCore frontend application, ensuring standardized data collection and improved user experience.