From 608cf4cbe7d0e9164cca4762b952c92bef0f029a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 19 Feb 2026 14:41:21 +0700
Subject: [PATCH] feat(FE): Add StatusBadge to display project status in
 ClosingsTable

---
 .../pages/closing/ClosingsTable.tsx           | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/pages/closing/ClosingsTable.tsx b/src/components/pages/closing/ClosingsTable.tsx
index 22b4dd52..12114110 100644
--- a/src/components/pages/closing/ClosingsTable.tsx
+++ b/src/components/pages/closing/ClosingsTable.tsx
@@ -13,6 +13,7 @@ import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
 import RequirePermission from '@/components/helper/RequirePermission';
+import StatusBadge from '@/components/helper/StatusBadge';
 import Modal, { useModal } from '@/components/Modal';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useFormik } from 'formik';
@@ -24,6 +25,7 @@ import { LocationApi } from '@/services/api/master-data';
 import { Location } from '@/types/api/master-data/location';
 import { ClosingApi } from '@/services/api/closing';
 import { Closing } from '@/types/api/closing';
+import { Color } from '@/types/theme';
 import {
   ClosingFilterSchema,
   ClosingFilterType,
@@ -91,6 +93,21 @@ const ClosingsTable = () => {
   // ===== ROUTER =====
   const router = useRouter();
 
+  // ===== STATUS BADGE COLOR HELPER =====
+  const getProjectStatusBadgeColor = (status: string): Color => {
+    const normalizedValue = status.toLowerCase();
+
+    if (normalizedValue === 'aktif') {
+      return 'success';
+    }
+
+    if (normalizedValue === 'pengajuan') {
+      return 'neutral';
+    }
+
+    return 'neutral';
+  };
+
   // ===== FILTER MODAL STATE =====
   const filterModal = useModal();
 
@@ -195,6 +212,19 @@ const ClosingsTable = () => {
     {
       accessorKey: 'project_status',
       header: 'Status',
+      cell: (props) => {
+        const status = props.row.original.project_status;
+        const badgeColor = getProjectStatusBadgeColor(status);
+        return (
+          <StatusBadge
+            color={badgeColor}
+            text={status}
+            className={{
+              badge: 'whitespace-nowrap',
+            }}
+          />
+        );
+      },
     },
     {
       header: 'Aksi',