refactor(FE): Add period filter to ProjectFlockTable

This commit is contained in:
rstubryan
2026-02-23 13:51:32 +07:00
parent ba28d64562
commit 62c9ab014d
2 changed files with 39 additions and 0 deletions
@@ -168,6 +168,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
location_id: '',
kandang_id: '',
category: '',
period: '',
},
paramMap: {
page: 'page',
@@ -177,6 +178,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
location_id: 'location_id',
kandang_id: 'kandang_id',
category: 'category',
period: 'period',
},
});
const router = useRouter();
@@ -235,6 +237,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
location_id: null,
kandang_id: null,
category: null,
period: null,
},
validationSchema: ProjectFlockFilterSchema,
onSubmit: (values, { setSubmitting }) => {
@@ -242,6 +245,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
updateFilter('location_id', values.location_id || '');
updateFilter('kandang_id', values.kandang_id || '');
updateFilter('category', values.category || '');
updateFilter('period', values.period || '');
filterModal.closeModal();
setSubmitting(false);
},
@@ -250,6 +254,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
updateFilter('location_id', '');
updateFilter('kandang_id', '');
updateFilter('category', '');
updateFilter('period', '');
setFilterAreaId(undefined);
setFilterLocationId(undefined);
filterModal.closeModal();
@@ -291,6 +296,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
[]
);
const periodOptions = useMemo(
() => [
{ value: '1', label: 'Periode 1' },
{ value: '2', label: 'Periode 2' },
],
[]
);
// ===== FILTER HELPERS =====
const areaValue = useMemo(() => {
if (!formik.values.area_id) return null;
@@ -326,6 +339,13 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
);
}, [formik.values.category, categoryOptions]);
const periodValue = useMemo(() => {
if (!formik.values.period) return null;
return (
periodOptions.find((opt) => opt.value === formik.values.period) || null
);
}, [formik.values.period, periodOptions]);
// ===== ACTIVE FILTERS COUNT =====
const activeFiltersCount = useMemo(() => {
let count = 0;
@@ -333,12 +353,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
if (tableFilterState.location_id) count += 1;
if (tableFilterState.kandang_id) count += 1;
if (tableFilterState.category) count += 1;
if (tableFilterState.period) count += 1;
return count;
}, [
tableFilterState.area_id,
tableFilterState.location_id,
tableFilterState.kandang_id,
tableFilterState.category,
tableFilterState.period,
]);
const hasFilters = activeFiltersCount > 0;
@@ -372,6 +394,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
location_id: locationId,
kandang_id: tableFilterState.kandang_id || null,
category: tableFilterState.category || null,
period: tableFilterState.period || null,
});
setFilterAreaId(areaId || undefined);
@@ -1274,6 +1297,20 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
className={{ wrapper: 'w-full' }}
isClearable={true}
/>
<SelectInputRadio
label='Periode'
placeholder='Pilih Periode'
options={periodOptions}
value={periodValue}
onChange={(val) => {
if (!Array.isArray(val)) {
formik.setFieldValue('period', val?.value || null);
}
}}
className={{ wrapper: 'w-full' }}
isClearable
/>
</div>
{/* Modal Footer */}
@@ -5,6 +5,7 @@ export type ProjectFlockFilterType = {
location_id: string | null;
kandang_id: string | null;
category: string | null;
period: string | null;
};
export const ProjectFlockFilterSchema = yup.object({
@@ -12,6 +13,7 @@ export const ProjectFlockFilterSchema = yup.object({
location_id: yup.string().nullable(),
kandang_id: yup.string().nullable(),
category: yup.string().nullable(),
period: yup.string().nullable(),
});
export type ProjectFlockFilterValues = yup.InferType<