refactor(FE): Refactor ChickinForm and ProjectFlockClosingForm

components

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