From 6e2e9da1be85f4bf9c4f17942bfbc53f8ff71c1f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 6 Feb 2026 09:45:38 +0700
Subject: [PATCH] chore: adjust ProjectFlockClosingForm styling

---
 .../closing/ProjectFlockClosingForm.tsx       | 421 +++++++++---------
 1 file changed, 213 insertions(+), 208 deletions(-)

diff --git a/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx b/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
index ead77e30..aab21172 100644
--- a/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
+++ b/src/components/pages/production/project-flock/closing/ProjectFlockClosingForm.tsx
@@ -94,230 +94,235 @@ const ProjectFlockClosingForm = ({
 
   return (
     <>
-      <DrawerHeader
-        leftIcon='mdi:arrow-left'
-        leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
-        subtitle={`Close ${projectFlock.flock_name}`}
-      ></DrawerHeader>
+      <section className='w-full h-full sm:w-[446px] overflow-y-auto'>
+        <DrawerHeader
+          leftIcon='mdi:arrow-left'
+          leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
+          subtitle={`Close ${projectFlock.flock_name}`}
+        ></DrawerHeader>
 
-      {/* 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>
+        {/* 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>
 
-        {/* Badge Row */}
-        <div className='flex flex-row gap-2'>
-          <Badge
-            variant='soft'
-            color='success'
-            className={{
-              badge: 'rounded-lg px-2',
-            }}
-          >
-            <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
-            Aktif
-          </Badge>
-          <div className='divider divider-horizontal p-0 m-0'></div>
-          <Badge
-            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>
+          {/* Badge Row */}
+          <div className='flex flex-row gap-2'>
+            <Badge
+              variant='soft'
+              color='success'
+              className={{
+                badge: 'rounded-lg px-2',
+              }}
+            >
+              <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
+              Aktif
+            </Badge>
+            <div className='divider divider-horizontal p-0 m-0'></div>
+            <Badge
+              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>
+          </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
+            </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>
         </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
-          </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>
-      </div>
-
-      {/* Table Biaya */}
-      <div className='divider'></div>
-      <div className='px-4 pb-4'>
-        <h2 className='text-2xl font-semibold'>Biaya</h2>
-        <Table<ClosingExpense>
-          data={
-            isResponseSuccess(closingData) ? closingData.data?.expenses : []
-          }
-          columns={[
-            {
-              header: 'PO Number',
-              accessorKey: 'po_number',
-            },
-            {
-              header: 'Total',
-              accessorKey: 'total',
-            },
-            {
-              header: 'Status',
-              accessorKey: 'status',
-              cell(props) {
-                return (
-                  <Badge
-                    className={{
-                      badge: 'rounded-lg',
-                    }}
-                    variant='soft'
-                    color={
-                      props.row.original.step < 5
-                        ? props.row.original.step == 1
-                          ? 'neutral'
-                          : 'success'
-                        : 'error'
-                    }
-                  >
-                    {formatTitleCase(props.row.original.step_name)}
-                  </Badge>
-                );
+        {/* Table Biaya */}
+        <div className='divider'></div>
+        <div className='px-4 pb-4'>
+          <h2 className='text-2xl font-semibold'>Biaya</h2>
+          <Table<ClosingExpense>
+            data={
+              isResponseSuccess(closingData) ? closingData.data?.expenses : []
+            }
+            columns={[
+              {
+                header: 'PO Number',
+                accessorKey: 'po_number',
               },
-            },
-          ]}
-          className={{
-            containerClassName: cn('my-4'),
-            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',
-            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',
-            bodyColumnClassName:
-              'px-3 py-3 last:flex last:flex-row last:justify-end',
-            paginationClassName: 'hidden',
-          }}
-        />
-        {/* {errorExpense && (
+              {
+                header: 'Total',
+                accessorKey: 'total',
+              },
+              {
+                header: 'Status',
+                accessorKey: 'status',
+                cell(props) {
+                  return (
+                    <Badge
+                      className={{
+                        badge: 'rounded-lg',
+                      }}
+                      variant='soft'
+                      color={
+                        props.row.original.step < 5
+                          ? props.row.original.step == 1
+                            ? 'neutral'
+                            : 'success'
+                          : 'error'
+                      }
+                    >
+                      {formatTitleCase(props.row.original.step_name)}
+                    </Badge>
+                  );
+                },
+              },
+            ]}
+            className={{
+              containerClassName: cn('my-4'),
+              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',
+              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',
+              bodyColumnClassName:
+                'px-3 py-3 last:flex last:flex-row last:justify-end',
+              paginationClassName: 'hidden',
+            }}
+          />
+          {/* {errorExpense && (
           <div className='text-center text-error text-sm'>
             *Pastikan semua biaya sudah selesai sebelum melakukan closing.
           </div>
         )} */}
-      </div>
+        </div>
 
-      {/* Table Persediaan Gudang */}
-      <div className='divider'></div>
-      <div className='px-4 pb-4'>
-        <h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
-        <Table<StockItem>
-          data={
-            isResponseSuccess(closingData)
-              ? closingData.data?.stock_remaining
-              : []
-          }
-          columns={[
-            {
-              header: 'Product',
-              accessorKey: 'product_name',
-            },
-            {
-              header: 'Kategori',
-              accessorKey: 'product_category',
-            },
-            {
-              header: 'Quantity',
-              accessorKey: 'quantity',
-            },
-            {
-              header: 'UOM',
-              accessorKey: 'uom',
-            },
-          ]}
-          className={{
-            containerClassName: cn('my-4'),
-            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',
-            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',
-            bodyColumnClassName:
-              'px-3 py-3 last:flex last:flex-row last:justify-end',
-            paginationClassName: 'hidden',
-          }}
-        />
-        {/* {errorStock && (
+        {/* Table Persediaan Gudang */}
+        <div className='divider'></div>
+        <div className='px-4 pb-4'>
+          <h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
+          <Table<StockItem>
+            data={
+              isResponseSuccess(closingData)
+                ? closingData.data?.stock_remaining
+                : []
+            }
+            columns={[
+              {
+                header: 'Product',
+                accessorKey: 'product_name',
+              },
+              {
+                header: 'Kategori',
+                accessorKey: 'product_category',
+              },
+              {
+                header: 'Quantity',
+                accessorKey: 'quantity',
+              },
+              {
+                header: 'UOM',
+                accessorKey: 'uom',
+              },
+            ]}
+            className={{
+              containerClassName: cn('my-4'),
+              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',
+              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',
+              bodyColumnClassName:
+                'px-3 py-3 last:flex last:flex-row last:justify-end',
+              paginationClassName: 'hidden',
+            }}
+          />
+          {/* {errorStock && (
           <div className='text-center text-error text-sm'>
             *Masih ada sisa stock yang belum dihabiskan.
           </div>
         )} */}
-      </div>
+        </div>
 
-      <div className='p-4 mt-6'>
-        <RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
-          <Button
-            className='w-full'
-            color='error'
-            isLoading={isLoading}
-            disabled={!isCanCloseValid}
-            onClick={() => closeModal.openModal()}
-          >
-            <Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
-            {isCanClose ? 'Close' : 'Unclose'}
-          </Button>
-        </RequirePermission>
-      </div>
+        <div className='p-4 mt-6'>
+          <RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
+            <Button
+              className='w-full'
+              color='error'
+              isLoading={isLoading}
+              disabled={!isCanCloseValid}
+              onClick={() => closeModal.openModal()}
+            >
+              <Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
+              {isCanClose ? 'Close' : 'Unclose'}
+            </Button>
+          </RequirePermission>
+        </div>
 
-      <ConfirmationModal
-        ref={closeModal.ref}
-        type='error'
-        text={
-          isCanClose
-            ? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
-            : 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
-        }
-        secondaryButton={{
-          text: 'Tidak',
-        }}
-        primaryButton={{
-          text: 'Ya',
-          color: 'error',
-          isLoading: isClosingLoading,
-          onClick: confirmationModalCloseClickHandler,
-        }}
-      />
+        <ConfirmationModal
+          ref={closeModal.ref}
+          type='error'
+          text={
+            isCanClose
+              ? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
+              : 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
+          }
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isClosingLoading,
+            onClick: confirmationModalCloseClickHandler,
+          }}
+        />
+      </section>
     </>
   );
 };