diff --git a/src/components/pages/report/expense/tab/ReportDepreciationTab.tsx b/src/components/pages/report/expense/tab/ReportDepreciationTab.tsx
new file mode 100644
index 00000000..403bc63b
--- /dev/null
+++ b/src/components/pages/report/expense/tab/ReportDepreciationTab.tsx
@@ -0,0 +1,467 @@
+'use client';
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Icon } from '@iconify/react';
+import { ColumnDef } from '@tanstack/react-table';
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+import Modal, { useModal } from '@/components/Modal';
+import Pagination from '@/components/Pagination';
+import Table from '@/components/Table';
+import ButtonFilter from '@/components/helper/ButtonFilter';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import ReportExpenseSkeleton from '@/components/pages/report/expense/skeleton/ReportExpenseSkeleton';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
+import { formatCurrency } from '@/lib/helper';
+import {
+  ReportDepreciation,
+  ReportDepreciationSearchParams,
+} from '@/types/api/report/report-expense';
+import toast from 'react-hot-toast';
+
+interface ReportDepreciationTabProps {
+  tabId: string;
+}
+
+const DUMMY_DEPRECIATION_DATA: ReportDepreciation[] = [
+  {
+    id: 'DEP-001',
+    flock: 'Flock A-01',
+    totalCostPullet: 185000000,
+    totalDepresiasi: 38500000,
+    periode: 'Periode 1',
+    farm: 'Farm Sukamaju',
+    jumlahKandang: 4,
+  },
+  {
+    id: 'DEP-002',
+    flock: 'Flock A-02',
+    totalCostPullet: 192500000,
+    totalDepresiasi: 40125000,
+    periode: 'Periode 1',
+    farm: 'Farm Sukamaju',
+    jumlahKandang: 5,
+  },
+  {
+    id: 'DEP-003',
+    flock: 'Flock B-01',
+    totalCostPullet: 176800000,
+    totalDepresiasi: 36200000,
+    periode: 'Periode 2',
+    farm: 'Farm Cibitung',
+    jumlahKandang: 3,
+  },
+  {
+    id: 'DEP-004',
+    flock: 'Flock B-02',
+    totalCostPullet: 201400000,
+    totalDepresiasi: 42250000,
+    periode: 'Periode 2',
+    farm: 'Farm Cibitung',
+    jumlahKandang: 4,
+  },
+  {
+    id: 'DEP-005',
+    flock: 'Flock C-01',
+    totalCostPullet: 210900000,
+    totalDepresiasi: 43950000,
+    periode: 'Periode 3',
+    farm: 'Farm Karawang',
+    jumlahKandang: 6,
+  },
+  {
+    id: 'DEP-006',
+    flock: 'Flock C-02',
+    totalCostPullet: 205750000,
+    totalDepresiasi: 43100000,
+    periode: 'Periode 3',
+    farm: 'Farm Karawang',
+    jumlahKandang: 5,
+  },
+  {
+    id: 'DEP-007',
+    flock: 'Flock D-01',
+    totalCostPullet: 188300000,
+    totalDepresiasi: 39000000,
+    periode: 'Periode 4',
+    farm: 'Farm Subang',
+    jumlahKandang: 4,
+  },
+  {
+    id: 'DEP-008',
+    flock: 'Flock D-02',
+    totalCostPullet: 197600000,
+    totalDepresiasi: 40875000,
+    periode: 'Periode 4',
+    farm: 'Farm Subang',
+    jumlahKandang: 5,
+  },
+];
+
+const INITIAL_FILTERS: ReportDepreciationSearchParams = {
+  farm: null,
+  period: null,
+};
+
+const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
+  const [filterParams, setFilterParams] =
+    useState<ReportDepreciationSearchParams>(INITIAL_FILTERS);
+  const [draftFilters, setDraftFilters] =
+    useState<ReportDepreciationSearchParams>(INITIAL_FILTERS);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const handleFilterModalOpenRef = useRef(() => {});
+  const filterModal = useModal();
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+
+  const farmOptions = useMemo<OptionType[]>(
+    () =>
+      Array.from(new Set(DUMMY_DEPRECIATION_DATA.map((item) => item.farm))).map(
+        (farm) => ({
+          value: farm,
+          label: farm,
+        })
+      ),
+    []
+  );
+
+  const periodOptions = useMemo<OptionType[]>(
+    () =>
+      Array.from(
+        new Set(DUMMY_DEPRECIATION_DATA.map((item) => item.periode))
+      ).map((period) => ({
+        value: period,
+        label: period,
+      })),
+    []
+  );
+
+  const draftFarmValue = useMemo(
+    () => filterToOption(farmOptions, draftFilters.farm),
+    [draftFilters.farm, farmOptions]
+  );
+
+  const draftPeriodValue = useMemo(
+    () => filterToOption(periodOptions, draftFilters.period),
+    [draftFilters.period, periodOptions]
+  );
+
+  const filteredData = useMemo(() => {
+    return DUMMY_DEPRECIATION_DATA.filter((item) => {
+      const matchFarm = filterParams.farm
+        ? item.farm === filterParams.farm
+        : true;
+      const matchPeriod = filterParams.period
+        ? item.periode === filterParams.period
+        : true;
+
+      return matchFarm && matchPeriod;
+    });
+  }, [filterParams]);
+
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(filteredData.length / pageSize)),
+    [filteredData.length, pageSize]
+  );
+
+  useEffect(() => {
+    if (page > totalPages) {
+      setPage(totalPages);
+    }
+  }, [page, totalPages]);
+
+  const paginatedData = useMemo(() => {
+    const startIndex = (page - 1) * pageSize;
+    return filteredData.slice(startIndex, startIndex + pageSize);
+  }, [filteredData, page, pageSize]);
+
+  handleFilterModalOpenRef.current = () => {
+    setDraftFilters(filterParams);
+    filterModal.openModal();
+  };
+
+  const handleApplyFilters = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setFilterParams(draftFilters);
+    setPage(1);
+    filterModal.closeModal();
+  };
+
+  const handleResetFilters = () => {
+    setDraftFilters(INITIAL_FILTERS);
+    setFilterParams(INITIAL_FILTERS);
+    setPage(1);
+    filterModal.closeModal();
+  };
+
+  const handleExport = useCallback((type: 'excel' | 'pdf') => {
+    toast.success(
+      `Export ${type.toUpperCase()} belum terhubung API. Saat ini tabel memakai dummy data.`
+    );
+  }, []);
+
+  const tabActionsElement = useMemo(
+    () => (
+      <div className='flex flex-row gap-3'>
+        <ButtonFilter
+          values={filterParams}
+          onClick={() => handleFilterModalOpenRef.current()}
+          variant='outline'
+          className='px-3 py-2.5'
+        />
+
+        <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'
+              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={() => handleExport('excel')}
+            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={() => handleExport('pdf')}
+            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>
+    ),
+    [filterParams, handleExport]
+  );
+
+  useEffect(() => {
+    setTabActions(tabId, tabActionsElement);
+  }, [setTabActions, tabActionsElement, tabId]);
+
+  useEffect(() => {
+    return () => {
+      clearTabActions(tabId);
+    };
+  }, [clearTabActions, tabId]);
+
+  const columns = useMemo((): ColumnDef<ReportDepreciation>[] => {
+    return [
+      {
+        header: 'Flock',
+        accessorKey: 'flock',
+      },
+      {
+        header: 'Total Cost Pullet',
+        accessorKey: 'totalCostPullet',
+        cell: ({ row }) => formatCurrency(row.original.totalCostPullet),
+      },
+      {
+        header: 'Total Depresiasi',
+        accessorKey: 'totalDepresiasi',
+        cell: ({ row }) => formatCurrency(row.original.totalDepresiasi),
+      },
+      {
+        header: 'Periode',
+        accessorKey: 'periode',
+      },
+      {
+        header: 'Farm',
+        accessorKey: 'farm',
+      },
+      {
+        header: 'Jumlah Kandang',
+        accessorKey: 'jumlahKandang',
+        cell: ({ row }) => row.original.jumlahKandang.toLocaleString('id-ID'),
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
+        {filteredData.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.'
+          />
+        )}
+
+        {filteredData.length > 0 && (
+          <>
+            <Table
+              data={paginatedData}
+              columns={columns}
+              pageSize={pageSize}
+              page={page}
+              totalItems={filteredData.length}
+              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',
+              }}
+            />
+
+            <div className='max-w-sm ml-auto'>
+              <Pagination
+                totalItems={filteredData.length}
+                itemsPerPage={pageSize}
+                currentPage={page}
+                onPrevPage={() =>
+                  setPage((currentPage) =>
+                    currentPage > 1 ? currentPage - 1 : currentPage
+                  )
+                }
+                onNextPage={() =>
+                  setPage((currentPage) =>
+                    currentPage < totalPages ? currentPage + 1 : currentPage
+                  )
+                }
+                onPageChange={setPage}
+                rowOptions={[10, 20, 50, 100]}
+                onRowChange={(value) => {
+                  setPageSize(value);
+                  setPage(1);
+                }}
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
+          <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
+          </div>
+          <Button
+            variant='link'
+            onClick={filterModal.closeModal}
+            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
+
+        <form onSubmit={handleApplyFilters} onReset={handleResetFilters}>
+          <div className='p-4 flex flex-col gap-3'>
+            <SelectInput
+              label='Farm'
+              placeholder='Pilih Farm'
+              options={farmOptions}
+              value={draftFarmValue}
+              onChange={(val) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  farm: (val as OptionType | null)?.value?.toString() || null,
+                }))
+              }
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Periode'
+              placeholder='Pilih Periode'
+              options={periodOptions}
+              value={draftPeriodValue}
+              onChange={(val) =>
+                setDraftFilters((current) => ({
+                  ...current,
+                  period: (val as OptionType | null)?.value?.toString() || null,
+                }))
+              }
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+          </div>
+
+          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
+            <Button
+              type='reset'
+              variant='soft'
+              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
+            >
+              Reset Filter
+            </Button>
+            <Button
+              type='submit'
+              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </form>
+      </Modal>
+    </>
+  );
+};
+
+const filterToOption = (
+  options: OptionType[],
+  value: string | null
+): OptionType | null => {
+  if (!value) return null;
+  return options.find((option) => option.value === value) || null;
+};
+
+export default ReportDepreciationTab;