invoice updated

src/pages/nearle/orders/orders.js

@@ -1,9 +1,7 @@
-// import React from 'react';
-// import Createstaff from 'pages/createstaff'
+import * as React from 'react';
 import { enqueueSnackbar } from 'notistack';
 import { DeleteFilled, NotificationOutlined } from '@ant-design/icons';
-
-import { useState, useEffect, Fragment } from 'react';
+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';
@@ -52,28 +50,11 @@ import {
   Skeleton,
   CircularProgress,
   DialogActions
-  // Popper,
-  // ClickAwayListener
-
-  // Checkbox
 } from '@mui/material';
 import MainCard from 'components/MainCard';
 
-// import {  useSelector } from 'store';
-// import { useDispatch } from 'react-redux';
-
-import {
-  SearchOutlined,
-  EnvironmentOutlined,
-  UserOutlined,
-  //  MoreOutlined ,
-  CloseOutlined
-} from '@ant-design/icons';
-import { PopupTransition } from 'components/@extended/Transitions';
-
-// import FilterList from '@mui/icons-material/FilterList';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
+import ClearIcon from '@mui/icons-material/Clear';
 
 import {
   addDays,
@@ -88,52 +69,15 @@ import {
   // startOfYear,
 } from 'date-fns';
 
-// import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
-// import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
-// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-// import { DateRangePicker } from "mui-daterange-picker-orient";
 import { DateRangePicker } from 'mui-daterange-picker';
-
-// import EnhancedTable from 'components/tablemuiedit'
-import {
-  // CloseOutlined,
-  //  PlusOutlined,
-  EyeTwoTone
-  // EditTwoTone,
-  // DeleteTwoTone
-} from '@ant-design/icons';
-
 import { useNavigate } from 'react-router';
-
-import * as React from 'react';
 import PropTypes from 'prop-types';
-// import { alpha } from '@mui/material/styles';
-// import Box from '@mui/material/Box';
-// import Table from '@mui/material/Table';
-// import TableBody from '@mui/material/TableBody';
-// import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
-// import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
-// import TableRow from '@mui/material/TableRow';
-// import TablePagination from '@mui/material/TablePagination';
 import TableSortLabel from '@mui/material/TableSortLabel';
-// import Toolbar from '@mui/material/Toolbar';
-// import Typography from '@mui/material/Typography';
-// import Paper from '@mui/material/Paper';
-// import Checkbox from '@mui/material/Checkbox';
-// import IconButton from '@mui/material/IconButton';
-// import Tooltip from '@mui/material/Tooltip';
-// import FormControlLabel from '@mui/material/FormControlLabel';
-// // import Switch from '@mui/material/Switch';
-// import DeleteIcon from '@mui/icons-material/Delete';
-// import FilterListIcon from '@mui/icons-material/FilterList';
 import { visuallyHidden } from '@mui/utils';
 import Loader from 'components/Loader';
 import { FilterList } from '@mui/icons-material';
-// import MainCard from 'components/MainCard';
-// import DialogTitle from 'themes/overrides/DialogTitle';
-// import MainCard from 'components/MainCard';
 
 const Orders = () => {
   function descendingComparator(a, b, orderBy) {
@@ -150,10 +94,6 @@ const Orders = () => {
     return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
   }
 
-  // Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-  // stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-  // only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-  // with exampleArray.slice().sort(exampleComparator)
   function stableSort(array, comparator) {
     const stabilizedThis = array.map((el, index) => [el, index]);
     stabilizedThis.sort((a, b) => {
@@ -1073,7 +1013,6 @@ const Orders = () => {
   const [closed, setClosed] = useState('');
   const [picked, setPicked] = useState('');
   const [created, setCreated] = useState('');
-
   const [tabstatus, setTabstatus] = useState('Created');
   const [loading, setLoading] = useState(true);
   const theme = useTheme();
@@ -1082,7 +1021,6 @@ const Orders = () => {
   let navigate = useNavigate();
   const [open, setOpen] = useState(false);
   const [dateselect, setDateselect] = useState('select');
-
   // const [tabstatus1, setTabstatus1] = useState('All');
   const [tabstatus1, setTabstatus1] = useState('Today');
 
@@ -1189,7 +1127,28 @@ const Orders = () => {
   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();
@@ -1958,23 +1917,36 @@ const Orders = () => {
 
               <FormControl sx={{ width: 250, display: { xs: 'none', md: 'flex' } }}>
                 <OutlinedInput
+                  inputRef={textFieldRef}
                   size="small"
                   id="header-search"
-                  startAdornment={
-                    <InputAdornment position="start" sx={{ mr: -0.5 }}>
-                      <SearchOutlined />
-                    </InputAdornment>
-                  }
                   aria-describedby="header-search-text"
                   inputProps={{
                     'aria-label': 'weight'
                   }}
-                  placeholder="Search"
+                  placeholder="Search (ctrl+k)"
                   value={searchword}
                   onChange={(e) => {
                     setSearchword(e.target.value);
                   }}
                   autoComplete="off"
+                  startAdornment={
+                    <InputAdornment position="start" sx={{ mr: -0.5 }}>
+                      <SearchOutlined style={{ color: theme.palette.primary.main }} />
+                    </InputAdornment>
+                  }
+                  endAdornment={
+                    <Tooltip title="clear">
+                      <IconButton
+                        sx={{ visibility: searchword ? 'visible' : 'hidden' }}
+                        onClick={() => {
+                          setSearchword('');
+                        }}
+                      >
+                        <ClearIcon fontSize="small" sx={{ color: theme.palette.primary.main }} />
+                      </IconButton>
+                    </Tooltip>
+                  }
                 />
               </FormControl>
             </Stack>