refactor(FE): Refactor ChickinForm and ProjectFlockClosingForm

components

src/components/pages/production/chickin/form/ChickinForm.tsx

@@ -16,6 +16,7 @@ import ChickinLogsView from '@/components/pages/production/chickin/form/tabs/Chi
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { Icon } from '@iconify/react';
 import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import { CHICKINS_APPROVAL_LINE } from '@/config/approval-line';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { BaseApproval } from '@/types/api/api-general';
@@ -53,135 +54,126 @@ const ChickinFormKandang = ({
   };
 
   return (
-    <section className='w-full h-full sm:w-[446px] overflow-y-auto'>
+    <div className='h-full w-full flex flex-col overflow-x-hidden overflow-y-auto'>
+      {/* Header */}
       <DrawerHeader
-        subtitle={`Chick In ${initialValues.kandang?.name ?? 'Kandang'}`}
-        leftIcon='mdi:arrow-left'
+        leftIcon='heroicons:chevron-left'
         leftIconHref={`/production/project-flock/detail?projectFlockId=${initialValues?.project_flock?.id}`}
+        leftIconClassName='hover:text-gray-400'
+        subtitle={`Chick In ${initialValues.kandang?.name ?? 'Kandang'}`}
+        className='sticky top-0 z-10 bg-base-100'
       />
 
-      {/* Informasi Kandang */}
-      <div className='divider'></div>
-      <div className='px-4 pb-4 flex flex-col gap-4'>
-        <h2 className='text-xl font-semibold'>Informasi Kandang</h2>
+      {approvals && !approvalsLoading && (
+        <ApprovalSteps approvals={approvals} />
+      )}
 
-        {approvals && !approvalsLoading && (
-          <div className='mb-3 text-sm'>
-            <ApprovalSteps approvals={approvals} />
-          </div>
-        )}
+      {/* Informasi Kandang */}
+      <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'>
+          Informasi Kandang
+        </h4>
 
         {/* Badge Row */}
         <div className='flex flex-row gap-2'>
-          <Badge
-            variant='soft'
+          <StatusBadge
             color='primary'
-            className={{
-              badge: 'rounded-lg px-2',
-            }}
-          >
-            <Icon icon='mdi:circle' width={12} height={12} color='primary' />{' '}
-            Aktif
-          </Badge>
+            text='Aktif'
+            className={{ badge: 'w-fit text-nowrap' }}
+          />
           <div className='divider divider-horizontal p-0 m-0'></div>
-          <Badge
+          <StatusBadge
             color='neutral'
-            variant='soft'
-            className={{ badge: 'rounded-lg px-2' }}
-          >
-            <Icon icon='mdi:home' width={12} height={12} />
-            {` Kapasitas ${formatNumber(initialValues.kandang.capacity)} Ekor`}
-          </Badge>
+            text={` Kapasitas ${formatNumber(initialValues.kandang.capacity)} Ekor`}
+            className={{ badge: 'w-fit text-nowrap' }}
+          />
         </div>
 
-        {/* Information Grid */}
-        <div className='grid grid-cols-3 gap-4'>
-          {/* Area */}
-          <div
-            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
-        relative 
-        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
-          >
-            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
+        {/* Information Card */}
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'w-full rounded-lg',
+            body: 'p-3',
+          }}
+        >
+          <div className='flex flex-col gap-6'>
+            <div className='flex flex-row justify-between items-center'>
+              <div className='flex flex-row gap-2 items-center text-gray-400'>
+                <Icon icon={'mdi:circle-slice-8'} width={14} height={14} />{' '}
+                <span>Area</span>
+              </div>
+              <div className='text-end text-gray-500'>
+                {initialValues.project_flock.area.name}
+              </div>
+            </div>
+            <div className='flex flex-row justify-between items-center'>
+              <div className='flex flex-row gap-2 items-center text-gray-400'>
+                <Icon icon={'mdi:circle-slice-8'} width={14} height={14} />{' '}
+                <span>Lokasi</span>
+              </div>
+              <div className='text-end text-gray-500'>
+                {initialValues.project_flock?.location.name}
+              </div>
+            </div>
+            <div className='flex flex-row justify-between items-center'>
+              <div className='flex flex-row gap-2 items-center text-gray-400'>
+                <Icon icon={'mdi:circle-slice-8'} width={14} height={14} />{' '}
+                <span>Kandang</span>
+              </div>
+              <div className='text-end text-gray-500'>
+                {initialValues.kandang.name}
+              </div>
+            </div>
+            <div className='flex flex-row justify-between items-center'>
+              <div className='flex flex-row gap-2 items-center text-gray-400'>
+                <Icon icon={'mdi:circle-slice-8'} width={14} height={14} />{' '}
+                <span>Jumlah DOC</span>
+              </div>
+              <div className='text-end text-gray-500'>
+                {formatNumber(
+                  initialValues.chickins?.reduce(
+                    (total, chickin) => total + chickin.usage_qty,
+                    0
+                  ) ?? 0
+                )}{' '}
+                Ekor
+              </div>
+            </div>
           </div>
-          <div className='col-span-2'>
-            {initialValues.project_flock.area.name}
-          </div>
-
-          {/* Lokasi */}
-          <div
-            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
-        relative 
-        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
-          >
-            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
-          </div>
-          <div className='col-span-2'>
-            {initialValues.project_flock?.location.name}
-          </div>
-
-          {/* Kandang */}
-          <div
-            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
-        relative 
-        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
-          >
-            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Kandang
-          </div>
-          <div className='col-span-2'>{initialValues.kandang.name}</div>
-
-          {/* Jumlah DOC */}
-          <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
-            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Jumlah DOC
-          </div>
-          <div className='col-span-2'>
-            {formatNumber(
-              initialValues.chickins?.reduce(
-                (total, chickin) => total + chickin.usage_qty,
-                0
-              ) ?? 0
-            )}{' '}
-            Ekor
-          </div>
-        </div>
+        </Card>
       </div>
 
-      <div className='divider'></div>
-      <div className='px-4 pb-4 flex flex-col gap-4'>
-        <h2 className='text-xl font-semibold'>Informasi Chick In</h2>
+      {/* Informasi Chick In */}
+      <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'>
+          Informasi Chick In
+        </h4>
         {/* Badge Row  */}
         <div className='flex flex-row gap-2'>
           <RequirePermission permissions='lti.production.chickins.create'>
-            <Badge
-              variant='soft'
-              color={'success'}
-              className={{
-                badge: 'rounded-lg px-2',
-              }}
-            >
-              <Icon
-                icon='mdi:circle'
-                width={12}
-                height={12}
-                color={'success'}
-              />{' '}
-              Perlu Chick In ({initialValues.available_qtys?.length ?? 0})
-            </Badge>
+            <StatusBadge
+              color='success'
+              text={`Perlu Chick In (${initialValues.available_qtys?.length ?? 0})`}
+              className={{ badge: 'w-fit text-nowrap' }}
+            />
             <div className='divider divider-horizontal p-0 m-0'></div>
           </RequirePermission>
-          <Badge
+          <StatusBadge
             color='neutral'
-            variant='soft'
-            className={{ badge: 'rounded-lg px-2 cursor-pointer' }}
             onClick={() => setOpenChickin(!openChickin)}
-          >
-            {`Riwayat Chick In ${formatNumber(initialValues.chickins?.length ?? 0)}`}
-            <Icon
-              icon={`mdi:${openChickin ? 'eye' : 'eye-off'}`}
-              width={12}
-              height={12}
-            />
-          </Badge>
+            text={
+              <>
+                {`Riwayat Chick In ${formatNumber(initialValues.chickins?.length ?? 0)}`}
+                <Icon
+                  icon={`mdi:${openChickin ? 'eye' : 'eye-off'}`}
+                  width={12}
+                  height={12}
+                />
+              </>
+            }
+            className={{ badge: 'w-fit text-nowrap cursor-pointer' }}
+          />
         </div>
       </div>
       {openChickin && (
@@ -198,7 +190,7 @@ const ChickinFormKandang = ({
           afterSubmit={afterSubmitFormChickin}
         />
       </RequirePermission>
-    </section>
+    </div>
   );
 };