cancellerd order screen done and api done

src/index.js

@@ -15,9 +15,9 @@ import { cibGmail } from "@coreui/icons";
 import { createRoot } from "react-dom/client";
 
 const setupAxios = () => {
-  // axios.defaults.baseURL = "http://localhost:5000";
-  axios.defaults.baseURL = "https://cheminova-api-2.onrender.com";
-  axios.defaults.baseURL = "https://api.cnapp.co.in";
+  axios.defaults.baseURL = "http://localhost:5000";
+  // axios.defaults.baseURL = "https://cheminova-api-2.onrender.com";
+  // axios.defaults.baseURL = "https://api.cnapp.co.in";
 
   axios.defaults.headers = {
     "Cache-Control": "no-cache,no-store",

src/views/orders/ViewOrders.js

@@ -8,25 +8,23 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
   DialogContentText,
   DialogTitle,
   TextField,
-  Card,
-  CardMedia,
-  CardContent,
   Divider,
-  Paper,
-  Table,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableBody,
 } from "@mui/material";
 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";
 
 const ViewOrders = () => {
   const [order, setOrder] = useState(null); // State to store order details
@@ -44,7 +42,9 @@ const ViewOrders = () => {
   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
+  const { id } = useParams();
+  const [parialModal, setOpnePartialModal] = useState(false);
+  // Get order ID from URL params
 
   useEffect(() => {
     const fetchOrderDetails = async () => {
@@ -78,6 +78,8 @@ const ViewOrders = () => {
   const handleUpdateClick = () => {
     if (orderStatus === "dispatched") {
       setOpenDispatchDialog(true);
+    } else if (orderStatus === "partial-processing") {
+      setOpnePartialModal(true);
     } else if (orderStatus === "cancelled") {
       setOpenCancelDialog(true);
     } else if (orderStatus === "delivered") {
@@ -94,10 +96,9 @@ const ViewOrders = () => {
         if (!cancellationReason) {
           Swal.fire("Please give the order cancellation reason");
         }
-        const cancellationRes = await axios.patch(
-          `/api/change/status/${id}`,
+        const cancellationRes = await axios.put(
+          `/api/cancel-order/${id}`,
           {
-            status: orderStatus,
             ReasonforCancellation: cancellationReason,
           },
           {
@@ -159,10 +160,16 @@ const ViewOrders = () => {
           navigate(`/orders/${orderStatus}`);
         }
       } else if (orderStatus === "processing") {
-        const cancellationRes = await axios.patch(
-          `/api/change/status/${id}`,
+        const processingOrderInvoice = order?.orderItem.map((item) => ({
+          ...item,
+          processquantity: item.quantity,
+        }));
+        console.log("");
+        const cancellationRes = await axios.post(
+          `/api/processing-order`,
           {
-            status: orderStatus,
+            invoiceItems: processingOrderInvoice,
+            orderId: order._id,
           },
           {
             headers: {
@@ -180,6 +187,7 @@ const ViewOrders = () => {
       Swal.fire("Something went wrong ", error.message, "error");
     }
     // Perform update logic here
+    setOpnePartialModal(false);
     setOpenConfirmDialog(false);
     setOpenDispatchDialog(false);
     setOpenCancelDialog(false);
@@ -192,6 +200,32 @@ const ViewOrders = () => {
     setOpenCancelDialog(false);
     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 = [
     { event: "Order Placed On", date: order?.createdAt },
@@ -238,48 +272,58 @@ const ViewOrders = () => {
             </Typography>
 
             <Grid container spacing={2}>
-              {order?.orderItem.map((item, index) => (
-                <Grid item xs={12} sm={6} md={4} key={index}>
-                  <Card
-                    sx={{
-                      display: "flex",
-                      flexDirection: "column",
-                      height: "100%",
-                    }}
-                  >
-                    <CardMedia
-                      component="img"
-                      image={item.productId.image}
-                      alt={item.productId.name}
-                      sx={{ height: 140 }}
-                    />
-                    <CardContent>
-                      <Typography variant="h6" gutterBottom>
-                        {item.productId.name}
-                      </Typography>
-                      <Typography color="textSecondary">
-                        Price:₹{item.price}
-                      </Typography>
-                      <Typography color="textSecondary">
-                        Quantity: {item.quantity}
-                      </Typography>
-                      <Typography color="textSecondary">
-                        Subtotal: ₹{item.price * item.quantity}
-                      </Typography>
-                      <Typography color="textSecondary">
-                        GST ({item.GST}%): ₹
-                        {((item.GST * item.price) / 100) * item.quantity}
-                      </Typography>
-                      <Typography color="">
-                        Total with GST: ₹{" "}
-                        {((item.GST * item.price) / 100) * item.quantity +
-                          item.price * item.quantity}
-                      </Typography>
-                    </CardContent>
-                  </Card>
-                </Grid>
-              ))}
+              <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>
+                      {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">₹{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
@@ -428,6 +472,9 @@ const ViewOrders = () => {
                   <>
                     <option value="">New</option>
                     <option value="processing">Processing</option>
+                    <option value="partial-processing">
+                      Partial Processing
+                    </option>
                     <option value="cancelled">Cancelled</option>
                   </>
                 )}
@@ -593,6 +640,14 @@ const ViewOrders = () => {
           </DialogActions>
         </form>
       </Dialog>
+
+      {/* partial processing  */}
+      <OrderDetailsDialog
+        open={parialModal}
+        onClose={handlePartialOrderClose}
+        order={order}
+        onSubmit={handlePartialProcess}
+      />
     </Box>
   );
 };

src/views/orders/partialOrderModal.js

@@ -0,0 +1,128 @@
+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;