diff --git a/src/app/report/expense/page.tsx b/src/app/report/expense/page.tsx
index 99d2862e..bb497283 100644
--- a/src/app/report/expense/page.tsx
+++ b/src/app/report/expense/page.tsx
@@ -1,13 +1,9 @@
 'use client';
 
-import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
+import ReportExpenseTabs from '@/components/pages/report/expense/ReportExpenseTabs';
 
 const ReportExpense = () => {
-  return (
-    <div className='w-full p-4'>
-      <ReportExpenseTable />
-    </div>
-  );
+  return <ReportExpenseTabs />;
 };
 
 export default ReportExpense;
diff --git a/src/components/pages/report/expense/ReportExpenseTable.tsx b/src/components/pages/report/expense/ReportExpenseTable.tsx
deleted file mode 100644
index c809c153..00000000
--- a/src/components/pages/report/expense/ReportExpenseTable.tsx
+++ /dev/null
@@ -1,901 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import { ChangeEventHandler } from 'react';
-import useSWR from 'swr';
-import Button from '@/components/Button';
-import Card from '@/components/Card';
-import DateInput from '@/components/input/DateInput';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
-import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
-import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
-import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
-import { cn, formatCurrency, formatDate } from '@/lib/helper';
-import { ReportExpense } from '@/types/api/report/report-expense';
-import { Icon } from '@iconify/react';
-import { ColumnDef } from '@tanstack/react-table';
-import { ReportExpenseApi } from '@/services/api/report';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import Pagination from '@/components/Pagination';
-import Dropdown from '@/components/dropdown/Dropdown';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
-import * as XLSX from 'xlsx';
-import { generateReportExpensePDF } from './pdf/ReportExpenseExport';
-import toast from 'react-hot-toast';
-import {
-  KandangApi,
-  LocationApi,
-  NonstockApi,
-  SupplierApi,
-} from '@/services/api/master-data';
-import { Supplier } from '@/types/api/master-data/supplier';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { Nonstock } from '@/types/api/master-data/nonstock';
-
-const ReportExpenseTable = () => {
-  // ===== STATE MANAGEMENT =====
-  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
-  const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [pdfProgress, setPdfProgress] = useState(0);
-  const [excelProgress, setExcelProgress] = useState(0);
-  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
-
-  // ===== SUBMISSION STATE =====
-  const [isSubmitted, setIsSubmitted] = useState(false);
-
-  // ===== TABLE FILTER STATE =====
-  const {
-    state: filterState,
-    updateFilter,
-    setPage,
-    setPageSize,
-    reset: resetFilterState,
-    toQueryString,
-  } = useTableFilter({
-    initial: {
-      location_id: '',
-      supplier_id: '',
-      kandang_id: '',
-      nonstock_id: '',
-      realization_date: '',
-      category: '',
-      search: '',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-    },
-  });
-
-  // ===== SELECT OPTIONS =====
-  const {
-    setInputValue: setLocationInputValue,
-    options: locationOptions,
-    isLoadingOptions: isLoadingLocationOptions,
-    loadMore: loadMoreLocations,
-  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
-
-  const {
-    setInputValue: setSupplierInputValue,
-    options: supplierOptions,
-    isLoadingOptions: isLoadingSupplierOptions,
-    loadMore: loadMoreSuppliers,
-  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
-
-  const {
-    setInputValue: setKandangInputValue,
-    options: kandangOptions,
-    isLoadingOptions: isLoadingKandangOptions,
-    loadMore: loadMoreKandangs,
-  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
-
-  const {
-    setInputValue: setNonstockInputValue,
-    options: nonstockOptions,
-    isLoadingOptions: isLoadingNonstockOptions,
-    loadMore: loadMoreNonstocks,
-  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
-
-  const categoryOptions = useMemo(
-    () => [
-      { value: 'BOP', label: 'BOP' },
-      { value: 'NON-BOP', label: 'Non BOP' },
-    ],
-    []
-  );
-
-  // Mendapatkan value option select dari filter state
-  const selectedLocation = useMemo(
-    () =>
-      locationOptions.find(
-        (opt) => String(opt.value) === filterState.location_id
-      ) || null,
-    [locationOptions, filterState.location_id]
-  );
-  const selectedSupplier = useMemo(
-    () =>
-      supplierOptions.find(
-        (opt) => String(opt.value) === filterState.supplier_id
-      ) || null,
-    [supplierOptions, filterState.supplier_id]
-  );
-  const selectedKandang = useMemo(
-    () =>
-      kandangOptions.find(
-        (opt) => String(opt.value) === filterState.kandang_id
-      ) || null,
-    [kandangOptions, filterState.kandang_id]
-  );
-  const selectedNonstock = useMemo(
-    () =>
-      nonstockOptions.find(
-        (opt) => String(opt.value) === filterState.nonstock_id
-      ) || null,
-    [nonstockOptions, filterState.nonstock_id]
-  );
-  const selectedCategory = useMemo(
-    () =>
-      categoryOptions.find((opt) => opt.value === filterState.category) || null,
-    [categoryOptions, filterState.category]
-  );
-
-  // ===== FILTER CHANGE HANDLERS =====
-  const locationChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType;
-      updateFilter('location_id', option ? String(option.value) : '');
-      updateFilter('kandang_id', '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const kandangChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType;
-      updateFilter('kandang_id', option ? String(option.value) : '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const supplierChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType;
-      updateFilter('supplier_id', option ? String(option.value) : '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const nonstockChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType;
-      updateFilter('nonstock_id', option ? String(option.value) : '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const categoryChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType;
-      updateFilter('category', option ? String(option.value) : '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const realizationDateChangeHandler = useCallback<
-    ChangeEventHandler<HTMLInputElement>
-  >(
-    (e) => {
-      updateFilter('realization_date', e.target.value || '');
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  const searchChangeHandler = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      updateFilter('search', e.target.value);
-      setIsSubmitted(false);
-    },
-    [updateFilter]
-  );
-
-  // ===== RESET FILTERS =====
-  const resetFilters = useCallback(() => {
-    resetFilterState();
-    setIsSubmitted(false);
-  }, [resetFilterState]);
-
-  // ===== SUBMIT HANDLER =====
-  const handleSubmit = useCallback(() => {
-    setIsSubmitted(true);
-    setPage(1);
-  }, [setPage]);
-
-  // ===== DATA FETCHING FOR TABLE =====
-  const { data: reportExpenseResponse, isLoading } = useSWR(
-    isSubmitted
-      ? () => {
-          return ['report-expense', toQueryString()];
-        }
-      : null,
-    ([, query]) => {
-      const endpoint = `${ReportExpenseApi.basePath}${query}`;
-      return ReportExpenseApi.getAllFetcher(endpoint);
-    }
-  );
-
-  const data: ReportExpense[] = useMemo(
-    () =>
-      isResponseSuccess(reportExpenseResponse)
-        ? (reportExpenseResponse?.data as ReportExpense[]) || []
-        : [],
-    [reportExpenseResponse]
-  );
-
-  const meta = useMemo(
-    () =>
-      isResponseSuccess(reportExpenseResponse) && reportExpenseResponse.meta
-        ? reportExpenseResponse.meta
-        : null,
-    [reportExpenseResponse]
-  );
-
-  // ===== EXPORT DATA FETCHER =====
-  const reportExpenseExport = useCallback(async (): Promise<
-    ReportExpense[] | null
-  > => {
-    const params = new URLSearchParams(toQueryString().replace('?', ''));
-    params.set('limit', 'limit');
-    params.set('page', '1');
-
-    const endpoint = `${ReportExpenseApi.basePath}?${params.toString()}`;
-    const response = await ReportExpenseApi.getAllFetcher(endpoint);
-
-    return isResponseSuccess(response) ? response.data : null;
-  }, [toQueryString]);
-
-  // ===== EXPORT HANDLERS =====
-  const handleExportPdf = useCallback(async () => {
-    if (isPdfExportLoading) return;
-    setIsPdfExportLoading(true);
-    setPdfProgress(0);
-
-    await new Promise((resolve) =>
-      requestAnimationFrame(() => resolve(undefined))
-    );
-
-    try {
-      // Stage 1: Fetching data (0-20%)
-      setPdfProgress(10);
-      await new Promise((resolve) => setTimeout(resolve, 50));
-
-      const allData = await reportExpenseExport();
-      if (!allData || allData.length === 0) {
-        toast.error('Tidak ada data untuk diekspor.');
-        setIsPdfExportLoading(false);
-        setPdfProgress(0);
-        return;
-      }
-
-      // Stage 2: Data fetched - langsung loncat ke progress tinggi
-      setPdfProgress(30);
-      await new Promise((resolve) => setTimeout(resolve, 50));
-      const progressInterval = setInterval(() => {
-        setPdfProgress((prev) => {
-          // Increment kecil dan random antara 0.5-2%
-          const increment = Math.random() * 1.5 + 0.5;
-          const newProgress = Math.min(prev + increment, 50);
-          return newProgress;
-        });
-      }, 300); // Update setiap 300ms
-
-      const pdfParams = {
-        location_name: selectedLocation?.label,
-        supplier_name: selectedSupplier?.label,
-        kandang_name: selectedKandang?.label,
-        nonstock_name: selectedNonstock?.label,
-        category: selectedCategory?.label,
-        realization_date: filterState.realization_date,
-        search: filterState.search,
-      };
-
-      setDropdownOpen(false);
-
-      // Stage 3: Langsung loncat ke 80-85% untuk menghindari stuck
-      const baseProgress = 80 + Math.floor(Math.random() * 16); // Random 80-85%
-      setPdfProgress(baseProgress);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // Stage 4: Berikan jeda untuk UI update
-      await new Promise((resolve) =>
-        requestAnimationFrame(() => resolve(undefined))
-      );
-
-      // Proses PDF yang sebenarnya
-      await generateReportExpensePDF(allData, pdfParams);
-
-      clearInterval(progressInterval);
-
-      // Stage 5: Finalizing (98-100%)
-      setPdfProgress(99);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      setPdfProgress(100);
-      toast.success('PDF berhasil dibuat dan diunduh.');
-
-      // Reset progress setelah selesai
-      setTimeout(() => setPdfProgress(0), 500);
-    } catch (error) {
-      console.error('PDF Export Error:', error);
-      toast.error('Gagal membuat PDF. Silakan coba lagi.');
-      setPdfProgress(0);
-    } finally {
-      setIsPdfExportLoading(false);
-    }
-  }, [
-    reportExpenseExport,
-    selectedLocation,
-    selectedSupplier,
-    selectedKandang,
-    selectedNonstock,
-    selectedCategory,
-    filterState.realization_date,
-    filterState.search,
-  ]);
-
-  const handleExportExcel = useCallback(async () => {
-    if (isExcelExportLoading) return;
-    setIsExcelExportLoading(true);
-    setExcelProgress(0);
-    setDropdownOpen(false);
-
-    await new Promise((resolve) =>
-      requestAnimationFrame(() => resolve(undefined))
-    );
-
-    try {
-      // Stage 1: Fetching data (0-20%)
-      setExcelProgress(15);
-      await new Promise((resolve) => setTimeout(resolve, 50));
-
-      const allDataForExport = await reportExpenseExport();
-
-      if (!allDataForExport || allDataForExport.length === 0) {
-        toast.error('Tidak ada data untuk diekspor.');
-        setIsExcelExportLoading(false);
-        setExcelProgress(0);
-        return;
-      }
-
-      // Stage 2: Data fetched (20-40%)
-      setExcelProgress(30);
-      await new Promise((resolve) => setTimeout(resolve, 50));
-
-      // Stage 3: Grouping data (40-60%)
-      setExcelProgress(50);
-      const groupedBySupplier: Record<string, ReportExpense[]> = {};
-      allDataForExport.forEach((item) => {
-        const supplierName = item.supplier?.name || 'Unknown Supplier';
-        if (!groupedBySupplier[supplierName]) {
-          groupedBySupplier[supplierName] = [];
-        }
-        groupedBySupplier[supplierName].push(item);
-      });
-
-      await new Promise((resolve) => setTimeout(resolve, 50));
-
-      // Stage 4: Creating workbook (60-80%)
-      setExcelProgress(70);
-      const workbook = XLSX.utils.book_new();
-
-      const supplierEntries = Object.entries(groupedBySupplier);
-      const totalSuppliers = supplierEntries.length;
-
-      for (let i = 0; i < supplierEntries.length; i++) {
-        const [supplierName, supplierData] = supplierEntries[i];
-
-        // Update progress per supplier
-        const progressIncrement = (20 / totalSuppliers) * (i + 1);
-        setExcelProgress(70 + progressIncrement);
-
-        const totals = supplierData.reduce(
-          (acc, item) => ({
-            qty_pengajuan: acc.qty_pengajuan + (item.pengajuan?.qty || 0),
-            total_pengajuan:
-              acc.total_pengajuan +
-              (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
-            qty_realisasi: acc.qty_realisasi + (item.realisasi?.qty || 0),
-            total_realisasi:
-              acc.total_realisasi +
-              (item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
-          }),
-          {
-            qty_pengajuan: 0,
-            total_pengajuan: 0,
-            qty_realisasi: 0,
-            total_realisasi: 0,
-          }
-        );
-
-        const excelData = supplierData.map((item, index) => ({
-          No: index + 1,
-          'No. PO': item.po_number || '',
-          'No. Referensi': item.reference_number || '',
-          'Tanggal Realisasi': item.realization_date
-            ? formatDate(item.realization_date, 'DD MMM YYYY')
-            : '',
-          'Tanggal Transaksi': item.transaction_date
-            ? formatDate(item.transaction_date, 'DD MMM YYYY')
-            : '',
-          Kategori: item.category || '',
-          Produk: item.pengajuan?.nonstock?.name || '',
-          Lokasi: item.kandang?.location?.name || '',
-          Kandang: item.kandang?.name || '',
-          'Qty Pengajuan': item.pengajuan?.qty || 0,
-          'Harga Pengajuan': item.pengajuan?.price || 0,
-          'Total Pengajuan':
-            (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
-          'Qty Realisasi': item.realisasi?.qty || 0,
-          'Harga Realisasi': item.realisasi?.price || 0,
-          'Total Realisasi':
-            (item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
-          'Status Pencairan': item.latest_approval?.step_name || '',
-        }));
-
-        excelData.push({
-          No: 'Total' as unknown as number,
-          'No. PO': '',
-          'No. Referensi': '',
-          'Tanggal Realisasi': '',
-          'Tanggal Transaksi': '',
-          Kategori: '',
-          Produk: '',
-          Lokasi: '',
-          Kandang: '',
-          'Qty Pengajuan': totals.qty_pengajuan,
-          'Harga Pengajuan': 0,
-          'Total Pengajuan': totals.total_pengajuan,
-          'Qty Realisasi': totals.qty_realisasi,
-          'Harga Realisasi': 0,
-          'Total Realisasi': totals.total_realisasi,
-          'Status Pencairan': '',
-        });
-
-        const worksheet = XLSX.utils.json_to_sheet(excelData);
-        const colWidths = [
-          { wch: 5 }, // No
-          { wch: 20 }, // No. PO
-          { wch: 20 }, // No. Referensi
-          { wch: 15 }, // Tanggal Realisasi
-          { wch: 15 }, // Tanggal Transaksi
-          { wch: 15 }, // Kategori
-          { wch: 30 }, // Produk
-          { wch: 20 }, // Lokasi
-          { wch: 15 }, // Kandang
-          { wch: 15 }, // Qty Pengajuan
-          { wch: 15 }, // Harga Pengajuan
-          { wch: 20 }, // Total Pengajuan
-          { wch: 15 }, // Qty Realisasi
-          { wch: 15 }, // Harga Realisasi
-          { wch: 20 }, // Total Realisasi
-          { wch: 20 }, // Status Pencairan
-        ];
-        worksheet['!cols'] = colWidths;
-
-        const sheetName = supplierName.slice(0, 31);
-        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
-
-        // Small delay to allow UI update
-        if (i < supplierEntries.length - 1) {
-          await new Promise((resolve) => setTimeout(resolve, 10));
-        }
-      }
-
-      // Stage 5: Writing file (90-100%)
-      setExcelProgress(95);
-      await new Promise((resolve) => setTimeout(resolve, 50));
-
-      const filename = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.xlsx`;
-      XLSX.writeFile(workbook, filename);
-
-      setExcelProgress(100);
-      toast.success('Excel berhasil dibuat dan diunduh.');
-
-      // Reset progress
-      setTimeout(() => setExcelProgress(0), 500);
-    } catch (error) {
-      console.error('Excel Export Error:', error);
-      toast.error('Gagal membuat Excel. Silakan coba lagi.');
-      setExcelProgress(0);
-    } finally {
-      setIsExcelExportLoading(false);
-    }
-  }, [isExcelExportLoading, reportExpenseExport]);
-
-  // ===== PAGINATION HANDLERS =====
-  const handlePageChange = (page: number) => {
-    setPage(page);
-  };
-
-  const handleRowChange = (pageSize: number) => {
-    setPageSize(pageSize);
-  };
-
-  const handleNextPage = () => {
-    if (meta && filterState.page < meta.total_pages) {
-      setPage(filterState.page + 1);
-    }
-  };
-
-  const handlePrevPage = () => {
-    if (filterState.page > 1) {
-      setPage(filterState.page - 1);
-    }
-  };
-
-  // ===== TABLE COLUMNS DEFINITION =====
-  const columns = useMemo((): ColumnDef<ReportExpense>[] => {
-    return [
-      {
-        header: 'No',
-        accessorFn: (_, index) =>
-          (filterState.page - 1) * filterState.pageSize + index + 1,
-      },
-      {
-        header: 'No. PO',
-        accessorKey: 'po_number',
-      },
-      {
-        header: 'No. Referensi',
-        accessorKey: 'reference_number',
-      },
-      {
-        header: 'Tanggal Realisasi',
-        accessorKey: 'realization_date',
-        cell: ({ row }) => {
-          return formatDate(row.original?.realization_date, 'DD MMM, YYYY');
-        },
-      },
-      {
-        header: 'Tanggal Transaksi',
-        accessorKey: 'transaction_date',
-        cell: ({ row }) => {
-          return formatDate(row.original?.transaction_date, 'DD MMM, YYYY');
-        },
-      },
-      {
-        header: 'Kategori',
-        accessorKey: 'category',
-      },
-      {
-        header: 'Produk',
-        accessorFn: (row) => row.pengajuan?.nonstock?.name,
-      },
-      {
-        header: 'Supplier',
-        accessorFn: (row) => row.supplier?.name,
-      },
-      {
-        header: 'Lokasi',
-        accessorFn: (row) => row.kandang?.location?.name,
-      },
-      {
-        header: 'Kandang',
-        accessorFn: (row) => row.kandang?.name,
-      },
-      {
-        header: 'Pengajuan',
-        columns: [
-          {
-            header: 'Qty',
-            id: 'qty_pengajuan',
-            accessorFn: (row) => row.pengajuan?.qty,
-            cell: ({ row }) =>
-              row.original.pengajuan?.qty?.toLocaleString('id-ID') || '0',
-          },
-          {
-            header: 'Harga',
-            id: 'harga_pengajuan',
-            accessorFn: (row) => row.pengajuan?.price,
-            cell: ({ row }) =>
-              formatCurrency(row.original.pengajuan?.price || 0),
-          },
-          {
-            header: 'Total',
-            id: 'total_pengajuan',
-            accessorFn: (row) =>
-              (row.pengajuan?.qty || 0) * (row.pengajuan?.price || 0),
-            cell: ({ row }) => {
-              const total =
-                (row.original.pengajuan?.qty || 0) *
-                (row.original.pengajuan?.price || 0);
-              return formatCurrency(total);
-            },
-          },
-        ],
-      },
-      {
-        header: 'Realisasi',
-        columns: [
-          {
-            header: 'Qty',
-            id: 'qty_realisasi',
-            accessorFn: (row) => row.realisasi?.qty,
-            cell: ({ row }) =>
-              row.original.realisasi?.qty?.toLocaleString('id-ID') || '0',
-          },
-          {
-            header: 'Harga',
-            id: 'harga_realisasi',
-            accessorFn: (row) => row.realisasi?.price,
-            cell: ({ row }) =>
-              formatCurrency(row.original.realisasi?.price || 0),
-          },
-          {
-            header: 'Total',
-            id: 'total_realisasi',
-            accessorFn: (row) =>
-              (row.realisasi?.qty || 0) * (row.realisasi?.price || 0),
-            cell: ({ row }) => {
-              const total =
-                (row.original.realisasi?.qty || 0) *
-                (row.original.realisasi?.price || 0);
-              return formatCurrency(total);
-            },
-          },
-        ],
-      },
-      {
-        header: 'Status Pencairan',
-        cell: (props) => (
-          <RealizationStatusBadge
-            approval={props.row.original?.latest_approval}
-          />
-        ),
-      },
-      {
-        header: 'Status BOP',
-        cell: (props) => (
-          <ExpenseStatusBadge approval={props.row.original?.latest_approval} />
-        ),
-      },
-    ];
-  }, [filterState.page, filterState.pageSize]);
-
-  // ===== RENDER =====
-  return (
-    <div className='flex flex-col gap-4'>
-      {isAnyExportLoading && (
-        <div className='flex flex-col gap-2'>
-          <progress
-            className='progress progress-primary w-full'
-            value={
-              isPdfExportLoading
-                ? pdfProgress
-                : isExcelExportLoading
-                  ? excelProgress
-                  : 0
-            }
-            max='100'
-          ></progress>
-          {((isPdfExportLoading && pdfProgress > 0) ||
-            (isExcelExportLoading && excelProgress > 0)) && (
-            <div className='text-sm text-center text-gray-600'>
-              <div className='font-semibold'>
-                {(() => {
-                  const currentProgress = isPdfExportLoading
-                    ? pdfProgress
-                    : excelProgress;
-                  const exportType = isPdfExportLoading ? 'PDF' : 'Excel';
-
-                  if (currentProgress < 20)
-                    return 'Mengambil data dari server...';
-                  if (currentProgress < 30) return 'Memproses data laporan...';
-                  if (currentProgress < 40)
-                    return `Menyiapkan struktur dokumen ${exportType}...`;
-                  if (currentProgress < 50)
-                    return 'Mengelompokkan data per supplier...';
-                  if (currentProgress < 70)
-                    return 'Merender tabel dan kalkulasi...';
-                  if (currentProgress < 96)
-                    return `Memformat dokumen ${exportType}...`;
-                  if (currentProgress < 100)
-                    return 'Menyelesaikan dan mengunduh...';
-                  return 'Selesai!';
-                })()}{' '}
-                {Math.round(isPdfExportLoading ? pdfProgress : excelProgress)}%
-              </div>
-              {((isPdfExportLoading && pdfProgress >= 35 && pdfProgress < 90) ||
-                (isExcelExportLoading &&
-                  excelProgress >= 35 &&
-                  excelProgress < 90)) && (
-                <div className='text-xs text-gray-500 mt-1'>
-                  {(isPdfExportLoading ? pdfProgress : excelProgress) < 96
-                    ? 'Proses ini membutuhkan waktu lebih lama untuk data dalam jumlah besar. Mohon bersabar...'
-                    : 'Sedang memproses baris data. Hampir selesai...'}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-      <Card
-        title='Laporan Biaya Operasional'
-        variant='bordered'
-        className={{
-          wrapper: 'w-full',
-        }}
-        footer={
-          <div className='flex flex-col gap-6'>
-            <div className='flex flex-row items-center justify-end gap-2'>
-              <div className='flex flex-row items-center gap-2'>
-                <Button className='min-w-24' onClick={handleSubmit}>
-                  Cari
-                </Button>
-                <Button
-                  className='min-w-24'
-                  color='warning'
-                  onClick={resetFilters}
-                >
-                  Reset
-                </Button>
-              </div>
-              <div>
-                <Dropdown
-                  trigger={
-                    <Button
-                      color='success'
-                      className='min-w-24'
-                      isLoading={isAnyExportLoading}
-                      onClick={() => {
-                        setDropdownOpen(!dropdownOpen);
-                      }}
-                    >
-                      Export
-                    </Button>
-                  }
-                  align='end'
-                  direction='bottom'
-                  open={dropdownOpen}
-                >
-                  <Menu className='w-32'>
-                    <MenuItem title='Excel' onClick={handleExportExcel} />
-                    <MenuItem title='PDF' onClick={handleExportPdf} />
-                  </Menu>
-                </Dropdown>
-              </div>
-            </div>
-          </div>
-        }
-      >
-        <div className='grid grid-cols-2 md:grid-cols-4 gap-4'>
-          <SelectInput
-            isClearable
-            label='Lokasi'
-            options={locationOptions}
-            isLoading={isLoadingLocationOptions}
-            placeholder='Lokasi'
-            value={selectedLocation}
-            onChange={locationChangeHandler}
-            onInputChange={setLocationInputValue}
-            onMenuScrollToBottom={loadMoreLocations}
-          />
-          <SelectInput
-            isClearable
-            label='Kandang'
-            options={kandangOptions}
-            isLoading={isLoadingKandangOptions}
-            placeholder='Kandang'
-            value={selectedKandang}
-            onChange={kandangChangeHandler}
-            onInputChange={setKandangInputValue}
-            onMenuScrollToBottom={loadMoreKandangs}
-          />
-          <SelectInput
-            isClearable
-            label='Supplier'
-            options={supplierOptions}
-            isLoading={isLoadingSupplierOptions}
-            placeholder='Supplier'
-            value={selectedSupplier}
-            onChange={supplierChangeHandler}
-            onInputChange={setSupplierInputValue}
-            onMenuScrollToBottom={loadMoreSuppliers}
-          />
-          <SelectInput
-            isClearable
-            label='Produk'
-            options={nonstockOptions}
-            isLoading={isLoadingNonstockOptions}
-            placeholder='Produk'
-            value={selectedNonstock}
-            onChange={nonstockChangeHandler}
-            onInputChange={setNonstockInputValue}
-            onMenuScrollToBottom={loadMoreNonstocks}
-          />
-          <SelectInput
-            isClearable
-            label='Kategori'
-            options={categoryOptions}
-            placeholder='Kategori'
-            value={selectedCategory}
-            onChange={categoryChangeHandler}
-          />
-          <DateInput
-            label='Tanggal Realisasi'
-            value={filterState.realization_date}
-            onChange={realizationDateChangeHandler}
-            name='realization_date'
-            placeholder='Tanggal Realisasi'
-          />
-          <DebouncedTextInput
-            label='Cari'
-            name='search'
-            value={filterState.search}
-            onChange={searchChangeHandler}
-            placeholder='Cari'
-            startAdornment={<Icon icon='mdi:magnify' width={24} height={24} />}
-          />
-        </div>
-      </Card>
-
-      {/* ===== TABLE CONTENT ===== */}
-      {!isSubmitted ? (
-        <div className='mt-6 text-center text-gray-500'>
-          Silakan pilih filter dan klik tombol Cari untuk menampilkan data.
-        </div>
-      ) : isLoading ? (
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      ) : data.length === 0 ? (
-        <div className='mt-6 text-center text-gray-500'>
-          Tidak ada data yang dapat ditampilkan...
-        </div>
-      ) : (
-        <>
-          <Table<ReportExpense>
-            columns={columns}
-            data={data}
-            pageSize={10}
-            className={{
-              containerClassName: 'mb-0',
-              headerRowClassName: cn(
-                TABLE_DEFAULT_STYLING,
-                'whitespace-nowrap'
-              ),
-              bodyRowClassName: cn(TABLE_DEFAULT_STYLING, 'whitespace-nowrap'),
-              paginationClassName: 'hidden',
-            }}
-          />
-          {meta && (
-            <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>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
-
-export default ReportExpenseTable;
diff --git a/src/components/pages/report/expense/ReportExpenseTabs.tsx b/src/components/pages/report/expense/ReportExpenseTabs.tsx
new file mode 100644
index 00000000..704d1f6f
--- /dev/null
+++ b/src/components/pages/report/expense/ReportExpenseTabs.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { useState } from 'react';
+import Tabs from '@/components/Tabs';
+
+import { useReportTabStore } from '@/stores/report/report-tab.store';
+import ReportExpenseTab from './tab/ReportExpenseTab';
+
+const ReportExpenseTabs = () => {
+  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const tabActions = useReportTabStore((state) => state.tabActions);
+
+  const tabs = [
+    {
+      id: '1',
+      label: 'Laporan Biaya Operasional',
+      content: <ReportExpenseTab tabId={'1'} />,
+    },
+  ];
+
+  return (
+    <section className='w-full'>
+      <Tabs
+        tabs={tabs}
+        variant='boxed'
+        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>
+  );
+};
+
+export default ReportExpenseTabs;
diff --git a/src/components/pages/report/expense/pdf/ReportExpenseExport.tsx b/src/components/pages/report/expense/export/ReportExpenseExportPDF.tsx
similarity index 99%
rename from src/components/pages/report/expense/pdf/ReportExpenseExport.tsx
rename to src/components/pages/report/expense/export/ReportExpenseExportPDF.tsx
index a7ff8599..6ec2c559 100644
--- a/src/components/pages/report/expense/pdf/ReportExpenseExport.tsx
+++ b/src/components/pages/report/expense/export/ReportExpenseExportPDF.tsx
@@ -2,6 +2,7 @@ import { ReportExpense } from '@/types/api/report/report-expense';
 import { formatCurrency, formatDate } from '@/lib/helper';
 import jsPDF from 'jspdf';
 import autoTable, { UserOptions } from 'jspdf-autotable';
+
 interface jsPDFWithAutoTable extends jsPDF {
   lastAutoTable: {
     finalY: number;
diff --git a/src/components/pages/report/expense/export/ReportExpenseExportXLSX.tsx b/src/components/pages/report/expense/export/ReportExpenseExportXLSX.tsx
new file mode 100644
index 00000000..cc27b526
--- /dev/null
+++ b/src/components/pages/report/expense/export/ReportExpenseExportXLSX.tsx
@@ -0,0 +1,109 @@
+import * as XLSX from 'xlsx';
+import { ReportExpense } from '@/types/api/report/report-expense';
+import { formatCurrency, formatDate } from '@/lib/helper';
+
+export const generateReportExpenseExcel = async (
+  data: ReportExpense[]
+): Promise<void> => {
+  // Group by supplier
+  const groupedBySupplier: Record<string, ReportExpense[]> = {};
+  data.forEach((item) => {
+    const supplierName = item.supplier?.name || 'Unknown Supplier';
+    if (!groupedBySupplier[supplierName]) {
+      groupedBySupplier[supplierName] = [];
+    }
+    groupedBySupplier[supplierName].push(item);
+  });
+
+  const workbook = XLSX.utils.book_new();
+
+  Object.entries(groupedBySupplier).forEach(([supplierName, supplierData]) => {
+    const totals = supplierData.reduce(
+      (acc, item) => ({
+        qty_pengajuan: acc.qty_pengajuan + (item.pengajuan?.qty || 0),
+        total_pengajuan:
+          acc.total_pengajuan +
+          (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
+        qty_realisasi: acc.qty_realisasi + (item.realisasi?.qty || 0),
+        total_realisasi:
+          acc.total_realisasi +
+          (item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
+      }),
+      {
+        qty_pengajuan: 0,
+        total_pengajuan: 0,
+        qty_realisasi: 0,
+        total_realisasi: 0,
+      }
+    );
+
+    const excelData = supplierData.map((item, index) => ({
+      No: index + 1,
+      'No. PO': item.po_number || '',
+      'No. Referensi': item.reference_number || '',
+      'Tanggal Realisasi': item.realization_date
+        ? formatDate(item.realization_date, 'DD MMM YYYY')
+        : '',
+      'Tanggal Transaksi': item.transaction_date
+        ? formatDate(item.transaction_date, 'DD MMM YYYY')
+        : '',
+      Kategori: item.category || '',
+      Produk: item.pengajuan?.nonstock?.name || '',
+      Lokasi: item.kandang?.location?.name || '',
+      Kandang: item.kandang?.name || '',
+      'Qty Pengajuan': item.pengajuan?.qty || 0,
+      'Harga Pengajuan': item.pengajuan?.price || 0,
+      'Total Pengajuan':
+        (item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
+      'Qty Realisasi': item.realisasi?.qty || 0,
+      'Harga Realisasi': item.realisasi?.price || 0,
+      'Total Realisasi':
+        (item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
+      'Status Pencairan': item.latest_approval?.step_name || '',
+    }));
+
+    excelData.push({
+      No: 'Total' as unknown as number,
+      'No. PO': '',
+      'No. Referensi': '',
+      'Tanggal Realisasi': '',
+      'Tanggal Transaksi': '',
+      Kategori: '',
+      Produk: '',
+      Lokasi: '',
+      Kandang: '',
+      'Qty Pengajuan': totals.qty_pengajuan,
+      'Harga Pengajuan': 0,
+      'Total Pengajuan': totals.total_pengajuan,
+      'Qty Realisasi': totals.qty_realisasi,
+      'Harga Realisasi': 0,
+      'Total Realisasi': totals.total_realisasi,
+      'Status Pencairan': '',
+    });
+
+    const worksheet = XLSX.utils.json_to_sheet(excelData);
+    const colWidths = [
+      { wch: 5 },
+      { wch: 20 },
+      { wch: 20 },
+      { wch: 15 },
+      { wch: 15 },
+      { wch: 15 },
+      { wch: 30 },
+      { wch: 20 },
+      { wch: 15 },
+      { wch: 15 },
+      { wch: 15 },
+      { wch: 20 },
+      { wch: 15 },
+      { wch: 20 },
+    ];
+    worksheet['!cols'] = colWidths;
+
+    const sheetName = supplierName.slice(0, 31);
+    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+  });
+
+  const filename = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.xlsx`;
+  XLSX.writeFile(workbook, filename);
+};
diff --git a/src/components/pages/report/expense/filter/ReportExpenseFilter.ts b/src/components/pages/report/expense/filter/ReportExpenseFilter.ts
new file mode 100644
index 00000000..b8bd3c56
--- /dev/null
+++ b/src/components/pages/report/expense/filter/ReportExpenseFilter.ts
@@ -0,0 +1,73 @@
+import { OptionType } from '@/components/input/SelectInput';
+import * as yup from 'yup';
+
+export type ReportExpenseFilterProps = {
+  location_id: string | null;
+  supplier_id: string | null;
+  kandang_id: string | null;
+  nonstock_id: string | null;
+  realization_date: string | null;
+  category: string | null;
+};
+
+export type ReportExpenseFilterFormType = {
+  location_id: OptionType | null;
+  supplier_id: OptionType | null;
+  kandang_id: OptionType | null;
+  nonstock_id: OptionType | null;
+  realization_date: string | null;
+  category: OptionType | null;
+};
+
+export const ReportExpenseFilterSchema = yup.object({
+  location_id: yup
+    .mixed<OptionType>()
+    .nullable()
+    .test('is-not-empty', 'Lokasi wajib dipilih', (value) => {
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+      return true;
+    }),
+  supplier_id: yup
+    .mixed<OptionType>()
+    .nullable()
+    .test('is-not-empty', 'Supplier wajib dipilih', (value) => {
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+      return true;
+    }),
+  kandang_id: yup
+    .mixed<OptionType>()
+    .nullable()
+    .test('is-not-empty', 'Kandang wajib dipilih', (value) => {
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+      return true;
+    }),
+  nonstock_id: yup
+    .mixed<OptionType>()
+    .nullable()
+    .test('is-not-empty', 'Produk wajib dipilih', (value) => {
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+      return true;
+    }),
+  realization_date: yup.string().nullable(),
+  category: yup
+    .mixed<OptionType>()
+    .nullable()
+    .test('is-not-empty', 'Kategori wajib dipilih', (value) => {
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+      return true;
+    }),
+}) as yup.ObjectSchema<ReportExpenseFilterFormType>;
+
+export type ReportExpenseFilterValues = yup.InferType<
+  typeof ReportExpenseFilterSchema
+>;
diff --git a/src/components/pages/report/expense/pdf/styles/ReportExpenseStyles.tsx b/src/components/pages/report/expense/pdf/styles/ReportExpenseStyles.tsx
deleted file mode 100644
index 65505a5f..00000000
--- a/src/components/pages/report/expense/pdf/styles/ReportExpenseStyles.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-import { StyleSheet } from '@react-pdf/renderer';
-
-const pdfStyles = StyleSheet.create({
-  page: {
-    fontSize: 18,
-    fontFamily: 'Helvetica',
-    padding: 20,
-    backgroundColor: '#FFFFFF',
-  },
-  header: {
-    marginBottom: 20,
-  },
-  logo: {
-    width: 120,
-    height: 30,
-    marginBottom: 8,
-  },
-  companyInfo: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 4,
-    color: '#1f74bf',
-  },
-  address: {
-    fontSize: 7,
-    color: '#666666',
-    maxWidth: 400,
-    marginBottom: 10,
-  },
-  divider: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    marginBottom: 15,
-  },
-  titleSection: {
-    flexDirection: 'row',
-    marginBottom: 20,
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    flex: 3,
-    color: '#1f74bf',
-  },
-  poInfo: {
-    flex: 1,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  sectionTitle: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    marginBottom: 8,
-    color: '#1f74bf',
-  },
-  table: {
-    borderWidth: 1,
-    borderColor: '#000000',
-    marginBottom: 15,
-  },
-  tableRow: {
-    flexDirection: 'row',
-  },
-  tableHeader: {
-    backgroundColor: '#F5F5F5',
-  },
-  tableCell: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-  },
-  tableCellLast: {
-    flex: 1,
-    padding: 3,
-    fontSize: 7,
-  },
-  tableCellHeader: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-  },
-  tableCellHeaderLast: {
-    flex: 1,
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-  },
-  tableCellRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableCellRightLast: {
-    flex: 1,
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableCellNarrow: {
-    width: '1%',
-    minWidth: 20,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'center',
-  },
-  tableCellNarrowHeader: {
-    width: '1%',
-    minWidth: 20,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-    textAlign: 'center',
-  },
-  tableCellWrap: {
-    flex: 1,
-    maxWidth: 80,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    flexWrap: 'wrap',
-  },
-  tableCellWrapHeader: {
-    flex: 1,
-    maxWidth: 80,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-  },
-  // Nested header styles
-  tableHeaderGroup: {
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    backgroundColor: '#F5F5F5',
-  },
-  tableHeaderGroupLast: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    backgroundColor: '#F5F5F5',
-  },
-  tableHeaderGroupTitle: {
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-  },
-  tableSubHeaderRow: {
-    flexDirection: 'row',
-  },
-  // Specific width columns
-  tableCellXSmall: {
-    width: 30,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-  },
-  tableCellXSmallHeader: {
-    width: 30,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-  },
-  tableCellSmall: {
-    width: 40,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-  },
-  tableCellSmallHeader: {
-    width: 40,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-  },
-  tableCellMedium: {
-    width: 60,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-  },
-  tableCellMediumHeader: {
-    width: 60,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    backgroundColor: '#F5F5F5',
-  },
-  tableCellRightXSmall: {
-    width: 30,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableCellRightSmall: {
-    width: 40,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableCellRightMedium: {
-    width: 60,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  tableBorderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-  },
-  grandTotalRow: {
-    flexDirection: 'row',
-    borderTopWidth: 1,
-    borderTopColor: '#000000',
-    borderTopStyle: 'solid',
-  },
-  grandTotalLabel: {
-    flex: 3,
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    textAlign: 'right',
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-  },
-  grandTotalValue: {
-    flex: 1,
-    padding: 3,
-    fontSize: 7,
-    fontWeight: 'bold',
-    textAlign: 'right',
-    borderRightWidth: 0,
-  },
-  allocationSection: {
-    marginBottom: 8,
-  },
-  allocationTable: {
-    borderWidth: 1,
-    borderColor: '#000000',
-  },
-  innerTable: {
-    marginTop: 5,
-    borderWidth: 1,
-    borderColor: '#000000',
-  },
-  innerRow: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-  },
-  innerCell: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-  },
-  innerCellLast: {
-    flex: 1,
-    padding: 3,
-    fontSize: 7,
-  },
-  innerCellRight: {
-    flex: 1,
-    borderRightWidth: 1,
-    borderRightColor: '#000000',
-    borderRightStyle: 'solid',
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  innerCellRightLast: {
-    flex: 1,
-    padding: 3,
-    fontSize: 7,
-    textAlign: 'right',
-  },
-  footer: {
-    marginTop: 30,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-  },
-  footerCompany: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    textAlign: 'right',
-    flex: 1,
-    color: '#1f74bf',
-  },
-  specialInstructionTable: {
-    width: '60%',
-    maxWidth: 300,
-    borderWidth: 1,
-    borderColor: '#000000',
-    flex: 1,
-  },
-});
-
-export default pdfStyles;
diff --git a/src/components/pages/report/expense/skeleton/ReportExpenseSkeleton.tsx b/src/components/pages/report/expense/skeleton/ReportExpenseSkeleton.tsx
new file mode 100644
index 00000000..f78344d7
--- /dev/null
+++ b/src/components/pages/report/expense/skeleton/ReportExpenseSkeleton.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { ReportExpense } from '@/types/api/report/report-expense';
+import { ColumnDef } from '@tanstack/react-table';
+
+type ReportExpenseColumn =
+  | ColumnDef<ReportExpense>
+  | {
+      header: string;
+      columns: Array<{
+        header: string;
+        accessorKey?: string;
+        cell?: (props: {
+          row: { original: ReportExpense };
+        }) => React.ReactNode;
+      }>;
+    };
+
+const ReportExpenseSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ReportExpenseColumn[];
+  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 ReportExpenseSkeleton;
diff --git a/src/components/pages/report/expense/tab/ReportExpenseTab.tsx b/src/components/pages/report/expense/tab/ReportExpenseTab.tsx
new file mode 100644
index 00000000..2581ec5c
--- /dev/null
+++ b/src/components/pages/report/expense/tab/ReportExpenseTab.tsx
@@ -0,0 +1,755 @@
+'use client';
+
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import useSWR from 'swr';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import { useFormik } from 'formik';
+import {
+  ReportExpenseFilterSchema,
+  type ReportExpenseFilterValues,
+} from '@/components/pages/report/expense/filter/ReportExpenseFilter';
+import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
+import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
+import Table from '@/components/Table';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { ReportExpense } from '@/types/api/report/report-expense';
+import { ReportExpenseApi } from '@/services/api/report';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
+import Modal, { useModal } from '@/components/Modal';
+import Pagination from '@/components/Pagination';
+import ReportExpenseSkeleton from '@/components/pages/report/expense/skeleton/ReportExpenseSkeleton';
+import { generateReportExpensePDF } from '../export/ReportExpenseExportPDF';
+import { generateReportExpenseExcel } from '../export/ReportExpenseExportXLSX';
+import toast from 'react-hot-toast';
+import {
+  KandangApi,
+  LocationApi,
+  NonstockApi,
+  SupplierApi,
+} from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+import { ColumnDef } from '@tanstack/react-table';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+interface ReportExpenseTabProps {
+  tabId: string;
+}
+
+interface FilterParams {
+  location_id?: string;
+  supplier_id?: string;
+  kandang_id?: string;
+  nonstock_id?: string;
+  realization_date?: string;
+  category?: string;
+  search?: string;
+}
+
+const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
+  // ===== STATE MANAGEMENT =====
+  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
+  const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
+  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+
+  // ===== SUBMISSION STATE =====
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [filterParams, setFilterParams] = useState<FilterParams>({});
+
+  // ===== PAGINATION STATE =====
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const filterModal = useModal();
+
+  // ===== OPTIONS =====
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+  } = useSelect<Kandang>(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangs,
+    loadMore: loadMoreKandangs,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstocks,
+    loadMore: loadMoreNonstocks,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name', 'search');
+
+  const categoryOptions = useMemo(
+    () => [
+      { value: 'BOP', label: 'BOP' },
+      { value: 'NON-BOP', label: 'Non BOP' },
+    ],
+    []
+  );
+
+  // ===== FORMIK SETUP =====
+  const formik = useFormik<ReportExpenseFilterValues>({
+    initialValues: {
+      location_id: null,
+      supplier_id: null,
+      kandang_id: null,
+      nonstock_id: null,
+      realization_date: null,
+      category: null,
+    },
+    validationSchema: ReportExpenseFilterSchema,
+    onSubmit: (values) => {
+      setFilterParams({
+        location_id: values.location_id?.value
+          ? String(values.location_id.value)
+          : undefined,
+        supplier_id: values.supplier_id?.value
+          ? String(values.supplier_id.value)
+          : undefined,
+        kandang_id: values.kandang_id?.value
+          ? String(values.kandang_id.value)
+          : undefined,
+        nonstock_id: values.nonstock_id?.value
+          ? String(values.nonstock_id.value)
+          : undefined,
+        realization_date: values.realization_date || undefined,
+        category: values.category?.value
+          ? String(values.category.value)
+          : undefined,
+      });
+      filterModal.closeModal();
+      setIsSubmitted(true);
+      setPage(1);
+    },
+    onReset: () => {
+      setFilterParams({});
+      setIsSubmitted(false);
+      setPage(1);
+    },
+  });
+
+  // ===== FILTER VALUES =====
+  const locationValue = useMemo(
+    () => formik.values.location_id,
+    [formik.values.location_id]
+  );
+  const supplierValue = useMemo(
+    () => formik.values.supplier_id,
+    [formik.values.supplier_id]
+  );
+  const kandangValue = useMemo(
+    () => formik.values.kandang_id,
+    [formik.values.kandang_id]
+  );
+  const nonstockValue = useMemo(
+    () => formik.values.nonstock_id,
+    [formik.values.nonstock_id]
+  );
+  const categoryValue = useMemo(
+    () => formik.values.category,
+    [formik.values.category]
+  );
+
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+    if (filterParams.location_id) count += 1;
+    if (filterParams.supplier_id) count += 1;
+    if (filterParams.kandang_id) count += 1;
+    if (filterParams.nonstock_id) count += 1;
+    if (filterParams.realization_date) count += 1;
+    if (filterParams.category) count += 1;
+    return count;
+  }, [filterParams]);
+
+  const hasFilters = activeFiltersCount > 0;
+
+  // ===== DATA FETCHING =====
+  const { data: reportExpenseResponse, isLoading } = useSWR(
+    isSubmitted
+      ? () => {
+          const params = new URLSearchParams();
+          if (filterParams.location_id)
+            params.append('location_id', filterParams.location_id);
+          if (filterParams.supplier_id)
+            params.append('supplier_id', filterParams.supplier_id);
+          if (filterParams.kandang_id)
+            params.append('kandang_id', filterParams.kandang_id);
+          if (filterParams.nonstock_id)
+            params.append('nonstock_id', filterParams.nonstock_id);
+          if (filterParams.realization_date)
+            params.append('realization_date', filterParams.realization_date);
+          if (filterParams.category)
+            params.append('category', filterParams.category);
+          params.append('page', String(page));
+          params.append('limit', String(pageSize));
+
+          return [`${ReportExpenseApi.basePath}?${params.toString()}`];
+        }
+      : null,
+    ([url]: string[]) => httpClient<BaseApiResponse<ReportExpense[]>>(url)
+  );
+
+  const data: ReportExpense[] = useMemo(
+    () =>
+      isResponseSuccess(reportExpenseResponse)
+        ? (reportExpenseResponse.data as ReportExpense[]) || []
+        : [],
+    [reportExpenseResponse]
+  );
+
+  const meta = useMemo(
+    () =>
+      isResponseSuccess(reportExpenseResponse) && reportExpenseResponse.meta
+        ? reportExpenseResponse.meta
+        : null,
+    [reportExpenseResponse]
+  );
+
+  // ===== EXPORT DATA FETCHER =====
+  const reportExpenseExport = useCallback(async (): Promise<
+    ReportExpense[] | null
+  > => {
+    const params = new URLSearchParams();
+    if (filterParams.location_id)
+      params.append('location_id', filterParams.location_id);
+    if (filterParams.supplier_id)
+      params.append('supplier_id', filterParams.supplier_id);
+    if (filterParams.kandang_id)
+      params.append('kandang_id', filterParams.kandang_id);
+    if (filterParams.nonstock_id)
+      params.append('nonstock_id', filterParams.nonstock_id);
+    if (filterParams.realization_date)
+      params.append('realization_date', filterParams.realization_date);
+    if (filterParams.category) params.append('category', filterParams.category);
+    params.append('limit', '100');
+    params.append('page', '1');
+
+    const response = await httpClient<BaseApiResponse<ReportExpense[]>>(
+      `${ReportExpenseApi.basePath}?${params.toString()}`
+    );
+
+    return isResponseSuccess(response) ? response.data : null;
+  }, [filterParams]);
+
+  // ===== EXPORT HANDLERS =====
+  const handleExportExcel = useCallback(async () => {
+    setIsExcelExportLoading(true);
+    try {
+      const allDataForExport = await reportExpenseExport();
+
+      if (!allDataForExport || allDataForExport.length === 0) {
+        toast.error('Tidak ada data untuk diekspor.');
+        return;
+      }
+
+      await generateReportExpenseExcel(allDataForExport);
+      toast.success('Excel berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel. Silakan coba lagi.');
+    } finally {
+      setIsExcelExportLoading(false);
+    }
+  }, [reportExpenseExport]);
+
+  const handleExportPDF = useCallback(async () => {
+    setIsPdfExportLoading(true);
+    try {
+      const allData = await reportExpenseExport();
+      if (!allData || allData.length === 0) {
+        toast.error('Tidak ada data untuk diekspor.');
+        return;
+      }
+
+      const pdfParams = {
+        location_name: locationValue?.label,
+        supplier_name: supplierValue?.label,
+        realization_date: formik.values.realization_date || undefined,
+      };
+
+      await generateReportExpensePDF(allData, pdfParams);
+
+      toast.success('PDF berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat PDF. Silakan coba lagi.');
+    } finally {
+      setIsPdfExportLoading(false);
+    }
+  }, [
+    reportExpenseExport,
+    locationValue,
+    supplierValue,
+    kandangValue,
+    nonstockValue,
+    categoryValue,
+    formik.values.realization_date,
+  ]);
+
+  // ===== REGISTER TAB ACTIONS TO STORE =====
+  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+
+  useEffect(() => {
+    setTabActions(
+      tabId,
+      <div className='flex flex-row gap-3'>
+        <Button
+          variant='outline'
+          color='none'
+          onClick={() => filterModal.openModal()}
+          className={cn(
+            'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+            {
+              'border-primary-gradient text-primary': hasFilters,
+            }
+          )}
+        >
+          <Icon icon='heroicons:funnel' width={20} height={20} />
+          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>
+
+        <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
+          trigger={
+            <Button
+              variant='outline'
+              color='none'
+              isLoading={isAnyExportLoading}
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+            >
+              <div className='flex flex-row items-center gap-1.5'>
+                <Icon
+                  icon='heroicons:cloud-arrow-down'
+                  width={20}
+                  height={20}
+                />
+
+                <span>Export</span>
+
+                <div className='w-px self-stretch bg-base-content/10' />
+
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
+              </div>
+            </Button>
+          }
+        >
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportExcel}
+            isLoading={isExcelExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
+            Export to Excel
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportPDF}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
+        </Dropdown>
+      </div>
+    );
+  }, [
+    tabId,
+    hasFilters,
+    activeFiltersCount,
+    isAnyExportLoading,
+    handleExportExcel,
+    handleExportPDF,
+    setTabActions,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      clearTabActions(tabId);
+    };
+  }, [tabId, clearTabActions]);
+
+  // ===== TABLE COLUMNS DEFINITION =====
+  const columns = useMemo((): ColumnDef<ReportExpense>[] => {
+    return [
+      {
+        header: 'No',
+        cell: (props) => (page - 1) * pageSize + props.row.index + 1,
+      },
+      {
+        header: 'No. PO',
+        accessorKey: 'po_number',
+      },
+      {
+        header: 'No. Referensi',
+        accessorKey: 'reference_number',
+      },
+      {
+        header: 'Tanggal Realisasi',
+        accessorKey: 'realization_date',
+        cell: ({ row }) => {
+          return formatDate(row.original?.realization_date, 'DD MMM, YYYY');
+        },
+      },
+      {
+        header: 'Tanggal Transaksi',
+        accessorKey: 'transaction_date',
+        cell: ({ row }) => {
+          return formatDate(row.original?.transaction_date, 'DD MMM, YYYY');
+        },
+      },
+      {
+        header: 'Kategori',
+        accessorKey: 'category',
+      },
+      {
+        header: 'Produk',
+        accessorFn: (row) => row.pengajuan?.nonstock?.name,
+      },
+      {
+        header: 'Supplier',
+        accessorFn: (row) => row.supplier?.name,
+      },
+      {
+        header: 'Lokasi',
+        accessorFn: (row) => row.kandang?.location?.name,
+      },
+      {
+        header: 'Kandang',
+        accessorFn: (row) => row.kandang?.name,
+      },
+      {
+        header: 'Pengajuan',
+        columns: [
+          {
+            header: 'Qty',
+            id: 'qty_pengajuan',
+            accessorFn: (row) => row.pengajuan?.qty,
+            cell: ({ row }) =>
+              row.original.pengajuan?.qty?.toLocaleString('id-ID') || '0',
+          },
+          {
+            header: 'Harga',
+            id: 'harga_pengajuan',
+            accessorFn: (row) => row.pengajuan?.price,
+            cell: ({ row }) =>
+              formatCurrency(row.original.pengajuan?.price || 0),
+          },
+          {
+            header: 'Total',
+            id: 'total_pengajuan',
+            accessorFn: (row) =>
+              (row.pengajuan?.qty || 0) * (row.pengajuan?.price || 0),
+            cell: ({ row }) => {
+              const total =
+                (row.original.pengajuan?.qty || 0) *
+                (row.original.pengajuan?.price || 0);
+              return formatCurrency(total);
+            },
+          },
+        ],
+      },
+      {
+        header: 'Realisasi',
+        columns: [
+          {
+            header: 'Qty',
+            id: 'qty_realisasi',
+            accessorFn: (row) => row.realisasi?.qty,
+            cell: ({ row }) =>
+              row.original.realisasi?.qty?.toLocaleString('id-ID') || '0',
+          },
+          {
+            header: 'Harga',
+            id: 'harga_realisasi',
+            accessorFn: (row) => row.realisasi?.price,
+            cell: ({ row }) =>
+              formatCurrency(row.original.realisasi?.price || 0),
+          },
+          {
+            header: 'Total',
+            id: 'total_realisasi',
+            accessorFn: (row) =>
+              (row.realisasi?.qty || 0) * (row.realisasi?.price || 0),
+            cell: ({ row }) => {
+              const total =
+                (row.original.realisasi?.qty || 0) *
+                (row.original.realisasi?.price || 0);
+              return formatCurrency(total);
+            },
+          },
+        ],
+      },
+      {
+        header: 'Status Pencairan',
+        cell: (props) => (
+          <RealizationStatusBadge
+            approval={props.row.original?.latest_approval}
+          />
+        ),
+      },
+      {
+        header: 'Status BOP',
+        cell: (props) => (
+          <ExpenseStatusBadge approval={props.row.original?.latest_approval} />
+        ),
+      },
+    ];
+  }, [page, pageSize]);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
+        {!isSubmitted ? (
+          <ReportExpenseSkeleton
+            columns={columns}
+            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>
+        ) : !data || data.length === 0 ? (
+          <ReportExpenseSkeleton
+            columns={columns}
+            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.'
+          />
+        ) : (
+          <>
+            <Table
+              data={data}
+              columns={columns}
+              pageSize={pageSize}
+              page={meta?.page || 1}
+              totalItems={meta?.total_results || 0}
+              onPageChange={setPage}
+              onPageSizeChange={setPageSize}
+              className={{
+                containerClassName: 'w-full mb-0!',
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200 text-nowrap',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+                bodyColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                paginationClassName: 'hidden',
+              }}
+            />
+            {meta && (
+              <div className='max-w-sm ml-auto'>
+                <Pagination
+                  totalItems={meta.total_results || 0}
+                  itemsPerPage={meta.limit || 0}
+                  currentPage={meta.page || 0}
+                  onPrevPage={() =>
+                    setPage((currPage) =>
+                      currPage > 1 ? currPage - 1 : currPage
+                    )
+                  }
+                  onNextPage={() =>
+                    setPage((currPage) =>
+                      meta && meta.total_pages && currPage < meta.total_pages
+                        ? currPage + 1
+                        : currPage
+                    )
+                  }
+                  onPageChange={(pageNumber) => setPage(pageNumber)}
+                  rowOptions={[10, 20, 50, 100]}
+                  onRowChange={setPageSize}
+                />
+              </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',
+        }}
+      >
+        {/* 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>
+
+        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+          {/* Modal Body */}
+          <div className='p-4 flex flex-col gap-3'>
+            <SelectInput
+              label='Lokasi'
+              placeholder='Pilih Lokasi'
+              options={locationOptions}
+              isLoading={isLoadingLocations}
+              value={locationValue}
+              onChange={(val) => {
+                formik.setFieldValue('location_id', val);
+                formik.setFieldValue('kandang_id', null);
+              }}
+              onInputChange={setLocationInputValue}
+              onMenuScrollToBottom={loadMoreLocations}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Kandang'
+              placeholder='Pilih Kandang'
+              options={kandangOptions}
+              isLoading={isLoadingKandangs}
+              value={kandangValue}
+              onChange={(val) => {
+                formik.setFieldValue('kandang_id', val);
+              }}
+              onInputChange={setKandangInputValue}
+              onMenuScrollToBottom={loadMoreKandangs}
+              isClearable
+              isDisabled={!formik.values.location_id}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Supplier'
+              placeholder='Pilih Supplier'
+              options={supplierOptions}
+              isLoading={isLoadingSuppliers}
+              value={supplierValue}
+              onChange={(val) => {
+                formik.setFieldValue('supplier_id', val);
+              }}
+              onInputChange={setSupplierInputValue}
+              onMenuScrollToBottom={loadMoreSuppliers}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Produk'
+              placeholder='Pilih Produk'
+              options={nonstockOptions}
+              isLoading={isLoadingNonstocks}
+              value={nonstockValue}
+              onChange={(val) => {
+                formik.setFieldValue('nonstock_id', val);
+              }}
+              onInputChange={setNonstockInputValue}
+              onMenuScrollToBottom={loadMoreNonstocks}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Kategori'
+              placeholder='Pilih Kategori'
+              options={categoryOptions}
+              value={categoryValue}
+              onChange={(val) => {
+                formik.setFieldValue('category', val);
+              }}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <DateInput
+              label='Tanggal Realisasi'
+              name='realization_date'
+              value={formik.values.realization_date || ''}
+              onChange={(e) => {
+                formik.setFieldValue(
+                  'realization_date',
+                  e.target.value || null
+                );
+              }}
+              className={{ wrapper: 'w-full' }}
+            />
+          </div>
+
+          {/* Modal Footer */}
+          <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'
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </form>
+      </Modal>
+    </>
+  );
+};
+
+export default ReportExpenseTab;