refactor(FE): Refactor status badge logic in ProjectFlockClosingForm

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>
+                    />
                   );
                 },
               },