diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingFilterModal.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingFilterModal.tsx index db758762..95d8aa6c 100644 --- a/src/components/pages/production/transfer-to-laying/TransferToLayingFilterModal.tsx +++ b/src/components/pages/production/transfer-to-laying/TransferToLayingFilterModal.tsx @@ -13,6 +13,10 @@ import { OptionType, useSelect } from '@/components/input/SelectInput'; import { ProjectFlockApi } from '@/services/api/production'; import { Flock } from '@/types/api/master-data/flock'; import { TransferToLayingFilter } from '@/types/api/production/transfer-to-laying'; +import { + TransferToLayingFilterSchema, + TransferToLayingFilterValues, +} from '@/components/pages/production/transfer-to-laying/filter/TransferToLayingFilter'; interface TransferToLayingFilterModal { ref: RefObject; @@ -49,13 +53,7 @@ const TransferToLayingFilterModal = ({ category: 'LAYING', }); - const formik = useFormik<{ - startDate: string; - endDate: string; - flockSource: { value: number; label: string }[]; - flockDestination: { value: number; label: string }[]; - status: { value: number; label: string }[]; - }>({ + const formik = useFormik({ initialValues: { startDate: '', endDate: '', @@ -63,15 +61,22 @@ const TransferToLayingFilterModal = ({ flockDestination: [], status: [], }, + validationSchema: TransferToLayingFilterSchema, onSubmit: async (values) => { const formattedValues = { ...values, - flockSource: values.flockSource.map((item) => item.value), - flockDestination: values.flockDestination.map((item) => item.value), - status: values.status.map((item) => item.value), + flockSource: values.flockSource + ? (values.flockSource as OptionType[]).map((item) => item.value) + : [], + flockDestination: values.flockDestination + ? (values.flockDestination as OptionType[]).map((item) => item.value) + : [], + status: values.status + ? (values.status as OptionType[]).map((item) => item.value) + : [], }; - onSubmit?.(formattedValues); + onSubmit?.(formattedValues as TransferToLayingFilter); closeModalHandler(); }, onReset: () => { @@ -81,17 +86,17 @@ const TransferToLayingFilterModal = ({ }); const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => { - formik.setFieldValue('flockSource', val as OptionType[]); + formik.setFieldValue('flockSource', val); }; const flockDestinationChangeHandler = ( val: OptionType | OptionType[] | null ) => { - formik.setFieldValue('flockDestination', val as OptionType[]); + formik.setFieldValue('flockDestination', val); }; const statusChangeHandler = (val: OptionType | OptionType[] | null) => { - formik.setFieldValue('status', val as OptionType[]); + formik.setFieldValue('status', val); }; return ( @@ -132,7 +137,7 @@ const TransferToLayingFilterModal = ({ @@ -140,16 +145,22 @@ const TransferToLayingFilterModal = ({ + {formik.touched.endDate && formik.errors.endDate && ( + + {formik.errors.endDate} + + )} diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx index 9a9813f0..06852fe1 100644 --- a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx +++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { ChangeEventHandler, useEffect, useMemo, useState } from 'react'; +import { ChangeEventHandler, useEffect, useState } from 'react'; import useSWR from 'swr'; import { CellContext, @@ -17,7 +17,6 @@ import { useModal } from '@/components/Modal'; import CheckboxInput from '@/components/input/CheckboxInput'; import RequirePermission from '@/components/helper/RequirePermission'; import PopoverButton from '@/components/popover/PopoverButton'; -import Badge from '@/components/Badge'; import PopoverContent from '@/components/popover/PopoverContent'; import Dropdown from '@/components/Dropdown'; import StatusBadge from '@/components/helper/StatusBadge'; diff --git a/src/components/pages/production/transfer-to-laying/filter/TransferToLayingFilter.ts b/src/components/pages/production/transfer-to-laying/filter/TransferToLayingFilter.ts new file mode 100644 index 00000000..bc402d29 --- /dev/null +++ b/src/components/pages/production/transfer-to-laying/filter/TransferToLayingFilter.ts @@ -0,0 +1,33 @@ +import * as yup from 'yup'; + +export type TransferToLayingFilterType = { + startDate: string | null; + endDate: string | null; + flockSource: number[]; + flockDestination: number[]; + status: string[]; +}; + +export const TransferToLayingFilterSchema = yup.object({ + startDate: yup.string().optional().nullable(), + endDate: yup + .string() + .optional() + .nullable() + .test( + 'is-greater-than-start', + 'Tanggal akhir tidak boleh masa lampau', + function (value) { + const { startDate } = this.parent; + if (!startDate || !value) return true; + return new Date(value) >= new Date(startDate); + } + ), + flockSource: yup.array().optional().nullable(), + flockDestination: yup.array().optional().nullable(), + status: yup.array().optional().nullable(), +}); + +export type TransferToLayingFilterValues = yup.InferType< + typeof TransferToLayingFilterSchema +>;