mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +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 useSWR from 'swr';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import { SortingState, CellContext } from '@tanstack/react-table';
|
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 RequirePermission from '@/components/helper/RequirePermission';
|
||||||
import { useModal } from '@/components/Modal';
|
import { useModal } from '@/components/Modal';
|
||||||
import Modal from '@/components/Modal';
|
import Modal from '@/components/Modal';
|
||||||
@@ -679,7 +679,7 @@ const RecordingTable = () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
header: '#',
|
header: 'No',
|
||||||
cell: (props) =>
|
cell: (props) =>
|
||||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||||
props.row.index +
|
props.row.index +
|
||||||
@@ -735,8 +735,261 @@ const RecordingTable = () => {
|
|||||||
{
|
{
|
||||||
header: 'Populasi Akhir',
|
header: 'Populasi Akhir',
|
||||||
cell: (props) =>
|
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',
|
header: 'Status Approval',
|
||||||
@@ -902,14 +1155,15 @@ const RecordingTable = () => {
|
|||||||
'mb-20':
|
'mb-20':
|
||||||
isResponseSuccess(recordings) && recordings?.data?.length === 0,
|
isResponseSuccess(recordings) && recordings?.data?.length === 0,
|
||||||
}),
|
}),
|
||||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
tableWrapperClassName: 'overflow-x-auto',
|
||||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
tableClassName: 'w-full table-auto text-sm',
|
||||||
headerRowClassName: 'border-b border-b-gray-200',
|
headerRowClassName: 'border-b border-b-gray-200',
|
||||||
headerColumnClassName:
|
headerColumnClassName:
|
||||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
'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: 'border-b border-b-gray-200',
|
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:
|
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