521 lines
17 KiB
JavaScript
521 lines
17 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Grid,
|
|
Button,
|
|
FormControl,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
TextField,
|
|
Divider,
|
|
Chip,
|
|
} from "@mui/material";
|
|
import onvoicesData from "../../assets/incoicedata.json";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { TableContainer } from "@material-ui/core";
|
|
import axios from "axios"; // Import axios for HTTP requests
|
|
import { isAutheticated } from "src/auth";
|
|
import Swal from "sweetalert2";
|
|
import OrderDetailsDialog from "./partialOrderModal";
|
|
import InvoiceTable from "./invoiceTable";
|
|
import PendingOrderTable from "./pendingOrderTable";
|
|
|
|
const ViewInvoices = () => {
|
|
const [invoice, setInvoice] = useState(null); // State to store order details
|
|
const [status, setStatus] = useState("");
|
|
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
|
|
const [openDispatchDialog, setOpenDispatchDialog] = useState(false);
|
|
|
|
const [openDeliveredDialog, setOpenDeliveredDialog] = useState(false); // New dialog state for delivery confirmation
|
|
const [courierName, setCourierName] = useState("");
|
|
const [couriertrackingId, setCourierId] = useState("");
|
|
|
|
const [deliveryDate, setDeliveryDate] = useState("");
|
|
const token = isAutheticated(); // State for delivery date
|
|
const [invoiceStatus, setInvoiceStatus] = useState("");
|
|
const [loading, setLoading] = useState(true); // Loading state
|
|
const [error, setError] = useState(null); // Error state
|
|
const navigate = useNavigate();
|
|
const { id } = useParams();
|
|
|
|
// Get order ID from URL params
|
|
|
|
useEffect(() => {
|
|
const fetchOrderDetails = async () => {
|
|
try {
|
|
const response = await axios.get(`/api/invoice/details/${id}`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
// console.log(response);
|
|
setInvoice(response.data);
|
|
setStatus(response.data.courierStatus);
|
|
|
|
setLoading(false);
|
|
} catch (err) {
|
|
console.log(err);
|
|
setError("Failed to fetch order details");
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchOrderDetails();
|
|
}, [id]);
|
|
|
|
const handleStatusChange = (event) => {
|
|
setInvoiceStatus(event.target.value);
|
|
};
|
|
|
|
const handleUpdateClick = () => {
|
|
if (invoiceStatus === "dispatched") {
|
|
setOpenDispatchDialog(true);
|
|
} else if (invoiceStatus === "delivered") {
|
|
setOpenDeliveredDialog(true);
|
|
}
|
|
};
|
|
|
|
const handleConfirmUpdate = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
if (invoiceStatus === "dispatched") {
|
|
const res = await axios.put(
|
|
`/api/invoice/dispatched/${id}`,
|
|
{
|
|
courierName,
|
|
couriertrackingId,
|
|
},
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
// console.log(res);
|
|
if (res.status === 200) {
|
|
Swal.fire("Invoice Status updated", "Invoice Dispatched", "success");
|
|
navigate(`/orders/dispatched`);
|
|
}
|
|
} else if (invoiceStatus === "delivered") {
|
|
const deli = await axios.put(
|
|
`/api/invoice/delivered/${id}`,
|
|
{},
|
|
|
|
{
|
|
headers: {
|
|
"Access-Control-Allow-Origin": "*",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
if (deli.status === 200) {
|
|
Swal.fire("Order Status updated", `Order Dispatched`, "success");
|
|
|
|
navigate(`/orders/delivered`);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
Swal.fire("Something went wrong ", error.message, "error");
|
|
}
|
|
|
|
setOpenDispatchDialog(false);
|
|
|
|
setOpenDeliveredDialog(false); // Close delivered dialog
|
|
};
|
|
|
|
const handleCancel = async () => {
|
|
setOpenDispatchDialog(false);
|
|
setOpenDeliveredDialog(false); // Close delivered dialog
|
|
};
|
|
|
|
if (loading) {
|
|
return <Typography>Loading...</Typography>;
|
|
}
|
|
|
|
if (error) {
|
|
return <Typography color="error">{error}</Typography>;
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Box
|
|
display="flex"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
mb={5}
|
|
>
|
|
<Typography variant="h4" sx={{ flexGrow: 1, textAlign: "center" }}>
|
|
Invoice Id : {invoice?.invoiceId}
|
|
</Typography>
|
|
<Button
|
|
color="primary"
|
|
onClick={() => navigate(`/orders/${status}`)}
|
|
variant="contained"
|
|
>
|
|
Back
|
|
</Button>
|
|
</Box>
|
|
<Grid container spacing={2}>
|
|
<Grid item md={8} xl={8} lg={8}>
|
|
<Box sx={{ padding: 2, background: "#fff" }}>
|
|
<Typography variant="h4" gutterBottom>
|
|
Invoice
|
|
</Typography>
|
|
{/* <InvoiceTable invoices={invoice} /> */}
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Invoice ID</TableCell>
|
|
|
|
<TableCell>Invoice Items</TableCell>
|
|
<TableCell>Subtotal</TableCell>
|
|
<TableCell>GST Total</TableCell>
|
|
<TableCell>Invoice Amount</TableCell>
|
|
<TableCell>Courier Status</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow key={invoice.invoiceId}>
|
|
<TableCell>{invoice.invoiceId}</TableCell>
|
|
|
|
<TableCell>
|
|
{invoice.items.map((item) => (
|
|
<div key={item.productId}>
|
|
{item.name} ({item.SKU}) x{" "}
|
|
<b>{item.processquantity}</b>
|
|
</div>
|
|
))}
|
|
</TableCell>
|
|
<TableCell>{invoice.subtotal}</TableCell>
|
|
<TableCell>{invoice.gstTotal}</TableCell>
|
|
<TableCell>{invoice.invoiceAmount}</TableCell>
|
|
<TableCell>
|
|
<Chip
|
|
label={invoice.courierStatus}
|
|
color={
|
|
invoice.courierStatus === "delivered"
|
|
? "success"
|
|
: invoice.courierStatus === "dispatched"
|
|
? "primary"
|
|
: "warning"
|
|
}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
|
|
{/* <Typography variant="h4" my={3} gutterBottom>
|
|
Order Summary
|
|
</Typography>
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Product</TableCell>
|
|
<TableCell align="right">Price (₹)</TableCell>
|
|
<TableCell align="right">Quantity</TableCell>
|
|
<TableCell align="right">Subtotal (₹)</TableCell>
|
|
<TableCell align="right">GST (%)</TableCell>
|
|
<TableCell align="right">GST Amount (₹)</TableCell>
|
|
<TableCell align="right">Total with GST (₹)</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{invoice?.orderId?.orderItem.map((item, index) => {
|
|
const subtotal = item.price * item.quantity;
|
|
const gstAmount =
|
|
((item.GST * item.price) / 100) * item.quantity;
|
|
const totalWithGST = subtotal + gstAmount;
|
|
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>
|
|
<img
|
|
src={item.productId.image}
|
|
alt={item.productId.name}
|
|
style={{
|
|
width: 50,
|
|
height: 50,
|
|
marginRight: 10,
|
|
}}
|
|
/>
|
|
<Typography variant="subtitle1">
|
|
{item.productId.name}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="right">₹{item.price}</TableCell>
|
|
<TableCell align="right">{item.quantity}</TableCell>
|
|
<TableCell align="right">₹{subtotal}</TableCell>
|
|
<TableCell align="right">{item.GST}%</TableCell>
|
|
<TableCell align="right">₹{gstAmount}</TableCell>
|
|
<TableCell align="right">₹{totalWithGST}</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Grid>
|
|
</Grid> */}
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid item sm={6} md={6} xl={6}>
|
|
<Box
|
|
sx={{
|
|
marginTop: 4,
|
|
padding: 2,
|
|
backgroundColor: "blue",
|
|
color: "white",
|
|
}}
|
|
>
|
|
<Typography variant="h5" gutterBottom>
|
|
Invoice Summary
|
|
</Typography>
|
|
<Divider sx={{ marginBottom: 2 }} />
|
|
<Typography>Total Items: {invoice?.items.length}</Typography>
|
|
|
|
<Typography>Total Subtotal: ₹{invoice?.subtotal}</Typography>
|
|
<Typography>Total GST: ₹{invoice?.gstTotal}</Typography>
|
|
<Typography variant="h5" sx={{ marginTop: 2 }}>
|
|
Grand Total: ₹{invoice?.invoiceAmount}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item md={4} xl={4} lg={4}>
|
|
<Box
|
|
sx={{
|
|
background: "#fff",
|
|
padding: "1rem",
|
|
borderRadius: "0.8rem",
|
|
}}
|
|
>
|
|
<Grid container spacing={2}>
|
|
<Grid item sm={12} md={12} lg={12}>
|
|
<Typography variant="h5" sx={{ mb: "0.5rem" }}>
|
|
Customer Details
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>
|
|
<strong>SBU:</strong> {invoice?.orderId?.addedBy.SBU}
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>
|
|
<strong>Name:</strong> {invoice?.orderId?.addedBy.name}
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>
|
|
<strong>Email id:</strong> {invoice?.orderId?.addedBy.email}
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>
|
|
<strong>Number:</strong> {invoice?.orderId?.addedBy.phone}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item sm={6} md={6} lg={6}>
|
|
<Typography variant="h5" sx={{ mb: "0.5rem" }}>
|
|
Bill Address
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>
|
|
{invoice?.orderId?.billTo}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item sm={6} md={6} lg={6}>
|
|
<Typography variant="h5" sx={{ mb: "0.5rem" }}>
|
|
Ship Address
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>
|
|
{invoice?.orderId?.shipTo}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item sm={6} md={6} lg={6}>
|
|
<Typography variant="h5" sx={{ mb: "0.5rem" }}>
|
|
Payment mode
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>
|
|
{invoice?.orderId?.paymentMode}
|
|
</Typography>
|
|
</Grid>
|
|
|
|
{/* <Grid item sm={12} md={12} lg={12}>
|
|
<Typography variant="h5" sx={{ mb: "0.5rem" }}>
|
|
Order Status
|
|
</Typography>
|
|
<Typography sx={{ mb: "0.5rem" }}>{order?.status}</Typography>
|
|
{invoice?.courierStatus === "cancelled" && (
|
|
<Typography sx={{ mb: "0.5rem", color: "red" }}>
|
|
{order?.order_Cancelled_Reason}
|
|
</Typography>
|
|
)}
|
|
</Grid> */}
|
|
</Grid>
|
|
</Box>
|
|
{invoice?.status !== "delivered" && (
|
|
<FormControl fullWidth sx={{ mt: 2 }}>
|
|
<select
|
|
className="form-control"
|
|
onChange={handleStatusChange}
|
|
value={invoiceStatus}
|
|
>
|
|
{status === "processing" && (
|
|
<>
|
|
<option value="">Processing</option>
|
|
<option value="dispatched">Dispatch</option>
|
|
</>
|
|
)}
|
|
{status === "dispatched" && (
|
|
<>
|
|
<option value="">Dispatched</option>
|
|
<option value="delivered">Delivered</option>
|
|
</>
|
|
)}
|
|
</select>
|
|
</FormControl>
|
|
)}
|
|
|
|
{invoiceStatus && (
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleUpdateClick}
|
|
sx={{ mt: 2 }}
|
|
>
|
|
Update Status
|
|
</Button>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Dialogs for updating status */}
|
|
<Dialog open={openConfirmDialog} onClose={handleCancel}>
|
|
<DialogTitle>Update Order Status</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
Are you sure you want to update the status to {invoiceStatus}?
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleCancel} variant="outlined" color="primary">
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirmUpdate}
|
|
variant="contained"
|
|
color="success"
|
|
autoFocus
|
|
>
|
|
Confirm
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
{/* Dialog for dispatch details */}
|
|
<Dialog open={openDispatchDialog} onClose={handleCancel}>
|
|
<DialogTitle>Dispatch Details</DialogTitle>
|
|
<form onSubmit={handleConfirmUpdate}>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
Please provide courier name and ID for dispatch:
|
|
</DialogContentText>
|
|
|
|
<TextField
|
|
autoFocus
|
|
required
|
|
margin="dense"
|
|
label="Courier Name"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={courierName}
|
|
onChange={(e) => setCourierName(e.target.value)}
|
|
/>
|
|
<TextField
|
|
required
|
|
margin="dense"
|
|
label="Courier ID"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={couriertrackingId}
|
|
onChange={(e) => setCourierId(e.target.value)}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleCancel} color="primary">
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" variant="contained" color="success" autoFocus>
|
|
Confirm
|
|
</Button>
|
|
</DialogActions>
|
|
</form>
|
|
</Dialog>
|
|
|
|
<Dialog open={openDeliveredDialog} onClose={handleCancel}>
|
|
<DialogTitle>Confirm Delivery</DialogTitle>
|
|
<form onSubmit={handleConfirmUpdate}>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
Please confirm the delivery details:
|
|
</DialogContentText>
|
|
<FormControl required>
|
|
<TextField
|
|
autoFocus
|
|
required
|
|
margin="dense"
|
|
label="Delivery Date"
|
|
type="date"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={deliveryDate}
|
|
onChange={(e) => setDeliveryDate(e.target.value)}
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleCancel} variant="outlined" color="primary">
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirmUpdate}
|
|
variant="contained"
|
|
color="success"
|
|
autoFocus
|
|
>
|
|
Confirm
|
|
</Button>
|
|
</DialogActions>
|
|
</form>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
};
|
|
const formatAMPM = (date) => {
|
|
var hours = new Date(date).getHours();
|
|
var minutes = new Date(date).getMinutes();
|
|
var ampm = hours >= 12 ? "PM" : "AM";
|
|
hours = hours % 12;
|
|
hours = hours ? hours : 12;
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
var strTime = hours + ":" + minutes + " " + ampm;
|
|
return strTime;
|
|
};
|
|
export default ViewInvoices;
|