mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'development' into fix/expense-report-filter
This commit is contained in:
@@ -279,8 +279,6 @@ const ExpenseRequestContent = ({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className='w-full mt-4 flex flex-col gap-4'>
|
<div className='w-full mt-4 flex flex-col gap-4'>
|
||||||
{/* TODO: apply RBAC */}
|
|
||||||
|
|
||||||
<div className='w-full mx-auto flex flex-col sm:flex-row justify-end gap-2'>
|
<div className='w-full mx-auto flex flex-col sm:flex-row justify-end gap-2'>
|
||||||
{isCurrentApprovalOnHeadArea && (
|
{isCurrentApprovalOnHeadArea && (
|
||||||
<RequirePermission permissions='lti.expense.approve.head_area'>
|
<RequirePermission permissions='lti.expense.approve.head_area'>
|
||||||
|
|||||||
@@ -59,8 +59,7 @@ const RowOptionsMenu = ({
|
|||||||
detailClickHandler: (id: number) => void;
|
detailClickHandler: (id: number) => void;
|
||||||
deleteClickHandler: () => void;
|
deleteClickHandler: () => void;
|
||||||
}) => {
|
}) => {
|
||||||
// TODO: change this to real condition
|
const showEditButton = props.row.original.approval?.step_number !== 2;
|
||||||
const showEditButton = true;
|
|
||||||
|
|
||||||
const showDeleteButton = showEditButton;
|
const showDeleteButton = showEditButton;
|
||||||
|
|
||||||
|
|||||||
@@ -67,7 +67,6 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
|
|||||||
const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
|
const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
|
||||||
|
|
||||||
// ===== SUBMISSION STATE =====
|
// ===== SUBMISSION STATE =====
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
||||||
const [filterParams, setFilterParams] = useState<FilterParams>({});
|
const [filterParams, setFilterParams] = useState<FilterParams>({});
|
||||||
|
|
||||||
// ===== PAGINATION STATE =====
|
// ===== PAGINATION STATE =====
|
||||||
@@ -117,12 +116,10 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
|
|||||||
: undefined,
|
: undefined,
|
||||||
});
|
});
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
setIsSubmitted(true);
|
|
||||||
setPage(1);
|
setPage(1);
|
||||||
},
|
},
|
||||||
onReset: () => {
|
onReset: () => {
|
||||||
setFilterParams({});
|
setFilterParams({});
|
||||||
setIsSubmitted(false);
|
|
||||||
setPage(1);
|
setPage(1);
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
},
|
},
|
||||||
@@ -194,27 +191,25 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
|
|||||||
|
|
||||||
// ===== DATA FETCHING =====
|
// ===== DATA FETCHING =====
|
||||||
const { data: reportExpenseResponse, isLoading } = useSWR(
|
const { data: reportExpenseResponse, isLoading } = useSWR(
|
||||||
isSubmitted
|
() => {
|
||||||
? () => {
|
const params = new URLSearchParams();
|
||||||
const params = new URLSearchParams();
|
if (filterParams.location_id)
|
||||||
if (filterParams.location_id)
|
params.append('location_id', filterParams.location_id);
|
||||||
params.append('location_id', filterParams.location_id);
|
if (filterParams.supplier_id)
|
||||||
if (filterParams.supplier_id)
|
params.append('supplier_id', filterParams.supplier_id);
|
||||||
params.append('supplier_id', filterParams.supplier_id);
|
if (filterParams.kandang_id)
|
||||||
if (filterParams.kandang_id)
|
params.append('kandang_id', filterParams.kandang_id);
|
||||||
params.append('kandang_id', filterParams.kandang_id);
|
if (filterParams.nonstock_id)
|
||||||
if (filterParams.nonstock_id)
|
params.append('nonstock_id', filterParams.nonstock_id);
|
||||||
params.append('nonstock_id', filterParams.nonstock_id);
|
if (filterParams.realization_date)
|
||||||
if (filterParams.realization_date)
|
params.append('realization_date', filterParams.realization_date);
|
||||||
params.append('realization_date', filterParams.realization_date);
|
if (filterParams.category)
|
||||||
if (filterParams.category)
|
params.append('category', filterParams.category);
|
||||||
params.append('category', filterParams.category);
|
params.append('page', String(page));
|
||||||
params.append('page', String(page));
|
params.append('limit', String(pageSize));
|
||||||
params.append('limit', String(pageSize));
|
|
||||||
|
|
||||||
return [`${ReportExpenseApi.basePath}?${params.toString()}`];
|
return [`${ReportExpenseApi.basePath}?${params.toString()}`];
|
||||||
}
|
},
|
||||||
: null,
|
|
||||||
([url]: string[]) => httpClient<BaseApiResponse<ReportExpense[]>>(url)
|
([url]: string[]) => httpClient<BaseApiResponse<ReportExpense[]>>(url)
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -529,25 +524,13 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
|
|||||||
<>
|
<>
|
||||||
{TabActionsElement}
|
{TabActionsElement}
|
||||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||||
{!isSubmitted ? (
|
{isLoading && (
|
||||||
<ReportExpenseSkeleton
|
|
||||||
columns={columns}
|
|
||||||
icon={
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:funnel'
|
|
||||||
className='text-white'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
title='No Filters Selected'
|
|
||||||
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
|
||||||
/>
|
|
||||||
) : isLoading ? (
|
|
||||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
<span className='loading loading-spinner loading-xl' />
|
<span className='loading loading-spinner loading-xl' />
|
||||||
</div>
|
</div>
|
||||||
) : !data || data.length === 0 ? (
|
)}
|
||||||
|
|
||||||
|
{!isLoading && (!data || data.length === 0) && (
|
||||||
<ReportExpenseSkeleton
|
<ReportExpenseSkeleton
|
||||||
columns={columns}
|
columns={columns}
|
||||||
icon={
|
icon={
|
||||||
@@ -561,7 +544,9 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
|
|||||||
title='Data Not Yet Available'
|
title='Data Not Yet Available'
|
||||||
subtitle='Please change your filters to get the data.'
|
subtitle='Please change your filters to get the data.'
|
||||||
/>
|
/>
|
||||||
) : (
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<Table
|
<Table
|
||||||
data={data}
|
data={data}
|
||||||
|
|||||||
@@ -61,7 +61,6 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
const [pageSize] = useState(10);
|
const [pageSize] = useState(10);
|
||||||
|
|
||||||
// ===== SUBMISSION STATE =====
|
// ===== SUBMISSION STATE =====
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
||||||
const [filterParams, setFilterParams] = useState<FilterParams>({});
|
const [filterParams, setFilterParams] = useState<FilterParams>({});
|
||||||
const [dateErrorShown, setDateErrorShown] = useState(false);
|
const [dateErrorShown, setDateErrorShown] = useState(false);
|
||||||
const [hasDateError, setHasDateError] = useState(false);
|
const [hasDateError, setHasDateError] = useState(false);
|
||||||
@@ -102,13 +101,11 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
filter_by: values.filter_by || undefined,
|
filter_by: values.filter_by || undefined,
|
||||||
});
|
});
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
setIsSubmitted(true);
|
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
},
|
},
|
||||||
onReset: () => {
|
onReset: () => {
|
||||||
setFilterParams({});
|
setFilterParams({});
|
||||||
setIsSubmitted(false);
|
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
setHasDateError(false);
|
setHasDateError(false);
|
||||||
if (dateErrorShown) {
|
if (dateErrorShown) {
|
||||||
@@ -218,23 +215,21 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
|
|
||||||
// ===== DATA FETCHING =====
|
// ===== DATA FETCHING =====
|
||||||
const { data: customerPayment, isLoading } = useSWR(
|
const { data: customerPayment, isLoading } = useSWR(
|
||||||
isSubmitted
|
() => {
|
||||||
? () => {
|
const params = {
|
||||||
const params = {
|
customer_ids: filterParams.customer_ids,
|
||||||
customer_ids: filterParams.customer_ids,
|
filter_by: filterParams.filter_by as
|
||||||
filter_by: filterParams.filter_by as
|
| 'trans_date'
|
||||||
| 'trans_date'
|
| 'realization_date'
|
||||||
| 'realization_date'
|
| undefined,
|
||||||
| undefined,
|
start_date: filterParams.start_date,
|
||||||
start_date: filterParams.start_date,
|
end_date: filterParams.end_date,
|
||||||
end_date: filterParams.end_date,
|
page: currentPage,
|
||||||
page: currentPage,
|
limit: pageSize,
|
||||||
limit: pageSize,
|
};
|
||||||
};
|
|
||||||
|
|
||||||
return ['customer-payment-report', params];
|
return ['customer-payment-report', params];
|
||||||
}
|
},
|
||||||
: null,
|
|
||||||
([, params]) =>
|
([, params]) =>
|
||||||
FinanceApi.getCustomerPaymentReport(
|
FinanceApi.getCustomerPaymentReport(
|
||||||
params.customer_ids,
|
params.customer_ids,
|
||||||
@@ -700,25 +695,13 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
<>
|
<>
|
||||||
{TabActionsElement}
|
{TabActionsElement}
|
||||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||||
{!isSubmitted ? (
|
{isLoading && (
|
||||||
<CustomerSupplierSkeleton
|
|
||||||
columns={getTableColumns({} as CustomerPaymentSummary)}
|
|
||||||
icon={
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:funnel'
|
|
||||||
className='text-white'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
title='No Filters Selected'
|
|
||||||
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
|
||||||
/>
|
|
||||||
) : isLoading ? (
|
|
||||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
<span className='loading loading-spinner loading-xl' />
|
<span className='loading loading-spinner loading-xl' />
|
||||||
</div>
|
</div>
|
||||||
) : data.length === 0 ? (
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data.length === 0 && (
|
||||||
<CustomerSupplierSkeleton
|
<CustomerSupplierSkeleton
|
||||||
columns={getTableColumns({} as CustomerPaymentSummary)}
|
columns={getTableColumns({} as CustomerPaymentSummary)}
|
||||||
icon={
|
icon={
|
||||||
@@ -732,7 +715,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
title='Data Not Yet Available'
|
title='Data Not Yet Available'
|
||||||
subtitle='Please change your filters to get the data.'
|
subtitle='Please change your filters to get the data.'
|
||||||
/>
|
/>
|
||||||
) : (
|
)}
|
||||||
|
|
||||||
|
{!isLoading &&
|
||||||
|
data.length > 0 &&
|
||||||
data.map((customerReport) => {
|
data.map((customerReport) => {
|
||||||
const summary = customerReport.summary || {
|
const summary = customerReport.summary || {
|
||||||
total_qty: 0,
|
total_qty: 0,
|
||||||
@@ -761,7 +747,6 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
}}
|
}}
|
||||||
variant='bordered'
|
variant='bordered'
|
||||||
collapsible={true}
|
collapsible={true}
|
||||||
defaultCollapsed={true}
|
|
||||||
>
|
>
|
||||||
<Table
|
<Table
|
||||||
data={[
|
data={[
|
||||||
@@ -825,8 +810,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
|||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
})
|
})}
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filter Modal */}
|
{/* Filter Modal */}
|
||||||
|
|||||||
@@ -85,7 +85,6 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
supplier_ids: undefined,
|
supplier_ids: undefined,
|
||||||
filter_by: undefined,
|
filter_by: undefined,
|
||||||
});
|
});
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
||||||
|
|
||||||
// ===== DATE ERROR STATE =====
|
// ===== DATE ERROR STATE =====
|
||||||
const [dateErrorShown, setDateErrorShown] = useState(false);
|
const [dateErrorShown, setDateErrorShown] = useState(false);
|
||||||
@@ -129,7 +128,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
filter_by: values.filterBy?.value?.toString() || undefined,
|
filter_by: values.filterBy?.value?.toString() || undefined,
|
||||||
});
|
});
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
setIsSubmitted(true);
|
// setIsSubmitted(true);
|
||||||
},
|
},
|
||||||
onReset: () => {
|
onReset: () => {
|
||||||
setFilterParams({
|
setFilterParams({
|
||||||
@@ -138,7 +137,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
supplier_ids: undefined,
|
supplier_ids: undefined,
|
||||||
filter_by: undefined,
|
filter_by: undefined,
|
||||||
});
|
});
|
||||||
setIsSubmitted(false);
|
// setIsSubmitted(false);
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -150,18 +149,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
|
|
||||||
// ===== DATA FETCHING =====
|
// ===== DATA FETCHING =====
|
||||||
const { data: debtSupplier, isLoading } = useSWR(
|
const { data: debtSupplier, isLoading } = useSWR(
|
||||||
isSubmitted
|
() => {
|
||||||
? () => {
|
const params = {
|
||||||
const params = {
|
supplier_ids: filterParams.supplier_ids,
|
||||||
supplier_ids: filterParams.supplier_ids,
|
filter_by: filterParams.filter_by,
|
||||||
filter_by: filterParams.filter_by,
|
start_date: filterParams.start_date,
|
||||||
start_date: filterParams.start_date,
|
end_date: filterParams.end_date,
|
||||||
end_date: filterParams.end_date,
|
};
|
||||||
};
|
|
||||||
|
|
||||||
return ['debt-supplier-report', params];
|
return ['debt-supplier-report', params];
|
||||||
}
|
},
|
||||||
: null,
|
|
||||||
([, params]) =>
|
([, params]) =>
|
||||||
DebtSupplierApi.getDebtSupplierReport(
|
DebtSupplierApi.getDebtSupplierReport(
|
||||||
params.supplier_ids,
|
params.supplier_ids,
|
||||||
@@ -611,25 +608,13 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
<>
|
<>
|
||||||
{TabActionsElement}
|
{TabActionsElement}
|
||||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||||
{!isSubmitted ? (
|
{isLoading && (
|
||||||
<DebtSupplierSkeleton
|
|
||||||
columns={getTableColumns()}
|
|
||||||
icon={
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:funnel'
|
|
||||||
className='text-white'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
title='No Filters Selected'
|
|
||||||
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
|
||||||
/>
|
|
||||||
) : isLoading ? (
|
|
||||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
<span className='loading loading-spinner loading-xl' />
|
<span className='loading loading-spinner loading-xl' />
|
||||||
</div>
|
</div>
|
||||||
) : data.length === 0 ? (
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data.length === 0 && (
|
||||||
<DebtSupplierSkeleton
|
<DebtSupplierSkeleton
|
||||||
columns={getTableColumns()}
|
columns={getTableColumns()}
|
||||||
icon={
|
icon={
|
||||||
@@ -643,7 +628,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
title='Data Not Yet Available'
|
title='Data Not Yet Available'
|
||||||
subtitle='Please change your filters to get the data.'
|
subtitle='Please change your filters to get the data.'
|
||||||
/>
|
/>
|
||||||
) : (
|
)}
|
||||||
|
|
||||||
|
{!isLoading &&
|
||||||
|
data.length > 0 &&
|
||||||
data.map((supplierReport) => {
|
data.map((supplierReport) => {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
@@ -658,7 +646,6 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
}}
|
}}
|
||||||
variant='bordered'
|
variant='bordered'
|
||||||
collapsible={true}
|
collapsible={true}
|
||||||
defaultCollapsed={true}
|
|
||||||
>
|
>
|
||||||
<Table
|
<Table
|
||||||
data={[
|
data={[
|
||||||
@@ -729,8 +716,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
|||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
})
|
})}
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filter Modal */}
|
{/* Filter Modal */}
|
||||||
|
|||||||
@@ -61,7 +61,6 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
|
|
||||||
// ===== SUBMISSION STATE =====
|
// ===== SUBMISSION STATE =====
|
||||||
const [filterParams, setFilterParams] = useState<FilterParams>({});
|
const [filterParams, setFilterParams] = useState<FilterParams>({});
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
||||||
const [dateErrorShown, setDateErrorShown] = useState(false);
|
const [dateErrorShown, setDateErrorShown] = useState(false);
|
||||||
const [hasDateError, setHasDateError] = useState(false);
|
const [hasDateError, setHasDateError] = useState(false);
|
||||||
|
|
||||||
@@ -141,13 +140,11 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
sort_by: values.sort_by || undefined,
|
sort_by: values.sort_by || undefined,
|
||||||
});
|
});
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
setIsSubmitted(true);
|
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
},
|
},
|
||||||
onReset: () => {
|
onReset: () => {
|
||||||
setFilterParams({});
|
setFilterParams({});
|
||||||
setIsSubmitted(false);
|
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
setHasDateError(false);
|
setHasDateError(false);
|
||||||
if (dateErrorShown) {
|
if (dateErrorShown) {
|
||||||
@@ -271,24 +268,22 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
|
|
||||||
// ===== DATA FETCHING =====
|
// ===== DATA FETCHING =====
|
||||||
const { data: purchasePerSupplier, isLoading } = useSWR(
|
const { data: purchasePerSupplier, isLoading } = useSWR(
|
||||||
isSubmitted
|
() => {
|
||||||
? () => {
|
const params = {
|
||||||
const params = {
|
area_id: filterParams.area_id,
|
||||||
area_id: filterParams.area_id,
|
supplier_id: filterParams.supplier_id,
|
||||||
supplier_id: filterParams.supplier_id,
|
product_id: filterParams.product_id,
|
||||||
product_id: filterParams.product_id,
|
product_category_id: filterParams.product_category_id,
|
||||||
product_category_id: filterParams.product_category_id,
|
start_date: filterParams.start_date,
|
||||||
start_date: filterParams.start_date,
|
end_date: filterParams.end_date,
|
||||||
end_date: filterParams.end_date,
|
sort_by: filterParams.sort_by,
|
||||||
sort_by: filterParams.sort_by,
|
filter_by: filterParams.filter_by,
|
||||||
filter_by: filterParams.filter_by,
|
page: currentPage,
|
||||||
page: currentPage,
|
limit: pageSize,
|
||||||
limit: pageSize,
|
};
|
||||||
};
|
|
||||||
|
|
||||||
return ['logistic-purchase-report', params];
|
return ['logistic-purchase-report', params];
|
||||||
}
|
},
|
||||||
: null,
|
|
||||||
([, params]) =>
|
([, params]) =>
|
||||||
LogisticApi.getLogisticPurchasePerSupplierReport(
|
LogisticApi.getLogisticPurchasePerSupplierReport(
|
||||||
params.area_id,
|
params.area_id,
|
||||||
@@ -736,21 +731,7 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
<>
|
<>
|
||||||
{TabActionsElement}
|
{TabActionsElement}
|
||||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||||
{!isSubmitted ? (
|
{isLoading && (
|
||||||
<PurchasePerSupplierSkeleton
|
|
||||||
columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
|
|
||||||
icon={
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:funnel'
|
|
||||||
className='text-white'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
title='No Filters Selected'
|
|
||||||
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
|
||||||
/>
|
|
||||||
) : isLoading ? (
|
|
||||||
<PurchasePerSupplierSkeleton
|
<PurchasePerSupplierSkeleton
|
||||||
columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
|
columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
|
||||||
icon={
|
icon={
|
||||||
@@ -764,7 +745,9 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
title='Memuat Data Pembelian Per Supplier'
|
title='Memuat Data Pembelian Per Supplier'
|
||||||
subtitle='Silakan tunggu sebentar...'
|
subtitle='Silakan tunggu sebentar...'
|
||||||
/>
|
/>
|
||||||
) : data.length === 0 ? (
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data.length === 0 && (
|
||||||
<PurchasePerSupplierSkeleton
|
<PurchasePerSupplierSkeleton
|
||||||
columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
|
columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
|
||||||
icon={
|
icon={
|
||||||
@@ -778,7 +761,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
title='Data Not Yet Available'
|
title='Data Not Yet Available'
|
||||||
subtitle='Please change your filters to get the data.'
|
subtitle='Please change your filters to get the data.'
|
||||||
/>
|
/>
|
||||||
) : (
|
)}
|
||||||
|
|
||||||
|
{!isLoading &&
|
||||||
|
data.length > 0 &&
|
||||||
data.map((supplierReport) => {
|
data.map((supplierReport) => {
|
||||||
const summary = supplierReport.summary || {
|
const summary = supplierReport.summary || {
|
||||||
total_qty: 0,
|
total_qty: 0,
|
||||||
@@ -808,7 +794,6 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
}}
|
}}
|
||||||
variant='bordered'
|
variant='bordered'
|
||||||
collapsible={true}
|
collapsible={true}
|
||||||
defaultCollapsed={true}
|
|
||||||
>
|
>
|
||||||
<Table
|
<Table
|
||||||
data={supplierReport.rows}
|
data={supplierReport.rows}
|
||||||
@@ -837,8 +822,7 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
|
|||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
})
|
})}
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filter Modal */}
|
{/* Filter Modal */}
|
||||||
|
|||||||
@@ -70,9 +70,6 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
|
|||||||
const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
|
const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
|
||||||
const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
|
const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
|
||||||
|
|
||||||
// ===== SUBMISSION STATE =====
|
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
||||||
|
|
||||||
// ===== SEARCH STATE =====
|
// ===== SEARCH STATE =====
|
||||||
const [searchValue, setSearchValue] = useState<string>('');
|
const [searchValue, setSearchValue] = useState<string>('');
|
||||||
|
|
||||||
@@ -144,12 +141,10 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
|
|||||||
sort_by: values.sort_by || undefined,
|
sort_by: values.sort_by || undefined,
|
||||||
});
|
});
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
setIsSubmitted(true);
|
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
},
|
},
|
||||||
onReset: () => {
|
onReset: () => {
|
||||||
setFilterParams({});
|
setFilterParams({});
|
||||||
setIsSubmitted(false);
|
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -223,31 +218,28 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
|
|||||||
|
|
||||||
// ===== DATA FETCHING =====
|
// ===== DATA FETCHING =====
|
||||||
const { data: dailyMarketings, isLoading } = useSWR(
|
const { data: dailyMarketings, isLoading } = useSWR(
|
||||||
isSubmitted
|
() => {
|
||||||
? () => {
|
const params = new URLSearchParams();
|
||||||
const params = new URLSearchParams();
|
|
||||||
|
|
||||||
if (searchValue) params.set('search', searchValue);
|
if (searchValue) params.set('search', searchValue);
|
||||||
if (filterParams.area_id) params.set('area_id', filterParams.area_id);
|
if (filterParams.area_id) params.set('area_id', filterParams.area_id);
|
||||||
if (filterParams.location_id)
|
if (filterParams.location_id)
|
||||||
params.set('location_id', filterParams.location_id);
|
params.set('location_id', filterParams.location_id);
|
||||||
if (filterParams.warehouse_id)
|
if (filterParams.warehouse_id)
|
||||||
params.set('warehouse_id', filterParams.warehouse_id);
|
params.set('warehouse_id', filterParams.warehouse_id);
|
||||||
if (filterParams.customer_id)
|
if (filterParams.customer_id)
|
||||||
params.set('customer_id', filterParams.customer_id);
|
params.set('customer_id', filterParams.customer_id);
|
||||||
if (filterParams.start_date)
|
if (filterParams.start_date)
|
||||||
params.set('start_date', filterParams.start_date);
|
params.set('start_date', filterParams.start_date);
|
||||||
if (filterParams.end_date)
|
if (filterParams.end_date) params.set('end_date', filterParams.end_date);
|
||||||
params.set('end_date', filterParams.end_date);
|
if (filterParams.filter_by)
|
||||||
if (filterParams.filter_by)
|
params.set('filter_by', filterParams.filter_by);
|
||||||
params.set('filter_by', filterParams.filter_by);
|
if (filterParams.marketing_type)
|
||||||
if (filterParams.marketing_type)
|
params.set('marketing_type', filterParams.marketing_type);
|
||||||
params.set('marketing_type', filterParams.marketing_type);
|
if (filterParams.sort_by) params.set('sort_by', filterParams.sort_by);
|
||||||
if (filterParams.sort_by) params.set('sort_by', filterParams.sort_by);
|
|
||||||
|
|
||||||
return ['daily-marketing-report', params.toString()];
|
return ['daily-marketing-report', params.toString()];
|
||||||
}
|
},
|
||||||
: null,
|
|
||||||
([, params]) =>
|
([, params]) =>
|
||||||
MarketingReportApi.getAllDailyMarketingFetcher(
|
MarketingReportApi.getAllDailyMarketingFetcher(
|
||||||
`${MarketingReportApi.basePath}?${params}`
|
`${MarketingReportApi.basePath}?${params}`
|
||||||
@@ -660,21 +652,7 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
|
|||||||
<>
|
<>
|
||||||
{TabActionsElement}
|
{TabActionsElement}
|
||||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||||
{!isSubmitted ? (
|
{isLoading && (
|
||||||
<DailyMarketingReportSkeleton
|
|
||||||
columns={getTableColumns()}
|
|
||||||
icon={
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:funnel'
|
|
||||||
className='text-white'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
title='No Filters Selected'
|
|
||||||
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
|
||||||
/>
|
|
||||||
) : isLoading ? (
|
|
||||||
<DailyMarketingReportSkeleton
|
<DailyMarketingReportSkeleton
|
||||||
columns={getTableColumns()}
|
columns={getTableColumns()}
|
||||||
icon={
|
icon={
|
||||||
@@ -688,7 +666,9 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
|
|||||||
title='Memuat Data Penjualan Harian'
|
title='Memuat Data Penjualan Harian'
|
||||||
subtitle='Silakan tunggu sebentar...'
|
subtitle='Silakan tunggu sebentar...'
|
||||||
/>
|
/>
|
||||||
) : data.length === 0 ? (
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data.length === 0 && (
|
||||||
<DailyMarketingReportSkeleton
|
<DailyMarketingReportSkeleton
|
||||||
columns={getTableColumns()}
|
columns={getTableColumns()}
|
||||||
icon={
|
icon={
|
||||||
@@ -702,7 +682,9 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
|
|||||||
title='Data Not Yet Available'
|
title='Data Not Yet Available'
|
||||||
subtitle='Please change your filters to get the data.'
|
subtitle='Please change your filters to get the data.'
|
||||||
/>
|
/>
|
||||||
) : (
|
)}
|
||||||
|
|
||||||
|
{!isLoading && data.length > 0 && (
|
||||||
<Table
|
<Table
|
||||||
data={data}
|
data={data}
|
||||||
columns={getTableColumns()}
|
columns={getTableColumns()}
|
||||||
|
|||||||
@@ -791,6 +791,10 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
|
|||||||
[data, perWeightRangeSummary]
|
[data, perWeightRangeSummary]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffectHook(() => {
|
||||||
|
filterModal.openModal();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{TabActionsElement}
|
{TabActionsElement}
|
||||||
|
|||||||
+4
@@ -631,6 +631,10 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
|
|||||||
// Render the TabActions component
|
// Render the TabActions component
|
||||||
const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
|
const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
filterModal.openModal();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{TabActionsElement}
|
{TabActionsElement}
|
||||||
|
|||||||
Reference in New Issue
Block a user