import * as React from 'react';
import { enqueueSnackbar } from 'notistack';
import { DeleteFilled, NotificationOutlined } 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 {
Avatar,
Box,
Button,
Grid,
Tabs,
Tab,
IconButton,
Stack,
Chip,
Typography,
Table,
TableCell,
TableBody,
TableHead,
Collapse,
Dialog,
TableRow,
DialogContent,
DialogTitle,
Tooltip,
FormControl,
OutlinedInput,
InputAdornment,
Skeleton,
CircularProgress,
DialogActions
} 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';
import { visuallyHidden } from '@mui/utils';
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 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: 'ordervalue',
// disablePadding: false,
// label: 'VALUE $',
// },
{
id: 'itemcount',
disablePadding: false,
label: 'NOTES'
},
{
id: 'orderstatus',
disablePadding: false,
label: 'STATUS'
},
{
id: 'action',
disablePadding: false,
label: 'ACTION'
}
];
function EnhancedTableHead(props) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
{headCells.map((headCell) => (
{headCell.label}
{orderBy === headCell.id ? (
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
) : null}
))}
);
}
function EnhancedTable() {
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('calories');
const [selected, setSelected] = React.useState([]);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
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('');
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) {
// if (orderheaderid && tenantid) {
// fetchorderdetails();
// fetchorderaddons();
// fetchorderattires();
// }
enqueueSnackbar('Order Cancelled Successfully', {
variant: 'success',
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: 2000
});
handleClose(true);
fetchtablecovered();
fetchorderscount();
}
})
.catch((err) => {
console.log(err);
});
};
const fetchstafflist = async (odid) => {
setLoading1(true);
try {
await axios
.get(`${process.env.REACT_APP_URL2}/orders/getassignedinfo?orderdetailid=${odid}`)
.then((res) => {
console.log(res);
if (res.data.status) {
setStafflist(res.data.Details);
}
setLoading1(false);
})
.catch((err) => {
console.log(err);
setLoading1(false);
});
} catch (err) {
console.log(err);
setLoading1(false);
}
};
const dialogclose = () => {
setDialogopen(false);
};
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);
};
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;
const visibleRows = React.useMemo(
() => stableSort(rows, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
[order, orderBy, page, rowsPerPage]
);
const handleClose = () => {
setOpen(false);
setOrderheaderid('');
};
function AlertCustomerDelete({
// title,
open,
handleClose
}) {
// const [deletepassword, setDeletepassword] = useState('');
return (
);
}
return (
{loading && (
<>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
))}
)}
{visibleRows.length == 0 && !loading && (
<>
{/* empty
*/}
)}
{visibleRows.map((row, index) => {
const isItemSelected = isSelected(row.sno);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<>
{row.sno}
{row.orderid}
{dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
{dayjs(row.deliverydate).utc().format('hh:mm A')}
{/*
{row.customername}
{row.contactno}
*/}
{row.pickupcustomer}
{row.pickupcontactno}
{/* {row.pickupaddress.slice(0, 20)} */}
{row.pickupsuburb || row.pickupaddress.slice(0, 20)}
{/*
*/}
{/*
{row.customersuburb || row.deliveryaddress.slice(0, 20)}
*/}
{row.deliverycustomer}
{row.deliverycontactno}
{/* {row.pickupaddress.slice(0, 20)} */}
{row.deliverysuburb || row.deliveryaddress.slice(0, 20)}
{row.ordernotes}
{/* */}
{row.orderstatus === 'pending' && }
{row.orderstatus === 'modified' && }
{row.orderstatus === 'cancelled' && }
{row.orderstatus === 'delivered' && }
{row.orderstatus === 'processing' && }
{row.orderstatus === 'ready' && }
{row.orderstatus === 'confirmed' && }
{row.orderstatus === 'active' && }
{row.orderstatus === 'closed' && }
{row.orderstatus === 'created' && }
{row.orderstatus == 'created' && (
<>
{
e.stopPropagation();
setOrderheaderid(row.orderheaderid);
setOpen(true);
// navigate(`/details`, {
// state: {
// orderheaderid: row.orderheaderid,
// tenantid: row.tenantid
// }
// })
}}
>
{/* */}
)}
{/*
{(row.ordershifts).map((val5, k) => {
return <>
Shift {k + 1}
{''}{val5.locationaddress}
{((val5.shiftstatus == 1) || (val5.status == 1)) &&
}
#
Role
Start Date
End Date
Unpaid break
Count
Assigned
Price
Amount
Assigned Roles
{((val5.orderdetails) ? val5.orderdetails : []).map((val, i) => {
return <>
{i + 1}
{val.productname}
{dayjs(val.starttime).format('MM/DD/YYYY')}
{dayjs(val.starttime).format('hh:mm A')}
{' '}
{dayjs(val.endtime).format('MM/DD/YYYY')}
{dayjs(val.endtime).format('hh:mm A')}
{val.unpaidbreak || 0}
0) ? "warning" : "error"} variant="light" size="small" />
${val.price}
${val.landingamount}
})}
})
}
*/}
);
})}
{emptyRows > 0 && (
)}
);
}
const tid = localStorage.getItem('tenantid');
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
const [percentage1, setPercentage1] = useState('0');
const [percentage2, setPercentage2] = useState('0');
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('');
const [currentStatus, setCurrentStatus] = useState('created');
const [createdLenght, setCreatedLenght] = useState();
const [pendingLenght, setPendingLenght] = useState();
const [deliveredlenght, setDeliveredlenght] = useState();
const [cancelledLenght, setCancelledLenght] = useState();
const handleChangetab = (e, i) => {
setTabvalue(i);
if (i === 0) {
setTabstatus('Created');
setCurrentStatus('created');
}
if (i === 1) {
setTabstatus('Pending');
setCurrentStatus('pending');
}
if (i === 2) {
setTabstatus('Delivered');
setCurrentStatus('delivered');
}
if (i === 3) {
setTabstatus('Cancelled');
setCurrentStatus('cancelled');
}
console.log(i);
};
const okclicked = () => {
setOpen(false);
};
const textFieldRef = useRef(null);
/* ============================================= || 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);
};
}, []);
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));
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
.get(
`${process.env.REACT_APP_URL}/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}`
)
.then((res) => {
let arr = [];
res.data.details.map((val, i) => {
arr = [...arr, { ...val, sno: i + 1 }];
});
console.log(currentStatus, arr);
setArr(arr);
setRows(arr);
})
.catch((err) => {
console.log(err);
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
fetchtablecovered();
fetchorderscount();
}, [tabstatus, startdate, enddate]);
const fetchpercentage = async () => {
setLoading(true);
try {
await axios
.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());
setPercentage2((Math.round((res.data.details.pending / res.data.details.total) * 100) || 0).toString());
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} catch (err) {
console.log(err);
setLoading(false);
}
};
useEffect(() => {
fetchpercentage();
}, []);
const fetchorderscount = async () => {
setLoading(true);
try {
await axios
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`)
.then((res) => {
console.log('fetchorderscount', res.data.details);
setCreatedLenght(res.data.details.created);
setPendingLenght(res.data.details.pending);
setDeliveredlenght(res.data.details.delivered);
setCancelledLenght(res.data.details.cancelled);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} catch (err) {
console.log(err);
setLoading(false);
}
};
useEffect(() => {
fetchorderscount();
}, []);
return (
<>
{loading && }
Orders
: created}
percentage={percentage1.toString()}
color={theme.palette.primary.main}
/>
: uncoveredorders}
percentage={percentage2.toString()}
color={theme.palette.warning.main}
/>
: coveredorders}
percentage={percentage3.toString()}
color={theme.palette.success.main}
/>
: cancelled}
percentage={percentage4.toString()}
color={theme.palette.secondary[600]}
/>
{startdate && enddate && (
{dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
}
variant="combined"
color="warning"
size="small"
/>
)}
{(!startdate || !enddate) && (
<>
)}
setOpen(true)}
>
}
iconPosition="end"
/>
}
iconPosition="end"
/>
}
iconPosition="end"
/>
}
iconPosition="end"
/>
);
};
export default Orders;