fix: adjust ReportDepreciationTab content

src/components/pages/report/expense/tab/ReportDepreciationTab.tsx

@@ -1,271 +1,121 @@
 'use client';
 
-import React, {
+import React, { useEffect, useMemo } from 'react';
-  useCallback,
+import useSWR from 'swr';
-  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 { Icon } from '@iconify/react';
-import Modal, { useModal } from '@/components/Modal';
+import Card from '@/components/Card';
 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 { useModal } from '@/components/Modal';
+import ReportDepreciationFilterModal from '@/components/pages/report/expense/tab/ReportDepreciationFilterModal';
+
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
-import { formatCurrency } from '@/lib/helper';
+import { ReportDepreciation } from '@/types/api/report/report-expense';
-import {
+import { DepreciationReportApi } from '@/services/api/report/expense-report';
-  ReportDepreciation,
+import { useTableFilter } from '@/services/hooks/useTableFilter';
-  ReportDepreciationSearchParams,
+import { isResponseSuccess } from '@/lib/api-helper';
-} from '@/types/api/report/report-expense';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
-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] =
+  const {
-    useState<ReportDepreciationSearchParams>(INITIAL_FILTERS);
+    state: tableFilterState,
-  const [draftFilters, setDraftFilters] =
+    updateFilter,
-    useState<ReportDepreciationSearchParams>(INITIAL_FILTERS);
+    setPage,
-  const [page, setPage] = useState(1);
+    setPageSize,
-  const [pageSize, setPageSize] = useState(10);
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter({
+    initial: {
+      area_id: '',
+      location_id: '',
+      project_flock_id: '',
+      period: formatDate(Date.now(), 'YYYY-MM-DD'),
+    },
+    paramMap: {
+      pageSize: 'limit',
+      area_id: 'area_id',
+      location_id: 'location_id',
+      project_flock_id: 'project_flock_id',
+      period: 'period',
+    },
+  });
+
+  const { data: depreciationsResponse, isLoading: isLoadingDepreciations } =
+    useSWR(
+      `${DepreciationReportApi.basePath}${getTableFilterQueryString()}`,
+      DepreciationReportApi.getAllFetcher
+    );
+
+  const depreciations = isResponseSuccess(depreciationsResponse)
+    ? depreciationsResponse.data
+    : [];
 
-  const handleFilterModalOpenRef = useRef(() => {});
   const filterModal = useModal();
+  const { ref: filterModalRef } = filterModal;
+
   const setTabActions = useTabActionsStore((state) => state.setTabActions);
   const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
-  const farmOptions = useMemo<OptionType[]>(
+  const depreciationKandangColumns: ColumnDef<
-    () =>
+    ReportDepreciation['components']['kandang'][0]
-      Array.from(new Set(DUMMY_DEPRECIATION_DATA.map((item) => item.farm))).map(
+  >[] = [
-        (farm) => ({
+    {
-          value: farm,
+      accessorKey: 'kandang_name',
-          label: farm,
+      header: 'Kandang',
-        })
+    },
-      ),
+    {
-    []
+      accessorKey: 'house_type',
-  );
+      header: 'Tipe Kandang',
-
+      cell: ({ row }) => row.original.house_type.toUpperCase(),
-  const periodOptions = useMemo<OptionType[]>(
+    },
-    () =>
+    {
-      Array.from(
+      accessorKey: 'depreciation_percent',
-        new Set(DUMMY_DEPRECIATION_DATA.map((item) => item.periode))
+      header: 'Persentase Depresiasi',
-      ).map((period) => ({
+      cell: ({ row }) => row.original.depreciation_percent + '%',
-        value: period,
+    },
-        label: period,
+    {
-      })),
+      accessorKey: 'depreciation_value',
-    []
+      header: 'Nilai Depresiasi',
-  );
+      cell: ({ row }) => formatCurrency(row.original.depreciation_value),
-
+    },
-  const draftFarmValue = useMemo(
+    {
-    () => filterToOption(farmOptions, draftFilters.farm),
+      accessorKey: 'depreciation_source',
-    [draftFilters.farm, farmOptions]
+      header: 'Asal Depresiasi',
-  );
+      cell: ({ row }) => row.original.depreciation_source.toUpperCase(),
-
+    },
-  const draftPeriodValue = useMemo(
+    {
-    () => filterToOption(periodOptions, draftFilters.period),
+      accessorKey: 'cutover_date',
-    [draftFilters.period, periodOptions]
+      header: 'Tanggal Cutover',
-  );
+      cell: ({ row }) => formatDate(row.original.cutover_date, 'DD MMM YYYY'),
-
+    },
-  const filteredData = useMemo(() => {
+    {
-    return DUMMY_DEPRECIATION_DATA.filter((item) => {
+      accessorKey: 'origin_date',
-      const matchFarm = filterParams.farm
+      header: 'Tanggal Origin',
-        ? item.farm === filterParams.farm
+      cell: ({ row }) => formatDate(row.original.origin_date, 'DD MMM YYYY'),
-        : 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}
+          values={tableFilterState}
-          onClick={() => handleFilterModalOpenRef.current()}
+          excludeFields={['page', 'pageSize']}
+          onClick={() => filterModal.openModal()}
           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]
+    [tableFilterState]
   );
 
   useEffect(() => {
@@ -278,44 +128,18 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
     };
   }, [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 && (
+        {isLoadingDepreciations && (
+          <div className='w-full flex flex-row justify-center items-center p-4'>
+            <span className='loading loading-spinner loading-xl' />
+          </div>
+        )}
+
+        {!isLoadingDepreciations && depreciations.length === 0 && (
           <ReportExpenseSkeleton
-            columns={columns}
+            columns={depreciationKandangColumns}
             icon={
               <Icon
                 icon='heroicons:chart-bar'
@@ -329,139 +153,105 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
           />
         )}
 
-        {filteredData.length > 0 && (
+        {!isLoadingDepreciations && depreciations.length > 0 && (
           <>
-            <Table
+            {depreciations.map((depreciationItem, idx) => (
-              data={paginatedData}
+              <Card
-              columns={columns}
+                key={idx}
-              pageSize={pageSize}
+                title={depreciationItem.farm_name}
-              page={page}
+                subtitle={`Period: ${formatDate(depreciationItem.period, 'DD MMM YYYY')} | Depresiasi Efektif: ${formatNumber(depreciationItem.depreciation_percent_effective, 'en-US', 0, 10)}% | Nilai Depresiasi: ${formatCurrency(depreciationItem.depreciation_value)} | Total Pullet Cost: ${formatCurrency(depreciationItem.pullet_cost_day_n_total, 'IDR', 'id-ID', 0, 10)}`}
-              totalItems={filteredData.length}
+                className={{
-              onPageChange={setPage}
+                  wrapper: 'w-full rounded-lg border-none',
-              onPageSizeChange={setPageSize}
+                  body: 'p-0',
-              className={{
+                  title:
-                containerClassName: 'w-full mb-0!',
+                    'px-2 py-1.5 font-normal text-sm bg-primary text-white',
-                tableWrapperClassName: 'overflow-x-auto',
+                  subtitle:
-                tableClassName: 'w-full table-auto text-sm',
+                    'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
-                headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+                  collapsible: 'rounded-lg',
-                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);
                 }}
-              />
+                variant='bordered'
-            </div>
+                collapsible={true}
+              >
+                <Table
+                  data={depreciationItem.components.kandang}
+                  columns={depreciationKandangColumns}
+                  pageSize={tableFilterState.pageSize}
+                  page={
+                    isResponseSuccess(depreciationsResponse)
+                      ? depreciationsResponse?.meta?.page
+                      : 0
+                  }
+                  totalItems={
+                    isResponseSuccess(depreciationsResponse)
+                      ? depreciationsResponse?.meta?.total_results
+                      : 0
+                  }
+                  onPageChange={setPage}
+                  onPageSizeChange={setPageSize}
+                  isLoading={isLoadingDepreciations}
+                  className={{
+                    containerClassName: 'w-full mb-0!',
+                    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:
+                      'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
+                    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',
+                    tableFooterClassName:
+                      'bg-gray-100 font-semibold border border-gray-200',
+                    footerRowClassName: 'border-t-2 border-gray-300',
+                    footerColumnClassName:
+                      'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                    paginationClassName: 'hidden',
+                  }}
+                />
+              </Card>
+            ))}
+
+            <Pagination
+              totalItems={
+                isResponseSuccess(depreciationsResponse)
+                  ? (depreciationsResponse?.meta?.total_results ?? 0)
+                  : 0
+              }
+              itemsPerPage={tableFilterState.pageSize}
+              currentPage={
+                isResponseSuccess(depreciationsResponse)
+                  ? (depreciationsResponse?.meta?.page ?? 0)
+                  : 0
+              }
+              onPrevPage={() => setPage(tableFilterState.page - 1)}
+              onNextPage={() => setPage(tableFilterState.page + 1)}
+              onPageChange={setPage}
+              rowOptions={[10, 20, 50, 100]}
+              onRowChange={setPageSize}
+            />
           </>
         )}
       </div>
 
-      <Modal
+      <ReportDepreciationFilterModal
-        ref={filterModal.ref}
+        ref={filterModalRef}
-        className={{
+        initialValues={tableFilterState}
-          modal: 'p-0',
+        onReset={resetFilter}
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
+        onSubmit={(values) => {
+          updateFilter('area_id', values.area_id ?? '');
+          updateFilter('location_id', values.location_id ?? '');
+          updateFilter('project_flock_id', values.project_flock_id ?? '');
+          updateFilter(
+            'period',
+            values.period ? formatDate(values.period, 'YYYY-MM-DD') : ''
+          );
+
+          console.log({ values });
         }}
-      >
+      />
-        <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;