From fc76b442794571d850b66425fb63010536622aaf Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 17 Nov 2025 14:00:16 +0700
Subject: [PATCH] feat(FE-195,196): create RealizationStatusBadge component

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

diff --git a/src/components/pages/expense/RealizationStatusBadge.tsx b/src/components/pages/expense/RealizationStatusBadge.tsx
new file mode 100644
index 00000000..e042c022
--- /dev/null
+++ b/src/components/pages/expense/RealizationStatusBadge.tsx
@@ -0,0 +1,39 @@
+import PillBadge from '@/components/PillBadge';
+
+import { BaseApproval } from '@/types/api/api-general';
+
+interface RealizationStatusBadgeProps {
+  approval?: BaseApproval;
+}
+
+const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
+  const isLatestApprovalRejected = approval?.action === 'REJECTED';
+
+  const isExpenseRealized = approval?.step_number && approval.step_number >= 4;
+
+  const realizationStatus = isExpenseRealized
+    ? 'Sudah Realisasi'
+    : 'Belum Realisasi';
+
+  let realizationStatusPillBadgeColor:
+    | 'yellow'
+    | 'green'
+    | 'gray'
+    | 'red'
+    | 'purple'
+    | 'blue' = isExpenseRealized ? 'green' : 'yellow';
+
+  if (isLatestApprovalRejected) {
+    realizationStatusPillBadgeColor = 'red';
+  }
+
+  return (
+    <PillBadge
+      content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
+      color={realizationStatusPillBadgeColor}
+      className='text-xs'
+    />
+  );
+};
+
+export default RealizationStatusBadge;