gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: gitadmin:6504fcf349e13fad73630df8bd5a864ca8eba5dd
Branches Tags
gitadmin:main
..
compare: gitadmin:5bf50ab372a4f53b4e174f42005ea90a81a25833
Branches Tags
gitadmin:main

No commits in common. "6504fcf349e13fad73630df8bd5a864ca8eba5dd" and "5bf50ab372a4f53b4e174f42005ea90a81a25833" have entirely different histories.
6504fcf349 ... 5bf50ab372

2 changed files with 57 additions and 240 deletions
Show Stats Expand all files Collapse all files

169
src/views/orders/ViewOrders.js
View File

@ -8,23 +8,25 @@ import {
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Paper,
DialogContentText, DialogContentText,
DialogTitle, DialogTitle,
TextField, TextField,
Card,
CardMedia,
CardContent,
Divider, Divider,
Paper,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
} from "@mui/material"; } from "@mui/material";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { TableContainer } from "@material-ui/core"; import { TableContainer } from "@material-ui/core";
import axios from "axios"; // Import axios for HTTP requests import axios from "axios"; // Import axios for HTTP requests
import { isAutheticated } from "src/auth"; import { isAutheticated } from "src/auth";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import OrderDetailsDialog from "./partialOrderModal";
const ViewOrders = () => { const ViewOrders = () => {
const [order, setOrder] = useState(null); // State to store order details const [order, setOrder] = useState(null); // State to store order details
@ -42,9 +44,7 @@ const ViewOrders = () => {
const [loading, setLoading] = useState(true); // Loading state const [loading, setLoading] = useState(true); // Loading state
const [error, setError] = useState(null); // Error state const [error, setError] = useState(null); // Error state
const navigate = useNavigate(); const navigate = useNavigate();
const { id } = useParams(); const { id } = useParams(); // Get order ID from URL params
const [parialModal, setOpnePartialModal] = useState(false);
// Get order ID from URL params
useEffect(() => { useEffect(() => {
const fetchOrderDetails = async () => { const fetchOrderDetails = async () => {
@ -78,8 +78,6 @@ const ViewOrders = () => {
const handleUpdateClick = () => { const handleUpdateClick = () => {
if (orderStatus === "dispatched") { if (orderStatus === "dispatched") {
setOpenDispatchDialog(true); setOpenDispatchDialog(true);
} else if (orderStatus === "partial-processing") {
setOpnePartialModal(true);
} else if (orderStatus === "cancelled") { } else if (orderStatus === "cancelled") {
setOpenCancelDialog(true); setOpenCancelDialog(true);
} else if (orderStatus === "delivered") { } else if (orderStatus === "delivered") {
@ -96,9 +94,10 @@ const ViewOrders = () => {
if (!cancellationReason) { if (!cancellationReason) {
Swal.fire("Please give the order cancellation reason"); Swal.fire("Please give the order cancellation reason");
} }
const cancellationRes = await axios.put( const cancellationRes = await axios.patch(
`/api/cancel-order/${id}`, `/api/change/status/${id}`,
{ {
status: orderStatus,
ReasonforCancellation: cancellationReason, ReasonforCancellation: cancellationReason,
}, },
{ {
@ -160,16 +159,10 @@ const ViewOrders = () => {
navigate(`/orders/${orderStatus}`); navigate(`/orders/${orderStatus}`);
} }
} else if (orderStatus === "processing") { } else if (orderStatus === "processing") {
const processingOrderInvoice = order?.orderItem.map((item) => ({ const cancellationRes = await axios.patch(
...item, `/api/change/status/${id}`,
processquantity: item.quantity,
}));
console.log("");
const cancellationRes = await axios.post(
`/api/processing-order`,
{ {
invoiceItems: processingOrderInvoice, status: orderStatus,
orderId: order._id,
}, },
{ {
headers: { headers: {
@ -187,7 +180,6 @@ const ViewOrders = () => {
Swal.fire("Something went wrong ", error.message, "error"); Swal.fire("Something went wrong ", error.message, "error");
} }
// Perform update logic here // Perform update logic here
setOpnePartialModal(false);
setOpenConfirmDialog(false); setOpenConfirmDialog(false);
setOpenDispatchDialog(false); setOpenDispatchDialog(false);
setOpenCancelDialog(false); setOpenCancelDialog(false);
@ -200,32 +192,6 @@ const ViewOrders = () => {
setOpenCancelDialog(false); setOpenCancelDialog(false);
setOpenDeliveredDialog(false); // Close delivered dialog setOpenDeliveredDialog(false); // Close delivered dialog
}; };
const handlePartialOrderClose = () => {
setOpnePartialModal(false);
};
const handlePartialProcess = async (availability) => {
try {
const cancellationRes = await axios.post(
`/api/processing-order`,
{
invoiceItems: availability,
orderId: order._id,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (cancellationRes.status === 200) {
Swal.fire("Order Status updated", `Order in processing`, "success");
navigate(`/orders/${orderStatus}`);
}
} catch (error) {
Swal.fire("Something went wrong ", error.message, "error");
}
};
const timelineData = [ const timelineData = [
{ event: "Order Placed On", date: order?.createdAt }, { event: "Order Placed On", date: order?.createdAt },
@ -272,58 +238,48 @@ const ViewOrders = () => {
</Typography> </Typography>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12}> {order?.orderItem.map((item, index) => (
<TableContainer component={Paper}> <Grid item xs={12} sm={6} md={4} key={index}>
<Table> <Card
<TableHead> sx={{
<TableRow> display: "flex",
<TableCell>Product</TableCell> flexDirection: "column",
<TableCell align="right">Price (₹)</TableCell> height: "100%",
<TableCell align="right">Quantity</TableCell> }}
<TableCell align="right">Subtotal (₹)</TableCell> >
<TableCell align="right">GST (%)</TableCell> <CardMedia
<TableCell align="right">GST Amount (₹)</TableCell> component="img"
<TableCell align="right">Total with GST (₹)</TableCell> image={item.productId.image}
</TableRow> alt={item.productId.name}
</TableHead> sx={{ height: 140 }}
<TableBody> />
{order?.orderItem.map((item, index) => { <CardContent>
const subtotal = item.price * item.quantity; <Typography variant="h6" gutterBottom>
const gstAmount = {item.productId.name}
((item.GST * item.price) / 100) * item.quantity; </Typography>
const totalWithGST = subtotal + gstAmount; <Typography color="textSecondary">
Price:₹{item.price}
return ( </Typography>
<TableRow key={index}> <Typography color="textSecondary">
<TableCell> Quantity: {item.quantity}
<img </Typography>
src={item.productId.image} <Typography color="textSecondary">
alt={item.productId.name} Subtotal: ₹{item.price * item.quantity}
style={{ </Typography>
width: 50, <Typography color="textSecondary">
height: 50, GST ({item.GST}%): ₹
marginRight: 10, {((item.GST * item.price) / 100) * item.quantity}
}} </Typography>
/> <Typography color="">
<Typography variant="subtitle1"> Total with GST: ₹{" "}
{item.productId.name} {((item.GST * item.price) / 100) * item.quantity +
</Typography> item.price * item.quantity}
</TableCell> </Typography>
<TableCell align="right">₹{item.price}</TableCell> </CardContent>
<TableCell align="right">{item.quantity}</TableCell> </Card>
<TableCell align="right">₹{subtotal}</TableCell> </Grid>
<TableCell align="right">{item.GST}%</TableCell> ))}
<TableCell align="right">₹{gstAmount}</TableCell>
<TableCell align="right">₹{totalWithGST}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid> </Grid>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item sm={6} md={6} xl={6}> <Grid item sm={6} md={6} xl={6}>
<Box <Box
@ -472,9 +428,6 @@ const ViewOrders = () => {
<> <>
<option value="">New</option> <option value="">New</option>
<option value="processing">Processing</option> <option value="processing">Processing</option>
<option value="partial-processing">
Partial Processing
</option>
<option value="cancelled">Cancelled</option> <option value="cancelled">Cancelled</option>
</> </>
)} )}
@ -640,14 +593,6 @@ const ViewOrders = () => {
</DialogActions> </DialogActions>
</form> </form>
</Dialog> </Dialog>
{/* partial processing */}
<OrderDetailsDialog
open={parialModal}
onClose={handlePartialOrderClose}
order={order}
onSubmit={handlePartialProcess}
/>
</Box> </Box>
); );
}; };

128
src/views/orders/partialOrderModal.js
View File

@ -1,128 +0,0 @@
import React, { useState } from "react";
import {
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Button,
TextField,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Grid,
} from "@mui/material";
const OrderDetailsDialog = ({ open, onClose, order, onSubmit }) => {
// Create a state to store availability input for each product
const [availability, setAvailability] = useState(
order?.orderItem.map((item) => ({
...item, // Keep all original properties from orderItem
processquantity: item.quantity, // Add availability field with default value equal to quantity
}))
);
// Handle input change for availability
const handleAvailabilityChange = (index, value) => {
const updatedAvailability = [...availability];
const newValue = Math.max(
0,
Math.min(value, updatedAvailability[index].quantity)
); // Ensure value is between 0 and available quantity
updatedAvailability[index].processquantity = newValue;
setAvailability(updatedAvailability);
};
// Handle form submission
const handleSubmit = () => {
onSubmit(availability); // Pass updated availability to parent component
onClose(); // Close modal
};
return (
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
<DialogTitle>Modify Product Availability</DialogTitle>
<DialogContent>
<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">Availability</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>
{order?.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">
<TextField
sx={{ minWidth: "100px" }}
type="number"
value={availability[index].processquantity}
onChange={(e) =>
handleAvailabilityChange(
index,
Number(e.target.value)
)
}
inputProps={{
min: 0,
max: item.quantity,
}}
style={{ width: "60px", textAlign: "center" }}
/>
</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>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Cancel</Button>
<Button onClick={handleSubmit} variant="contained" color="primary">
Submit
</Button>
</DialogActions>
</Dialog>
);
};
export default OrderDetailsDialog;