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

pages

src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx

@@ -191,13 +191,6 @@ const ProjectFlockClosingForm = ({
               isResponseSuccess(closingData) ? closingData.data?.expenses : []
             }
             columns={[
-              {
-                header: 'PO Number',
-                accessorKey: 'po_number',
-                cell(props) {
-                  return props.row.original.po_number || '-';
-                },
-              },
               {
                 header: 'Ref Number',
                 accessorKey: 'reference_number',
@@ -205,9 +198,19 @@ const ProjectFlockClosingForm = ({
                   return props.row.original.reference_number || '-';
                 },
               },
+              {
+                header: 'PO Number',
+                accessorKey: 'po_number',
+                cell(props) {
+                  return props.row.original.po_number || '-';
+                },
+              },
               {
                 header: 'Total',
                 accessorKey: 'total',
+                cell(props) {
+                  return formatNumber(props.row.original.total);
+                },
               },
               {
                 header: 'Status',
@@ -276,6 +279,9 @@ const ProjectFlockClosingForm = ({
               {
                 header: 'Quantity',
                 accessorKey: 'quantity',
+                cell(props) {
+                  return formatNumber(props.row.original.quantity);
+                },
               },
               {
                 header: 'UOM',

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'>
+          <div className='flex flex-row flex-wrap gap-2 overflow-hidden'>
-            <StatusBadge
+            {projectFlock.kandangs?.filter(
-              color='info'
+              (kandang) => kandang.status !== 'NON_ACTIVE'
-              text={`Kandang Aktif (${projectFlock.kandangs?.length})`}
+            ).length > 0 && (
-              className={{ badge: 'w-fit text-nowrap' }}
+              <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
+          <div className='-mx-4'>
-            approvals={projectFlockKandangApproval}
+            <ApprovalStepsV2
-            steps={APPROVAL_WORKFLOWS.PROJECT_FLOCK_KANDANGS}
+              approvals={projectFlockKandangApproval}
-          />
+              steps={APPROVAL_WORKFLOWS.PROJECT_FLOCK_KANDANGS}
+            />
+          </div>
 
           <div className='grid grid-cols-4 gap-3'>
             <RequirePermission permissions='lti.production.chickins.detail'>