mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +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>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* FCR & Mortality Metrics - Detail View Only - Grid Layout */}
|
{/* FCR & Mortality Metrics - Detail View Only */}
|
||||||
{type === 'detail' && initialValues && (
|
{type === 'detail' && initialValues && (
|
||||||
<div className='grid grid-cols-2 gap-6 mb-6'>
|
<div className='grid grid-cols-2 gap-6 mb-6'>
|
||||||
{/* FCR Metrics */}
|
{/* FCR Section */}
|
||||||
<div className='flex flex-col gap-2'>
|
<div className='border border-gray-200 rounded-lg bg-white'>
|
||||||
<p className='text-sm font-medium'>FCR</p>
|
<div className='px-4 py-3 border-b border-gray-200'>
|
||||||
<Table
|
<span className='card-title font-bold text-xl'>FCR</span>
|
||||||
data={[
|
</div>
|
||||||
{
|
<div className='p-4'>
|
||||||
label: 'Bobot',
|
<table className='w-full text-sm'>
|
||||||
aktual: initialValues.avg_daily_gain?.toFixed(2) || '-',
|
<thead>
|
||||||
standar: '-',
|
<tr className='border-b border-gray-200'>
|
||||||
totalPakan: formatNumber(initialValues.cum_intake || 0),
|
<th className='text-left py-2 font-semibold text-gray-600'></th>
|
||||||
},
|
<th className='text-center py-2 font-semibold text-gray-600'>
|
||||||
{
|
AKTUAL
|
||||||
label: 'FCR',
|
</th>
|
||||||
aktual: initialValues.fcr_value?.toFixed(2) || '-',
|
<th className='text-center py-2 font-semibold text-gray-600'>
|
||||||
standar: '-',
|
STANDAR
|
||||||
totalPakan: '',
|
</th>
|
||||||
},
|
<th className='text-center py-2 font-semibold text-gray-600'>
|
||||||
]}
|
TOTAL PEMAKAIAN PAKAN (KG)
|
||||||
columns={[
|
</th>
|
||||||
{
|
</tr>
|
||||||
accessorKey: 'label',
|
</thead>
|
||||||
header: '',
|
<tbody>
|
||||||
cell: (props) => (
|
<tr className='border-b border-gray-100'>
|
||||||
<span className='font-medium'>
|
<td className='py-3 font-medium'>Bobot</td>
|
||||||
{props.row.original.label}
|
<td className='text-center py-3'>
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'aktual',
|
|
||||||
header: 'Aktual',
|
|
||||||
cell: (props) => (
|
|
||||||
<span className='font-semibold'>
|
<span className='font-semibold'>
|
||||||
{props.row.original.aktual}
|
{initialValues.avg_daily_gain?.toFixed(2) || '-'}
|
||||||
</span>
|
</span>
|
||||||
),
|
</td>
|
||||||
},
|
<td className='text-center py-3 text-gray-600'>-</td>
|
||||||
{
|
<td className='text-center py-3 text-gray-600'>
|
||||||
accessorKey: 'standar',
|
{formatNumber(initialValues.cum_intake || 0)}
|
||||||
header: 'Standar',
|
</td>
|
||||||
cell: (props) => (
|
</tr>
|
||||||
<span>{props.row.original.standar}</span>
|
<tr>
|
||||||
),
|
<td className='py-3 font-medium'>FCR</td>
|
||||||
},
|
<td className='text-center py-3'>
|
||||||
{
|
<span className='font-semibold'>
|
||||||
accessorKey: 'totalPakan',
|
{initialValues.fcr_value?.toFixed(2) || '-'}
|
||||||
header: 'Total Pemakaian Pakan (KG)',
|
</span>
|
||||||
cell: (props) => (
|
</td>
|
||||||
<span>{props.row.original.totalPakan}</span>
|
<td className='text-center py-3 text-gray-600'>-</td>
|
||||||
),
|
<td className='text-center py-3'></td>
|
||||||
},
|
</tr>
|
||||||
]}
|
</tbody>
|
||||||
pageSize={2}
|
</table>
|
||||||
className={{
|
</div>
|
||||||
containerClassName: 'mb-0',
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mortality Metrics */}
|
{/* Mortality Section */}
|
||||||
<div className='flex flex-col gap-2'>
|
<div className='border border-gray-200 rounded-lg bg-white'>
|
||||||
<p className='text-sm font-medium'>Mortalitas</p>
|
<div className='px-4 py-3 border-b border-gray-200'>
|
||||||
<Table
|
<span className='card-title font-bold text-xl'>
|
||||||
data={[
|
Mortalitas
|
||||||
{
|
</span>
|
||||||
jumlahAyamTotal: formatNumber(
|
</div>
|
||||||
initialValues.total_chick_qty || 0
|
<div className='p-4'>
|
||||||
),
|
<table className='w-full text-sm'>
|
||||||
jumlahAyamPct: '-',
|
<thead>
|
||||||
deplesiHarianTotal: formatNumber(
|
<tr className='border-b border-gray-200'>
|
||||||
initialValues.daily_gain || 0
|
<th
|
||||||
),
|
colSpan={2}
|
||||||
deplesiHarianPct: '-',
|
className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
|
||||||
deplesiKumulatifTotal: formatNumber(
|
>
|
||||||
|
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
|
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>
|
</span>
|
||||||
),
|
</td>
|
||||||
},
|
<td className='text-center py-3 text-gray-600'>
|
||||||
{
|
{initialValues.cum_depletion_rate?.toFixed(2) || '-'}
|
||||||
accessorKey: 'jumlahAyamPct',
|
</td>
|
||||||
header: '(%)',
|
</tr>
|
||||||
cell: (props) => (
|
</tbody>
|
||||||
<span className='text-center block w-full'>
|
</table>
|
||||||
{props.row.original.jumlahAyamPct}
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user