feat: implement filter for stock log table

src/components/pages/inventory/product/detail/InventoryProductDetail.tsx

@@ -1,9 +1,16 @@
+'use client';
+
 import Card from '@/components/Card';
+import { OptionType } from '@/components/input/SelectInput';
 import { FormHeader } from '@/components/helper/form/FormHeader';
+import ButtonFilter from '@/components/helper/ButtonFilter';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { useModal } from '@/components/Modal';
+import StockLogFilterModal from '@/components/pages/inventory/product/detail/StockLogFilterModal';
 import StockLogTable from '@/components/pages/inventory/product/detail/StockLogTable';
 import StockProductWarehouseTable from '@/components/pages/inventory/product/detail/StockProductWarehouseTable';
 import { formatCurrency, formatNumber } from '@/lib/helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { InventoryProduct } from '@/types/api/inventory/product';
 import { useMemo } from 'react';
 
@@ -12,6 +19,35 @@ const InventoryProductDetail = ({
 }: {
   inventoryProduct?: InventoryProduct;
 }) => {
+  const filterModal = useModal();
+
+  const { state: filterState, updateFilter } = useTableFilter<{
+    warehouse_ids: OptionType<number>[];
+  }>({
+    initial: {
+      warehouse_ids: [],
+    },
+    persist: true,
+    storeName: 'inventory-product-stock-log-filter',
+  });
+
+  const filteredProductWarehouses = useMemo(() => {
+    const warehouses = inventoryProduct?.product_warehouses ?? [];
+    if (!filterState.warehouse_ids?.length) return warehouses;
+    const selectedIds = new Set(filterState.warehouse_ids.map((w) => w.value));
+    return warehouses.filter((pw) => selectedIds.has(pw.warehouse_id));
+  }, [inventoryProduct?.product_warehouses, filterState.warehouse_ids]);
+
+  const filterSubmitHandler = (values: {
+    warehouse_ids: OptionType<number>[];
+  }) => {
+    updateFilter('warehouse_ids', values.warehouse_ids, true);
+  };
+
+  const filterResetHandler = () => {
+    updateFilter('warehouse_ids', [], true);
+  };
+
   return (
     <div className='flex flex-col gap-4 p-4'>
       <FormHeader
@@ -104,13 +140,28 @@ const InventoryProductDetail = ({
       />
 
       <RequirePermission permissions={'lti.inventory.stock_log.list'}>
-        {inventoryProduct?.product_warehouses?.map((productWarehouse) => (
+        <div className='flex justify-end'>
+          <ButtonFilter
+            values={{ warehouse_ids: filterState.warehouse_ids }}
+            onClick={filterModal.openModal}
+            className='px-3 py-2.5'
+          />
+        </div>
+        {filteredProductWarehouses.map((productWarehouse) => (
           <StockLogTable
             key={productWarehouse.id}
             productWarehouse={productWarehouse}
           />
         ))}
       </RequirePermission>
+
+      <StockLogFilterModal
+        ref={filterModal.ref}
+        productWarehouses={inventoryProduct?.product_warehouses ?? []}
+        initialValues={{ warehouse_ids: filterState.warehouse_ids }}
+        onSubmit={filterSubmitHandler}
+        onReset={filterResetHandler}
+      />
     </div>
   );
 };