refactor(FE): Update table columns and improve UI for Project Flock

pages

src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -226,15 +226,37 @@ const ProjectFlockDetail = ({
 
         <div className='w-full p-4 flex flex-col gap-3 border-b border-base-content/10'>
           <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-            Kandang Aktif
+            Kandang
           </h4>
 
-          <div className='flex flex-row gap-2'>
-            <StatusBadge
-              color='info'
-              text={`Kandang Aktif (${projectFlock.kandangs?.length})`}
-              className={{ badge: 'w-fit text-nowrap' }}
-            />
+          <div className='flex flex-row flex-wrap gap-2 overflow-hidden'>
+            {projectFlock.kandangs?.filter(
+              (kandang) => kandang.status !== 'NON_ACTIVE'
+            ).length > 0 && (
+              <StatusBadge
+                color='success'
+                text={`Kandang Aktif (${
+                  projectFlock.kandangs?.filter(
+                    (kandang) => kandang.status !== 'NON_ACTIVE'
+                  ).length ?? 0
+                })`}
+                className={{ badge: 'w-fit' }}
+              />
+            )}
+
+            {projectFlock.kandangs?.filter(
+              (kandang) => kandang.status === 'NON_ACTIVE'
+            ).length > 0 && (
+              <StatusBadge
+                color='error'
+                text={`Kandang Non-Aktif (${
+                  projectFlock.kandangs?.filter(
+                    (kandang) => kandang.status === 'NON_ACTIVE'
+                  ).length ?? 0
+                })`}
+                className={{ badge: 'w-fit' }}
+              />
+            )}
 
             <StatusBadge
               color='neutral'
@@ -256,7 +278,7 @@ const ProjectFlockDetail = ({
                   />
                 </>
               }
-              className={{ badge: 'w-fit text-nowrap cursor-pointer' }}
+              className={{ badge: 'w-fit cursor-pointer' }}
             />
           </div>
 
@@ -368,10 +390,12 @@ const ProjectFlockDetail = ({
             </RadioGroup>
           </Card>
 
-          <ApprovalStepsV2
-            approvals={projectFlockKandangApproval}
-            steps={APPROVAL_WORKFLOWS.PROJECT_FLOCK_KANDANGS}
-          />
+          <div className='-mx-4'>
+            <ApprovalStepsV2
+              approvals={projectFlockKandangApproval}
+              steps={APPROVAL_WORKFLOWS.PROJECT_FLOCK_KANDANGS}
+            />
+          </div>
 
           <div className='grid grid-cols-4 gap-3'>
             <RequirePermission permissions='lti.production.chickins.detail'>