mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat: create BalanceMonitoringTab component
This commit is contained in:
ValdiANS
@@ -0,0 +1,665 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useFormik } from 'formik';
|
||||
import toast from 'react-hot-toast';
|
||||
import { ColumnDef, SortingState, Updater } from '@tanstack/react-table';
|
||||
import { FinanceApi } from '@/services/api/report/finance-report';
|
||||
import { CustomerApi } from '@/services/api/master-data';
|
||||
import { UserApi } from '@/services/api/user';
|
||||
import SelectInput, {
|
||||
useSelect,
|
||||
OptionType,
|
||||
} from '@/components/input/SelectInput';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
|
||||
import Dropdown from '@/components/Dropdown';
|
||||
import ButtonFilter from '@/components/helper/ButtonFilter';
|
||||
import { formatCurrency, formatNumber } from '@/lib/helper';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { BalanceMonitoringRow } from '@/types/api/report/balance-monitoring';
|
||||
import { CustomerPaymentRow } from '@/types/api/report/customer-payment';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import Button from '@/components/Button';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import Pagination from '@/components/Pagination';
|
||||
import Table from '@/components/Table';
|
||||
import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
|
||||
|
||||
interface BalanceMonitoringTabProps {
|
||||
tabId: string;
|
||||
}
|
||||
|
||||
const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
|
||||
const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
|
||||
const [hasDateError, setHasDateError] = useState(false);
|
||||
const [dateErrorShown, setDateErrorShown] = useState(false);
|
||||
|
||||
const handleFilterModalOpenRef = useRef(() => {});
|
||||
const filterModal = useModal();
|
||||
|
||||
const setTabActions = useTabActionsStore((state) => state.setTabActions);
|
||||
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
|
||||
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString,
|
||||
} = useTableFilter<{
|
||||
start_date: string;
|
||||
end_date: string;
|
||||
customerFilter?: OptionType<number>;
|
||||
salesFilter?: OptionType<number>;
|
||||
sort_by: string;
|
||||
order_by: string;
|
||||
}>({
|
||||
initial: {
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
customerFilter: undefined,
|
||||
salesFilter: undefined,
|
||||
sort_by: '',
|
||||
order_by: '',
|
||||
},
|
||||
paramMap: {
|
||||
page: 'page',
|
||||
pageSize: 'limit',
|
||||
start_date: 'start_date',
|
||||
end_date: 'end_date',
|
||||
customerFilter: 'customer_id',
|
||||
salesFilter: 'sales_id',
|
||||
sort_by: 'sort_by',
|
||||
order_by: 'sort_order',
|
||||
},
|
||||
persist: true,
|
||||
storeName: 'balance-monitoring-table',
|
||||
});
|
||||
|
||||
// Keep a stable ref so handleExportPDF doesn't need toQueryString as a dep
|
||||
const toQueryStringRef = useRef(toQueryString);
|
||||
useEffect(() => {
|
||||
toQueryStringRef.current = toQueryString;
|
||||
});
|
||||
|
||||
const sorting: SortingState = tableFilterState.sort_by
|
||||
? [
|
||||
{
|
||||
id: tableFilterState.sort_by,
|
||||
desc: tableFilterState.order_by === 'desc',
|
||||
},
|
||||
]
|
||||
: [];
|
||||
|
||||
const handleSortingChange = (updater: Updater<SortingState>) => {
|
||||
const next = typeof updater === 'function' ? updater(sorting) : updater;
|
||||
if (next.length > 0) {
|
||||
updateFilter('sort_by', next[0].id, true);
|
||||
updateFilter('order_by', next[0].desc ? 'desc' : 'asc', true);
|
||||
} else {
|
||||
updateFilter('sort_by', '', true);
|
||||
updateFilter('order_by', '', true);
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
options: customerOptions,
|
||||
setInputValue: setCustomerInput,
|
||||
isLoadingOptions: isLoadingCustomers,
|
||||
loadMore: loadMoreCustomers,
|
||||
} = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
|
||||
|
||||
const {
|
||||
options: salesOptions,
|
||||
setInputValue: setSalesInput,
|
||||
isLoadingOptions: isLoadingSales,
|
||||
loadMore: loadMoreSales,
|
||||
} = useSelect(UserApi.basePath, 'id', 'name', 'search');
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
start_date: tableFilterState.start_date,
|
||||
end_date: tableFilterState.end_date,
|
||||
customerFilter: tableFilterState.customerFilter,
|
||||
salesFilter: tableFilterState.salesFilter,
|
||||
},
|
||||
enableReinitialize: true,
|
||||
onSubmit: (values) => {
|
||||
updateFilter('start_date', values.start_date, true);
|
||||
updateFilter('end_date', values.end_date, true);
|
||||
updateFilter('customerFilter', values.customerFilter, true);
|
||||
updateFilter('salesFilter', values.salesFilter, true);
|
||||
filterModal.closeModal();
|
||||
},
|
||||
onReset: () => {
|
||||
updateFilter('start_date', '', true);
|
||||
updateFilter('end_date', '', true);
|
||||
updateFilter('customerFilter', undefined, true);
|
||||
updateFilter('salesFilter', undefined, true);
|
||||
setHasDateError(false);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
filterModal.closeModal();
|
||||
},
|
||||
});
|
||||
|
||||
handleFilterModalOpenRef.current = () => {
|
||||
filterModal.openModal();
|
||||
};
|
||||
|
||||
const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
formik.setFieldValue('start_date', value);
|
||||
|
||||
if (value && formik.values.end_date) {
|
||||
if (new Date(formik.values.end_date) < new Date(value)) {
|
||||
setHasDateError(true);
|
||||
if (!dateErrorShown) {
|
||||
toast.error('Tanggal akhir tidak boleh masa lampau', {
|
||||
duration: Infinity,
|
||||
});
|
||||
setDateErrorShown(true);
|
||||
}
|
||||
} else {
|
||||
setHasDateError(false);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setHasDateError(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
formik.setFieldValue('end_date', value);
|
||||
|
||||
if (value && formik.values.start_date) {
|
||||
if (new Date(value) < new Date(formik.values.start_date)) {
|
||||
setHasDateError(true);
|
||||
if (!dateErrorShown) {
|
||||
toast.error('Tanggal akhir tidak boleh masa lampau', {
|
||||
duration: Infinity,
|
||||
});
|
||||
setDateErrorShown(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setHasDateError(false);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
};
|
||||
|
||||
const queryString = toQueryString();
|
||||
|
||||
const { data: response, isLoading } = useSWR(queryString, (qs) =>
|
||||
FinanceApi.getBalanceMonitoringReport(
|
||||
Object.fromEntries(new URLSearchParams(qs)) as Parameters<
|
||||
typeof FinanceApi.getBalanceMonitoringReport
|
||||
>[0]
|
||||
)
|
||||
);
|
||||
|
||||
const data: BalanceMonitoringRow[] = useMemo(
|
||||
() =>
|
||||
isResponseSuccess(response)
|
||||
? ((response.data as BalanceMonitoringRow[]) ?? [])
|
||||
: [],
|
||||
[response]
|
||||
);
|
||||
|
||||
const meta = useMemo(
|
||||
() => (isResponseSuccess(response) && response.meta ? response.meta : null),
|
||||
[response]
|
||||
);
|
||||
|
||||
// Stable — uses ref so toQueryString is always current without being a dep
|
||||
const handleExportPDF = useCallback(async () => {
|
||||
setIsPdfExportLoading(true);
|
||||
try {
|
||||
await FinanceApi.exportBalanceMonitoringToPDF(toQueryStringRef.current());
|
||||
toast.success('PDF berhasil dibuat dan diunduh.');
|
||||
} catch {
|
||||
toast.error('Gagal membuat PDF. Silakan coba lagi.');
|
||||
} finally {
|
||||
setIsPdfExportLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Inject tab actions directly — no nested component, no remount cycle
|
||||
useEffect(() => {
|
||||
setTabActions(
|
||||
tabId,
|
||||
<div className='flex flex-row gap-3'>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
start_date: tableFilterState.start_date,
|
||||
end_date: tableFilterState.end_date,
|
||||
customerFilter: tableFilterState.customerFilter,
|
||||
salesFilter: tableFilterState.salesFilter,
|
||||
}}
|
||||
fieldGroups={[['start_date', 'end_date']]}
|
||||
onClick={() => handleFilterModalOpenRef.current()}
|
||||
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'
|
||||
isLoading={isPdfExportLoading}
|
||||
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={handleExportPDF}
|
||||
isLoading={isPdfExportLoading}
|
||||
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>
|
||||
);
|
||||
}, [
|
||||
tabId,
|
||||
setTabActions,
|
||||
isPdfExportLoading,
|
||||
handleExportPDF,
|
||||
tableFilterState.start_date,
|
||||
tableFilterState.end_date,
|
||||
tableFilterState.customerFilter,
|
||||
tableFilterState.salesFilter,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => clearTabActions(tabId);
|
||||
}, [tabId, clearTabActions]);
|
||||
|
||||
const page = meta?.page || tableFilterState.page;
|
||||
const pageSize = meta?.limit || tableFilterState.pageSize;
|
||||
|
||||
const columns = useMemo(
|
||||
(): ColumnDef<BalanceMonitoringRow>[] => [
|
||||
{
|
||||
header: 'No',
|
||||
enableSorting: false,
|
||||
cell: (props) => (page - 1) * pageSize + props.row.index + 1,
|
||||
},
|
||||
{
|
||||
header: 'Customer',
|
||||
accessorKey: 'customer_name',
|
||||
enableSorting: true,
|
||||
id: 'customer_name',
|
||||
},
|
||||
{
|
||||
header: 'Saldo Awal',
|
||||
accessorKey: 'saldo_awal',
|
||||
id: 'saldo_awal',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatCurrency(row.original.saldo_awal)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Penjualan Ayam',
|
||||
columns: [
|
||||
{
|
||||
header: 'Ekor',
|
||||
accessorKey: 'penjualan_ayam_ekor',
|
||||
id: 'penjualan_ayam_ekor',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatNumber(row.original.penjualan_ayam_ekor)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Kg',
|
||||
accessorKey: 'penjualan_ayam_kg',
|
||||
id: 'penjualan_ayam_kg',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatNumber(row.original.penjualan_ayam_kg)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Nominal',
|
||||
accessorKey: 'penjualan_ayam_nominal',
|
||||
id: 'penjualan_ayam_nominal',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatCurrency(row.original.penjualan_ayam_nominal)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: 'Penjualan Telur',
|
||||
columns: [
|
||||
{
|
||||
header: 'Kuantitas',
|
||||
accessorKey: 'penjualan_telur_kuantitas',
|
||||
id: 'penjualan_telur_kuantitas',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatNumber(row.original.penjualan_telur_kuantitas)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Kg',
|
||||
accessorKey: 'penjualan_telur_kg',
|
||||
id: 'penjualan_telur_kg',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatNumber(row.original.penjualan_telur_kg)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Nominal',
|
||||
accessorKey: 'penjualan_telur_nominal',
|
||||
id: 'penjualan_telur_nominal',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatCurrency(row.original.penjualan_telur_nominal)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: 'Penjualan Trading',
|
||||
accessorKey: 'penjualan_trading',
|
||||
id: 'penjualan_trading',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatCurrency(row.original.penjualan_trading)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Pembayaran',
|
||||
accessorKey: 'pembayaran',
|
||||
id: 'pembayaran',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-right'>
|
||||
{formatCurrency(row.original.pembayaran)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Aging',
|
||||
accessorKey: 'aging',
|
||||
id: 'aging',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-center'>
|
||||
{formatNumber(row.original.aging)} hari
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Aging Rata-Rata',
|
||||
accessorKey: 'aging_rata_rata',
|
||||
id: 'aging_rata_rata',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div className='text-center'>
|
||||
{formatNumber(row.original.aging_rata_rata)} hari
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: 'Saldo Akhir',
|
||||
accessorKey: 'saldo_akhir',
|
||||
id: 'saldo_akhir',
|
||||
enableSorting: true,
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className={`text-right font-semibold ${row.original.saldo_akhir < 0 ? 'text-error' : ''}`}
|
||||
>
|
||||
{formatCurrency(row.original.saldo_akhir)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[page, pageSize]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||
{isLoading && (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && data.length === 0 && (
|
||||
<CustomerSupplierSkeleton
|
||||
columns={columns as unknown as ColumnDef<CustomerPaymentRow>[]}
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
title='Data Not Yet Available'
|
||||
subtitle='Please change your filters to get the data.'
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading && data.length > 0 && (
|
||||
<>
|
||||
<div className='w-full overflow-x-auto'>
|
||||
<Table
|
||||
data={data}
|
||||
columns={columns}
|
||||
pageSize={pageSize}
|
||||
page={meta?.page || 1}
|
||||
totalItems={meta?.total_results || 0}
|
||||
onPageChange={setPage}
|
||||
onPageSizeChange={setPageSize}
|
||||
sorting={sorting}
|
||||
setSorting={handleSortingChange}
|
||||
manualSorting
|
||||
className={{
|
||||
containerClassName: 'w-full mb-0!',
|
||||
tableWrapperClassName: 'overflow-x-auto',
|
||||
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 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>
|
||||
|
||||
{meta && (
|
||||
<div className='mt-5 px-3'>
|
||||
<Pagination
|
||||
totalItems={meta.total_results || 0}
|
||||
itemsPerPage={meta.limit || 0}
|
||||
currentPage={meta.page || 0}
|
||||
onPrevPage={() => setPage(Math.max(1, (meta.page || 1) - 1))}
|
||||
onNextPage={() =>
|
||||
setPage(
|
||||
meta.total_pages && (meta.page || 1) < meta.total_pages
|
||||
? (meta.page || 1) + 1
|
||||
: meta.page || 1
|
||||
)
|
||||
}
|
||||
onPageChange={setPage}
|
||||
rowOptions={[10, 20, 50, 100]}
|
||||
onRowChange={setPageSize}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter Modal */}
|
||||
<Modal
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
|
||||
}}
|
||||
>
|
||||
{/* Modal Header */}
|
||||
<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={formik.handleSubmit} onReset={formik.handleReset}>
|
||||
<div className='p-4 flex flex-col gap-3'>
|
||||
<div>
|
||||
<label className='block text-xs font-semibold text-base-content py-2'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex flex-row gap-1.5 items-center justify-between'>
|
||||
<DateInput
|
||||
name='start_date'
|
||||
value={formik.values.start_date || ''}
|
||||
onChange={handleStartDateChange}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
isNestedModal
|
||||
/>
|
||||
<hr className='w-full max-w-3 h-px border-base-content/10' />
|
||||
<DateInput
|
||||
name='end_date'
|
||||
value={formik.values.end_date || ''}
|
||||
onChange={handleEndDateChange}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
isNestedModal
|
||||
isError={hasDateError}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SelectInput
|
||||
label='Customer'
|
||||
placeholder='Pilih Customer'
|
||||
options={customerOptions}
|
||||
value={formik.values.customerFilter ?? null}
|
||||
onChange={(val) =>
|
||||
formik.setFieldValue(
|
||||
'customerFilter',
|
||||
val as OptionType<number> | null
|
||||
)
|
||||
}
|
||||
onInputChange={setCustomerInput}
|
||||
isLoading={isLoadingCustomers}
|
||||
isClearable
|
||||
onMenuScrollToBottom={loadMoreCustomers}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Sales'
|
||||
placeholder='Pilih Sales'
|
||||
options={salesOptions}
|
||||
value={formik.values.salesFilter ?? null}
|
||||
onChange={(val) =>
|
||||
formik.setFieldValue(
|
||||
'salesFilter',
|
||||
val as OptionType<number> | null
|
||||
)
|
||||
}
|
||||
onInputChange={setSalesInput}
|
||||
isLoading={isLoadingSales}
|
||||
isClearable
|
||||
onMenuScrollToBottom={loadMoreSales}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<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'
|
||||
disabled={hasDateError}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BalanceMonitoringTab;
|
||||
Reference in New Issue
Block a user