overall updates
This commit is contained in:
joshikannan
@@ -53,13 +53,14 @@ import {
|
||||
startOfWeek
|
||||
// startOfYear,
|
||||
} from 'date-fns';
|
||||
import { FilterList } from '@mui/icons-material';
|
||||
import { CalendarMonth, FilterList } from '@mui/icons-material';
|
||||
|
||||
// project imports
|
||||
import { fetchDeliverySummary, fetchorderdetails } from '../api/api';
|
||||
import MainCard from 'components/MainCard';
|
||||
import { CSVExport } from 'components/third-party/ReactTable';
|
||||
import Loader from 'components/Loader';
|
||||
import { useDebounce } from 'components/nearle_components/useDebounce';
|
||||
|
||||
function formatNumberToRupees(value) {
|
||||
return new Intl.NumberFormat('en-IN', {
|
||||
@@ -95,6 +96,7 @@ export default function OrdersDetails() {
|
||||
const [locationId, setLocationId] = useState(0);
|
||||
const [locoName, setLocoName] = useState('Select Location');
|
||||
|
||||
const debouncedSearch = useDebounce(searchword, 500);
|
||||
const status = [
|
||||
{ id: 0, status: 'All', statusLow: 'All' },
|
||||
{ id: 1, status: 'Pending', statusLow: 'pending' },
|
||||
@@ -186,15 +188,15 @@ export default function OrdersDetails() {
|
||||
isFetchingNextPage
|
||||
// status: rowdataStatus
|
||||
} = useInfiniteQuery({
|
||||
queryKey: [startdate, enddate, currentStatus, locationId],
|
||||
queryKey: [startdate, enddate, currentStatus, locationId, debouncedSearch],
|
||||
queryFn: fetchorderdetails,
|
||||
getNextPageParam: (lastPage) => lastPage.nextPage
|
||||
});
|
||||
|
||||
const rows = rowdata?.pages.flatMap((page) => page.details) || [];
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasNextPage) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
@@ -207,9 +209,7 @@ export default function OrdersDetails() {
|
||||
threshold: 1.0
|
||||
}
|
||||
);
|
||||
|
||||
if (loadMoreRef.current) observer.observe(loadMoreRef.current);
|
||||
|
||||
return () => {
|
||||
if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
|
||||
};
|
||||
@@ -245,6 +245,7 @@ export default function OrdersDetails() {
|
||||
}, [currentStatus, deliverycount]);
|
||||
|
||||
// ==============================|| calculate||============================== //
|
||||
|
||||
const calculate = () => {
|
||||
let calculatedTotalCharge = 0;
|
||||
let calculatedTotalAmount = 0;
|
||||
@@ -268,23 +269,9 @@ export default function OrdersDetails() {
|
||||
|
||||
if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
|
||||
|
||||
const filteredOrders = rows.filter((row) =>
|
||||
row.orderstatus == ''
|
||||
? row.orderstatus.toLowerCase().includes(searchword.toLowerCase())
|
||||
: row.orderstatus.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.ordernotes.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.pickupcustomer.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.pickupcontactno.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.pickuplocation.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.deliverylocation.toLowerCase().includes(searchword.toLowerCase()) ||
|
||||
row.ridername.toLowerCase().includes(searchword.toLowerCase())
|
||||
);
|
||||
// to download ex format filtered data
|
||||
const csvData = filteredOrders.map((order) => ({
|
||||
|
||||
const csvData = rows.map((order) => ({
|
||||
tenantname: order.tenantname,
|
||||
tenantcity: order.tenantcity,
|
||||
tenantcontactno: order.tenantcontactno,
|
||||
@@ -345,161 +332,166 @@ export default function OrdersDetails() {
|
||||
return (
|
||||
<>
|
||||
{isLoadingOrderDetails && <Loader />}
|
||||
<TitleCard title="Orders Details" />
|
||||
<TitleCard
|
||||
title="Orders Details"
|
||||
secondary={
|
||||
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} gap={2}>
|
||||
{startdate && enddate && (
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Badge
|
||||
badgeContent={`${statusCount}`}
|
||||
max={99999}
|
||||
color="primary"
|
||||
sx={{
|
||||
bgcolor: '#f3e5f5',
|
||||
p: 0.2,
|
||||
borderRadius: '3px',
|
||||
color: '#7b1fa2'
|
||||
}}
|
||||
>{`Orders-${datestatus}`}</Badge>
|
||||
|
||||
<Chip
|
||||
label={
|
||||
<Typography noWrap color="secondary">
|
||||
{dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
|
||||
</Typography>
|
||||
}
|
||||
variant="combined"
|
||||
color="warning"
|
||||
size="small"
|
||||
deleteIcon={<CalendarMonth style={{ fontSize: 18 }} />}
|
||||
onDelete={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
onClick={() => setOpen(true)}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
{(!startdate || !enddate) && (
|
||||
<div>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Chip label="Orders-All" color="primary" variant="light" size="small" />
|
||||
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
|
||||
</Stack>
|
||||
</div>
|
||||
)}
|
||||
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<MainCard
|
||||
content={false}
|
||||
title={
|
||||
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} flexWrap="wrap">
|
||||
<Stack alignItems="flex-start" spacing={1}>
|
||||
{startdate && enddate && (
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Badge
|
||||
badgeContent={`${statusCount}`}
|
||||
max={99999}
|
||||
color="primary"
|
||||
sx={{
|
||||
bgcolor: '#f3e5f5',
|
||||
p: 0.2,
|
||||
borderRadius: '3px',
|
||||
color: '#7b1fa2'
|
||||
}}
|
||||
>{`Orders-${datestatus}`}</Badge>
|
||||
|
||||
<Chip
|
||||
label={
|
||||
<Typography noWrap color="secondary">
|
||||
{dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
|
||||
</Typography>
|
||||
}
|
||||
variant="combined"
|
||||
color="warning"
|
||||
size="small"
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
{(!startdate || !enddate) && (
|
||||
<div>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Chip label="Orders-All" color="primary" variant="light" size="small" />
|
||||
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
|
||||
</Stack>
|
||||
</div>
|
||||
)}
|
||||
</Stack>
|
||||
<Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
|
||||
<Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
|
||||
{tenantLocations.length == 1 ? (
|
||||
<TextField
|
||||
// disabled={!isAppLocation || !isClient}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
label={'Business Location'}
|
||||
value={tenantLocations[0].locationname}
|
||||
focused
|
||||
sx={{ width: '350px' }}
|
||||
InputProps={{
|
||||
style: { color: theme.palette.primary.main },
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<MyLocationIcon color="primary" />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Autocomplete
|
||||
fullWidth
|
||||
// disabled={!isAppLocation || !isClient}
|
||||
id="combo-box-demo"
|
||||
options={tenantLocations || []}
|
||||
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
|
||||
renderInput={(params) => <TextField {...params} label={locoName} color="primary" />}
|
||||
sx={{ width: '300px' }}
|
||||
onChange={(event, value, reason) => {
|
||||
if (value) {
|
||||
console.log('Business Locations', value);
|
||||
setLocationId(value.locationid);
|
||||
setLocoName(value.locationname);
|
||||
}
|
||||
if (reason == 'clear') {
|
||||
setLocationId(0);
|
||||
setLocoName('Select Location');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
<Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
|
||||
{tenantLocations.length == 1 ? (
|
||||
<TextField
|
||||
// disabled={!isAppLocation || !isClient}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
label={'Business Location'}
|
||||
value={tenantLocations[0].locationname}
|
||||
focused
|
||||
sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
|
||||
InputProps={{
|
||||
style: { color: theme.palette.primary.main },
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<MyLocationIcon color="primary" />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Autocomplete
|
||||
sx={{ minWidth: 200 }}
|
||||
disablePortal
|
||||
fullWidth
|
||||
// disabled={!isAppLocation || !isClient}
|
||||
id="combo-box-demo"
|
||||
options={status}
|
||||
getOptionLabel={(option) => `${option.status}`}
|
||||
options={tenantLocations || []}
|
||||
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
|
||||
renderInput={(params) => <TextField {...params} label={locoName} color="primary" />}
|
||||
sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
|
||||
onChange={(event, value, reason) => {
|
||||
if (reason === 'clear') {
|
||||
setCurrentStatus('All');
|
||||
} else {
|
||||
console.log('status', value);
|
||||
setCurrentStatus(value.statusLow);
|
||||
if (value) {
|
||||
console.log('Business Locations', value);
|
||||
setLocationId(value.locationid);
|
||||
setLocoName(value.locationname);
|
||||
}
|
||||
if (reason == 'clear') {
|
||||
setLocationId(0);
|
||||
setLocoName('Select Location');
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} label={'Select Status'} />}
|
||||
/>
|
||||
<FormControl sx={{ width: 250 }}>
|
||||
<OutlinedInput
|
||||
inputRef={textFieldRef}
|
||||
aria-describedby="header-search-text"
|
||||
inputProps={{
|
||||
'aria-label': 'weight'
|
||||
}}
|
||||
sx={{ background: 'white' }}
|
||||
size="large"
|
||||
id="header-search"
|
||||
placeholder="Search (ctrl+k)"
|
||||
value={searchword}
|
||||
onChange={(e) => {
|
||||
setSearchword(e.target.value);
|
||||
}}
|
||||
autoComplete="off"
|
||||
startAdornment={
|
||||
<InputAdornment position="start" sx={{ mr: -0.5 }}>
|
||||
<SearchOutlined />
|
||||
</InputAdornment>
|
||||
}
|
||||
endAdornment={
|
||||
<Tooltip title="clear">
|
||||
<IconButton
|
||||
sx={{ visibility: searchword ? 'visible' : 'hidden' }}
|
||||
onClick={() => {
|
||||
setSearchword('');
|
||||
}}
|
||||
>
|
||||
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
<Tooltip title="Order Filter">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
variant="light"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
bgcolor: 'grey.200',
|
||||
mx: 2
|
||||
}}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<FilterList />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Autocomplete
|
||||
sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
|
||||
disablePortal
|
||||
id="combo-box-demo"
|
||||
options={status}
|
||||
getOptionLabel={(option) => `${option.status}`}
|
||||
onChange={(event, value, reason) => {
|
||||
if (reason === 'clear') {
|
||||
setCurrentStatus('All');
|
||||
} else {
|
||||
console.log('status', value);
|
||||
setCurrentStatus(value.statusLow);
|
||||
}
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} label={'Select Status'} />}
|
||||
/>
|
||||
<FormControl sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}>
|
||||
<OutlinedInput
|
||||
inputRef={textFieldRef}
|
||||
aria-describedby="header-search-text"
|
||||
inputProps={{
|
||||
'aria-label': 'weight'
|
||||
}}
|
||||
sx={{ background: 'white' }}
|
||||
size="large"
|
||||
id="header-search"
|
||||
placeholder="Search (ctrl+k)"
|
||||
value={searchword}
|
||||
onChange={(e) => {
|
||||
setSearchword(e.target.value);
|
||||
}}
|
||||
autoComplete="off"
|
||||
startAdornment={
|
||||
<InputAdornment position="start" sx={{ mr: -0.5 }}>
|
||||
<SearchOutlined />
|
||||
</InputAdornment>
|
||||
}
|
||||
endAdornment={
|
||||
<Tooltip title="clear">
|
||||
<IconButton
|
||||
sx={{ visibility: searchword ? 'visible' : 'hidden' }}
|
||||
onClick={() => {
|
||||
setSearchword('');
|
||||
}}
|
||||
>
|
||||
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
|
||||
</Stack>
|
||||
{/* <Tooltip title="Order Filter">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
variant="light"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
bgcolor: 'grey.200',
|
||||
mx: 2
|
||||
}}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<FilterList />
|
||||
</IconButton>
|
||||
</Tooltip> */}
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
@@ -531,24 +523,24 @@ export default function OrdersDetails() {
|
||||
>
|
||||
<TableRow>
|
||||
<TableCell sx={{ position: 'sticky !important' }}># </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}>Map</TableCell>
|
||||
<TableCell sx={{ whiteSpace: 'nowrap', position: 'sticky !important' }}>Tenant Name </TableCell>
|
||||
{/* <TableCell sx={{ position: 'sticky !important' }}> {<SlLocationPin style={{ fontWeight: 1000 }} />}</TableCell> */}
|
||||
<TableCell sx={{ whiteSpace: 'nowrap', position: 'sticky !important' }}>Location </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}>Pickup </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Drop </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Status </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Assignes </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Assigned </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Accepted </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Arrived </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Picked </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Delivered</TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Cancelled </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Notes </TableCell>
|
||||
{/* <TableCell sx={{ position: 'sticky !important' }}> Notes </TableCell> */}
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Kms </TableCell>
|
||||
<TableCell sx={{ position: 'sticky !important' }}> Charges </TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filteredOrders.length == 0 && (
|
||||
{rows?.length == 0 && (
|
||||
<>
|
||||
<TableCell colSpan={15}>
|
||||
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
||||
@@ -557,12 +549,12 @@ export default function OrdersDetails() {
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
{filteredOrders.map((row, index) => {
|
||||
{rows?.map((row, index) => {
|
||||
return (
|
||||
filteredOrders.length !== 0 && (
|
||||
rows?.length !== 0 && (
|
||||
<TableRow>
|
||||
<TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>
|
||||
<TableCell
|
||||
{/* <TableCell
|
||||
sx={{ width: '10px', cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
console.log('row', row);
|
||||
@@ -572,13 +564,14 @@ export default function OrdersDetails() {
|
||||
}}
|
||||
>
|
||||
{<SlLocationPin />}
|
||||
</TableCell>
|
||||
</TableCell> */}
|
||||
<TableCell
|
||||
sx={{
|
||||
textAlign: 'start'
|
||||
textAlign: 'start',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
{row.tenantname}
|
||||
{row.locationname}
|
||||
<Typography variant="body2" noWrap>
|
||||
{row.orderid}
|
||||
</Typography>
|
||||
@@ -591,7 +584,7 @@ export default function OrdersDetails() {
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Stack direction={'row'} spacing={1}>
|
||||
<Stack direction="column">
|
||||
<Stack direction="column" sx={{ whiteSpace: 'nowrap' }}>
|
||||
<Typography variant="caption">{row.pickupcustomer}</Typography>
|
||||
<Typography variant="caption" color="textSecondary">
|
||||
{row.pickupcontactno}
|
||||
@@ -606,7 +599,7 @@ export default function OrdersDetails() {
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Stack direction={'row'} spacing={1}>
|
||||
<Stack direction="column">
|
||||
<Stack direction="column" sx={{ whiteSpace: 'nowrap' }}>
|
||||
<Typography variant="caption">{row.deliverycustomer}</Typography>
|
||||
<Typography variant="caption" color="textSecondary">
|
||||
{row.deliverycontactno}
|
||||
@@ -695,25 +688,24 @@ export default function OrdersDetails() {
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="left">
|
||||
{/* <TableCell align="left">
|
||||
<Typography variant="caption">{row.ordernotes}</Typography>
|
||||
</TableCell>
|
||||
</TableCell> */}
|
||||
|
||||
<TableCell align="left">
|
||||
<Stack direction={'column'} spacing={1}>
|
||||
<Tooltip title=" KMS" placement="top">
|
||||
<Chip
|
||||
label={
|
||||
row.orderstatus === 'cancelled' || row.orderstatus === 'cancelled' || row.kms == ''
|
||||
? parseInt(0).toFixed(1)
|
||||
: parseInt(row.kms).toFixed(1)
|
||||
}
|
||||
size="small"
|
||||
variant="light"
|
||||
color="error"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="Actual KMS">
|
||||
<Chip
|
||||
label={
|
||||
row.orderstatus === 'cancelled' || row.orderstatus === 'cancelled' || row.kms == ''
|
||||
? parseInt(0).toFixed(1)
|
||||
: parseInt(row.kms).toFixed(1)
|
||||
}
|
||||
size="small"
|
||||
variant="contained"
|
||||
color="warning"
|
||||
/>
|
||||
|
||||
{/* <Tooltip title="Actual KMS">
|
||||
<Chip
|
||||
label={
|
||||
row.deliverystatus === 'cancelled' || row.actualkms === '' || row.actualkms === 'null'
|
||||
@@ -725,42 +717,44 @@ export default function OrdersDetails() {
|
||||
color="success"
|
||||
variant="light"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Tooltip> */}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Stack direction={'column'} spacing={1}>
|
||||
<Tooltip title=" Delivery Charge" placement="top">
|
||||
<Chip
|
||||
label={
|
||||
row.orderstatus === 'cancelled' || row.deliverycharges == '' ? `₹ ${0}.00` : `₹ ${row.deliverycharges}.00`
|
||||
}
|
||||
size="small"
|
||||
variant="light"
|
||||
color="error"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="Delivery Amount">
|
||||
<Chip
|
||||
label={
|
||||
row.orderstatus === 'cancelled' || row.deliverycharges == '' ? `₹ ${0}.00` : `₹ ${row.deliverycharges}.00`
|
||||
}
|
||||
size="small"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
{/* <Tooltip title="Delivery Amount">
|
||||
<Chip
|
||||
label={row.deliveryamt == '' ? `₹ ${0}.00` : `₹ ${row.deliveryamt}.00`}
|
||||
size="small"
|
||||
color="success"
|
||||
variant="light"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Tooltip> */}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
);
|
||||
})}
|
||||
<TableRow>
|
||||
<TableCell colSpan={15} rowSpan={3}>
|
||||
<div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
|
||||
{isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No more results'}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{rows?.length != 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={15} rowSpan={3}>
|
||||
<div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
|
||||
{isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No More Orders'}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
Reference in New Issue
Block a user