mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat(FE-346): create ClosingProductionDataTabContent component
This commit is contained in:
ValdiANS
@@ -0,0 +1,268 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import useSWR from 'swr';
|
||||||
|
import { ClosingApi } from '@/services/api/closing';
|
||||||
|
import { isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import { formatNumber } from '@/lib/helper';
|
||||||
|
|
||||||
|
interface ClosingProductionDataTabContentProps {
|
||||||
|
projectFlockId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClosingProductionDataTabContent = ({
|
||||||
|
projectFlockId,
|
||||||
|
}: ClosingProductionDataTabContentProps) => {
|
||||||
|
const { data: productionData, isLoading } = useSWR(
|
||||||
|
`${ClosingApi.basePath}/${projectFlockId}/production-data`,
|
||||||
|
() => ClosingApi.getProductionData(projectFlockId)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className='w-full flex justify-center py-8'>
|
||||||
|
<span className='loading loading-spinner loading-lg' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!productionData || !isResponseSuccess(productionData)) {
|
||||||
|
return (
|
||||||
|
<div className='w-full text-center py-8 text-gray-500'>
|
||||||
|
Gagal memuat data produksi.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { purchase, sales, performance, variance } = productionData.data;
|
||||||
|
|
||||||
|
// Helper for consistent row styling
|
||||||
|
const DataRow = ({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
unit = '',
|
||||||
|
valueClassName = 'font-bold text-gray-800',
|
||||||
|
unitClassName = 'text-gray-500 w-12 text-right',
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: string | number;
|
||||||
|
unit?: string;
|
||||||
|
valueClassName?: string;
|
||||||
|
unitClassName?: 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'>
|
||||||
|
<span className={valueClassName}>{value}</span>
|
||||||
|
{unit && <span className={unitClassName}>{unit}</span>}
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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_kg)}
|
||||||
|
unit='Kg'
|
||||||
|
/>
|
||||||
|
<DataRow
|
||||||
|
label='Pakan Terpakai'
|
||||||
|
value={formatNumber(purchase.feed_used_kg)}
|
||||||
|
unit='Kg'
|
||||||
|
/>
|
||||||
|
<DataRow
|
||||||
|
label='Pakan Terpakai per Ekor'
|
||||||
|
value={formatNumber(purchase.feed_used_per_head_kg)}
|
||||||
|
unit='Kg'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Sales Section */}
|
||||||
|
<section>
|
||||||
|
<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>
|
||||||
|
</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' />
|
||||||
|
|
||||||
|
{/* 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'>
|
||||||
|
<DoubleDataRow
|
||||||
|
label='Deplesi'
|
||||||
|
value1={formatNumber(performance.depletion_head)}
|
||||||
|
unit1='Ekor'
|
||||||
|
value2={formatNumber(performance.depletion_percentage)}
|
||||||
|
unit2='%'
|
||||||
|
/>
|
||||||
|
<DataRow
|
||||||
|
label='Umur'
|
||||||
|
value={formatNumber(performance.age_days)}
|
||||||
|
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
|
||||||
|
/>
|
||||||
|
<DataRow
|
||||||
|
label='Mortalitas Act'
|
||||||
|
value={formatNumber(performance.mortality_act)}
|
||||||
|
unitClassName='hidden'
|
||||||
|
/>
|
||||||
|
<DataRow
|
||||||
|
label='DEFF Mortalitas'
|
||||||
|
value={formatNumber(performance.deff_mortality)}
|
||||||
|
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.deff_fcr)}
|
||||||
|
unitClassName='hidden'
|
||||||
|
/>
|
||||||
|
<DataRow
|
||||||
|
label='ADG'
|
||||||
|
value={formatNumber(performance.adg)}
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ClosingProductionDataTabContent;
|
||||||
Reference in New Issue
Block a user