2215 lines
92 KiB
JavaScript
2215 lines
92 KiB
JavaScript
import React from 'react';
|
|
import { Avatar, Pagination, Tooltip, stepContentClasses } from '@mui/material';
|
|
import { useEffect, useRef, useState, Fragment, useMemo } from 'react';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import Skeleton from '@mui/material/Skeleton';
|
|
import HeartFilled from '@mui/icons-material/Favorite';
|
|
// import dayjs from "dayjs";
|
|
import Loader from 'components/Loader';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import { FilterList } from '@mui/icons-material';
|
|
import { FaRegEdit } from 'react-icons/fa';
|
|
import { RiEdit2Fill } from 'react-icons/ri';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
|
|
import {
|
|
Box,
|
|
Button,
|
|
IconButton,
|
|
ClickAwayListener,
|
|
Collapse,
|
|
Dialog,
|
|
Grid,
|
|
Menu,
|
|
MenuItem,
|
|
Popper,
|
|
Stack,
|
|
TextField,
|
|
Typography,
|
|
useMediaQuery,
|
|
Chip,
|
|
OutlinedInput,
|
|
InputAdornment,
|
|
List,
|
|
Divider,
|
|
ListItemButton,
|
|
ListItemAvatar,
|
|
ListItemText,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
InputLabel,
|
|
Table,
|
|
TableContainer,
|
|
TableHead,
|
|
TableCell,
|
|
TableBody,
|
|
TableRow,
|
|
Autocomplete
|
|
} from '@mui/material';
|
|
import Geocode from 'react-geocode';
|
|
import LocationOnIcon from '@mui/icons-material/LocationOn';
|
|
import parse from 'autosuggest-highlight/parse';
|
|
import { debounce } from '@mui/material/utils';
|
|
import ClearIcon from '@mui/icons-material/Clear';
|
|
import { MdPersonAdd } from 'react-icons/md';
|
|
// import { MdAccountCircle } from "react-icons/md";
|
|
import { MdPersonAddDisabled } from 'react-icons/md';
|
|
// import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
|
// import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
|
// import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
|
import { ThemeMode } from 'config';
|
|
// import { FaUserLarge } from "react-icons/fa6";
|
|
import { MoreOutlined, SearchOutlined, DeleteFilled } from '@ant-design/icons';
|
|
// import ChatDrawer from "sections/apps/chat/ChatDrawer";
|
|
// import ChatHistory from "sections/apps/chat/ChatHistory";
|
|
// import UserAvatar from "sections/apps/chat/UserAvatar";
|
|
// import UserDetails from "sections/apps/chat/UserDetails";
|
|
import MainCard from 'components/MainCard';
|
|
// import IconButton from "components/@extended/IconButton";
|
|
// import SimpleBar from "components/third-party/SimpleBar";
|
|
import { PopupTransition } from 'components/@extended/Transitions';
|
|
import axios from 'axios';
|
|
// import HoverSocialCard from "../../pages/reports/HoverSocialCard";
|
|
import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
|
|
// import TasksCard from "sections/widget/data/TasksCard";
|
|
// import ApplicationSales from "sections/widget/data/ApplicationSales";
|
|
// import Button from "themes/overrides/Button";
|
|
import { styled } from '@mui/material/styles';
|
|
// import TableRow from "themes/overrides/TableRow";
|
|
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';
|
|
const drawerWidth = 320;
|
|
// const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
|
|
// ({ theme, open }) => ({
|
|
// flexGrow: 1,
|
|
// transition: theme.transitions.create("margin", {
|
|
// easing: theme.transitions.easing.sharp,
|
|
// duration: theme.transitions.duration.shorter,
|
|
// }),
|
|
// marginLeft: `-${drawerWidth}px`,
|
|
// [theme.breakpoints.down("lg")]: {
|
|
// paddingLeft: 0,
|
|
// marginLeft: 0,
|
|
// },
|
|
// ...(open && {
|
|
// transition: theme.transitions.create("margin", {
|
|
// easing: theme.transitions.easing.easeOut,
|
|
// duration: theme.transitions.duration.shorter,
|
|
// }),
|
|
// marginLeft: 0,
|
|
// }),
|
|
// })
|
|
// );
|
|
|
|
// ==============================|| google address ||============================== //
|
|
const GOOGLE_MAPS_API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
|
|
|
|
function loadScript(src, position, id) {
|
|
if (!position) {
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.setAttribute('async', '');
|
|
script.setAttribute('id', id);
|
|
script.src = src;
|
|
position.appendChild(script);
|
|
}
|
|
|
|
const autocompleteService = { current: null };
|
|
|
|
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
|
'& .MuiDialog-paperWidthSm': {
|
|
maxWidth: '60%',
|
|
width: '100%',
|
|
margin: 0
|
|
},
|
|
'& .MuiDialogContent-root': {
|
|
padding: theme.spacing(2)
|
|
},
|
|
'& .MuiDialogActions-root': {
|
|
padding: theme.spacing(1)
|
|
}
|
|
}));
|
|
|
|
const Customers = () => {
|
|
const theme = useTheme();
|
|
const [search, setSearch] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState([]);
|
|
const [users, setUsers] = useState([]);
|
|
const [userName, setUserName] = useState('');
|
|
const [usernameload, setUsernameload] = useState(false);
|
|
const [customerId, setCustomerId] = useState('');
|
|
const [custVisits, setCustVisits] = useState([]);
|
|
const [custService, setCustService] = useState([]);
|
|
const [custMembership, setCustMembership] = useState({});
|
|
const [visits, setvisits] = useState(0);
|
|
const [billAmount, setBillAmount] = useState(0);
|
|
const [promotions, setPromotions] = useState(0);
|
|
const [discount, setDiscount] = useState(0);
|
|
const [pageno, setPageno] = useState(1);
|
|
const [contactno, setContactno] = useState('');
|
|
const ref = useRef(null);
|
|
const [open, setOpen] = React.useState(false);
|
|
const [open3, setOpen3] = React.useState(false);
|
|
const [open4, setOpen4] = React.useState(false);
|
|
const [selectedCustomer, setSelectedCustomer] = useState({}); // to edit
|
|
|
|
const [packDays, setPackDays] = useState(0);
|
|
const [startDate, setStartDate] = useState('');
|
|
const [validDate, setValidDate] = useState('');
|
|
const [orderlist, setOrderlist] = useState([]);
|
|
const [allorders, setAllorders] = useState('');
|
|
const [coveredorders, setCoveredorders] = useState('');
|
|
const [uncoveredorders, setUncoveredorders] = useState('');
|
|
const [cancelled, setCancelled] = useState('');
|
|
|
|
const [percentage1, setPercentage1] = useState('0');
|
|
const [percentage2, setPercentage2] = useState('0');
|
|
const [percentage3, setPercentage3] = useState('0');
|
|
const [percentage4, setPercentage4] = useState('0');
|
|
|
|
const [tempusers, setTempusers] = useState([]);
|
|
|
|
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
|
|
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
|
|
|
|
const [datestatus, setDatestatus] = useState('Today');
|
|
const [tenid, setTenid] = useState('');
|
|
const [loading1, setLoading1] = useState(false);
|
|
const [currentcustomerid, setCurrentcustomerid] = useState('');
|
|
|
|
const [address, setAddress] = useState('');
|
|
const [latlong, setLatlong] = useState({});
|
|
|
|
// ==============================|| for google address ||============================== //
|
|
const [value, setValue] = useState(null);
|
|
const [inputValue, setInputValue] = useState('');
|
|
const [options, setOptions] = useState([]);
|
|
const loaded = useRef(false);
|
|
|
|
if (typeof window !== 'undefined' && !loaded.current) {
|
|
if (!document.querySelector('#google-maps')) {
|
|
loadScript(
|
|
`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`,
|
|
document.querySelector('head'),
|
|
'google-maps'
|
|
);
|
|
}
|
|
|
|
loaded.current = true;
|
|
}
|
|
|
|
const fetch = useMemo(
|
|
() =>
|
|
debounce((request, callback) => {
|
|
autocompleteService.current.getPlacePredictions(request, callback);
|
|
}, 400),
|
|
[]
|
|
);
|
|
useEffect(() => {
|
|
let active = true;
|
|
|
|
if (!autocompleteService.current && window.google) {
|
|
autocompleteService.current = new window.google.maps.places.AutocompleteService();
|
|
}
|
|
if (!autocompleteService.current) {
|
|
return undefined;
|
|
}
|
|
|
|
if (inputValue === '') {
|
|
setOptions(value ? [value] : []);
|
|
return undefined;
|
|
}
|
|
fetch({ input: inputValue }, (results) => {
|
|
if (active) {
|
|
let newOptions = [];
|
|
|
|
if (value) {
|
|
newOptions = [value];
|
|
}
|
|
|
|
if (results) {
|
|
newOptions = [...newOptions, ...results];
|
|
}
|
|
|
|
setOptions(newOptions);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [value, inputValue, fetch]);
|
|
|
|
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
|
|
useEffect(() => {
|
|
try {
|
|
console.log('selected address =>', address);
|
|
Geocode.fromAddress(address).then(
|
|
(response) => {
|
|
console.log('lat long response =>', response.results[0]);
|
|
if (response.status == 'OK') {
|
|
const { lat, lng } = response.results[0].geometry.location;
|
|
setLatlong({
|
|
lat,
|
|
lng
|
|
});
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
latitude: lat,
|
|
longitude: lng
|
|
});
|
|
}
|
|
},
|
|
(error) => {
|
|
console.log(error);
|
|
}
|
|
);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}, [address]);
|
|
|
|
useEffect(() => {
|
|
selectedCustomer &&
|
|
setLatlong({
|
|
lat: selectedCustomer.latitude,
|
|
lng: selectedCustomer.longitude
|
|
});
|
|
}, [selectedCustomer]);
|
|
|
|
const openToast = (message, variant, duration) => {
|
|
enqueueSnackbar(message, {
|
|
variant: variant,
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: duration
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
console.log('selectedCustomer', selectedCustomer);
|
|
}, [selectedCustomer]);
|
|
|
|
// ==============================|| for dialog ||============================== //
|
|
|
|
const handleClickOpen4 = () => {
|
|
setOpen4(true);
|
|
};
|
|
|
|
const handleClose4 = () => {
|
|
setOpen4(false);
|
|
};
|
|
/* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
|
|
const textFieldRef = useRef(null);
|
|
|
|
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);
|
|
};
|
|
}, []);
|
|
const handleClickOpen = () => {
|
|
setOpen(true);
|
|
};
|
|
const handleClose = () => {
|
|
setOpen3(false);
|
|
};
|
|
|
|
const handleClose3 = () => {
|
|
setOpen3(false);
|
|
};
|
|
// const [anchorEl]=useState(null)
|
|
// const tenid = window.localStorage.getItem("tenantid");
|
|
useEffect(() => {
|
|
// setUsernameload(false);
|
|
console.log('username', userName);
|
|
}, [userName]);
|
|
|
|
const [anchorEl, setAnchorEl] = useState();
|
|
const handleClickRightMenu = (event) => {
|
|
setAnchorEl(event?.currentTarget);
|
|
};
|
|
|
|
const handleCloseRightMenu = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
const handleClickSort = (event) => {
|
|
setAnchorEl(event?.currentTarget);
|
|
};
|
|
|
|
const handleCloseSort = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (localStorage.getItem('tenantid')) {
|
|
fetchtable(localStorage.getItem('tenantid'));
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (tenid && !search) {
|
|
// fetchData1();
|
|
}
|
|
}, [pageno]);
|
|
|
|
useEffect(() => {
|
|
const fetchsearch = async () => {
|
|
setLoading(true);
|
|
try {
|
|
await axios
|
|
.get(`${process.env.REACT_APP_URL}/customers/search?tenantid=${tenid}&keyword=${search}`)
|
|
.then((response) => {
|
|
if (response.data.status) {
|
|
setUsers(response.data.details || []);
|
|
setLoading(false);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
setLoading(false);
|
|
});
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
if (search.length > 2) {
|
|
// fetchsearch();
|
|
} else if (!search) {
|
|
// fetchData1();
|
|
setPageno(1);
|
|
}
|
|
}, [search]);
|
|
|
|
useEffect(() => {
|
|
if (search) {
|
|
let arr = tempusers.filter((val) => {
|
|
return (
|
|
val.firstname.toLowerCase().includes(search.toLowerCase()) ||
|
|
// || val.deliveryaddress.toLowerCase().includes(searchword.toLowerCase())
|
|
// || val.customername.toLowerCase().includes(searchword.toLowerCase())
|
|
// || val.pickupaddress.toString().toLowerCase().includes(searchword.toLowerCase())
|
|
// || val.ordernotes.toString().toLowerCase().includes(searchword.toLowerCase())
|
|
val.contactno.toString().toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
});
|
|
console.log(arr);
|
|
setUsers([...arr]);
|
|
} else {
|
|
setUsers([...tempusers]);
|
|
}
|
|
}, [search]);
|
|
|
|
useEffect(() => {
|
|
if (tenid) {
|
|
fetchData(tenid);
|
|
}
|
|
}, [startdate, enddate]);
|
|
|
|
const fetchpercentage = async (tid) => {
|
|
setLoading(true);
|
|
try {
|
|
// await axios.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`)
|
|
await axios
|
|
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?customerid=${tid}`)
|
|
|
|
.then((res) => {
|
|
console.log(res);
|
|
// setConfirmed(res.data.details.confirmed.toString());
|
|
// setModified(res.data.details.modified.toString());
|
|
setAllorders(res.data.details.total.toString());
|
|
setCoveredorders(res.data.details.delivered.toString());
|
|
|
|
setCancelled(res.data.details.cancelled.toString());
|
|
setUncoveredorders(res.data.details.pending.toString());
|
|
// setActiveorders(res.data.details.assigned.toString());
|
|
// setAssigned(res.data.details.accepted.toString());
|
|
// setCreated(res.data.details.created.toString())
|
|
// setClosed(res.data.details.delivered.toString());
|
|
// setPicked(res.data.details.picked.toString())
|
|
setPercentage1((Math.round((res.data.details.total / 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);
|
|
// enqueueSnackbar(err.message, {
|
|
// variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
// autoHideDuration: 2000
|
|
// })
|
|
});
|
|
} catch (err) {
|
|
console.log(err);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const removeclient = async () => {
|
|
setLoading(true);
|
|
try {
|
|
await axios
|
|
.delete(`${process.env.REACT_APP_URL}/customers/delete/?customerid=${currentcustomerid}`)
|
|
|
|
.then((res) => {
|
|
if (res.data.status) {
|
|
enqueueSnackbar('Deleted Successfully', {
|
|
variant: 'success',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
setCurrentcustomerid('');
|
|
// fetchtable(localStorage.getItem('tenantid'))
|
|
} else {
|
|
enqueueSnackbar(res.data.message, {
|
|
variant: 'error',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
}
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
enqueueSnackbar(err.message, {
|
|
variant: 'error',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
setLoading(false);
|
|
});
|
|
} catch (err) {
|
|
console.log(err);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchtable = async (tid) => {
|
|
setLoading1(true);
|
|
try {
|
|
// await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenants/?partnerid=${tid}&status=active`)
|
|
await axios
|
|
.get(`${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}`)
|
|
|
|
.then((res) => {
|
|
if (res.data.message === 'Success') {
|
|
let arr = [];
|
|
res.data.details.map((val, i) => {
|
|
arr = [...arr, { ...val, sno: i + 1 }];
|
|
});
|
|
// setArr(arr)
|
|
// setRows([...arr])
|
|
// setStafflist([...arr])
|
|
setSelectedCustomer(arr[0]);
|
|
setUsers([...arr]);
|
|
setTempusers([...arr]);
|
|
// if(arr[0].customerid){
|
|
setTenid(arr[0].customerid);
|
|
setUserName(arr[0].firstname || '');
|
|
setContactno(arr[0].contactno || '');
|
|
fetchpercentage(arr[0].customerid);
|
|
fetchData(arr[0].customerid);
|
|
// }
|
|
|
|
console.log(res.data.Details);
|
|
console.log(arr);
|
|
setLoading1(false);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
setLoading1(false);
|
|
enqueueSnackbar(err.message, {
|
|
variant: 'error',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
});
|
|
} catch (err) {
|
|
console.log(err);
|
|
setLoading1(false);
|
|
}
|
|
};
|
|
|
|
const fetchData1 = async () => {
|
|
setLoading(true);
|
|
try {
|
|
await axios
|
|
.get(`${process.env.REACT_APP_URL}/customers/getbytid?tenantid=${tenid}&pageno=${pageno}&pagesize=20`)
|
|
.then((response) => {
|
|
if (response.data.status) {
|
|
setUsers(
|
|
response.data.details
|
|
// .slice(0, 10)
|
|
);
|
|
setUserName(response.data.details[0].firstname || '');
|
|
setContactno(response.data.details[0].contactno || '');
|
|
fetchData(response.data.details[0].customerid);
|
|
|
|
// fetchData(user.customerid);
|
|
}
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
setLoading(false);
|
|
});
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchData = async (tid) => {
|
|
try {
|
|
await axios
|
|
.get(
|
|
`${process.env.REACT_APP_URL}/orders/customer/getorders/?customerid=${tid}&status=delivered&fromdate=${startdate}&todate=${enddate}`
|
|
)
|
|
.then((res) => {
|
|
if (res.data.message === 'Success') {
|
|
let arr = [];
|
|
res.data.details.map((val, i) => {
|
|
arr = [...arr, { ...val, sno: i + 1 }];
|
|
});
|
|
// setArruncovered(arr)
|
|
setOrderlist([...arr]);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
console.log('packDays', packDays);
|
|
console.log('startDate', startDate);
|
|
const formattedDate = dayjs(startDate, 'DD/MM/YYYY').add(packDays, 'day').format('DD/MM/YYYY');
|
|
setValidDate(formattedDate);
|
|
}, [packDays, startDate]);
|
|
|
|
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 Remove this Customer?
|
|
</Typography>
|
|
|
|
{/* <Typography variant="h4" align="center">
|
|
Please type in the order number to confirm.
|
|
</Typography> */}
|
|
{/* <TextField
|
|
type='text'
|
|
onChange={(e) => {
|
|
console.log(e.target.value)
|
|
setDeletepassword(e.target.value)
|
|
}}
|
|
error={deletepassword !== orderid.slice(4)}
|
|
value={deletepassword}
|
|
/> */}
|
|
</Stack>
|
|
|
|
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
|
|
<Button
|
|
fullWidth
|
|
color="error"
|
|
variant="contained"
|
|
onClick={() => {
|
|
// if (deletepassword === orderid.slice(4)) {
|
|
// cancelorder();
|
|
removeclient();
|
|
handleClose(true);
|
|
// }
|
|
}}
|
|
autoFocus
|
|
>
|
|
Yes, Remove
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
onClick={() => {
|
|
handleClose(false);
|
|
setCurrentcustomerid('');
|
|
}}
|
|
color="secondary"
|
|
variant="outlined"
|
|
>
|
|
No
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
// ==============================|| updateCustomer (post)||============================== //
|
|
const updateCustomer = async () => {
|
|
if (!selectedCustomer.firstname) {
|
|
openToast('Enter Door NO', 'warning', 1500);
|
|
} else if (!selectedCustomer.contactno) {
|
|
openToast('Enter Contact Number ', 'warning', 1500);
|
|
} else if (!selectedCustomer.address) {
|
|
openToast('Enter Valid Address', 'warning', 1500);
|
|
} else if (!selectedCustomer.doorno) {
|
|
openToast('Enter Door Number ', 'warning', 1500);
|
|
} else if (!selectedCustomer.suburb) {
|
|
openToast('Enter Suburb', 'warning', 1500);
|
|
} else if (!selectedCustomer.city) {
|
|
openToast('Enter City ', 'warning', 1500);
|
|
} else if (!selectedCustomer.state) {
|
|
openToast('Enter State', 'warning', 1500);
|
|
} else if (!selectedCustomer.postcode) {
|
|
openToast('Enter PostCode', 'warning', 1500);
|
|
} else if (!selectedCustomer.landmark) {
|
|
openToast('Enter Landmark', 'warning', 1500);
|
|
} else if (!selectedCustomer.latitude) {
|
|
openToast('Enter Latitude', 'warning', 1500);
|
|
} else if (!selectedCustomer.longitude) {
|
|
openToast('Enter Longitude', 'warning', 1500);
|
|
} else {
|
|
try {
|
|
const postUpdateResponse = await axios.put(`${process.env.REACT_APP_URL}/customers/update`, {
|
|
customerid: selectedCustomer.customerid,
|
|
configid: 1,
|
|
firstname: selectedCustomer.firstname,
|
|
applocationid: selectedCustomer.applocationid,
|
|
profileimage: '',
|
|
dialcode: '+91',
|
|
contactno: selectedCustomer.contactno,
|
|
devicetype: '',
|
|
deviceid: '',
|
|
customertoken: '123',
|
|
address: selectedCustomer.address,
|
|
suburb: selectedCustomer.suburb,
|
|
city: selectedCustomer.city,
|
|
state: selectedCustomer.state,
|
|
postcode: selectedCustomer.postcode,
|
|
landmark: selectedCustomer.landmark,
|
|
doorno: selectedCustomer.doorno,
|
|
latitude: selectedCustomer.latitude.toString(),
|
|
longitude: selectedCustomer.longitude.toString()
|
|
});
|
|
|
|
console.log('postUpdateResponse', postUpdateResponse);
|
|
if (postUpdateResponse.data.status) {
|
|
openToast(postUpdateResponse.data.message, 'success', 1500);
|
|
handleClose4();
|
|
fetchtable(localStorage.getItem('tenantid'));
|
|
}
|
|
} catch (error) {
|
|
console.log('postUpdate error', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{(loading || usernameload) && <Loader />}
|
|
<AlertCustomerDelete open={open3} handleClose={handleClose} />
|
|
|
|
<Grid container rowSpacing={2} columnSpacing={2.75}>
|
|
<Grid item xs={12}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography variant="h3">Customers</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
width: '100%',
|
|
// height: "580px",
|
|
// bgcolor: "red",
|
|
height: '100%'
|
|
}}
|
|
>
|
|
<MainCard
|
|
sx={{
|
|
// bgcolor: matchDownLG ? "transparent" : drawerBG,
|
|
borderRadius: '4px 0 0 4px',
|
|
borderRight: 'none',
|
|
width: 320,
|
|
// width:'100%',
|
|
height: '100%'
|
|
// height: "580px"
|
|
// height: "100%",
|
|
// overflowY: "scroll",
|
|
// scrollbarWidth: "thin", // Hide scrollbar in Firefox
|
|
// "&::-webkit-scrollbar": {
|
|
// width: "5px", // Customize the width of the scrollbar
|
|
// },
|
|
// "&::-webkit-scrollbar-thumb": {
|
|
// backgroundColor: "#ce93d8", // Customize the scrollbar thumb color
|
|
// borderRadius: "6px", // Round the scrollbar thumb
|
|
// },
|
|
}}
|
|
// border={!matchDownLG}
|
|
content={false}
|
|
>
|
|
<Box sx={{ p: 3, pb: 1 }}>
|
|
<Stack spacing={2}>
|
|
{/* <Stack direction="row" spacing={0.5} alignItems="center">
|
|
<Typography variant="h5" color="inherit">
|
|
Customers
|
|
</Typography>
|
|
<Chip
|
|
label="9"
|
|
component="span"
|
|
color="secondary"
|
|
sx={{
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: "50%",
|
|
"& .MuiChip-label": {
|
|
px: 0.5,
|
|
},
|
|
}}
|
|
/>
|
|
</Stack> */}
|
|
|
|
<OutlinedInput
|
|
inputRef={textFieldRef}
|
|
fullWidth
|
|
id="input-search-header"
|
|
placeholder="Search (ctrl+k)"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
// onChange={handleSearch}
|
|
sx={{
|
|
'& .MuiOutlinedInput-input': {
|
|
p: '10.5px 0px 12px'
|
|
}
|
|
}}
|
|
startAdornment={
|
|
<InputAdornment position="start">
|
|
<SearchOutlined style={{ fontSize: 'small' }} />
|
|
</InputAdornment>
|
|
}
|
|
endAdornment={
|
|
<Tooltip title="clear">
|
|
<IconButton
|
|
sx={{ visibility: search ? 'visible' : 'hidden' }}
|
|
onClick={() => {
|
|
setSearch('');
|
|
}}
|
|
>
|
|
<ClearIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
}
|
|
/>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* <SimpleBar
|
|
sx={{
|
|
overflowX: "hidden",
|
|
|
|
}}
|
|
> */}
|
|
<Box
|
|
sx={{
|
|
// height: "450px",
|
|
height: '600px',
|
|
|
|
// height: "1515px",
|
|
// height: "100%",
|
|
overflowY: 'scroll',
|
|
scrollbarWidth: 'thin', // Hide scrollbar in Firefox
|
|
'&::-webkit-scrollbar': {
|
|
width: '3px' // Customize the width of the scrollbar
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
backgroundColor: '#65387A', // Customize the scrollbar thumb color
|
|
borderRadius: '6px' // Round the scrollbar thumb
|
|
},
|
|
p: 3,
|
|
pt: 0
|
|
}}
|
|
>
|
|
{/* <UserList setUser={setUser} search={search} /> */}
|
|
{loading1 ? (
|
|
<>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((val1) => {
|
|
return (
|
|
<>
|
|
<Stack direction={'row'}>
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Stack direction={'column'} sx={{ width: '80%' }}>
|
|
<Skeleton variant="text" sx={{ fontSize: '1rem' }} />
|
|
<Skeleton variant="text" sx={{ fontSize: '1rem' }} />
|
|
</Stack>
|
|
</Stack>
|
|
</>
|
|
);
|
|
})}
|
|
|
|
{/* <Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="circular" width={40} height={40} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} />
|
|
<Skeleton variant="text" sx={{ fontSize: "1rem" }} /> */}
|
|
</>
|
|
) : (
|
|
<List component="nav">
|
|
{users.map((user, index) => (
|
|
<Fragment key={user.sno}>
|
|
<ListItemButton
|
|
sx={{ pl: 1 }}
|
|
onClick={() => {
|
|
setTenid(user.customerid);
|
|
setUserName(user.firstname);
|
|
setContactno(user.contactno);
|
|
fetchData(user.customerid);
|
|
fetchpercentage(user.customerid);
|
|
setSelectedCustomer(user);
|
|
}}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar
|
|
// user={user}
|
|
style={{ background: '#65387A' }}
|
|
/>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={
|
|
<Stack component="span" direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
|
|
<Typography
|
|
variant="h6"
|
|
color="inherit"
|
|
sx={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap'
|
|
}}
|
|
>
|
|
{user.firstname}
|
|
</Typography>
|
|
<Typography component="span" color="textSecondary" variant="caption">
|
|
{/* {user.lastMessage} */}
|
|
</Typography>
|
|
</Stack>
|
|
}
|
|
secondary={
|
|
<Stack component="span" direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
|
|
<Typography
|
|
variant="caption"
|
|
color="textSecondary"
|
|
sx={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap'
|
|
}}
|
|
>
|
|
{user.contactno}
|
|
</Typography>
|
|
{/* {user.unReadChatCount ? (
|
|
<Dot color="primary" />
|
|
) : (
|
|
// chance.bool() - use for last send msg was read or unread
|
|
<CheckOutlined
|
|
style={{
|
|
color: chance.bool()
|
|
? theme.palette.grey[400]
|
|
: theme.palette.primary.main,
|
|
}}
|
|
/>
|
|
)} */}
|
|
</Stack>
|
|
}
|
|
/>
|
|
</ListItemButton>
|
|
<Divider />
|
|
</Fragment>
|
|
))}
|
|
</List>
|
|
)}
|
|
</Box>
|
|
{/* <Box
|
|
sx={{ width: "100%", p: 2 }}
|
|
>
|
|
<Grid container>
|
|
<Grid item xs={12}>
|
|
|
|
<Stack
|
|
direction={"row"}
|
|
justifyContent={"flex-end"}
|
|
alignItems={"center"}
|
|
spacing={1}
|
|
>
|
|
<IconButton
|
|
color="primary"
|
|
size="small"
|
|
onClick={() => {
|
|
let val = pageno;
|
|
if (val > 1) {
|
|
val = val - 1;
|
|
setPageno(val);
|
|
}
|
|
}}
|
|
>
|
|
<LeftOutlined />
|
|
</IconButton>
|
|
<Typography variant="h6">{pageno}</Typography>
|
|
<IconButton
|
|
color="primary"
|
|
size="small"
|
|
onClick={() => {
|
|
let val = pageno;
|
|
if (val > 0 && !search) {
|
|
val = val + 1;
|
|
setPageno(val);
|
|
}
|
|
}}
|
|
>
|
|
<RightOutlined />
|
|
</IconButton>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</Box> */}
|
|
{/* </SimpleBar> */}
|
|
<Box sx={{ width: '100%', p: 2 }}>
|
|
<Stack direction={'row'} justifyContent={'flex-end'}>
|
|
<Typography variant="h6">{users.length} Customers</Typography>
|
|
</Stack>
|
|
</Box>
|
|
</MainCard>
|
|
|
|
{/* <ChatDrawer
|
|
openChatDrawer={openChatDrawer}
|
|
handleDrawerOpen={handleDrawerOpen}
|
|
setUser={setUser}
|
|
/> */}
|
|
{/* <Main
|
|
theme={theme} open={openChatDrawer}
|
|
> */}
|
|
|
|
<Grid
|
|
container
|
|
sx={{
|
|
width: 'calc(100% - 320px)',
|
|
height: '100%'
|
|
}}
|
|
style={{
|
|
// height: "580px",
|
|
// height: '100%',
|
|
background: ''
|
|
// borderBottom: "1px solid #eeeeee",
|
|
}}
|
|
>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
// md={emailDetails ? 8 : 12}
|
|
// xl={emailDetails ? 9 : 12}
|
|
sx={{
|
|
transition: theme.transitions.create('width', {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.shorter + 200
|
|
// height: "100%",
|
|
})
|
|
}}
|
|
>
|
|
<MainCard
|
|
content={false}
|
|
sx={{
|
|
height: '100%',
|
|
// marginBottom:'60px' ,
|
|
|
|
bgcolor: theme.palette.mode === ThemeMode.DARK ? 'dark.main' : 'grey.50',
|
|
// pt: 2,
|
|
// pl: 2,
|
|
// borderRadius: emailDetails ? "0" : "0 4px 4px 0",
|
|
transition: theme.transitions.create('width', {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.shorter + 200
|
|
})
|
|
}}
|
|
>
|
|
<Grid container spacing={3} sx={{ height: '100%' }}>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
bgcolor: theme.palette.background.paper,
|
|
pr: 2,
|
|
pb: 2,
|
|
borderBottom: `1px solid ${theme.palette.divider}`
|
|
// height:'100%'
|
|
}}
|
|
>
|
|
<Grid container justifyContent="space-between">
|
|
<Grid item sx={{ ml: 2, mt: 2 }}>
|
|
<Stack direction="row" alignItems="center" spacing={2}>
|
|
<Avatar
|
|
// user={user}
|
|
style={{ background: '#65387A' }}
|
|
/>
|
|
|
|
{userName ? (
|
|
<Stack direction={'column'}>
|
|
<Typography variant="subtitle1">{userName}</Typography>
|
|
<Typography variant="subtitle1" color={'secondary'}>
|
|
{contactno}
|
|
</Typography>
|
|
</Stack>
|
|
) : (
|
|
<Stack direction={'column'}>
|
|
<Skeleton variant="text" sx={{ fontSize: '1rem', width: '75px' }} />
|
|
<Skeleton variant="text" sx={{ fontSize: '1rem', width: '75px' }} />
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item sx={{ ml: 2, mt: 2 }}>
|
|
<Stack direction="row" alignItems="center" spacing={2} sx={{ height: '100%' }}>
|
|
{custMembership.membershipid == 0 && custMembership.startdate == '' ? (
|
|
<>{/* <h4>No Membership Found</h4> */}</>
|
|
) : (
|
|
<>
|
|
{custMembership.membershipid && (
|
|
<>
|
|
<Tooltip title="Membership No" sx={{ cursor: 'pointer' }}>
|
|
<Chip
|
|
icon={
|
|
<HeartFilled
|
|
style={{
|
|
color: custMembership.string == 'expired' ? 'grey' : 'red'
|
|
}}
|
|
/>
|
|
}
|
|
variant="caption"
|
|
label={custMembership.membershipno || ''}
|
|
style={{
|
|
width: 'auto',
|
|
height: 'auto',
|
|
|
|
color: 'black',
|
|
background: 'white'
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip title="Start Date" sx={{ cursor: 'pointer' }}>
|
|
<Chip
|
|
color={custMembership.string == 'expired' ? 'secondary' : 'success'}
|
|
label={dayjs(custMembership.startdate).format('DD-MM-YYYY') || ''}
|
|
style={{
|
|
width: 'auto',
|
|
height: 'auto'
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip title="End Date" sx={{ cursor: 'pointer' }}>
|
|
<Chip
|
|
color={custMembership.string == 'expired' ? 'secondary' : 'error'}
|
|
label={dayjs(custMembership.enddate).format('DD-MM-YYYY') || ''}
|
|
style={{
|
|
width: 'auto',
|
|
height: 'auto'
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
{/* <Typography align="left" variant="body2">
|
|
{/* {custMembership.validityperiod || ''} Days */}
|
|
{/* {` ${custMembership.string}` || ''}
|
|
</Typography> */}
|
|
<Chip
|
|
label={custMembership.string}
|
|
color="error"
|
|
style={{
|
|
width: 'auto',
|
|
height: 'auto'
|
|
}}
|
|
/>
|
|
</>
|
|
)}{' '}
|
|
</>
|
|
)}
|
|
<IconButton onClick={handleClickSort} size="large" color="primary">
|
|
<MoreOutlined />
|
|
</IconButton>
|
|
|
|
<Menu
|
|
id="simple-menu"
|
|
anchorEl={anchorEl}
|
|
keepMounted
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleCloseSort}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right'
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right'
|
|
}}
|
|
sx={{
|
|
p: 0,
|
|
'& .MuiMenu-list': {
|
|
p: 0
|
|
}
|
|
}}
|
|
>
|
|
<MenuItem onClick={handleCloseSort}>
|
|
<Button
|
|
variant="text"
|
|
onClick={() => {
|
|
setOpen3(true);
|
|
setCurrentcustomerid(tenid);
|
|
}}
|
|
>
|
|
{
|
|
<DeleteFilled
|
|
style={{
|
|
fontSize: '12px',
|
|
marginRight: '15px'
|
|
}}
|
|
/>
|
|
}{' '}
|
|
Delete
|
|
</Button>
|
|
{/* ======================================== || Add Membership dialog|| ======================================== */}
|
|
|
|
{/* <BootstrapDialog
|
|
onClose={handleClose}
|
|
aria-labelledby="customized-dialog-title"
|
|
open={open}
|
|
>
|
|
<DialogTitle
|
|
sx={{
|
|
m: 0,
|
|
p: 2,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
color: "white",
|
|
bgcolor: "#65378A",
|
|
}}
|
|
id="customized-dialog-title"
|
|
>
|
|
{" "}
|
|
<div style={{ display: "flex" }}>
|
|
<MdAccountCircle
|
|
style={{
|
|
fontSize: "40px",
|
|
marginLeft: "10px",
|
|
marginRight: "15px",
|
|
}}
|
|
/>
|
|
|
|
<Typography variant="h4" sx={{ mt: 1 }}>
|
|
{" "}
|
|
{`${userName} (${contactno})`}
|
|
</Typography>
|
|
</div>
|
|
</DialogTitle>
|
|
|
|
|
|
<DialogContent dividers>
|
|
<Grid container spacing={3} sx={{ p: 1 }}>
|
|
<Grid item xs={6}>
|
|
<InputLabel sx={{ mb: 1 }}>
|
|
Membership Number
|
|
</InputLabel>
|
|
<TextField
|
|
fullWidth
|
|
id="outlined-read-only-input"
|
|
defaultValue={
|
|
custMembership.membershipno
|
|
}
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<InputLabel sx={{ mb: 1 }}>
|
|
Select Package
|
|
</InputLabel>
|
|
<TextField
|
|
id="outlined-select-currency"
|
|
fullWidth
|
|
select
|
|
onChange={(e) => {
|
|
setPackDays(e.target.value);
|
|
console.log(e.target.value);
|
|
|
|
}}
|
|
>
|
|
<MenuItem value="30">
|
|
Trendy (30 days)
|
|
</MenuItem>
|
|
<MenuItem key="100" value="60">
|
|
{" "}
|
|
Premiun (60 days)
|
|
</MenuItem>
|
|
<MenuItem key="100" value="90">
|
|
{" "}
|
|
Gold (90 days)
|
|
</MenuItem>
|
|
<MenuItem key="100" value="365">
|
|
{" "}
|
|
Platinum (365 days)
|
|
</MenuItem>
|
|
</TextField>
|
|
</Grid>
|
|
<Grid item xs={6} sx={{}}>
|
|
<InputLabel sx={{ mb: 1 }}>
|
|
Start Date
|
|
</InputLabel>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDayjs}
|
|
>
|
|
<DatePicker
|
|
sx={{ width: "100%" }}
|
|
format="DD/MM/YYYY"
|
|
disablePast
|
|
renderInput={(params) => (
|
|
<TextField {...params} />
|
|
)}
|
|
onChange={(e) => {
|
|
setStartDate(
|
|
e.format("DD/MM/YYYY")
|
|
);
|
|
console.log(
|
|
e.format("DD/MM/YYYY")
|
|
);
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Grid>
|
|
<Grid item xs={6} sx={{}}>
|
|
<InputLabel sx={{ mb: 1 }}>
|
|
Validity
|
|
</InputLabel>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDayjs}
|
|
>
|
|
<DatePicker
|
|
sx={{ width: "100%" }}
|
|
readOnly
|
|
disablePast
|
|
label={
|
|
validDate == "Invalid Date"
|
|
? "End date"
|
|
: validDate
|
|
}
|
|
renderInput={(params) => (
|
|
<TextField {...params} />
|
|
)}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Grid>
|
|
</Grid>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
autoFocus
|
|
variant="outlined"
|
|
onClick={() => {
|
|
handleClose();
|
|
setPackDays(0);
|
|
setStartDate();
|
|
setValidDate();
|
|
}}
|
|
sx={{
|
|
"&:hover": {
|
|
backgroundColor: "#65378A",
|
|
color: "white",
|
|
},
|
|
m: 2,
|
|
mr: 5,
|
|
px: 3,
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
autoFocus
|
|
variant="contained"
|
|
sx={{
|
|
"&:hover": {
|
|
|
|
},
|
|
mr: 1.5,
|
|
px: 5,
|
|
}}
|
|
onClick={handleClose}
|
|
>
|
|
Add
|
|
</Button>
|
|
</DialogActions>
|
|
</BootstrapDialog> */}
|
|
</MenuItem>
|
|
<MenuItem onClick={handleCloseSort}>
|
|
<Button
|
|
variant="text"
|
|
onClick={() => {
|
|
handleClickOpen4();
|
|
}}
|
|
>
|
|
{
|
|
<RiEdit2Fill
|
|
style={{
|
|
fontSize: '12px',
|
|
marginRight: '15px'
|
|
}}
|
|
/>
|
|
}{' '}
|
|
Edit
|
|
</Button>
|
|
</MenuItem>
|
|
{/* <MenuItem onClick={handleCloseSort}>
|
|
<Button
|
|
variant="text"
|
|
// onClick={handleClickOpen}
|
|
>
|
|
{
|
|
<MdPersonAddDisabled
|
|
style={{
|
|
fontSize: "20px",
|
|
marginRight: "15px",
|
|
}}
|
|
/>
|
|
}{" "}
|
|
Disable
|
|
</Button>
|
|
</MenuItem>*/}
|
|
{/* <MenuItem onClick={handleCloseSort}>
|
|
<DeleteOutlined style={{ paddingRight: 8 }} />
|
|
<Typography>Delete</Typography>
|
|
</MenuItem> */}
|
|
</Menu>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
{/* ======================================== || Edit Dialog || ======================================== */}
|
|
<Dialog
|
|
open={open4}
|
|
onClose={handleClose4}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
maxWidth="lg"
|
|
fullWidth
|
|
>
|
|
<DialogTitle id="alert-dialog-title" sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
|
|
<Stack direction={'row'} alignItems={'center'} spacing={1}>
|
|
<FaRegEdit style={{ fontSize: 25 }} /> <Typography variant="h3">Edit Customer</Typography>
|
|
</Stack>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Grid container spacing={2} sx={{ mt: 2 }}>
|
|
<Grid item xs={6}>
|
|
<Typography sx={{ mb: 1 }}>Customer Name</Typography>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.firstname}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
firstname: e.target.value
|
|
});
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>Contact Number</Typography>
|
|
<Stack direction={'row'}>
|
|
<TextField readonly variant="outlined" value={'+91'} sx={{ width: 60 }} />
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.contactno}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
contactno: e.target.value
|
|
});
|
|
}}
|
|
inputProps={{
|
|
maxLength: 10
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>Address</Typography>
|
|
<Autocomplete
|
|
id="google-map-demo"
|
|
sx={{}}
|
|
fullWidth
|
|
getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
|
|
filterOptions={(x) => x}
|
|
options={options}
|
|
autoComplete
|
|
includeInputInList
|
|
filterSelectedOptions
|
|
value={selectedCustomer.address}
|
|
noOptionsText="No locations"
|
|
onChange={(event, newValue) => {
|
|
setOptions(newValue ? [newValue, ...options] : options);
|
|
setValue(newValue);
|
|
console.log('newValue', newValue.description);
|
|
setAddress(newValue.description);
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
address: newValue.description
|
|
});
|
|
}}
|
|
onInputChange={(event, newInputValue) => {
|
|
setInputValue(newInputValue);
|
|
}}
|
|
renderInput={(params) => <TextField {...params} fullWidth />}
|
|
renderOption={(props, option) => {
|
|
const matches = option.structured_formatting.main_text_matched_substrings || [];
|
|
|
|
const parts = parse(
|
|
option.structured_formatting.main_text,
|
|
matches.map((match) => [match.offset, match.offset + match.length])
|
|
);
|
|
|
|
return (
|
|
<li {...props}>
|
|
<Grid container alignItems="center">
|
|
<Grid item sx={{ display: 'flex', width: 44 }}>
|
|
<LocationOnIcon sx={{ color: 'text.secondary' }} />
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
sx={{
|
|
width: 'calc(100% - 44px)',
|
|
wordWrap: 'break-word'
|
|
}}
|
|
>
|
|
{parts.map((part, index) => (
|
|
<Box
|
|
key={index}
|
|
component="span"
|
|
sx={{
|
|
fontWeight: part.highlight ? 'bold' : 'regular'
|
|
}}
|
|
>
|
|
{part.text}
|
|
</Box>
|
|
))}
|
|
<Typography variant="body2" color="text.secondary">
|
|
{option.structured_formatting.secondary_text}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</li>
|
|
);
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>Door No</Typography>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.doorno}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
doorno: e.target.value
|
|
});
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
<Typography sx={{ mb: 1 }}>Suburb</Typography>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.suburb}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
suburb: e.target.value
|
|
});
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>City</Typography>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.city}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
city: e.target.value
|
|
});
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>State</Typography>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.state}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
state: e.target.value
|
|
});
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>Postcode</Typography>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.postcode}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
postcode: e.target.value
|
|
});
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>Landmark</Typography>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
defaultValue={selectedCustomer.landmark}
|
|
onChange={(e) => {
|
|
setSelectedCustomer({
|
|
...selectedCustomer,
|
|
landmark: e.target.value
|
|
});
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={6} sx={{ cursor: 'not-allowed' }}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>Latitude</Typography>
|
|
<TextField variant="outlined" fullWidth value={latlong.lat} sx={{ cursor: 'not-allowed' }} />
|
|
</Grid>
|
|
|
|
<Grid item xs={6} sx={{ cursor: 'not-allowed' }}>
|
|
{' '}
|
|
<Typography sx={{ mb: 1 }}>Longitude</Typography>
|
|
<TextField readonly variant="outlined" fullWidth value={latlong.lng} />
|
|
</Grid>
|
|
</Grid>
|
|
</DialogContent>
|
|
<DialogActions sx={{ mr: 2, mb: 2 }}>
|
|
<Button onClick={handleClose4} variant="contained" color="error" sx={{ mr: 2 }}>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
updateCustomer();
|
|
}}
|
|
variant="contained"
|
|
autoFocus
|
|
>
|
|
Update
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
{/* ======================================== || Cards || ======================================== */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
// "&::-webkit-scrollbar": {
|
|
// width: "3px", // Customize the width of the scrollbar
|
|
// },
|
|
// "&::-webkit-scrollbar-thumb": {
|
|
// backgroundColor: "#65387A", // Customize the scrollbar thumb color
|
|
// },
|
|
height: '100%'
|
|
// height: '415px',
|
|
// overflowY:'scroll',
|
|
}}
|
|
>
|
|
{/* <SimpleBar
|
|
sx={{
|
|
// overflowX: "hidden",
|
|
|
|
|
|
// height: "calc(100vh - 410px)",
|
|
// minHeight: 200,
|
|
}}
|
|
> */}
|
|
<Box sx={{ pl: 1, pr: 3, height: '100%' }}>
|
|
{/* <ChatHistory
|
|
theme={theme}
|
|
customerId={customerId}
|
|
data={data}
|
|
/> */}
|
|
<Grid
|
|
container
|
|
spacing={2}
|
|
// ref={wrapper}
|
|
sx={{ height: '100%' }}
|
|
>
|
|
<Grid item xs={12} lg={3} sm={6}>
|
|
<HoverSocialCard
|
|
primary="All Orders"
|
|
secondary={allorders === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : allorders}
|
|
// percentage={percentage1.toString()}
|
|
color={theme.palette.primary.main}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} lg={3} sm={6}>
|
|
<HoverSocialCard
|
|
primary="Pending orders"
|
|
secondary={uncoveredorders == '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : uncoveredorders}
|
|
// percentage={percentage2.toString()}
|
|
color={theme.palette.warning.main}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} lg={3} sm={6}>
|
|
<HoverSocialCard
|
|
primary="Delivered orders"
|
|
secondary={coveredorders === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : coveredorders}
|
|
// percentage={percentage3.toString()}
|
|
color={theme.palette.success.main}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} lg={3} sm={6}>
|
|
<HoverSocialCard
|
|
primary="Cancelled Orders"
|
|
secondary={cancelled === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : cancelled}
|
|
// percentage={percentage4.toString()}
|
|
color={theme.palette.secondary[600]}
|
|
/>
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
// height: '300px',
|
|
height: '100%'
|
|
}}
|
|
>
|
|
{/* <ApplicationSales data={custService} /> */}
|
|
<MainCard
|
|
title={`Orders- ${datestatus}`}
|
|
content={false}
|
|
// secondary={
|
|
// // <Link component={RouterLink} to="#" color="primary">
|
|
// 'View all'
|
|
// {/* </Link> */}
|
|
// }
|
|
secondary={
|
|
<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>
|
|
}
|
|
>
|
|
<Box
|
|
sx={{
|
|
// height: "450px",
|
|
height: '430px',
|
|
|
|
// height: "1515px",
|
|
// height: "100%",
|
|
overflowY: 'scroll',
|
|
scrollbarWidth: 'thin', // Hide scrollbar in Firefox
|
|
'&::-webkit-scrollbar': {
|
|
width: '3px' // Customize the width of the scrollbar
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
backgroundColor: '#65387A', // Customize the scrollbar thumb color
|
|
borderRadius: '6px' // Round the scrollbar thumb
|
|
},
|
|
p: 3,
|
|
pt: 0
|
|
}}
|
|
>
|
|
<TableContainer>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
{/* <TableCell >#</TableCell>
|
|
<TableCell align="right">Sales</TableCell>
|
|
<TableCell align="right">Avg. Price</TableCell>
|
|
<TableCell align="right" sx={{ pr: 3 }}>
|
|
Total
|
|
</TableCell> */}
|
|
<TableCell sx={{ pl: 3 }}>#</TableCell>
|
|
<TableCell>CUSTOMER</TableCell>
|
|
<TableCell>ORDER ID</TableCell>
|
|
<TableCell>PICKUP</TableCell>
|
|
<TableCell>DELIVERY</TableCell>
|
|
<TableCell>STATUS</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{orderlist.map((row, index) => (
|
|
<>
|
|
<TableRow hover key={index}>
|
|
{/* <TableCell sx={{ pl: 3 }}>
|
|
<Typography align="left" variant="subtitle1">
|
|
{row.customername}
|
|
</Typography>
|
|
<Typography align="left" variant="caption" color="secondary">
|
|
{row.contactno}
|
|
</Typography>
|
|
</TableCell> */}
|
|
{/* <TableCell align="right">{row.product}</TableCell>
|
|
<TableCell align="right">{row.date}</TableCell>
|
|
<TableCell align="right" sx={{ pr: 3 }}>
|
|
<span>{row.badgeText}</span>
|
|
</TableCell> */}
|
|
|
|
<TableCell sx={{ pl: 3 }}>{row.sno}</TableCell>
|
|
<TableCell align="left" sx={{ paddingLeft: '12px !important' }}>
|
|
<Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
|
|
<Avatar
|
|
alt=""
|
|
size="sm"
|
|
sx={{
|
|
width: '25px',
|
|
height: '25px'
|
|
}}
|
|
></Avatar>
|
|
<Stack direction="column">
|
|
<Typography variant="caption">{row.customername}</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
{row.contactno}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Typography variant="body2" noWrap>
|
|
{row.orderid}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{dayjs(row.deliverytime).utc().format('DD/MM/YYYY')}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
|
{dayjs(row.deliverytime).utc().format('hh:mm A')}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction="column">
|
|
<Tooltip title={row.pickupaddress}>
|
|
<Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
|
|
{/* {row.pickupaddress.slice(0, 20)} */}
|
|
{row.locationsuburb || row.pickupaddress.slice(0, 20)}
|
|
</Typography>
|
|
</Tooltip>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction="column">
|
|
<Tooltip title={row.deliveryaddress}>
|
|
<Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
|
|
{/* {row.deliveryaddress.slice(0, 20)} */}
|
|
{row.customersuburb || row.deliveryaddress.slice(0, 20)}
|
|
</Typography>
|
|
</Tooltip>
|
|
</Stack>
|
|
</TableCell>
|
|
{/* <TableCell align="left">{row.ordernotes}</TableCell> */}
|
|
<TableCell align="right" sx={{ pr: 3 }}>
|
|
<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>
|
|
</TableRow>
|
|
</>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Box>
|
|
</MainCard>
|
|
{/* <TableContainer>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>#</TableCell>
|
|
<TableCell>CUSTOMER</TableCell>
|
|
<TableCell>ORDER ID</TableCell>
|
|
<TableCell>PICKUP</TableCell>
|
|
<TableCell>DELIVERY</TableCell>
|
|
<TableCell>STATUS</TableCell>
|
|
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
|
|
{orderlist.map((row)=>{
|
|
|
|
return <>
|
|
<TableRow>
|
|
<TableCell>{row.sno}</TableCell>
|
|
<TableCell align="left" sx={{ paddingLeft: '12px !important' }}>
|
|
|
|
<Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
|
|
<Avatar
|
|
alt=""
|
|
size="sm"
|
|
sx={{
|
|
width: '25px',
|
|
height: '25px'
|
|
}}
|
|
>
|
|
|
|
</Avatar>
|
|
<Stack direction="column">
|
|
<Typography variant="caption">{row.customername}</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
|
|
{row.contactno}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Typography variant='body2' noWrap>{row.orderid}</Typography>
|
|
<Typography noWrap
|
|
sx={{ fontSize: '11px' }}>
|
|
{dayjs(row.deliverytime).utc().format('DD/MM/YYYY')}
|
|
</Typography>
|
|
<Typography noWrap
|
|
sx={{ fontSize: '11px' }}
|
|
variant='h5'
|
|
>
|
|
{dayjs(row.deliverytime).utc().format('hh:mm A')}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction='column'>
|
|
<Tooltip title={row.pickupaddress}>
|
|
<Typography variant="caption" color="textSecondary"
|
|
>
|
|
{row.pickupaddress.slice(0, 20)}
|
|
</Typography>
|
|
</Tooltip>
|
|
</Stack>
|
|
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction='column'>
|
|
<Tooltip title={row.deliveryaddress}>
|
|
<Typography variant="caption" color="textSecondary"
|
|
>
|
|
{row.deliveryaddress.slice(0, 20)}
|
|
</Typography>
|
|
</Tooltip>
|
|
</Stack>
|
|
|
|
</TableCell>
|
|
<TableCell align="left">{row.ordernotes}</TableCell>
|
|
<TableCell
|
|
>
|
|
<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>
|
|
|
|
</TableRow>
|
|
</>
|
|
})
|
|
|
|
}
|
|
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer> */}
|
|
</Grid>
|
|
{/* </Grid>
|
|
</Grid> */}
|
|
</Grid>
|
|
</Box>
|
|
{/* </SimpleBar> */}
|
|
</Grid>
|
|
{/* <Grid
|
|
item
|
|
xs={12}
|
|
sx={{
|
|
mt: 3,
|
|
bgcolor: theme.palette.background.paper,
|
|
borderTop: `1px solid ${theme.palette.divider}`,
|
|
}}
|
|
>
|
|
|
|
</Grid> */}
|
|
</Grid>
|
|
</MainCard>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* </Main> */}
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Dialog open={open}>
|
|
<DialogTitle align="left">
|
|
<Typography variant="h4">Select Filter Options</Typography>
|
|
</DialogTitle>
|
|
<DialogContent sx={{ width: '100%' }} className="datedialog">
|
|
<DateRangePicker
|
|
open={open}
|
|
toggle={() => setOpen(!open)}
|
|
id="daterange1"
|
|
onChange={(range) => {
|
|
if (range.label === 'All') {
|
|
// setDateselect('all');
|
|
setStartdate('');
|
|
setEnddate('');
|
|
|
|
setOpen(false);
|
|
} else {
|
|
// setDateselect('select');
|
|
setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
|
|
setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
|
|
if (range.label) {
|
|
setDatestatus(range.label);
|
|
} else {
|
|
setDatestatus(`[${dayjs(range.startDate).format('DD-MM-YYYY')} to ${dayjs(range.endDate).format('DD-MM-YYYY')}]`);
|
|
}
|
|
}
|
|
console.log(range);
|
|
}}
|
|
definedRanges={[
|
|
{
|
|
label: 'Today',
|
|
startDate: new Date(),
|
|
endDate: new Date()
|
|
},
|
|
{
|
|
label: 'Yesterday',
|
|
startDate: addDays(new Date(), -1),
|
|
endDate: addDays(new Date(), -1)
|
|
},
|
|
{
|
|
label: 'Tomorrow',
|
|
startDate: addDays(new Date(), +1),
|
|
endDate: addDays(new Date(), +1)
|
|
},
|
|
{
|
|
label: 'This Week',
|
|
startDate: startOfWeek(new Date()),
|
|
endDate: endOfWeek(new Date())
|
|
},
|
|
{
|
|
label: 'Last Week',
|
|
startDate: startOfWeek(addWeeks(new Date(), -1)),
|
|
endDate: endOfWeek(addWeeks(new Date(), -1))
|
|
},
|
|
{
|
|
label: 'Last 7 Days',
|
|
startDate: addWeeks(new Date(), -1),
|
|
endDate: new Date()
|
|
},
|
|
{
|
|
label: 'This Month',
|
|
startDate: startOfMonth(new Date()),
|
|
endDate: endOfMonth(new Date())
|
|
},
|
|
{
|
|
label: 'Last Month',
|
|
startDate: startOfMonth(addMonths(new Date(), -1)),
|
|
endDate: endOfMonth(addMonths(new Date(), -1))
|
|
}
|
|
// {
|
|
// label: 'All',
|
|
// startDate: new Date(),
|
|
// endDate: addDays(new Date(), -1),
|
|
// },
|
|
]}
|
|
/>
|
|
</DialogContent>
|
|
<Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
// onClick={okclicked}
|
|
onClick={() => {
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
ok
|
|
</Button>
|
|
</Stack>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Customers;
|