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>
   );
 };
 

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

@@ -1,10 +1,12 @@
 'use client';
 
 import Button from '@/components/Button';
+import Card from '@/components/Card';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import Table from '@/components/Table';
 import Badge from '@/components/Badge';
-import { cn, formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
+import StatusBadge from '@/components/helper/StatusBadge';
+import { formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import {
   ClosingExpense,
@@ -20,7 +22,6 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
-import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { ApprovalApi } from '@/services/api/approval';
 import RequirePermission from '@/components/helper/RequirePermission';
 
@@ -78,112 +79,113 @@ const ProjectFlockClosingForm = ({
     closeModal.closeModal();
   };
 
-  const errorStock = useMemo(() => {
-    return isResponseSuccess(closingData)
-      ? closingData?.data?.stock_remaining.every((stock) => stock.quantity > 0)
-      : true;
-  }, [closingData]);
+  // const errorStock = useMemo(() => {
+  //   return isResponseSuccess(closingData)
+  //     ? closingData?.data?.stock_remaining.every((stock) => stock.quantity > 0)
+  //     : true;
+  // }, [closingData]);
 
-  const errorExpense = useMemo(() => {
-    return isResponseSuccess(closingData)
-      ? closingData?.data?.expenses.every((expense) => expense.step < 5)
-      : true;
-  }, [closingData]);
+  // const errorExpense = useMemo(() => {
+  //   return isResponseSuccess(closingData)
+  //     ? closingData?.data?.expenses.every((expense) => expense.step < 5)
+  //     : true;
+  // }, [closingData]);
 
   const isCanCloseValid = true;
 
   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
-          leftIcon='mdi:arrow-left'
+          leftIcon='heroicons:chevron-left'
           leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
-          subtitle={`Close ${projectFlock.flock_name}`}
-        ></DrawerHeader>
+          leftIconClassName='hover:text-gray-400'
+          subtitle='Close Flock'
+          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-2xl font-semibold'>Informasi Kandang</h2>
+        <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='success'
-              className={{
-                badge: 'rounded-lg px-2',
-              }}
-            >
-              <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
-              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(projectFlockKandang.kandang?.capacity)} Ekor`}
-            </Badge>
+              text={` Kapasitas ${formatNumber(projectFlockKandang.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'>
+                  {projectFlock.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'>
+                  {projectFlock.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'>
+                  {projectFlockKandang.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(
+                    projectFlockKandang.chickins?.reduce(
+                      (total, chickin) => total + chickin.usage_qty,
+                      0
+                    ) ?? 0
+                  )}{' '}
+                  Ekor
+                </div>
+              </div>
             </div>
-            <div className='col-span-2'>{projectFlock.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'>{projectFlock.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'>
-              {projectFlockKandang.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(
-                projectFlockKandang.chickins?.reduce(
-                  (total, chickin) => total + chickin.usage_qty,
-                  0
-                ) ?? 0
-              )}{' '}
-              Ekor
-            </div>
-          </div>
+          </Card>
         </div>
 
         {/* Table Biaya */}
-        <div className='divider'></div>
-        <div className='px-4 pb-4'>
-          <h2 className='text-2xl font-semibold'>Biaya</h2>
+        <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'>
+            Biaya
+          </h4>
           <Table<ClosingExpense>
             data={
               isResponseSuccess(closingData) ? closingData.data?.expenses : []
@@ -192,6 +194,16 @@ const ProjectFlockClosingForm = ({
               {
                 header: 'PO Number',
                 accessorKey: 'po_number',
+                cell(props) {
+                  return props.row.original.po_number || '-';
+                },
+              },
+              {
+                header: 'Ref Number',
+                accessorKey: 'reference_number',
+                cell(props) {
+                  return props.row.original.reference_number || '-';
+                },
               },
               {
                 header: 'Total',
@@ -208,11 +220,11 @@ const ProjectFlockClosingForm = ({
                       }}
                       variant='soft'
                       color={
-                        props.row.original.step < 5
-                          ? props.row.original.step == 1
+                        props.row.original.step === 6
+                          ? 'success'
+                          : props.row.original.step === 1
                             ? 'neutral'
-                            : 'success'
-                          : 'error'
+                            : 'warning'
                       }
                     >
                       {formatTitleCase(props.row.original.step_name)}
@@ -222,13 +234,13 @@ const ProjectFlockClosingForm = ({
               },
             ]}
             className={{
-              containerClassName: cn('my-4'),
+              containerClassName: 'mb-0',
               tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
               tableClassName: 'font-inter w-full table-sm min-h-full!',
-              headerRowClassName: 'border-b border-b-gray-200',
+              headerRowClassName: 'border-b border-base-content/10',
               headerColumnClassName:
                 'px-3 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyRowClassName: 'border-b border-base-content/10',
               bodyColumnClassName:
                 'px-3 py-3 last:flex last:flex-row last:justify-end',
               paginationClassName: 'hidden',
@@ -242,9 +254,10 @@ const ProjectFlockClosingForm = ({
         </div>
 
         {/* Table Persediaan Gudang */}
-        <div className='divider'></div>
-        <div className='px-4 pb-4'>
-          <h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
+        <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'>
+            Persediaan Gudang
+          </h4>
           <Table<StockItem>
             data={
               isResponseSuccess(closingData)
@@ -270,13 +283,13 @@ const ProjectFlockClosingForm = ({
               },
             ]}
             className={{
-              containerClassName: cn('my-4'),
+              containerClassName: 'mb-0',
               tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
               tableClassName: 'font-inter w-full table-sm min-h-full!',
-              headerRowClassName: 'border-b border-b-gray-200',
+              headerRowClassName: 'border-b border-base-content/10',
               headerColumnClassName:
                 'px-3 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyRowClassName: 'border-b border-base-content/10',
               bodyColumnClassName:
                 'px-3 py-3 last:flex last:flex-row last:justify-end',
               paginationClassName: 'hidden',
@@ -289,10 +302,11 @@ const ProjectFlockClosingForm = ({
         )} */}
         </div>
 
-        <div className='p-4 mt-6'>
+        <div className='p-4'>
           <RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
             <Button
               className='w-full'
+              variant='outline'
               color='error'
               isLoading={isLoading}
               disabled={!isCanCloseValid}
@@ -322,7 +336,7 @@ const ProjectFlockClosingForm = ({
             onClick: confirmationModalCloseClickHandler,
           }}
         />
-      </section>
+      </div>
     </>
   );
 };