From da27f4c5816f9ccf27b58b22ae6ef79ac1647984 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 18 Feb 2026 13:15:06 +0700
Subject: [PATCH] refactor(FE): Refactor status badge logic in
 ProjectFlockClosingForm

---
 .../closing/ProjectFlockClosingForm.tsx       | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx b/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
index da54e4d0..860a426a 100644
--- a/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
+++ b/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
@@ -24,6 +24,26 @@ import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
 import { ApprovalApi } from '@/services/api/approval';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { Color } from '@/types/theme';
+
+const getExpenseStatusBadgeColor = (step: number): Color => {
+  switch (step) {
+    case 1:
+      return 'neutral';
+    case 2:
+      return 'info';
+    case 3:
+      return 'warning';
+    case 4:
+      return 'error';
+    case 5:
+      return 'warning';
+    case 6:
+      return 'success';
+    default:
+      return 'neutral';
+  }
+};
 
 const ProjectFlockClosingForm = ({
   projectFlock,
@@ -217,21 +237,15 @@ const ProjectFlockClosingForm = ({
                 accessorKey: 'status',
                 cell(props) {
                   return (
-                    <Badge
+                    <StatusBadge
+                      color={getExpenseStatusBadgeColor(
+                        props.row.original.step
+                      )}
+                      text={formatTitleCase(props.row.original.step_name)}
                       className={{
-                        badge: 'rounded-lg',
+                        badge: 'whitespace-nowrap max-w-max w-fit',
                       }}
-                      variant='soft'
-                      color={
-                        props.row.original.step === 6
-                          ? 'success'
-                          : props.row.original.step === 1
-                            ? 'neutral'
-                            : 'warning'
-                      }
-                    >
-                      {formatTitleCase(props.row.original.step_name)}
-                    </Badge>
+                    />
                   );
                 },
               },