747 lines
28 KiB
TypeScript
747 lines
28 KiB
TypeScript
'use client';
|
|
import ActionPopMenu from '@/components/common/ActionPopMenu';
|
|
import { type ColumnData, MyTable } from '@/components/common/MyTable';
|
|
import BaseButton from '@/components/ui-kit/BaseButton';
|
|
import BaseInput from '@/components/ui-kit/BaseInput';
|
|
import { selectDefaultStyles } from '@/components/ui-kit/BaseReactSelect';
|
|
import { useAuthContext } from '@/context/auth-context';
|
|
import type { BoxStatus, IBox, PrintStatus } from '@/data/box/box.model';
|
|
import { box_requests } from '@/data/box/box.requests';
|
|
import type { Product, UpdateProductBodyType } from '@/data/item/item.mode';
|
|
import { item_requests } from '@/data/item/item.requests';
|
|
import { party_requests } from '@/data/party/party.requests';
|
|
import { DEFAULT_PAGE_SIZE, pageLinks } from '@/helpers/constants';
|
|
import useInput from '@/hooks/useInput';
|
|
import { useMyNavigation } from '@/hooks/useMyNavigation';
|
|
import { useMyTranslation } from '@/hooks/useMyTranslation';
|
|
import useRequest from '@/hooks/useRequest';
|
|
import { useModalStore } from '@/modalStorage/modalSlice';
|
|
import { useBoxIdStore } from '@/modalStorage/partyId';
|
|
import { notifyUnknownError } from '@/services/notification';
|
|
import { CheckCircle, FilterListOff, Print, RemoveRedEye, Search } from '@mui/icons-material';
|
|
import { Box, Button, CircularProgress, FormControl, MenuItem, Select, Stack, Typography } from '@mui/material';
|
|
import { CloseIcon } from 'next/dist/client/components/react-dev-overlay/internal/icons/CloseIcon';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import type React from 'react';
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import AsyncSelect from 'react-select/async';
|
|
import { useReactToPrint } from 'react-to-print';
|
|
import BoxesPrintList from '../boxes-print/BoxesPrintList';
|
|
import CustomModal from '../customModal/CustomModal';
|
|
|
|
type Props = {};
|
|
|
|
const style = {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: 400,
|
|
bgcolor: 'background.paper',
|
|
border: '2px solid #000',
|
|
boxShadow: 24,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '10px',
|
|
p: 4,
|
|
};
|
|
|
|
const DashboardAcceptancePage = () => {
|
|
// Redux for modal state
|
|
const { isOpen: isModalOpen, openModal, closeModal } = useModalStore();
|
|
const t = useMyTranslation();
|
|
const navigation = useMyNavigation();
|
|
const { isAdmin } = useAuthContext();
|
|
const router = useRouter();
|
|
|
|
// State management
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize] = useState(DEFAULT_PAGE_SIZE);
|
|
const { value: keyword, onChange: handleKeyword, setValue: setKeyword } = useInput('');
|
|
const [boxStatusFilter, setBoxStatusFilter] = useState<BoxStatus | undefined>(undefined);
|
|
const [trackId, setTrackId] = useState<string>();
|
|
const [partyFilter, setPartyFilter] = useState<{ label: string; value: number } | undefined>(undefined);
|
|
const [boxFilter, setBoxFilter] = useState<{ label: string; value: number } | undefined>(undefined);
|
|
const [deleteIds, setDeleteIds] = useState<number[]>([]);
|
|
const [downloadIds, setDownloadIds] = useState<number[]>([]);
|
|
const [changeStatusIds, setChangeStatusIds] = useState<number[]>([]);
|
|
const [boxAmounts, setBoxAmounts] = useState<Record<number, { totalAmount: number; totalAccepted: number }>>({});
|
|
const [printStatuses, setPrintStatuses] = useState<Record<number, string>>({});
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [isFetching, setIsFetching] = useState(false);
|
|
const [allData, setAllData] = useState<IBox[]>([]);
|
|
const searchParams = useSearchParams();
|
|
const boxId = searchParams.get('boxId');
|
|
const { boxesIdAccepted, setBoxIdAccepted } = useBoxIdStore();
|
|
|
|
// Print related state
|
|
const [selectedBoxForPrint, setSelectedBoxForPrint] = useState<IBox | null>(null);
|
|
const [selectedBoxDetails, setSelectedBoxDetails] = useState<any>(null);
|
|
const printRef = useRef<HTMLDivElement>(null);
|
|
const tableContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Print functionality
|
|
const handlePrint = useReactToPrint({
|
|
contentRef: printRef,
|
|
onAfterPrint: () => {
|
|
setSelectedBoxForPrint(null);
|
|
setSelectedBoxDetails(null);
|
|
},
|
|
});
|
|
|
|
// Fetch party options
|
|
const { data: defaultPartyOptions } = useRequest(() => party_requests.getAll({}), {
|
|
enabled: true,
|
|
selectData(data) {
|
|
return data.data.data.data.map(p => ({ value: p.id, label: p.name }));
|
|
},
|
|
placeholderData: [],
|
|
});
|
|
|
|
const partyOptions = (inputValue: string) => {
|
|
return party_requests.getAll({ partyName: inputValue }).then(res => {
|
|
return res.data.data.data.map(p => ({ label: p.name, value: p.id }));
|
|
});
|
|
};
|
|
|
|
// Print box handler
|
|
const onPrintBox = async (boxData: IBox) => {
|
|
try {
|
|
const response = await box_requests.find({ packetId: boxData.id });
|
|
const boxOne = response.data.data;
|
|
const detailedBoxData = {
|
|
id: +boxData.id,
|
|
box_name: boxOne.packet.name,
|
|
net_weight: +boxOne.packet.brutto,
|
|
box_weight: +boxOne.packet.boxWeight,
|
|
box_type: boxOne.packet.boxType,
|
|
box_size: boxOne.packet.volume,
|
|
passportName: boxOne.packet.passportName,
|
|
status: boxOne.packet.status,
|
|
packetId: boxData.id,
|
|
partyId: +boxOne.packet.partyId,
|
|
partyName: boxOne.packet.partyName,
|
|
passportId: boxOne.client?.passportId,
|
|
client_id: boxOne.packet?.cargoId,
|
|
clientName: boxOne.client?.passportName,
|
|
products_list: boxOne.items.map((item: any) => ({
|
|
id: item.id,
|
|
price: item.price,
|
|
cargoId: item.cargoId,
|
|
trekId: item.trekId,
|
|
name: item.name,
|
|
nameRu: item.nameRu,
|
|
amount: +item.amount,
|
|
acceptedNumber: item.acceptedNumber,
|
|
weight: +item.weight,
|
|
})),
|
|
};
|
|
setSelectedBoxDetails(detailedBoxData);
|
|
setTimeout(() => {
|
|
handlePrint();
|
|
}, 100);
|
|
} catch (error) {}
|
|
};
|
|
|
|
// Memoized options
|
|
const boxStatusOptions = useMemo(() => {
|
|
const p = ['READY_TO_INVOICE'] as BoxStatus[];
|
|
if (isAdmin) {
|
|
p.push('READY');
|
|
}
|
|
return p;
|
|
}, [isAdmin]);
|
|
|
|
const printOptions = useMemo(() => {
|
|
const p = ['false'] as PrintStatus[];
|
|
if (isAdmin) {
|
|
p.push('false');
|
|
}
|
|
return p;
|
|
}, [isAdmin]);
|
|
|
|
// Main data fetching query with optimized refresh handling
|
|
const getBoxesQuery = useRequest(
|
|
() =>
|
|
box_requests.getAll({
|
|
page: page,
|
|
cargoId: keyword,
|
|
partyId: partyFilter?.value,
|
|
status: boxStatusFilter,
|
|
direction: 'desc',
|
|
sort: 'id',
|
|
}),
|
|
{
|
|
dependencies: [page, boxStatusFilter, keyword, partyFilter],
|
|
selectData(data) {
|
|
return data.data.data;
|
|
},
|
|
onSuccess: data => {
|
|
// Only update data if the page or filters have changed
|
|
if (page === 1) {
|
|
setAllData(data.data.data.data);
|
|
} else {
|
|
// Prevent duplicate data
|
|
setAllData(prev => {
|
|
const existingIds = new Set(prev.map(box => box.id));
|
|
const newData = data.data.data.data.filter(box => !existingIds.has(box.id));
|
|
return [...prev, ...newData];
|
|
});
|
|
}
|
|
setHasMore(data.data.data.data.length === pageSize);
|
|
setIsFetching(false);
|
|
},
|
|
}
|
|
);
|
|
|
|
// Secondary list query
|
|
const getListQuery = useRequest(
|
|
() =>
|
|
item_requests.getAll({
|
|
page: page,
|
|
trekId: trackId,
|
|
packetId: boxFilter?.value,
|
|
partyId: partyFilter?.value,
|
|
}),
|
|
{
|
|
dependencies: [page, trackId, boxFilter?.value, partyFilter?.value],
|
|
selectData(data) {
|
|
return data.data.data;
|
|
},
|
|
}
|
|
);
|
|
|
|
// Form state for item amounts
|
|
const [values, setValues] = useState<{ [trackId: string]: number | '' }>({});
|
|
|
|
const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, max: number, trackId: string) => {
|
|
const val = Number(event.target.value);
|
|
if (val >= 1 && val <= max) {
|
|
setValues(prev => ({ ...prev, [trackId]: val }));
|
|
} else if (event.target.value === '') {
|
|
setValues(prev => ({ ...prev, [trackId]: '' }));
|
|
}
|
|
};
|
|
|
|
const loading = getBoxesQuery.loading;
|
|
|
|
// Page change handler
|
|
const handleChange = useCallback(
|
|
(newPage: number) => {
|
|
if (!isFetching && hasMore) {
|
|
setIsFetching(true);
|
|
setPage(newPage);
|
|
}
|
|
},
|
|
[isFetching, hasMore]
|
|
);
|
|
|
|
// Reset all filters
|
|
const resetFilter = useCallback(() => {
|
|
setPage(1);
|
|
setKeyword('');
|
|
setBoxStatusFilter(undefined);
|
|
setPartyFilter(undefined);
|
|
setAllData([]);
|
|
}, []);
|
|
|
|
// Box options for select
|
|
const { data: defaultBoxOptions, refetch } = useRequest(
|
|
() =>
|
|
box_requests.getAll({
|
|
partyId: partyFilter?.value,
|
|
}),
|
|
{
|
|
enabled: !!partyFilter,
|
|
selectData(data) {
|
|
return data.data.data.data.map(p => ({ value: p.id, label: p.name }));
|
|
},
|
|
placeholderData: [],
|
|
dependencies: [partyFilter],
|
|
}
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (boxId && defaultPartyOptions && defaultPartyOptions.length > 0) {
|
|
const selected = defaultPartyOptions.find(p => p.value === Number(boxId));
|
|
if (selected) {
|
|
setPartyFilter(selected);
|
|
}
|
|
}
|
|
}, [boxId, defaultPartyOptions]);
|
|
|
|
useEffect(() => {
|
|
if (boxesIdAccepted) {
|
|
navigation.push(`${pageLinks.dashboard.acceptance.index}?boxId=${boxesIdAccepted}`);
|
|
}
|
|
}, [boxesIdAccepted]);
|
|
|
|
const onChangePrint = async (id: number, newStatus: PrintStatus) => {
|
|
if (changeStatusIds.includes(id)) return;
|
|
try {
|
|
setChangeStatusIds(p => [...p, id]);
|
|
const res = await box_requests.find({ packetId: id });
|
|
await box_requests.update({
|
|
cargoId: String(res.data.data.packet.cargoId),
|
|
items: res.data.data.items,
|
|
print: newStatus === 'true' ? true : false,
|
|
packetId: String(res.data.data.packet.id),
|
|
passportId: res.data.data.client.passportId,
|
|
status: res.data.data.packet.status,
|
|
});
|
|
setPrintStatuses(prev => ({
|
|
...prev,
|
|
[id]: newStatus,
|
|
}));
|
|
} catch (error) {
|
|
} finally {
|
|
setChangeStatusIds(prev => prev.filter(i => i !== id));
|
|
}
|
|
};
|
|
|
|
// Filter changes with debouncing
|
|
useEffect(() => {
|
|
const debounceTimer = setTimeout(() => {
|
|
if (page === 1) {
|
|
getBoxesQuery.refetch();
|
|
} else {
|
|
setPage(1); // This will trigger the refetch automatically
|
|
}
|
|
}, 350);
|
|
|
|
return () => clearTimeout(debounceTimer);
|
|
}, [keyword, partyFilter?.value, boxFilter?.value]);
|
|
|
|
// Fetch box amounts only when needed
|
|
useEffect(() => {
|
|
if (allData.length === 0 || loading) return;
|
|
|
|
const controller = new AbortController();
|
|
const fetchAmounts = async () => {
|
|
const result: Record<number, { totalAmount: number; totalAccepted: number }> = {};
|
|
|
|
try {
|
|
await Promise.all(
|
|
allData.map(async box => {
|
|
if (boxAmounts[box.id]) return;
|
|
|
|
try {
|
|
const res = await box_requests.find({ packetId: box.id });
|
|
const boxData = res.data.data;
|
|
|
|
const total = boxData.items.reduce(
|
|
(acc, item) => {
|
|
acc.totalAmount = boxData.packet.totalItems ?? 0;
|
|
if (item.acceptedNumber && item.acceptedNumber > 0) {
|
|
acc.totalAccepted += 1;
|
|
}
|
|
return acc;
|
|
},
|
|
{ totalAmount: 0, totalAccepted: 0 }
|
|
);
|
|
|
|
result[box.id] = total;
|
|
} catch (e) {
|
|
if (!controller.signal.aborted) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
if (Object.keys(result).length > 0) {
|
|
setBoxAmounts(prev => ({ ...prev, ...result }));
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
fetchAmounts();
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [allData, loading]);
|
|
|
|
// Optimized scroll handler with throttling
|
|
const handleScroll = useCallback(() => {
|
|
if (!tableContainerRef.current || isFetching || !hasMore) return;
|
|
|
|
const { scrollTop, scrollHeight, clientHeight } = tableContainerRef.current;
|
|
const scrollThreshold = 100; // pixels from bottom to trigger load
|
|
|
|
if (scrollHeight - (scrollTop + clientHeight) < scrollThreshold) {
|
|
handleChange(page + 1);
|
|
}
|
|
}, [page, isFetching, hasMore, handleChange]);
|
|
|
|
// Scroll event listener with cleanup
|
|
useEffect(() => {
|
|
const container = tableContainerRef.current;
|
|
if (!container) return;
|
|
|
|
const throttledScroll = throttle(handleScroll, 200);
|
|
container.addEventListener('scroll', throttledScroll);
|
|
|
|
return () => {
|
|
container.removeEventListener('scroll', throttledScroll);
|
|
};
|
|
}, [handleScroll]);
|
|
|
|
// Box options for select
|
|
const boxOptions = (inputValue: string) => {
|
|
return box_requests
|
|
.getAll({
|
|
cargoId: inputValue,
|
|
partyId: partyFilter?.value,
|
|
})
|
|
.then(res => {
|
|
return res.data.data.data.map(p => ({ label: p.name, value: p.id }));
|
|
});
|
|
};
|
|
|
|
// Reset box filter when party changes
|
|
useEffect(() => {
|
|
setBoxFilter(undefined);
|
|
}, [partyFilter]);
|
|
|
|
// Table columns definition
|
|
const columns: ColumnData<IBox>[] = useMemo(
|
|
() => [
|
|
{
|
|
label: t('No'),
|
|
width: 100,
|
|
renderCell(data, rowIndex) {
|
|
return rowIndex + 1;
|
|
},
|
|
},
|
|
{
|
|
dataKey: 'partyName',
|
|
label: t('party_name'),
|
|
width: 120,
|
|
},
|
|
{
|
|
dataKey: 'name',
|
|
label: t('name'),
|
|
width: 120,
|
|
},
|
|
{
|
|
dataKey: 'packetNetWeight',
|
|
label: t('weight'),
|
|
width: 120,
|
|
},
|
|
{
|
|
dataKey: 'totalItems',
|
|
label: t('count_of_items'),
|
|
width: 120,
|
|
renderCell: data => {
|
|
const total = boxAmounts[data.id];
|
|
|
|
if (!total) return <Typography>...</Typography>;
|
|
const isCompleted = total.totalAmount === total.totalAccepted && total.totalAmount > 0;
|
|
return (
|
|
<Stack direction='row' alignItems='center' spacing={1}>
|
|
<Typography>
|
|
{data.totalItems} / {total.totalAccepted}
|
|
</Typography>
|
|
{isCompleted && <CheckCircle sx={{ color: '#22c55e', fontSize: 16 }} />}
|
|
</Stack>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
dataKey: 'totalNetWeight',
|
|
label: t('party_weight'),
|
|
width: 120,
|
|
},
|
|
{
|
|
dataKey: 'cargoId',
|
|
label: t('cargo_id'),
|
|
width: 120,
|
|
},
|
|
{
|
|
dataKey: 'passportName',
|
|
label: t('client'),
|
|
width: 120,
|
|
},
|
|
{
|
|
dataKey: 'id',
|
|
label: t('print'),
|
|
width: 120,
|
|
renderHeaderCell() {
|
|
return (
|
|
<Stack direction={'row'} alignItems={'center'}>
|
|
<span>{t('print')}</span>
|
|
</Stack>
|
|
);
|
|
},
|
|
renderCell(data) {
|
|
const total = boxAmounts[data.id];
|
|
const isCompleted = total?.totalAccepted === total?.totalAmount && total?.totalAmount > 0;
|
|
return (
|
|
<Button onClick={() => onPrintBox(data)}>
|
|
<Print className='h-3 w-3 mr-1' />
|
|
</Button>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
dataKey: 'status',
|
|
label: t('status'),
|
|
width: 240,
|
|
renderHeaderCell() {
|
|
return (
|
|
<Stack direction={'row'} alignItems={'center'}>
|
|
<span>{t('print_status')}</span>
|
|
</Stack>
|
|
);
|
|
},
|
|
renderCell(data) {
|
|
const currentValue = printStatuses[data.id] || (data.print ? 'true' : 'false');
|
|
return (
|
|
<FormControl
|
|
sx={{ m: 1, border: 'none', minWidth: 120, background: data.print ? '#3489E4' : '#DF2F99' }}
|
|
size='small'
|
|
>
|
|
<Select
|
|
labelId={`print-status-${data.id}`}
|
|
id={`print-status-${data.id}`}
|
|
sx={{ color: 'white', border: 'none' }}
|
|
value={currentValue}
|
|
onChange={async e => {
|
|
const newValue = e.target.value as PrintStatus;
|
|
onChangePrint(data.id, newValue);
|
|
}}
|
|
>
|
|
<MenuItem value='true'>Chop etildi</MenuItem>
|
|
<MenuItem value='false'>Chop etilmadi</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
label: '',
|
|
width: 100,
|
|
numeric: true,
|
|
renderCell(data) {
|
|
return (
|
|
<ActionPopMenu
|
|
buttons={[
|
|
{
|
|
icon: <RemoveRedEye sx={{ path: { color: '#3489E4' } }} />,
|
|
label: t('view_packet'),
|
|
onClick: () => {
|
|
navigation.push(pageLinks.dashboard.boxes.detail(data.id));
|
|
},
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
[t, boxAmounts, printStatuses, navigation, onPrintBox, onChangePrint]
|
|
);
|
|
|
|
// Form handling for items
|
|
const [items, setItems] = useState<Product>();
|
|
const [loaer, setLoading] = useState(false);
|
|
|
|
const {
|
|
register,
|
|
control,
|
|
handleSubmit,
|
|
watch,
|
|
setValue,
|
|
formState: { errors },
|
|
} = useForm<Product>({
|
|
defaultValues: {
|
|
trekId: items?.trekId,
|
|
name: items?.name,
|
|
nameRu: items?.nameRu,
|
|
amount: items?.amount,
|
|
weight: items?.weight,
|
|
acceptedNumber: Number(values),
|
|
},
|
|
});
|
|
|
|
const updateItems = async (item: Product, acceptedNumber: number) => {
|
|
try {
|
|
setLoading(true);
|
|
const updateBody: UpdateProductBodyType = {
|
|
itemId: item.id,
|
|
acceptedNumber: item.amount,
|
|
amount: item.amount,
|
|
name: item.name,
|
|
nameRu: item.nameRu,
|
|
trekId: item.trekId,
|
|
weight: item.weight,
|
|
};
|
|
await item_requests.update(updateBody);
|
|
getListQuery.refetch();
|
|
setValues(prev => ({ ...prev, [item.trekId]: '' }));
|
|
setTrackId('');
|
|
} catch (error) {
|
|
notifyUnknownError(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<CustomModal open={isModalOpen} onClose={closeModal} title={t('product_inspection')}>
|
|
<Box sx={style}>
|
|
<Typography id='modal-modal-title' variant='h6' component='h2'>
|
|
{t('product_inspection')}
|
|
</Typography>
|
|
<Typography id='modal-modal-description' sx={{ mt: 2 }}>
|
|
{t('enter_product')}
|
|
</Typography>
|
|
<AsyncSelect
|
|
isClearable
|
|
value={partyFilter}
|
|
onChange={(newValue: any) => {
|
|
setPartyFilter(newValue);
|
|
setPage(1);
|
|
}}
|
|
styles={selectDefaultStyles}
|
|
noOptionsMessage={() => t('not_found')}
|
|
loadingMessage={() => t('loading')}
|
|
defaultOptions={defaultPartyOptions!}
|
|
loadOptions={partyOptions}
|
|
placeholder={t('filter_party_name')}
|
|
/>
|
|
<AsyncSelect
|
|
isClearable
|
|
value={boxFilter}
|
|
onChange={(newValue: any) => {
|
|
setBoxFilter(newValue);
|
|
setPage(1);
|
|
navigation.push(pageLinks.dashboard.boxes.detail(newValue.value));
|
|
}}
|
|
styles={selectDefaultStyles}
|
|
noOptionsMessage={() => t('enter_box_name_to_find')}
|
|
loadingMessage={() => t('loading')}
|
|
defaultOptions={defaultBoxOptions!}
|
|
loadOptions={boxOptions}
|
|
placeholder={t('filter_box_name')}
|
|
/>
|
|
<Button onClick={() => closeModal()} sx={{ position: 'absolute', right: '10px' }}>
|
|
<CloseIcon />
|
|
</Button>
|
|
</Box>
|
|
</CustomModal>
|
|
|
|
<Stack direction={'row'} mb={3} spacing={3}>
|
|
<Button onClick={() => openModal()}>{t('product_inspection')}</Button>
|
|
</Stack>
|
|
|
|
<Box
|
|
width={1}
|
|
mb={3}
|
|
sx={{
|
|
padding: '28px',
|
|
borderRadius: '16px',
|
|
backgroundColor: '#fff',
|
|
}}
|
|
>
|
|
<Stack mb={3.5} direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
|
|
<Typography
|
|
sx={{
|
|
fontSize: '20px',
|
|
lineHeight: '24px',
|
|
fontWeight: 600,
|
|
textTransform: 'capitalize',
|
|
color: '#000',
|
|
}}
|
|
>
|
|
{t('packet')}
|
|
</Typography>
|
|
<Stack direction={'row'} alignItems={'center'} spacing={2}>
|
|
<BaseInput
|
|
InputProps={{
|
|
startAdornment: <Search color='primary' />,
|
|
}}
|
|
placeholder={t('filter_packet_name')}
|
|
value={keyword}
|
|
onChange={e => {
|
|
setKeyword(e.target.value);
|
|
}}
|
|
/>
|
|
<AsyncSelect
|
|
isClearable
|
|
value={partyFilter}
|
|
onChange={(newValue: any) => {
|
|
setPartyFilter(newValue);
|
|
if (newValue) {
|
|
setBoxIdAccepted(newValue.value);
|
|
navigation.push(`${pageLinks.dashboard.acceptance.index}?boxId=${newValue.value}`);
|
|
} else {
|
|
setBoxIdAccepted(undefined);
|
|
navigation.push(`${pageLinks.dashboard.acceptance.index}`);
|
|
}
|
|
setPage(1);
|
|
}}
|
|
styles={selectDefaultStyles}
|
|
noOptionsMessage={() => t('not_found')}
|
|
loadingMessage={() => t('loading')}
|
|
defaultOptions={defaultPartyOptions!}
|
|
loadOptions={partyOptions}
|
|
placeholder={t('filter_party_name')}
|
|
/>
|
|
<BaseButton colorVariant='gray' startIcon={<FilterListOff />} size='small' onClick={resetFilter}>
|
|
{t('reset_filter')}
|
|
</BaseButton>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Box
|
|
mb={6}
|
|
ref={tableContainerRef}
|
|
sx={{
|
|
height: 'calc(100vh - 300px)',
|
|
overflowY: 'auto',
|
|
'&::-webkit-scrollbar': {
|
|
width: '6px',
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
backgroundColor: '#888',
|
|
borderRadius: '3px',
|
|
},
|
|
}}
|
|
>
|
|
<MyTable columns={columns} data={allData} loading={loading && page === 1} />
|
|
{isFetching && page > 1 && (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
|
|
<CircularProgress size={24} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
{selectedBoxDetails && (
|
|
<div style={{ display: 'none' }}>
|
|
<BoxesPrintList ref={printRef} boxData={selectedBoxDetails} />
|
|
</div>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
// Simple throttle implementation
|
|
function throttle<T extends (...args: any[]) => any>(func: T, limit: number): T {
|
|
let inThrottle: boolean;
|
|
return function (this: any, ...args: any[]) {
|
|
if (!inThrottle) {
|
|
func.apply(this, args);
|
|
inThrottle = true;
|
|
setTimeout(() => (inThrottle = false), limit);
|
|
}
|
|
} as T;
|
|
}
|
|
|
|
export default DashboardAcceptancePage;
|