refactor(FE): Refactor ProductionDataClosingTab to use Card component

This commit is contained in:
rstubryan
2026-02-19 12:02:04 +07:00
parent a0af934002
commit a231140bc0
2 changed files with 231 additions and 221 deletions
@@ -6,6 +6,7 @@ import { ClosingApi } from '@/services/api/closing';
import { isResponseSuccess } from '@/lib/api-helper'; import { isResponseSuccess } from '@/lib/api-helper';
import { formatNumber } from '@/lib/helper'; import { formatNumber } from '@/lib/helper';
import ProductionDataClosingSkeleton from '@/components/pages/closing/skeleton/ProductionDataClosingSkeleton'; import ProductionDataClosingSkeleton from '@/components/pages/closing/skeleton/ProductionDataClosingSkeleton';
import Card from '@/components/Card';
interface ProductionDataClosingTabProps { interface ProductionDataClosingTabProps {
projectFlockId: number; projectFlockId: number;
@@ -62,244 +63,257 @@ const ProductionDataClosingTab = ({
); );
return ( return (
<div className='w-full rounded-xl p-8 shadow-sm'> <div className='w-full pt-3'>
<h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2> <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'> {/* Sales Section */}
{/* Left Column */} <section>
<div className='space-y-10'> <h3 className='font-bold text-gray-700 mb-4 text-base'>
{/* Purchase Section */} Penjualan
<section> </h3>
<h3 className='font-bold text-gray-700 mb-4 text-base'> <div className='space-y-4'>
Pembelian {/* Chicken Sales */}
</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' />
<div className='space-y-1'> <div className='space-y-1'>
<DataRow <DataRow
label='Telur (Butir)' label='Penjualan (Ekor)'
value={formatNumber(sales.egg.egg_pieces)} value={formatNumber(sales.chicken.sales_population)}
unit='Butir' unit='Ekor'
/> />
<DataRow <DataRow
label='Telur (Kg)' label='Penjualan (Kg)'
value={formatNumber(sales.egg.egg_mass)} value={formatNumber(sales.chicken.sales_weight)}
unit='Kg' unit='Kg'
/> />
<DataRow <DataRow
label='Berat Telur Rata-Rata' label='Bobot Rata-Rata'
value={formatNumber(sales.egg.avg_egg_weight)} value={formatNumber(sales.chicken.avg_weight)}
unit='Kg' unit='Kg/Ekor'
/> />
<DataRow <DataRow
label='Harga Jual Telur Rata-Rata' label='Harga Jual Rata-Rata'
value={formatNumber(sales.egg.avg_selling_price)} value={formatNumber(sales.chicken.avg_selling_price)}
unit='Rupiah' unit='Rupiah'
/> />
</div> </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> </div>
</section>
</div>
{/* Divider Line (Absolute centered) */} {/* 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' /> <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
{/* Right Column */} {/* Right Column */}
<div className='space-y-10 flex flex-col h-full'> <div className='space-y-10 flex flex-col h-full'>
{/* Performance Section */} {/* Performance Section */}
<section> <section>
<h3 className='font-bold text-gray-700 mb-4 text-base'> <h3 className='font-bold text-gray-700 mb-4 text-base'>
Performance Performance
</h3> </h3>
<div className='space-y-1'> <div className='space-y-1'>
<DataRow <DataRow
label='Deplesi' label='Deplesi'
value={formatNumber(performance.depletion)} value={formatNumber(performance.depletion)}
unit='Ekor' unit='Ekor'
/> />
<DataRow <DataRow
label='Umur' label='Umur'
value={formatNumber(performance.age_day)} value={formatNumber(performance.age_day)}
unit='Hari' unit='Hari'
/> />
<DataRow <DataRow
label='Mortalitas Std' label='Mortalitas Std'
value={formatNumber(performance.mor_std)} value={formatNumber(performance.mor_std)}
unitClassName='hidden' unitClassName='hidden'
/> />
<DataRow <DataRow
label='Mortalitas Act' label='Mortalitas Act'
value={formatNumber(performance.mor_act)} value={formatNumber(performance.mor_act)}
unitClassName='hidden' unitClassName='hidden'
/> />
<DataRow <DataRow
label='DEFF Mortalitas' label='DEFF Mortalitas'
value={formatNumber(performance.mor_diff)} value={formatNumber(performance.mor_diff)}
unitClassName='hidden' unitClassName='hidden'
/> />
{/* <DataRow {/* <DataRow
label='AWG Std' label='AWG Std'
value={formatNumber(performance.awg_std)} value={formatNumber(performance.awg_std)}
unit='Gr/Hari' unit='Gr/Hari'
/> />
<DataRow <DataRow
label='AWG Act' label='AWG Act'
value={formatNumber(performance.awg_act)} value={formatNumber(performance.awg_act)}
unit='Gr/Hari' unit='Gr/Hari'
/> */} /> */}
<DataRow <DataRow
label='Feed Intake Std' label='Feed Intake Std'
value={formatNumber(performance.feed_intake_std)} value={formatNumber(performance.feed_intake_std)}
unitClassName='hidden' unitClassName='hidden'
/> />
<DataRow <DataRow
label='Feed Intake Act' label='Feed Intake Act'
value={formatNumber(performance.feed_intake)} value={formatNumber(performance.feed_intake)}
unitClassName='hidden' unitClassName='hidden'
/> />
<DataRow <DataRow
label='FCR Std' label='FCR Std'
value={formatNumber(performance.fcr_std)} value={formatNumber(performance.fcr_std)}
unitClassName='hidden' unitClassName='hidden'
/> />
<DataRow <DataRow
label='FCR Act' label='FCR Act'
value={formatNumber(performance.fcr_act)} value={formatNumber(performance.fcr_act)}
unitClassName='hidden' unitClassName='hidden'
/> />
<DataRow <DataRow
label='DEFF FCR' label='DEFF FCR'
value={formatNumber(performance.fcr_diff)} value={formatNumber(performance.fcr_diff)}
unitClassName='hidden' unitClassName='hidden'
/> />
{/* Laying Specific Fields */} {/* Laying Specific Fields */}
{performance.hen_day_act !== undefined && ( {performance.hen_day_act !== undefined && (
<> <>
<DataRow <DataRow
label='Hen Day Std' label='Hen Day Std'
value={formatNumber(performance.hen_day_std!)} value={formatNumber(performance.hen_day_std!)}
unit='%' unit='%'
/> />
<DataRow <DataRow
label='Hen Day Act' label='Hen Day Act'
value={formatNumber(performance.hen_day_act)} value={formatNumber(performance.hen_day_act)}
unit='%' unit='%'
/> />
</> </>
)} )}
{performance.egg_mass !== undefined && ( {performance.egg_mass !== undefined && (
<> <>
<DataRow <DataRow
label='Egg Mass Std' label='Egg Mass Std'
value={formatNumber(performance.egg_mass_std!)} value={formatNumber(performance.egg_mass_std!)}
unit='Kg' unit='Kg'
/> />
<DataRow <DataRow
label='Egg Mass Act' label='Egg Mass Act'
value={formatNumber(performance.egg_mass)} value={formatNumber(performance.egg_mass)}
unit='Kg' unit='Kg'
/> />
</> </>
)} )}
{performance.egg_weight !== undefined && ( {performance.egg_weight !== undefined && (
<> <>
<DataRow <DataRow
label='Egg Weight Std' label='Egg Weight Std'
value={formatNumber(performance.egg_weight_std!)} value={formatNumber(performance.egg_weight_std!)}
unit='Gr' unit='Gr'
/> />
<DataRow <DataRow
label='Egg Weight Act' label='Egg Weight Act'
value={formatNumber(performance.egg_weight)} value={formatNumber(performance.egg_weight)}
unit='Gr' unit='Gr'
/> />
</> </>
)} )}
{performance.hen_housed_act !== undefined && ( {performance.hen_housed_act !== undefined && (
<> <>
<DataRow <DataRow
label='Hen Housed Std' label='Hen Housed Std'
value={formatNumber(performance.hen_housed_std!)} value={formatNumber(performance.hen_housed_std!)}
unit='%' unit='%'
/> />
<DataRow <DataRow
label='Hen Housed Act' label='Hen Housed Act'
value={formatNumber(performance.hen_housed_act)} value={formatNumber(performance.hen_housed_act)}
unit='%' unit='%'
/> />
</> </>
)} )}
</div>
</section>
</div> </div>
</section> </div>
</div> </div>
</div> </Card>
</div> </div>
); );
}; };
@@ -6,11 +6,7 @@ import Table from '@/components/Table';
import Card from '@/components/Card'; import Card from '@/components/Card';
import { formatCurrency, formatNumber, formatDate } from '@/lib/helper'; import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper'; import { isResponseSuccess } from '@/lib/api-helper';
import { import { BaseSales, ClosingSalesSummary } from '@/types/api/closing';
BaseClosingSales,
BaseSales,
ClosingSalesSummary,
} from '@/types/api/closing';
import { Product } from '@/types/api/master-data/product'; import { Product } from '@/types/api/master-data/product';
import { Customer } from '@/types/api/master-data/customer'; import { Customer } from '@/types/api/master-data/customer';
import { Kandang } from '@/types/api/master-data/kandang'; import { Kandang } from '@/types/api/master-data/kandang';