diff --git a/src/components/pages/report/logistic-stock/LogisticStockTabs.tsx b/src/components/pages/report/logistic-stock/LogisticStockTabs.tsx
index 1e2d2824..a7b844f3 100644
--- a/src/components/pages/report/logistic-stock/LogisticStockTabs.tsx
+++ b/src/components/pages/report/logistic-stock/LogisticStockTabs.tsx
@@ -1,14 +1,19 @@
 'use client';
 
+import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 import PurchasesPerSupplierTab from '@/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab';
+import { useLogisticStockTabStore } from '@/stores/logistic-stock-tab/logistic-stock-tab.store';
 
 const LogisticStockTabs = () => {
+  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const tabActions = useLogisticStockTabStore((state) => state.tabActions);
+
   const tabs = [
     {
       id: '1',
       label: 'Rekapitulasi Pembelian Per Supplier',
-      content: <PurchasesPerSupplierTab />,
+      content: <PurchasesPerSupplierTab tabId='1' />,
     },
     // {
     //   id: '2',
@@ -23,8 +28,20 @@ const LogisticStockTabs = () => {
   ];
 
   return (
-    <section className='w-full p-4'>
-      <Tabs tabs={tabs} variant='lifted' />
+    <section className='w-full'>
+      <Tabs
+        tabs={tabs}
+        variant='lifted'
+        activeTabId={activeTabId}
+        onTabChange={setActiveTabId}
+        className={{
+          tabHeaderWrapper:
+            'justify-between items-center p-3 border-b border-base-content/10',
+          tab: 'w-fit',
+          content: 'p-0 m-0',
+        }}
+        sideContent={tabActions[activeTabId] || null}
+      />
     </section>
   );
 };
diff --git a/src/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton.tsx b/src/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton.tsx
new file mode 100644
index 00000000..a5268b2f
--- /dev/null
+++ b/src/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { LogisticPurchasePerSupplierReport } from '@/types/api/report/logistic-stock';
+import { ColumnDef } from '@tanstack/react-table';
+
+const PurchasePerSupplierSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ColumnDef<LogisticPurchasePerSupplierReport['rows'][0]>[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default PurchasePerSupplierSkeleton;
diff --git a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
index e1659470..4176e8ba 100644
--- a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+++ b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
@@ -1,11 +1,9 @@
-import { useState, useMemo, useCallback } from 'react';
-import { ChangeEventHandler } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import useSWR from 'swr';
 import Card from '@/components/Card';
-import SelectInput, {
-  useSelect,
-  OptionType,
-} from '@/components/input/SelectInput';
+import { useSelect, OptionType } from '@/components/input/SelectInput';
+import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
 import DateInput from '@/components/input/DateInput';
 import { AreaApi } from '@/services/api/master-data';
 import { SupplierApi } from '@/services/api/master-data';
@@ -14,24 +12,30 @@ import { ProductCategoryApi } from '@/services/api/master-data';
 import { LogisticApi } from '@/services/api/report/logistic-stock';
 import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
-import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
 import {
   LogisticPurchasePerSupplierReport,
   LogisticPurchasePerSupplierSummary,
 } from '@/types/api/report/logistic-stock';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import Pagination from '@/components/Pagination';
 import Button from '@/components/Button';
 import Dropdown from '@/components/Dropdown';
 import MenuItem from '@/components/menu/MenuItem';
 import Menu from '@/components/menu/Menu';
+import Modal from '@/components/Modal';
+import { useModal } from '@/components/Modal';
 import { generatePurchasesPerSupplierPDF } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExportPDF';
 import { generatePurchasesPerSupplierExcel } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExportXLSX';
+import PurchasePerSupplierSkeleton from '@/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton';
 import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
+import { useLogisticStockTabStore } from '@/stores/logistic-stock-tab/logistic-stock-tab.store';
 
-const PurchasesPerSupplierTab = () => {
+interface PurchasesPerSupplierTabProps {
+  tabId: string;
+}
+
+const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
   // ===== STATE MANAGEMENT =====
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
@@ -39,31 +43,14 @@ const PurchasesPerSupplierTab = () => {
 
   // ===== PAGINATION STATE =====
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize] = useState(10);
 
   // ===== SUBMISSION STATE =====
   const [isSubmitted, setIsSubmitted] = useState(false);
 
-  // ===== TABLE FILTER STATE =====
-  const { state: tableFilterState, updateFilter } = useTableFilter({
-    initial: {
-      area_id: [] as string[],
-      supplier_id: [] as string[],
-      product_id: [] as string[],
-      product_category_id: [] as string[],
-      received_date: '',
-      po_date: '',
-      start_date: '',
-      end_date: '',
-      sort_by: '',
-      filter_by: 'received_date',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-    },
-  });
+  const filterModal = useModal();
 
+  // ===== OPTIONS (Declare before filter state) =====
   const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
     AreaApi.basePath,
     'id',
@@ -100,117 +87,232 @@ const PurchasesPerSupplierTab = () => {
     []
   );
 
-  const areaChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const arr = Array.isArray(val) ? val : val ? [val] : [];
-      updateFilter(
-        'area_id',
-        arr.map((v) => String((v as OptionType).value))
-      );
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
+  // ===== APPLIED FILTER STATE (Yang sudah di-apply) =====
+  const [appliedFilterArea, setAppliedFilterArea] = useState<
+    typeof areaOptions
+  >([]);
+  const [appliedFilterSupplier, setAppliedFilterSupplier] = useState<
+    typeof supplierOptions
+  >([]);
+  const [appliedFilterProduct, setAppliedFilterProduct] = useState<
+    typeof productOptions
+  >([]);
+  const [appliedFilterProductCategory, setAppliedFilterProductCategory] =
+    useState<typeof productCategoryOptions>([]);
+  const [appliedFilterByType, setAppliedFilterByType] = useState<
+    (typeof dataTypeOptions)[0] | null
+  >(null);
+  const [appliedFilterSortBy, setAppliedFilterSortBy] = useState<
+    (typeof sortByOptions)[0] | null
+  >(null);
+  const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
+  const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
+  const [dateErrorShown, setDateErrorShown] = useState(false);
+  const [hasDateError, setHasDateError] = useState(false);
 
-  const supplierChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const arr = Array.isArray(val) ? val : val ? [val] : [];
-      updateFilter(
-        'supplier_id',
-        arr.map((v) => String((v as OptionType).value))
-      );
-      setIsSubmitted(false);
-    },
-    [updateFilter]
+  // ===== PENDING FILTER STATE (Yang ada di modal, belum di-apply) =====
+  const [filterArea, setFilterArea] = useState<typeof areaOptions>([]);
+  const [filterSupplier, setFilterSupplier] = useState<typeof supplierOptions>(
+    []
   );
+  const [filterProduct, setFilterProduct] = useState<typeof productOptions>([]);
+  const [filterProductCategory, setFilterProductCategory] = useState<
+    typeof productCategoryOptions
+  >([]);
+  const [filterByType, setFilterByType] = useState<
+    (typeof dataTypeOptions)[0] | null
+  >(null);
+  const [filterSortBy, setFilterSortBy] = useState<
+    (typeof sortByOptions)[0] | null
+  >(null);
+  const [filterStartDate, setFilterStartDate] = useState('');
+  const [filterEndDate, setFilterEndDate] = useState('');
 
-  const productChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const arr = Array.isArray(val) ? val : val ? [val] : [];
-      updateFilter(
-        'product_id',
-        arr.map((v) => String((v as OptionType).value))
-      );
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
+  // ===== FILTER HANDLERS =====
+  const handleFilterModalOpen = useCallback(() => {
+    setFilterArea(appliedFilterArea);
+    setFilterSupplier(appliedFilterSupplier);
+    setFilterProduct(appliedFilterProduct);
+    setFilterProductCategory(appliedFilterProductCategory);
+    setFilterByType(appliedFilterByType);
+    setFilterSortBy(appliedFilterSortBy);
+    setFilterStartDate(appliedFilterStartDate);
+    setFilterEndDate(appliedFilterEndDate);
+    filterModal.openModal();
+  }, [
+    filterModal,
+    appliedFilterArea,
+    appliedFilterSupplier,
+    appliedFilterProduct,
+    appliedFilterProductCategory,
+    appliedFilterByType,
+    appliedFilterSortBy,
+    appliedFilterStartDate,
+    appliedFilterEndDate,
+  ]);
 
-  const productCategoryChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const arr = Array.isArray(val) ? val : val ? [val] : [];
-      updateFilter(
-        'product_category_id',
-        arr.map((v) => String((v as OptionType).value))
-      );
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const dataTypeChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
-      const filterValue =
-        (newVal?.value as 'received_date' | 'po_date') || 'received_date';
-      updateFilter('filter_by', filterValue);
-      updateFilter('received_date', '');
-      updateFilter('po_date', '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const sortByHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
-      const sortValue = (newVal?.value as 'ASC' | 'DESC') || 'ASC';
-      updateFilter('sort_by', sortValue);
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const startDateChangeHandler = useCallback<
-    ChangeEventHandler<HTMLInputElement>
-  >(
-    (e) => {
-      const val = e.target.value;
-      updateFilter('start_date', val || '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const endDateChangeHandler = useCallback<
-    ChangeEventHandler<HTMLInputElement>
-  >(
-    (e) => {
-      const val = e.target.value;
-      updateFilter('end_date', val || '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const resetFilters = useCallback(() => {
-    updateFilter('area_id', []);
-    updateFilter('supplier_id', []);
-    updateFilter('product_id', []);
-    updateFilter('product_category_id', []);
-    updateFilter('received_date', '');
-    updateFilter('po_date', '');
-    updateFilter('start_date', '');
-    updateFilter('end_date', '');
-    updateFilter('sort_by', '');
-    updateFilter('filter_by', 'received_date');
+  const handleResetFilters = useCallback(() => {
     setIsSubmitted(false);
-  }, [updateFilter]);
+    setFilterArea([]);
+    setFilterSupplier([]);
+    setFilterProduct([]);
+    setFilterProductCategory([]);
+    setFilterByType(null);
+    setFilterSortBy(null);
+    setFilterStartDate('');
+    setFilterEndDate('');
+    setAppliedFilterArea([]);
+    setAppliedFilterSupplier([]);
+    setAppliedFilterProduct([]);
+    setAppliedFilterProductCategory([]);
+    setAppliedFilterByType(null);
+    setAppliedFilterSortBy(null);
+    setAppliedFilterStartDate('');
+    setAppliedFilterEndDate('');
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
+  }, [dateErrorShown]);
 
-  const handleSubmit = useCallback(() => {
+  const handleApplyFilters = useCallback(() => {
+    setAppliedFilterArea(filterArea);
+    setAppliedFilterSupplier(filterSupplier);
+    setAppliedFilterProduct(filterProduct);
+    setAppliedFilterProductCategory(filterProductCategory);
+    setAppliedFilterByType(filterByType);
+    setAppliedFilterSortBy(filterSortBy);
+    setAppliedFilterStartDate(filterStartDate);
+    setAppliedFilterEndDate(filterEndDate);
     setIsSubmitted(true);
     setCurrentPage(1);
-  }, []);
+    filterModal.closeModal();
+  }, [
+    filterModal,
+    filterArea,
+    filterSupplier,
+    filterProduct,
+    filterProductCategory,
+    filterByType,
+    filterSortBy,
+    filterStartDate,
+    filterEndDate,
+  ]);
+
+  const handleStartDateChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setFilterStartDate(value);
+
+      if (value && filterEndDate) {
+        const startDate = new Date(value);
+        const endDateObj = new Date(filterEndDate);
+
+        if (endDateObj < startDate) {
+          setHasDateError(true);
+          if (!dateErrorShown) {
+            toast.error('Tanggal akhir tidak boleh masa lampau', {
+              duration: Infinity,
+            });
+            setDateErrorShown(true);
+          }
+        } else {
+          setHasDateError(false);
+          if (dateErrorShown) {
+            toast.dismiss();
+            setDateErrorShown(false);
+          }
+        }
+      } else {
+        setHasDateError(false);
+      }
+    },
+    [filterEndDate, dateErrorShown]
+  );
+
+  const handleEndDateChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setFilterEndDate(value);
+
+      if (value && filterStartDate) {
+        const startDateObj = new Date(filterStartDate);
+        const endDate = new Date(value);
+
+        if (endDate < startDateObj) {
+          setHasDateError(true);
+          if (!dateErrorShown) {
+            toast.error('Tanggal akhir tidak boleh masa lampau', {
+              duration: Infinity,
+            });
+            setDateErrorShown(true);
+          }
+          return;
+        }
+      }
+
+      setHasDateError(false);
+      if (dateErrorShown) {
+        toast.dismiss();
+        setDateErrorShown(false);
+      }
+    },
+    [filterStartDate, dateErrorShown]
+  );
+
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+
+    // Date filter (start_date + end_date = 1 filter)
+    if (appliedFilterStartDate || appliedFilterEndDate) {
+      count += 1;
+    }
+
+    // Area filter
+    if (appliedFilterArea.length > 0) {
+      count += 1;
+    }
+
+    // Supplier filter
+    if (appliedFilterSupplier.length > 0) {
+      count += 1;
+    }
+
+    // Product filter
+    if (appliedFilterProduct.length > 0) {
+      count += 1;
+    }
+
+    // Product category filter
+    if (appliedFilterProductCategory.length > 0) {
+      count += 1;
+    }
+
+    // Filter by type filter
+    if (appliedFilterByType) {
+      count += 1;
+    }
+
+    // Sort by filter
+    if (appliedFilterSortBy) {
+      count += 1;
+    }
+
+    return count;
+  }, [
+    appliedFilterStartDate,
+    appliedFilterEndDate,
+    appliedFilterArea,
+    appliedFilterSupplier,
+    appliedFilterProduct,
+    appliedFilterProductCategory,
+    appliedFilterByType,
+    appliedFilterSortBy,
+  ]);
+
+  const hasFilters = activeFiltersCount > 0;
 
   // ===== DATA FETCHING =====
   const { data: purchasePerSupplier, isLoading } = useSWR(
@@ -218,33 +320,38 @@ const PurchasesPerSupplierTab = () => {
       ? () => {
           const params = {
             area_id:
-              tableFilterState.area_id.length > 0
-                ? tableFilterState.area_id.join(',')
+              appliedFilterArea.length > 0
+                ? appliedFilterArea.map((v) => String(v.value)).join(',')
                 : undefined,
             supplier_id:
-              tableFilterState.supplier_id.length > 0
-                ? tableFilterState.supplier_id.join(',')
+              appliedFilterSupplier.length > 0
+                ? appliedFilterSupplier.map((v) => String(v.value)).join(',')
                 : undefined,
             product_id:
-              tableFilterState.product_id.length > 0
-                ? tableFilterState.product_id.join(',')
+              appliedFilterProduct.length > 0
+                ? appliedFilterProduct.map((v) => String(v.value)).join(',')
                 : undefined,
             product_category_id:
-              tableFilterState.product_category_id.length > 0
-                ? tableFilterState.product_category_id.join(',')
+              appliedFilterProductCategory.length > 0
+                ? appliedFilterProductCategory
+                    .map((v) => String(v.value))
+                    .join(',')
                 : undefined,
             received_date:
-              tableFilterState.filter_by === 'received_date'
-                ? tableFilterState.start_date || undefined
+              appliedFilterByType?.value === 'received_date'
+                ? appliedFilterStartDate || undefined
                 : undefined,
             po_date:
-              tableFilterState.filter_by === 'po_date'
-                ? tableFilterState.start_date || undefined
+              appliedFilterByType?.value === 'po_date'
+                ? appliedFilterStartDate || undefined
                 : undefined,
-            start_date: tableFilterState.start_date || undefined,
-            end_date: tableFilterState.end_date || undefined,
-            sort_by: tableFilterState.sort_by || undefined,
-            filter_by: tableFilterState.filter_by || undefined,
+            start_date: appliedFilterStartDate || undefined,
+            end_date: appliedFilterEndDate || undefined,
+            sort_by:
+              (appliedFilterSortBy?.value as 'ASC' | 'DESC') || undefined,
+            filter_by:
+              (appliedFilterByType?.value as 'received_date' | 'po_date') ||
+              undefined,
             page: currentPage,
             limit: pageSize,
           };
@@ -289,33 +396,35 @@ const PurchasesPerSupplierTab = () => {
   > => {
     const params = {
       area_id:
-        tableFilterState.area_id.length > 0
-          ? tableFilterState.area_id.join(',')
+        appliedFilterArea.length > 0
+          ? appliedFilterArea.map((v) => String(v.value)).join(',')
           : undefined,
       supplier_id:
-        tableFilterState.supplier_id.length > 0
-          ? tableFilterState.supplier_id.join(',')
+        appliedFilterSupplier.length > 0
+          ? appliedFilterSupplier.map((v) => String(v.value)).join(',')
           : undefined,
       product_id:
-        tableFilterState.product_id.length > 0
-          ? tableFilterState.product_id.join(',')
+        appliedFilterProduct.length > 0
+          ? appliedFilterProduct.map((v) => String(v.value)).join(',')
           : undefined,
       product_category_id:
-        tableFilterState.product_category_id.length > 0
-          ? tableFilterState.product_category_id.join(',')
+        appliedFilterProductCategory.length > 0
+          ? appliedFilterProductCategory.map((v) => String(v.value)).join(',')
           : undefined,
       received_date:
-        tableFilterState.filter_by === 'received_date'
-          ? tableFilterState.start_date || undefined
+        appliedFilterByType?.value === 'received_date'
+          ? appliedFilterStartDate || undefined
           : undefined,
       po_date:
-        tableFilterState.filter_by === 'po_date'
-          ? tableFilterState.start_date || undefined
+        appliedFilterByType?.value === 'po_date'
+          ? appliedFilterStartDate || undefined
           : undefined,
-      start_date: tableFilterState.start_date || undefined,
-      end_date: tableFilterState.end_date || undefined,
-      sort_by: tableFilterState.sort_by || undefined,
-      filter_by: tableFilterState.filter_by || undefined,
+      start_date: appliedFilterStartDate || undefined,
+      end_date: appliedFilterEndDate || undefined,
+      sort_by: (appliedFilterSortBy?.value as 'ASC' | 'DESC') || undefined,
+      filter_by:
+        (appliedFilterByType?.value as 'received_date' | 'po_date') ||
+        undefined,
       limit: 100,
       page: 1,
     };
@@ -338,7 +447,16 @@ const PurchasesPerSupplierTab = () => {
     return isResponseSuccess(response)
       ? (response.data as unknown as LogisticPurchasePerSupplierReport[])
       : null;
-  }, [tableFilterState]);
+  }, [
+    appliedFilterArea,
+    appliedFilterSupplier,
+    appliedFilterProduct,
+    appliedFilterProductCategory,
+    appliedFilterStartDate,
+    appliedFilterEndDate,
+    appliedFilterByType,
+    appliedFilterSortBy,
+  ]);
 
   // ===== EXPORT HANDLERS =====
   const handleExportExcel = useCallback(async () => {
@@ -379,48 +497,26 @@ const PurchasesPerSupplierTab = () => {
       }
 
       const areaName =
-        tableFilterState.area_id.length > 0
-          ? tableFilterState.area_id
-              .map(
-                (id) =>
-                  areaOptions.find((opt) => opt.value === Number(id))?.label
-              )
-              .filter(Boolean)
-              .join(', ') || 'Semua Area'
+        appliedFilterArea.length > 0
+          ? appliedFilterArea.map((c) => c.label).join(', ') || 'Semua Area'
           : 'Semua Area';
 
       const supplierName =
-        tableFilterState.supplier_id.length > 0
-          ? tableFilterState.supplier_id
-              .map(
-                (id) =>
-                  supplierOptions.find((opt) => opt.value === Number(id))?.label
-              )
-              .filter(Boolean)
-              .join(', ') || 'Semua Supplier'
+        appliedFilterSupplier.length > 0
+          ? appliedFilterSupplier.map((c) => c.label).join(', ') ||
+            'Semua Supplier'
           : 'Semua Supplier';
 
       const productName =
-        tableFilterState.product_id.length > 0
-          ? tableFilterState.product_id
-              .map(
-                (id) =>
-                  productOptions.find((opt) => opt.value === Number(id))?.label
-              )
-              .filter(Boolean)
-              .join(', ') || 'Semua Produk'
+        appliedFilterProduct.length > 0
+          ? appliedFilterProduct.map((c) => c.label).join(', ') ||
+            'Semua Produk'
           : 'Semua Produk';
 
       const productCategoryName =
-        tableFilterState.product_category_id.length > 0
-          ? tableFilterState.product_category_id
-              .map(
-                (id) =>
-                  productCategoryOptions.find((opt) => opt.value === Number(id))
-                    ?.label
-              )
-              .filter(Boolean)
-              .join(', ') || 'Semua Kategori Produk'
+        appliedFilterProductCategory.length > 0
+          ? appliedFilterProductCategory.map((c) => c.label).join(', ') ||
+            'Semua Kategori Produk'
           : 'Semua Kategori Produk';
 
       const exportParams = {
@@ -428,9 +524,11 @@ const PurchasesPerSupplierTab = () => {
         supplier_name: supplierName,
         product_name: productName,
         product_category_name: productCategoryName,
-        filter_by: tableFilterState.filter_by || 'received_date',
-        start_date: tableFilterState.start_date || '',
-        end_date: tableFilterState.end_date || '',
+        filter_by:
+          (appliedFilterByType?.value as 'received_date' | 'po_date') ||
+          undefined,
+        start_date: appliedFilterStartDate || undefined,
+        end_date: appliedFilterEndDate || undefined,
       };
 
       await generatePurchasesPerSupplierPDF({
@@ -445,33 +543,101 @@ const PurchasesPerSupplierTab = () => {
     }
   }, [
     logisticPurchasePerSupplierExport,
-    tableFilterState,
-    areaOptions,
-    supplierOptions,
-    productOptions,
-    productCategoryOptions,
+    appliedFilterArea,
+    appliedFilterSupplier,
+    appliedFilterProduct,
+    appliedFilterProductCategory,
+    appliedFilterStartDate,
+    appliedFilterEndDate,
+    appliedFilterByType,
   ]);
 
-  // ===== PAGINATION HANDLERS =====
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
+  // ===== REGISTER TAB ACTIONS TO STORE =====
+  const setTabActions = useLogisticStockTabStore(
+    (state) => state.setTabActions
+  );
+  const clearTabActions = useLogisticStockTabStore(
+    (state) => state.clearTabActions
+  );
 
-  const handleRowChange = (pageSize: number) => {
-    setPageSize(pageSize);
-  };
+  useEffect(() => {
+    setTabActions(
+      tabId,
+      <div className='flex flex-row gap-3'>
+        <Button
+          variant='outline'
+          color='none'
+          onClick={handleFilterModalOpen}
+          className={cn(
+            'px-3 py-2.5',
+            'rounded-lg! font-semibold text-sm gap-1.5',
+            'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
+            hasFilters && 'border-primary-gradient text-primary'
+          )}
+        >
+          <Icon icon='heroicons:funnel' width={18} height={18} />
+          Filter
+          {hasFilters && (
+            <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+              {activeFiltersCount}
+            </span>
+          )}
+        </Button>
 
-  const handleNextPage = () => {
-    if (meta && currentPage < meta.total_pages) {
-      setCurrentPage(currentPage + 1);
-    }
-  };
+        <Dropdown
+          trigger={
+            <Button
+              variant='outline'
+              color='none'
+              isLoading={isAnyExportLoading}
+              className={cn(
+                'px-3 py-2.5',
+                'rounded-lg font-semibold text-sm gap-1.5',
+                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
+              )}
+            >
+              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
+              Export
+              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
+                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              </div>
+            </Button>
+          }
+          align='end'
+          className={{
+            content:
+              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
+          }}
+        >
+          <Menu className='p-0 w-full'>
+            <MenuItem
+              className='text-sm p-3'
+              title='Excel'
+              onClick={handleExportExcel}
+            />
+            <MenuItem
+              className='text-sm p-3'
+              title='PDF'
+              onClick={handleExportPdf}
+            />
+          </Menu>
+        </Dropdown>
+      </div>
+    );
+  }, [
+    tabId,
+    hasFilters,
+    activeFiltersCount,
+    isAnyExportLoading,
+    filterModal.open,
+    setTabActions,
+  ]);
 
-  const handlePrevPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
+  useEffect(() => {
+    return () => {
+      clearTabActions(tabId);
+    };
+  }, [tabId, clearTabActions]);
 
   const getTableColumns = (
     summary: LogisticPurchasePerSupplierSummary
@@ -485,11 +651,11 @@ const PurchasesPerSupplierTab = () => {
         cell: (props) => props.row.index + 1,
         footer: () => <div className='font-semibold text-gray-900'>Total</div>,
       },
-
       {
         id: 'received_date',
         header: 'Tanggal Terima',
         accessorKey: 'receive_date',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.receive_date;
           return formatDate(value, 'DD MMM YYYY');
@@ -499,6 +665,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'po_date',
         header: 'Tanggal PO',
         accessorKey: 'po_date',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.po_date;
           return formatDate(value, 'DD MMM YYYY');
@@ -508,6 +675,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'po_number',
         header: 'No. Referensi',
         accessorKey: 'po_number',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.po_number;
           return value || '-';
@@ -517,6 +685,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'product_name',
         header: 'Nama Produk',
         accessorKey: 'product.name',
+        enableSorting: false,
         cell: (props) => {
           const product = props.row.original.product;
           return product?.name || '-';
@@ -526,6 +695,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'destination_warehouse',
         header: 'Tujuan',
         accessorKey: 'warehouse.name',
+        enableSorting: false,
         cell: (props) => {
           const warehouse = props.row.original.warehouse;
           return warehouse?.name || '-';
@@ -535,6 +705,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'qty',
         header: 'QTY',
         accessorKey: 'qty',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.qty;
           return <div className='text-right'>{formatNumber(value)}</div>;
@@ -549,6 +720,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'price',
         header: 'Harga Beli (Rp)',
         accessorKey: 'unit_price',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.unit_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
@@ -563,6 +735,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'purchase_amount',
         header: 'Value Harga Beli (Rp)',
         accessorKey: 'purchase_value',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.purchase_value;
           return <div className='text-right'>{formatCurrency(value)}</div>;
@@ -577,6 +750,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'transport',
         header: 'Transport (Rp)',
         accessorKey: 'transport_unit_price',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.transport_unit_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
@@ -591,6 +765,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'value_transport',
         header: 'Value Transport (Rp)',
         accessorKey: 'transport_value',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.transport_value;
           return <div className='text-right'>{formatCurrency(value)}</div>;
@@ -605,6 +780,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'total',
         header: 'Jumlah (Rp)',
         accessorKey: 'total_amount',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.total_amount;
           return <div className='text-right'>{formatCurrency(value)}</div>;
@@ -619,6 +795,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'expedition_vendor_name',
         header: 'Ekspedisi',
         accessorKey: 'expedition',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.expedition;
           return value || '-';
@@ -628,6 +805,7 @@ const PurchasesPerSupplierTab = () => {
         id: 'travel_number',
         header: 'Surat Jalan',
         accessorKey: 'delivery_number',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.delivery_number;
           return value || '-';
@@ -638,156 +816,50 @@ const PurchasesPerSupplierTab = () => {
   };
 
   return (
-    <div className='w-full p-0 sm:p-4'>
-      <Card
-        subtitle='Laporan > Rekapitulasi Pembelian Per Supplier'
-        className={{ wrapper: 'w-full', body: 'p-1!' }}
-      >
-        <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
-          <SelectInput
-            label='Area'
-            placeholder='Pilih Area'
-            isMulti
-            options={areaOptions}
-            value={areaOptions.filter((opt) =>
-              (tableFilterState.area_id || [])
-                .map(String)
-                .includes(String(opt.value))
-            )}
-            onChange={areaChangeHandler}
-            isLoading={isLoadingAreas}
-            isClearable
-          />
-          <SelectInput
-            label='Supplier'
-            placeholder='Pilih Supplier'
-            isMulti
-            options={supplierOptions}
-            value={supplierOptions.filter((opt) =>
-              (tableFilterState.supplier_id || [])
-                .map(String)
-                .includes(String(opt.value))
-            )}
-            onChange={supplierChangeHandler}
-            isLoading={isLoadingSuppliers}
-            isClearable
-          />
-          <SelectInput
-            label='Produk'
-            placeholder='Pilih Produk'
-            isMulti
-            options={productOptions}
-            value={productOptions.filter((opt) =>
-              (tableFilterState.product_id || [])
-                .map(String)
-                .includes(String(opt.value))
-            )}
-            onChange={productChangeHandler}
-            isLoading={isLoadingProducts}
-            isClearable
-          />
-        </div>
-        <div className='grid md:grid-cols-3 grid-cols-1 gap-4'>
-          <SelectInput
-            label='Kategori Produk'
-            placeholder='Pilih Kategori Produk'
-            isMulti
-            options={productCategoryOptions}
-            value={productCategoryOptions.filter((opt) =>
-              (tableFilterState.product_category_id || [])
-                .map(String)
-                .includes(String(opt.value))
-            )}
-            onChange={productCategoryChangeHandler}
-            isLoading={isLoadingProductCategories}
-            isClearable
-          />
-          <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
-            <SelectInput
-              label='Filter Berdasarkan'
-              placeholder='Pilih Filter Berdasarkan'
-              options={dataTypeOptions}
-              value={
-                dataTypeOptions?.find(
-                  (option) => option.value === tableFilterState.filter_by
-                ) || null
-              }
-              onChange={dataTypeChangeHandler}
-              isLoading={false}
-              isClearable={false}
-            />
-            <SelectInput
-              label='Urutkan Berdasarkan'
-              placeholder='Urutkan Berdasarkan'
-              options={sortByOptions}
-              value={
-                sortByOptions?.find(
-                  (option) => option.value === tableFilterState.sort_by
-                ) || null
-              }
-              onChange={sortByHandler}
-              isLoading={false}
-              isClearable={false}
-            />
-          </div>
-          <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
-            <DateInput
-              label='Tanggal Awal'
-              name='start_date'
-              placeholder='Pilih Tanggal Awal'
-              value={tableFilterState.start_date}
-              onChange={startDateChangeHandler}
-            />
-            <DateInput
-              label='Tanggal Akhir'
-              name='end_date'
-              placeholder='Pilih Tanggal Akhir'
-              value={tableFilterState.end_date}
-              onChange={endDateChangeHandler}
-            />
-          </div>
-        </div>
-        <div className='mt-4 flex justify-end gap-2 [&_button]:px-4'>
-          <Button color='primary' onClick={handleSubmit}>
-            <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
-            Cari
-          </Button>
-          <Button color='warning' onClick={resetFilters}>
-            <Icon icon='heroicons-outline:refresh' width={20} height={20} />
-            Reset
-          </Button>
-          <Dropdown
-            trigger={
-              <Button color='success' isLoading={isAnyExportLoading}>
-                Export
-                <Icon
-                  icon='heroicons-outline:download'
-                  width={20}
-                  height={20}
-                />
-              </Button>
-            }
-            align='end'
-          >
-            <Menu className='w-32'>
-              <MenuItem title='Excel' onClick={handleExportExcel} />
-              <MenuItem title='PDF' onClick={handleExportPdf} />
-            </Menu>
-          </Dropdown>
-        </div>
-
+    <>
+      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
-          <div className='mt-6 text-center text-gray-500'>
-            Silakan pilih filter dan klik tombol Submit untuk menampilkan data.
-          </div>
+          <PurchasePerSupplierSkeleton
+            columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
+            icon={
+              <Icon
+                icon='heroicons:funnel'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='No Filters Selected'
+            subtitle='Please choose filters to narrow down your results and make your search easier.'
+          />
         ) : isLoading ? (
-          <div className='w-full flex flex-row justify-center items-center p-4'>
-            <span className='loading loading-spinner loading-xl' />
-          </div>
+          <PurchasePerSupplierSkeleton
+            columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
+            icon={
+              <Icon
+                icon='heroicons:document-report'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='Memuat Data Pembelian Per Supplier'
+            subtitle='Silakan tunggu sebentar...'
+          />
         ) : data.length === 0 ? (
-          <div className='mt-6 text-center text-gray-500'>
-            Tidak ada data yang dapat ditampilkan...
-          </div>
+          <PurchasePerSupplierSkeleton
+            columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
+            icon={
+              <Icon
+                icon='heroicons:chart-bar'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='Data Not Yet Available'
+            subtitle='Please change your filters to get the data.'
+          />
         ) : (
           data.map((supplierReport) => {
             const summary = supplierReport.summary || {
@@ -808,15 +880,17 @@ const PurchasesPerSupplierTab = () => {
                 title={supplierReport.supplier.name}
                 subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
                 className={{
-                  wrapper: 'w-full rounded-2xl',
+                  wrapper: 'w-full rounded-lg border-none',
                   body: 'p-0',
                   title:
-                    'py-1.5 px-3 bg-primary text-white text-lg font-normal',
+                    'px-2 py-1.5 font-normal text-sm bg-primary text-white',
                   subtitle:
-                    'px-3 pb-1 bg-primary text-white text-sm font-normal',
+                    'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
+                  collapsible: 'rounded-lg',
                 }}
                 variant='bordered'
                 collapsible={true}
+                defaultCollapsed={true}
               >
                 <Table
                   data={supplierReport.rows}
@@ -825,7 +899,8 @@ const PurchasesPerSupplierTab = () => {
                   renderFooter={supplierReport.rows.length > 0}
                   className={{
                     containerClassName: 'w-full mb-0!',
-                    tableWrapperClassName: 'overflow-x-auto',
+                    tableWrapperClassName:
+                      'overflow-x-auto rounded-tr-none rounded-tl-none',
                     tableClassName: 'w-full table-auto text-sm',
                     headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                     headerColumnClassName:
@@ -846,22 +921,161 @@ const PurchasesPerSupplierTab = () => {
             );
           })
         )}
-      </Card>
-      {meta && data.length > 0 && (
-        <div className='mt-6'>
-          <Pagination
-            currentPage={meta.page}
-            totalItems={meta.total_results}
-            onPageChange={handlePageChange}
-            onRowChange={handleRowChange}
-            onNextPage={handleNextPage}
-            onPrevPage={handlePrevPage}
-            rowOptions={[10, 25, 50, 100]}
-            itemsPerPage={meta.limit}
+      </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',
+        }}
+      >
+        {/* Modal Header */}
+        <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>
+        <div className='p-4 flex flex-col gap-3'>
+          {/* Date Filter */}
+          <div>
+            <label className='block text-xs font-semibold text-base-content py-2'>
+              Tanggal
+            </label>
+            <div className='flex flex-row gap-1.5 items-center justify-between'>
+              <DateInput
+                name='start_date'
+                value={filterStartDate}
+                onChange={handleStartDateChange}
+                className={{ wrapper: 'w-full' }}
+                isNestedModal
+              />
+              <hr className='w-full max-w-3 h-px border-base-content/10' />
+              <DateInput
+                name='end_date'
+                value={filterEndDate}
+                onChange={handleEndDateChange}
+                className={{ wrapper: 'w-full' }}
+                isNestedModal
+              />
+            </div>
+          </div>
+
+          {/* Area Filter */}
+          <SelectInputCheckbox
+            label='Area'
+            placeholder='Pilih Area'
+            options={areaOptions}
+            value={filterArea}
+            onChange={(val) => {
+              setFilterArea(Array.isArray(val) ? val : val ? [val] : []);
+            }}
+            isLoading={isLoadingAreas}
+            isClearable
+            className={{ wrapper: 'w-full' }}
+          />
+
+          {/* Supplier Filter */}
+          <SelectInputCheckbox
+            label='Supplier'
+            placeholder='Pilih Supplier'
+            options={supplierOptions}
+            value={filterSupplier}
+            onChange={(val) => {
+              setFilterSupplier(Array.isArray(val) ? val : val ? [val] : []);
+            }}
+            isLoading={isLoadingSuppliers}
+            isClearable
+            className={{ wrapper: 'w-full' }}
+          />
+
+          {/* Product Filter */}
+          <SelectInputCheckbox
+            label='Produk'
+            placeholder='Pilih Produk'
+            options={productOptions}
+            value={filterProduct}
+            onChange={(val) => {
+              setFilterProduct(Array.isArray(val) ? val : val ? [val] : []);
+            }}
+            isLoading={isLoadingProducts}
+            isClearable
+            className={{ wrapper: 'w-full' }}
+          />
+
+          {/* Product Category Filter */}
+          <SelectInputCheckbox
+            label='Kategori Produk'
+            placeholder='Pilih Kategori Produk'
+            options={productCategoryOptions}
+            value={filterProductCategory}
+            onChange={(val) => {
+              setFilterProductCategory(
+                Array.isArray(val) ? val : val ? [val] : []
+              );
+            }}
+            isLoading={isLoadingProductCategories}
+            isClearable
+            className={{ wrapper: 'w-full' }}
+          />
+
+          {/* Filter By Type */}
+          <SelectInputRadio
+            label='Filter Berdasarkan'
+            placeholder='Pilih Filter Berdasarkan'
+            options={dataTypeOptions}
+            value={filterByType}
+            onChange={(val) => {
+              if (val && !Array.isArray(val)) {
+                setFilterByType(val);
+              }
+            }}
+            className={{ wrapper: 'w-full' }}
+          />
+
+          {/* Sort By */}
+          <SelectInputRadio
+            label='Urutkan Berdasarkan'
+            placeholder='Pilih Urutkan Berdasarkan'
+            options={sortByOptions}
+            value={filterSortBy}
+            onChange={(val) => {
+              if (val && !Array.isArray(val)) {
+                setFilterSortBy(val);
+              }
+            }}
+            className={{ wrapper: 'w-full' }}
           />
         </div>
-      )}
-    </div>
+
+        {/* Modal Footer */}
+        <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
+          <Button
+            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={handleResetFilters}
+          >
+            Reset Filter
+          </Button>
+          <Button
+            className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+            onClick={handleApplyFilters}
+            disabled={hasDateError}
+          >
+            Apply Filter
+          </Button>
+        </div>
+      </Modal>
+    </>
   );
 };
 
diff --git a/src/stores/logistic-stock-tab/logistic-stock-tab.store.ts b/src/stores/logistic-stock-tab/logistic-stock-tab.store.ts
new file mode 100644
index 00000000..f9e142b1
--- /dev/null
+++ b/src/stores/logistic-stock-tab/logistic-stock-tab.store.ts
@@ -0,0 +1,51 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export type LogisticStockTabActionsSlice = {
+  // State - actions per tab ID
+  tabActions: Record<string, ReactNode>;
+
+  // Actions
+  setTabActions: (tabId: string, actions: ReactNode) => void;
+  clearTabActions: (tabId: string) => void;
+  clearAllTabActions: () => void;
+};
+
+export const useLogisticStockTabStore = create<LogisticStockTabActionsSlice>()(
+  devtools(
+    (set) => ({
+      tabActions: {},
+
+      setTabActions: (tabId, actions) =>
+        set(
+          (state) => ({
+            tabActions: {
+              ...state.tabActions,
+              [tabId]: actions,
+            },
+          }),
+          false,
+          'setTabActions'
+        ),
+
+      clearTabActions: (tabId) =>
+        set(
+          (state) => {
+            const { [tabId]: _, ...rest } = state.tabActions;
+            return { tabActions: rest };
+          },
+          false,
+          'clearTabActions'
+        ),
+
+      clearAllTabActions: () =>
+        set({ tabActions: {} }, false, 'clearAllTabActions'),
+    }),
+    {
+      name: 'LogisticStockTabStore',
+    }
+  )
+);