chore: adjust ApprovalSteps component

This commit is contained in:
ValdiANS
2025-11-25 10:47:34 +07:00
parent c3e4d4c630
commit 642f966985
+61 -19
View File
@@ -18,6 +18,7 @@ import { useCallback, useMemo } from 'react';
export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
export type ApprovalStepLog = {
action: string;
action_by?: string;
date?: string;
notes?: string | null;
@@ -65,28 +66,55 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
position='right'
className={{
wrapper: 'md:tooltip-bottom',
content: 'p-0 rounded overflow-hidden',
}}
content={
<>
{approval.logs && approval.logs.length > 0 && (
<div className='flex flex-col gap-2'>
{approval.logs?.map((approvalLog, logIdx) => (
<div
key={logIdx}
className='flex flex-col text-base text-start'
>
{approvalLog.date && (
<span>
{formatDate(
approvalLog.date,
'YYYY-MM-DD, HH:mm:ss'
)}
</span>
)}
<span>Oleh: {approvalLog.action_by ?? '-'}</span>
<span>Catatan: {approvalLog.notes ?? '-'}</span>
</div>
))}
<div className='flex flex-col gap-0'>
{approval.logs?.map((approvalLog, logIdx) => {
const action =
approvalLog.action === 'CREATED'
? 'Dibuat'
: approvalLog.action === 'UPDATED'
? 'Diperbarui'
: approvalLog.action === 'APPROVED'
? 'Disetujui'
: approvalLog.action === 'REJECTED'
? 'Ditolak'
: '-';
return (
<div
key={logIdx}
className={cn(
'p-2 flex flex-col text-base text-start',
{
'bg-success text-success-content':
approvalLog.action === 'APPROVED',
'bg-error text-error-content':
approvalLog.action === 'REJECTED',
'bg-info text-info-content':
approvalLog.action === 'CREATED',
'bg-warning text-warning-content':
approvalLog.action === 'UPDATED',
}
)}
>
{approvalLog.date && (
<span>
{formatDate(
approvalLog.date,
'YYYY-MM-DD, HH:mm:ss'
)}
</span>
)}
<span>Aksi: {action}</span>
<span>Oleh: {approvalLog.action_by ?? '-'}</span>
<span>Catatan: {approvalLog.notes ?? '-'}</span>
</div>
);
})}
</div>
)}
</>
@@ -130,6 +158,8 @@ export const formatGroupedApprovalsToApprovalSteps = (
const lastStepNumber =
groupedApprovals[groupedApprovals.length - 1]?.step_number;
const isLatestApprovalRejected = latestApproval.action === 'REJECTED';
if (!approvalGroup && currentStepNumber <= lastStepNumber) {
throw new Error(
`Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
@@ -158,6 +188,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
if (approvalGroup.approvals) {
switch (approvalGroup?.approvals[0]?.action) {
case 'CREATED':
case 'UPDATED':
case 'APPROVED':
approvalStatus = 'APPROVED';
break;
@@ -171,7 +202,10 @@ export const formatGroupedApprovalsToApprovalSteps = (
break;
}
}
} else if (approvalGroup.step_number === latestApproval.step_number + 1) {
} else if (
approvalGroup.step_number === latestApproval.step_number + 1 &&
!isLatestApprovalRejected
) {
approvalStatus = 'WAITING';
} else {
approvalStatus = 'IDLE';
@@ -182,6 +216,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
action_by: approval.action_by.name,
date: approval.action_at,
notes: approval.notes,
action: approval.action,
}))
: [];
@@ -192,6 +227,13 @@ export const formatGroupedApprovalsToApprovalSteps = (
};
});
console.log({
approvalLine,
groupedApprovals,
latestApproval,
formattedApprovalSteps,
});
return formattedApprovalSteps;
};