feat(FE-441): Add FCR and mortality tables to detail view

This commit is contained in:
rstubryan
2025-12-30 22:18:51 +07:00
parent cc0b051a0a
commit 03a9451fc8
@@ -60,6 +60,7 @@ import {
GROWING_RECORDING_APPROVAL_LINE, GROWING_RECORDING_APPROVAL_LINE,
LAYING_RECORDING_APPROVAL_LINE, LAYING_RECORDING_APPROVAL_LINE,
} from '@/config/approval-line'; } from '@/config/approval-line';
import Table from '@/components/Table';
interface RecordingFormProps { interface RecordingFormProps {
type?: 'add' | 'edit' | 'detail'; type?: 'add' | 'edit' | 'detail';
@@ -1537,6 +1538,174 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Card> </Card>
)} )}
{/* FCR & Mortality Metrics - Detail View Only - Grid Layout */}
{type === 'detail' && initialValues && (
<div className='grid grid-cols-2 gap-6 mb-6'>
{/* FCR Metrics */}
<div className='flex flex-col gap-2'>
<p className='text-sm font-medium'>FCR</p>
<Table
data={[
{
label: 'Bobot',
aktual: initialValues.avg_daily_gain?.toFixed(2) || '-',
standar: '-',
totalPakan: formatNumber(initialValues.cum_intake || 0),
},
{
label: 'FCR',
aktual: initialValues.fcr_value?.toFixed(2) || '-',
standar: '-',
totalPakan: '',
},
]}
columns={[
{
accessorKey: 'label',
header: '',
cell: (props) => (
<span className='font-medium'>
{props.row.original.label}
</span>
),
},
{
accessorKey: 'aktual',
header: 'Aktual',
cell: (props) => (
<span className='font-semibold'>
{props.row.original.aktual}
</span>
),
},
{
accessorKey: 'standar',
header: 'Standar',
cell: (props) => (
<span>{props.row.original.standar}</span>
),
},
{
accessorKey: 'totalPakan',
header: 'Total Pemakaian Pakan (KG)',
cell: (props) => (
<span>{props.row.original.totalPakan}</span>
),
},
]}
pageSize={2}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
{/* Mortality Metrics */}
<div className='flex flex-col gap-2'>
<p className='text-sm font-medium'>Mortalitas</p>
<Table
data={[
{
jumlahAyamTotal: formatNumber(
initialValues.total_chick_qty || 0
),
jumlahAyamPct: '-',
deplesiHarianTotal: formatNumber(
initialValues.daily_gain || 0
),
deplesiHarianPct: '-',
deplesiKumulatifTotal: formatNumber(
initialValues.total_depletion_qty || 0
),
deplesiKumulatifPct:
initialValues.cum_depletion_rate?.toFixed(2) || '-',
},
]}
columns={[
{
id: 'jumlah-ayam',
header: 'Jumlah Ayam',
columns: [
{
accessorKey: 'jumlahAyamTotal',
header: 'Total',
cell: (props) => (
<span className='font-semibold text-center block w-full'>
{props.row.original.jumlahAyamTotal}
</span>
),
},
{
accessorKey: 'jumlahAyamPct',
header: '(%)',
cell: (props) => (
<span className='text-center block w-full'>
{props.row.original.jumlahAyamPct}
</span>
),
},
],
},
{
id: 'deplesi-harian',
header: 'Deplesi Harian',
columns: [
{
accessorKey: 'deplesiHarianTotal',
header: 'Total',
cell: (props) => (
<span className='font-semibold text-center block w-full'>
{props.row.original.deplesiHarianTotal}
</span>
),
},
{
accessorKey: 'deplesiHarianPct',
header: '(%)',
cell: (props) => (
<span className='text-center block w-full'>
{props.row.original.deplesiHarianPct}
</span>
),
},
],
},
{
id: 'deplesi-kumulatif',
header: 'Deplesi Kumulatif',
columns: [
{
accessorKey: 'deplesiKumulatifTotal',
header: 'Total',
cell: (props) => (
<span className='font-semibold text-center block w-full'>
{props.row.original.deplesiKumulatifTotal}
</span>
),
},
{
accessorKey: 'deplesiKumulatifPct',
header: '(%)',
cell: (props) => (
<span className='text-center block w-full'>
{props.row.original.deplesiKumulatifPct}
</span>
),
},
],
},
]}
pageSize={1}
className={{
containerClassName: 'mb-0',
paginationClassName: 'hidden',
}}
/>
</div>
</div>
)}
{/* Stocks Table */} {/* Stocks Table */}
<Card <Card
title='Stok Persediaan' title='Stok Persediaan'