lti-web-client/src/components/pages/expense/ExpenseStatusBadge.tsx

import PillBadge from '@/components/PillBadge';

import { BaseApproval } from '@/types/api/api-general';

interface ExpenseStatusBadgeProps {
  approval?: BaseApproval;
}

const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
  const isLatestApprovalRejected = approval?.action === 'REJECTED';

  const latestApprovalStepNumber = approval?.step_number;

  let expenseStatusPillBadgeColor:
    | 'yellow'
    | 'green'
    | 'gray'
    | 'red'
    | 'purple'
    | 'blue' = 'gray';

  switch (latestApprovalStepNumber) {
    case 1:
      expenseStatusPillBadgeColor = 'yellow';
      break;

    case 2:
      expenseStatusPillBadgeColor = 'purple';
      break;

    case 3:
      expenseStatusPillBadgeColor = 'blue';
      break;

    case 4:
      expenseStatusPillBadgeColor = 'red';
      break;

    case 5:
      expenseStatusPillBadgeColor = 'green';
      break;
  }

  if (isLatestApprovalRejected) {
    expenseStatusPillBadgeColor = 'red';
  }

  return (
    <PillBadge
      content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
      color={expenseStatusPillBadgeColor}
      className='text-xs'
    />
  );
};

export default ExpenseStatusBadge;