mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 21:41:57 +00:00
refactor(FE-440): Use styled HTML tables for FCR and mortality
This commit is contained in:
rstubryan
@@ -1538,170 +1538,141 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* FCR & Mortality Metrics - Detail View Only - Grid Layout */}
|
||||
{/* FCR & Mortality Metrics - Detail View Only */}
|
||||
{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',
|
||||
}}
|
||||
/>
|
||||
{/* FCR Section */}
|
||||
<div className='border border-gray-200 rounded-lg bg-white'>
|
||||
<div className='px-4 py-3 border-b border-gray-200'>
|
||||
<span className='card-title font-bold text-xl'>FCR</span>
|
||||
</div>
|
||||
<div className='p-4'>
|
||||
<table className='w-full text-sm'>
|
||||
<thead>
|
||||
<tr className='border-b border-gray-200'>
|
||||
<th className='text-left py-2 font-semibold text-gray-600'></th>
|
||||
<th className='text-center py-2 font-semibold text-gray-600'>
|
||||
AKTUAL
|
||||
</th>
|
||||
<th className='text-center py-2 font-semibold text-gray-600'>
|
||||
STANDAR
|
||||
</th>
|
||||
<th className='text-center py-2 font-semibold text-gray-600'>
|
||||
TOTAL PEMAKAIAN PAKAN (KG)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='border-b border-gray-100'>
|
||||
<td className='py-3 font-medium'>Bobot</td>
|
||||
<td className='text-center py-3'>
|
||||
<span className='font-semibold'>
|
||||
{initialValues.avg_daily_gain?.toFixed(2) || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td className='text-center py-3 text-gray-600'>-</td>
|
||||
<td className='text-center py-3 text-gray-600'>
|
||||
{formatNumber(initialValues.cum_intake || 0)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='py-3 font-medium'>FCR</td>
|
||||
<td className='text-center py-3'>
|
||||
<span className='font-semibold'>
|
||||
{initialValues.fcr_value?.toFixed(2) || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td className='text-center py-3 text-gray-600'>-</td>
|
||||
<td className='text-center py-3'></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</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',
|
||||
}}
|
||||
/>
|
||||
{/* Mortality Section */}
|
||||
<div className='border border-gray-200 rounded-lg bg-white'>
|
||||
<div className='px-4 py-3 border-b border-gray-200'>
|
||||
<span className='card-title font-bold text-xl'>
|
||||
Mortalitas
|
||||
</span>
|
||||
</div>
|
||||
<div className='p-4'>
|
||||
<table className='w-full text-sm'>
|
||||
<thead>
|
||||
<tr className='border-b border-gray-200'>
|
||||
<th
|
||||
colSpan={2}
|
||||
className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
|
||||
>
|
||||
JUMLAH AYAM
|
||||
</th>
|
||||
<th
|
||||
colSpan={2}
|
||||
className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
|
||||
>
|
||||
DEPLESI HARIAN
|
||||
</th>
|
||||
<th
|
||||
colSpan={2}
|
||||
className='text-center py-2 font-semibold text-gray-600'
|
||||
>
|
||||
DEPLESI KUMULATIF
|
||||
</th>
|
||||
</tr>
|
||||
<tr className='border-b border-gray-200'>
|
||||
<th className='text-center py-2 font-semibold text-xs text-gray-500'>
|
||||
Total
|
||||
</th>
|
||||
<th className='text-center py-2 font-semibold text-xs text-gray-500 border-r border-gray-200'>
|
||||
(%)
|
||||
</th>
|
||||
<th className='text-center py-2 font-semibold text-xs text-gray-500'>
|
||||
Total
|
||||
</th>
|
||||
<th className='text-center py-2 font-semibold text-xs text-gray-500 border-r border-gray-200'>
|
||||
(%)
|
||||
</th>
|
||||
<th className='text-center py-2 font-semibold text-xs text-gray-500'>
|
||||
Total
|
||||
</th>
|
||||
<th className='text-center py-2 font-semibold text-xs text-gray-500'>
|
||||
(%)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='text-center py-3 border-r border-gray-100'>
|
||||
<span className='font-semibold'>
|
||||
{formatNumber(initialValues.total_chick_qty || 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='text-center py-3 border-r border-gray-200 text-gray-600'>
|
||||
-
|
||||
</td>
|
||||
<td className='text-center py-3 border-r border-gray-100'>
|
||||
<span className='font-semibold'>
|
||||
{formatNumber(initialValues.daily_gain || 0)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='text-center py-3 border-r border-gray-200 text-gray-600'>
|
||||
-
|
||||
</td>
|
||||
<td className='text-center py-3 border-r border-gray-100'>
|
||||
<span className='font-semibold'>
|
||||
{formatNumber(
|
||||
initialValues.total_depletion_qty || 0
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='text-center py-3 text-gray-600'>
|
||||
{initialValues.cum_depletion_rate?.toFixed(2) || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user