invoice updated
This commit is contained in:
joshikannan
30
package-lock.json
generated
30
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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': {
|
||||
|
||||
@@ -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 logo1 from 'assets/images/logo-sm1.png'
|
||||
import logo from 'assets/images/logo-nearle9.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) &&
|
||||
<img src={logo}
|
||||
{open && (
|
||||
<img
|
||||
src={logo}
|
||||
// width='160px'
|
||||
// height='45px'
|
||||
// width='170px'
|
||||
alt='logo'/>
|
||||
}
|
||||
{(!open) &&
|
||||
<img src={logo1}
|
||||
width='40px'
|
||||
alt='logo'/>
|
||||
}
|
||||
alt="logo"
|
||||
/>
|
||||
)}
|
||||
{!open && <img src={logo1} width="40px" alt="logo" />}
|
||||
</DrawerHeaderStyled>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,9 +1,21 @@
|
||||
import { useMemo ,useState} from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { Box, useMediaQuery ,Stack,Tooltip,IconButton,Popper,
|
||||
ClickAwayListener,List,ListItem,ListItemButton,ListItemText,
|
||||
Grid,ListItemIcon,Typography
|
||||
import {
|
||||
Box,
|
||||
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
|
||||
width='100%'
|
||||
direction='row' justifyContent='space-between' spacing={2} alignItems='center'>
|
||||
<Stack 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',
|
||||
fontSize:'20px',
|
||||
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,
|
||||
|
||||
}}>
|
||||
<Transitions type="grow" position='top' sx={{ overflow: 'hidden' }} in={open}>
|
||||
boxShadow: theme.customShadows.z1
|
||||
}}
|
||||
>
|
||||
<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 selected={location.pathname === '/orders/create'} onClick={() => {
|
||||
<ListItemButton
|
||||
selected={location.pathname === '/orders/create'}
|
||||
onClick={() => {
|
||||
// console.log(const location = useLocation();)
|
||||
navigate('/orders/create')
|
||||
handleClickAway()
|
||||
}} >
|
||||
navigate('/orders/create');
|
||||
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')
|
||||
handleClickAway()
|
||||
}} >
|
||||
navigate('/customers/create');
|
||||
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>
|
||||
|
||||
@@ -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 },
|
||||
fontSize:'25px',
|
||||
':hover':{
|
||||
color: '#fff', bgcolor: 'transparent'
|
||||
} }}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
bgcolor: 'transparent',
|
||||
ml: { xs: 0, lg: -2 },
|
||||
fontSize: '25px',
|
||||
':hover': {
|
||||
color: '#fff',
|
||||
bgcolor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{!drawerOpen ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</IconButton>
|
||||
@@ -69,7 +74,7 @@ const Header = () => {
|
||||
zIndex: 1200,
|
||||
width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' },
|
||||
// boxShadow: theme.customShadows.z1
|
||||
bgcolor:'#662582'
|
||||
bgcolor: '#662582'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
// {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
541
src/pages/nearle/invoice/invoice.js
Normal file
541
src/pages/nearle/invoice/invoice.js
Normal file
@@ -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;
|
||||
499
src/pages/nearle/invoice/invoicePreview.js
Normal file
499
src/pages/nearle/invoice/invoicePreview.js
Normal file
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 />
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
14
yarn.lock
14
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==
|
||||
|
||||
Reference in New Issue
Block a user