chore(FE-347): adjust UI based on updated ClosingProductionData type

This commit is contained in:
ValdiANS
2025-12-19 09:38:39 +07:00
parent 7cc616ff41
commit 5a21a3b44c
@@ -33,7 +33,7 @@ const ClosingProductionDataTabContent = ({
);
}
const { purchase, sales, performance, variance } = productionData.data;
const { purchase, sales, performance } = productionData.data;
// Helper for consistent row styling
const DataRow = ({
@@ -58,39 +58,6 @@ const ClosingProductionDataTabContent = ({
</div>
);
// Helper for rows with two values (e.g., Deplesi: Ekor & %)
const DoubleDataRow = ({
label,
value1,
unit1,
value2,
unit2,
value1ClassName = 'font-bold text-gray-800',
value2ClassName = 'font-bold text-blue-500',
}: {
label: string;
value1: string | number;
unit1: string;
value2: string | number;
unit2: string;
value1ClassName?: string;
value2ClassName?: string;
}) => (
<div className='flex justify-between items-center py-1'>
<span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
<div className='flex gap-2 w-1/2 justify-end items-center'>
<div className='flex gap-2 items-center min-w-[5rem] justify-end'>
<span className={value1ClassName}>{value1}</span>
<span className='text-gray-500 w-8 text-right'>{unit1}</span>
</div>
<div className='flex gap-2 items-center min-w-[4rem] justify-end ml-2'>
<span className={value2ClassName}>{value2}</span>
<span className='text-gray-500 w-4 text-right'>{unit2}</span>
</div>
</div>
</div>
);
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>
@@ -121,17 +88,17 @@ const ClosingProductionDataTabContent = ({
/>
<DataRow
label='Pakan Masuk'
value={formatNumber(purchase.feed_in_kg)}
value={formatNumber(purchase.feed_in)}
unit='Kg'
/>
<DataRow
label='Pakan Terpakai'
value={formatNumber(purchase.feed_used_kg)}
value={formatNumber(purchase.feed_used)}
unit='Kg'
/>
<DataRow
label='Pakan Terpakai per Ekor'
value={formatNumber(purchase.feed_used_per_head_kg)}
value={formatNumber(purchase.feed_used_per_head)}
unit='Kg'
/>
</div>
@@ -142,27 +109,61 @@ const ClosingProductionDataTabContent = ({
<h3 className='font-bold text-gray-700 mb-4 text-base'>
Penjualan
</h3>
<div className='space-y-1'>
<DataRow
label='Penjualan (Kg)'
value={formatNumber(sales.sales_kg)}
unit='Kg'
/>
<DataRow
label='Penjualan (Ekor)'
value={formatNumber(sales.sales_head)}
unit='Ekor'
/>
<DataRow
label='Bobot Rata-Rata'
value={formatNumber(sales.average_weight_kg)}
unit='Kg/Ekor'
/>
<DataRow
label='Harga Jual Rata-Rata'
value={formatNumber(sales.average_price_per_kg)}
unit='Rupiah'
/>
<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.average_weight)}
unit='Kg/Ekor'
/>
<DataRow
label='Harga Jual Rata-Rata'
value={formatNumber(
sales.chicken.chicken_average_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_kg)}
unit='Kg'
/>
<DataRow
label='Berat Telur Rata-Rata'
value={formatNumber(sales.egg.average_egg_weight_kg)}
unit='Kg'
/>
<DataRow
label='Harga Jual Telur Rata-Rata'
value={formatNumber(sales.egg.egg_average_selling_price)}
unit='Rupiah'
/>
</div>
</>
)}
</div>
</section>
</div>
@@ -178,24 +179,20 @@ const ClosingProductionDataTabContent = ({
Performance
</h3>
<div className='space-y-1'>
<DoubleDataRow
<DataRow
label='Deplesi'
value1={formatNumber(performance.depletion_head)}
unit1='Ekor'
value2={formatNumber(performance.depletion_percentage)}
unit2='%'
value={formatNumber(performance.depletion)}
unit='Ekor'
/>
<DataRow
label='Umur'
value={formatNumber(performance.age_days)}
value={formatNumber(performance.age_day)}
unit='Hari'
// Aligning 'Hari' with the first unit column of double row
unitClassName='text-gray-500 w-8 text-right mr-[4.5rem]'
/>
<DataRow
label='Mortalitas Std'
value={formatNumber(performance.mortality_std)}
unitClassName='hidden' // No unit shown in screenshot
unitClassName='hidden'
/>
<DataRow
label='Mortalitas Act'
@@ -223,40 +220,10 @@ const ClosingProductionDataTabContent = ({
unitClassName='hidden'
/>
<DataRow
label='ADG'
value={formatNumber(performance.adg)}
label='AWG'
value={formatNumber(performance.awg)}
unit='Gr/Hari'
/>
<DataRow
label='IP'
value={formatNumber(performance.ip)}
unitClassName='hidden'
/>
</div>
</section>
{/* Variance Section (Pushed to bottom) */}
<section className='mt-auto pt-4'>
<h3 className='font-bold text-gray-700 mb-4 text-base'>Selisih</h3>
<div className='space-y-1'>
<DataRow
label='Selisih Ayam'
value={formatNumber(variance.variance_head)}
unit='Ekor'
valueClassName='font-bold text-red-500'
/>
<DataRow
label='% Selisih Ayam'
value={formatNumber(variance.variance_head_percentage)}
unit='%'
valueClassName='font-bold text-red-500'
/>
<DataRow
label='Selisih Pakan'
value={formatNumber(variance.variance_feed_kg)}
unit='Kg'
valueClassName='font-bold text-red-500'
/>
</div>
</section>
</div>