feat(FE): Add StatusBadge to display project status in ClosingsTable

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',