gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'fix/data-refactor-and-ui-adjustment' into 'development'

Browse Source 
[FIX/FE] Data Refactor and UI Adjustment (Recording, Purchase, Finance, Marketing & Sales Report)

See merge request mbugroup/lti-web-client!192
This commit is contained in:
Rivaldi A N S
2026-01-16 12:00:37 +00:00
parent 3c6f7ce0d3 a17089f4bb
commit 6395a32f43
22 changed files with 1444 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/recording/RecordingTable.tsx
+295 -13
View File
@@ -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';
@@ -656,20 +656,30 @@ const RecordingTable = () => {
);
},
cell: ({ row }) => {
const recording = row.original;
const isDisabled = isRecordingApproved(recording);
const handleToggleSelection = (e: unknown) => {
if (!isDisabled) {
row.getToggleSelectedHandler()(e);
}
};
return (
<div>
<div className={cn({ 'opacity-50': isDisabled })}>
<CheckboxInput
name='row'
checked={row.getIsSelected()}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
onChange={handleToggleSelection}
disabled={isDisabled}
/>
</div>
);
},
},
{
header: '#',
header: 'No',
cell: (props) =>
tableFilterState.pageSize * (tableFilterState.page - 1) +
props.row.index +
@@ -680,6 +690,10 @@ const RecordingTable = () => {
cell: (props) =>
props.row.original.project_flock?.flock_name || '-',
},
{
header: 'Periode',
cell: (props) => props.row.original.project_flock?.period || '-',
},
{
header: 'Kategori',
cell: (props) => {
@@ -696,7 +710,21 @@ const RecordingTable = () => {
},
{
header: 'Umur (hari)',
cell: (props) => props.row.original.day,
cell: (props) => {
return (
<>
<span>
{props.row.original.day} (Minggu ke-
{props.row.original.project_flock.production_standart.week})
</span>
</>
);
},
},
{
accessorKey: 'warehouse.name',
header: 'Gudang',
cell: (props) => props.row.original.warehouse?.name,
},
{
accessorKey: 'record_date',
@@ -705,10 +733,263 @@ const RecordingTable = () => {
formatDate(props.row.original.record_datetime, 'DD MMMM YYYY'),
},
{
header: 'Populasi Awal',
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',
@@ -874,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',
}}
/>
src/components/pages/production/recording/form/RecordingForm.schema.ts
+7
View File
@@ -7,6 +7,7 @@ import {
} from '@/types/api/production/recording';
type RecordingGrowingFormSchemaType = {
record_date: string;
project_flock_kandang: {
value: number;
label: string;
@@ -85,6 +86,9 @@ const EggObjectSchema: Yup.ObjectSchema<EggSchema> = Yup.object({
export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSchemaType> =
Yup.object({
record_date: Yup.string()
.required('Tanggal recording wajib diisi!')
.typeError('Tanggal recording wajib diisi!'),
project_flock_kandang: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
@@ -179,6 +183,9 @@ type RecordingFormData = Partial<Recording> & {
export const getRecordingGrowingFormInitialValues = (
initialValues?: RecordingFormData
): RecordingGrowingFormValues => ({
record_date: initialValues?.record_datetime
? new Date(initialValues.record_datetime).toISOString().split('T')[0]
: new Date().toISOString().split('T')[0],
project_flock_kandang: initialValues?.project_flock_kandang_id
? {
value: initialValues.project_flock_kandang_id,
src/components/pages/production/recording/form/RecordingForm.tsx
+727 -276
View File
File diff suppressed because it is too large Load Diff
src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+6
View File
@@ -179,12 +179,16 @@ const TransferToLayingsTable = () => {
setInputValue: setFlockSourceInputValue,
options: flockSourceOptions,
isLoadingOptions: isLoadingFlockSourceOptions,
loadMore: loadMoreFlockSource,
hasMore: hasMoreFlockSource,
} = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
const {
setInputValue: setFlockDestinationInputValue,
options: flockDestinationOptions,
isLoadingOptions: isLoadingFlockDestinationOptions,
loadMore: loadMoreFlockDestination,
hasMore: hasMoreFlockDestination,
} = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
// Flocks value
@@ -595,6 +599,7 @@ const TransferToLayingsTable = () => {
value={selectedFlockSource}
onChange={flockSourceChangeHandler}
onInputChange={setFlockSourceInputValue}
onMenuScrollToBottom={loadMoreFlockSource}
isClearable
className={{
wrapper: 'col-span-12 sm:col-span-3',
@@ -608,6 +613,7 @@ const TransferToLayingsTable = () => {
value={selectedFlockDestination}
onChange={flockDestinationChangeHandler}
onInputChange={setFlockDestinationInputValue}
onMenuScrollToBottom={loadMoreFlockDestination}
isClearable
className={{
wrapper: 'col-span-12 sm:col-span-3',
src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+6
View File
@@ -270,6 +270,8 @@ const TransferToLayingForm = ({
options: flockSourceOptions,
isLoadingOptions: isLoadingFlockSourceOptions,
rawData: flockSources,
loadMore: loadMoreFlockSource,
hasMore: hasMoreFlockSource,
} = useSelect<ProjectFlock>(
'/production/project-flocks',
'id',
@@ -360,6 +362,8 @@ const TransferToLayingForm = ({
options: flockDestinationOptions,
isLoadingOptions: isLoadingFlockDestinationOptions,
rawData: flockDestinations,
loadMore: loadMoreFlockDestination,
hasMore: hasMoreFlockDestination,
} = useSelect<ProjectFlock>(
'/production/project-flocks',
'id',
@@ -573,6 +577,7 @@ const TransferToLayingForm = ({
onChange={flockSourceChangeHandler}
isLoading={isLoadingFlockSourceOptions}
onInputChange={setFlockSourceInputValue}
onMenuScrollToBottom={loadMoreFlockSource}
isError={
formik.touched.flockSource &&
Boolean(typeof formik.errors.flockSource === 'string')
@@ -591,6 +596,7 @@ const TransferToLayingForm = ({
onChange={flockDestinationChangeHandler}
isLoading={isLoadingFlockDestinationOptions}
onInputChange={setFlockDestinationInputValue}
onMenuScrollToBottom={loadMoreFlockDestination}
isError={
formik.touched.flockDestination &&
Boolean(typeof formik.errors.flockDestination === 'string')
src/components/pages/production/uniformity/UniformityTable.tsx
+30 -47
View File
@@ -37,7 +37,10 @@ import DateInput from '@/components/input/DateInput';
import { LocationApi } from '@/services/api/master-data';
import { ProjectFlockApi } from '@/services/api/production';
import { Kandang } from '@/types/api/master-data/kandang';
import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
import {
ProjectFlockKandangLookup,
ProjectFlock,
} from '@/types/api/production/project-flock';
import {
getStatusColor,
getStatusIndicatorColor,
@@ -229,63 +232,37 @@ const UniformityTable = () => {
useState<number | undefined>(undefined);
const [filterStartDate, setFilterStartDate] = useState('');
const [filterEndDate, setFilterEndDate] = useState('');
const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
const [filterProjectFlockLocationId, setFilterProjectFlockLocationId] =
useState<string>('');
const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
const {
setInputValue: setFilterLocationInputValue,
options: filterLocationOptions,
isLoadingOptions: isLoadingFilterLocations,
} = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
limit: '100',
});
loadMore: loadMoreFilterLocations,
hasMore: hasMoreFilterLocations,
} = useSelect(LocationApi.basePath, 'id', 'name', 'search');
// ===== FETCH PROJECT FLOCKS DATA FOR FILTER =====
const filterProjectFlocksUrl = useMemo(() => {
const params = new URLSearchParams({
search: projectFlockSearchValue || '',
limit: '100',
});
if (filterLocation) {
params.append('location_id', filterLocation.value.toString());
}
return `${ProjectFlockApi.basePath}?${params.toString()}`;
}, [projectFlockSearchValue, filterLocation]);
const {
data: filterProjectFlocksData,
isLoading: isLoadingFilterProjectFlocks,
} = useSWR(filterProjectFlocksUrl, ProjectFlockApi.getAllFetcher);
const filterProjectFlocksDataList = useMemo(
() =>
isResponseSuccess(filterProjectFlocksData)
? filterProjectFlocksData.data
: undefined,
[filterProjectFlocksData]
);
const filterProjectFlockOptions = useMemo(() => {
let options: OptionType[] = [];
if (isResponseSuccess(filterProjectFlocksData)) {
const flockOptions =
filterProjectFlocksData?.data.map((projectFlock) => ({
value: projectFlock.id,
label: projectFlock.flock_name || '',
})) || [];
options = options.concat(flockOptions);
}
return options;
}, [filterProjectFlocksData]);
setInputValue: setFilterProjectFlockSearchValue,
options: filterProjectFlockOptions,
rawData: filterProjectFlocksRawData,
isLoadingOptions: isLoadingFilterProjectFlocks,
loadMore: loadMoreFilterProjectFlocks,
hasMore: hasMoreFilterProjectFlocks,
} = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
location_id: filterProjectFlockLocationId,
});
// ===== KANDANG OPTIONS FOR FILTER =====
const filterKandangOptions = useMemo(() => {
let options: OptionType[] = [];
if (filterProjectFlock && filterProjectFlocksDataList) {
const selectedProjectFlockData = filterProjectFlocksDataList.find(
if (filterProjectFlock && isResponseSuccess(filterProjectFlocksRawData)) {
const data = filterProjectFlocksRawData.data as unknown as ProjectFlock[];
const selectedProjectFlockData = data.find(
(pf) => pf.id === filterProjectFlock.value
);
@@ -301,7 +278,7 @@ const UniformityTable = () => {
}
return options;
}, [filterProjectFlock, filterProjectFlocksDataList]);
}, [filterProjectFlock, filterProjectFlocksRawData]);
// ===== PROJECT FLOCK KANDANG LOOKUP =====
const projectFlockKandangLookupUrl = useMemo(() => {
@@ -394,9 +371,13 @@ const UniformityTable = () => {
// ===== FILTER HANDLERS =====
const handleFilterLocationChange = useCallback(
(val: OptionType | OptionType[] | null) => {
setFilterLocation(val as OptionType | null);
const location = val as OptionType | null;
setFilterLocation(location);
setFilterProjectFlock(null);
setFilterKandang(null);
setFilterProjectFlockLocationId(
location ? location.value.toString() : ''
);
},
[]
);
@@ -1206,6 +1187,7 @@ const UniformityTable = () => {
options={filterLocationOptions}
onInputChange={setFilterLocationInputValue}
isLoading={isLoadingFilterLocations}
onMenuScrollToBottom={loadMoreFilterLocations}
className={{ wrapper: 'w-full' }}
/>
{filterErrors.location && (
@@ -1225,8 +1207,9 @@ const UniformityTable = () => {
setFilterErrors((prev) => ({ ...prev, project_flock: '' }));
}}
options={filterProjectFlockOptions}
onInputChange={setProjectFlockSearchValue}
onInputChange={setFilterProjectFlockSearchValue}
isLoading={isLoadingFilterProjectFlocks}
onMenuScrollToBottom={loadMoreFilterProjectFlocks}
isDisabled={!filterLocation}
className={{ wrapper: 'w-full' }}
/>
src/components/pages/production/uniformity/chart/UniformityStat.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import Badge from '../../../../Badge';
import Badge from '@/components/Badge';
import Card from '@/components/Card';
import { Icon } from '@iconify/react';
import { formatNumber } from '@/lib/helper';
src/components/pages/production/uniformity/form/UniformityForm.tsx
+30 -47
View File
@@ -36,7 +36,10 @@ import {
VerifyUniformityPayload,
} from '@/types/api/production/uniformity';
import { type BaseApiResponse } from '@/types/api/api-general';
import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
import {
ProjectFlockKandangLookup,
ProjectFlock,
} from '@/types/api/production/project-flock';
import { Kandang } from '@/types/api/master-data/kandang';
import UniformityPreviewForm from '@/components/pages/production/uniformity/form/UniformityPreviewForm';
import UniformityResultForm from '@/components/pages/production/uniformity/form/UniformityResultForm';
@@ -88,7 +91,9 @@ const UniformityForm = ({
null
);
const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
const [selectedProjectFlockLocationId, setSelectedProjectFlockLocationId] =
useState<string>('');
const [selectedProjectFlock, setSelectedProjectFlock] =
useState<OptionType | null>(null);
@@ -100,50 +105,21 @@ const UniformityForm = ({
setInputValue: setLocationSelectInputValue,
options: locationOptions,
isLoadingOptions: isLoadingLocations,
} = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
page: '1',
limit: '100',
loadMore: loadMoreLocations,
hasMore: hasMoreLocations,
} = useSelect(LocationApi.basePath, 'id', 'name', 'search');
const {
setInputValue: setProjectFlockSearchValue,
options: projectFlockOptions,
rawData: projectFlocksRawData,
isLoadingOptions: isLoadingProjectFlocks,
loadMore: loadMoreProjectFlocks,
hasMore: hasMoreProjectFlocks,
} = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
location_id: selectedProjectFlockLocationId,
});
// ===== FETCH PROJECT FLOCKS DATA =====
const projectFlocksUrl = useMemo(() => {
const params = new URLSearchParams({
search: projectFlockSearchValue || '',
page: '1',
limit: '100',
});
if (selectedLocation) {
params.append('location_id', selectedLocation.value.toString());
}
return `${ProjectFlockApi.basePath}?${params.toString()}`;
}, [projectFlockSearchValue, selectedLocation]);
const { data: projectFlocksData, isLoading: isLoadingProjectFlocks } = useSWR(
projectFlocksUrl,
ProjectFlockApi.getAllFetcher
);
const projectFlocksDataList =
projectFlocksData?.status === 'success'
? projectFlocksData.data
: undefined;
// ===== PROJECT FLOCK OPTIONS =====
const projectFlockOptions = useMemo(() => {
let options: OptionType[] = [];
if (isResponseSuccess(projectFlocksData)) {
const flockOptions =
projectFlocksData?.data.map((projectFlock) => ({
value: projectFlock.id,
label: projectFlock.flock_name || '',
})) || [];
options = options.concat(flockOptions);
}
return options;
}, [projectFlocksData]);
// ===== APPROVED PROJECT FLOCK KANDANGS =====
const approvedProjectFlockKandangsUrl = useMemo(() => {
const params = new URLSearchParams({
@@ -168,8 +144,9 @@ const UniformityForm = ({
const kandangOptions = useMemo(() => {
let options: OptionType[] = [];
if (selectedProjectFlock && projectFlocksDataList) {
const selectedProjectFlockData = projectFlocksDataList.find(
if (selectedProjectFlock && isResponseSuccess(projectFlocksRawData)) {
const data = projectFlocksRawData.data as unknown as ProjectFlock[];
const selectedProjectFlockData = data.find(
(pf) => pf.id === selectedProjectFlock.value
);
@@ -196,7 +173,7 @@ const UniformityForm = ({
return options;
}, [
selectedProjectFlock,
projectFlocksDataList,
projectFlocksRawData,
approvedProjectFlockKandangs,
formType,
]);
@@ -313,6 +290,10 @@ const UniformityForm = ({
formik.setFieldValue('location_id', locationId);
setSelectedLocation(location);
setSelectedProjectFlock(null);
setSelectedProjectFlockLocationId(
location ? location.value.toString() : ''
);
},
[]
);
@@ -513,6 +494,7 @@ const UniformityForm = ({
options={locationOptions}
onInputChange={setLocationSelectInputValue}
isLoading={isLoadingLocations}
onMenuScrollToBottom={loadMoreLocations}
isError={
formik.touched.location_id && Boolean(formik.errors.location_id)
}
@@ -530,6 +512,7 @@ const UniformityForm = ({
options={projectFlockOptions}
onInputChange={setProjectFlockSearchValue}
isLoading={isLoadingProjectFlocks}
onMenuScrollToBottom={loadMoreProjectFlocks}
isDisabled={!formik.values.location_id}
isError={
formik.touched.project_flock_id &&