feat(FE-338): Slicing UI Halaman Reporting BOP & API integration & refactor debounce input: adding useEffect for sync value

src/app/report/expense/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/report/expense/detail/page.tsx

@@ -0,0 +1,5 @@
+const ReportExpenseDetail = () => {
+  return <div>ReportExpenseDetail</div>;
+};
+
+export default ReportExpenseDetail;

src/app/report/expense/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useState } from 'react';
+import useSWR from 'swr';
+import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
+import { ReportExpenseApi } from '@/services/api/report';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { ReportExpenseSearchParams } from '@/types/api/report/report-expense';
+
+const ReportExpense = () => {
+  const [params, setParams] = useState<ReportExpenseSearchParams>({
+    locationId: null,
+    supplierId: null,
+    kandangId: null,
+    startDate: null,
+    endDate: null,
+    category: null,
+    period: '',
+    search: '',
+  });
+
+  const reportUrl = `${ReportExpenseApi.basePath}?${new URLSearchParams({
+    location_id: params.locationId ?? '',
+    supplier_id: params.supplierId ?? '',
+    kandang_id: params.kandangId ?? '',
+    start_date: params.startDate ?? '',
+    end_date: params.endDate ?? '',
+    category: params.category ?? '',
+    period: params.period.toString(),
+    search: params.search,
+  })}`;
+  const { data: reportExpenses } = useSWR(reportUrl, () =>
+    ReportExpenseApi.getAllFetcher(reportUrl)
+  );
+
+  const onSearch = (searchParams: ReportExpenseSearchParams) => {
+    setParams(searchParams);
+  };
+
+  return (
+    <div className='w-full p-4'>
+      <ReportExpenseTable
+        reportExpenses={
+          isResponseSuccess(reportExpenses) ? reportExpenses.data : []
+        }
+        onSearch={onSearch}
+      />
+    </div>
+  );
+};
+
+export default ReportExpense;