From dbe6ced6028e8a4567e18bebd332410a4689dddd Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 17 Nov 2025 13:58:37 +0700
Subject: [PATCH] feat(FE-195,196): create ExpenseStatusBadge component

---
 .../pages/expense/ExpenseStatusBadge.tsx      | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/pages/expense/ExpenseStatusBadge.tsx

diff --git a/src/components/pages/expense/ExpenseStatusBadge.tsx b/src/components/pages/expense/ExpenseStatusBadge.tsx
new file mode 100644
index 00000000..3a84f6bc
--- /dev/null
+++ b/src/components/pages/expense/ExpenseStatusBadge.tsx
@@ -0,0 +1,57 @@
+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;