Nearle_express/dailygrubs_console
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

orderdetails , orders

Browse Source
This commit is contained in:
joshikannan
2025-10-17 10:55:05 +05:30
parent 36eaf3d845
commit e6c8df5583
13 changed files with 592 additions and 1240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@@ -27,7 +27,8 @@
<!-- this is to resolve issue in old safari browser in tablet -->
<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ2c_pOSOFYSjxGMwkFvCVWKjYOM9siow&libraries=places"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ2c_pOSOFYSjxGMwkFvCVWKjYOM9siow&libraries=places"></script> -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhkGfnq27sN0wV5y_S-M2KojpFTk_by-Q&libraries=places"></script>
<style>
.datedialog > div > div > .MuiPaper-root {

47
src/components/nearle_components/CircularLoader.js Normal file
View File

@@ -0,0 +1,47 @@
import { styled } from '@mui/material/styles';
import CircularProgress from '@mui/material/CircularProgress';
import nelogo from '../../assets/images/logo-sm.png';
// Styled Loader Wrapper
const LoaderWrapper = styled('div')(() => ({
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
zIndex: 2001,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'rgba(255, 255, 255, 0.7)', // Light overlay effect
padding: '20px',
borderRadius: '10px' // Soft rounded border
}));
// Styled Logo Wrapper
const LogoWrapper = styled('div')(() => ({
position: 'absolute',
width: '40px', // Adjust based on your logo size
height: '40px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}));
// ==============================|| Custom Circular Loader with Logo ||============================== //
const CircularLoader = () => (
<LoaderWrapper>
{/* Circular Loader */}
<CircularProgress
color="primary"
size={80} // Increase size
thickness={6} // Thicker border
/>
{/* Logo Positioned at the Center */}
<LogoWrapper>
<img src={nelogo} alt="Logo" style={{ width: '100%', height: '100%' }} />
</LogoWrapper>
</LoaderWrapper>
);
export default CircularLoader;

5
src/layout/MainLayout/Header/HeaderContent/index.js
View File

@@ -10,7 +10,6 @@ import {
Popper,
ClickAwayListener,
List,
ListItem,
ListItemButton,
ListItemText,
Grid,
@@ -71,8 +70,8 @@ const HeaderContent = () => {
{/* {!matchesXs && <Search />} */}
<Stack width="100%" direction="row" justifyContent="space-between" spacing={2} alignItems="center">
{/* {!matchesXs && megaMenu} */}
<Typography variant="h5" sx={{ ml: 2, color: '#fff' }}>
{localStorage.getItem('firstname') || ''}
<Typography variant="h5" sx={{ ml: 2, color: '#fff', whiteSpace: 'nowrap' }}>
{localStorage.getItem('fullname') || ''}
</Typography>
{matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
<Stack direction={'row'} spacing={2}>

2
src/menu-items/other.js
View File

@@ -74,7 +74,7 @@ const other = {
icon: AiOutlineBarChart,
children: [
{
id: 'ordersDetails',
id: 'OrdersDetails',
title: <FormattedMessage id="OrdersDetails" />,
type: 'item',
url: 'reports/ordersdetails',

11
src/pages/nearle/api/api.js
View File

@@ -136,16 +136,13 @@ export const fetchRidersSummary = async ({ queryKey }) => {
// ==============================|| fetchorderdetails (orders detail)||============================== //
export const fetchorderdetails = async ({ queryKey }) => {
console.log('queryKey of fetchorderdetails', queryKey);
const [tabValue, appId, startdate, enddate] = queryKey;
let status = tabValue === 0 ? 'delivered' : tabValue === 1 ? 'pending' : 'cancelled';
const [startdate, enddate, currentStatus] = queryKey;
const response = await axios.get(
// appId == -1
// ? `${process.env.REACT_APP_URL}/orders/getorders/?fromdate=${startdate}&todate=${enddate}`
// : `${process.env.REACT_APP_URL}/orders/getorders/?fromdate=${startdate}&todate=${enddate}&applocationid=${appId}`
`${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}`
`${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}&status=${
currentStatus == 'All' ? '' : currentStatus
}`
);
console.log('fetchorderdetails', response.data.details);
return response.data.details;
};
// ==============================|| fetchCount (orders detail)||============================== //

4
src/pages/nearle/clients/customers.js
View File

@@ -1905,10 +1905,10 @@ const Customers = () => {
{row.orderid}
</Typography>
<Typography noWrap sx={{ fontSize: '11px' }}>
{dayjs(row.deliverytime).utc().format('DD/MM/YYYY')}
{dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
</Typography>
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
{dayjs(row.deliverytime).utc().format('hh:mm A')}
{dayjs(row.deliverydate).utc().format('hh:mm A')}
</Typography>
</TableCell>
<TableCell align="left">

157
src/pages/nearle/login.js
View File

@@ -41,26 +41,6 @@ const Login = () => {
let navigate = useNavigate();
// let dispatch = useDispatch();
const [submitting, setSubmitting] = useState(false);
// let loginuserid = useSelector((state)=>state.logininfo);
// useEffect(() => {
// if (alertmessage) {
// dispatch(
// openSnackbar({
// open: true,
// message: alertmessage,
// variant: 'alert',
// anchorOrigin: { vertical: 'top', horizontal: 'right' },
// alert: {
// // variant:'info',
// color: 'error',
// }
// })
// )
// }
// }, [toast])
useEffect(() => {
if (
@@ -205,16 +185,7 @@ const Login = () => {
}
};
// const handleClose = () => {
// setToast(false)
// }
const opentoast = (message) => {
// setToast(true)
// setTimeout(() => {
// // handleClose();
// setToast(false)
// }, 2000);
enqueueSnackbar(message, {
variant: 'error',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
@@ -227,7 +198,7 @@ const Login = () => {
{/* <AuthWrapper> */}
<Box sx={{ minHeight: '100vh' }}>
{loading && <Loader />}
{/* <AuthBackground /> */}
<Grid
container
direction="column"
@@ -277,21 +248,12 @@ const Login = () => {
width: '100%'
}}
>
{/* <CardHeader title={<Typography variant="h4">Login</Typography>} /> */}
{/* <Divider sx={{ borderStyle: 'dashed' }} /> */}
{/* <h1>eee</h1> */}
{/* <CardHeader> */}
<Grid container spacing={3}>
<Grid item xs={12}>
<Stack direction="row" justifyContent="flex-start" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<CardHeader title={<Typography variant="h3">Login</Typography>} />
</Stack>
</Grid>
{/* <Grid item xs={12}>
<AuthLogin isDemo={isLoggedIn} />
</Grid> */}
</Grid>
<CardContent>
<form
@@ -302,31 +264,6 @@ const Login = () => {
>
<Grid container spacing={2}>
<Grid item xs={12}>
{/* <Stack spacing={1}> */}
{/* <InputLabel htmlFor="email-login">Email Address</InputLabel>
<OutlinedInput
id="email-login"
type="email"
value={values.email}
name="email"
onBlur={handleBlur}
onChange={handleChange}
placeholder="Enter email address"
fullWidth
id="username1"
label="E-mail Address"
variant="outlined"
autoComplete='email'
required
onChange={usernamecheck}
error={checkusername}
error={Boolean(touched.email && errors.email)}
/>
{touched.email && errors.email && (
<FormHelperText error id="standard-weight-helper-text-email-login">
{errors.email}
</FormHelperText>
)} */}
<TextField
margin="normal"
fullWidth
@@ -349,85 +286,19 @@ const Login = () => {
label="Password"
variant="outlined"
/>
{/* </Stack> */}
</Grid>
<Grid item xs={12}>
{/* <Stack spacing={0}> */}
{/* <InputLabel htmlFor="password-login">Password</InputLabel> */}
{/* <OutlinedInput
fullWidth
// error={Boolean(touched.password && errors.password)}
// id="-password-login"
// type={showPassword ? 'text' : 'password'}
// value={values.password}
// name="password"
// onBlur={handleBlur}
// onChange={handleChange}
// endAdornment={
// <InputAdornment position="end">
// <IconButton
// aria-label="toggle password visibility"
// onClick={handleClickShowPassword}
// onMouseDown={handleMouseDownPassword}
// edge="end"
// color="secondary"
// >
// {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
// </IconButton>
// </InputAdornment>
// }
placeholder="Enter password"
// margin="normal"
// fullWidth
required
autoComplete="current-password"
onChange={(e) => setPassword(e.target.value)}
type='password' id="password1"
/> */}
{/* {touched.password && errors.password && (
<FormHelperText error id="standard-weight-helper-text-password-login">
{errors.password}
</FormHelperText>
)} */}
{/* </Stack> */}
<Link href="#" variant="h6">
Forgot password?
</Link>
</Grid>
{/* <Grid item xs={12} sx={{ mt: -1 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
<FormControlLabel
control={
<Checkbox
checked={checked}
onChange={(event) => setChecked(event.target.checked)}
name="checked"
color="primary"
size="small"
/>
}
label={<Typography variant="h6">Keep me sign in</Typography>}
/>
<Link variant="h6" component={RouterLink} to={isDemo ? '/auth/forgot-password' : '/forgot-password'} color="text.primary">
Forgot Password?
</Link>
</Stack>
</Grid> */}
{/* {errors.submit && (
<Grid item xs={12}>
<FormHelperText error>{errors.submit}</FormHelperText>
</Grid>
)} */}
<Grid item xs={12}>
{/* <AnimateButton> */}
<AnimateButton>
<Button
disabled={submitting}
onClick={() => {
loginsend();
// navigate('/dashboard')
}}
fullWidth
size="large"
@@ -438,40 +309,27 @@ const Login = () => {
Login
</Button>
</AnimateButton>
{/* </AnimateButton> */}
</Grid>
</Grid>
{/* </Grid> */}
</form>
</CardContent>
{/* </CardHeader> */}
</Card>
</Box>
</Grid>
</Grid>
</Grid>
<Grid
item
xs={12}
// sx={{ m: 3, mt: 1 }}
sx={{ mb: 1 }}
>
{/* <AuthFooter /> */}
<Grid item xs={12} sx={{ mb: 1 }}>
<Container maxWidth="xl">
<Stack
direction={{ sx: 'column', md: 'row' }}
justifyContent={{ sx: 'center', md: 'space-between' }}
spacing={2}
// textAlign={{ sx: 'center', md: 'inherit' }}
alignItems={{ sx: 'center', md: 'inherit' }}
width="100%"
>
<Stack direction="row" justifyContent="center" spacing={1}>
<Typography variant="subtitle2" color="secondary" component="span" sx={{ display: 'flex' }}>
&copy; All rights reserved
{/* <Typography variant="subtitle2" href="#mantis-privacy" target="_blank" underline="hover" sx={{ml:1}}>Privacy Policy</Typography> */}
</Typography>
</Stack>
@@ -504,17 +362,6 @@ const Login = () => {
>
Privacy Policy
</Typography>
{/* <Typography
variant="subtitle2"
color="secondary"
component={Link}
href="#"
// target="_blank"
underline="hover"
textAlign='center'
>
CA Privacy Notice
</Typography> */}
</Stack>
</Stack>
</Container>

9
src/pages/nearle/orders/createorder1.js
View File

@@ -766,7 +766,7 @@ const Createorder1 = () => {
enqueueSnackbar(message, {
variant: variant,
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: time ? time : 1500
autoHideDuration: time ? time : 2000
});
console.log(alertmessage);
};
@@ -829,7 +829,6 @@ const Createorder1 = () => {
pickuplocation: pickCust.suburb || '',
pickuplocationid: pickCust.deliverylocationid || 0,
pickuplong: pickCust.longitude.toString(),
pickupaddress: pickCust.address || '',
processing: '',
ready: '',
remarks: '',
@@ -943,10 +942,10 @@ const Createorder1 = () => {
navigate('/orders');
} else {
opentoast(res.data.message, 'warning');
opentoast('Something went wrong, Cannot create order', 'warning');
}
setLoading(false);
console.log(res);
console.log(createRes);
} catch (error) {
console.log('createResErr', error);
}
@@ -1318,7 +1317,7 @@ const Createorder1 = () => {
disablePortal
id="combo-box-demo"
options={tenantLocations || []}
getOptionLabel={(option) => `${option.locationname} (${option.locationsuburb})` || ''}
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Select Business Locations" />}
onChange={(event, value, reason) => {

343
src/pages/nearle/orders/multipleOrders.js
View File

@@ -23,13 +23,9 @@ import {
Grid,
Typography,
Stack,
Box,
Button,
TextField,
Autocomplete,
CardActions,
Chip,
Avatar,
Divider,
Dialog,
DialogTitle,
@@ -37,16 +33,7 @@ import {
Checkbox,
DialogActions,
CircularProgress,
ButtonGroup,
FormLabel,
IconButton,
Drawer,
InputLabel,
Select,
MenuItem,
Switch,
CardHeader,
Card,
OutlinedInput,
FormGroup,
FormControlLabel,
@@ -58,75 +45,42 @@ import {
Paper,
TableHead
} from '@mui/material';
import { log } from 'util';
import CircularLoader from 'components/nearle_components/CircularLoader';
const MultipleOrders = () => {
const navigate = useNavigate();
const theme = useTheme();
const [locaName, setLocoName] = useState('Select Location');
const [locations, setLocations] = useState([]);
const [tenantlist, setTenantlist] = useState([]);
const [loading, setLoading] = useState(false);
const [btnLoading, setBtnLoading] = useState(false);
const [appId, setAppId] = useState(0);
const [isAppLocation, setIsAppLocation] = useState(false);
const [isBusiness, setIsBusiness] = useState(false);
const [isClient, setisclient] = useState(false);
const [tenantLocations, setTenantlocations] = useState([]);
const userid = localStorage.getItem('userid');
const tenId = localStorage.getItem('tenantid');
const [tenantid, setTenantid] = useState();
const [tid, setTid] = useState(0);
const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
const [tenantlocation, setTenantlocation] = useState('');
const [isLocation, setIsLocation] = useState(false);
const [basePrice, setBasePrice] = useState(0);
const [pricePerKm, setPricePerKm] = useState(0);
const [minKm, setMinKm] = useState(0);
const [tenantinfo, setTenantinfo] = useState({});
const [pickCust, setPickCust] = useState({});
const [dropCust, setDropCust] = useState([]);
const [isCustomerOpen, setIsCustomerOpen] = useState(false);
const [searchCustList, setSearchCustList] = useState('');
const [customerlist, setCustomerlist] = useState([]);
const [clientdetail, setClientdetail] = useState([]);
const [appLocaLat, setAppLocaLat] = useState();
const [appLocaLng, setAppLocaLng] = useState();
const [appLocaRadius, setAppLocaRadius] = useState();
const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
const [timeslotarr, setTimeslotarr] = useState([]);
const [showDistance, setShowDistance] = useState(false);
const [subCat, setSubCat] = useState([]);
const [subCatName, setSubCatName] = useState('Select ');
const [subCatId, setSubCatId] = useState(0);
const [weight, setWeight] = useState('');
const [selectedCatChip, setSelectedCatChip] = useState(null);
const [isSms, setIsSms] = useState(0);
const [starttime, setStatrttime] = useState();
const [endtime, setEndtime] = useState();
const [selectedtime, setSelectedtime] = useState('');
const [distance, setDistance] = useState(0);
const [alertmessage, setAlertmessage] = useState('');
const [otherinstructions, setOtherinstructions] = useState('');
const [totalCharge, setTotalCharge] = useState(0);
const [admintoken, setAdmintoken] = useState();
const [tenant, setTenant] = useState(0);
const [totaldist, settotaldist] = useState(0);
const [totalAmt, settotalAmt] = useState(0);
const [isLoading, setIsLoading] = useState(false);
// =============================================== || chipStyle ( time slot) || ===============================================
const chipStyle = (chipLabel) => ({
cursor: 'pointer',
backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : 'default',
color: selectedCatChip === chipLabel ? '#fff' : '',
'&:hover': {
backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : theme.palette.primary.light,
color: '#fff'
}
});
const handleChipClick = (chipLabel) => {
setSelectedCatChip(chipLabel);
};
useEffect(() => {
console.log('dropCust', dropCust);
}, [dropCust]);
// =============================================== || opentoast || ===============================================
const opentoast = (message, variant, time) => {
@@ -141,13 +95,7 @@ const MultipleOrders = () => {
const fetchAppLocations = async () => {
try {
const locationRes = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
// const updatedLocations = [
// ...locationRes.data.details,
// { partnername: 'All', applocationid: -1 }
// ];
// console.log('fetchAppLocations', updatedLocations);
console.log('fetchAppLocations', locationRes.data.details);
setLocations(locationRes.data.details);
} catch (err) {
console.log('locationRes', err);
}
@@ -156,32 +104,6 @@ const MultipleOrders = () => {
fetchAppLocations();
}, []);
// ===================================================== || fetchtenantinfolist || =====================================================
const fetchtenantinfolist = async (id) => {
setLoading(true);
await axios
.get(`${process.env.REACT_APP_URL}/tenants/gettenants/?applocationid=${id}&status=active`)
.then((res) => {
console.log(res);
if (res.data.status) {
let arr = [];
res.data.details.map((val) => {
arr.push({
...val,
label: `${val.tenantname}`
});
});
setTenantlist(arr);
}
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
};
// ============================================= || fetchTenantPricing || =============================================
const fetchTenantPricing = async (id) => {
@@ -207,12 +129,8 @@ const MultipleOrders = () => {
setIsLocation(true);
setTenantlocations(res.data.details);
setPickCust(res.data.details[0]);
setTenanatLocoId(res.data.details[0].locationid);
setTenantlocation(res.data.details[0].locationaddress); //client address
setIsBusiness(true);
} else {
setTenantlocations(res.data.details);
setIsBusiness(false); // became true after select from tenanatLocations
}
} catch (err) {
console.log('gettenantlocations', err);
@@ -234,7 +152,6 @@ const MultipleOrders = () => {
if (res.data.status) {
console.log('clientdetails', res.data.details);
setClientdetail(res.data.details);
setCustomerlist(res.data.details);
let arr = [];
res.data.details.map((val) => {
@@ -276,11 +193,15 @@ const MultipleOrders = () => {
// ========================================================= || handleCheckboxChange || =========================================================
const handleCheckboxChange = async (event, customer) => {
setIsLoading(true);
console.log('event', event.target.checked);
console.log('customer', customer);
if (event.target.checked) {
// If the checkbox is checked, calculate the distance and add the customer
try {
const obj = await calculateDistance(customer);
console.log('return of calculateDistance', obj);
const { roundedDistance, totalcharge } = obj;
// Create a new customer object with the distance property
const updatedCustomer = {
@@ -297,32 +218,42 @@ const MultipleOrders = () => {
} catch (error) {
console.error('Failed to calculate distance:', error);
}
setIsLoading(false);
} else {
// If the checkbox is unchecked, remove the customer from dropCust
setDropCust((prevDropCust) => {
return prevDropCust.filter((cust) => cust.customerid !== customer.customerid);
});
setIsLoading(false);
}
};
// ========================================================= || calculateDistance || =========================================================
const calculateDistance = async (customer) => {
console.log('Distance calculation starts');
const service = new google.maps.DistanceMatrixService();
// Helper function to get the distance matrix
const getDistanceMatrix = (origins, destinations) => {
const getDistanceMatrix = async (origins, destinations) => {
console.log('origins', origins);
console.log('destinations', destinations);
return new Promise((resolve, reject) => {
console.log('calculation starts');
service.getDistanceMatrix(
{
origins: [new google.maps.LatLng(origins.locationlatitude, origins.locationlong)],
origins: [new google.maps.LatLng(origins.latitude, origins.longitude)],
destinations: [new google.maps.LatLng(destinations.latitude, destinations.longitude)],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC // Distances in metric units (km)
},
(response, status) => {
console.log('cal response', response);
console.log('cal status', status);
if (status === 'OK') {
console.log('calcualtion resolved');
resolve(response);
} else {
console.log('calcualtion rejected');
reject(new Error(`Error calculating distance: ${status}`));
}
}
@@ -348,14 +279,12 @@ const MultipleOrders = () => {
console.log('pricePerKm', pricePerKm);
console.log('basePrice', basePrice);
totalcharge = basePrice;
setTotalCharge(basePrice);
} else {
console.log('minKm', minKm);
console.log('pricePerKm', pricePerKm);
console.log('basePrice', basePrice);
totalcharge = (roundedDistance - minKm) * pricePerKm + basePrice;
console.log('totalcharge', totalcharge);
setTotalCharge(totalcharge);
}
// Return the rounded distance
@@ -375,9 +304,6 @@ const MultipleOrders = () => {
console.log('fetchTiming', res);
const { opentime, closetime, latitude, longitude, radius } = res.data.details[0];
if (res.data.status) {
setAppLocaLat(latitude);
setAppLocaLng(longitude);
setAppLocaRadius(radius);
setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`);
setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`);
console.log('starttime', `${dayjs().format('MM-DD-YYYY')} ${opentime}`);
@@ -405,23 +331,7 @@ const MultipleOrders = () => {
fetchTiming();
}
}, [starttime, endtime, appId]);
// ==================================================== || getsubcategories || ====================================================
const getsubcategories = async () => {
await axios
.get(`${process.env.REACT_APP_URL}/utils/getsubcategories/?moduleid=6`)
.then((res) => {
console.log('subcateRes', res.data.details);
if (res.data.status) {
setSubCat(res.data.details);
}
})
.catch((err) => {
console.log(err);
});
};
useEffect(() => {
getsubcategories();
}, []);
const fetchAppAdminTokens = async () => {
setLoading(true);
await axios
@@ -463,11 +373,7 @@ const MultipleOrders = () => {
.then((res) => {
console.log('fetchtenantinfo', res);
if (res.data.status) {
setTenant(res.data.details);
setTenantid(res.data.details.tenantid);
fetchAppAdminTokens();
setSubCatName(res.data.details.subcategoryname);
setSubCatId(res.data.details.subcategoryid);
}
setLoading(false);
})
@@ -525,7 +431,7 @@ const MultipleOrders = () => {
cancellled: '',
// categoryid: +tenant.categoryid,
configid: 9,
customerid: 0,
customerid: customer.customerid,
deliveryaddress: customer.address || '',
deliverycharge: +customer.totalcharge || 0,
deliverycity: customer.city || '',
@@ -533,10 +439,10 @@ const MultipleOrders = () => {
deliverycustomer: customer.firstname || '',
deliveryid: +customer.customerid,
deliverylandmark: customer.landmark || '',
deliverylat: customer.latitude.toString(),
deliverylat: customer.latitude,
deliverylocation: customer.suburb || '',
deliverylocationid: customer.deliverylocationid || 0,
deliverylong: customer.longitude.toString(),
deliverylong: customer.longitude,
// deliverytime: `${dayjs(startdate).format('YYYY-MM-DD HH:mm:ss')} `,
deliverytime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
deliverytype: 'B',
@@ -558,20 +464,18 @@ const MultipleOrders = () => {
paymentstatus: 1,
paymenttype: 42,
pending: '',
pickupaddress: pickCust.locationaddress || '',
pickupaddress: pickCust.address || '',
pickupcity: pickCust.locationcity || '',
pickupcontactno: pickCust.locationcontact || '',
pickupcontactno: pickCust.contactno || '',
pickupcustomer: pickCust.locationname || '',
pickuplandmark: pickCust.landmark || '',
pickuplat: pickCust.locationlatitude.toString(),
pickuplocation: pickCust.locationsuburb || '',
pickuplat: pickCust.latitude,
pickuplocation: pickCust.suburb || '',
pickuplocationid: pickCust.locationid || 0,
pickuplong: pickCust.locationlong.toString(),
pickuplong: pickCust.longitude,
processing: '',
ready: '',
remarks: '',
// smsdelivery: isSms,
// subcategoryid: +subCatId,
taxamount: 0.0,
tenantid: pickCust.tenantid,
tenantuserid: 0
@@ -656,23 +560,19 @@ const MultipleOrders = () => {
// disabled={!isAppLocation || !isClient}
id="combo-box-demo"
options={tenantLocations || []}
getOptionLabel={(option) => `${option.locationname} (${option.locationsuburb})` || ''}
renderInput={(params) => <TextField {...params} label="Select Business Locations" focused color="primary" />}
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
renderInput={(params) => <TextField {...params} label="Select Business Locations" color="primary" />}
sx={{ width: '350px' }}
onChange={(event, value, reason) => {
if (value) {
console.log('Business Locations', value);
console.log('locationid', value.locationid);
setTenanatLocoId(value.locationid);
setTid(value.tenantid);
setTenantlocation(value.locationaddress);
setIsLocation(true);
setIsBusiness(true);
setPickCust(value);
}
if (reason == 'clear') {
setIsLocation(false);
setIsBusiness(false);
}
}}
/>
@@ -693,7 +593,7 @@ const MultipleOrders = () => {
let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
console.log('dateres11');
console.log(dateres11);
setSelectedtime('');
if (dateres11 <= 0) {
console.log('startdate', e);
setStartdate(e);
@@ -744,7 +644,7 @@ const MultipleOrders = () => {
<TableBody>
<TableRow>
<TableCell>{pickCust.locationname}</TableCell>
<TableCell>{pickCust.locationaddress}</TableCell>
<TableCell>{pickCust.address}</TableCell>
</TableRow>
</TableBody>
</Table>
@@ -830,175 +730,7 @@ const MultipleOrders = () => {
</TableContainer>
</MainCard>
</Grid>
{/* ================================================= || Time || ================================================= */}
{/* <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
<MainCard sx={{ mt: 2, height: '390px' }}>
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<Typography variant="h5">Date</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
<DatePicker
format="DD-MM-YYYY"
onChange={(e) => {
let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
console.log('dateres11');
console.log(dateres11);
setSelectedtime('');
if (dateres11 <= 0) {
console.log('startdate', e);
setStartdate(e);
let arr = [];
timeslotarr.map((val) => {
if (dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
arr.push(val);
}
});
if (arr[0]) {
setOrderarr([
{
sno: 1,
address: '',
customerid: '',
deliverytime: dayjs(arr[0]) || '',
deliverylocationid: '',
clientname: '',
contactno: '',
latitude: '',
longitude: ''
}
]);
} else {
setOrderarr([]);
}
} else {
setAlertmessage('choose Upcoming Date');
opentoast('choose Upcoming Date', 'warning');
setStartdate(NaN);
}
}}
value={dayjs(startdate)}
sx={{ width: '100%', mt: 2 }}
disablePast
/>
</LocalizationProvider>
<Typography variant="h5" sx={{ my: 2 }}>
Time
</Typography>
<MainCard
sx={{
height: '210px',
mt: 1,
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: '3px', // Width of vertical scrollbar
height: '10px' // Height of horizontal scrollbar
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#65387A' // Color of the scrollbar thumb
}
}}
>
<Grid container spacing={2}>
{timeslotarr.map((val, index) => {
if (dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
return (
<Fragment key={index}>
<Grid item>
<Chip
key={index}
sx={{ cursor: 'pointer' }}
color={dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm') ? 'primary' : 'default'}
label={dayjs(val).format('hh:mm A')}
onClick={() => {
setSelectedtime(val);
}}
/>
</Grid>
</Fragment>
);
}
})}
</Grid>
</MainCard>
</Grid>
<Grid item xs={12} sm={6} sx={{}}>
{showDistance && (
<Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', mb: 3 }}>
<Stack spacing={1.5}>
<Chip label={`Distance: ${distance} km`} size="medium" variant="contained" color="primary" />
</Stack>
<Stack spacing={1.5}>
<Chip label={`Charge: ₹${totalCharge.toFixed(2)}`} size="medium" variant="contained" color="primary" />
</Stack>
</Stack>
)}
<Stack direction={'column'} justifyContent={'space-between'} sx={{ mb: 2 }}>
<Typography variant="h5">Category</Typography>
<Autocomplete
// disablePortal
id="combo-box-demo"
options={subCat}
getOptionLabel={(option) => `${option.subcategoryname}` || ''}
sx={{ my: 2, zIndex: '99' }}
fullWidth
renderInput={(params) => <TextField {...params} label={subCatName == '' ? tenant.subcategoryname : subCatName} />}
onChange={(event, value, reason) => {
if (value) {
console.log(value);
setSubCatName(value.subcategoryname);
setSubCatId(value.subcategoryid);
}
}}
/>
</Stack>
<Typography variant="h5">Weight</Typography>
<Stack direction={'row'} justifyContent={'space-evenly'} sx={{ border: '1px solid #eee', my: 2, py: 2 }}>
<Chip
variant="contained"
color="default"
label="1-10kgs"
sx={chipStyle('1-10kgs')}
onClick={() => {
handleChipClick('1-10kgs');
setWeight('1-10kgs');
}}
/>
<Chip
variant="contained"
color="default"
label="11-20kgs"
sx={chipStyle('11-20kgs')}
onClick={() => {
handleChipClick('11-20kgs');
setWeight('11-20kgs');
}}
/>
<Chip
variant="contained"
color="default"
label="21-30kgs"
sx={chipStyle('21-30kgs')}
onClick={() => {
handleChipClick('21-30kgs');
setWeight('21-30kgs');
}}
/>
</Stack>
<Stack direction={'row'} justifyContent={'space-between'} sx={{ mt: 4 }}>
<Typography variant="h5">SMS Delivery</Typography>
<Switch
checked={isSms === 1}
onChange={(e) => {
setIsSms(e.target.checked ? 1 : 0);
}}
/>
</Stack>
</Grid>
</Grid>
</MainCard>
</Grid> */}
<Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
{/* ================================================= || Notes || ================================================= */}
<MainCard sx={{ mt: 2 }} title={'Notes'}>
@@ -1052,6 +784,7 @@ const MultipleOrders = () => {
fullWidth
sx={{ minWidth: 'lg' }}
>
{isLoading && <CircularLoader />}
<DialogTitle sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
<Stack>
<Typography variant="h4"> {`Select Drop Customers (${dropCust.length || 0})`}</Typography>

486
src/pages/nearle/orders/orders.js
View File

@@ -1,15 +1,12 @@
import * as React from 'react';
import { enqueueSnackbar } from 'notistack';
import { DeleteFilled, NotificationOutlined } from '@ant-design/icons';
import { DeleteFilled } from '@ant-design/icons';
import { useState, useEffect, Fragment, useRef } from 'react';
import { Empty } from 'antd';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import axios from 'axios';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
import { useTheme } from '@mui/material/styles';
import {
@@ -27,7 +24,6 @@ import {
TableCell,
TableBody,
TableHead,
Collapse,
Dialog,
TableRow,
DialogContent,
@@ -37,16 +33,13 @@ import {
OutlinedInput,
InputAdornment,
Skeleton,
CircularProgress,
DialogActions
TextField,
Autocomplete
} from '@mui/material';
import MainCard from 'components/MainCard';
import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
import ClearIcon from '@mui/icons-material/Clear';
import { addDays, addMonths, addWeeks, endOfMonth, endOfWeek, startOfMonth, startOfWeek } from 'date-fns';
import { DateRangePicker } from 'mui-daterange-picker';
import { useNavigate } from 'react-router';
import PropTypes from 'prop-types';
import TableContainer from '@mui/material/TableContainer';
import TablePagination from '@mui/material/TablePagination';
import TableSortLabel from '@mui/material/TableSortLabel';
@@ -55,31 +48,6 @@ import Loader from 'components/Loader';
import { FilterList } from '@mui/icons-material';
const Orders = () => {
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
const tid = localStorage.getItem('tenantid');
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
@@ -92,22 +60,16 @@ const Orders = () => {
const [percentage3, setPercentage3] = useState('0');
const [percentage4, setPercentage4] = useState('0');
let [orderarr, setArr] = useState([]);
let [orderarrcovered, setArrcovered] = useState([]);
const [allorders, setAllorders] = useState('');
const [activeorders, setActiveorders] = useState('');
const [coveredorders, setCoveredorders] = useState('');
const [uncoveredorders, setUncoveredorders] = useState('');
const [cancelled, setCancelled] = useState('');
const [closed, setClosed] = useState('');
const [created, setCreated] = useState('');
const [tabstatus, setTabstatus] = useState('Created');
const [loading, setLoading] = useState(true);
const theme = useTheme();
let [rows, setRows] = useState([]);
const [tabvalue, setTabvalue] = useState(0);
let navigate = useNavigate();
const [open, setOpen] = useState(false);
const [dateselect, setDateselect] = useState('select');
const [tabstatus1, setTabstatus1] = useState('Today');
const [datestatus, setDatestatus] = useState('Today');
const [searchword, setSearchword] = useState('');
@@ -175,52 +137,15 @@ const Orders = () => {
if (tabstatus1 === 'Tomorrow') {
setEnddate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
setStartdate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
setDateselect('select');
} else if (tabstatus1 === 'Today') {
setEnddate(new Date().toISOString().substring(0, 10));
setStartdate(new Date().toISOString().substring(0, 10));
setDateselect('select');
} else if (tabstatus1 === 'Week') {
setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10));
setEnddate(new Date().toISOString().substring(0, 10));
setDateselect('select');
}
// else if (tabstatus1 === 'All') {
// setEnddate('');
// setStartdate('');
// setDateselect('all');
// }
}, [tabstatus1]);
const choosedate = (date) => {
setStartdate(date.$d.toISOString().substring(0, 10));
setEnddate(date.$d.toISOString().substring(0, 10));
setTabstatus1('');
};
useEffect(() => {
if (searchword) {
let arr = orderarr.filter((val) => {
return (
val.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
val.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupcustomer.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupcontactno.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupsuburb.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverysuburb.toLowerCase().includes(searchword.toLowerCase()) ||
val.ordernotes.toString().toLowerCase().includes(searchword.toLowerCase())
);
});
console.log(arr);
setRows([...arr]);
} else {
setRows([...orderarr]);
}
}, [searchword]);
const fetchtablecovered = async () => {
try {
await axios
@@ -229,7 +154,7 @@ const Orders = () => {
process.env.REACT_APP_URL
}/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
page + 1
}&pagesize=${rowsPerPage}`
}&pagesize=${rowsPerPage}&keyword=${searchword}`
)
.then((res) => {
setArr(res.data.details);
@@ -244,7 +169,7 @@ const Orders = () => {
};
useEffect(() => {
fetchtablecovered();
}, [tabstatus, startdate, enddate, page, rowsPerPage]);
}, [tabstatus, startdate, enddate, page, rowsPerPage, searchword]);
const fetchpercentage = async () => {
setLoading(true);
@@ -253,12 +178,10 @@ const Orders = () => {
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}`)
.then((res) => {
console.log(res);
setAllorders(res.data.details.total.toString());
setCoveredorders(res.data.details.delivered.toString());
setCancelled(res.data.details.cancelled.toString());
setUncoveredorders(res.data.details.pending.toString());
setCreated(res.data.details.created.toString());
setClosed(res.data.details.delivered.toString());
setPercentage1((Math.round((res.data.details.created / res.data.details.total) * 100) || 0).toString());
setPercentage3((Math.round((res.data.details.delivered / res.data.details.total) * 100) || 0).toString());
setPercentage4((Math.round((res.data.details.cancelled / res.data.details.total) * 100) || 0).toString());
@@ -331,11 +254,7 @@ const Orders = () => {
disablePadding: false,
label: 'Delivery'
},
// {
// id: 'ordervalue',
// disablePadding: false,
// label: 'VALUE $',
// },
{
id: 'itemcount',
disablePadding: false,
@@ -389,15 +308,6 @@ const Orders = () => {
}
function EnhancedTable() {
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('calories');
const [selected, setSelected] = React.useState([]);
const [expandopen, setExpandopen] = React.useState('');
const [dialogopen, setDialogopen] = useState(false);
const [stafflist, setStafflist] = useState([]);
const [loading1, setLoading1] = useState(false);
const [open, setOpen] = useState(false);
const [orderheaderid, setOrderheaderid] = useState('');
@@ -411,11 +321,6 @@ const Orders = () => {
.then((res) => {
console.log(res);
if (res.data.status) {
// if (orderheaderid && tenantid) {
// fetchorderdetails();
// fetchorderaddons();
// fetchorderattires();
// }
enqueueSnackbar('Order Cancelled Successfully', {
variant: 'success',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
@@ -431,21 +336,6 @@ const Orders = () => {
});
};
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelected = rows.map((n) => n.name);
setSelected(newSelected);
return;
}
setSelected([]);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
@@ -455,16 +345,6 @@ const Orders = () => {
setPage(0);
};
const isSelected = (name) => selected.indexOf(name) !== -1;
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
const visibleRows = React.useMemo(
() => stableSort(rows, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
[order, orderBy, page, rowsPerPage]
);
const handleClose = () => {
setOpen(false);
setOrderheaderid('');
@@ -478,15 +358,7 @@ const Orders = () => {
// const [deletepassword, setDeletepassword] = useState('');
return (
<Dialog
open={open}
onClose={() => handleClose(false)}
// keepMounted
// TransitionComponent={PopupTransition}
maxWidth="xs"
// aria-labelledby="column-delete-title"
// aria-describedby="column-delete-description"
>
<Dialog open={open} onClose={() => handleClose(false)} maxWidth="xs">
<DialogContent sx={{ mt: 2, my: 1 }}>
<Stack alignItems="center" spacing={3.5}>
<Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
@@ -580,7 +452,7 @@ const Orders = () => {
</>
)}
<TableBody>
{rows.length == 0 && (
{rows?.length == 0 && (
<>
<TableCell colSpan={7}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
@@ -590,14 +462,13 @@ const Orders = () => {
</>
)}
{rows.map((row, index) => {
{rows?.map((row, index) => {
return (
<>
<TableRow
key={index}
sx={{
cursor: 'pointer',
backgroundColor: expandopen === row.sno ? '#f5f5f5' : ''
cursor: 'pointer'
}}
>
<TableCell padding="none">
@@ -633,26 +504,13 @@ const Orders = () => {
</Typography>
<Tooltip title={row.pickupaddress}>
<Typography variant="caption" color="textSecondary">
{/* {row.pickupaddress.slice(0, 20)} */}
{row.pickupsuburb || row.pickupaddress.slice(0, 20)}
</Typography>
</Tooltip>
</Stack>
</Stack>
{/* <Stack direction='column'>
</Stack> */}
</TableCell>
<TableCell align="left">
{/* <Stack direction='column'>
<Tooltip title={row.deliveryaddress}>
<Typography variant="caption" color="textSecondary"
>
{row.customersuburb || row.deliveryaddress.slice(0, 20)}
</Typography>
</Tooltip>
</Stack> */}
<Stack direction={'row'} spacing={1}>
<Avatar
alt=""
@@ -727,8 +585,8 @@ const Orders = () => {
<TablePagination
rowsPerPageOptions={[5, 10, 25, 50, 100]}
component="div"
count={pageCount}
rowsPerPage={rowsPerPage}
count={pageCount || 0}
rowsPerPage={rowsPerPage || 0}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
@@ -740,16 +598,13 @@ const Orders = () => {
return (
<>
{loading && <Loader />}
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{ mb: -2.25 }}>
<Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems="center" spacing={2}>
<Stack direction="column" alignItems="flex-start" spacing={1}>
<Typography variant="h3">Orders</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} lg={3} sm={6}>
<Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems="center" spacing={2}>
<Typography variant="h3">Orders</Typography>
</Stack>
<Grid container spacing={3} sx={{ mt: 0.1 }}>
<Grid item xs={12} sm={6} md={3}>
<HoverSocialCard
primary="Created Orders"
secondary={created === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : created}
@@ -757,7 +612,7 @@ const Orders = () => {
color={theme.palette.primary.main}
/>
</Grid>
<Grid item xs={12} lg={3} sm={6}>
<Grid item xs={12} sm={6} md={3}>
<HoverSocialCard
primary="Pending orders"
secondary={uncoveredorders == '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : uncoveredorders}
@@ -766,7 +621,7 @@ const Orders = () => {
/>
</Grid>
<Grid item xs={12} lg={3} sm={6}>
<Grid item xs={12} sm={6} md={3}>
<HoverSocialCard
primary="Delivered orders"
secondary={coveredorders === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : coveredorders}
@@ -775,7 +630,7 @@ const Orders = () => {
/>
</Grid>
<Grid item xs={12} lg={3} sm={6}>
<Grid item xs={12} sm={6} md={3}>
<HoverSocialCard
primary="Cancelled Orders"
secondary={cancelled === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : cancelled}
@@ -783,80 +638,65 @@ const Orders = () => {
color={theme.palette.secondary[600]}
/>
</Grid>
</Grid>
<Grid item xs={12} sx={{ mb: -3 }}>
<Stack direction={'row'} justifyContent={'space-between'}>
{startdate && enddate && (
<Stack direction="row" spacing={2}>
<Chip label={`Orders-${datestatus ? datestatus : ''}`} color="primary" variant="light" size="small" />
<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) && (
<>
<Stack direction="row" spacing={2}>
<Chip label="Orders-All" color="primary" variant="light" size="small" />
</Stack>
</>
)}
<Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} sx={{ my: 2 }}>
{startdate && enddate && (
<Stack direction="row" spacing={2}>
<Chip label={`Orders-${datestatus ? datestatus : ''}`} color="primary" variant="light" size="small" />
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{ color: 'text.primary', bgcolor: 'grey.200', display: { xs: 'none', md: 'flex' } }}
aria-haspopup="true"
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip>
<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>
</Grid>
)}
<Grid item xs={12}>
<Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
<Stack
alignItems="center"
justifyContent="space-between"
direction="row"
sx={{
p: 2,
width: '100%'
}}
>
<Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto">
<Tab
label="Created"
icon={<Chip label={createdLenght} color="primary" variant="light" size="small" />}
iconPosition="end"
/>
<Tab
label="Pending"
icon={<Chip label={pendingLenght} color="primary" variant="light" size="small" />}
iconPosition="end"
/>
<Tab
label="Delivered"
icon={<Chip label={deliveredlenght} color="primary" variant="light" size="small" />}
iconPosition="end"
/>
<Tab
label="Cancelled"
icon={<Chip label={cancelledLenght} color="primary" variant="light" size="small" />}
iconPosition="end"
/>
</Tabs>
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{ color: 'text.primary', bgcolor: 'grey.200', display: { xs: 'none', md: 'flex' } }}
aria-haspopup="true"
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip>
</Stack>
<Grid item xs={12}>
<Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
<Stack
alignItems="center"
justifyContent="space-between"
direction="row"
sx={{
p: 2,
width: '100%'
}}
>
<Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto">
<Tab label="Created" icon={<Chip label={createdLenght} color="primary" variant="light" size="small" />} iconPosition="end" />
<Tab label="Pending" icon={<Chip label={pendingLenght} color="primary" variant="light" size="small" />} iconPosition="end" />
<Tab
label="Delivered"
icon={<Chip label={deliveredlenght} color="primary" variant="light" size="small" />}
iconPosition="end"
/>
<Tab
label="Cancelled"
icon={<Chip label={cancelledLenght} color="primary" variant="light" size="small" />}
iconPosition="end"
/>
</Tabs>
<Stack>
<FormControl sx={{ width: 250, display: { xs: 'none', md: 'flex' } }}>
<OutlinedInput
inputRef={textFieldRef}
@@ -894,97 +734,95 @@ const Orders = () => {
/>
</FormControl>
</Stack>
<Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
<EnhancedTable />
</Box>
</Box>
</Grid>
<Dialog open={open}>
<DialogTitle align="left">
<Typography variant="h4">Select Filter Options</Typography>
</DialogTitle>
<DialogContent sx={{ width: '100%' }} className="datedialog">
<DateRangePicker
open={open}
toggle={() => setOpen(!open)}
id="daterange1"
onChange={(range) => {
if (range.label === 'All') {
setDateselect('all');
setStartdate('');
setEnddate('');
setOpen(false);
} else {
setDateselect('select');
setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
if (range.label) {
setDatestatus(range.label);
} else {
setDatestatus('');
}
}
console.log(range);
}}
definedRanges={[
{
label: 'Today',
startDate: new Date(),
endDate: new Date()
},
{
label: 'Yesterday',
startDate: addDays(new Date(), -1),
endDate: addDays(new Date(), -1)
},
{
label: 'Tomorrow',
startDate: addDays(new Date(), +1),
endDate: addDays(new Date(), +1)
},
{
label: 'This Week',
startDate: startOfWeek(new Date()),
endDate: endOfWeek(new Date())
},
{
label: 'Last Week',
startDate: startOfWeek(addWeeks(new Date(), -1)),
endDate: endOfWeek(addWeeks(new Date(), -1))
},
{
label: 'Last 7 Days',
startDate: addWeeks(new Date(), -1),
endDate: new Date()
},
{
label: 'This Month',
startDate: startOfMonth(new Date()),
endDate: endOfMonth(new Date())
},
{
label: 'Last Month',
startDate: startOfMonth(addMonths(new Date(), -1)),
endDate: endOfMonth(addMonths(new Date(), -1))
}
// {
// label: 'All',
// startDate: new Date(),
// endDate: addDays(new Date(), -1),
// },
]}
/>
</DialogContent>
<Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
<Button variant="contained" size="small" onClick={okclicked}>
ok
</Button>
</Stack>
</Dialog>
<Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
<EnhancedTable />
</Box>
</Box>
</Grid>
<Dialog open={open}>
<DialogTitle align="left">
<Typography variant="h4">Select Filter Options</Typography>
</DialogTitle>
<DialogContent sx={{ width: '100%' }} className="datedialog">
<DateRangePicker
open={open}
toggle={() => setOpen(!open)}
id="daterange1"
onChange={(range) => {
if (range.label === 'All') {
setStartdate('');
setEnddate('');
setOpen(false);
} else {
setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
if (range.label) {
setDatestatus(range.label);
} else {
setDatestatus('');
}
}
console.log(range);
}}
definedRanges={[
{
label: 'Today',
startDate: new Date(),
endDate: new Date()
},
{
label: 'Yesterday',
startDate: addDays(new Date(), -1),
endDate: addDays(new Date(), -1)
},
{
label: 'Tomorrow',
startDate: addDays(new Date(), +1),
endDate: addDays(new Date(), +1)
},
{
label: 'This Week',
startDate: startOfWeek(new Date()),
endDate: endOfWeek(new Date())
},
{
label: 'Last Week',
startDate: startOfWeek(addWeeks(new Date(), -1)),
endDate: endOfWeek(addWeeks(new Date(), -1))
},
{
label: 'Last 7 Days',
startDate: addWeeks(new Date(), -1),
endDate: new Date()
},
{
label: 'This Month',
startDate: startOfMonth(new Date()),
endDate: endOfMonth(new Date())
},
{
label: 'Last Month',
startDate: startOfMonth(addMonths(new Date(), -1)),
endDate: endOfMonth(addMonths(new Date(), -1))
}
// {
// label: 'All',
// startDate: new Date(),
// endDate: addDays(new Date(), -1),
// },
]}
/>
</DialogContent>
<Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
<Button variant="contained" size="small" onClick={okclicked}>
ok
</Button>
</Stack>
</Dialog>
</>
);
};

143
src/pages/nearle/reports/mapWithRoute.js
View File

@@ -1,14 +1,45 @@
import React, { useEffect, useRef } from 'react';
import { MapContainer, TileLayer, Marker, Popup, Polyline, Tooltip } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Polyline, Tooltip } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import dayjs from 'dayjs';
import { Chip, Grid, IconButton, Stack, ToggleButton, Typography } from '@mui/material';
import DisabledByDefaultOutlinedIcon from '@mui/icons-material/DisabledByDefaultOutlined';
import { useTheme } from '@emotion/react';
import { CloseCircleOutlined } from '@ant-design/icons';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
const MapWithRoute = ({ coordinates, additionalProps }) => {
// Define custom icon for start and end markers
const startIcon = new L.Icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
const endIcon = new L.Icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
const MapWithRoute = ({ coordinates, additionalProps, order, setMapOpen }) => {
console.log('setMapOpen:', typeof setMapOpen);
console.log('coordinates', coordinates);
console.log(additionalProps.riderStart);
console.log(additionalProps.riderEnd);
console.log('order', order);
const mapRef = useRef(null);
const theme = useTheme;
useEffect(() => {
if (mapRef.current && coordinates.length > 0) {
const bounds = calculateBounds(coordinates);
@@ -29,43 +60,105 @@ const MapWithRoute = ({ coordinates, additionalProps }) => {
];
};
const limeOptions = { color: 'blue', weight: 10 };
const dottedOptions = { color: 'blue', weight: 8, dashArray: '4 4' };
const length = coordinates.length;
const midlenght = Math.round(coordinates.length / 2);
const start = coordinates[0];
const end = coordinates[length - 1];
const center = coordinates[midlenght];
const showList = (primary, secondary) => {
return (
<Stack direction="row" spacing={1} alignItems="center">
<Typography variant="h5" color="text.primary" sx={{ fontSize: 13 }}>
{primary}:
</Typography>
<Chip label={secondary || 'N/A'} color="primary" variant="combined" size="small" sx={{ fontWeight: 1000, fontSize: 14 }} />
</Stack>
);
};
return (
coordinates &&
coordinates.length > 0 && (
<div id="map" style={{ width: '80vw', height: '80vh', margin: '0 auto' }}>
<MapContainer center={center} zoom={15} scrollWheelZoom={false} style={{ height: '100%' }} ref={mapRef}>
<div
id="map"
style={{
width: '100%',
height: '90vh',
margin: '0 auto',
position: 'relative'
}}
>
<Chip
label="close"
color="primary"
variant="combined"
onClick={() => setMapOpen(false)}
size="large"
sx={{
position: 'absolute',
top: 8,
right: 8,
zIndex: 1000,
'&:hover': {},
cursor: 'pointer'
}}
icon={<CloseCircleOutlined />}
/>
{/* Overlay */}
<Stack
direction="row"
gap={2}
flexWrap="wrap"
alignItems="center"
justifyContent="flex-start"
sx={{
position: 'absolute',
bottom: 0,
zIndex: 1000,
left: 0,
right: 0,
px: { xs: 1, custom500: 2, custom700: 2 },
py: { xs: 1, custom500: 2, custom900: 4 },
backgroundColor: 'rgba(255, 255, 255, 0.95)',
maxWidth: '100%',
width: 'auto',
boxShadow: (theme) => theme.shadows[3]
}}
>
{showList('Tenant', order?.tenantname)}
{showList('Rider', order?.ridername)}
{showList('Pickup', order?.pickupcustomer)}
{showList('Drop', order?.deliverycustomer)}
{showList('Kms', order?.kms)}
{showList('Actual kms', order?.actualkms)}
{showList('Rider kms', order?.riderkms)}
</Stack>
{/* Map */}
<MapContainer center={center} zoom={15} scrollWheelZoom={false} style={{ height: '100%', width: '100%' }} ref={mapRef}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={start}>
<Tooltip hover direction="bottom">
<span>{`Pickup Point: ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderStart)
.utc()
.format('hh:mm A')})`}</span>
<Marker position={start} icon={startIcon}>
<Tooltip direction="bottom">
<span>
{`Pickup Point: ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderStart)
.utc()
.format('hh:mm A')})`}
</span>
</Tooltip>
{/* <Popup>{`Pickup Point ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderStart)
.utc()
.format('hh:mm A')}) `}</Popup> */}
</Marker>
<Marker position={end}>
<Tooltip hover direction="bottom">
<span>{`Drop Point: ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderEnd)
.utc()
.format('hh:mm A')})`}</span>
<Marker position={end} icon={endIcon}>
<Tooltip direction="bottom">
<span>
{`Drop Point: ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderEnd)
.utc()
.format('hh:mm A')})`}
</span>
</Tooltip>
{/* <Popup>{`Drop Point ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderEnd)
.utc()
.format('hh:mm A')}) `}</Popup> */}
</Marker>
{/* <Marker position={center}>
<Popup>Center Point</Popup>
</Marker> */}
<Polyline pathOptions={limeOptions} positions={coordinates} />
<Polyline pathOptions={dottedOptions} positions={coordinates} />
</MapContainer>
</div>
)

610
src/pages/nearle/reports/ordersDetails.js
View File

@@ -1,11 +1,9 @@
import PropTypes from 'prop-types';
import { React, useState, useEffect, useRef, forwardRef } from 'react';
import { React, useState, useEffect, useRef } from 'react';
import TitleCard from 'pages/nearle/titleCard';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { Empty } from 'antd';
import ClearIcon from '@mui/icons-material/Clear';
import { TableVirtuoso } from 'react-virtuoso';
import { useTheme } from '@mui/material/styles';
import { SlLocationPin } from 'react-icons/sl';
import MapWithRoute from './mapWithRoute';
@@ -13,16 +11,12 @@ import { enqueueSnackbar } from 'notistack';
// material-ui
import {
Box,
Checkbox,
Divider,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TablePagination,
TableSortLabel,
TableRow,
Grid,
Dialog,
@@ -34,24 +28,18 @@ import {
IconButton,
Tooltip,
Chip,
Avatar,
Autocomplete,
Tab,
Tabs,
Paper,
FormControl,
OutlinedInput,
InputAdornment,
Badge,
Autocomplete,
TextField
} from '@mui/material';
import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { SearchOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateRangePicker } from 'mui-daterange-picker';
import {
addDays,
@@ -65,13 +53,12 @@ import {
startOfWeek
// startOfYear,
} from 'date-fns';
import { visuallyHidden } from '@mui/utils';
import { FilterList } from '@mui/icons-material';
// project imports
import { fetchorderdetails, fetchCount, fetchAppLocations } from '../api/api';
import MainCard from 'components/MainCard';
import { CSVExport, TableRowSelection } from 'components/third-party/ReactTable';
import { CSVExport } from 'components/third-party/ReactTable';
import Loader from 'components/Loader';
function descendingComparator(a, b, orderBy) {
@@ -110,11 +97,6 @@ const headCells = [
disablePadding: false,
label: '#'
},
// {
// id: 'map',
// disablePadding: false,
// label: '^'
// },
{
id: 'tenantname',
@@ -172,11 +154,7 @@ const headCells = [
disablePadding: false,
label: 'NOTES'
},
// {
// id: "rider",
// disablePadding: false,
// label: "rider",
// },
{
id: 'kms',
disablePadding: false,
@@ -191,8 +169,8 @@ const headCells = [
];
// ==============================|| MUI TABLE - ENHANCED ||============================== //
const tabContent = ['Delivered', 'Pending', 'Cancelled'];
export default function ordersDetails() {
export default function OrdersDetails() {
const textFieldRef = useRef(null);
const [order, setOrder] = useState('asc');
const [orderBy, setOrderBy] = useState('calories');
@@ -206,7 +184,6 @@ export default function ordersDetails() {
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
const [open, setOpen] = useState(false);
const [open1, setOpen1] = useState(false);
const [dateselect, setDateselect] = useState('select');
const [tabstatus1, setTabstatus1] = useState('Today');
const [datestatus, setDatestatus] = useState('Today');
@@ -215,7 +192,6 @@ export default function ordersDetails() {
const [appId, setAppId] = useState(-1);
const [value, setValue] = useState(0);
const [tabvalue, setTabvalue] = useState(0);
const [tabstatus, setTabstatus] = useState('Delivered');
const [deliCount, setDeliCount] = useState(0);
const [pendCount, setPendCount] = useState(0);
const [cancelCount, setCancelCount] = useState(0);
@@ -225,6 +201,30 @@ export default function ordersDetails() {
const [riderCoordinates, setRiderCoordinates] = useState([]);
const [riderStart, setRiderStart] = useState();
const [riderEnd, setRiderEnd] = useState();
const [mapOpen, setMapOpen] = useState(false);
const [mapTenant, setMapTenant] = useState({});
let [total, settotal] = useState(0);
let [coveredLenght, setCoveredLenght] = useState(0);
let [uncoveredLenght, setUncoveredLenght] = useState(0);
let [cancelLenght, setCancelLenght] = useState(0);
let [assignLenght, setAssignLenght] = useState(0);
let [pickedLenght, setPickedLenght] = useState(0);
let [activeLenght, setActiveLenght] = useState(0);
let [arrivesLenght, setArrivedLenght] = useState(0);
const [statusCount, setStatusCount] = useState();
const [currentStatus, setCurrentStatus] = useState('All');
const status = [
{ id: 0, status: 'All', statusLow: 'All', count: total },
{ id: 1, status: 'Pending', statusLow: 'pending', count: assignLenght },
{ id: 2, status: 'Accepted', statusLow: 'accepted', count: uncoveredLenght },
{ id: 3, status: 'Arrived', statusLow: 'arrived', count: arrivesLenght },
{ id: 4, status: 'Picked', statusLow: 'picked', count: pickedLenght },
{ id: 5, status: 'Active', statusLow: 'active', count: activeLenght },
{ id: 6, status: 'Delivered', statusLow: 'delivered', count: coveredLenght },
{ id: 7, status: 'Cancelled', statusLow: 'cancelled', count: cancelLenght }
];
const getdeliverylogs = async (id) => {
console.log('deliveryid', id);
@@ -276,15 +276,6 @@ export default function ordersDetails() {
};
}, []);
const handleChangetab = (e, i) => {
setTabvalue(i);
if (i === 0) setTabstatus('Delivered');
if (i === 1) setTabstatus('Pending');
if (i === 2) setTabstatus('Cancelled');
console.log(i);
};
// ==============================|| fetchorderdetails (orders)||============================== //
const {
@@ -293,7 +284,7 @@ export default function ordersDetails() {
data: rows,
error: orderDetailsError
} = useQuery({
queryKey: [tabvalue, appId, startdate, enddate],
queryKey: [startdate, enddate, currentStatus],
queryFn: fetchorderdetails
});
@@ -338,25 +329,10 @@ export default function ordersDetails() {
}, [fetchCount, startdate, enddate]);
// ==============================|| fetchAppLocations ||============================== //
const {
isLoading: isLoadingLocations,
isError: isErrorLocations, //true or false
data: locations,
error: locationsError
} = useQuery({
queryKey: [appId],
queryFn: fetchAppLocations
});
if (isLoadingOrderDetails || isLoadingLocations || isLoadingOrderCount) return <Loader />;
if (isLoadingOrderDetails || isLoadingOrderCount) return <Loader />;
if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
if (isErrorOrderCount) return 'An error has occurred:(isErrorOrderCount) ' + orderCountError.message;
if (isErrorLocations) return 'An error has occurred:(isErrorlocations) ' + locationsError.message;
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const filteredOrders = rows.filter((row) =>
row.orderstatus == ''
? row.orderstatus.toLowerCase().includes(searchword.toLowerCase())
@@ -413,47 +389,8 @@ export default function ordersDetails() {
locationcontactno: order.locationcontactno
}));
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelectedId = rows.map((n) => n.name);
setSelected(newSelectedId);
return;
}
setSelected([]);
};
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
}
const selectedRowData = rows.filter((row) => newSelected.includes(row.name.toString()));
setSelectedValue(selectedRowData);
setSelected(newSelected);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event?.target.value, 10));
setPage(0);
};
const isSelected = (name) => selected.indexOf(name) !== -1;
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
function formatDate(dateString) {
const date = dayjs(dateString);
const formattedDate = date.format('DD/MM/YYYY ');
@@ -468,199 +405,127 @@ export default function ordersDetails() {
<>
<TitleCard title="Orders Details" />
<Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
<Grid
container
sx={{ display: 'flex', flexDirection: { md: 'row', xs: 'column' }, alignItems: 'center', justifyContent: 'center', m: 2 }}
<Stack
display={'flex'}
flexDirection={{ xs: 'column', md: 'row' }}
alignItems={'center'}
justifyContent={'space-between'}
sx={{ p: 2 }}
spacing={1}
>
<Grid item xs={4}>
<Stack direction="column" alignItems="flex-start" spacing={1}>
{startdate && enddate && (
<Stack direction="row" spacing={2}>
<Badge
badgeContent={`${filteredOrders.length}`}
max={`${count}`}
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) && (
<>
<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>
</>
)}
</Stack>
</Grid>
<Grid item xs={8}>
<Stack
sx={{
display: 'flex',
// flexDirection: { md: 'row', xs: 'column' },
flexDirection: 'row',
justifyContent: 'end',
alignItems: 'center',
marginRight: '25px'
}}
>
<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('');
// setPages(1);
// fetchCustomersList(1);
}}
>
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
</IconButton>
</Tooltip>
}
/>
</FormControl>
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
<Stack direction="column" alignItems="flex-start" spacing={1}>
{startdate && enddate && (
<Stack direction="row" spacing={2}>
<Badge
badgeContent={`${filteredOrders.length}`}
max={`${count}`}
color="primary"
sx={{
color: 'text.primary',
bgcolor: 'grey.200',
mx: 2
bgcolor: '#f3e5f5',
p: 0.2,
borderRadius: '3px',
color: '#7b1fa2'
}}
aria-haspopup="true"
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip>
>{`Orders-${datestatus}`}</Badge>
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
</Stack>
</Grid>
</Grid>
{/* <Box sx={{ bgcolor: "#eeeeee" }}>
<Stack
alignItems="center"
justifyContent="end"
direction="row"
sx={{
p: 2,
width: "100%",
<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) && (
<>
<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>
</>
)}
</Stack>
<Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
<Autocomplete
sx={{ minWidth: 200 }}
disablePortal
id="combo-box-demo"
label={currentStatus}
options={status}
getOptionLabel={(option) => `${option.status}`}
onChange={(event, value, reason) => {
if (reason === 'clear') {
setCurrentStatus('All');
setStatusCount(status[0].count);
} else {
console.log('status', value);
setCurrentStatus(value.statusLow);
setStatusCount(value.count);
}
}}
>
<Tabs
value={tabvalue}
onChange={handleChangetab}
variant="scrollable"
scrollButtons="auto"
>
<Tab
label="Delivered"
icon={
<Chip
label={countData.deliveredCount}
color="success"
variant="light"
size="small"
/>
}
iconPosition="end"
/>
<Tab
label="Pending"
icon={
<Chip
label={countData.pendingCount}
color="warning"
variant="light"
size="small"
/>
}
iconPosition="end"
/>
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>
<Tab
label="Cancelled"
icon={
<Chip
label={countData.cancelledCount}
color="error"
variant="light"
size="small"
/>
}
iconPosition="end"
/>
</Tabs>
<FormControl
sx={{ width: 250, display: { xs: "none", md: "flex" } }}
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{
color: 'text.primary',
bgcolor: 'grey.200',
mx: 2
}}
aria-haspopup="true"
onClick={() => setOpen(true)}
>
<OutlinedInput
sx={{ background: "white" }}
size="large"
id="header-search"
startAdornment={
<InputAdornment position="start" sx={{ mr: -0.5 }}>
<SearchOutlined />
</InputAdornment>
}
aria-describedby="header-search-text"
inputProps={{
"aria-label": "weight",
}}
placeholder="Search"
value={searchword}
onChange={(e) => {
setSearchword(e.target.value);
}}
autoComplete="off"
/>
</FormControl>
</Stack>
</Box> */}
<FilterList />
</IconButton>
</Tooltip>
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
</Stack>
</Stack>
</Paper>
<MainCard content={false}>
<TableContainer
sx={{
@@ -668,8 +533,9 @@ export default function ordersDetails() {
maxHeight: '67vh',
overflow: 'auto',
'&::-webkit-scrollbar': {
width: '5px', // Width of vertical scrollbar
height: '2px' // Height of horizontal scrollbar
width: '12px', // Width of vertical scrollbar
height: '14px', // Height of horizontal scrollbar,
borderRadius: 10
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#65387A' // Color of the scrollbar thumb
@@ -686,17 +552,27 @@ export default function ordersDetails() {
}}
>
<TableRow>
{headCells.map((column) => (
<TableCell sx={{ position: 'sticky !important' }} key={column.id}>
{column.label}
</TableCell>
))}
<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' }}>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' }}> 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' }}> Kms </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Charges </TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredOrders.length == 0 && (
<>
<TableCell colSpan={13}>
<TableCell colSpan={15}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
<Empty />
</Stack>
@@ -708,36 +584,16 @@ export default function ordersDetails() {
.map((row, index) => {
if (typeof row === 'number') return null;
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
// console.log('rows.length', rows.length);
console.log('filteredOrders', filteredOrders);
return (
filteredOrders.length !== 0 && (
<TableRow
hover
// onClick={(event) =>
// handleClick(event, row.name)
// }
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.name}
selected={isItemSelected}
>
{/* <TableCell sx={{ pl: 3 }} padding="checkbox">
<Checkbox
color="primary"
checked={isItemSelected}
inputProps={{
"aria-labelledby": labelId,
}}
/>
</TableCell> */}
<TableRow hover role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={row.name} selected={isItemSelected}>
<TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>
{/* <TableCell
sx={{ width: '10px', cursor: 'pointer' }}
onClick={() => {
console.log('row', row);
setMapTenant(row);
setMapOpen(true);
getdeliverylogs(row.deliveryid);
}}
>
@@ -791,51 +647,31 @@ export default function ordersDetails() {
</Stack>
</TableCell>
<TableCell align="left">
{row.orderstatus == '' ? (
<Stack direction="row">
{row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
{row.orderstatus === 'accepted' && (
<Chip
label="Accepted"
size="small"
sx={{
bgcolor: `theme.palette.chip.accept`,
color: 'white'
}}
/>
)}
{row.orderstatus === 'arrived' && (
<Chip
label="Arrived"
size="small"
sx={{
bgcolor: theme.palette.chip.arrive,
color: 'white'
}}
/>
)}
{row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
{row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}
<Stack direction="row">
{row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" sx={{ minWidth: 80 }} />}
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" sx={{ minWidth: 80 }} />}
{row.orderstatus === 'accepted' && (
<Chip
label="Accepted"
size="small"
sx={{ bgcolor: theme.palette.chip.accept, color: 'white', minWidth: 80 }}
/>
)}
{row.orderstatus === 'arrived' && (
<Chip
label="Arrived"
size="small"
sx={{ bgcolor: theme.palette.chip.arrive, color: 'white', minWidth: 80 }}
/>
)}
{row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" sx={{ minWidth: 80 }} />}
{row.orderstatus === 'active' && <Chip label="Active" color="info" size="small" sx={{ minWidth: 80 }} />}
{row.orderstatus === 'delivered' && (
<Chip label="Delivered" color="success" size="small" sx={{ minWidth: 80 }} />
)}
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
</Stack>
) : (
<Stack direction="row">
{row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
{row.orderstatus === 'accepted' && (
<Chip label="Accepted" size="small" sx={{ bgcolor: '#01579b', color: 'white' }} />
)}
{row.orderstatus === 'arrived' && (
<Chip label="Arrived" size="small" sx={{ bgcolor: '#009688', color: 'white' }} />
)}
{row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
{row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
</Stack>
)}
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" sx={{ minWidth: 80 }} />}
</Stack>
</TableCell>
<TableCell align="left">
<Typography variant="h5" sx={{ fontSize: '11px' }} display="block">
@@ -916,12 +752,10 @@ export default function ordersDetails() {
<Tooltip title="Actual KMS">
<Chip
label={
row.orderstatus === 'cancelled' ||
row.orderstatus === 'cancelled' ||
row.actualkms == '' ||
row.actualkms == null
? parseInt(0).toFixed(1)
: row.actualkms
row.deliverystatus === 'cancelled' || row.actualkms === '' || row.actualkms === 'null'
? '0.0'
: // : parseFloat(row.actualkms).toFixed(2)
row.actualkms
}
size="small"
color="success"
@@ -960,17 +794,9 @@ export default function ordersDetails() {
</Table>
</TableContainer>
<Divider />
{/* table pagination */}
{/* <TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/> */}
</MainCard>
{/* ========================================= || bottom row || ========================================= */}
<Stack
direction={'row'}
sx={{
@@ -991,9 +817,6 @@ export default function ordersDetails() {
<Tooltip title="Total Charges">
<Chip label={formatNumberToRupees(totalCharge)} size="medium" color="error" variant="filled" sx={{ ml: 5, mr: 1.5 }} />
</Tooltip>
{/* <Typography variant="h5" sx={{ ml: 5, mr: 1.5 }}>
{formatNumberToRupees(total)}
</Typography> */}
</div>
<div
style={{
@@ -1009,6 +832,8 @@ export default function ordersDetails() {
</Tooltip>
</div>
</Stack>
{/* ========================================= || Date dialog || ========================================= */}
<Dialog open={open}>
<DialogTitle align="left">
<Typography variant="h4">Select Filter Options</Typography>
@@ -1093,40 +918,25 @@ export default function ordersDetails() {
</Stack>
</Dialog>
{/* ========================================= || MapWithRoute || ========================================= */}
{/* <Dialog
open={open1}
<Dialog
open={mapOpen}
onClose={() => {
setOpen1(false);
setMapOpen(false);
}}
maxWidth={'lg'}
fullWidth
>
<DialogTitle
sx={{
// bgcolor: theme.palette.primary.main,
// color: 'white',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}
>
<Typography variant="h4">Rider Route</Typography>
<Button
variant="outlined"
onClick={() => {
setOpen1(false);
}}
>
Close
</Button>
</DialogTitle>
{riderCoordinates && (
<div>
<MapWithRoute coordinates={riderCoordinates} additionalProps={{ riderStart, riderEnd }} />
<MapWithRoute
coordinates={riderCoordinates}
additionalProps={{ riderStart, riderEnd }}
order={mapTenant}
setMapOpen={setMapOpen}
/>
</div>
)}
</Dialog> */}
</Dialog>
</>
);
}

12
src/routes/MainRoutes.js
View File

@@ -48,10 +48,6 @@ const MainRoutes = {
// </AuthGuard>
),
children: [
// {
// path: 'sample-page',
// element: <SamplePage />
// },
{
path: 'dashboard',
element: <Dashboard />
@@ -60,10 +56,6 @@ const MainRoutes = {
path: 'customers',
element: <Customers />
},
// {
// path: 'clients1',
// element: <Customers />
// },
{
path: 'orders',
element: <Orders />
@@ -72,10 +64,6 @@ const MainRoutes = {
path: 'accountsettings',
element: <Accountsettings />
},
// {
// path: 'orders/create1',
// element: <Createorder />
// },
{
path: 'orders/create',
element: <Createorder1 />