From a231140bc07ae081773f1887ef57923fd4c97bb6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 19 Feb 2026 12:02:04 +0700
Subject: [PATCH] refactor(FE): Refactor ProductionDataClosingTab to use Card
 component

---
 .../closing/tab/ProductionDataClosingTab.tsx  | 446 +++++++++---------
 .../pages/closing/table/SalesClosingTable.tsx |   6 +-
 2 files changed, 231 insertions(+), 221 deletions(-)

diff --git a/src/components/pages/closing/tab/ProductionDataClosingTab.tsx b/src/components/pages/closing/tab/ProductionDataClosingTab.tsx
index 3647dc1f..ae61be3b 100644
--- a/src/components/pages/closing/tab/ProductionDataClosingTab.tsx
+++ b/src/components/pages/closing/tab/ProductionDataClosingTab.tsx
@@ -6,6 +6,7 @@ import { ClosingApi } from '@/services/api/closing';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { formatNumber } from '@/lib/helper';
 import ProductionDataClosingSkeleton from '@/components/pages/closing/skeleton/ProductionDataClosingSkeleton';
+import Card from '@/components/Card';
 
 interface ProductionDataClosingTabProps {
   projectFlockId: number;
@@ -62,244 +63,257 @@ const ProductionDataClosingTab = ({
   );
 
   return (
-    <div className='w-full rounded-xl p-8 shadow-sm'>
-      <h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2>
+    <div className='w-full pt-3'>
+      <Card
+        className={{
+          wrapper: 'w-full rounded-lg',
+          body: 'p-0',
+          title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+          collapsible: 'rounded-lg',
+        }}
+        variant='bordered'
+        title='Data Produksi'
+        collapsible
+        defaultCollapsed={false}
+      >
+        <div className='p-6'>
+          <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
+            {/* Left Column */}
+            <div className='space-y-10'>
+              {/* Purchase Section */}
+              <section>
+                <h3 className='font-bold text-gray-700 mb-4 text-base'>
+                  Pembelian
+                </h3>
+                <div className='space-y-1'>
+                  <DataRow
+                    label='Populasi Awal'
+                    value={formatNumber(purchase.initial_population)}
+                    unit='Ekor'
+                  />
+                  <DataRow
+                    label='Claim Culling'
+                    value={formatNumber(purchase.claim_culling)}
+                    unit='Ekor'
+                  />
+                  <DataRow
+                    label='Populasi Akhir'
+                    value={formatNumber(purchase.final_population)}
+                    unit='Ekor'
+                  />
+                  <DataRow
+                    label='Pakan Masuk'
+                    value={formatNumber(purchase.feed_in)}
+                    unit='Kg'
+                  />
+                  <DataRow
+                    label='Pakan Terpakai'
+                    value={formatNumber(purchase.feed_used)}
+                    unit='Kg'
+                  />
+                </div>
+              </section>
 
-      <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
-        {/* Left Column */}
-        <div className='space-y-10'>
-          {/* Purchase Section */}
-          <section>
-            <h3 className='font-bold text-gray-700 mb-4 text-base'>
-              Pembelian
-            </h3>
-            <div className='space-y-1'>
-              <DataRow
-                label='Populasi Awal'
-                value={formatNumber(purchase.initial_population)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Claim Culling'
-                value={formatNumber(purchase.claim_culling)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Populasi Akhir'
-                value={formatNumber(purchase.final_population)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Pakan Masuk'
-                value={formatNumber(purchase.feed_in)}
-                unit='Kg'
-              />
-              <DataRow
-                label='Pakan Terpakai'
-                value={formatNumber(purchase.feed_used)}
-                unit='Kg'
-              />
-            </div>
-          </section>
-
-          {/* Sales Section */}
-          <section>
-            <h3 className='font-bold text-gray-700 mb-4 text-base'>
-              Penjualan
-            </h3>
-            <div className='space-y-4'>
-              {/* Chicken Sales */}
-              <div className='space-y-1'>
-                <DataRow
-                  label='Penjualan (Ekor)'
-                  value={formatNumber(sales.chicken.sales_population)}
-                  unit='Ekor'
-                />
-                <DataRow
-                  label='Penjualan (Kg)'
-                  value={formatNumber(sales.chicken.sales_weight)}
-                  unit='Kg'
-                />
-                <DataRow
-                  label='Bobot Rata-Rata'
-                  value={formatNumber(sales.chicken.avg_weight)}
-                  unit='Kg/Ekor'
-                />
-                <DataRow
-                  label='Harga Jual Rata-Rata'
-                  value={formatNumber(sales.chicken.avg_selling_price)}
-                  unit='Rupiah'
-                />
-              </div>
-
-              {/* Egg Sales (if available) */}
-              {sales.egg && (
-                <>
-                  <div className='h-px bg-gray-100 my-2' />
+              {/* Sales Section */}
+              <section>
+                <h3 className='font-bold text-gray-700 mb-4 text-base'>
+                  Penjualan
+                </h3>
+                <div className='space-y-4'>
+                  {/* Chicken Sales */}
                   <div className='space-y-1'>
                     <DataRow
-                      label='Telur (Butir)'
-                      value={formatNumber(sales.egg.egg_pieces)}
-                      unit='Butir'
+                      label='Penjualan (Ekor)'
+                      value={formatNumber(sales.chicken.sales_population)}
+                      unit='Ekor'
                     />
                     <DataRow
-                      label='Telur (Kg)'
-                      value={formatNumber(sales.egg.egg_mass)}
+                      label='Penjualan (Kg)'
+                      value={formatNumber(sales.chicken.sales_weight)}
                       unit='Kg'
                     />
                     <DataRow
-                      label='Berat Telur Rata-Rata'
-                      value={formatNumber(sales.egg.avg_egg_weight)}
-                      unit='Kg'
+                      label='Bobot Rata-Rata'
+                      value={formatNumber(sales.chicken.avg_weight)}
+                      unit='Kg/Ekor'
                     />
                     <DataRow
-                      label='Harga Jual Telur Rata-Rata'
-                      value={formatNumber(sales.egg.avg_selling_price)}
+                      label='Harga Jual Rata-Rata'
+                      value={formatNumber(sales.chicken.avg_selling_price)}
                       unit='Rupiah'
                     />
                   </div>
-                </>
-              )}
+
+                  {/* Egg Sales (if available) */}
+                  {sales.egg && (
+                    <>
+                      <div className='h-px bg-gray-100 my-2' />
+                      <div className='space-y-1'>
+                        <DataRow
+                          label='Telur (Butir)'
+                          value={formatNumber(sales.egg.egg_pieces)}
+                          unit='Butir'
+                        />
+                        <DataRow
+                          label='Telur (Kg)'
+                          value={formatNumber(sales.egg.egg_mass)}
+                          unit='Kg'
+                        />
+                        <DataRow
+                          label='Berat Telur Rata-Rata'
+                          value={formatNumber(sales.egg.avg_egg_weight)}
+                          unit='Kg'
+                        />
+                        <DataRow
+                          label='Harga Jual Telur Rata-Rata'
+                          value={formatNumber(sales.egg.avg_selling_price)}
+                          unit='Rupiah'
+                        />
+                      </div>
+                    </>
+                  )}
+                </div>
+              </section>
             </div>
-          </section>
-        </div>
 
-        {/* Divider Line (Absolute centered) */}
-        <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
+            {/* Divider Line (Absolute centered) */}
+            <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
 
-        {/* Right Column */}
-        <div className='space-y-10 flex flex-col h-full'>
-          {/* Performance Section */}
-          <section>
-            <h3 className='font-bold text-gray-700 mb-4 text-base'>
-              Performance
-            </h3>
-            <div className='space-y-1'>
-              <DataRow
-                label='Deplesi'
-                value={formatNumber(performance.depletion)}
-                unit='Ekor'
-              />
-              <DataRow
-                label='Umur'
-                value={formatNumber(performance.age_day)}
-                unit='Hari'
-              />
-              <DataRow
-                label='Mortalitas Std'
-                value={formatNumber(performance.mor_std)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='Mortalitas Act'
-                value={formatNumber(performance.mor_act)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='DEFF Mortalitas'
-                value={formatNumber(performance.mor_diff)}
-                unitClassName='hidden'
-              />
-              {/* <DataRow
-                label='AWG Std'
-                value={formatNumber(performance.awg_std)}
-                unit='Gr/Hari'
-              />
-              <DataRow
-                label='AWG Act'
-                value={formatNumber(performance.awg_act)}
-                unit='Gr/Hari'
-              /> */}
-              <DataRow
-                label='Feed Intake Std'
-                value={formatNumber(performance.feed_intake_std)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='Feed Intake Act'
-                value={formatNumber(performance.feed_intake)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='FCR Std'
-                value={formatNumber(performance.fcr_std)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='FCR Act'
-                value={formatNumber(performance.fcr_act)}
-                unitClassName='hidden'
-              />
-              <DataRow
-                label='DEFF FCR'
-                value={formatNumber(performance.fcr_diff)}
-                unitClassName='hidden'
-              />
+            {/* Right Column */}
+            <div className='space-y-10 flex flex-col h-full'>
+              {/* Performance Section */}
+              <section>
+                <h3 className='font-bold text-gray-700 mb-4 text-base'>
+                  Performance
+                </h3>
+                <div className='space-y-1'>
+                  <DataRow
+                    label='Deplesi'
+                    value={formatNumber(performance.depletion)}
+                    unit='Ekor'
+                  />
+                  <DataRow
+                    label='Umur'
+                    value={formatNumber(performance.age_day)}
+                    unit='Hari'
+                  />
+                  <DataRow
+                    label='Mortalitas Std'
+                    value={formatNumber(performance.mor_std)}
+                    unitClassName='hidden'
+                  />
+                  <DataRow
+                    label='Mortalitas Act'
+                    value={formatNumber(performance.mor_act)}
+                    unitClassName='hidden'
+                  />
+                  <DataRow
+                    label='DEFF Mortalitas'
+                    value={formatNumber(performance.mor_diff)}
+                    unitClassName='hidden'
+                  />
+                  {/* <DataRow
+                    label='AWG Std'
+                    value={formatNumber(performance.awg_std)}
+                    unit='Gr/Hari'
+                  />
+                  <DataRow
+                    label='AWG Act'
+                    value={formatNumber(performance.awg_act)}
+                    unit='Gr/Hari'
+                  /> */}
+                  <DataRow
+                    label='Feed Intake Std'
+                    value={formatNumber(performance.feed_intake_std)}
+                    unitClassName='hidden'
+                  />
+                  <DataRow
+                    label='Feed Intake Act'
+                    value={formatNumber(performance.feed_intake)}
+                    unitClassName='hidden'
+                  />
+                  <DataRow
+                    label='FCR Std'
+                    value={formatNumber(performance.fcr_std)}
+                    unitClassName='hidden'
+                  />
+                  <DataRow
+                    label='FCR Act'
+                    value={formatNumber(performance.fcr_act)}
+                    unitClassName='hidden'
+                  />
+                  <DataRow
+                    label='DEFF FCR'
+                    value={formatNumber(performance.fcr_diff)}
+                    unitClassName='hidden'
+                  />
 
-              {/* Laying Specific Fields */}
-              {performance.hen_day_act !== undefined && (
-                <>
-                  <DataRow
-                    label='Hen Day Std'
-                    value={formatNumber(performance.hen_day_std!)}
-                    unit='%'
-                  />
-                  <DataRow
-                    label='Hen Day Act'
-                    value={formatNumber(performance.hen_day_act)}
-                    unit='%'
-                  />
-                </>
-              )}
+                  {/* Laying Specific Fields */}
+                  {performance.hen_day_act !== undefined && (
+                    <>
+                      <DataRow
+                        label='Hen Day Std'
+                        value={formatNumber(performance.hen_day_std!)}
+                        unit='%'
+                      />
+                      <DataRow
+                        label='Hen Day Act'
+                        value={formatNumber(performance.hen_day_act)}
+                        unit='%'
+                      />
+                    </>
+                  )}
 
-              {performance.egg_mass !== undefined && (
-                <>
-                  <DataRow
-                    label='Egg Mass Std'
-                    value={formatNumber(performance.egg_mass_std!)}
-                    unit='Kg'
-                  />
-                  <DataRow
-                    label='Egg Mass Act'
-                    value={formatNumber(performance.egg_mass)}
-                    unit='Kg'
-                  />
-                </>
-              )}
+                  {performance.egg_mass !== undefined && (
+                    <>
+                      <DataRow
+                        label='Egg Mass Std'
+                        value={formatNumber(performance.egg_mass_std!)}
+                        unit='Kg'
+                      />
+                      <DataRow
+                        label='Egg Mass Act'
+                        value={formatNumber(performance.egg_mass)}
+                        unit='Kg'
+                      />
+                    </>
+                  )}
 
-              {performance.egg_weight !== undefined && (
-                <>
-                  <DataRow
-                    label='Egg Weight Std'
-                    value={formatNumber(performance.egg_weight_std!)}
-                    unit='Gr'
-                  />
-                  <DataRow
-                    label='Egg Weight Act'
-                    value={formatNumber(performance.egg_weight)}
-                    unit='Gr'
-                  />
-                </>
-              )}
+                  {performance.egg_weight !== undefined && (
+                    <>
+                      <DataRow
+                        label='Egg Weight Std'
+                        value={formatNumber(performance.egg_weight_std!)}
+                        unit='Gr'
+                      />
+                      <DataRow
+                        label='Egg Weight Act'
+                        value={formatNumber(performance.egg_weight)}
+                        unit='Gr'
+                      />
+                    </>
+                  )}
 
-              {performance.hen_housed_act !== undefined && (
-                <>
-                  <DataRow
-                    label='Hen Housed Std'
-                    value={formatNumber(performance.hen_housed_std!)}
-                    unit='%'
-                  />
-                  <DataRow
-                    label='Hen Housed Act'
-                    value={formatNumber(performance.hen_housed_act)}
-                    unit='%'
-                  />
-                </>
-              )}
+                  {performance.hen_housed_act !== undefined && (
+                    <>
+                      <DataRow
+                        label='Hen Housed Std'
+                        value={formatNumber(performance.hen_housed_std!)}
+                        unit='%'
+                      />
+                      <DataRow
+                        label='Hen Housed Act'
+                        value={formatNumber(performance.hen_housed_act)}
+                        unit='%'
+                      />
+                    </>
+                  )}
+                </div>
+              </section>
             </div>
-          </section>
+          </div>
         </div>
-      </div>
+      </Card>
     </div>
   );
 };
diff --git a/src/components/pages/closing/table/SalesClosingTable.tsx b/src/components/pages/closing/table/SalesClosingTable.tsx
index 0ebd5f2f..5105d965 100644
--- a/src/components/pages/closing/table/SalesClosingTable.tsx
+++ b/src/components/pages/closing/table/SalesClosingTable.tsx
@@ -6,11 +6,7 @@ import Table from '@/components/Table';
 import Card from '@/components/Card';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
-import {
-  BaseClosingSales,
-  BaseSales,
-  ClosingSalesSummary,
-} from '@/types/api/closing';
+import { BaseSales, ClosingSalesSummary } from '@/types/api/closing';
 import { Product } from '@/types/api/master-data/product';
 import { Customer } from '@/types/api/master-data/customer';
 import { Kandang } from '@/types/api/master-data/kandang';