initial commit
This commit is contained in:
419
src/pages/nearle/invoice/invoice.js
Normal file
419
src/pages/nearle/invoice/invoice.js
Normal file
@@ -0,0 +1,419 @@
|
||||
import React from 'react';
|
||||
import { useState } from 'react';
|
||||
import TitleCard from 'pages/titleCard';
|
||||
import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Outlet, useNavigate } from 'react-router-dom';
|
||||
import dayjs from 'dayjs';
|
||||
var utc = require('dayjs/plugin/utc');
|
||||
dayjs.extend(utc);
|
||||
import { DashboardOutlined } from '@ant-design/icons';
|
||||
import { HiHandThumbDown, HiHandThumbUp } from 'react-icons/hi2';
|
||||
import LoadingIcons from 'react-loading-icons';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { fetchinvoiceinsight, fetchdeliverylist } from 'pages/api/api';
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import {
|
||||
Grid,
|
||||
Divider,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Tabs,
|
||||
Tab,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Stack
|
||||
} from '@mui/material';
|
||||
import Loader from 'components/Loader';
|
||||
import MainCard from 'components/MainCard';
|
||||
import { Empty } from 'antd';
|
||||
import DateFilterDialog from 'components/DateFilterDialog';
|
||||
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
|
||||
|
||||
const columns = [
|
||||
{ id: 'sno', label: 'sno' },
|
||||
{ id: 'client', label: 'client' },
|
||||
{ id: 'invoiceid', 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' }
|
||||
];
|
||||
|
||||
// table data
|
||||
|
||||
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 [billStatus, setBillStatus] = useState(0);
|
||||
let [isloader, setIsLoader] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event) => {
|
||||
setRowsPerPage(+event?.target?.value);
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
/* ============================================= || fetchinvoiceinsight| ============================================= */
|
||||
const {
|
||||
data: insightdata,
|
||||
isLoading: isInsightLoading,
|
||||
isError: isInsightError,
|
||||
error: insightError
|
||||
} = useQuery({
|
||||
queryKey: ['invoiceInsight'], // Meaningful query key
|
||||
queryFn: fetchinvoiceinsight,
|
||||
refetchInterval: 300000 // Auto-fetch every 5 minutes
|
||||
});
|
||||
/* ============================================= || fetchdeliverylist| ============================================= */
|
||||
|
||||
const {
|
||||
data: deliveryList,
|
||||
isLoading: isDeliveryLoading,
|
||||
isError: isDeliveryError,
|
||||
error: deliveryError
|
||||
} = useQuery({
|
||||
queryKey: [billStatus], // Include billStatus in query key
|
||||
queryFn: fetchdeliverylist,
|
||||
refetchInterval: 300000 // Auto-fetch every 5 minutes
|
||||
});
|
||||
const isLoading = isInsightLoading || isDeliveryLoading;
|
||||
const isError = isInsightError || isDeliveryError;
|
||||
const errorMessage = insightError?.message || deliveryError?.message;
|
||||
|
||||
if (isError) {
|
||||
return errorMessage;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{(isloader || isLoading) && <Loader />}
|
||||
{/* ============================================= || TitleCard || ============================================= */}
|
||||
<TitleCard title="Invoice" />
|
||||
|
||||
{/* ============================================= || Hover Social Card || ============================================= */}
|
||||
<Grid container spacing={3}>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
lg={3}
|
||||
sm={6}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setValue(0);
|
||||
setBillStatus(0);
|
||||
}}
|
||||
>
|
||||
<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);
|
||||
}}
|
||||
>
|
||||
<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);
|
||||
}}
|
||||
>
|
||||
<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);
|
||||
}}
|
||||
>
|
||||
<HoverSocialCard
|
||||
primary="Paid"
|
||||
secondary={insightdata?.paidcount}
|
||||
color={theme.palette.success.main}
|
||||
iconPrimary={HiHandThumbUp}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* ============================================= || Invoice Table || ============================================= */}
|
||||
<Stack sx={{ border: '1px solid', borderColor: 'bg.main', p: 3, mt: 3 }}>
|
||||
<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);
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Open"
|
||||
{...a11yProps(1)}
|
||||
onClick={() => {
|
||||
setValue(1);
|
||||
setBillStatus(1);
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Overdue"
|
||||
{...a11yProps(2)}
|
||||
onClick={() => {
|
||||
setValue(2);
|
||||
setBillStatus(2);
|
||||
}}
|
||||
/>
|
||||
<Tab
|
||||
label="Paid"
|
||||
{...a11yProps(3)}
|
||||
onClick={() => {
|
||||
setValue(3);
|
||||
setBillStatus(3);
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<MainCard content={false}>
|
||||
<CustomTabPanel value={value} index={value}>
|
||||
<TableContainer
|
||||
sx={{
|
||||
// maxHeight: 430,
|
||||
// maxHeight: '55vh',
|
||||
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>
|
||||
{isDeliveryLoading && <OrdersTableSkeleton col={3} />}
|
||||
{deliveryList?.length == 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8}>
|
||||
<Empty />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
deliveryList?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>{page * rowsPerPage + 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).utc().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).utc().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">
|
||||
<Tooltip title="Preview" placement="right">
|
||||
<IconButton
|
||||
sx={{
|
||||
'&:hover': {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsLoader(true);
|
||||
console.log('selected', item);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsLoader(false);
|
||||
|
||||
navigate('/nearle/invoice/preview', {
|
||||
state: item
|
||||
});
|
||||
}, 500);
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</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>
|
||||
{/* ============================================= || Date Dialog|| ============================================= */}
|
||||
<DateFilterDialog
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
onSelect={(range) => {
|
||||
setStartdate(range.startDate);
|
||||
setEnddate(range.endDate);
|
||||
setDatestatus(range.label);
|
||||
console.log('Selected Date Range:', range);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Invoice;
|
||||
472
src/pages/nearle/invoice/invoicePreview.js
Normal file
472
src/pages/nearle/invoice/invoicePreview.js
Normal file
@@ -0,0 +1,472 @@
|
||||
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,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Stack,
|
||||
Chip
|
||||
} 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);
|
||||
}
|
||||
|
||||
// ================================================= || 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' }}>
|
||||
<Stack direction={'row'} alignItems={'center'} spacing={2}>
|
||||
<Tooltip title="back">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
navigate('/nearle/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>
|
||||
<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>
|
||||
{/* <Typography
|
||||
sx={{ color: theme.palette.primary.main, py: 0.5 }}
|
||||
>
|
||||
{`Invoice No: ${"\u00a0\u00a0\u00a0"}${selected.invoiceno}`}
|
||||
</Typography> */}
|
||||
<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>
|
||||
{/* <Stack direction="row" justifyContent="space-between">
|
||||
<Typography
|
||||
sx={{
|
||||
pr: 2,
|
||||
overflow: "hidden",
|
||||
color: theme.palette.primary.main,
|
||||
}}
|
||||
variant="subtitle1"
|
||||
>
|
||||
Invoice No :
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.primary.main }}>
|
||||
{`${"\u00a0\u00a0\u00a0"}${selected.invoiceno}`}
|
||||
</Typography>
|
||||
</Stack> */}
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box sx={{ pt: 2.5 }}>
|
||||
<Grid container spacing={2} justifyContent="space-between" direction="row">
|
||||
<Grid item xs={12} sm={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={12} sm={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>
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>S.No</TableCell>
|
||||
<TableCell>Particulars</TableCell>
|
||||
<TableCell>Unit</TableCell>
|
||||
<TableCell>Quantity</TableCell>
|
||||
<TableCell align="right">Rate</TableCell>
|
||||
{/* {selected && selected.pricingtypeid === 73 && ( */}
|
||||
<TableCell align="right">Other Charges</TableCell>
|
||||
{/* )} */}
|
||||
<TableCell align="right">Amount</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{selected.tenantsalesdetails && (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>1</TableCell>
|
||||
<TableCell>
|
||||
<Typography>
|
||||
{`Invoice from ${dayjs(selected.tenantsalesdetails[0].fromdate).format('DD-MM-YYYY')} to ${dayjs(
|
||||
selected.tenantsalesdetails[0].todate
|
||||
).format('DD-MM-YYYY')}`}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography>{selected.tenantsalesdetails[0].pricingtype}</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Typography>{`${selected.tenantsalesdetails[0].quantity.toFixed(2)} km`}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography align="right">{`₹ ${selected.tenantsalesdetails[0].baserate.toFixed(2)}`}</Typography>
|
||||
</TableCell>
|
||||
{/* {selected.tenantsalesdetails[0].pricingtypeid == 73 && ( */}
|
||||
<TableCell align="right">
|
||||
<Typography>{`₹ ${selected.tenantsalesdetails[0].othercharges}.00`}</Typography>
|
||||
</TableCell>
|
||||
{/* )} */}
|
||||
<TableCell align="right">
|
||||
<Typography>{`₹ ${selected.tenantsalesdetails[0].amount}.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('/nearle/invoice');
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InvoicePreview;
|
||||
Reference in New Issue
Block a user