mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 23:35:45 +00:00
refactor(FE): Refactor ProductionDataClosingTab to use Card component
This commit is contained in:
@@ -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';
|
||||||
|
|||||||
Reference in New Issue
Block a user