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

feat: add more filters

Browse Source
This commit is contained in:
Adnan Zahir
2026-04-25 12:15:42 +07:00
parent 2dfac0be72
commit c875ebd951
17 changed files with 633 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
+43 -15
View File
@@ -119,6 +119,8 @@ const InventoryAdjustmentTable = () => {
productFilter: '',
warehouseFilter: '',
transactionTypeFilter: '',
productName: '',
warehouseName: '',
},
paramMap: {
page: 'page',
@@ -131,6 +133,9 @@ const InventoryAdjustmentTable = () => {
warehouseFilter: 'warehouse_id',
transactionTypeFilter: 'transaction_type',
},
excludeKeysFromUrl: ['productName', 'warehouseName'],
persist: true,
storeName: 'inventory-adjustment-table',
});
// ===== FILTER MODAL STATE =====
@@ -140,14 +145,16 @@ const InventoryAdjustmentTable = () => {
const formik = useFormik<AdjustmentFilterType>({
initialValues: {
product_id: null,
warehouse: null,
warehouse_id: null,
transaction_type: null,
},
validationSchema: AdjustmentFilterSchema,
onSubmit: (values, { setSubmitting }) => {
updateFilter('productFilter', values.product_id || '');
updateFilter('warehouseFilter', String(values.warehouse?.value) || '');
updateFilter('warehouseFilter', values.warehouse_id || '');
updateFilter('transactionTypeFilter', values.transaction_type || '');
updateFilter('productName', productIdValue?.label ? String(productIdValue.label) : '');
updateFilter('warehouseName', warehouseIdValue?.label ? String(warehouseIdValue.label) : '');
filterModal.closeModal();
setSubmitting(false);
},
@@ -155,6 +162,9 @@ const InventoryAdjustmentTable = () => {
updateFilter('productFilter', '');
updateFilter('warehouseFilter', '');
updateFilter('transactionTypeFilter', '');
updateFilter('productName', '');
updateFilter('warehouseName', '');
filterModal.closeModal();
},
});
@@ -205,7 +215,8 @@ const InventoryAdjustmentTable = () => {
const handleFilterWarehouseChange = (
val: OptionType | OptionType[] | null
) => {
formik.setFieldValue('warehouse', val);
const warehouse = val as OptionType | null;
formik.setFieldValue('warehouse_id', warehouse?.value ? String(warehouse.value) : null);
};
const handleFilterTransactionTypeChange = useCallback(
@@ -220,12 +231,27 @@ const InventoryAdjustmentTable = () => {
// ===== FILTER HELPERS =====
const productIdValue = useMemo(() => {
if (!formik.values.product_id) return null;
return (
productOptions.find(
(opt) => String(opt.value) === formik.values.product_id
) || null
const found = productOptions.find(
(opt) => String(opt.value) === formik.values.product_id
);
}, [formik.values.product_id, productOptions]);
if (found) return found;
if (tableFilterState.productName) {
return { value: formik.values.product_id, label: tableFilterState.productName };
}
return null;
}, [formik.values.product_id, productOptions, tableFilterState.productName]);
const warehouseIdValue = useMemo(() => {
if (!formik.values.warehouse_id) return null;
const found = warehouseOptions.find(
(opt) => String(opt.value) === formik.values.warehouse_id
);
if (found) return found;
if (tableFilterState.warehouseName) {
return { value: formik.values.warehouse_id, label: tableFilterState.warehouseName };
}
return null;
}, [formik.values.warehouse_id, warehouseOptions, tableFilterState.warehouseName]);
const transactionTypeValue = useMemo(() => {
if (!formik.values.transaction_type) return null;
@@ -238,8 +264,12 @@ const InventoryAdjustmentTable = () => {
// ===== HANDLE FILTER MODAL OPEN =====
const handleFilterModalOpen = () => {
formik.setValues({
product_id: tableFilterState.productFilter || null,
warehouse_id: tableFilterState.warehouseFilter || null,
transaction_type: tableFilterState.transactionTypeFilter || null,
});
filterModal.openModal();
formik.validateForm();
};
const {
@@ -507,6 +537,8 @@ const InventoryAdjustmentTable = () => {
'productSort',
'warehouseSort',
'stockSort',
'productName',
'warehouseName',
]}
onClick={handleFilterModalOpen}
className='px-3 py-2.5'
@@ -608,7 +640,7 @@ const InventoryAdjustmentTable = () => {
label='Gudang'
placeholder='Pilih Gudang'
options={warehouseOptions}
value={formik.values.warehouse}
value={warehouseIdValue}
onChange={handleFilterWarehouseChange}
onInputChange={setWarehouseInputValue}
isLoading={isLoadingWarehouseOptions}
@@ -630,13 +662,9 @@ const InventoryAdjustmentTable = () => {
{/* Modal Footer */}
<div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
<Button
type='button'
type='reset'
variant='soft'
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
onClick={() => {
formik.resetForm();
filterModal.closeModal();
}}
>
Reset Filter
</Button>
src/components/pages/inventory/adjustment/filter/AdjustmentFilter.ts
+1 -2
View File
@@ -1,5 +1,4 @@
import { string, object } from 'yup';
import { OptionType } from '@/components/input/SelectInput';
export const AdjustmentFilterSchema = object().shape({
product_id: string().nullable(),
@@ -9,6 +8,6 @@ export const AdjustmentFilterSchema = object().shape({
export type AdjustmentFilterType = {
product_id: string | null;
warehouse_id: string | null;
transaction_type: string | null;
warehouse: OptionType<number> | null;
};
src/components/pages/inventory/movement/MovementTable.tsx
+32 -17
View File
@@ -122,6 +122,8 @@ const MovementTable = () => {
search: '',
productFilter: '',
warehouseFilter: '',
productName: '',
warehouseName: '',
},
paramMap: {
page: 'page',
@@ -129,6 +131,9 @@ const MovementTable = () => {
productFilter: 'product_id',
warehouseFilter: 'warehouse_id',
},
excludeKeysFromUrl: ['productName', 'warehouseName'],
persist: true,
storeName: 'movement-table',
});
// ===== FILTER MODAL STATE =====
@@ -144,12 +149,17 @@ const MovementTable = () => {
onSubmit: (values, { setSubmitting }) => {
updateFilter('productFilter', values.product_id || '');
updateFilter('warehouseFilter', values.warehouse_id || '');
updateFilter('productName', productIdValue?.label ? String(productIdValue.label) : '');
updateFilter('warehouseName', warehouseIdValue?.label ? String(warehouseIdValue.label) : '');
filterModal.closeModal();
setSubmitting(false);
},
onReset: () => {
updateFilter('productFilter', '');
updateFilter('warehouseFilter', '');
updateFilter('productName', '');
updateFilter('warehouseName', '');
filterModal.closeModal();
},
});
@@ -201,26 +211,35 @@ const MovementTable = () => {
// ===== FILTER HELPERS =====
const productIdValue = useMemo(() => {
if (!formik.values.product_id) return null;
return (
productOptions.find(
(opt) => String(opt.value) === formik.values.product_id
) || null
const found = productOptions.find(
(opt) => String(opt.value) === formik.values.product_id
);
}, [formik.values.product_id, productOptions]);
if (found) return found;
if (tableFilterState.productName) {
return { value: formik.values.product_id, label: tableFilterState.productName };
}
return null;
}, [formik.values.product_id, productOptions, tableFilterState.productName]);
const warehouseIdValue = useMemo(() => {
if (!formik.values.warehouse_id) return null;
return (
warehouseOptions.find(
(opt) => String(opt.value) === formik.values.warehouse_id
) || null
const found = warehouseOptions.find(
(opt) => String(opt.value) === formik.values.warehouse_id
);
}, [formik.values.warehouse_id, warehouseOptions]);
if (found) return found;
if (tableFilterState.warehouseName) {
return { value: formik.values.warehouse_id, label: tableFilterState.warehouseName };
}
return null;
}, [formik.values.warehouse_id, warehouseOptions, tableFilterState.warehouseName]);
// ===== HANDLE FILTER MODAL OPEN =====
const handleFilterModalOpen = () => {
formik.setValues({
product_id: tableFilterState.productFilter || null,
warehouse_id: tableFilterState.warehouseFilter || null,
});
filterModal.openModal();
formik.validateForm();
};
const [sorting, setSorting] = useState<SortingState>([]);
@@ -384,7 +403,7 @@ const MovementTable = () => {
<ButtonFilter
values={tableFilterState}
excludeFields={['page', 'pageSize', 'search']}
excludeFields={['page', 'pageSize', 'search', 'productName', 'warehouseName']}
onClick={handleFilterModalOpen}
className='px-3 py-2.5'
/>
@@ -489,13 +508,9 @@ const MovementTable = () => {
{/* Modal Footer */}
<div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
<Button
type='button'
type='reset'
variant='soft'
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
onClick={() => {
formik.resetForm();
filterModal.closeModal();
}}
>
Reset Filter
</Button>
src/components/pages/inventory/product/InventoryProductTable.tsx
+135 -1
View File
@@ -4,17 +4,25 @@ import Button from '@/components/Button';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import Table from '@/components/Table';
import RequirePermission from '@/components/helper/RequirePermission';
import ButtonFilter from '@/components/helper/ButtonFilter';
import Modal, { useModal } from '@/components/Modal';
import SelectInput, { useSelect } from '@/components/input/SelectInput';
import { OptionType } from '@/components/input/SelectInput';
import { isResponseSuccess } from '@/lib/api-helper';
import { cn, formatCurrency, formatNumber } from '@/lib/helper';
import { InventoryProductApi } from '@/services/api/inventory';
import { ProductCategoryApi } from '@/services/api/master-data';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { useUiStore } from '@/stores/ui/ui.store';
import { InventoryProduct } from '@/types/api/inventory/product';
import { ProductCategory } from '@/types/api/master-data/product-category';
import { Icon } from '@iconify/react';
import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
import { usePathname } from 'next/navigation';
import useSWR from 'swr';
import { useFormik } from 'formik';
import { object, string } from 'yup';
import PopoverButton from '@/components/popover/PopoverButton';
import PopoverContent from '@/components/popover/PopoverContent';
import InventoryProductTableSkeleton from '@/components/pages/inventory/product/skeleton/InventoryProductTableSkeleton';
@@ -83,13 +91,76 @@ const InventoryProductTable = () => {
} = useTableFilter({
initial: {
search: '',
categoryFilter: '',
categoryName: '',
},
paramMap: {
page: 'page',
pageSize: 'limit',
categoryFilter: 'product_category_id',
},
excludeKeysFromUrl: ['categoryName'],
persist: true,
storeName: 'inventory-product-table',
});
// ===== FILTER MODAL STATE =====
const filterModal = useModal();
// ===== FORMIK SETUP =====
const formik = useFormik<{ category_id: string | null }>({
initialValues: { category_id: null },
validationSchema: object().shape({ category_id: string().nullable() }),
onSubmit: (values, { setSubmitting }) => {
updateFilter('categoryFilter', values.category_id || '');
updateFilter('categoryName', categoryIdValue?.label ? String(categoryIdValue.label) : '');
filterModal.closeModal();
setSubmitting(false);
},
onReset: () => {
updateFilter('categoryFilter', '');
updateFilter('categoryName', '');
filterModal.closeModal();
},
});
// ===== CATEGORY OPTIONS =====
const {
setInputValue: setCategoryInputValue,
options: categoryOptions,
isLoadingOptions: isLoadingCategoryOptions,
loadMore: loadMoreCategories,
} = useSelect<ProductCategory>(
filterModal.open ? ProductCategoryApi.basePath : null,
'id',
'name',
'search'
);
// ===== FILTER HELPERS =====
const categoryIdValue = useMemo(() => {
if (!formik.values.category_id) return null;
const found = categoryOptions.find(
(opt) => String(opt.value) === formik.values.category_id
);
if (found) return found;
if (tableFilterState.categoryName) {
return { value: formik.values.category_id, label: tableFilterState.categoryName };
}
return null;
}, [formik.values.category_id, categoryOptions, tableFilterState.categoryName]);
// ===== HANDLE FILTER MODAL OPEN =====
const handleFilterModalOpen = () => {
formik.setValues({ category_id: tableFilterState.categoryFilter || null });
filterModal.openModal();
};
const handleFilterCategoryChange = (val: OptionType | OptionType[] | null) => {
const category = val as OptionType | null;
formik.setFieldValue('category_id', category?.value ? String(category.value) : null);
};
const [sorting, setSorting] = useState<SortingState>([]);
const { data: inventoryProducts, isLoading } = useSWR(
@@ -182,6 +253,7 @@ const InventoryProductTable = () => {
);
return (
<>
<div className='w-full'>
{/* Header Section */}
<div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
@@ -199,7 +271,7 @@ const InventoryProductTable = () => {
</RequirePermission>
</div>
{/* Search */}
{/* Search and Filter */}
<div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
<DebouncedTextInput
name='search'
@@ -216,6 +288,12 @@ const InventoryProductTable = () => {
'placeholder:font-semibold placeholder:text-base-content/50',
}}
/>
<ButtonFilter
values={tableFilterState}
excludeFields={['page', 'pageSize', 'search', 'categoryName']}
onClick={handleFilterModalOpen}
className='px-3 py-2.5'
/>
</div>
</div>
@@ -272,6 +350,62 @@ const InventoryProductTable = () => {
)}
</div>
</div>
{/* Filter Modal */}
<Modal
ref={filterModal.ref}
className={{
modal: 'p-0',
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
}}
>
<div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
<div className='flex items-center gap-2 text-primary'>
<Icon icon='heroicons:funnel' width={20} height={20} />
<h3 className='font-medium text-sm'>Filter Data</h3>
</div>
<Button
variant='link'
onClick={filterModal.closeModal}
className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
>
<Icon icon='heroicons:x-mark' width={20} height={20} />
</Button>
</div>
<form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
<div className='p-4 flex flex-col gap-1.5'>
<SelectInput
label='Kategori Produk'
placeholder='Pilih Kategori'
options={categoryOptions}
value={categoryIdValue}
onChange={handleFilterCategoryChange}
onInputChange={setCategoryInputValue}
isLoading={isLoadingCategoryOptions}
isClearable
onMenuScrollToBottom={loadMoreCategories}
className={{ wrapper: 'w-full' }}
/>
</div>
<div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
<Button
type='reset'
variant='soft'
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
>
Reset Filter
</Button>
<Button
type='submit'
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
disabled={!formik.isValid || formik.isSubmitting}
>
Apply Filter
</Button>
</div>
</form>
</Modal>
</>
);
};