orderdetails , orders

2025-10-17 10:55:05 +05:30
parent 36eaf3d845
commit e6c8df5583
13 changed files with 592 additions and 1240 deletions
--- a/src/pages/nearle/orders/orders.js
+++ b/src/pages/nearle/orders/orders.js
@@ -1,15 +1,12 @@
 import * as React from 'react';
 import { enqueueSnackbar } from 'notistack';
-import { DeleteFilled, NotificationOutlined } from '@ant-design/icons';
+import { DeleteFilled } from '@ant-design/icons';
 import { useState, useEffect, Fragment, useRef } from 'react';
 import { Empty } from 'antd';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import dayjs from 'dayjs';
 var utc = require('dayjs/plugin/utc');
 dayjs.extend(utc);
 import axios from 'axios';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
 import { useTheme } from '@mui/material/styles';
 import {
@@ -27,7 +24,6 @@ import {
  TableCell,
  TableBody,
  TableHead,
-  Collapse,
  Dialog,
  TableRow,
  DialogContent,
@@ -37,16 +33,13 @@ import {
  OutlinedInput,
  InputAdornment,
  Skeleton,
-  CircularProgress,
-  DialogActions
+  TextField,
+  Autocomplete
 } from '@mui/material';
-import MainCard from 'components/MainCard';
 import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
 import ClearIcon from '@mui/icons-material/Clear';
 import { addDays, addMonths, addWeeks, endOfMonth, endOfWeek, startOfMonth, startOfWeek } from 'date-fns';
 import { DateRangePicker } from 'mui-daterange-picker';
-import { useNavigate } from 'react-router';
-import PropTypes from 'prop-types';
 import TableContainer from '@mui/material/TableContainer';
 import TablePagination from '@mui/material/TablePagination';
 import TableSortLabel from '@mui/material/TableSortLabel';
@@ -55,31 +48,6 @@ import Loader from 'components/Loader';
 import { FilterList } from '@mui/icons-material';

 const Orders = () => {
-  function descendingComparator(a, b, orderBy) {
-    if (b[orderBy] < a[orderBy]) {
-      return -1;
-    }
-    if (b[orderBy] > a[orderBy]) {
-      return 1;
-    }
-    return 0;
-  }
-
-  function getComparator(order, orderBy) {
-    return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
-  }
-  function stableSort(array, comparator) {
-    const stabilizedThis = array.map((el, index) => [el, index]);
-    stabilizedThis.sort((a, b) => {
-      const order = comparator(a[0], b[0]);
-      if (order !== 0) {
-        return order;
-      }
-      return a[1] - b[1];
-    });
-    return stabilizedThis.map((el) => el[0]);
-  }
-
  const tid = localStorage.getItem('tenantid');
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
@@ -92,22 +60,16 @@ const Orders = () => {
  const [percentage3, setPercentage3] = useState('0');
  const [percentage4, setPercentage4] = useState('0');
  let [orderarr, setArr] = useState([]);
-  let [orderarrcovered, setArrcovered] = useState([]);
-  const [allorders, setAllorders] = useState('');
-  const [activeorders, setActiveorders] = useState('');
  const [coveredorders, setCoveredorders] = useState('');
  const [uncoveredorders, setUncoveredorders] = useState('');
  const [cancelled, setCancelled] = useState('');
-  const [closed, setClosed] = useState('');
  const [created, setCreated] = useState('');
  const [tabstatus, setTabstatus] = useState('Created');
  const [loading, setLoading] = useState(true);
  const theme = useTheme();
  let [rows, setRows] = useState([]);
  const [tabvalue, setTabvalue] = useState(0);
-  let navigate = useNavigate();
  const [open, setOpen] = useState(false);
-  const [dateselect, setDateselect] = useState('select');
  const [tabstatus1, setTabstatus1] = useState('Today');
  const [datestatus, setDatestatus] = useState('Today');
  const [searchword, setSearchword] = useState('');
@@ -175,52 +137,15 @@ const Orders = () => {
    if (tabstatus1 === 'Tomorrow') {
      setEnddate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
      setStartdate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
-      setDateselect('select');
    } else if (tabstatus1 === 'Today') {
      setEnddate(new Date().toISOString().substring(0, 10));
      setStartdate(new Date().toISOString().substring(0, 10));
-      setDateselect('select');
    } else if (tabstatus1 === 'Week') {
      setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10));
      setEnddate(new Date().toISOString().substring(0, 10));
-      setDateselect('select');
    }
-    // else if (tabstatus1 === 'All') {
-    //   setEnddate('');
-    //   setStartdate('');
-
-    //   setDateselect('all');
-    // }
  }, [tabstatus1]);

-  const choosedate = (date) => {
-    setStartdate(date.$d.toISOString().substring(0, 10));
-    setEnddate(date.$d.toISOString().substring(0, 10));
-    setTabstatus1('');
-  };
-
-  useEffect(() => {
-    if (searchword) {
-      let arr = orderarr.filter((val) => {
-        return (
-          val.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.pickupcustomer.toString().toLowerCase().includes(searchword.toLowerCase()) ||
-          val.pickupcontactno.toString().toLowerCase().includes(searchword.toLowerCase()) ||
-          val.pickupsuburb.toString().toLowerCase().includes(searchword.toLowerCase()) ||
-          val.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.deliverysuburb.toLowerCase().includes(searchword.toLowerCase()) ||
-          val.ordernotes.toString().toLowerCase().includes(searchword.toLowerCase())
-        );
-      });
-      console.log(arr);
-      setRows([...arr]);
-    } else {
-      setRows([...orderarr]);
-    }
-  }, [searchword]);
-
  const fetchtablecovered = async () => {
    try {
      await axios
@@ -229,7 +154,7 @@ const Orders = () => {
            process.env.REACT_APP_URL
          }/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
            page + 1
-          }&pagesize=${rowsPerPage}`
+          }&pagesize=${rowsPerPage}&keyword=${searchword}`
        )
        .then((res) => {
          setArr(res.data.details);
@@ -244,7 +169,7 @@ const Orders = () => {
  };
  useEffect(() => {
    fetchtablecovered();
-  }, [tabstatus, startdate, enddate, page, rowsPerPage]);
+  }, [tabstatus, startdate, enddate, page, rowsPerPage, searchword]);

  const fetchpercentage = async () => {
    setLoading(true);
@@ -253,12 +178,10 @@ const Orders = () => {
        .get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}`)
        .then((res) => {
          console.log(res);
-          setAllorders(res.data.details.total.toString());
          setCoveredorders(res.data.details.delivered.toString());
          setCancelled(res.data.details.cancelled.toString());
          setUncoveredorders(res.data.details.pending.toString());
          setCreated(res.data.details.created.toString());
-          setClosed(res.data.details.delivered.toString());
          setPercentage1((Math.round((res.data.details.created / res.data.details.total) * 100) || 0).toString());
          setPercentage3((Math.round((res.data.details.delivered / res.data.details.total) * 100) || 0).toString());
          setPercentage4((Math.round((res.data.details.cancelled / res.data.details.total) * 100) || 0).toString());
@@ -331,11 +254,7 @@ const Orders = () => {
      disablePadding: false,
      label: 'Delivery'
    },
-    //   {
-    //     id: 'ordervalue',
-    //     disablePadding: false,
-    //     label: 'VALUE $',
-    //   },
+
    {
      id: 'itemcount',
      disablePadding: false,
@@ -389,15 +308,6 @@ const Orders = () => {
  }

  function EnhancedTable() {
-    const [order, setOrder] = React.useState('asc');
-    const [orderBy, setOrderBy] = React.useState('calories');
-    const [selected, setSelected] = React.useState([]);
-
-    const [expandopen, setExpandopen] = React.useState('');
-
-    const [dialogopen, setDialogopen] = useState(false);
-    const [stafflist, setStafflist] = useState([]);
-    const [loading1, setLoading1] = useState(false);
    const [open, setOpen] = useState(false);
    const [orderheaderid, setOrderheaderid] = useState('');

@@ -411,11 +321,6 @@ const Orders = () => {
        .then((res) => {
          console.log(res);
          if (res.data.status) {
-            // if (orderheaderid && tenantid) {
-            //   fetchorderdetails();
-            //   fetchorderaddons();
-            //   fetchorderattires();
-            // }
            enqueueSnackbar('Order Cancelled Successfully', {
              variant: 'success',
              anchorOrigin: { vertical: 'top', horizontal: 'right' },
@@ -431,21 +336,6 @@ const Orders = () => {
        });
    };

-    const handleRequestSort = (event, property) => {
-      const isAsc = orderBy === property && order === 'asc';
-      setOrder(isAsc ? 'desc' : 'asc');
-      setOrderBy(property);
-    };
-
-    const handleSelectAllClick = (event) => {
-      if (event.target.checked) {
-        const newSelected = rows.map((n) => n.name);
-        setSelected(newSelected);
-        return;
-      }
-      setSelected([]);
-    };
-
    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };
@@ -455,16 +345,6 @@ const Orders = () => {
      setPage(0);
    };

-    const isSelected = (name) => selected.indexOf(name) !== -1;
-
-    // Avoid a layout jump when reaching the last page with empty rows.
-    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
-
-    const visibleRows = React.useMemo(
-      () => stableSort(rows, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
-      [order, orderBy, page, rowsPerPage]
-    );
-
    const handleClose = () => {
      setOpen(false);
      setOrderheaderid('');
@@ -478,15 +358,7 @@ const Orders = () => {
      // const [deletepassword, setDeletepassword] = useState('');

      return (
-        <Dialog
-          open={open}
-          onClose={() => handleClose(false)}
-          // keepMounted
-          // TransitionComponent={PopupTransition}
-          maxWidth="xs"
-          // aria-labelledby="column-delete-title"
-          // aria-describedby="column-delete-description"
-        >
+        <Dialog open={open} onClose={() => handleClose(false)} maxWidth="xs">
          <DialogContent sx={{ mt: 2, my: 1 }}>
            <Stack alignItems="center" spacing={3.5}>
              <Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
@@ -580,7 +452,7 @@ const Orders = () => {
              </>
            )}
            <TableBody>
-              {rows.length == 0 && (
+              {rows?.length == 0 && (
                <>
                  <TableCell colSpan={7}>
                    <Stack width={'100%'} direction={'row'} justifyContent={'center'}>
@@ -590,14 +462,13 @@ const Orders = () => {
                </>
              )}

-              {rows.map((row, index) => {
+              {rows?.map((row, index) => {
                return (
                  <>
                    <TableRow
                      key={index}
                      sx={{
-                        cursor: 'pointer',
-                        backgroundColor: expandopen === row.sno ? '#f5f5f5' : ''
+                        cursor: 'pointer'
                      }}
                    >
                      <TableCell padding="none">
@@ -633,26 +504,13 @@ const Orders = () => {
                            </Typography>
                            <Tooltip title={row.pickupaddress}>
                              <Typography variant="caption" color="textSecondary">
-                                {/* {row.pickupaddress.slice(0, 20)} */}
                                {row.pickupsuburb || row.pickupaddress.slice(0, 20)}
                              </Typography>
                            </Tooltip>
                          </Stack>
                        </Stack>
-                        {/* <Stack direction='column'>
-
-                        </Stack> */}
                      </TableCell>
                      <TableCell align="left">
-                        {/* <Stack direction='column'>
-                          <Tooltip title={row.deliveryaddress}>
-                            <Typography variant="caption" color="textSecondary"
-                            >
-                              {row.customersuburb || row.deliveryaddress.slice(0, 20)}
-
-                            </Typography>
-                          </Tooltip>
-                        </Stack> */}
                        <Stack direction={'row'} spacing={1}>
                          <Avatar
                            alt=""
@@ -727,8 +585,8 @@ const Orders = () => {
        <TablePagination
          rowsPerPageOptions={[5, 10, 25, 50, 100]}
          component="div"
-          count={pageCount}
-          rowsPerPage={rowsPerPage}
+          count={pageCount || 0}
+          rowsPerPage={rowsPerPage || 0}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
@@ -740,16 +598,13 @@ const Orders = () => {
  return (
    <>
      {loading && <Loader />}
-      <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-        <Grid item xs={12} sx={{ mb: -2.25 }}>
-          <Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems="center" spacing={2}>
-            <Stack direction="column" alignItems="flex-start" spacing={1}>
-              <Typography variant="h3">Orders</Typography>
-            </Stack>
-          </Stack>
-        </Grid>

-        <Grid item xs={12} lg={3} sm={6}>
+      <Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems="center" spacing={2}>
+        <Typography variant="h3">Orders</Typography>
+      </Stack>
+
+      <Grid container spacing={3} sx={{ mt: 0.1 }}>
+        <Grid item xs={12} sm={6} md={3}>
          <HoverSocialCard
            primary="Created Orders"
            secondary={created === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : created}
@@ -757,7 +612,7 @@ const Orders = () => {
            color={theme.palette.primary.main}
          />
        </Grid>
-        <Grid item xs={12} lg={3} sm={6}>
+        <Grid item xs={12} sm={6} md={3}>
          <HoverSocialCard
            primary="Pending orders"
            secondary={uncoveredorders == '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : uncoveredorders}
@@ -766,7 +621,7 @@ const Orders = () => {
          />
        </Grid>

-        <Grid item xs={12} lg={3} sm={6}>
+        <Grid item xs={12} sm={6} md={3}>
          <HoverSocialCard
            primary="Delivered orders"
            secondary={coveredorders === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : coveredorders}
@@ -775,7 +630,7 @@ const Orders = () => {
          />
        </Grid>

-        <Grid item xs={12} lg={3} sm={6}>
+        <Grid item xs={12} sm={6} md={3}>
          <HoverSocialCard
            primary="Cancelled Orders"
            secondary={cancelled === '' ? <Skeleton sx={{ width: '30px' }} animation="wave" /> : cancelled}
@@ -783,80 +638,65 @@ const Orders = () => {
            color={theme.palette.secondary[600]}
          />
        </Grid>
+      </Grid>

-        <Grid item xs={12} sx={{ mb: -3 }}>
-          <Stack direction={'row'} justifyContent={'space-between'}>
-            {startdate && enddate && (
-              <Stack direction="row" spacing={2}>
-                <Chip label={`Orders-${datestatus ? datestatus : ''}`} color="primary" variant="light" size="small" />
-                <Chip
-                  label={
-                    <Typography noWrap color="secondary">
-                      {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
-                    </Typography>
-                  }
-                  variant="combined"
-                  color="warning"
-                  size="small"
-                />
-              </Stack>
-            )}
-            {(!startdate || !enddate) && (
-              <>
-                <Stack direction="row" spacing={2}>
-                  <Chip label="Orders-All" color="primary" variant="light" size="small" />
-                </Stack>
-              </>
-            )}
+      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} sx={{ my: 2 }}>
+        {startdate && enddate && (
+          <Stack direction="row" spacing={2}>
+            <Chip label={`Orders-${datestatus ? datestatus : ''}`} color="primary" variant="light" size="small" />

-            <Tooltip title="Order Filter">
-              <IconButton
-                color="secondary"
-                variant="light"
-                sx={{ color: 'text.primary', bgcolor: 'grey.200', display: { xs: 'none', md: 'flex' } }}
-                aria-haspopup="true"
-                onClick={() => setOpen(true)}
-              >
-                <FilterList />
-              </IconButton>
-            </Tooltip>
+            <Chip
+              label={
+                <Typography noWrap color="secondary">
+                  {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
+                </Typography>
+              }
+              variant="combined"
+              color="warning"
+              size="small"
+            />
          </Stack>
-        </Grid>
+        )}

-        <Grid item xs={12}>
-          <Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
-            <Stack
-              alignItems="center"
-              justifyContent="space-between"
-              direction="row"
-              sx={{
-                p: 2,
-                width: '100%'
-              }}
-            >
-              <Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto">
-                <Tab
-                  label="Created"
-                  icon={<Chip label={createdLenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-                <Tab
-                  label="Pending"
-                  icon={<Chip label={pendingLenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-                <Tab
-                  label="Delivered"
-                  icon={<Chip label={deliveredlenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-                <Tab
-                  label="Cancelled"
-                  icon={<Chip label={cancelledLenght} color="primary" variant="light" size="small" />}
-                  iconPosition="end"
-                />
-              </Tabs>
+        <Tooltip title="Order Filter">
+          <IconButton
+            color="secondary"
+            variant="light"
+            sx={{ color: 'text.primary', bgcolor: 'grey.200', display: { xs: 'none', md: 'flex' } }}
+            aria-haspopup="true"
+            onClick={() => setOpen(true)}
+          >
+            <FilterList />
+          </IconButton>
+        </Tooltip>
+      </Stack>

+      <Grid item xs={12}>
+        <Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
+          <Stack
+            alignItems="center"
+            justifyContent="space-between"
+            direction="row"
+            sx={{
+              p: 2,
+              width: '100%'
+            }}
+          >
+            <Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto">
+              <Tab label="Created" icon={<Chip label={createdLenght} color="primary" variant="light" size="small" />} iconPosition="end" />
+              <Tab label="Pending" icon={<Chip label={pendingLenght} color="primary" variant="light" size="small" />} iconPosition="end" />
+              <Tab
+                label="Delivered"
+                icon={<Chip label={deliveredlenght} color="primary" variant="light" size="small" />}
+                iconPosition="end"
+              />
+              <Tab
+                label="Cancelled"
+                icon={<Chip label={cancelledLenght} color="primary" variant="light" size="small" />}
+                iconPosition="end"
+              />
+            </Tabs>
+            <Stack>
              <FormControl sx={{ width: 250, display: { xs: 'none', md: 'flex' } }}>
                <OutlinedInput
                  inputRef={textFieldRef}
@@ -894,97 +734,95 @@ const Orders = () => {
                />
              </FormControl>
            </Stack>
-
-            <Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
-              <EnhancedTable />
-            </Box>
-          </Box>
-        </Grid>
-
-        <Dialog open={open}>
-          <DialogTitle align="left">
-            <Typography variant="h4">Select Filter Options</Typography>
-          </DialogTitle>
-          <DialogContent sx={{ width: '100%' }} className="datedialog">
-            <DateRangePicker
-              open={open}
-              toggle={() => setOpen(!open)}
-              id="daterange1"
-              onChange={(range) => {
-                if (range.label === 'All') {
-                  setDateselect('all');
-                  setStartdate('');
-                  setEnddate('');
-
-                  setOpen(false);
-                } else {
-                  setDateselect('select');
-                  setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
-                  setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
-                  if (range.label) {
-                    setDatestatus(range.label);
-                  } else {
-                    setDatestatus('');
-                  }
-                }
-                console.log(range);
-              }}
-              definedRanges={[
-                {
-                  label: 'Today',
-                  startDate: new Date(),
-                  endDate: new Date()
-                },
-                {
-                  label: 'Yesterday',
-                  startDate: addDays(new Date(), -1),
-                  endDate: addDays(new Date(), -1)
-                },
-                {
-                  label: 'Tomorrow',
-                  startDate: addDays(new Date(), +1),
-                  endDate: addDays(new Date(), +1)
-                },
-                {
-                  label: 'This Week',
-                  startDate: startOfWeek(new Date()),
-                  endDate: endOfWeek(new Date())
-                },
-                {
-                  label: 'Last Week',
-                  startDate: startOfWeek(addWeeks(new Date(), -1)),
-                  endDate: endOfWeek(addWeeks(new Date(), -1))
-                },
-                {
-                  label: 'Last 7 Days',
-                  startDate: addWeeks(new Date(), -1),
-                  endDate: new Date()
-                },
-                {
-                  label: 'This Month',
-                  startDate: startOfMonth(new Date()),
-                  endDate: endOfMonth(new Date())
-                },
-                {
-                  label: 'Last Month',
-                  startDate: startOfMonth(addMonths(new Date(), -1)),
-                  endDate: endOfMonth(addMonths(new Date(), -1))
-                }
-                // {
-                //   label: 'All',
-                //   startDate: new Date(),
-                //   endDate: addDays(new Date(), -1),
-                // },
-              ]}
-            />
-          </DialogContent>
-          <Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
-            <Button variant="contained" size="small" onClick={okclicked}>
-              ok
-            </Button>
          </Stack>
-        </Dialog>
+
+          <Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
+            <EnhancedTable />
+          </Box>
+        </Box>
      </Grid>
+
+      <Dialog open={open}>
+        <DialogTitle align="left">
+          <Typography variant="h4">Select Filter Options</Typography>
+        </DialogTitle>
+        <DialogContent sx={{ width: '100%' }} className="datedialog">
+          <DateRangePicker
+            open={open}
+            toggle={() => setOpen(!open)}
+            id="daterange1"
+            onChange={(range) => {
+              if (range.label === 'All') {
+                setStartdate('');
+                setEnddate('');
+
+                setOpen(false);
+              } else {
+                setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
+                setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
+                if (range.label) {
+                  setDatestatus(range.label);
+                } else {
+                  setDatestatus('');
+                }
+              }
+              console.log(range);
+            }}
+            definedRanges={[
+              {
+                label: 'Today',
+                startDate: new Date(),
+                endDate: new Date()
+              },
+              {
+                label: 'Yesterday',
+                startDate: addDays(new Date(), -1),
+                endDate: addDays(new Date(), -1)
+              },
+              {
+                label: 'Tomorrow',
+                startDate: addDays(new Date(), +1),
+                endDate: addDays(new Date(), +1)
+              },
+              {
+                label: 'This Week',
+                startDate: startOfWeek(new Date()),
+                endDate: endOfWeek(new Date())
+              },
+              {
+                label: 'Last Week',
+                startDate: startOfWeek(addWeeks(new Date(), -1)),
+                endDate: endOfWeek(addWeeks(new Date(), -1))
+              },
+              {
+                label: 'Last 7 Days',
+                startDate: addWeeks(new Date(), -1),
+                endDate: new Date()
+              },
+              {
+                label: 'This Month',
+                startDate: startOfMonth(new Date()),
+                endDate: endOfMonth(new Date())
+              },
+              {
+                label: 'Last Month',
+                startDate: startOfMonth(addMonths(new Date(), -1)),
+                endDate: endOfMonth(addMonths(new Date(), -1))
+              }
+              // {
+              //   label: 'All',
+              //   startDate: new Date(),
+              //   endDate: addDays(new Date(), -1),
+              // },
+            ]}
+          />
+        </DialogContent>
+        <Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
+          <Button variant="contained" size="small" onClick={okclicked}>
+            ok
+          </Button>
+        </Stack>
+      </Dialog>
    </>
  );
 };