lti-web-client/src/components/pages/ApprovalSteps.tsx

import { Icon } from '@iconify/react';
import Steps from '@/components/steps/Steps';
import StepItem from '@/components/steps/StepItem';
import Tooltip from '@/components/Tooltip';

import { formatDate } from '@/lib/helper';
import { ApprovalsLine } from '@/types/api/api-general';

interface ApprovalStepsProps {
  approvals: ApprovalsLine;
}

const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
  return (
    <Steps direction='vertical' className='w-full md:steps-horizontal'>
      {approvals.map((approval, idx) => {
        const stepItemColor =
          approval.status === 'approved'
            ? 'success'
            : approval.status === 'rejected'
            ? 'error'
            : undefined;

        const stepItemIcon =
          approval.status === 'approved'
            ? 'material-symbols:check-rounded'
            : approval.status === 'rejected'
            ? 'material-symbols:close-rounded'
            : 'bxs:hourglass';

        return (
          <StepItem
            key={idx}
            color={stepItemColor}
            icon={
              approval.status !== 'waiting' && (
                <Tooltip
                  color={stepItemColor}
                  position='right'
                  className={{
                    wrapper: 'md:tooltip-bottom',
                  }}
                  content={
                    <div className='flex flex-col text-base'>
                      <span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
                      <span>Oleh: {approval.action_by}</span>
                      <span>Catatan: {approval.notes}</span>
                    </div>
                  }
                >
                  <Icon icon={stepItemIcon} width={24} height={24} />
                </Tooltip>
              )
            }
          >
            {approval.role}
          </StepItem>
        );
      })}
    </Steps>
  );
};

export default ApprovalSteps;