invoice updated

package-lock.json

@@ -50,11 +50,13 @@
         "react-google-autocomplete": "^2.7.3",
         "react-icons": "^4.12.0",
         "react-intl": "^6.4.1",
+        "react-loading-icons": "^1.1.0",
         "react-redux": "^8.0.5",
         "react-router": "^6.10.0",
         "react-router-dom": "^6.10.0",
         "react-scripts": "^5.0.1",
         "react-timer-hook": "^3.0.5",
+        "react-to-print": "^2.15.1",
         "react-virtuoso": "^4.7.0",
         "react18-input-otp": "^1.1.3",
         "redux": "^4.2.1",
@@ -16923,6 +16925,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-loading-icons": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz",
+      "integrity": "sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g==",
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -17529,6 +17539,15 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-to-print": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.15.1.tgz",
+      "integrity": "sha512-1foogIFbCpzAVxydkhBiDfMiFYhIMphiagDOfcG4X/EcQ+fBPqJ0rby9Wv/emzY1YLkIQy/rEgOrWQT+rBKhjw==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -32278,6 +32297,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-loading-icons": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz",
+      "integrity": "sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g=="
+    },
     "react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -32678,6 +32702,12 @@
       "integrity": "sha512-n+98SdmYvui2ne3KyWb3Ldu4k0NYQa3g/VzW6VEIfZJ8GAk/jJsIY700M8Nd2vNSTj05c7wKyQfJBqZ0x7zfiA==",
       "requires": {}
     },
+    "react-to-print": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.15.1.tgz",
+      "integrity": "sha512-1foogIFbCpzAVxydkhBiDfMiFYhIMphiagDOfcG4X/EcQ+fBPqJ0rby9Wv/emzY1YLkIQy/rEgOrWQT+rBKhjw==",
+      "requires": {}
+    },
     "react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -45,11 +45,13 @@
     "react-google-autocomplete": "^2.7.3",
     "react-icons": "^4.12.0",
     "react-intl": "^6.4.1",
+    "react-loading-icons": "^1.1.0",
     "react-redux": "^8.0.5",
     "react-router": "^6.10.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
     "react-timer-hook": "^3.0.5",
+    "react-to-print": "^2.15.1",
     "react-virtuoso": "^4.7.0",
     "react18-input-otp": "^1.1.3",
     "redux": "^4.2.1",

src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 // material-ui
@@ -117,7 +117,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
       }
     } else {
       if (level === selectedLevel) {
-        setOpen(false);
+        // setOpen(false);
         if (!miniMenuOpened && !drawerOpen && !selected) {
           setSelected(null);
         }
@@ -147,7 +147,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   };
 
   useEffect(() => {
-    setOpen(false);
+    // setOpen(false);
     if (!miniMenuOpened) {
       setSelected(null);
     }
@@ -228,7 +228,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             disableRipple
             selected={selected === menu.id}
             {...(!drawerOpen && { onMouseEnter: handleClick, onMouseLeave: handleClose })}
-            onClick={handleClick}
+            onClick={() => {
+              handleClick();
+              if (open == true) {
+                setOpen(false);
+              }
+            }}
             sx={{
               pl: drawerOpen ? `${level * 28}px` : 1.5,
               py: !drawerOpen && level === 1 ? 1.25 : 1,
@@ -236,7 +241,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               ...(drawerOpen && {
                 '&:hover': {
                   // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter'
-                  bgcolor: '#7b1fa2'
+                  bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : '#7b1fa2'
                 },
                 '&.Mui-selected': {
                   bgcolor: 'transparent',
@@ -247,7 +252,6 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               ...(!drawerOpen && {
                 '&:hover': {
                   bgcolor: 'transparent'
-                  // bgcolor:'#7b1fa2'
                 },
                 '&.Mui-selected': {
                   '&:hover': {

src/layout/MainLayout/Drawer/DrawerHeader/index.js

@@ -11,8 +11,8 @@ import Logo from 'components/logo';
 import { MenuOrientation } from 'config';
 import useConfig from 'hooks/useConfig';
 
-import logo from 'assets/images/logo-nearle9.png'
+import logo from 'assets/images/logo-nearle9.png';
-import logo1 from 'assets/images/logo-sm1.png'
+import logo1 from 'assets/images/logo-sm1.png';
 // ==============================|| DRAWER HEADER ||============================== //
 
 const DrawerHeader = ({ open }) => {
@@ -36,18 +36,16 @@ const DrawerHeader = ({ open }) => {
     >
       {/* <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} /> */}
 
-      {(open) &&
+      {open && (
-        <img src={logo}
+        <img
+          src={logo}
           //  width='160px'
           //  height='45px'
           // width='170px'
-         alt='logo'/>
+          alt="logo"
-      }
+        />
-      {(!open) &&
+      )}
-        <img src={logo1} 
+      {!open && <img src={logo1} width="40px" alt="logo" />}
-        width='40px'
-          alt='logo'/>
-      }
     </DrawerHeaderStyled>
   );
 };

src/layout/MainLayout/Header/HeaderContent/index.js

@@ -1,9 +1,21 @@
 import { useMemo, useState } from 'react';
 
 // material-ui
-import { Box, useMediaQuery ,Stack,Tooltip,IconButton,Popper,
+import {
-    ClickAwayListener,List,ListItem,ListItemButton,ListItemText,
+  Box,
-    Grid,ListItemIcon,Typography
+  useMediaQuery,
+  Stack,
+  Tooltip,
+  IconButton,
+  Popper,
+  ClickAwayListener,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Grid,
+  ListItemIcon,
+  Typography
 } from '@mui/material';
 
 import Transitions from 'components/@extended/Transitions';
@@ -33,19 +45,19 @@ const HeaderContent = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const megaMenu = useMemo(() => <MegaMenuSection />, []);
 
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const theme = useTheme();
   // eslint-disable-next-line react-hooks/exhaustive-deps
   // const megaMenu = useMemo(() => <MegaMenuSection />, []);
   const iconBackColorOpen = 'grey.300';
   const iconBackColor = 'grey.100';
-const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const handleToggle = (e) => {
     setOpen(!open);
     setAnchorEl(e.currentTarget);
-  }
+  };
   const handleClickAway = () => {
     setOpen(false);
   };
@@ -53,15 +65,15 @@ const navigate = useNavigate()
   return (
     <>
       {/* {!matchesXs && <Search />} */}
-      <Stack
+      <Stack width="100%" direction="row" justifyContent="space-between" spacing={2} alignItems="center">
-        width='100%'
-        direction='row' justifyContent='space-between' spacing={2} alignItems='center'>
         {/* {!matchesXs && megaMenu} */}
-      <Typography variant='h5' sx={{ml:2,color:'#fff'}}>{localStorage.getItem('firstname') || ''}</Typography>
+        <Typography variant="h5" sx={{ ml: 2, color: '#fff' }}>
+          {localStorage.getItem('firstname') || ''}
+        </Typography>
         {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
         <Stack direction={'row'} spacing={2}>
           <Box sx={{ flexShrink: 0, ml: 0.75 }}>
-          <Tooltip title='Quick Menu'>
+            <Tooltip title="Quick Menu">
               <IconButton
                 // color="secondary"
                 // variant="light"
@@ -69,10 +81,11 @@ const navigate = useNavigate()
                 //   color: 'text.primary',
                 //   bgcolor: open ? iconBackColorOpen : iconBackColor
                 // }}
-              sx={{ color: '#fff',
+                sx={{
+                  color: '#fff',
                   fontSize: '20px',
                   //  bgcolor: open ? iconBackColorOpen : iconBackColor
-              bgcolor:'transparent',
+                  bgcolor: 'transparent'
                   // border:'1px solid #fff'
                 }}
                 aria-label="open profile"
@@ -84,8 +97,10 @@ const navigate = useNavigate()
                 <WindowsOutlined />
               </IconButton>
             </Tooltip>
-          <Popper open={open} placement='bottom' anchorEl={anchorEl}
+            <Popper
-
+              open={open}
+              placement="bottom"
+              anchorEl={anchorEl}
               role={undefined}
               // transition
               disablePortal
@@ -99,26 +114,27 @@ const navigate = useNavigate()
                   }
                 ]
               }}
-
               sx={{
                 // backgroundColor:'white',
                 // border:1,
                 p: 0,
                 zIndex: 5000,
-              boxShadow: theme.customShadows.z1,
+                boxShadow: theme.customShadows.z1
-
+              }}
-            }}>
+            >
-            <Transitions type="grow" position='top' sx={{ overflow: 'hidden' }} in={open}>
+              <Transitions type="grow" position="top" sx={{ overflow: 'hidden' }} in={open}>
                 {/* <Box sx={{
                 backgroundColor: 'white',
                 border: '1px solid #e0e0e0 !important',
                 borderRadius: 1,
               }}> */}
-              <Box sx={{
+                <Box
+                  sx={
+                    {
                       //  boxShadow: theme.customShadows.z1,
-
+                    }
-              }}>
+                  }
-
+                >
                   <ClickAwayListener onClickAway={handleClickAway}>
                     {/* <List disablePadding> */}
                     <List
@@ -136,12 +152,14 @@ const navigate = useNavigate()
                         }
                       }}
                     >
-
+                      <ListItemButton
-                    <ListItemButton selected={location.pathname === '/orders/create'} onClick={() => {
+                        selected={location.pathname === '/orders/create'}
+                        onClick={() => {
                           // console.log(const location = useLocation();)
-                      navigate('/orders/create')
+                          navigate('/orders/create');
-                      handleClickAway()
+                          handleClickAway();
-                    }} >
+                        }}
+                      >
                         <ListItemText
                           primary={
                             <Grid container>
@@ -149,7 +167,6 @@ const navigate = useNavigate()
                                 <MailOutlined />
                               </ListItemIcon>
                               <Typography color="textPrimary">Create Order</Typography>
-
                             </Grid>
                           }
                         />
@@ -175,9 +192,10 @@ const navigate = useNavigate()
                       <ListItemButton
                         selected={location.pathname === '/customers/create'}
                         onClick={() => {
-                        navigate('/customers/create')
+                          navigate('/customers/create');
-                        handleClickAway()
+                          handleClickAway();
-                      }} >
+                        }}
+                      >
                         <ListItemText
                           primary={
                             <Grid container>
@@ -185,7 +203,6 @@ const navigate = useNavigate()
                                 <UserOutlined />
                               </ListItemIcon>
                               <Typography color="textPrimary">Create Customer</Typography>
-
                             </Grid>
                           }
                         />
@@ -234,15 +251,12 @@ const navigate = useNavigate()
             </Popper>
           </Box>
 
-
-     
           <Notification />
 
           {/* <Message /> */}
           {/* {!matchesXs && <Profile />}
       {matchesXs && <MobileSection />} */}
-      <Tooltip title='Notifications'>
+          <Tooltip title="Notifications">
-
             <Profile />
           </Tooltip>
         </Stack>

src/layout/MainLayout/Header/index.js

@@ -46,11 +46,16 @@ const Header = () => {
           // color="secondary"
           // variant="light"
           // sx={{ color: 'text.primary', bgcolor: drawerOpen ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
-          sx={{ color: '#fff', bgcolor: 'transparent', ml: { xs: 0, lg: -2 },
+          sx={{
+            color: '#fff',
+            bgcolor: 'transparent',
+            ml: { xs: 0, lg: -2 },
             fontSize: '25px',
             ':hover': {
-              color: '#fff', bgcolor: 'transparent'
+              color: '#fff',
-            } }}
+              bgcolor: 'transparent'
+            }
+          }}
         >
           {!drawerOpen ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
         </IconButton>

src/menu-items/other.js

@@ -1,6 +1,9 @@
 // third-party
 import { FormattedMessage } from 'react-intl';
 import { AiOutlineBarChart } from 'react-icons/ai';
+import { AiOutlineDashboard } from 'react-icons/ai';
+import { TbListDetails } from 'react-icons/tb';
+import { LiaFileInvoiceSolid } from 'react-icons/lia';
 
 // assets
 import {
@@ -55,29 +58,36 @@ const other = {
       title: <FormattedMessage id="Orders" />,
       type: 'item',
       url: '/orders',
-      icon: icons.ClockCircleOutlined
+      icon: AiOutlineDashboard
     },
     {
-      id: 'Customers',
+      id: 'customers',
       title: <FormattedMessage id="Customers" />,
       type: 'item',
       url: '/customers',
       icon: icons.UserOutlined
     },
     {
-      id: 'Reports',
+      id: 'reports',
       title: <FormattedMessage id="Reports" />,
       type: 'collapse',
       icon: AiOutlineBarChart,
       children: [
         {
-          id: 'OrdersDetails',
+          id: 'ordersDetails',
           title: <FormattedMessage id="OrdersDetails" />,
           type: 'item',
           url: 'reports/ordersdetails',
-          icon: icons.UserOutlined
+          icon: TbListDetails
         }
       ]
+    },
+    {
+      id: 'invoice',
+      title: <FormattedMessage id="Invoice" />,
+      type: 'item',
+      url: '/invoice',
+      icon: LiaFileInvoiceSolid
     }
 
     // {

src/pages/nearle/invoice/invoice.js

@@ -0,0 +1,541 @@
+import React, { useEffect, useState, useRef } from 'react';
+import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
+import { Empty } from 'antd';
+
+import {
+  Grid,
+  Button,
+  Divider,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  Tabs,
+  Tab,
+  Typography,
+  Box,
+  OutlinedInput,
+  InputAdornment,
+  IconButton,
+  Tooltip,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Stack,
+  Chip
+} from '@mui/material';
+import axios from 'axios';
+import dayjs from 'dayjs';
+import { useNavigate } from 'react-router-dom';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { useTheme } from '@mui/material/styles';
+import { DateRangePicker } from 'mui-daterange-picker';
+import { addDays, addMonths, addWeeks, addYears, endOfMonth, endOfWeek, endOfYear, startOfMonth, startOfWeek, startOfYear } from 'date-fns';
+import Loader from 'components/Loader';
+import { DownloadOutlined, PrinterFilled } from '@ant-design/icons';
+import ReactToPrint from 'react-to-print';
+// import nearleLogo from '../../assets/images/nearleLogo.png';
+import { DashboardOutlined } from '@ant-design/icons';
+import { HiHandThumbDown, HiHandThumbUp } from 'react-icons/hi2';
+import LoadingIcons from 'react-loading-icons';
+
+import AddIcon from '@mui/icons-material/Add';
+import MainCard from 'components/MainCard';
+import { SearchOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import ClearIcon from '@mui/icons-material/Clear';
+
+const columns = [
+  { id: 'sno', label: 'sno' },
+  { id: 'client', label: 'client' },
+  { id: 'invoice ', label: 'Invoice Id ' },
+
+  {
+    id: 'invoice date',
+    label: 'invoice date',
+    align: 'left'
+    // format: (value) => value.toLocaleString("en-US"),
+  },
+  {
+    id: 'due date',
+    label: 'due date',
+    align: 'left'
+    // format: (value) => value.toLocaleString("en-US"),
+  },
+  {
+    id: 'itemcount',
+    label: 'Count',
+    align: 'left'
+    // format: (value) => typeof value === "number" && value.toFixed(2),
+  },
+
+  { id: 'amount', label: 'amount', align: 'right' },
+  { id: 'action', label: 'action', align: 'center' }
+];
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`
+  };
+}
+function formatNumberToRupees(value) {
+  return new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: 'INR',
+    minimumFractionDigits: 2
+  }).format(value);
+}
+const Invoice = () => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [value, setValue] = React.useState(0);
+  const [content, setcontent] = React.useState('one');
+  const [opendate, setOpendate] = useState(false);
+  const [deliveryList, setDeliveryList] = useState([]);
+  const [predialog, setpredialog] = useState(false);
+  const [selected, setselected] = useState({});
+  const componentRef = useRef(null);
+  const [billStatus, setBillStatus] = useState(0);
+  const [isloader, setIsLoader] = useState(false);
+  const [insightdata, setinsightdata] = useState(false);
+  const [search, setSearch] = useState('');
+  const tenid = localStorage.getItem('tenantid');
+  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);
+    };
+  }, []);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(+event?.target?.value);
+    setPage(0);
+  };
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  /* ============================================= || fetchinvoiceinsight| ============================================= */
+  const fetchinvoiceinsight = async () => {
+    try {
+      const insightResponse = await axios.get(`${process.env.REACT_APP_URL}/invoice/getinvoiceinsight/?tenantid=${tenid}`);
+      console.log('insightResponse', insightResponse.data.details);
+      setinsightdata(insightResponse.data.details);
+    } catch (error) {
+      console.log('insightResponse', error);
+    }
+  };
+  useEffect(() => {
+    fetchinvoiceinsight();
+  }, []);
+
+  /* ============================================= || fetchdeliverylist| ============================================= */
+  const fetchdeliverylist = async () => {
+    setIsLoader(true);
+    console.log('billstatus', billStatus);
+    try {
+      let url = `${process.env.REACT_APP_URL}/invoice/getallinvoice/?billstatus=${billStatus}&tenantid=${tenid}`;
+      const deliveyResponse = await axios.get(url);
+      console.log('fetchdeliverylist', deliveyResponse.data.details);
+      setDeliveryList(deliveyResponse.data.details);
+      setIsLoader(false);
+    } catch (error) {
+      console.log('fetchdeliverylist', error);
+    }
+  };
+  useEffect(() => {
+    fetchdeliverylist();
+  }, [billStatus]);
+  useEffect(() => {
+    console.log('selected', selected);
+  }, [selected]);
+
+  const filteredList = () => {
+    let filterdata = deliveryList.filter((data) => data.invoiceno.toLowerCase().includes(search.toLowerCase()));
+    setDeliveryList(filterdata);
+  };
+  useEffect(() => {
+    filteredList();
+  }, [search]);
+  return (
+    <>
+      {isloader && <Loader />}
+      <Grid container>
+        <Grid item>
+          <Typography variant="h3">Invoice</Typography>
+        </Grid>
+      </Grid>
+      <Grid container spacing={3} sx={{ mt: 0 }}>
+        {' '}
+        <Grid
+          item
+          xs={12}
+          lg={3}
+          sm={6}
+          sx={{ cursor: 'pointer' }}
+          onClick={() => {
+            setValue(0);
+            setBillStatus(0);
+            setcontent('one');
+          }}
+        >
+          <HoverSocialCard
+            primary="All"
+            secondary={insightdata.totalcount}
+            iconPrimary={DashboardOutlined}
+            color={theme.palette.primary.main}
+          />
+        </Grid>{' '}
+        <Grid
+          item
+          xs={12}
+          lg={3}
+          sm={6}
+          sx={{ cursor: 'pointer' }}
+          onClick={() => {
+            setValue(1);
+            setBillStatus(1);
+            setcontent('two');
+          }}
+        >
+          <HoverSocialCard
+            primary="0pen"
+            secondary={insightdata.pendingcount}
+            iconPrimary={LoadingIcons.ThreeDots}
+            color={theme.palette.error.main}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          lg={3}
+          sm={6}
+          sx={{ cursor: 'pointer' }}
+          onClick={() => {
+            setValue(2);
+            setBillStatus(2);
+            setcontent('three');
+          }}
+        >
+          <HoverSocialCard
+            primary="Overdue"
+            secondary={insightdata.overduecount}
+            iconPrimary={HiHandThumbDown}
+            color={theme.palette.warning.main}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          lg={3}
+          sm={6}
+          sx={{ cursor: 'pointer' }}
+          onClick={() => {
+            setValue(3);
+            setBillStatus(3);
+            setcontent('four');
+          }}
+        >
+          <HoverSocialCard
+            primary="Paid"
+            secondary={insightdata.paidcount}
+            color={theme.palette.success.main}
+            iconPrimary={HiHandThumbUp}
+          />
+        </Grid>
+      </Grid>
+      {/* ============================================= || Invoice Table || ============================================= */}
+      <MainCard
+        content={false}
+        title={
+          <Grid container sx={{}}>
+            <Grid item xs={9} sx={{}}>
+              <Tabs value={value} onChange={handleChange} aria-label="basic tabs example" sx={{ mt: -1, mb: -2 }}>
+                <Tab
+                  label="All"
+                  {...a11yProps(0)}
+                  onClick={() => {
+                    setValue(0);
+                    setBillStatus(0);
+                    setcontent('one');
+                  }}
+                />
+                <Tab
+                  label="Open"
+                  {...a11yProps(1)}
+                  onClick={() => {
+                    setValue(1);
+                    setBillStatus(1);
+                    setcontent('two');
+                  }}
+                />
+                <Tab
+                  label="Overdue"
+                  {...a11yProps(2)}
+                  onClick={() => {
+                    setValue(2);
+                    setBillStatus(2);
+                    setcontent('three');
+                  }}
+                />
+                <Tab
+                  label="Paid"
+                  {...a11yProps(3)}
+                  onClick={() => {
+                    setValue(3);
+                    setBillStatus(3);
+                    setcontent('four');
+                  }}
+                />
+              </Tabs>
+            </Grid>
+            <Grid item xs={3} sx={{ display: 'flex', justifyContent: 'end' }}>
+              <Stack sx={{ mr: 2 }}>
+                <OutlinedInput
+                  inputRef={textFieldRef}
+                  id="input-search-header"
+                  placeholder="Search (ctrl+k)"
+                  value={search}
+                  onChange={(e) => {
+                    setSearch(e.target.value);
+                    if (e.target.value == '') {
+                      fetchdeliverylist();
+                    }
+                  }}
+                  sx={{
+                    '& .MuiOutlinedInput-input': {
+                      p: '1.5px 0px 1px'
+                    },
+                    width: '100%'
+                  }}
+                  //   style={{ margin: "15px 20px" }}
+                  startAdornment={
+                    <InputAdornment position="start">
+                      <SearchOutlined
+                        style={{
+                          fontSize: 'medium',
+                          fontWeight: 'bolder'
+                        }}
+                      />
+                    </InputAdornment>
+                  }
+                  endAdornment={
+                    <IconButton
+                      sx={{ visibility: search ? 'visible' : 'hidden' }}
+                      onClick={() => {
+                        fetchdeliverylist();
+                      }}
+                    >
+                      <ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
+                    </IconButton>
+                  }
+                />
+              </Stack>
+              {/* <Tooltip title="Order Filter">
+                <IconButton
+                  color="secondary"
+                  variant="light"
+                  sx={{
+                    color: "text.primary",
+                    bgcolor: "grey.200",
+                    mr: 2,
+                  }}
+                  aria-haspopup="true"
+                  onClick={() => setOpendate(true)}
+                >
+                  <FilterList />
+                </IconButton>
+              </Tooltip> */}
+            </Grid>
+          </Grid>
+        }
+        // secondary={<CSVExport data={rows} filename={"sticky-table-data.csv"} />}
+        sx={{ mt: 3 }}
+      >
+        <CustomTabPanel value={value} index={value}>
+          <TableContainer
+            sx={{
+              maxHeight: 430,
+              mt: -3,
+              '&::-webkit-scrollbar': {
+                width: '4px', // Width of vertical scrollbar
+                height: '4px' // Height of horizontal scrollbar
+              },
+              '&::-webkit-scrollbar-thumb': {
+                backgroundColor: '#65387A' // Color of the scrollbar thumb
+              }
+            }}
+          >
+            <Table stickyHeader aria-label="sticky table" sx={{}}>
+              <TableHead
+                sx={{
+                  '& th': {
+                    borderTop: `1px solid ${theme.palette.divider}`,
+                    borderBottom: `2px solid ${theme.palette.divider} !important`
+                  }
+                }}
+              >
+                <TableRow>
+                  {columns.map((column) => (
+                    <TableCell
+                      sx={{
+                        minWidth: column.minWidth,
+                        position: 'sticky !important'
+                      }}
+                      key={column.id}
+                      align={column.align}
+                    >
+                      {column.label}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {deliveryList.length == 0 ? (
+                  <>
+                    <TableCell colSpan={8}>
+                      <Stack width={'100%'} direction={'row'} justifyContent={'center'}>
+                        <Empty />
+                      </Stack>
+                    </TableCell>
+                  </>
+                ) : (
+                  deliveryList.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => (
+                    // <TableRow
+                    //   sx={{ py: 3 }}
+                    //   hover
+                    //   role="checkbox"
+                    //   tabIndex={-1}
+                    //   key={row.code}
+                    // >
+                    //   {columns.map((column) => {
+                    //     const value = row[column.id];
+                    //     return (
+                    //       <TableCell key={column.id} align={column.align}>
+                    //         {column.format && typeof value === "number"
+                    //           ? column.format(value)
+                    //           : value}
+                    //       </TableCell>
+                    //   );
+                    //   })}
+
+                    // </TableRow>
+                    <TableRow key={index}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>
+                        <Typography>{item.tenantname} </Typography>
+
+                        <Typography variant="caption" color={'secondary'}>
+                          {item.contactperson}{' '}
+                        </Typography>
+                      </TableCell>
+                      <TableCell>
+                        <Typography variant="caption">{item.invoiceno} </Typography>
+                      </TableCell>
+                      <TableCell>
+                        <stack direction={'column'}>
+                          <Typography variant="caption">{dayjs(item.transactiondate).format('DD-MM-YYYY')}</Typography>
+                          <br />
+                          <Typography variant="caption">{dayjs(item.transactiondate).format('hh:mm a')}</Typography>
+                        </stack>
+                      </TableCell>
+                      <TableCell>
+                        <stack direction={'column'}>
+                          <Typography variant="caption">{dayjs(item.duedate).format('DD-MM-YYYY')}</Typography>
+                          <br />
+                          <Typography variant="caption">{dayjs(item.duedate).format('hh:mm a')}</Typography>
+                        </stack>
+                      </TableCell>
+
+                      <TableCell>
+                        {' '}
+                        <Typography variant="caption">{item.itemcount} </Typography>
+                      </TableCell>
+                      <TableCell align="right">
+                        <Typography variant="caption">{formatNumberToRupees(item.totalamount)}</Typography>
+                      </TableCell>
+                      <TableCell align="center">
+                        <IconButton
+                          sx={{
+                            '&:hover': {
+                              color: theme.palette.primary.main
+                            }
+                          }}
+                          onClick={() => {
+                            setIsLoader(true);
+                            console.log('selected', item);
+                            setselected(item);
+                            setTimeout(() => {
+                              setIsLoader(false);
+                              // setpredialog(true);
+                              navigate('/invoice/preview', {
+                                state: item
+                              });
+                            }, 500);
+                          }}
+                        >
+                          <VisibilityIcon fontSize="small" />
+                        </IconButton>{' '}
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </CustomTabPanel>
+
+        <Divider />
+        {/* table pagination */}
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25, 100]}
+          component="div"
+          count={deliveryList.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </MainCard>
+    </>
+  );
+};
+
+export default Invoice;

src/pages/nearle/invoice/invoicePreview.js

@@ -0,0 +1,499 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+// import nearleLogo from '../../assets/images/nearleLogo.png';
+import logo_nearle1 from '../../../assets/images/logo-nearle1.png';
+import axios from 'axios';
+import dayjs from 'dayjs';
+import Loader from 'components/Loader';
+import { enqueueSnackbar } from 'notistack';
+import { DownloadOutlined, PrinterFilled } from '@ant-design/icons';
+import ReactToPrint, { useReactToPrint } from 'react-to-print';
+import { SearchOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+// import jsPDF from 'jspdf';
+import { useNavigate } from 'react-router-dom';
+import { FaArrowLeft } from 'react-icons/fa6';
+import { FaIndianRupeeSign } from 'react-icons/fa6';
+
+// import autoTable from 'jspdf-autotable';
+import {
+  Grid,
+  Button,
+  Divider,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  Tabs,
+  Tab,
+  Typography,
+  Box,
+  OutlinedInput,
+  InputAdornment,
+  IconButton,
+  Tooltip,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Stack,
+  Chip,
+  DialogActions,
+  TextField
+} from '@mui/material';
+
+const InvoicePreview = () => {
+  const [selected, setselected] = useState({});
+  const location = useLocation();
+  const navigate = useNavigate();
+  console.log('previewSelect', location.state);
+  const componentRef = useRef(null);
+  const [tabletype, settabletype] = useState(true);
+  const [paydialog, setpaydialog] = useState(false);
+  const [refnumber, setRefnumber] = useState('');
+  const [remarks, setRemarks] = useState('');
+  const theme = useTheme();
+  useEffect(() => {
+    setselected(location.state);
+  }, []);
+  //  ================================================= || formatNumberToRupees  || =================================================
+
+  function formatNumberToRupees(value) {
+    return new Intl.NumberFormat('en-IN', {
+      style: 'currency',
+      currency: 'INR',
+      minimumFractionDigits: 2
+    }).format(value);
+  }
+
+  useEffect(() => {
+    console.log('refnumber', refnumber);
+    console.log('remarks', remarks);
+  }, [refnumber, remarks]);
+
+  //  ================================================= || updatePayment  || =================================================
+
+  const updatePayment = async () => {
+    try {
+      const updateResponse = await axios.put(`${process.env.REACT_APP_URL}/invoice/updatestatus`, {
+        salesid: selected.salesid,
+        referenceno: refnumber,
+        referencedate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        billstatus: 2,
+        paymentremarks: remarks
+      });
+      if (updateResponse.status) {
+        enqueueSnackbar(' Updated Successfully ', {
+          variant: 'success',
+          anchorOrigin: { vertical: 'top', horizontal: 'right' },
+          autoHideDuration: 1000
+        });
+      }
+      console.log('updateResponse', updateResponse);
+    } catch (error) {
+      console.log('updateResponse', error);
+    }
+  };
+
+  return (
+    <>
+      <Stack direction="row" justifyContent="Space-between" alignItems={'center'} spacing={2} sx={{ px: 2.5, py: 1, bgcolor: '#eeeeee' }}>
+        {/* //  ================================================= || Invoice Details  || ================================================= */}
+
+        <Stack direction={'row'} alignItems={'center'} spacing={2}>
+          <Tooltip title="back">
+            <IconButton
+              color="primary"
+              onClick={() => {
+                navigate('/invoice');
+              }}
+            >
+              <FaArrowLeft size={'large'} />
+            </IconButton>
+          </Tooltip>
+
+          <Stack alignItems={'center'}>
+            <Typography variant="h3" color={'primary'}>
+              Invoice Details
+            </Typography>
+            <Chip
+              size="small"
+              color="warning"
+              variant="outlined"
+              sx={{ bgcolor: theme.palette.warning.lighter }}
+              label={`Invoice No :${'\u00a0\u00a0'}${selected.invoiceno}`}
+            />
+          </Stack>
+        </Stack>
+
+        <Stack direction={'row'} spacing={2}>
+          {/* <Button
+            variant="outlined"
+            color="primary"
+            sx={{
+              '&:hover': {
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText'
+              }
+            }}
+            onClick={() => {
+              setpaydialog(true);
+            }}
+          >
+            {' '}
+            <FaIndianRupeeSign />
+            Update Payment
+          </Button> */}
+          <ReactToPrint
+            trigger={() => (
+              <Button
+                size="small"
+                startIcon={<PrinterFilled />}
+                variant="outlined"
+                color="primary"
+                sx={{
+                  '&:hover': {
+                    backgroundColor: 'primary.main',
+                    color: 'primary.contrastText'
+                  }
+                }}
+              >
+                Print
+              </Button>
+            )}
+            content={() => componentRef.current}
+          />
+        </Stack>
+      </Stack>
+
+      {/* //  ================================================= || Date row || ================================================= */}
+
+      <Box sx={{ pb: 2.5, border: '1px solid #eee' }}>
+        <div ref={componentRef} style={{ width: '100%' }}>
+          <Box id="print" sx={{ p: 2.5 }}>
+            <Box sx={{ pb: 2.5 }}>
+              <Stack
+                sx={{
+                  flexDirection: 'row',
+                  // bgcolor: theme.palette.primary.main,
+                  border: '1px solid #eee',
+                  px: 3
+                }}
+                justifyContent="space-between"
+              >
+                <Box sx={{ pt: 0.5 }}>
+                  <Stack direction="row" spacing={2}>
+                    <img src={logo_nearle1} style={{ width: '150px', height: '50px' }} />{' '}
+                  </Stack>
+
+                  <Stack direction="row" justifyContent="space-between">
+                    <Typography
+                      sx={{
+                        overflow: 'hidden',
+                        color: theme.palette.primary.main
+                      }}
+                      variant="subtitle1"
+                    >
+                      Invoice No :
+                    </Typography>
+                    <Typography sx={{ color: theme.palette.primary.main }}>{`${'\u00a0\u00a0'}${selected.invoiceno}`}</Typography>
+                  </Stack>
+                </Box>
+                <Box sx={{ pt: 2.5, pb: 1.75 }}>
+                  <Stack direction="row" justifyContent="space-between">
+                    <Typography sx={{ pl: 4, color: theme.palette.primary.main }} variant="subtitle1">
+                      Date :{' '}
+                    </Typography>
+                    <Typography sx={{ color: theme.palette.primary.main }}>
+                      {dayjs(selected.transactiondate).format('DD-MM-YYYY')}
+                    </Typography>
+                  </Stack>
+                  <Stack direction="row" justifyContent="space-between">
+                    <Typography
+                      sx={{
+                        pr: 2,
+                        overflow: 'hidden',
+                        color: theme.palette.primary.main
+                      }}
+                      variant="subtitle1"
+                    >
+                      Due Date :
+                    </Typography>
+                    <Typography sx={{ color: theme.palette.primary.main }}>{dayjs(selected.dueDate).format('DD-MM-YYYY')}</Typography>
+                  </Stack>
+                </Box>
+              </Stack>
+              {/* //  ================================================= || from to || ================================================= */}
+
+              <Box sx={{ pt: 2.5 }}>
+                <Grid container spacing={2} justifyContent="space-between" direction="row">
+                  <Grid item xs={6}>
+                    <Box
+                      sx={{
+                        border: 1,
+                        minHeight: 240,
+                        borderColor: 'grey.200',
+                        borderRadius: 0.5,
+                        p: 2.5
+                      }}
+                    >
+                      <Grid container direction="row">
+                        <Grid item md={8}>
+                          <Stack spacing={2}>
+                            <Typography variant="h5">From:</Typography>
+                            <Stack sx={{ width: '100%' }}>
+                              <Typography variant="subtitle1">Nearle Technology Privite Limited.</Typography>
+                              <Typography color="secondary">
+                                424, 4<sup>th</sup>floor,
+                              </Typography>
+                              <Typography color="secondary">Red rose towers,</Typography>
+                              <Typography color="secondary">DB Road, RS Puram,</Typography>
+                              <Typography color="secondary">641002.</Typography>
+                              <Typography color="secondary">care@nearle.in</Typography>
+                              <Typography color="secondary">9047968666</Typography>
+                            </Stack>
+                          </Stack>
+                        </Grid>
+                      </Grid>
+                    </Box>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Box
+                      sx={{
+                        border: 1,
+                        minHeight: 240,
+                        borderColor: 'grey.200',
+                        borderRadius: 0.5,
+                        p: 2.5
+                      }}
+                    >
+                      <Grid container direction="row">
+                        <Grid item md={8}>
+                          <Stack spacing={2}>
+                            <Typography variant="h5">To:</Typography>
+                            <Stack sx={{ width: '100%' }}>
+                              <Typography variant="subtitle1">{selected.tenantname}</Typography>
+                              <Typography color="secondary">{selected.address}</Typography>
+                              <Typography color="secondary">{selected.suburb}</Typography>
+                              <Typography color="secondary">{selected.city}</Typography>
+                              <Typography color="secondary">{selected.state}</Typography>{' '}
+                            </Stack>
+                          </Stack>
+                        </Grid>
+                      </Grid>
+                    </Box>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Box>
+            {/* //  ================================================= || invoice table  || ================================================= */}
+
+            <TableContainer
+            // sx={{
+            //   ...(tabletype
+            //     ? {
+            //         maxHeight: 430,
+            //         mt: -3,
+            //         "&::-webkit-scrollbar": {
+            //           width: "4px", // Width of vertical scrollbar
+            //           height: "4px", // Height of horizontal scrollbar
+            //         },
+            //         "&::-webkit-scrollbar-thumb": {
+            //           backgroundColor: "#65387A", // Color of the scrollbar thumb
+            //         },
+            //       }
+            //     : {}),
+            // }}
+            >
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>S.No</TableCell>
+                    <TableCell sx={{ width: '150px' }}>Date</TableCell>
+                    <TableCell sx={{ width: '150px' }}>Order Id</TableCell>
+                    <TableCell>Pickup</TableCell>
+                    <TableCell>Drop</TableCell>
+                    {/* <TableCell>Customer</TableCell>
+                        <TableCell>Contact no</TableCell>
+                        <TableCell>KMS</TableCell> */}
+                    <TableCell align="right">Amount</TableCell>
+                  </TableRow>
+                </TableHead>
+                {selected.tenantsalesdetails && (
+                  <TableBody>
+                    {selected.tenantsalesdetails.map((item, index) => (
+                      <TableRow key={index}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>
+                          <Stack direction="column">
+                            <Typography variant="caption">{dayjs(item.orderdate).format('DD-MM-YYYY')}</Typography>
+
+                            <Typography variant="caption" color="secondary">
+                              {dayjs(item.orderdate).format('hh:mm a')}
+                            </Typography>
+                          </Stack>
+                        </TableCell>
+                        <TableCell>
+                          {' '}
+                          <Typography variant="caption">{item.orderid} </Typography>
+                        </TableCell>
+
+                        <TableCell>
+                          {' '}
+                          <Typography variant="caption">{item.pickup} </Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant="caption">{item.drop} </Typography>
+                        </TableCell>
+                        <TableCell align="right">
+                          <Typography variant="caption">{formatNumberToRupees(item.totalamount)}</Typography>
+                        </TableCell>
+                        {/* <TableCell>
+          <Typography variant="caption">
+            {item.actualkms == "" || 0
+              ? parseInt(item.kms).toFixed(1)
+              : parseInt(item.actualkms).toFixed(1)}
+          </Typography>
+        </TableCell> */}
+                        {/* <TableCell>
+          <Typography variant="caption">
+            {item.deliveryamt == "" || 0
+              ? `₹ ${item.deliverycharges}.00`
+              : `₹ ${item.deliveryamt}.00`}
+          </Typography>
+        </TableCell> */}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                )}
+              </Table>
+            </TableContainer>
+            <Divider />
+            <Box sx={{ p: 2.5 }}>
+              <Grid container direction="row" justifyContent="flex-end">
+                <Grid item md={4}>
+                  <Stack spacing={2}>
+                    <Stack direction="row" justifyContent="space-between">
+                      <Typography color="secondary">Sub Total:</Typography>
+                      <Typography variant="h6">{formatNumberToRupees(selected.salesamount)}</Typography>
+                    </Stack>
+                    <Stack direction="row" justifyContent="space-between">
+                      <Typography color="secondary">Discount:</Typography>
+                      <Typography variant="h6" color={theme.palette.error.main}>
+                        - {formatNumberToRupees(selected.discountamt)}
+                      </Typography>
+                    </Stack>
+                    <Stack direction="row" justifyContent="space-between">
+                      <Typography color={theme.palette.grey[500]}>Tax:</Typography>
+                      <Typography variant="h6" color={theme.palette.success.main}>
+                        + {formatNumberToRupees(selected.taxamount)}
+                      </Typography>
+                    </Stack>
+                    <Stack direction="row" justifyContent="space-between">
+                      <Typography sx={{ pr: 2 }} variant="subtitle1">
+                        Grand Total:
+                      </Typography>
+                      <Typography variant="h6">{formatNumberToRupees(Math.round(selected.totalamount))}</Typography>
+                    </Stack>
+                  </Stack>
+                </Grid>
+              </Grid>
+            </Box>
+          </Box>
+          <Divider />
+          <Box sx={{ p: 2.5 }}>
+            <Typography>Notes: {selected.remarks}</Typography>
+          </Box>
+
+          <Divider />
+        </div>
+      </Box>
+
+      {/* ================================================= || updatePayment Dialog || ================================================= */}
+      <Dialog
+        open={paydialog}
+        onClose={() => {
+          setpaydialog(false);
+        }}
+        maxWidth={'sm'}
+        fullWidth
+      >
+        <DialogTitle sx={{ bgcolor: theme.palette.primary.main }}>
+          <Stack direction={'row'} spacing={1}>
+            <Typography variant="h2" sx={{ color: 'white' }}>
+              ₹
+            </Typography>
+            <Typography variant="h3" sx={{ color: 'white' }}>
+              Update Payment
+            </Typography>
+          </Stack>
+        </DialogTitle>
+        <DialogContent dividers>
+          <Stack spacing={1} sx={{ mb: 2 }}>
+            <Typography>Reference No</Typography>
+            <TextField
+              type="number"
+              placeholder="Enter Reference Number"
+              sx={{ width: '100%' }}
+              onChange={(e) => {
+                setRefnumber(e.target.value);
+              }}
+            />
+          </Stack>
+          <Stack spacing={2} sx={{ mb: 2 }}>
+            <Typography>Remarks</Typography>
+            <TextField
+              multiline
+              required
+              placeholder="Enter Remarks"
+              sx={{ width: '100%' }}
+              onChange={(e) => {
+                setRemarks(e.target.value);
+              }}
+            />
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="outlined"
+            sx={{
+              '&:hover': {
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText'
+              },
+              m: 2
+            }}
+            onClick={() => {
+              setpaydialog(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="outlined"
+            disabled={refnumber == '' || remarks == ''}
+            sx={{
+              '&:hover': {
+                backgroundColor: 'primary.main',
+                color: 'primary.contrastText'
+              },
+              m: 2
+            }}
+            onClick={() => {
+              setpaydialog(false);
+              updatePayment();
+              navigate('/invoice');
+            }}
+          >
+            Update
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default InvoicePreview;

src/pages/nearle/orders/orders.js

@@ -1,9 +1,7 @@
-// import React from 'react';
+import * as React from 'react';
-// import Createstaff from 'pages/createstaff'
 import { enqueueSnackbar } from 'notistack';
 import { DeleteFilled, NotificationOutlined } from '@ant-design/icons';
-
+import { useState, useEffect, Fragment, useRef } from 'react';
-import { useState, useEffect, Fragment } 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 { SearchOutlined, CloseOutlined } from '@ant-design/icons';
-// import { useDispatch } from 'react-redux';
+import ClearIcon from '@mui/icons-material/Clear';
-
-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 {
   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>

src/pages/nearle/reports/ordersDetails.js

@@ -458,6 +458,7 @@ export default function ordersDetails() {
                     </InputAdornment>
                   }
                   endAdornment={
+                    <Tooltip title="clear">
                       <IconButton
                         sx={{ visibility: searchword ? 'visible' : 'hidden' }}
                         onClick={() => {
@@ -468,6 +469,7 @@ export default function ordersDetails() {
                       >
                         <ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
                       </IconButton>
+                    </Tooltip>
                   }
                 />
               </FormControl>

src/routes/MainRoutes.js

@@ -31,6 +31,9 @@ const Createorder1 = Loadable(lazy(() => import('pages/nearle/orders/createorder
 
 const OrdersDetails = Loadable(lazy(() => import('pages/nearle/reports/ordersDetails')));
 
+const Invoice = Loadable(lazy(() => import('pages/nearle/invoice/invoice')));
+const InvoicePreview = Loadable(lazy(() => import('../pages/nearle/invoice/invoicePreview')));
+
 // ==============================|| MAIN ROUTING ||============================== //
 
 const MainRoutes = {
@@ -87,6 +90,14 @@ const MainRoutes = {
         {
           path: 'reports/ordersdetails',
           element: <OrdersDetails />
+        },
+        {
+          path: 'invoice',
+          element: <Invoice />
+        },
+        {
+          path: 'invoice/preview',
+          element: <InvoicePreview />
         }
       ]
     },

yarn.lock

@@ -9159,7 +9159,7 @@ react-dnd@^16.0.1:
     fast-deep-equal "^3.1.3"
     hoist-non-react-statics "^3.3.2"
 
-react-dom@*, "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^17.0.2, react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 0.14.0", "react-dom@>=16 || >=17 || >= 18", react-dom@>=16.0.0, react-dom@>=16.11.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, react-dom@>=16.9.0, "react-dom@16.2.0 - 18":
+react-dom@*, "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^17.0.2, react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 0.14.0", "react-dom@>=16 || >=17 || >= 18", react-dom@>=16.0.0, react-dom@>=16.11.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, react-dom@>=16.9.0, "react-dom@16.2.0 - 18":
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -9238,6 +9238,11 @@ react-is@^18.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-loading-icons@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz"
+  integrity sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g==
+
 "react-redux@^7.2.1 || ^8.0.2", react-redux@^8.0.5:
   version "8.0.5"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz"
@@ -9330,6 +9335,11 @@ react-timer-hook@^3.0.5:
   resolved "https://registry.npmjs.org/react-timer-hook/-/react-timer-hook-3.0.5.tgz"
   integrity sha512-n+98SdmYvui2ne3KyWb3Ldu4k0NYQa3g/VzW6VEIfZJ8GAk/jJsIY700M8Nd2vNSTj05c7wKyQfJBqZ0x7zfiA==
 
+react-to-print@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.npmjs.org/react-to-print/-/react-to-print-2.15.1.tgz"
+  integrity sha512-1foogIFbCpzAVxydkhBiDfMiFYhIMphiagDOfcG4X/EcQ+fBPqJ0rby9Wv/emzY1YLkIQy/rEgOrWQT+rBKhjw==
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@@ -9345,7 +9355,7 @@ react-virtuoso@^4.7.0:
   resolved "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.7.0.tgz"
   integrity sha512-cpgvI1rSOETGDMhqVAVDuH+XHbWO1uIGKv5I6l4CyC71xWYUeGrE5n7sgTZklROB4+Vbv85pcgfWloTlY48HGQ==
 
-react@*, "react@^16.6.0 || 17 || 18", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^17.0.0 || ^18.0.0", react@^17.0.2, react@^18.0.0, react@^18.2.0, "react@>= 0.14.0", "react@>= 16", "react@>= 16.14", "react@>=16 || >=17 || >= 18", react@>=16.0.0, react@>=16.11.0, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0, "react@16.2.0 - 18":
+react@*, "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^17.0.0 || ^18.0.0", react@^17.0.2, react@^18.0.0, react@^18.2.0, "react@>= 0.14.0", "react@>= 16", "react@>= 16.14", "react@>=16 || >=17 || >= 18", react@>=16.0.0, react@>=16.11.0, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0, "react@16.2.0 - 18":
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==