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 ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
export type ApprovalStepLog = { export type ApprovalStepLog = {
action: string;
action_by?: string; action_by?: string;
date?: string; date?: string;
notes?: string | null; notes?: string | null;
@@ -65,28 +66,55 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
position='right' position='right'
className={{ className={{
wrapper: 'md:tooltip-bottom', wrapper: 'md:tooltip-bottom',
content: 'p-0 rounded overflow-hidden',
}} }}
content={ content={
<> <>
{approval.logs && approval.logs.length > 0 && ( {approval.logs && approval.logs.length > 0 && (
<div className='flex flex-col gap-2'> <div className='flex flex-col gap-0'>
{approval.logs?.map((approvalLog, logIdx) => ( {approval.logs?.map((approvalLog, logIdx) => {
<div const action =
key={logIdx} approvalLog.action === 'CREATED'
className='flex flex-col text-base text-start' ? 'Dibuat'
> : approvalLog.action === 'UPDATED'
{approvalLog.date && ( ? 'Diperbarui'
<span> : approvalLog.action === 'APPROVED'
{formatDate( ? 'Disetujui'
approvalLog.date, : approvalLog.action === 'REJECTED'
'YYYY-MM-DD, HH:mm:ss' ? 'Ditolak'
)} : '-';
</span>
)} return (
<span>Oleh: {approvalLog.action_by ?? '-'}</span> <div
<span>Catatan: {approvalLog.notes ?? '-'}</span> key={logIdx}
</div> 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> </div>
)} )}
</> </>
@@ -130,6 +158,8 @@ export const formatGroupedApprovalsToApprovalSteps = (
const lastStepNumber = const lastStepNumber =
groupedApprovals[groupedApprovals.length - 1]?.step_number; groupedApprovals[groupedApprovals.length - 1]?.step_number;
const isLatestApprovalRejected = latestApproval.action === 'REJECTED';
if (!approvalGroup && currentStepNumber <= lastStepNumber) { if (!approvalGroup && currentStepNumber <= lastStepNumber) {
throw new Error( throw new Error(
`Approval dengan ${approvalLineItem.step_name} tidak ditemukan!` `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
@@ -158,6 +188,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
if (approvalGroup.approvals) { if (approvalGroup.approvals) {
switch (approvalGroup?.approvals[0]?.action) { switch (approvalGroup?.approvals[0]?.action) {
case 'CREATED': case 'CREATED':
case 'UPDATED':
case 'APPROVED': case 'APPROVED':
approvalStatus = 'APPROVED'; approvalStatus = 'APPROVED';
break; break;
@@ -171,7 +202,10 @@ export const formatGroupedApprovalsToApprovalSteps = (
break; break;
} }
} }
} else if (approvalGroup.step_number === latestApproval.step_number + 1) { } else if (
approvalGroup.step_number === latestApproval.step_number + 1 &&
!isLatestApprovalRejected
) {
approvalStatus = 'WAITING'; approvalStatus = 'WAITING';
} else { } else {
approvalStatus = 'IDLE'; approvalStatus = 'IDLE';
@@ -182,6 +216,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
action_by: approval.action_by.name, action_by: approval.action_by.name,
date: approval.action_at, date: approval.action_at,
notes: approval.notes, notes: approval.notes,
action: approval.action,
})) }))
: []; : [];
@@ -192,6 +227,13 @@ export const formatGroupedApprovalsToApprovalSteps = (
}; };
}); });
console.log({
approvalLine,
groupedApprovals,
latestApproval,
formattedApprovalSteps,
});
return formattedApprovalSteps; return formattedApprovalSteps;
}; };