fix: pass page and pageSize to Table component

This commit is contained in:
ValdiANS
2026-04-20 01:14:10 +07:00
parent 5b5113de6e
commit 898bbd57ec
2 changed files with 65 additions and 2 deletions
@@ -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!',
@@ -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={{