chore: adjust ProjectFlockKandangTable styling

src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx

@@ -2,6 +2,7 @@
 
 import Badge from '@/components/Badge';
 import Card from '@/components/Card';
+import StatusBadge from '@/components/helper/StatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
@@ -32,6 +33,14 @@ const ProjectFlockKandangTable = ({
   initialValues?: ProjectFlock;
   formType: 'add' | 'edit' | 'detail';
 }) => {
+  const availableKandang = listKandang.filter(
+    (kandang) => kandang.status == 'NON_ACTIVE'
+  ).length;
+
+  const unavailableKandang = listKandang.filter(
+    (kandang) => kandang.status != 'NON_ACTIVE'
+  ).length;
+
   // Fungsi untuk menangani perubahan checkbox
   const handleCheckboxChange = (kandang: Kandang, isChecked: boolean) => {
     // Hanya izinkan perubahan jika tidak dalam mode 'detail'
@@ -57,48 +66,30 @@ const ProjectFlockKandangTable = ({
       {listKandang.length > 0 ? (
         <>
           {/* ... Bagian Badge Status ... */}
-          <div className='flex flex-row mb-4'>
-            <Badge
-              variant='soft'
-              color='primary'
-              className={{
-                badge: 'rounded-lg px-2',
-              }}
-            >
-              <Icon icon='mdi:circle' width={12} height={12} />
-              Tersedia (
-              {
-                listKandang.filter((kandang) => kandang.status == 'NON_ACTIVE')
-                  .length
-              }
-              )
-            </Badge>
-            <div className='divider divider-horizontal mx-1'></div>
-            <Badge
-              variant='soft'
+          <div className='w-fit flex flex-row items-stretch gap-3 mb-3'>
+            <StatusBadge
+              color='info'
+              text={`Tersedia (${availableKandang})`}
+              className={{ badge: 'text-nowrap' }}
+            />
+
+            <div className='w-px border-none bg-base-content/10' />
+
+            <StatusBadge
               color='neutral'
-              className={{
-                badge: 'rounded-lg px-2',
-              }}
-            >
-              <Icon icon='mdi:circle' width={12} height={12} />
-              Tidak Tersedia (
-              {
-                listKandang.filter((kandang) => kandang.status != 'NON_ACTIVE')
-                  .length
-              }
-              )
-            </Badge>
+              text={`Tidak Tersedia (${unavailableKandang})`}
+              className={{ badge: 'text-nowrap' }}
+            />
           </div>
           {/* --- */}
           <Card
             variant='bordered'
             className={{
-              wrapper: 'w-full rounded-lg',
-              body: 'p-4',
+              wrapper: 'w-full rounded-xl border border-base-content/5',
+              body: 'p-0',
             }}
           >
-            <div className='flex flex-col gap-4 w-full'>
+            <div className='flex flex-col w-full'>
               {listKandang.map((kandang, index) => {
                 const kandangIdString =
                   kandang.id?.toString() ?? `temp-${index}`;
@@ -112,28 +103,36 @@ const ProjectFlockKandangTable = ({
                   formType == 'detail' || kandang.status != 'NON_ACTIVE';
 
                 return (
-                  <div key={index} className='flex flex-row justify-between'>
+                  <div
+                    key={index}
+                    className='w-full p-3 flex flex-row items-center justify-between'
+                  >
                     <CheckboxInput
                       name={`kandang-${kandang.id}`} // Nama unik untuk setiap checkbox
                       label={kandang.name}
                       checked={isSelected}
                       disabled={isDisabled}
+                      size='md'
                       onChange={(e) =>
                         handleCheckboxChange(kandang, e.currentTarget.checked)
                       }
-                    />
-                    <Badge
-                      variant='soft'
-                      color={
-                        kandang.status == 'NON_ACTIVE' ? 'primary' : 'neutral'
-                      }
-                      className={{
-                        badge: 'rounded-lg px-2',
+                      classNames={{
+                        inputWrapper: cn('gap-3 text-base-content/50', {
+                          'text-base-content/20': isDisabled,
+                        }),
+                        label: 'cursor-pointer',
+                        checkbox: cn({
+                          'bg-base-200 border border-base-content/10 opacity-100':
+                            isDisabled,
+                        }),
                       }}
-                    >
-                      <Icon icon='mdi:circle' width={12} height={12} />
-                      {kandang.status != 'NON_ACTIVE' && 'Tidak'} Tersedia
-                    </Badge>
+                    />
+
+                    <StatusBadge
+                      color={!isDisabled ? 'info' : 'neutral'}
+                      text={!isDisabled ? 'Tersedia' : 'Tidak Tersedia'}
+                      className={{ badge: 'w-fit' }}
+                    />
                   </div>
                 );
               })}