pd mapped with order

src/views/PrincipalDistributors/orderDetails.js

@@ -10,12 +10,12 @@ const OrderDetails = ({ _id, setLoading1 }) => {
 
   const getOrders = async () => {
     try {
-      const response = await axios.get(`/api/v1/admin/users/orders/${_id}`, {
+      const response = await axios.get(`/api/single-pd-order/${_id}`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
       });
-      setUserOrder(response.data.order);
+      setUserOrder(response.data.orders);
       setLoading1(false);
     } catch (error) {
       console.error("Error fetching orders:", error);

src/views/PrincipalDistributors/principalDistributor.js

@@ -23,8 +23,7 @@ const principalDistributor = () => {
   const getUsers = async () => {
     setLoading(true);
     try {
-      const res = await axios
+      const res = await axios.get(`/api/v1/admin/pd`, {
-      .get(`/api/v1/admin/users`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
@@ -35,21 +34,21 @@ const principalDistributor = () => {
           SBU: SBURef.current.value,
         },
       });
-        // console.log(res.data);
+      // console.log(res.data);
-        setUsers(res.data.users);
+      setUsers(res.data.users);
-        setTotalData(res.data?.total_data);
+      setTotalData(res.data?.total_data);
-        setTotalPages(res.data?.total_pages);
+      setTotalPages(res.data?.total_pages);
-      }catch(error) {
+    } catch (error) {
-        swal({
+      swal({
-          title: error,
+        title: error,
-          text: "please login to access the resource or refresh the page  ",
+        text: "please login to access the resource or refresh the page  ",
-          icon: "error",
+        icon: "error",
-          button: "Retry",
+        button: "Retry",
-          dangerMode: true,
+        dangerMode: true,
-        });
+      });
-      } finally {
+    } finally {
-        setLoading(false);
+      setLoading(false);
-      }
+    }
   };
 
   useEffect(() => {
@@ -168,8 +167,8 @@ const principalDistributor = () => {
                               setItemPerPage(Number(e.target.value));
                               setCurrentPage(1); // Reset to first page when changing items per page
                             }}
-                             className="form-control"
+                            className="form-control"
-                             disabled={loading}
+                            disabled={loading}
                           >
                             <option value="10">10</option>
                             <option value="25">25</option>
@@ -257,7 +256,21 @@ const principalDistributor = () => {
                                   }
                                 )}
                               </td>
-                              {loading1 && (
+                              <td className="text-start">
+                                {user.lastOrderDate
+                                  ? new Date(user.lastOrderDate).toLocaleString(
+                                      "en-IN",
+                                      {
+                                        month: "short",
+                                        day: "numeric",
+                                        year: "numeric",
+                                      }
+                                    )
+                                  : "No purchase"}
+                              </td>
+
+                              <td className="text-start">{user.totalOrders}</td>
+                              {/* {loading1 && (
                                 <>
                                   <td className="text-start">loading...</td>
                                   <td className="text-start">loading...</td>
@@ -267,23 +280,23 @@ const principalDistributor = () => {
                               <OrderDetails
                                 _id={user?._id}
                                 setLoading1={setLoading1}
-                              />
+                              /> */}
                               <td className="text-start">
-                              <Link
+                                <Link
-                                    to={`/view/mappedretaildistributor/${user?._id}`}
+                                  to={`/view/mappedretaildistributor/${user?._id}`}
+                                >
+                                  <button
+                                    style={{
+                                      color: "white",
+                                      marginRight: "1rem",
+                                    }}
+                                    type="button"
+                                    className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-2"
                                   >
-                                    <button
+                                    RD
-                                      style={{
+                                  </button>
-                                        color: "white",
+                                </Link>
-                                        marginRight: "1rem",
+                              </td>
-                                      }}
-                                      type="button"
-                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-2"
-                                    >
-                                       RD
-                                    </button>
-                                  </Link>
-                                  </td>
                               <td className="text-start">
                                 {/* <Link
                                     to={`/users-address/view/${userAddress._id}`}

src/views/PrincipalDistributors/singlePrincipalDistributorAllDetails.js

@@ -1,57 +1,117 @@
-import { Typography } from "@material-ui/core";
+import { debounce } from "lodash";
-import { Button } from "@mui/material";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Grid,
+  Typography,
+  Box,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  TextField,
+  TableContainer,
+  Paper,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  Button,
+  TablePagination,
+  Skeleton,
+} from "@mui/material";
 import axios from "axios";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import swal from "sweetalert";
 import { isAutheticated } from "src/auth";
+import InvoiceTable from "../orders/invoiceTable";
+import PendingOrderTable from "../orders/pendingOrderTable";
 
 const SinglePrincipalDistributorAllDetails = () => {
-  const [user, setUser] = useState();
+  const [user, setUser] = useState(null);
-  const [userOrder, setUserOrder] = useState();
+  const [userOrder, setUserOrder] = useState({ totalOrders: 0, totalValue: 0 });
   const [userAllAddress, setUserAllAddress] = useState([]);
-  const token = isAutheticated();
+  const [orders, setOrders] = useState([]);
-  //   const [loading, setLoading] = useState(true);
+  const [totalOrders, setTotalOrders] = useState(0);
-  const _id = useParams()?._id;
+  const [page, setPage] = useState(0);
-  // Get Shipping address of individual user
+  const [rowsPerPage, setRowsPerPage] = useState(10);
-  const getUserAddress = () => {
+  const [loading, setLoading] = useState(true);
-    // setLoading(true);
+  const [searchField, setSearchField] = useState("Order ID");
-    axios
+  const [searchText, setSearchText] = useState("");
-      .get(`/api/shipping/address/user/address/${_id}`, {
-        headers: {
-          "Access-Control-Allow-Origin": "*",
-          Authorization: `Bearer ${token}`,
-        },
-      })
-      .then((res) => {
-        // console.log(res.data);
-        setUserAllAddress(res.data?.UserShippingAddress || []);
-        // toast.success(res.data.message ? res.data.message : "Address fetch!");
 
-        // setLoading(false);
+  const token = isAutheticated();
-      })
+  const { _id } = useParams();
-      .catch((error) => {
+  const searchOrderIdRef = useRef("");
-        // setLoading(false);
+  const searchStatusRef = useRef("");
-        swal({
+
-          title: "Warning",
+  // Debounced function to fetch orders
-          text: error.message,
+  const fetchOrdersDebounced = useRef(
-          icon: "error",
+    debounce((page, limit, orderId, status) => {
-          button: "Close",
+      fetchOrders(page, limit, orderId, status);
-          dangerMode: true,
+    }, 500)
-        });
+  ).current;
-      });
+
+  const handleSearchFieldChange = (event) => {
+    setSearchField(event.target.value);
+    setSearchText("");
   };
 
-  const getOrders = async () => {
+  const handleSearchChange = (event) => {
+    setSearchText(event.target.value);
+    if (searchField === "Order ID") {
+      searchOrderIdRef.current = event.target.value;
+    } else {
+      searchStatusRef.current = event.target.value;
+    }
+    // Call the debounced function to fetch orders
+    fetchOrdersDebounced(
+      page + 1,
+      rowsPerPage,
+      searchOrderIdRef.current,
+      searchStatusRef.current
+    );
+  };
+  const [openTMModal, setOpenTMModal] = useState(false);
+  const [singleorder, setSingleOrder] = useState(null); // State to hold fetched order details
+
+  const handleCloseTMModal = () => {
+    setOpenTMModal(false);
+    setSingleOrder(null); // Clear the order details when closing the modal
+  };
+
+  // Function to fetch order details
+  const fetchOrderDetails = async (id) => {
     try {
-      const response = await axios.get(`/api/v1/admin/users/orders/${_id}`, {
+      const response = await axios.get(`/api/get-single-placed-order-pd/${id}`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },
       });
-      setUserOrder(response.data.order);
+      setSingleOrder(response.data?.singleOrder);
-      // setLoading1(false);
+      setOpenTMModal(true); 
+    } catch (error) {
+      console.error('Error fetching order details:', error);
+     
+    }
+  };
+  
+  // Fetch Shipping address of the individual user
+  const getUserAddress = useCallback(async () => {
+    try {
+      const response = await axios.get(
+        `/api/shipping/address/user/address/${_id}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      setUserAllAddress(response.data?.UserShippingAddress || []);
     } catch (error) {
-      console.error("Error fetching orders:", error);
       swal({
         title: "Warning",
         text: error.message,
@@ -59,65 +119,116 @@ const SinglePrincipalDistributorAllDetails = () => {
         button: "Close",
         dangerMode: true,
       });
-      // setLoading1(false);
     }
-  };
+  }, [_id, token]);
-  const getUserDetails = useCallback(async () => {
-    let resp = await axios.get(`/api/v1/admin/user/${_id}`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-    setUser(resp.data.user);
-  }, [token]);
 
-  // useEffect(() => {
+  // Fetch Order Count and Total Value
-  //     getUserDetails();
+  const getOrdersCount = useCallback(async () => {
-  // }, [getUserDetails]);
+    try {
+      const response = await axios.get(`/api/single-pd-ordercount/${_id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      setUserOrder(response.data);
+    } catch (error) {
+      swal({
+        title: "Warning",
+        text: error.message,
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+    }
+  }, [_id, token]);
+
+  // Fetch User Details
+  const getUserDetails = useCallback(async () => {
+    try {
+      const response = await axios.get(`/api/v1/admin/user/${_id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      setUser(response.data.user);
+    } catch (error) {
+      swal({
+        title: "Warning",
+        text: error.message,
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+    }
+  }, [_id, token]);
+
+  // Fetch Orders with Pagination, Order ID, and Status search
+  const fetchOrders = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get(`/api/single-pd-order/${_id}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: page + 1,
+          limit: rowsPerPage,
+          orderId: searchOrderIdRef.current,
+          status: searchStatusRef.current,
+        },
+      });
+      setOrders(response.data.orders || []);
+      setTotalOrders(response.data.totalOrders || 0);
+    } catch (error) {
+      swal({
+        title: "Warning",
+        text: error.message,
+        icon: "error",
+        button: "Close",
+        dangerMode: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [_id, token, page, rowsPerPage]);
 
   useEffect(() => {
-    getOrders();
+    getOrdersCount();
     getUserAddress();
     getUserDetails();
-  }, [_id]);
+    fetchOrders();
-  // console.log(userOrder, " Single user order data ");
+  }, [_id, getOrdersCount, getUserAddress, getUserDetails, fetchOrders]);
-  // console.log(userAllAddress, "user all address ");
-  // console.log(user, "user ");
-  let totalSpent = 0;
 
-  // Iterate through each order and sum up the total_amount
+  const handleChangePage = (event, newPage) => {
-  userOrder?.forEach((order) => {
+    setPage(newPage);
-    totalSpent += order.total_amount;
+    // Fetch orders whenever page changes
-  });
+    fetchOrdersDebounced(
+      newPage + 1,
+      rowsPerPage,
+      searchOrderIdRef.current,
+      searchStatusRef.current
+    );
+  };
 
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value));
+    setPage(0);
+    // Fetch orders with the new rows per page setting
+    fetchOrdersDebounced(
+      1,
+      parseInt(event.target.value),
+      searchOrderIdRef.current,
+      searchStatusRef.current
+    );
+  };
   return (
     <div>
-      {/* SinglePrincipalDistributorAllDetails
-      <Link to={`/principal-distributor`}>
-        <button
-          type="button"
-          className="mt-1 btn btn-info btn-sm  waves-effect waves-light btn-table ml-2"
-        >
-          back
-        </button>
-      </Link> */}
       <div className="row">
         <div className="col-12">
-          <div
+          <div className="page-title-box d-flex align-items-center justify-content-between">
-            className="
-                    page-title-box
-                    d-flex
-                    align-items-center
-                    justify-content-between
-                  "
-          >
             <div style={{ fontSize: "22px" }} className="fw-bold">
               Principal Distributor All Details
             </div>
-            <div style={{ display: "flex", gap: "1rem" }}>
-              <h4 className="mb-0"></h4>
-            </div>
-
             <div className="page-title-right">
               <Link to="/principal-distributor">
                 <Button
@@ -138,107 +249,46 @@ const SinglePrincipalDistributorAllDetails = () => {
       </div>
       <div className="card" style={{ padding: "1rem" }}>
         <h5 style={{ fontWeight: "bold" }}>
-          &bull; Principal Distributor Profile{" "}
+          &bull; Principal Distributor Profile
         </h5>
         <div style={{ marginLeft: "1rem", marginTop: "1rem" }}>
           <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
             Principal Distributor ID:
             <Typography
               component="span"
-              style={{
+              style={{ fontWeight: "normal", marginLeft: "0.5rem" }}
-                fontWeight: "normal",
-                fontSize: "1.2rem",
-                marginLeft: "0.5rem",
-              }}
             >
               {user?.uniqueId}
             </Typography>
           </Typography>
-          <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
+          {/* Repeating fields with similar styling and structure */}
-             SBU:
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <Typography
+            <div style={{ flex: 1, paddingRight: "1rem" }}>
-              component="span"
+              {[
-              style={{
+                { label: "SBU", value: user?.SBU },
-                fontWeight: "normal",
+                { label: "Name", value: user?.name },
-                fontSize: "1.2rem",
+                { label: "Email", value: user?.email },
-                marginLeft: "0.5rem",
+                { label: "Mobile Number", value: user?.phone },
-              }}
+              ].map((item, index) => (
-            >
+                <Typography
-              {user?.SBU}
+                  key={index}
-            </Typography>
+                  style={{ fontWeight: "bold", fontSize: "1.2rem" }}
-          </Typography>
+                >
-          <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
+                  {item.label}:
-            Name:
+                  <Typography
-            <Typography
+                    component="span"
-              component="span"
+                    style={{ fontWeight: "normal", marginLeft: "0.5rem" }}
-              style={{
+                  >
-                fontWeight: "normal",
+                    {item.value}
-                fontSize: "1.2rem",
+                  </Typography>
-                marginLeft: "0.5rem",
+                </Typography>
-              }}
+              ))}
-            >
+            </div>
-              {user?.name}
+            <div style={{ flex: 1, paddingLeft: "1rem" }}>
-            </Typography>
+              {[
-          </Typography>
+                {
-          <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
+                  label: "Date Registered",
-            Email:
+                  value: new Date(user?.createdAt).toLocaleString("en-IN", {
-            <Typography
-              component="span"
-              style={{
-                fontWeight: "normal",
-                fontSize: "1.2rem",
-                marginLeft: "0.5rem",
-              }}
-            >
-              {user?.email}
-            </Typography>
-          </Typography>
-          <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
-            Mobile Number:
-            <Typography
-              component="span"
-              style={{
-                fontWeight: "normal",
-                fontSize: "1.2rem",
-                marginLeft: "0.5rem",
-              }}
-            >
-              {user?.phone}
-            </Typography>
-          </Typography>
-          <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
-            Date Registered:
-            <Typography
-              component="span"
-              style={{
-                fontWeight: "normal",
-                fontSize: "1.2rem",
-                marginLeft: "0.5rem",
-              }}
-            >
-              {new Date(user?.createdAt).toLocaleString("en-IN", {
-                weekday: "short",
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-                hour: "numeric",
-                minute: "numeric",
-                hour12: true,
-              })}
-            </Typography>
-          </Typography>
-          <Typography style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
-            Last Purchase:
-            <Typography
-              component="span"
-              style={{
-                fontWeight: "normal",
-                fontSize: "1.2rem",
-                marginLeft: "1.5rem",
-              }}
-            >
-              {userOrder?.length > 0
-                ? new Date(userOrder[0]?.createdAt).toLocaleString("en-IN", {
                     weekday: "short",
                     month: "short",
                     day: "numeric",
@@ -246,18 +296,46 @@ const SinglePrincipalDistributorAllDetails = () => {
                     hour: "numeric",
                     minute: "numeric",
                     hour12: true,
-                  })
+                  }),
-                : userOrder
+                },
-                ? "No Purchase"
+                {
-                : "Loading"}
+                  label: "Last Purchase",
-            </Typography>
+                  value:
-          </Typography>
+                    orders.length > 0
+                      ? new Date(orders[0]?.createdAt).toLocaleString("en-IN", {
+                          weekday: "short",
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                          hour: "numeric",
+                          minute: "numeric",
+                          hour12: true,
+                        })
+                      : "No Purchase",
+                },
+                { label: "Total Orders", value: userOrder?.totalOrders },
+                { label: "Total Spent", value: `₹ ${userOrder?.totalValue}` },
+              ].map((item, index) => (
+                <Typography
+                  key={index}
+                  style={{ fontWeight: "bold", fontSize: "1.2rem" }}
+                >
+                  {item.label}:
+                  <Typography
+                    component="span"
+                    style={{ fontWeight: "normal", marginLeft: "0.5rem" }}
+                  >
+                    {item.value}
+                  </Typography>
+                </Typography>
+              ))}
+            </div>
+          </div>
         </div>
-
         <div style={{ marginTop: "2rem" }}>
           <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
             &bull; Addresses{" "}
-          </h5>
+          </h5>{" "}
           <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
             &bull; Total Addresses : {userAllAddress?.length}{" "}
           </h5>
@@ -309,94 +387,203 @@ const SinglePrincipalDistributorAllDetails = () => {
           )}
         </div>
         <div style={{ marginTop: "2rem" }}>
-          <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
+          <h5 style={{ fontWeight: "bold" }}>&bull; Orders</h5>
-            &bull; Orders{" "}
+          <Box className="mt-3">
-          </h5>
+            <Box display="flex" mb={2} alignItems="center">
-          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+              <FormControl variant="outlined" sx={{ minWidth: 150, mr: 2 }}>
-            &bull; Total Orders : {userOrder?.length}{" "}
+                <InputLabel id="search-field-label">Search By</InputLabel>
-          </h5>
+                <Select
-          <h5 style={{ fontWeight: "bold", marginLeft: "1rem" }}>
+                  labelId="search-field-label"
-            &bull; Total Spent : ₹ {totalSpent}{" "}
+                  id="search-field"
-          </h5>
+                  value={searchField}
-          {userOrder?.length > 0 && (
+                  onChange={handleSearchFieldChange}
-            <div className="table-responsive table-shoot mt-3">
+                  label="Search By"
-              <table
-                className="table table-centered table-nowrap"
-                style={{ border: "1px solid" }}
-              >
-                <thead
-                  className="thead-info"
-                  style={{ background: "rgb(140, 213, 213)" }}
                 >
-                  <tr>
+                  <MenuItem value="Order ID">Order ID</MenuItem>
-                    <th>SL No.</th>
+                  <MenuItem value="Status">Status</MenuItem>
-                    <th>Order Date </th>
+                </Select>
-                    <th>Order Id </th>
+              </FormControl>
-                    <th>Items </th>
+              <TextField
-                    <th>Order Amount </th>
+                label={`Search by ${searchField}`}
-                    {/* <th>Profile Image</th> */}
+                variant="outlined"
-                  </tr>
+                value={searchText}
-                </thead>
+                onChange={handleSearchChange}
-                <tbody>
+                fullWidth
-                  {userAllAddress?.length === 0 && (
+              />
-                    <tr className="text-center">
+            </Box>
-                      <td colSpan="6">
+            <TableContainer component={Paper}>
-                        <h5>No Data Available</h5>
+              <Table>
-                      </td>
+                <TableHead>
-                    </tr>
+                  <TableRow>
+                    <TableCell>Order ID</TableCell>
+                    <TableCell>Order Date</TableCell>
+                    <TableCell>Items</TableCell>
+                    <TableCell>Order Value</TableCell>
+                    <TableCell>Status</TableCell>
+                    <TableCell>Action</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {loading ? (
+                    <TableRow>
+                      <TableCell colSpan={6} align="center">
+                        Loading...
+                      </TableCell>
+                    </TableRow>
+                  ) : orders.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} align="center">
+                        No Orders Found
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    orders.map((order) => (
+                      <TableRow key={order._id}>
+                        <TableCell>{order.uniqueId}</TableCell>
+                        <TableCell>
+                          {new Date(order.createdAt).toLocaleString()}
+                        </TableCell>
+                        <TableCell>{order.orderItem.length}</TableCell>
+                        <TableCell>₹ {order.grandTotal}</TableCell>
+                        <TableCell>{order.status}</TableCell>
+                        <TableCell>
+                          <Button
+                            variant="contained"
+                            color="primary"
+                            onClick={() => fetchOrderDetails(order._id)}
+                          >
+                            View
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))
                   )}
-                  {userOrder?.map((order, i) => {
+                </TableBody>
-                    return (
+              </Table>
-                      <tr key={i}>
+            </TableContainer>
-                        <td className="text-start">{i + 1}</td>
+            {/* Pagination */}
-                        <td>
+            <TablePagination
-                          {" "}
+              rowsPerPageOptions={[10, 25, 50]}
-                          {new Date(order?.createdAt).toLocaleString("en-IN", {
+              component="div"
-                            weekday: "short",
+              count={totalOrders}
-                            month: "short",
+              rowsPerPage={rowsPerPage}
-                            day: "numeric",
+              page={page}
-                            year: "numeric",
+              onPageChange={handleChangePage}
-                            hour: "numeric",
+              onRowsPerPageChange={handleChangeRowsPerPage}
-                            minute: "numeric",
+            />
-                            hour12: true,
+            <Dialog
-                          })}
+              open={openTMModal}
-                        </td>
+              onClose={handleCloseTMModal}
-                        <td>{order?.orderID}</td>
+              maxWidth="md"
-                        <td>
+              fullWidth
-                          {order?.orderItems?.map((item, i) => (
+            >
-                            <div
+              <DialogTitle>Order Details</DialogTitle>
-                              style={{ display: "flex", marginTop: "1rem" }}
+              <DialogTitle>Order Id : {singleorder?.uniqueId}</DialogTitle>
-                              key={i}
+              <DialogContent>
-                            >
+                {singleorder?.invoices?.length > 0 && (
-                              <p>{item?.name}</p>
+                  <>
-                              <div>
+                    <Typography variant="h4" gutterBottom>
-                                {item?.image?.map((img, i) => (
+                      Invoices
+                    </Typography>
+                    <InvoiceTable invoices={singleorder.invoices} />
+                  </>
+                )}
+                <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>
+                          {singleorder?.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: "50px",
+                                      width: 50,
-                                      height: "50px",
+                                      height: 50,
-                                      marginLeft: "1rem",
+                                      marginRight: 10,
                                     }}
-                                    src={img?.url}
-                                    alt="img not available"
                                   />
-                                ))}
+                                  <Typography variant="subtitle1">
-                              </div>
+                                    {item.productId.name}
-                            </div>
+                                  </Typography>
-                          ))}
+                                </TableCell>
-                        </td>
+                                <TableCell align="right">
-                        <td>₹ {order?.total_amount}</td>
+                                  ₹{item.price}
-                      </tr>
+                                </TableCell>
-                    );
+                                <TableCell align="right">
-                  })}
+                                  {item.quantity}
-                </tbody>
+                                </TableCell>
-              </table>
+                                <TableCell align="right">₹{subtotal}</TableCell>
-            </div>
+                                <TableCell align="right">{item.GST}%</TableCell>
-          )}
+                                <TableCell align="right">
+                                  ₹{gstAmount}
+                                </TableCell>
+                                <TableCell align="right">
+                                  ₹{totalWithGST}
+                                </TableCell>
+                              </TableRow>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  </Grid>
+                </Grid>
+                {singleorder?.invoices?.length > 0 && (
+                  <>
+                    <Typography variant="h4" my={3} gutterBottom>
+                      Order Items {singleorder?.status=="pending"?"to be Processed":"Cancelled"}
+                    </Typography>
+                    <PendingOrderTable order={singleorder} />
+                  </>
+                )}
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={handleCloseTMModal} color="secondary">
+                  Cancel
+                </Button>
+              </DialogActions>
+            </Dialog>
+          </Box>
         </div>
       </div>
     </div>
   );
 };
-
+// Helper function to format time as AM/PM
+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 SinglePrincipalDistributorAllDetails;

src/views/orders/ViewOrders.js

@@ -370,7 +370,7 @@ const ViewOrders = () => {
               <>
                 {" "}
                 <Typography variant="h4" my={3} gutterBottom>
-                  Order Itmes to processed
+                  Order Items {order?.status=="pending"?"to be Processed":"Cancelled"}
                 </Typography>
                 <PendingOrderTable order={order} />
               </>