mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 21:41:57 +00:00
feat(FE): Add production metric columns and table styling
This commit is contained in:
rstubryan
@@ -5,7 +5,7 @@ import { RefObject } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { SortingState, CellContext } from '@tanstack/react-table';
|
||||
import { cn, formatDate } from '@/lib/helper';
|
||||
import { cn, formatDate, formatNumber } from '@/lib/helper';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import Modal from '@/components/Modal';
|
||||
@@ -679,7 +679,7 @@ const RecordingTable = () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
header: '#',
|
||||
header: 'No',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
@@ -735,8 +735,261 @@ const RecordingTable = () => {
|
||||
{
|
||||
header: 'Populasi Akhir',
|
||||
cell: (props) =>
|
||||
props.row.original.project_flock?.total_chick_qty?.toLocaleString() ||
|
||||
'-',
|
||||
props.row.original.project_flock?.total_chick_qty != null
|
||||
? formatNumber(props.row.original.project_flock.total_chick_qty)
|
||||
: '-',
|
||||
},
|
||||
{
|
||||
id: 'fcr',
|
||||
header: 'FCR',
|
||||
columns: [
|
||||
{
|
||||
id: 'fcr_actual',
|
||||
header: 'Actual',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.fcr_value;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'fcr_standard',
|
||||
header: 'Standard',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.project_flock?.fcr?.fcr_std;
|
||||
return (
|
||||
<div className='text-center text-gray-600'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'feed_intake',
|
||||
header: 'Feed Intake (KG)',
|
||||
columns: [
|
||||
{
|
||||
id: 'feed_intake_actual',
|
||||
header: 'Actual',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.feed_intake;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'feed_intake_standard',
|
||||
header: 'Standard',
|
||||
cell: (props) => {
|
||||
const value =
|
||||
props.row.original.project_flock?.production_standart
|
||||
?.feed_intake_std;
|
||||
return (
|
||||
<div className='text-center text-gray-600'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'mortality',
|
||||
header: 'Mortality',
|
||||
columns: [
|
||||
{
|
||||
id: 'cum_depletion_rate_actual',
|
||||
header: 'Cum Depletion Rate',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.cum_depletion_rate;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? `${value.toFixed(2)}%`
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'max_depletion_std',
|
||||
header: 'Max Depletion Std',
|
||||
cell: (props) => {
|
||||
const value =
|
||||
props.row.original.project_flock?.production_standart
|
||||
?.max_depletion_std;
|
||||
return (
|
||||
<div className='text-center text-gray-600'>
|
||||
{value !== null && value !== undefined
|
||||
? `${value.toFixed(2)}%`
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'total_depletion',
|
||||
header: 'Total Depletion',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.total_depletion_qty;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'egg_production',
|
||||
header: 'Egg Production',
|
||||
columns: [
|
||||
{
|
||||
id: 'egg_mass_actual',
|
||||
header: 'Egg Mass Actual',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.egg_mass;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'egg_mass_standard',
|
||||
header: 'Egg Mass Standar',
|
||||
cell: (props) => {
|
||||
const value =
|
||||
props.row.original.project_flock?.production_standart
|
||||
?.egg_mass_std;
|
||||
return (
|
||||
<div className='text-center text-gray-600'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'egg_weight_actual',
|
||||
header: 'Egg Weight Actual',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.egg_weight;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'egg_weight_standard',
|
||||
header: 'Egg Weight Standar',
|
||||
cell: (props) => {
|
||||
const value =
|
||||
props.row.original.project_flock?.production_standart
|
||||
?.egg_weight_std;
|
||||
return (
|
||||
<div className='text-center text-gray-600'>
|
||||
{value !== null && value !== undefined
|
||||
? formatNumber(value)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'hen_performance',
|
||||
header: 'Hen Performance',
|
||||
columns: [
|
||||
{
|
||||
id: 'hen_day_actual',
|
||||
header: 'Hen Day Actual',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.hen_day;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? `${value.toFixed(2)}%`
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'hen_day_standard',
|
||||
header: 'Hen Day Standar',
|
||||
cell: (props) => {
|
||||
const value =
|
||||
props.row.original.project_flock?.production_standart
|
||||
?.hen_day_std;
|
||||
return (
|
||||
<div className='text-center text-gray-600'>
|
||||
{value !== null && value !== undefined
|
||||
? `${value.toFixed(2)}%`
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'hen_house_actual',
|
||||
header: 'Hen House Actual',
|
||||
cell: (props) => {
|
||||
const value = props.row.original.hen_house;
|
||||
return (
|
||||
<div className='text-center'>
|
||||
{value !== null && value !== undefined
|
||||
? `${value.toFixed(2)}%`
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'hen_house_standard',
|
||||
header: 'Hen House Standar',
|
||||
cell: (props) => {
|
||||
const value =
|
||||
props.row.original.project_flock?.production_standart
|
||||
?.hen_house_std;
|
||||
return (
|
||||
<div className='text-center text-gray-600'>
|
||||
{value !== null && value !== undefined
|
||||
? `${value.toFixed(2)}%`
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: 'Status Approval',
|
||||
@@ -902,14 +1155,15 @@ const RecordingTable = () => {
|
||||
'mb-20':
|
||||
isResponseSuccess(recordings) && recordings?.data?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
tableWrapperClassName: 'overflow-x-auto',
|
||||
tableClassName: 'w-full table-auto text-sm',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
|
||||
bodyRowClassName:
|
||||
'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user