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

reports update

Browse Source
This commit is contained in:
joshikannan
2025-11-14 18:42:26 +05:30
parent b27c27a444
commit 12df2e9dc4
15 changed files with 2159 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/config.js
View File

@@ -5,7 +5,7 @@ export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';
// export const APP_DEFAULT_PATH = '/sample-page';
export const APP_DEFAULT_PATH = '/orders';
export const APP_DEFAULT_PATH = '/nearle/orders';
export const HORIZONTAL_MAX_ITEM = 6;
export const DRAWER_WIDTH = 260;

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

@@ -156,10 +156,10 @@ const HeaderContent = () => {
}}
>
<ListItemButton
selected={location.pathname === '/orders/create'}
selected={location.pathname === 'nearle/orders/create'}
onClick={() => {
// console.log(const location = useLocation();)
navigate('/orders/create');
navigate('nearle/orders/create');
handleClickAway();
}}
>
@@ -175,10 +175,10 @@ const HeaderContent = () => {
/>
</ListItemButton>
<ListItemButton
selected={location.pathname === '/orders/create'}
selected={location.pathname === 'nearle/orders/create'}
onClick={() => {
// console.log(const location = useLocation();)
navigate('/orders/createorders');
navigate('nearle/orders/createorders');
handleClickAway();
}}
>
@@ -201,7 +201,7 @@ const HeaderContent = () => {
}} >
<ListItemText
primary={
<Grid container> 
<Grid container>
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
<CustomerServiceOutlined />
</ListItemIcon>
@@ -212,9 +212,9 @@ const HeaderContent = () => {
/>
</ListItemButton> */}
<ListItemButton
selected={location.pathname === '/customers/create'}
selected={location.pathname === 'nearle/customers/create'}
onClick={() => {
navigate('/customers/create');
navigate('nearle/customers/create');
handleClickAway();
}}
>

8
src/menu-items/index.js
View File

@@ -1,13 +1,13 @@
// project import
// import nearle from './nearle';
import other from './other';
import nearle from './nearle';
// import other from './other';
// ==============================|| MENU ITEMS ||============================== //
const menuItems = {
items: [
other
// nearle
// other,
nearle
]
};

29
src/menu-items/nearle.js
View File

@@ -4,6 +4,7 @@ import { AiOutlineBarChart } from 'react-icons/ai';
import { AiOutlineDashboard } from 'react-icons/ai';
import { TbListDetails } from 'react-icons/tb';
import { LiaFileInvoiceSolid } from 'react-icons/lia';
import DirectionsBikeOutlinedIcon from '@mui/icons-material/DirectionsBikeOutlined';
// assets
import {
@@ -21,6 +22,7 @@ import {
UserOutlined,
SettingOutlined
} from '@ant-design/icons';
import { Path } from 'leaflet';
// icons
const icons = {
@@ -66,20 +68,41 @@ const nearle = {
type: 'collapse',
icon: AiOutlineBarChart,
children: [
{
id: 'OrderSummary',
title: <FormattedMessage id="OrderSummary" />,
type: 'item',
url: '/nearle/reports/ordersummary',
icon: TbListDetails
},
{
id: 'OrdersDetails',
title: <FormattedMessage id="OrdersDetails" />,
type: 'item',
url: '/nearle/ordersdetails',
icon: TbListDetails
url: '/nearle/reports/ordersdetails',
icon: AiOutlineDashboard
},
{
id: 'RiderSummary',
title: <FormattedMessage id="RiderSummary" />,
type: 'item',
url: '/nearle/reports/ridersummary',
icon: DirectionsBikeOutlinedIcon
}
// {
// id: 'RiderLogs',
// title: <FormattedMessage id="RiderLogs" />,
// type: 'item',
// url: '/nearle/reports/riderlogs',
// icon: DirectionsBikeOutlinedIcon
// }
]
},
{
id: 'invoice',
title: <FormattedMessage id="Invoice" />,
type: 'item',
url: '/nearle/invoice',
url: 'nearle/invoice',
icon: LiaFileInvoiceSolid
}
]

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

@@ -57,14 +57,14 @@ const other = {
id: 'orders',
title: <FormattedMessage id="Orders" />,
type: 'item',
url: '/orders',
url: 'nearle/orders',
icon: AiOutlineDashboard
},
{
id: 'customers',
title: <FormattedMessage id="Customers" />,
type: 'item',
url: '/customers',
url: 'nearle/customers',
icon: icons.UserOutlined
},
{
@@ -73,12 +73,33 @@ const other = {
type: 'collapse',
icon: AiOutlineBarChart,
children: [
{
id: 'OrderSummary',
title: <FormattedMessage id="OrderSummary" />,
type: 'item',
url: 'reports/ordersummary',
icon: TbListDetails
},
{
id: 'OrdersDetails',
title: <FormattedMessage id="OrdersDetails" />,
type: 'item',
url: 'reports/ordersdetails',
icon: TbListDetails
},
{
id: 'RiderSummary',
title: <FormattedMessage id="RiderSummary" />,
type: 'item',
url: 'reports/ridersummary',
icon: TbListDetails
},
{
id: 'RiderLogs',
title: <FormattedMessage id="RiderLogs" />,
type: 'item',
url: 'reports/riderlogs',
icon: TbListDetails
}
]
},

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

@@ -76,16 +76,25 @@ export const fetchCustomersListBySearch = async ({ queryKey }) => {
// ==============================|| fetchOrdersSummary (orders summary)||============================== //
export const fetchOrdersSummary = async ({ queryKey }) => {
console.log('queryKey for fetchOrdersSummary', queryKey);
const [id, startdate, enddate] = queryKey;
const [startdate, enddate] = queryKey;
const response = await axios.get(
id == -1
? `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}`
: `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?partnerid=${id}&fromdate=${startdate}&todate=${enddate}`
`${process.env.REACT_APP_URL}/deliveries/getreportsummary/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}`
);
console.log('fetchOrdersSummary', response.data.details);
return response.data.details;
};
// ==============================|| getreportlocationsummary (orders summary)||============================== //
export const getreportlocationsummary = async ({ queryKey }) => {
console.log('queryKey for getreportlocationsummary', queryKey);
const [startdate, enddate, locationId] = queryKey;
const response = await axios.get(
`${process.env.REACT_APP_URL}/deliveries/getreportlocationsummary/?tenantid=${tenid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}`
);
console.log('getreportlocationsummary', response.data.details);
return response.data.details;
};
// ==============================|| fetchLocations (orders summary))||============================== //
export const fetchLocations = async () => {
@@ -100,9 +109,9 @@ export const fetchLocations = async () => {
};
// ==============================|| fetchDeliverySummary (orders summary)||============================== //
export const fetchDeliverySummary = async ({ queryKey }) => {
const [, startdate, enddate, currentStatus] = queryKey;
const [, startdate, enddate, currentStatus, locationId] = queryKey;
const response = await axios.get(
`${process.env.REACT_APP_URL}/deliveries/deliverysummary?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}`
`${process.env.REACT_APP_URL}/deliveries/deliverysummary?tenantid=${tenid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}`
);
console.log('fetchDeliverySummary', response.data.details);
return response.data.details;
@@ -137,13 +146,15 @@ export const fetchRidersSummary = async ({ queryKey }) => {
// ==============================|| fetchorderdetails (orders detail)||============================== //
export const fetchorderdetails = async ({ pageParam = 0, queryKey }) => {
const [startdate, enddate, currentStatus] = queryKey;
const [startdate, enddate, currentStatus, locationId] = queryKey;
const limit = 10;
const pageno = pageParam + 1; // ✅ increment page by 1 each time
const response = await axios.get(
`${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}&status=${
`${
process.env.REACT_APP_URL
}/deliveries/getdeliveries/?tenantid=${tenid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}&status=${
currentStatus === 'All' ? '' : currentStatus
}&pageno=${pageno}&pagesize=${limit}`
);

10
src/pages/nearle/dashboard.js
View File

@@ -1,10 +0,0 @@
const Dashboard=()=>{
return <>
<h1>Dashboard</h1>
</>
}
export default Dashboard;

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

@@ -47,7 +47,7 @@ const Login = () => {
localStorage.getItem('authname')
// || localStorage.getItem("appuserid")
) {
navigate('/orders');
navigate('/nearle/orders');
}
// console.log(alertmessage)
@@ -144,7 +144,7 @@ const Login = () => {
localStorage.setItem('moduleid', res.data.details.moduleid);
localStorage.setItem('userid', res.data.details.userid);
navigate('/orders');
navigate('/nearle/orders');
setSubmitting(false);
} else {
opentoast('Login Error');

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

@@ -1,6 +1,6 @@
import React from 'react';
import Loader from 'components/Loader';
import { useEffect, useState, useRef, Fragment } from 'react';
import { useEffect, useState, Fragment } from 'react';
import { useTheme } from '@mui/material/styles';
import MainCard from 'components/MainCard';
import axios from 'axios';

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

@@ -9,6 +9,8 @@ dayjs.extend(utc);
import axios from 'axios';
import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
import { useTheme } from '@mui/material/styles';
import MyLocationIcon from '@mui/icons-material/MyLocation';
import {
Avatar,
Box,
@@ -33,8 +35,8 @@ import {
OutlinedInput,
InputAdornment,
Skeleton,
TextField,
Autocomplete
Autocomplete,
TextField
} from '@mui/material';
import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
import ClearIcon from '@mui/icons-material/Clear';
@@ -46,12 +48,13 @@ import TableSortLabel from '@mui/material/TableSortLabel';
import { visuallyHidden } from '@mui/utils';
import Loader from 'components/Loader';
import { FilterList } from '@mui/icons-material';
import { Outlet } from 'react-router';
const Orders = () => {
const tid = localStorage.getItem('tenantid');
const tenId = localStorage.getItem('tenantid');
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const [pageCountObj, setPageCountObj] = React.useState({});
const [pageCount, setPageCount] = React.useState();
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
@@ -59,7 +62,7 @@ const Orders = () => {
const [percentage2, setPercentage2] = useState('0');
const [percentage3, setPercentage3] = useState('0');
const [percentage4, setPercentage4] = useState('0');
let [orderarr, setArr] = useState([]);
const [tenantLocations, setTenantlocations] = useState([]);
const [coveredorders, setCoveredorders] = useState('');
const [uncoveredorders, setUncoveredorders] = useState('');
const [cancelled, setCancelled] = useState('');
@@ -70,7 +73,6 @@ const Orders = () => {
let [rows, setRows] = useState([]);
const [tabvalue, setTabvalue] = useState(0);
const [open, setOpen] = useState(false);
const [tabstatus1, setTabstatus1] = useState('Today');
const [datestatus, setDatestatus] = useState('Today');
const [searchword, setSearchword] = useState('');
const [currentStatus, setCurrentStatus] = useState('created');
@@ -78,6 +80,10 @@ const Orders = () => {
const [pendingLenght, setPendingLenght] = useState();
const [deliveredlenght, setDeliveredlenght] = useState();
const [cancelledLenght, setCancelledLenght] = useState();
const [cancelOpen, setCancelOpen] = useState(false);
const [orderheaderid, setOrderheaderid] = useState('');
const [locationId, setLocationId] = useState(0);
const [locoName, setLocoName] = useState('Select Location');
const handleChangetab = (e, i) => {
setTabvalue(i);
@@ -85,22 +91,18 @@ const Orders = () => {
if (i === 0) {
setTabstatus('Created');
setCurrentStatus('created');
setPageCount(pageCountObj.created);
}
if (i === 1) {
setTabstatus('Pending');
setCurrentStatus('pending');
setPageCount(pageCountObj.pending);
}
if (i === 2) {
setTabstatus('Delivered');
setCurrentStatus('delivered');
setPageCount(pageCountObj.delivered);
}
if (i === 3) {
setTabstatus('Cancelled');
setCurrentStatus('cancelled');
setPageCount(pageCountObj.cancelled);
}
console.log(i);
};
@@ -131,20 +133,39 @@ const Orders = () => {
};
}, []);
useEffect(() => {
var day = 60 * 60 * 24 * 1000;
var startDate = new Date();
if (tabstatus1 === 'Tomorrow') {
setEnddate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
setStartdate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
} else if (tabstatus1 === 'Today') {
setEnddate(new Date().toISOString().substring(0, 10));
setStartdate(new Date().toISOString().substring(0, 10));
} else if (tabstatus1 === 'Week') {
setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10));
setEnddate(new Date().toISOString().substring(0, 10));
}
}, [tabstatus1]);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const cancelorder = async () => {
await axios
.put(`${process.env.REACT_APP_URL}/orders/updateorder`, {
orderheaderid: orderheaderid,
orderstatus: 'cancelled',
cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss')
})
.then((res) => {
console.log(res);
if (res.data.status) {
enqueueSnackbar('Order Cancelled Successfully', {
variant: 'success',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
});
fetchtablecovered();
fetchorderscount();
setCancelOpen(false);
}
})
.catch((err) => {
console.log(err);
});
};
const fetchtablecovered = async () => {
try {
@@ -152,12 +173,11 @@ const Orders = () => {
.get(
`${
process.env.REACT_APP_URL
}/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
}/orders/tenant/getorders/?tenantid=${tid}&locationid=${locationId}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
page + 1
}&pagesize=${rowsPerPage}&keyword=${searchword}`
)
.then((res) => {
setArr(res.data.details);
setRows(res.data.details);
})
.catch((err) => {
@@ -169,7 +189,7 @@ const Orders = () => {
};
useEffect(() => {
fetchtablecovered();
}, [tabstatus, startdate, enddate, page, rowsPerPage, searchword]);
}, [tabstatus, startdate, enddate, page, rowsPerPage, searchword, locationId]);
const fetchpercentage = async () => {
setLoading(true);
@@ -205,7 +225,9 @@ const Orders = () => {
setLoading(true);
try {
await axios
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`)
.get(
`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}`
)
.then((res) => {
console.log('fetchorderscount', res.data.details);
@@ -230,379 +252,34 @@ const Orders = () => {
};
useEffect(() => {
fetchorderscount();
}, [tabvalue]);
const headCells = [
{
id: 'sno',
disablePadding: true,
label: 'S NO'
},
{
id: 'orderid',
numeric: false,
disablePadding: false,
label: 'ORDER ID'
},
{
id: 'eventname',
disablePadding: false,
label: 'Pickup'
},
{
id: 'eventname4',
disablePadding: false,
label: 'Delivery'
},
{
id: 'itemcount',
disablePadding: false,
label: 'NOTES'
},
{
id: 'orderstatus',
disablePadding: false,
label: 'STATUS'
},
{
id: 'action',
disablePadding: false,
label: 'ACTION'
}, [tabvalue, locationId]);
// ============================================= || gettenantlocations (branches) || =============================================
const gettenantlocations = async (id) => {
try {
const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`);
console.log('gettenantlocations', res.data.details);
if (res.data.details.length == 1) {
setIsLocation(true);
setTenantlocations(res.data.details);
setPickCust(res.data.details[0]);
} else {
setTenantlocations(res.data.details);
}
} catch (err) {
console.log('gettenantlocations', err);
}
];
function EnhancedTableHead(props) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? 'right' : 'left'}
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
function EnhancedTable() {
const [open, setOpen] = useState(false);
const [orderheaderid, setOrderheaderid] = useState('');
const cancelorder = async () => {
await axios
.put(`${process.env.REACT_APP_URL}/orders/updateorder`, {
orderheaderid: orderheaderid,
orderstatus: 'cancelled',
cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss')
})
.then((res) => {
console.log(res);
if (res.data.status) {
enqueueSnackbar('Order Cancelled Successfully', {
variant: 'success',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
});
handleClose(true);
fetchtablecovered();
fetchorderscount();
}
})
.catch((err) => {
console.log(err);
});
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const handleClose = () => {
setOpen(false);
setOrderheaderid('');
};
function AlertCustomerDelete({
// title,
open,
handleClose
}) {
// const [deletepassword, setDeletepassword] = useState('');
return (
<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' }}>
<DeleteFilled />
</Avatar>
{/* <Grid >
<Chip label={orderid.slice(4)} variant="combined" color='warning' size='small' />
</Grid> */}
<Stack spacing={2}>
<Typography variant="h4" align="center">
Are you sure you want to cancel this order?
</Typography>
{/* <Typography variant="h4" align="center">
Please type in the order number to confirm.
</Typography> */}
</Stack>
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
<Button
fullWidth
color="error"
variant="contained"
onClick={() => {
// if (deletepassword === orderid.slice(4)) {
cancelorder();
// }
}}
autoFocus
>
Yes, Cancel
</Button>
<Button
fullWidth
onClick={() => {
handleClose(false);
}}
color="secondary"
variant="outlined"
>
No
</Button>
</Stack>
</Stack>
</DialogContent>
</Dialog>
);
}
return (
<Box sx={{ width: '100%' }}>
<AlertCustomerDelete open={open} handleClose={handleClose} />
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
<Table sx={{ minWidth: 750 }} aria-label="collapsible table" size={'medium'}>
<EnhancedTableHead />
{loading && (
<>
<TableBody>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
<TableRow key={index}>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
<TableBody>
{rows?.length == 0 && (
<>
<TableCell colSpan={7}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
<Empty />
</Stack>
</TableCell>
</>
)}
{rows?.map((row, index) => {
return (
<>
<TableRow
key={index}
sx={{
cursor: 'pointer'
}}
>
<TableCell padding="none">
<Typography> {page * rowsPerPage + index + 1}</Typography>
</TableCell>
<TableCell align="left">
<Typography variant="body2" noWrap>
{row.orderid}
</Typography>
<Typography noWrap sx={{ fontSize: '11px' }}>
{dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
</Typography>
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
{dayjs(row.deliverydate).utc().format('hh:mm A')}
</Typography>
</TableCell>
<TableCell align="left">
<Stack direction={'row'} spacing={1}>
<Avatar
alt=""
size="sm"
sx={{
width: '25px',
height: '25px'
}}
></Avatar>
<Stack direction="column">
<Typography variant="caption">{row.pickupcustomer}</Typography>
<Typography variant="caption" color="textSecondary">
{row.pickupcontactno}
</Typography>
<Tooltip title={row.pickupaddress}>
<Typography variant="caption" color="textSecondary">
{row.pickupsuburb || row.pickupaddress.slice(0, 20)}
</Typography>
</Tooltip>
</Stack>
</Stack>
</TableCell>
<TableCell align="left">
<Stack direction={'row'} spacing={1}>
<Avatar
alt=""
size="sm"
sx={{
width: '25px',
height: '25px'
}}
></Avatar>
<Stack direction="column">
<Typography variant="caption">{row.deliverycustomer}</Typography>
<Typography variant="caption" color="textSecondary">
{row.deliverycontactno}
</Typography>
<Tooltip title={row.deliveryaddress}>
<Typography variant="caption" color="textSecondary">
{/* {row.pickupaddress.slice(0, 20)} */}
{row.deliverysuburb || row.deliveryaddress.slice(0, 20)}
</Typography>
</Tooltip>
</Stack>
</Stack>
</TableCell>
<TableCell align="left">{row.ordernotes}</TableCell>
{/* <TableCell align="left"><Chip label={row.itemcount} color="primary" variant="light" size="small" /></TableCell> */}
<TableCell align="left">
<Stack direction="row">
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
{row.orderstatus === 'modified' && <Chip label="Confirmed" color="success" size="small" />}
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
{row.orderstatus === 'delivered' && <Chip label="Completed" color="primary" size="small" />}
{row.orderstatus === 'processing' && <Chip label="Processing" color="primary" size="small" />}
{row.orderstatus === 'ready' && <Chip label="Accepted" color="info" size="small" />}
{row.orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}
{row.orderstatus === 'active' && <Chip label="Picked" color="info" size="small" />}
{row.orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
{row.orderstatus === 'created' && <Chip label="Created" color="secondary" size="small" />}
</Stack>
</TableCell>
<TableCell>
{row.orderstatus == 'created' && (
<>
<Tooltip title="Cancel">
<IconButton
// disabled={(row.orderstatus != 'created')}
onClick={(e) => {
e.stopPropagation();
setOrderheaderid(row.orderheaderid);
setOpen(true);
}}
>
<CloseOutlined
style={{
color: theme.palette.error.main
}}
// twoToneColor={theme.palette.primary.main}
/>
</IconButton>
</Tooltip>
</>
)}
</TableCell>
</TableRow>
</>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 50, 100]}
component="div"
count={pageCount || 0}
rowsPerPage={rowsPerPage || 0}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Box>
);
}
};
useEffect(() => {
gettenantlocations(tenId);
}, []);
return (
<>
{loading && <Loader />}
<Outlet />
<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
@@ -639,7 +316,6 @@ const Orders = () => {
/>
</Grid>
</Grid>
<Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} sx={{ my: 2 }}>
{startdate && enddate && (
<Stack direction="row" spacing={2}>
@@ -657,20 +333,62 @@ const Orders = () => {
/>
</Stack>
)}
<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 display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} 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={'Select Location'} value={locoName} color="primary" />}
sx={{ width: '350px' }}
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>
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{ color: 'text.primary', bgcolor: 'grey.200' }}
aria-haspopup="true"
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip>
</Stack>
</Stack>
<Grid item xs={12}>
<Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
<Stack
@@ -697,10 +415,9 @@ const Orders = () => {
/>
</Tabs>
<Stack>
<FormControl sx={{ width: 250, display: { xs: 'none', md: 'flex' } }}>
<FormControl sx={{ width: 250 }}>
<OutlinedInput
inputRef={textFieldRef}
size="small"
id="header-search"
aria-describedby="header-search-text"
inputProps={{
@@ -737,11 +454,238 @@ const Orders = () => {
</Stack>
<Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
<EnhancedTable />
<Box sx={{ width: '100%' }}>
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
<Table sx={{ minWidth: 750 }} aria-label="collapsible table" size={'medium'}>
<TableHead>
<TableRow>
<TableCell> S.No</TableCell>
<TableCell> Orders</TableCell>
<TableCell> Pickup</TableCell>
<TableCell>Drop </TableCell>
<TableCell> Notes</TableCell>
<TableCell>Status </TableCell>
<TableCell>Action </TableCell>
</TableRow>
</TableHead>
{loading && (
<>
<TableBody>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
<TableRow key={index}>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
<TableCell>
<Skeleton animation="wave" />
</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
<TableBody>
{rows?.length == 0 && (
<>
<TableCell colSpan={7}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
<Empty />
</Stack>
</TableCell>
</>
)}
{rows?.map((row, index) => {
return (
<>
<TableRow
key={index}
sx={{
cursor: 'pointer'
}}
>
<TableCell padding="none">
<Typography> {page * rowsPerPage + index + 1}</Typography>
</TableCell>
<TableCell align="left">
<Typography variant="body2" noWrap>
{row.orderid}
</Typography>
<Typography noWrap sx={{ fontSize: '11px' }}>
{dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
</Typography>
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
{dayjs(row.deliverydate).utc().format('hh:mm A')}
</Typography>
</TableCell>
<TableCell align="left">
<Stack direction={'row'} spacing={1}>
<Avatar
alt=""
size="sm"
sx={{
width: '25px',
height: '25px'
}}
></Avatar>
<Stack direction="column">
<Typography variant="caption">{row.pickupcustomer}</Typography>
<Typography variant="caption" color="textSecondary">
{row.pickupcontactno}
</Typography>
<Tooltip title={row.pickupaddress}>
<Typography variant="caption" color="textSecondary">
{row.pickupsuburb || row.pickupaddress.slice(0, 20)}
</Typography>
</Tooltip>
</Stack>
</Stack>
</TableCell>
<TableCell align="left">
<Stack direction={'row'} spacing={1}>
<Avatar
alt=""
size="sm"
sx={{
width: '25px',
height: '25px'
}}
></Avatar>
<Stack direction="column">
<Typography variant="caption">{row.deliverycustomer}</Typography>
<Typography variant="caption" color="textSecondary">
{row.deliverycontactno}
</Typography>
<Tooltip title={row.deliveryaddress}>
<Typography variant="caption" color="textSecondary">
{/* {row.pickupaddress.slice(0, 20)} */}
{row.deliverysuburb || row.deliveryaddress.slice(0, 20)}
</Typography>
</Tooltip>
</Stack>
</Stack>
</TableCell>
<TableCell align="left">{row.ordernotes}</TableCell>
{/* <TableCell align="left"><Chip label={row.itemcount} color="primary" variant="light" size="small" /></TableCell> */}
<TableCell align="left">
<Stack direction="row">
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
{row.orderstatus === 'modified' && <Chip label="Confirmed" color="success" size="small" />}
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
{row.orderstatus === 'delivered' && <Chip label="Completed" color="primary" size="small" />}
{row.orderstatus === 'processing' && <Chip label="Processing" color="primary" size="small" />}
{row.orderstatus === 'ready' && <Chip label="Accepted" color="info" size="small" />}
{row.orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}
{row.orderstatus === 'active' && <Chip label="Picked" color="info" size="small" />}
{row.orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
{row.orderstatus === 'created' && <Chip label="Created" color="secondary" size="small" />}
</Stack>
</TableCell>
<TableCell>
{row.orderstatus == 'created' && (
<>
<Tooltip title="Cancel">
<IconButton
onClick={(e) => {
e.stopPropagation();
setOrderheaderid(row.orderheaderid);
setCancelOpen(true);
}}
>
<CloseOutlined
style={{
color: theme.palette.error.main
}}
// twoToneColor={theme.palette.primary.main}
/>
</IconButton>
</Tooltip>
</>
)}
</TableCell>
</TableRow>
</>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 50, 100]}
component="div"
count={pageCount || 0}
rowsPerPage={rowsPerPage || 0}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Box>
</Box>
</Box>
</Grid>
{/* ============================================== || cancel order || ============================================== */}
<Dialog open={cancelOpen} onClose={() => setCancelOpen(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' }}>
<DeleteFilled />
</Avatar>
<Stack spacing={2}>
<Typography variant="h4" align="center">
Are you sure you want to cancel this order?
</Typography>
</Stack>
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
<Button
fullWidth
color="error"
variant="contained"
onClick={() => {
cancelorder();
}}
autoFocus
>
Yes, Cancel
</Button>
<Button
fullWidth
onClick={() => {
setCancelOpen(false);
}}
color="secondary"
variant="outlined"
>
No
</Button>
</Stack>
</Stack>
</DialogContent>
</Dialog>
{/* ============================================== || Date filter || ============================================== */}
<Dialog open={open}>
<DialogTitle align="left">
<Typography variant="h4">Select Filter Options</Typography>

778
src/pages/nearle/reports/orderSummary.js Normal file
View File

@@ -0,0 +1,778 @@
import { React, useState, useEffect, useRef, Fragment } from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { Empty } from 'antd';
import TaskAltIcon from '@mui/icons-material/TaskAlt';
import MyLocationIcon from '@mui/icons-material/MyLocation';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
// material-ui
import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Dialog,
DialogTitle,
Typography,
DialogContent,
Stack,
Button,
IconButton,
Tooltip,
Chip,
Autocomplete,
TextField,
FormControl,
OutlinedInput,
InputAdornment,
Collapse
} from '@mui/material';
import ClearIcon from '@mui/icons-material/Clear';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import { SearchOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import { DateRangePicker } from 'mui-daterange-picker';
import {
addDays,
addMonths,
addWeeks,
// addYears,
endOfMonth,
endOfWeek,
// endOfYear,
startOfMonth,
startOfWeek
// startOfYear,
} from 'date-fns';
import { FilterList } from '@mui/icons-material';
// project imports
import MainCard from 'components/MainCard';
import Loader from 'components/Loader';
import { useTheme } from '@mui/material/styles';
import TitleCard from '../titleCard';
import { getreportlocationsummary } from '../api/api';
function formatNumberToRupees(value) {
return new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR',
minimumFractionDigits: 2
}).format(value);
}
// ==============================|| MUI TABLE - ENHANCED ||============================== //
export default function OrdersReport() {
// const [rows, setRows] = useState([]);
const theme = useTheme();
const bgcolor0 = theme.palette.primary.lighter;
const bgcolor1 = '#ffcdd2';
const bgcolor2 = '#f8bbd0';
const tenantid = localStorage.getItem('tenantid');
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
const [open, setOpen] = useState(false);
const [openRow, setOpenRow] = useState(null); // Initially no row is open
const [datestatus, setDatestatus] = useState('Today');
const [total, settotal] = useState(0);
const [totalOrders, settotalOrders] = useState(0);
const [totalOrderPend, setTotalOrderPend] = useState(0);
const [totalOrderComplete, setTotalOrderComplete] = useState(0);
const [totalOrderCancel, setTotalOrderCancel] = useState(0);
const [totalDeliPend, setTotalDeliPend] = useState(0);
const [totalDeliComplete, setTotalDeliComplete] = useState(0);
const [totalDeliCancel, setTotalDeliCancel] = useState(0);
const [searchword, setSearchword] = useState('');
const textFieldRef = useRef(null);
const [ridersdata, setRidersdata] = useState(null);
const [tenantLocations, setTenantlocations] = useState([]);
const [selectedLocation, setSelectedLocation] = useState(null);
const [locationId, setLocationId] = useState(0);
useEffect(() => {
console.log('openRow', openRow);
}, [openRow]);
/* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
useEffect(() => {
const handleKeyPress = (event) => {
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
textFieldRef.current.focus();
}
if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
// Remove focus from the TextField
textFieldRef.current.blur();
}
};
document.addEventListener('keydown', handleKeyPress);
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, []);
// ============================================= || gettenantlocations (branches) || =============================================
const gettenantlocations = async () => {
try {
const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations?tenantid=${tenantid}`);
console.log('gettenantlocations', res.data.details);
setTenantlocations(res.data.details);
} catch (err) {
console.log('gettenantlocations', err);
}
};
useEffect(() => {
gettenantlocations();
}, []);
// ==============================|| fetchOrdersSummary (orders summary)||============================== //
const {
isLoading: isLoadingReports,
isError: isErrorReports, //true or false
data: rows,
error: reportsError
} = useQuery({
queryKey: [startdate, enddate, locationId],
queryFn: getreportlocationsummary
});
// ==============================|| getriderlocationsummary by tenid (orders summary)||============================== //
const getriderlocationsummary = async (id) => {
try {
const riderRes = await axios.get(
`${process.env.REACT_APP_URL}/deliveries/getriderlocationsummary/?&tenantid=${tenantid}&locationid=${id}&fromdate=${startdate}&todate=${enddate}`
);
console.log('riderRes', riderRes.data.details);
setRidersdata(riderRes.data.details);
} catch (error) {
console.log('riderRes', error);
}
};
// ==============================|| calculate||============================== //
const calculate = () => {
let calculatedTotal = 0;
let ordersTotal = 0;
let Orderpending = 0;
let OrderComplete = 0;
let OrderCancel = 0;
let deliverypending = 0;
let deliverycomplete = 0;
let deliverycancel = 0;
rows &&
rows.forEach((row) => {
calculatedTotal += row.charges;
ordersTotal += row.totalorders;
Orderpending += row.Orderspending;
OrderComplete += row.orderscompleted;
OrderCancel += row.orderscancelled;
deliverypending += row.deliveriespending;
deliverycomplete += row.deliveriescompleted;
deliverycancel += row.deliveriescancelled;
});
// Update the state after the calculation is done
settotal(calculatedTotal);
settotalOrders(ordersTotal);
setTotalOrderPend(Orderpending);
setTotalOrderComplete(OrderComplete);
setTotalOrderCancel(OrderCancel);
setTotalDeliPend(deliverypending);
setTotalDeliComplete(deliverycomplete);
setTotalDeliCancel(deliverycancel);
};
useEffect(() => {
calculate();
}, [rows]);
// if (isLoadingReports) return <Loader />;
if (isErrorReports) return 'An error has occurred:(isErrorReports) ' + reportsError.message;
return (
<>
{isLoadingReports && <Loader />}
<TitleCard title="Orders Summary" />{' '}
<MainCard
content={false}
title={
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} flexWrap={'wrap'} gap={1}>
<Stack>
{startdate && enddate && (
<Stack direction="row" spacing={2} flexWrap={'wrap'} gap={1}>
<Chip label={`Orders-${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>
<Stack
sx={{
display: 'flex',
flexDirection: 'row',
gap: 2,
flexWrap: 'wrap',
flexGrow: 1,
justifyContent: 'right'
}}
>
<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={
<IconButton
sx={{ visibility: searchword ? 'visible' : 'hidden' }}
onClick={() => {
setSearchword('');
}}
>
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
</IconButton>
}
/>
</FormControl>
<Stack>
{tenantLocations.length == 1 ? (
<TextField
variant="outlined"
fullWidth
label={'Business Location'}
value={tenantLocations[0].locationname}
focused
sx={{ minWidth: 250 }}
InputProps={{
style: { color: theme.palette.primary.main },
startAdornment: (
<InputAdornment position="start">
<MyLocationIcon color="primary" />
</InputAdornment>
)
}}
/>
) : (
<Autocomplete
fullWidth
id="combo-box-demo"
options={tenantLocations || []}
value={selectedLocation}
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
sx={{ minWidth: 250 }}
onChange={(event, value, reason) => {
setSelectedLocation(value);
if (value) {
console.log('Business Locations', value);
setLocationId(value.locationid);
}
if (reason == 'clear') {
setLocationId(0);
}
}}
renderInput={(params) => <TextField {...params} label="Choose Location" color="primary" />}
/>
)}
</Stack>
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{
color: 'text.primary',
bgcolor: 'grey.200'
}}
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip>
</Stack>
</Stack>
}
>
<TableContainer
sx={{
overflow: 'auto',
'&::-webkit-scrollbar': {
width: '3px',
height: '3px'
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#65387A' // Color of the scrollbar thumb
}
}}
>
<Table>
<TableHead>
<TableRow sx={{ bgcolor: bgcolor0 }}>
<TableCell rowSpan={2}># </TableCell>
<TableCell rowSpan={2}> Location</TableCell>
<TableCell rowSpan={2}>All </TableCell>
<TableCell colSpan={3} sx={{ textAlign: 'center', bgcolor: bgcolor1 }}>
Orders{' '}
</TableCell>
<TableCell colSpan={3} sx={{ textAlign: 'center', bgcolor: bgcolor2 }}>
Deliveries{' '}
</TableCell>
<TableCell rowSpan={2}> Kilometer</TableCell>
<TableCell rowSpan={2}>Charges </TableCell>
<TableCell rowSpan={2}>Amount </TableCell>
<TableCell rowSpan={2}> Action</TableCell>
</TableRow>
{/* sx={{ bgcolor: headCell.bgcolor }} */}
<TableRow>
<TableCell sx={{ bgcolor: bgcolor1 }}>Pending</TableCell>
<TableCell sx={{ bgcolor: bgcolor1 }}>Completed</TableCell>
<TableCell sx={{ bgcolor: bgcolor1 }}>Cancelled</TableCell>
<TableCell sx={{ bgcolor: bgcolor2 }}>Pending</TableCell>
<TableCell sx={{ bgcolor: bgcolor2 }}>Completed</TableCell>
<TableCell sx={{ bgcolor: bgcolor2 }}>Cancelled</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows?.length !== 0 ? (
rows?.map((row, index) => (
<>
{/* ============================================ || tablerow 1 || ============================================ */}
<TableRow
key={row.locationid}
sx={{
bgcolor: openRow === row.locationid ? '#e1bee7' : null,
'&:hover': {
bgcolor: openRow === row.locationid ? '#e1bee7!important' : null
},
cursor: openRow === row.locationid ? 'pointer' : null
}}
>
<TableCell scope="row" padding="none">
{index + 1}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{row.locationname}
</Stack>
</TableCell>
<TableCell align="center">{row.totalorders}</TableCell>
<TableCell align="center">{row.Orderspending}</TableCell>
<TableCell align="center">{row.orderscompleted}</TableCell>
<TableCell align="center">{row.orderscancelled}</TableCell>
<TableCell align="center"> {row.deliveriespending}</TableCell>
<TableCell align="center"> {row.deliveriescompleted}</TableCell>
<TableCell align="center"> {row.deliveriescancelled}</TableCell>
<TableCell align="left">
<Tooltip title="kms" placement="top">
<Chip
size="small"
label={parseFloat(row.kms).toFixed(2)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
mb: 1,
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
<br />
<Tooltip title="Actual kms" placement="bottom">
<Chip
size="small"
label={parseFloat(row.actualkms).toFixed(2)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</TableCell>
<TableCell align="left">
<Tooltip title="Pay on Delivery" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
variant="outlined"
color="error"
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
mb: 1,
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
<br />
<Tooltip title="Pay Later" placement="bottom">
<Chip
size="small"
label={formatNumberToRupees(row.paylater)}
variant="outlined"
color="success"
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</TableCell>
<TableCell align="right">
<Tooltip title="Total Charges" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.charges)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',
border: '1px solid #662582 ',
cursor: 'pointer',
minWidth: 100
}}
/>
</Tooltip>
</TableCell>
<TableCell align="center">
<IconButton
aria-label="expand row"
size="small"
onClick={() => {
getriderlocationsummary(row.locationid);
setOpenRow(openRow === row.locationid ? null : row.locationid);
}}
sx={{
bgcolor: openRow === row.locationid ? 'primary.main' : null,
color: openRow === row.locationid ? 'white' : null,
'&:hover': {
bgcolor: openRow === row.locationid ? 'primary.main' : '#e1bee7'
}
}}
>
{openRow === row.locationid ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
</TableRow>
{/* ============================================ || collapsive row || ============================================ */}
{openRow === row.locationid && (
<TableRow
sx={{
bgcolor: openRow === row.locationid ? '#f3e5f5' : null,
'&:hover': {
bgcolor: openRow === row.locationid ? '#f3e5f5!important' : null
},
cursor: openRow === row.locationid ? 'pointer' : null
}}
>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse in={openRow === row.locationid} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h5" gutterBottom component="div">
Riders Summary
</Typography>
<Table size="small" aria-label="purchases">
<TableHead
sx={{
bgcolor: '#f3e5f5',
'&:onhover': {
bgcolor: '#f3e5f5!important'
}
}}
>
<TableRow>
<TableCell>#</TableCell>
<TableCell>Rider</TableCell>
<TableCell align="left">Deliveries</TableCell>
<TableCell align="left">Assigned</TableCell>
<TableCell align="left">Accepted</TableCell>
<TableCell align="left">Picked</TableCell>
<TableCell align="left">Delivered</TableCell>
<TableCell align="center">kms/Actualkms</TableCell>
<TableCell align="center">POD/PLA</TableCell>
<TableCell align="center">Charges</TableCell>
</TableRow>
</TableHead>
<TableBody>
{ridersdata?.map((rider, index) => (
<TableRow key={rider?.tenantname}>
<TableCell padding="none">{index + 1}</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{rider?.firstname}
{rider?.status == 'Active' ? (
<TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />
) : (
<HighlightOffIcon fontSize="small" color="error" sx={{ ml: 1 }} />
)}
</Stack>
</TableCell>
<TableCell align="left">{rider?.deliveries}</TableCell>
<TableCell align="left">{rider?.Assigened}</TableCell>
<TableCell align="left">{rider?.Accepted}</TableCell>
<TableCell align="left">{rider?.Picked}</TableCell>
<TableCell align="left">{rider?.delivered}</TableCell>
<TableCell align="center">
<Tooltip title="kms" placement="top">
<Chip
size="small"
label={rider?.kms}
sx={{
color: '#1976d2',
bgcolor: '#e3f2fd',
mr: 1,
border: '1px solid #1976d2',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
<Tooltip title="Actual kms" placement="top">
<Chip
size="small"
label={rider?.actualkms}
sx={{
color: '#ff8f00',
bgcolor: '#ffecb3',
border: '1px solid #ff8f00',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</TableCell>
<TableCell align="center">
<Tooltip title="Pay on Delivery" placement="top">
<Chip
size="small"
label={formatNumberToRupees(rider?.payondelivery)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
mr: 1,
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
<Tooltip title="Paylater" placement="top">
<Chip
size="small"
label={formatNumberToRupees(rider?.Paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</TableCell>
<TableCell align="center">
<Tooltip title="Amount" placement="top">
<Chip
size="small"
label={formatNumberToRupees(rider?.Deliveryamt)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',
border: '1px solid #662582 ',
cursor: 'pointer',
minWidth: 100
}}
/>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</>
))
) : (
<TableRow>
<TableCell colSpan={17} rowSpan={40}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
<Empty />
</Stack>
</TableCell>
</TableRow>
)}
</TableBody>
{/* ============================================ || total - row || ============================================ */}
<TableRow sx={{ bgcolor: '#e0e0e0' }}>
<TableCell colSpan={2}>
<Typography variant="h5">Total</Typography>
</TableCell>
<TableCell align="center">
<Typography variant="h5">{totalOrders}</Typography>{' '}
</TableCell>
<TableCell align="center">
<Typography variant="h5">{totalOrderPend}</Typography>{' '}
</TableCell>
<TableCell align="center">
<Typography variant="h5">{totalOrderComplete}</Typography>{' '}
</TableCell>
<TableCell align="center">
<Typography variant="h5"> {totalOrderCancel}</Typography>
</TableCell>
<TableCell align="center">
<Typography variant="h5">{totalDeliPend}</Typography>{' '}
</TableCell>
<TableCell align="center">
<Typography variant="h5">{totalDeliComplete}</Typography>{' '}
</TableCell>
<TableCell align="center">
<Typography variant="h5"> {totalDeliCancel}</Typography>
</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell align="right" sx={{ pr: -2 }}>
<Typography variant="h5">{formatNumberToRupees(total)}</Typography>
</TableCell>{' '}
<TableCell></TableCell>
</TableRow>
</Table>
</TableContainer>
</MainCard>
{/* ============================================ || date filter dialog || ============================================ */}
<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={() => setOpen(false)}>
ok
</Button>
</Stack>
</Dialog>
</>
);
}

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

@@ -8,6 +8,7 @@ import { useTheme } from '@mui/material/styles';
import { SlLocationPin } from 'react-icons/sl';
import MapWithRoute from './mapWithRoute';
import { enqueueSnackbar } from 'notistack';
import MyLocationIcon from '@mui/icons-material/MyLocation';
// material-ui
import {
@@ -27,7 +28,6 @@ import {
IconButton,
Tooltip,
Chip,
Paper,
FormControl,
OutlinedInput,
InputAdornment,
@@ -72,6 +72,7 @@ function formatNumberToRupees(value) {
// ==============================|| MUI TABLE - ENHANCED ||============================== //
export default function OrdersDetails() {
const tenId = localStorage.getItem('tenantid');
const textFieldRef = useRef(null);
const loadMoreRef = useRef();
const containerRef = useRef();
@@ -88,29 +89,42 @@ export default function OrdersDetails() {
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 [currentStatus, setCurrentStatus] = useState('All');
const [statusLabel, setStatuslabel] = useState('All');
const [statusCount, setStatusCount] = useState(0);
const [tenantLocations, setTenantlocations] = useState([]);
const [locationId, setLocationId] = useState(0);
const [locoName, setLocoName] = useState('Select Location');
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 }
{ id: 0, status: 'All', statusLow: 'All' },
{ id: 1, status: 'Pending', statusLow: 'pending' },
{ id: 2, status: 'Accepted', statusLow: 'accepted' },
{ id: 3, status: 'Arrived', statusLow: 'arrived' },
{ id: 4, status: 'Picked', statusLow: 'picked' },
{ id: 5, status: 'Active', statusLow: 'active' },
{ id: 6, status: 'Delivered', statusLow: 'delivered' },
{ id: 7, status: 'Cancelled', statusLow: 'cancelled' }
];
// ============================================= || gettenantlocations (branches) || =============================================
const gettenantlocations = async (id) => {
try {
const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`);
console.log('gettenantlocations', res.data.details);
if (res.data.details.length == 1) {
setIsLocation(true);
setTenantlocations(res.data.details);
setPickCust(res.data.details[0]);
} else {
setTenantlocations(res.data.details);
}
} catch (err) {
console.log('gettenantlocations', err);
}
};
useEffect(() => {
gettenantlocations(tenId);
}, []);
const getdeliverylogs = async (id) => {
console.log('deliveryid', id);
try {
@@ -162,15 +176,6 @@ export default function OrdersDetails() {
// ==============================|| fetchorderdetails (orders)||============================== //
// const {
// isLoading: isLoadingOrderDetails,
// isError: isErrorOrderDetails, //true or false
// data: rows,
// error: orderDetailsError
// } = useQuery({
// queryKey: [startdate, enddate, currentStatus],
// queryFn: fetchorderdetails
// });
const {
data: rowdata,
isError: isErrorOrderDetails,
@@ -181,7 +186,7 @@ export default function OrdersDetails() {
isFetchingNextPage
// status: rowdataStatus
} = useInfiniteQuery({
queryKey: [startdate, enddate, currentStatus],
queryKey: [startdate, enddate, currentStatus, locationId],
queryFn: fetchorderdetails,
getNextPageParam: (lastPage) => lastPage.nextPage
});
@@ -212,13 +217,8 @@ export default function OrdersDetails() {
// ==================================== || fetchDeliverySummary || ====================================
const {
data: deliverycount,
isLoading,
isError,
error
} = useQuery({
queryKey: ['deliverycount', startdate, enddate, currentStatus],
const { data: deliverycount } = useQuery({
queryKey: ['deliverycount', startdate, enddate, currentStatus, locationId],
queryFn: fetchDeliverySummary
});
@@ -266,7 +266,6 @@ export default function OrdersDetails() {
// ==============================|| fetchAppLocations ||============================== //
if (isLoadingOrderDetails) return <Loader />;
if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
const filteredOrders = rows.filter((row) =>
@@ -345,127 +344,165 @@ export default function OrdersDetails() {
};
return (
<>
{isLoadingOrderDetails && <Loader />}
<TitleCard title="Orders Details" />
<Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
<Stack
display={'flex'}
flexDirection={{ xs: 'column', md: 'row' }}
alignItems={'center'}
justifyContent={'space-between'}
sx={{ p: 2 }}
spacing={1}
>
<Stack direction="column" 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) && (
<>
<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}>
<Chip label="Orders-All" color="primary" variant="light" size="small" />
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
<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>
</>
)}
</Stack>
<Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
<Autocomplete
sx={{ minWidth: 200 }}
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={statusLabel || 'Select Status'} />}
/>
<FormControl sx={{ width: 250 }}>
<OutlinedInput
inputRef={textFieldRef}
aria-describedby="header-search-text"
inputProps={{
'aria-label': 'weight'
)}
{(!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>
<Autocomplete
sx={{ minWidth: 200 }}
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);
}
}}
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>
}
renderInput={(params) => <TextField {...params} label={'Select Status'} />}
/>
</FormControl>
<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>
<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>
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
</Stack>
</Stack>
</Stack>
</Paper>
<MainCard content={false}>
}
>
<TableContainer
onScroll={handleScroll}
ref={containerRef}

7
src/pages/nearle/reports/riderLogs.js Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
const riderLogs = () => {
return <div>riderLogs</div>;
};
export default riderLogs;

679
src/pages/nearle/reports/ridersummary.js Normal file
View File

@@ -0,0 +1,679 @@
import { React, useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import TaskAltIcon from '@mui/icons-material/TaskAlt';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import { Empty } from 'antd';
// material-ui
import {
Box,
Divider,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Dialog,
DialogTitle,
Typography,
DialogContent,
Stack,
Button,
IconButton,
Tooltip,
Chip,
Autocomplete,
TextField,
Collapse
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import { DateRangePicker } from 'mui-daterange-picker';
import {
addDays,
addMonths,
addWeeks,
// addYears,
endOfMonth,
endOfWeek,
// endOfYear,
startOfMonth,
startOfWeek
// startOfYear,
} from 'date-fns';
import { FilterList } from '@mui/icons-material';
// project imports
import MainCard from 'components/MainCard';
import Loader from 'components/Loader';
import TitleCard from '../titleCard';
import { fetchRidersSummary } from '../api/api';
// table filter
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]);
}
function formatNumberToRupees(value) {
return new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR',
minimumFractionDigits: 2
}).format(value);
}
// ==============================|| MUI TABLE - ENHANCED ||============================== //
export default function RidersSummary() {
// const [rows, setRows] = useState([]);
const [order, setOrder] = useState('asc');
const [orderBy, setOrderBy] = useState('calories');
const [selected, setSelected] = useState([]);
const [page, setPage] = useState(0);
const [dense] = useState(false);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [selectedValue, setSelectedValue] = useState([]);
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
const [locaName, setLocoName] = useState('All');
const [open, setOpen] = useState(false);
const [dateselect, setDateselect] = useState('select');
const [tabstatus1, setTabstatus1] = useState('Today');
const [datestatus, setDatestatus] = useState('Today');
const [total, settotal] = useState(0);
const [id, setid] = useState(-1);
const [tenantData, setTenantData] = useState([]);
const [openRow, setOpenRow] = useState(null); // Initially no row is open
const [searchword, setSearchword] = useState('');
const textFieldRef = useRef(null);
const [appId, setAppId] = useState(localStorage.getItem('applocationid'));
const [locations, setLocations] = useState('Select Location');
const userid = localStorage.getItem('userid');
/* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
useEffect(() => {
const handleKeyPress = (event) => {
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
textFieldRef.current.focus();
}
if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
// Remove focus from the TextField
textFieldRef.current.blur();
}
};
document.addEventListener('keydown', handleKeyPress);
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, []);
// ==============================|| fetchRidersSummary (riders summary)||============================== //
const {
isLoading: isLoadingReports,
isError: isErrorReports, //true or false
data: rows,
error: reportsError
} = useQuery({
queryKey: [appId, startdate, enddate],
queryFn: fetchRidersSummary
});
// ==============================|| calculate||============================== //
const calculate = async () => {
let calculatedTotal = 0;
rows &&
rows.forEach((row, index) => {
console.log(index, row.Deliveryamt);
calculatedTotal += row.Deliveryamt;
});
// Update the state after the calculation is done
settotal(calculatedTotal);
console.log('calculatedTotal', calculatedTotal);
};
useEffect(() => {
calculate();
}, [rows]);
if (isLoadingReports) return <Loader />;
if (isErrorReports) return 'An error has occurred:(isErrorReports) ' + reportsError.message;
// ==============================|| fetchTenantSummary by rider (rider summary)||============================== //
const fetchTenantSummary = async (riderUserid) => {
try {
const tenantRes = await axios.get(
`${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${riderUserid}`
);
console.log('tenantRes', tenantRes.data.details);
setTenantData(tenantRes.data.details);
} catch (error) {
console.log('tenantRes', error);
}
};
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));
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;
return (
<>
<TitleCard title="Riders Summary" />
<MainCard
content={false}
title={
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} flexWrap={'wrap'} gap={1}>
<Stack direction="column" alignItems="flex-start" spacing={1} sx={{}}>
{startdate && enddate && (
<Stack direction="row" spacing={2} flexWrap={'wrap'} gap={1}>
<Chip label={`Orders-${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" />
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
</Stack>
</>
)}
</Stack>
</Stack>
}
>
{/* table */}
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>S.No </TableCell>
<TableCell> Rider</TableCell>
<TableCell> Deliveries</TableCell>
<TableCell> Assigned</TableCell>
<TableCell> Accepted</TableCell>
<TableCell>Picked </TableCell>
<TableCell>Delivered </TableCell>
<TableCell>KMS/Actualkms </TableCell>
<TableCell> POD/PLA</TableCell>
<TableCell> Charges</TableCell>
<TableCell>Action </TableCell>
</TableRow>
</TableHead>
{/* ============================================ || TableBody || ============================================ */}
<TableBody>
{rows.length === 0 && (
<TableRow>
<TableCell colSpan={11}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
<Empty />
</Stack>
</TableCell>
</TableRow>
)}
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
if (typeof row === 'number') return null;
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
return (
rows.length !== 0 && (
<>
{/* // ============================================ || tablerow 1 || ============================================ */}
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.tenantname}
selected={isItemSelected}
sx={{
bgcolor: openRow === row.userid ? '#e1bee7' : null,
'&:hover': {
bgcolor: openRow === row.userid ? '#e1bee7!important' : null
},
cursor: openRow === row.userid ? 'pointer' : null
}}
>
<TableCell component="th" id={labelId} scope="row" padding="none">
{index + 1}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{row.firstname}
{row.status == 'Active' ? (
<TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />
) : (
<HighlightOffIcon fontSize="small" color="error" sx={{ ml: 1 }} />
)}
</Stack>
</TableCell>
<TableCell align="left">{row.deliveries}</TableCell>
<TableCell align="left">{row.Assigened}</TableCell>
<TableCell align="left">{row.Accepted}</TableCell>
<TableCell align="left">{row.Picked}</TableCell>
<TableCell align="left">{row.delivered}</TableCell>
<TableCell align="left">
<Stack direction={'row'}>
<Tooltip title="kms" placement="top">
<Chip
size="small"
label={row.kms}
sx={{
color: '#1976d2',
bgcolor: '#e3f2fd',
mr: 1,
border: '1px solid #1976d2',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
<Tooltip title="Actual kms" placement="bottom">
<Chip
size="small"
label={row.actualkms}
sx={{
color: '#ff8f00',
bgcolor: '#ffecb3',
border: '1px solid #ff8f00',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</Stack>
</TableCell>
<TableCell align="right">
<Stack direction={'row'}>
<Tooltip title="Pay on Delivery" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
cursor: 'pointer',
minWidth: 80,
mr: 1
}}
/>
</Tooltip>
<Tooltip title="Pay Later" placement="bottom">
<Chip
size="small"
label={formatNumberToRupees(row.Paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</Stack>
</TableCell>
<TableCell align="right">
<Tooltip title="Total Charges" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.Deliveryamt)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',
border: '1px solid #662582 ',
cursor: 'pointer',
minWidth: 100
}}
/>
</Tooltip>
</TableCell>
<TableCell align="center">
<IconButton
aria-label="expand row"
size="small"
onClick={() => {
fetchTenantSummary(row.userid);
setOpenRow(openRow === row.userid ? null : row.userid);
}}
sx={{
bgcolor: openRow === row.userid ? 'primary.main' : null,
color: openRow === row.userid ? 'white' : null,
'&:hover': {
bgcolor: openRow === row.userid ? 'primary.main' : '#e1bee7'
}
}}
>
{openRow === row.userid ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
</TableRow>
{/* // ============================================ || collapsive row || ============================================ */}
{openRow === row.userid && (
<TableRow
sx={{
bgcolor: openRow === row.userid ? '#f3e5f5' : null,
'&:hover': {
bgcolor: openRow === row.userid ? '#f3e5f5!important' : null
},
cursor: openRow === row.userid ? 'pointer' : null
}}
>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse
// in={openRow[row.tenantname]}
in={true}
timeout="auto"
unmountOnExit
>
<Box sx={{ margin: 1 }}>
<Typography variant="h5" gutterBottom component="div">
Tenant Summary
</Typography>
<Table size="small" aria-label="purchases">
<TableHead
sx={{
bgcolor: '#f3e5f5',
'&:onhover': {
bgcolor: '#f3e5f5!important'
}
}}
>
<TableRow>
<TableCell>#</TableCell>
<TableCell>Client</TableCell>
<TableCell align="left">All</TableCell>
<TableCell align="left">Pending</TableCell>
<TableCell align="left">Completed</TableCell>
<TableCell align="left">Cancelled</TableCell>
<TableCell align="center">Kms/Actual Kms</TableCell>
<TableCell align="center">POD / PLA</TableCell>
<TableCell align="center">Amount</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tenantData.map((row, index) => (
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.tenantname}
selected={isItemSelected}
>
{/* <TableCell sx={{ pl: 3 }} padding="checkbox">
<Checkbox
color="primary"
checked={isItemSelected}
inputProps={{
"aria-labelledby": labelId,
}}
/>
</TableCell> */}
<TableCell component="th" id={labelId} scope="row" padding="none">
{index + 1}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{row.tenantname}
</Stack>
</TableCell>
<TableCell align="left">{row.totalorders}</TableCell>
<TableCell align="left">{row.deliveriespending}</TableCell>
<TableCell align="left">{row.deliveriescompleted}</TableCell>
<TableCell align="left">{row.deliveriescancelled}</TableCell>
<TableCell align="center">
<Chip
size="small"
label={row.kms}
sx={{
color: '#1976d2',
bgcolor: '#e3f2fd',
mr: 1,
border: '1px solid #1976d2',
minWidth: 80
}}
/>
<Chip
size="small"
label={row.actualkms}
sx={{
color: '#ff8f00',
bgcolor: '#ffecb3',
border: '1px solid #ff8f00',
minWidth: 80
}}
/>
</TableCell>
<TableCell align="center">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
minWidth: 80
}}
/>{' '}
<Chip
size="small"
label={formatNumberToRupees(row.paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
minWidth: 80
}}
/>
</TableCell>
<TableCell align="center">
<Chip
size="small"
label={formatNumberToRupees(row.charges)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',
border: '1px solid #662582 ',
minWidth: 100
}}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</>
)
);
})}
{emptyRows > 0 && (
<TableRow sx={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<Divider />
<Stack direction={'row'} sx={{ display: 'flex', justifyContent: 'end', px: 1, py: 2 }}>
<Typography variant="h5">Total :</Typography>
<Typography variant="h5" sx={{ ml: 5, mr: 1.5 }}>
{formatNumberToRupees(total)}
</Typography>
</Stack>
{/* table pagination */}
{/* <TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/> */}
</MainCard>
<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={() => setOpen(false)}>
ok
</Button>
</Stack>
</Dialog>
</>
);
}

110
src/routes/MainRoutes.js
View File

@@ -4,7 +4,8 @@ import { lazy } from 'react';
import MainLayout from 'layout/MainLayout';
import CommonLayout from 'layout/CommonLayout';
import Loadable from 'components/Loadable';
// import AuthGuard from 'utils/route-guard/AuthGuard';
import AuthGuard from 'utils/route-guard/AuthGuard';
import { element } from 'prop-types';
// pages routing
const MaintenanceError = Loadable(lazy(() => import('pages/maintenance/404')));
@@ -15,7 +16,6 @@ const MaintenanceComingSoon = Loadable(lazy(() => import('pages/maintenance/comi
// render - sample page
const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page')));
const Login = Loadable(lazy(() => import('pages/nearle/login')));
const Dashboard = Loadable(lazy(() => import('pages/nearle/dashboard')));
const Customers = Loadable(lazy(() => import('pages/nearle/clients/customers')));
@@ -25,12 +25,15 @@ const Details = Loadable(lazy(() => import('pages/nearle/orders/details')));
const Accountsettings = Loadable(lazy(() => import('pages/nearle/accountsettings')));
// const Createorder = Loadable(lazy(() => import('pages/nearle/orders/createorder')));
const Createclient = Loadable(lazy(() => import('pages/nearle/clients/createCustomer')));
const CreateCustomer = Loadable(lazy(() => import('pages/nearle/clients/createCustomer')));
const Createorder1 = Loadable(lazy(() => import('pages/nearle/orders/createorder1')));
const MultipleOrders = Loadable(lazy(() => import('pages/nearle/orders/multipleOrders')));
const OrderSummary = Loadable(lazy(() => import('pages/nearle/reports/orderSummary')));
const OrdersDetails = Loadable(lazy(() => import('pages/nearle/reports/ordersDetails')));
const RiderSummary = Loadable(lazy(() => import('pages/nearle/reports/ridersummary')));
const RiderLogs = Loadable(lazy(() => import('pages/nearle/reports/riderLogs')));
const Invoice = Loadable(lazy(() => import('pages/nearle/invoice/invoice')));
const InvoicePreview = Loadable(lazy(() => import('../pages/nearle/invoice/invoicePreview')));
@@ -49,48 +52,81 @@ const MainRoutes = {
),
children: [
{
path: 'dashboard',
element: <Dashboard />
},
{
path: 'customers',
element: <Customers />
},
{
path: 'orders',
element: <Orders />
path: 'nearle',
children: [
{
path: 'orders',
element: <Orders />,
children: [
// use Outlet in orders page to render the child, because order render in app, but chidren createorder, multipleorder have nowhere, outlet make parent as to render
{
path: 'create',
element: <Createorder1 />
},
{
path: 'createorders',
element: <MultipleOrders />
}
]
},
{
path: 'customers',
children: [
{
path: '',
element: <Customers />
},
{
path: 'create',
element: <CreateCustomer />
}
]
},
{
path: 'reports',
children: [
{
path: 'ordersummary',
element: <OrderSummary />
},
{
path: 'ordersdetails',
element: <OrdersDetails />
},
{
path: 'ridersummary',
element: <RiderSummary />
},
{
path: 'riderlogs',
element: <RiderLogs />
}
]
},
{
path: 'invoice',
children: [
{
path: '',
element: <Invoice />
},
{
path: 'preview',
element: <InvoicePreview />
}
]
}
]
},
{
path: 'accountsettings',
element: <Accountsettings />
},
{
path: 'orders/create',
element: <Createorder1 />
},
{
path: 'orders/createorders',
element: <MultipleOrders />
},
{
path: 'orders/details',
element: <Details />
},
{
path: 'customers/create',
element: <Createclient />
},
{
path: 'reports/ordersdetails',
element: <OrdersDetails />
},
{
path: 'invoice',
element: <Invoice />
},
{
path: 'invoice/preview',
element: <InvoicePreview />
}
]
},