- Select Filter Options
+
-
-
);
};
diff --git a/src/pages/nearle/invoice/invoice.js b/src/pages/nearle/invoice/invoice.js
new file mode 100644
index 0000000..721749b
--- /dev/null
+++ b/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 (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+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 && }
+
+
+ Invoice
+
+
+
+ {' '}
+ {
+ setValue(0);
+ setBillStatus(0);
+ setcontent('one');
+ }}
+ >
+
+ {' '}
+ {
+ setValue(1);
+ setBillStatus(1);
+ setcontent('two');
+ }}
+ >
+
+
+ {
+ setValue(2);
+ setBillStatus(2);
+ setcontent('three');
+ }}
+ >
+
+
+ {
+ setValue(3);
+ setBillStatus(3);
+ setcontent('four');
+ }}
+ >
+
+
+
+ {/* ============================================= || Invoice Table || ============================================= */}
+
+
+
+ {
+ setValue(0);
+ setBillStatus(0);
+ setcontent('one');
+ }}
+ />
+ {
+ setValue(1);
+ setBillStatus(1);
+ setcontent('two');
+ }}
+ />
+ {
+ setValue(2);
+ setBillStatus(2);
+ setcontent('three');
+ }}
+ />
+ {
+ setValue(3);
+ setBillStatus(3);
+ setcontent('four');
+ }}
+ />
+
+
+
+
+
+ {/*
+ setOpendate(true)}
+ >
+
+
+ */}
+
+
+ }
+ // secondary={}
+ sx={{ mt: 3 }}
+ >
+
+
+
+
+
+ {columns.map((column) => (
+
+ {column.label}
+
+ ))}
+
+
+
+ {deliveryList.length == 0 ? (
+ <>
+
+
+
+
+
+
+ ) : (
+ deliveryList.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => (
+ //
+ // {columns.map((column) => {
+ // const value = row[column.id];
+ // return (
+ //
+ // {column.format && typeof value === "number"
+ // ? column.format(value)
+ // : value}
+ //
+ // );
+ // })}
+
+ //
+
+ {index + 1}
+
+ {item.tenantname}
+
+
+ {item.contactperson}{' '}
+
+
+
+ {item.invoiceno}
+
+
+
+ {dayjs(item.transactiondate).format('DD-MM-YYYY')}
+
+ {dayjs(item.transactiondate).format('hh:mm a')}
+
+
+
+
+ {dayjs(item.duedate).format('DD-MM-YYYY')}
+
+ {dayjs(item.duedate).format('hh:mm a')}
+
+
+
+
+ {' '}
+ {item.itemcount}
+
+
+ {formatNumberToRupees(item.totalamount)}
+
+
+ {
+ setIsLoader(true);
+ console.log('selected', item);
+ setselected(item);
+ setTimeout(() => {
+ setIsLoader(false);
+ // setpredialog(true);
+ navigate('/invoice/preview', {
+ state: item
+ });
+ }, 500);
+ }}
+ >
+
+ {' '}
+
+
+ ))
+ )}
+
+
+
+
+
+
+ {/* table pagination */}
+
+
+
+ );
+};
+
+export default Invoice;
diff --git a/src/pages/nearle/invoice/invoicePreview.js b/src/pages/nearle/invoice/invoicePreview.js
new file mode 100644
index 0000000..8c23a27
--- /dev/null
+++ b/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 (
+ <>
+
+ {/* // ================================================= || Invoice Details || ================================================= */}
+
+
+
+ {
+ navigate('/invoice');
+ }}
+ >
+
+
+
+
+
+
+ Invoice Details
+
+
+
+
+
+
+ {/* */}
+ (
+ }
+ variant="outlined"
+ color="primary"
+ sx={{
+ '&:hover': {
+ backgroundColor: 'primary.main',
+ color: 'primary.contrastText'
+ }
+ }}
+ >
+ Print
+
+ )}
+ content={() => componentRef.current}
+ />
+
+
+
+ {/* // ================================================= || Date row || ================================================= */}
+
+
+
+
+
+
+
+
+ 
{' '}
+
+
+
+
+ Invoice No :
+
+ {`${'\u00a0\u00a0'}${selected.invoiceno}`}
+
+
+
+
+
+ Date :{' '}
+
+
+ {dayjs(selected.transactiondate).format('DD-MM-YYYY')}
+
+
+
+
+ Due Date :
+
+ {dayjs(selected.dueDate).format('DD-MM-YYYY')}
+
+
+
+ {/* // ================================================= || from to || ================================================= */}
+
+
+
+
+
+
+
+
+ From:
+
+ Nearle Technology Privite Limited.
+
+ 424, 4thfloor,
+
+ Red rose towers,
+ DB Road, RS Puram,
+ 641002.
+ care@nearle.in
+ 9047968666
+
+
+
+
+
+
+
+
+
+
+
+ To:
+
+ {selected.tenantname}
+ {selected.address}
+ {selected.suburb}
+ {selected.city}
+ {selected.state}{' '}
+
+
+
+
+
+
+
+
+
+ {/* // ================================================= || invoice table || ================================================= */}
+
+
+
+
+
+ S.No
+ Date
+ Order Id
+ Pickup
+ Drop
+ {/* Customer
+ Contact no
+ KMS */}
+ Amount
+
+
+ {selected.tenantsalesdetails && (
+
+ {selected.tenantsalesdetails.map((item, index) => (
+
+ {index + 1}
+
+
+ {dayjs(item.orderdate).format('DD-MM-YYYY')}
+
+
+ {dayjs(item.orderdate).format('hh:mm a')}
+
+
+
+
+ {' '}
+ {item.orderid}
+
+
+
+ {' '}
+ {item.pickup}
+
+
+ {item.drop}
+
+
+ {formatNumberToRupees(item.totalamount)}
+
+ {/*
+
+ {item.actualkms == "" || 0
+ ? parseInt(item.kms).toFixed(1)
+ : parseInt(item.actualkms).toFixed(1)}
+
+ */}
+ {/*
+
+ {item.deliveryamt == "" || 0
+ ? `₹ ${item.deliverycharges}.00`
+ : `₹ ${item.deliveryamt}.00`}
+
+ */}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+ Sub Total:
+ {formatNumberToRupees(selected.salesamount)}
+
+
+ Discount:
+
+ - {formatNumberToRupees(selected.discountamt)}
+
+
+
+ Tax:
+
+ + {formatNumberToRupees(selected.taxamount)}
+
+
+
+
+ Grand Total:
+
+ {formatNumberToRupees(Math.round(selected.totalamount))}
+
+
+
+
+
+
+
+
+ Notes: {selected.remarks}
+
+
+
+