fix: pass page and pageSize to Table component

src/components/pages/report/marketing/tab/DailyMarketingTab.tsx

@@ -53,6 +53,8 @@ interface DailyMarketingTabProps {
 }
 
 interface FilterParams {
+  page?: number;
+  pageSize?: number;
   area_id?: string;
   location_id?: string;
   warehouse_id?: string;
@@ -116,6 +118,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   // ===== FORMIK SETUP =====
   const formik = useFormik<DailyMarketingReportFilterType>({
     initialValues: {
+      page: 1,
+      pageSize: 10,
       search: null,
       area_id: null,
       location_id: null,
@@ -130,6 +134,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
     validationSchema: DailyMarketingReportFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
       setFilterParams({
+        page: values.page || undefined,
+        pageSize: values.pageSize || undefined,
         area_id: values.area_id || undefined,
         location_id: values.location_id || undefined,
         warehouse_id: values.warehouse_id || undefined,
@@ -222,6 +228,9 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
       const params = new URLSearchParams();
 
       if (searchValue) params.set('search', searchValue);
+      if (filterParams.page) params.set('page', String(filterParams.page));
+      if (filterParams.pageSize)
+        params.set('limit', String(filterParams.pageSize));
       if (filterParams.area_id) params.set('area_id', filterParams.area_id);
       if (filterParams.location_id)
         params.set('location_id', filterParams.location_id);
@@ -283,6 +292,7 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
     if (filterParams.marketing_type)
       params.set('marketing_type', filterParams.marketing_type);
     if (filterParams.sort_by) params.set('sort_by', filterParams.sort_by);
+    params.set('page', '1');
     params.set('limit', '9999999');
 
     const queryString = `?${params.toString()}`;
@@ -688,6 +698,27 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
           <Table
             data={data}
             columns={getTableColumns()}
+            pageSize={filterParams.pageSize}
+            page={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.total_results
+                : 0
+            }
+            onPageChange={(newPage) =>
+              setFilterParams((prevVal) => ({ ...prevVal, page: newPage }))
+            }
+            onPageSizeChange={(newPageSize) =>
+              setFilterParams((prevVal) => ({
+                ...prevVal,
+                pageSize: newPageSize,
+              }))
+            }
+            isLoading={isLoading}
             renderFooter={data.length > 0}
             className={{
               containerClassName: 'w-full mb-0!',

src/components/pages/report/marketing/tab/HppPerKandangTab.tsx

@@ -40,6 +40,8 @@ interface HppPerKandangTabProps {
 }
 
 interface FilterParams {
+  page?: number;
+  pageSize?: number;
   area_id?: string;
   location_id?: string;
   kandang_id?: string;
@@ -108,6 +110,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
   // ===== FORMIK SETUP =====
   const formik = useFormik<HppPerKandangFilterType>({
     initialValues: {
+      page: 1,
+      pageSize: 10,
       area_id: null,
       location_id: null,
       kandang_id: null,
@@ -120,6 +124,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     validationSchema: HppPerKandangFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
       setFilterParams({
+        page: values.page || undefined,
+        pageSize: values.pageSize || undefined,
         area_id: values.area_id || undefined,
         location_id: values.location_id || undefined,
         kandang_id: values.kandang_id || undefined,
@@ -257,6 +263,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
             period: filterParams.period,
             sort_by: filterParams.sort_by,
             show_unrecorded: filterParams.show_unrecorded,
+            page: filterParams.page,
+            pageSize: filterParams.pageSize,
           };
 
           return ['hpp-per-kandang-report', params];
@@ -271,7 +279,9 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
         params.weight_max,
         params.period,
         params.sort_by,
-        params.show_unrecorded
+        params.show_unrecorded,
+        params.page,
+        params.pageSize
       )
   );
 
@@ -321,7 +331,9 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
         params.weight_max,
         params.period,
         params.sort_by,
-        params.show_unrecorded
+        params.show_unrecorded,
+        params.page,
+        params.limit
       );
 
       return isResponseSuccess(response) ? response.data : null;
@@ -466,6 +478,7 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
           <div className='flex flex-row gap-3'>
             <ButtonFilter
               values={filterParams}
+              excludeFields={['page', 'pageSize']}
               onClick={() => handleFilterModalOpenRef.current()}
               variant='outline'
               className='px-3 py-2.5'
@@ -845,6 +858,25 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
           <Table
             data={data}
             columns={getTableColumns()}
+            pageSize={filterParams.pageSize}
+            page={
+              isResponseSuccess(hppPerKandang) ? hppPerKandang?.meta?.page : 0
+            }
+            totalItems={
+              isResponseSuccess(hppPerKandang)
+                ? hppPerKandang?.meta?.total_results
+                : 0
+            }
+            onPageChange={(newPage) =>
+              setFilterParams((prevVal) => ({ ...prevVal, page: newPage }))
+            }
+            onPageSizeChange={(newPageSize) =>
+              setFilterParams((prevVal) => ({
+                ...prevVal,
+                pageSize: newPageSize,
+              }))
+            }
+            isLoading={isLoading}
             renderFooter={data.length > 0}
             renderCustomRow={renderCustomRow}
             className={{