From 41fe4c549c958edace8b57dfdb05c0a3f24c52c1 Mon Sep 17 00:00:00 2001 From: ROSHAN GARG Date: Fri, 30 Aug 2024 16:49:27 +0530 Subject: [PATCH] order status --- src/_nav.js | 126 +- src/views/orders/CancelledOrders.js | 762 +++++--- src/views/orders/DeliveredOrders.js | 762 +++++--- src/views/orders/DispatchedOrders.js | 767 +++++--- src/views/orders/NewOrders.js | 1445 ++++++++------- src/views/orders/ProcessingOrders.js | 770 +++++--- src/views/orders/ViewOrders.js | 2574 ++++++++++++++++---------- src/views/pages/login/Login.js | 1 + 8 files changed, 4409 insertions(+), 2798 deletions(-) diff --git a/src/_nav.js b/src/_nav.js index f9ab4c0..e1e9ac8 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -117,70 +117,70 @@ const _nav = [ to: "/inventory", group: "Inventory", }, - // { - // component: CNavGroup, - // name: "Orders", - // icon: , - // group: "", + { + component: CNavGroup, + name: "Orders", + icon: , + group: "", - // items: [ - // { - // component: CNavItem, - // name: "New", - // icon: , - // to: "/orders/new", - // group: "Orders", - // }, - // // { - // // component: CNavItem, - // // name: "Paid", - // // icon: , - // // to: "/orders/returned", - // // }, - // { - // component: CNavItem, - // name: "Processing", - // icon: , - // to: "/orders/processing", - // group: "Orders", - // }, - // { - // component: CNavItem, - // name: "Dispatched", - // icon: , - // to: "/orders/dispatched", - // group: "Orders", - // }, - // { - // component: CNavItem, - // name: "Delivered", - // icon: , - // to: "/orders/delivered", - // group: "Orders", - // }, - // { - // component: CNavItem, - // name: "Cancelled", - // icon: , - // to: "/orders/cancelled", - // group: "Orders", - // }, - // { - // component: CNavItem, - // name: "In Store Cash Orders", - // icon: , - // to: "/inStoreCashOrders/new", - // group: "Orders", - // }, - // { - // component: CNavItem, - // name: "In Store QRCode Orders", - // icon: , - // to: "/InStoreQRCodeOrders/new", - // group: "Orders", - // }, - // ], - // }, + items: [ + { + component: CNavItem, + name: "New", + icon: , + to: "/orders/new", + group: "Orders", + }, + // { + // component: CNavItem, + // name: "Paid", + // icon: , + // to: "/orders/returned", + // }, + { + component: CNavItem, + name: "Processing", + icon: , + to: "/orders/processing", + group: "Orders", + }, + { + component: CNavItem, + name: "Dispatched", + icon: , + to: "/orders/dispatched", + group: "Orders", + }, + { + component: CNavItem, + name: "Delivered", + icon: , + to: "/orders/delivered", + group: "Orders", + }, + { + component: CNavItem, + name: "Cancelled", + icon: , + to: "/orders/cancelled", + group: "Orders", + }, + // { + // component: CNavItem, + // name: "In Store Cash Orders", + // icon: , + // to: "/inStoreCashOrders/new", + // group: "Orders", + // }, + // { + // component: CNavItem, + // name: "In Store QRCode Orders", + // icon: , + // to: "/InStoreQRCodeOrders/new", + // group: "Orders", + // }, + ], + }, { component: CNavGroup, name: "Settings", diff --git a/src/views/orders/CancelledOrders.js b/src/views/orders/CancelledOrders.js index 81a9dd1..1787890 100644 --- a/src/views/orders/CancelledOrders.js +++ b/src/views/orders/CancelledOrders.js @@ -1,297 +1,497 @@ +// import React, { useState, useEffect } from "react"; +// import { Link } from "react-router-dom"; +// import axios from "axios"; +// import { isAutheticated } from "src/auth"; + +// function CancelledOrders() { +// const token = isAutheticated(); +// const [loading, setLoading] = useState(true); +// const [success, setSuccess] = useState(true); +// const [cancelledOrdersData, setCancelledOrdersData] = useState([]); + +// const [currentPage, setCurrentPage] = useState(1); +// const [itemPerPage, setItemPerPage] = useState(10); +// const [showData, setShowData] = useState(cancelledOrdersData); + +// const handleShowEntries = (e) => { +// setCurrentPage(1); +// setItemPerPage(e.target.value); +// }; + +// useEffect(() => { +// function getProcessingOrder() { +// axios +// .get(`/api/order/getAll/cancelled`, { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// }) +// .then((res) => { +// setCancelledOrdersData(res.data.order); +// setLoading(false); +// }) +// .catch((err) => { +// console.log(err); +// setLoading(false); +// }); +// } +// getProcessingOrder(); +// }, []); + +// useEffect(() => { +// const loadData = () => { +// const indexOfLastPost = currentPage * itemPerPage; +// const indexOfFirstPost = indexOfLastPost - itemPerPage; +// setShowData(cancelledOrdersData.slice(indexOfFirstPost, indexOfLastPost)); +// }; +// loadData(); +// }, [currentPage, itemPerPage, cancelledOrdersData]); + +// return ( +//
+//
+//
+//
+//
+//
+//
+// Cancelled Orders +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// +//
+//
+//
+ +//
+// +// +// +// +// +// +// +// +// +// +// +// +// {!loading && showData.length === 0 && ( +// +// +// +// )} +// {loading ? ( +// +// +// +// ) : ( +// showData.map((order, i) => { +// return ( +// +// +// +// +// +// +// +// +// ); +// }) +// )} +// +//
Order IDCustomerOrder valueOrder AtStatusActions
+//
No Data Available
+//
+// Loading... +//
{order?.orderID} +// {order?.user?.name} +// +// ₹{order?.total_amount} +// +// {new Date(order?.paidAt).toLocaleString( +// "en-IN", +// { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// } +// )} +// +// +// {order?.orderStatus} +// +// +// {/* */} +// +// +// +//
+//
+ +//
+//
+//
+// Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} +// {Math.min( +// currentPage * itemPerPage, +// cancelledOrdersData.length +// )}{" "} +// of {cancelledOrdersData.length} entries +//
+//
+ +//
+//
+//
    +//
  • +// setCurrentPage((prev) => prev - 1)} +// > +// Previous +// +//
    • + +// {!(currentPage - 1 < 1) && ( +//
  • +// +// setCurrentPage((prev) => prev - 1) +// } +// > +// {currentPage - 1} +// +//
    • +// )} + +//
  • +// +// {currentPage} +// +//
    • + +// {!( +// (currentPage + 1) * itemPerPage - itemPerPage > +// cancelledOrdersData.length - 1 +// ) && ( +//
  • +// { +// setCurrentPage((prev) => prev + 1); +// }} +// > +// {currentPage + 1} +// +//
    • +// )} + +//
  • +// cancelledOrdersData.length - 1 +// ) +// ? "paginate_button page-item next" +// : "paginate_button page-item next disabled" +// } +// > +// setCurrentPage((prev) => prev + 1)} +// > +// Next +// +//
    • +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ); +// } + +// export default CancelledOrders; + import React, { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; +import { + Box, + Button, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, + TablePagination, + TextField, + MenuItem, + FormControl, + InputLabel, + Select, + Skeleton, +} from "@mui/material"; +import { useNavigate } from "react-router-dom"; import axios from "axios"; import { isAutheticated } from "src/auth"; -function CancelledOrders() { - const token = isAutheticated(); +const CancelledOrders = () => { + const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(true); - const [success, setSuccess] = useState(true); - const [cancelledOrdersData, setCancelledOrdersData] = useState([]); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [totalOrders, setTotalOrders] = useState(0); + const [searchField, setSearchField] = useState("Order ID"); + const [searchText, setSearchText] = useState(""); + const navigate = useNavigate(); + const token = isAutheticated(); - const [currentPage, setCurrentPage] = useState(1); - const [itemPerPage, setItemPerPage] = useState(10); - const [showData, setShowData] = useState(cancelledOrdersData); - - const handleShowEntries = (e) => { - setCurrentPage(1); - setItemPerPage(e.target.value); + // Fetch orders with pagination + const fetchOrders = async (page, limit) => { + setLoading(true); + try { + const response = await axios.get("/api/get-cancelled-order-admin", { + headers: { + Authorization: `Bearer ${token}`, + }, + params: { + page: page + 1, // Adjusting for zero-based index in the UI + limit, + searchField, + searchText, + }, + }); + console.log(response); + setOrders(response?.data?.cancelledOrders); + setTotalOrders(response?.data?.totalOrders); + } catch (error) { + console.error("Error fetching orders:", error); + } finally { + setLoading(false); + } }; useEffect(() => { - function getProcessingOrder() { - axios - .get(`/api/order/getAll/cancelled`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setCancelledOrdersData(res.data.order); - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - } - getProcessingOrder(); - }, []); + fetchOrders(page, rowsPerPage); + }, [page, rowsPerPage, searchField, searchText]); - useEffect(() => { - const loadData = () => { - const indexOfLastPost = currentPage * itemPerPage; - const indexOfFirstPost = indexOfLastPost - itemPerPage; - setShowData(cancelledOrdersData.slice(indexOfFirstPost, indexOfLastPost)); - }; - loadData(); - }, [currentPage, itemPerPage, cancelledOrdersData]); + const handleSearchChange = (event) => { + setSearchText(event.target.value); + }; + + const handleSearchFieldChange = (event) => { + setSearchField(event.target.value); + }; + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const filteredOrders = orders?.filter((order) => { + if (searchField === "Order ID") { + return order.uniqueId.toLowerCase().includes(searchText.toLowerCase()); + } + if (searchField === "Status") { + return order.status.toLowerCase().includes(searchText.toLowerCase()); + } + return true; + }); return ( -
-
-
-
-
-
-
- Cancelled Orders -
-
-
-
-
-
-
-
-
-
-
- -
-
-
- -
- + + Cancelled Order Placed List + + + + Search By + + + + + +
+ + + Order ID + Order Date + Items + Order Value + Status + Action + + + + {loading ? ( + Array.from(new Array(rowsPerPage)).map((_, index) => ( + + + + + + )) + ) : filteredOrders.length > 0 ? ( + filteredOrders.map((order) => ( + + {order.uniqueId} + + {new Date(order.createdAt).toDateString()} + , {formatAMPM(order.createdAt)} + + {order.orderItem.length} + {order.grandTotal.toFixed(2)} + {order.status} + + - - - - - - - - - - - {!loading && showData.length === 0 && ( - - - - )} - {loading ? ( - - - - ) : ( - showData.map((order, i) => { - return ( - - - - - - - - - ); - }) - )} - -
Order IDCustomerOrder valueOrder AtStatusActions
-
No Data Available
-
- Loading... -
{order?.orderID} - {order?.user?.name} - - ₹{order?.total_amount} - - {new Date(order?.paidAt).toLocaleString( - "en-IN", - { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - } - )} - - - {order?.orderStatus} - - - {/* */} - - - -
-
- -
-
-
- Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} - {Math.min( - currentPage * itemPerPage, - cancelledOrdersData.length - )}{" "} - of {cancelledOrdersData.length} entries -
-
- -
-
-
    -
  • - setCurrentPage((prev) => prev - 1)} - > - Previous - -
    • - - {!(currentPage - 1 < 1) && ( -
  • - - setCurrentPage((prev) => prev - 1) - } - > - {currentPage - 1} - -
    • - )} - -
  • - - {currentPage} - -
    • - - {!( - (currentPage + 1) * itemPerPage - itemPerPage > - cancelledOrdersData.length - 1 - ) && ( -
  • - { - setCurrentPage((prev) => prev + 1); - }} - > - {currentPage + 1} - -
    • - )} - -
  • - cancelledOrdersData.length - 1 - ) - ? "paginate_button page-item next" - : "paginate_button page-item next disabled" - } - > - setCurrentPage((prev) => prev + 1)} - > - Next - -
    • -
-
-
-
-
-
-
-
-
-
-
+ View + + + + )) + ) : ( + + + Data not found + + + )} + + + + + ); -} +}; + +// 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 CancelledOrders; diff --git a/src/views/orders/DeliveredOrders.js b/src/views/orders/DeliveredOrders.js index cca1610..9d55ebf 100644 --- a/src/views/orders/DeliveredOrders.js +++ b/src/views/orders/DeliveredOrders.js @@ -1,297 +1,497 @@ +// import React, { useState, useEffect } from "react"; +// import { Link } from "react-router-dom"; +// import axios from "axios"; +// import { isAutheticated } from "src/auth"; + +// function DeliveredOrders() { +// const token = isAutheticated(); +// const [loading, setLoading] = useState(true); +// const [success, setSuccess] = useState(true); +// const [deliveredOrdersData, setDeliveredOrdersData] = useState([]); + +// const [currentPage, setCurrentPage] = useState(1); +// const [itemPerPage, setItemPerPage] = useState(10); +// const [showData, setShowData] = useState(deliveredOrdersData); + +// const handleShowEntries = (e) => { +// setCurrentPage(1); +// setItemPerPage(e.target.value); +// }; + +// useEffect(() => { +// function getProcessingOrder() { +// axios +// .get(`/api/order/getAll/delivered`, { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// }) +// .then((res) => { +// setDeliveredOrdersData(res.data.order); +// setLoading(false); +// }) +// .catch((err) => { +// console.log(err); +// setLoading(false); +// }); +// } +// getProcessingOrder(); +// }, []); + +// useEffect(() => { +// const loadData = () => { +// const indexOfLastPost = currentPage * itemPerPage; +// const indexOfFirstPost = indexOfLastPost - itemPerPage; +// setShowData(deliveredOrdersData.slice(indexOfFirstPost, indexOfLastPost)); +// }; +// loadData(); +// }, [currentPage, itemPerPage, deliveredOrdersData]); + +// return ( +//
+//
+//
+//
+//
+//
+//
+// Delivered Orders +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// +//
+//
+//
+ +//
+// +// +// +// +// +// +// +// +// +// +// +// +// {!loading && showData.length === 0 && ( +// +// +// +// )} +// {loading ? ( +// +// +// +// ) : ( +// showData.map((order, i) => { +// return ( +// +// +// +// +// +// +// +// +// ); +// }) +// )} +// +//
Order IDCustomerOrder valueOrder AtStatusActions
+//
No Data Available
+//
+// Loading... +//
{order?.orderID} +// {order?.user?.name} +// +// ₹{order?.total_amount} +// +// {new Date(order?.paidAt).toLocaleString( +// "en-IN", +// { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// } +// )} +// +// +// {order?.orderStatus} +// +// +// {/* */} +// +// +// +//
+//
+ +//
+//
+//
+// Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} +// {Math.min( +// currentPage * itemPerPage, +// deliveredOrdersData.length +// )}{" "} +// of {deliveredOrdersData.length} entries +//
+//
+ +//
+//
+//
    +//
  • +// setCurrentPage((prev) => prev - 1)} +// > +// Previous +// +//
    • + +// {!(currentPage - 1 < 1) && ( +//
  • +// +// setCurrentPage((prev) => prev - 1) +// } +// > +// {currentPage - 1} +// +//
    • +// )} + +//
  • +// +// {currentPage} +// +//
    • + +// {!( +// (currentPage + 1) * itemPerPage - itemPerPage > +// deliveredOrdersData.length - 1 +// ) && ( +//
  • +// { +// setCurrentPage((prev) => prev + 1); +// }} +// > +// {currentPage + 1} +// +//
    • +// )} + +//
  • +// deliveredOrdersData.length - 1 +// ) +// ? "paginate_button page-item next" +// : "paginate_button page-item next disabled" +// } +// > +// setCurrentPage((prev) => prev + 1)} +// > +// Next +// +//
    • +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ); +// } + +// export default DeliveredOrders; + import React, { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; +import { + Box, + Button, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, + TablePagination, + TextField, + MenuItem, + FormControl, + InputLabel, + Select, + Skeleton, +} from "@mui/material"; +import { useNavigate } from "react-router-dom"; import axios from "axios"; import { isAutheticated } from "src/auth"; -function DeliveredOrders() { - const token = isAutheticated(); +const DeliveredOrders = () => { + const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(true); - const [success, setSuccess] = useState(true); - const [deliveredOrdersData, setDeliveredOrdersData] = useState([]); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [totalOrders, setTotalOrders] = useState(0); + const [searchField, setSearchField] = useState("Order ID"); + const [searchText, setSearchText] = useState(""); + const navigate = useNavigate(); + const token = isAutheticated(); - const [currentPage, setCurrentPage] = useState(1); - const [itemPerPage, setItemPerPage] = useState(10); - const [showData, setShowData] = useState(deliveredOrdersData); - - const handleShowEntries = (e) => { - setCurrentPage(1); - setItemPerPage(e.target.value); + // Fetch orders with pagination + const fetchOrders = async (page, limit) => { + setLoading(true); + try { + const response = await axios.get("/api/get-delivered-order-admin", { + headers: { + Authorization: `Bearer ${token}`, + }, + params: { + page: page + 1, // Adjusting for zero-based index in the UI + limit, + searchField, + searchText, + }, + }); + console.log(response); + setOrders(response?.data?.deliveredOrders); + setTotalOrders(response?.data?.totalOrders); + } catch (error) { + console.error("Error fetching orders:", error); + } finally { + setLoading(false); + } }; useEffect(() => { - function getProcessingOrder() { - axios - .get(`/api/order/getAll/delivered`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setDeliveredOrdersData(res.data.order); - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - } - getProcessingOrder(); - }, []); + fetchOrders(page, rowsPerPage); + }, [page, rowsPerPage, searchField, searchText]); - useEffect(() => { - const loadData = () => { - const indexOfLastPost = currentPage * itemPerPage; - const indexOfFirstPost = indexOfLastPost - itemPerPage; - setShowData(deliveredOrdersData.slice(indexOfFirstPost, indexOfLastPost)); - }; - loadData(); - }, [currentPage, itemPerPage, deliveredOrdersData]); + const handleSearchChange = (event) => { + setSearchText(event.target.value); + }; + + const handleSearchFieldChange = (event) => { + setSearchField(event.target.value); + }; + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const filteredOrders = orders?.filter((order) => { + if (searchField === "Order ID") { + return order.uniqueId.toLowerCase().includes(searchText.toLowerCase()); + } + if (searchField === "Status") { + return order.status.toLowerCase().includes(searchText.toLowerCase()); + } + return true; + }); return ( -
-
-
-
-
-
-
- Delivered Orders -
-
-
-
-
-
-
-
-
-
-
- -
-
-
- -
- + + Delivered Order Placed List + + + + Search By + + + + + +
+ + + Order ID + Order Date + Items + Order Value + Status + Action + + + + {loading ? ( + Array.from(new Array(rowsPerPage)).map((_, index) => ( + + + + + + )) + ) : filteredOrders.length > 0 ? ( + filteredOrders.map((order) => ( + + {order.uniqueId} + + {new Date(order.createdAt).toDateString()} + , {formatAMPM(order.createdAt)} + + {order.orderItem.length} + {order.grandTotal.toFixed(2)} + {order.status} + + - - - - - - - - - - - {!loading && showData.length === 0 && ( - - - - )} - {loading ? ( - - - - ) : ( - showData.map((order, i) => { - return ( - - - - - - - - - ); - }) - )} - -
Order IDCustomerOrder valueOrder AtStatusActions
-
No Data Available
-
- Loading... -
{order?.orderID} - {order?.user?.name} - - ₹{order?.total_amount} - - {new Date(order?.paidAt).toLocaleString( - "en-IN", - { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - } - )} - - - {order?.orderStatus} - - - {/* */} - - - -
-
- -
-
-
- Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} - {Math.min( - currentPage * itemPerPage, - deliveredOrdersData.length - )}{" "} - of {deliveredOrdersData.length} entries -
-
- -
-
-
    -
  • - setCurrentPage((prev) => prev - 1)} - > - Previous - -
    • - - {!(currentPage - 1 < 1) && ( -
  • - - setCurrentPage((prev) => prev - 1) - } - > - {currentPage - 1} - -
    • - )} - -
  • - - {currentPage} - -
    • - - {!( - (currentPage + 1) * itemPerPage - itemPerPage > - deliveredOrdersData.length - 1 - ) && ( -
  • - { - setCurrentPage((prev) => prev + 1); - }} - > - {currentPage + 1} - -
    • - )} - -
  • - deliveredOrdersData.length - 1 - ) - ? "paginate_button page-item next" - : "paginate_button page-item next disabled" - } - > - setCurrentPage((prev) => prev + 1)} - > - Next - -
    • -
-
-
-
-
-
-
-
-
-
-
+ View + + + + )) + ) : ( + + + Data not found + + + )} + + + + + ); -} +}; + +// 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 DeliveredOrders; diff --git a/src/views/orders/DispatchedOrders.js b/src/views/orders/DispatchedOrders.js index c158e73..dcfbf1c 100644 --- a/src/views/orders/DispatchedOrders.js +++ b/src/views/orders/DispatchedOrders.js @@ -1,300 +1,499 @@ +// import React, { useState, useEffect } from "react"; +// import { Link } from "react-router-dom"; +// import axios from "axios"; +// import { isAutheticated } from "src/auth"; + +// function DispatchedOrders() { +// const token = isAutheticated(); +// const [loading, setLoading] = useState(true); +// const [success, setSuccess] = useState(true); +// const [dispatchedOrdersData, setDispatchedOrdersData] = useState([]); + +// const [currentPage, setCurrentPage] = useState(1); +// const [itemPerPage, setItemPerPage] = useState(10); +// const [showData, setShowData] = useState(dispatchedOrdersData); + +// const handleShowEntries = (e) => { +// setCurrentPage(1); +// setItemPerPage(e.target.value); +// }; + +// useEffect(() => { +// function getDispatchedOrder() { +// axios +// .get(`/api/order/getAll/dispatched`, { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// }) +// .then((res) => { +// setDispatchedOrdersData(res.data.order); +// console.log(res.data.order); +// setLoading(false); +// }) +// .catch((err) => { +// console.log(err); +// setLoading(false); +// }); +// } +// getDispatchedOrder(); +// }, []); + +// useEffect(() => { +// const loadData = () => { +// const indexOfLastPost = currentPage * itemPerPage; +// const indexOfFirstPost = indexOfLastPost - itemPerPage; +// setShowData( +// dispatchedOrdersData.slice(indexOfFirstPost, indexOfLastPost) +// ); +// }; +// loadData(); +// }, [currentPage, itemPerPage, dispatchedOrdersData]); + +// return ( +//
+//
+//
+//
+//
+//
+//
+// Dispatched Orders +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// +//
+//
+//
+ +//
+// +// +// +// +// +// +// +// +// +// +// +// +// {!loading && showData.length === 0 && ( +// +// +// +// )} +// {loading ? ( +// +// +// +// ) : ( +// showData.map((order, i) => { +// return ( +// +// +// +// +// +// +// +// +// ); +// }) +// )} +// +//
Order IDCustomerOrder valueOrder AtStatusActions
+//
No Data Available
+//
+// Loading... +//
{order?.orderID} +// {order?.user?.name} +// +// ₹{order?.total_amount} +// +// {new Date(order?.paidAt).toLocaleString( +// "en-IN", +// { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// } +// )} +// +// +// {order?.orderStatus} +// +// +// {/* */} +// +// +// +//
+//
+ +//
+//
+//
+// Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} +// {Math.min( +// currentPage * itemPerPage, +// dispatchedOrdersData.length +// )}{" "} +// of {dispatchedOrdersData.length} entries +//
+//
+ +//
+//
+//
    +//
  • +// setCurrentPage((prev) => prev - 1)} +// > +// Previous +// +//
    • + +// {!(currentPage - 1 < 1) && ( +//
  • +// +// setCurrentPage((prev) => prev - 1) +// } +// > +// {currentPage - 1} +// +//
    • +// )} + +//
  • +// +// {currentPage} +// +//
    • + +// {!( +// (currentPage + 1) * itemPerPage - itemPerPage > +// dispatchedOrdersData.length - 1 +// ) && ( +//
  • +// { +// setCurrentPage((prev) => prev + 1); +// }} +// > +// {currentPage + 1} +// +//
    • +// )} + +//
  • +// dispatchedOrdersData.length - 1 +// ) +// ? "paginate_button page-item next" +// : "paginate_button page-item next disabled" +// } +// > +// setCurrentPage((prev) => prev + 1)} +// > +// Next +// +//
    • +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ); +// } + +// export default DispatchedOrders; import React, { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; +import { + Box, + Button, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, + TablePagination, + TextField, + MenuItem, + FormControl, + InputLabel, + Select, + Skeleton, +} from "@mui/material"; +import { useNavigate } from "react-router-dom"; import axios from "axios"; import { isAutheticated } from "src/auth"; -function DispatchedOrders() { - const token = isAutheticated(); +const DispatchedOrders = () => { + const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(true); - const [success, setSuccess] = useState(true); - const [dispatchedOrdersData, setDispatchedOrdersData] = useState([]); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [totalOrders, setTotalOrders] = useState(0); + const [searchField, setSearchField] = useState("Order ID"); + const [searchText, setSearchText] = useState(""); + const navigate = useNavigate(); + const token = isAutheticated(); - const [currentPage, setCurrentPage] = useState(1); - const [itemPerPage, setItemPerPage] = useState(10); - const [showData, setShowData] = useState(dispatchedOrdersData); - - const handleShowEntries = (e) => { - setCurrentPage(1); - setItemPerPage(e.target.value); + // Fetch orders with pagination + const fetchOrders = async (page, limit) => { + setLoading(true); + try { + const response = await axios.get("/api/get-dispatched-order-admin", { + headers: { + Authorization: `Bearer ${token}`, + }, + params: { + page: page + 1, // Adjusting for zero-based index in the UI + limit, + searchField, + searchText, + }, + }); + console.log(response); + setOrders(response?.data?.dispatchedOrders); + setTotalOrders(response?.data?.totalOrders); + } catch (error) { + console.error("Error fetching orders:", error); + } finally { + setLoading(false); + } }; useEffect(() => { - function getDispatchedOrder() { - axios - .get(`/api/order/getAll/dispatched`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setDispatchedOrdersData(res.data.order); - console.log(res.data.order); - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - } - getDispatchedOrder(); - }, []); + fetchOrders(page, rowsPerPage); + }, [page, rowsPerPage, searchField, searchText]); - useEffect(() => { - const loadData = () => { - const indexOfLastPost = currentPage * itemPerPage; - const indexOfFirstPost = indexOfLastPost - itemPerPage; - setShowData( - dispatchedOrdersData.slice(indexOfFirstPost, indexOfLastPost) - ); - }; - loadData(); - }, [currentPage, itemPerPage, dispatchedOrdersData]); + const handleSearchChange = (event) => { + setSearchText(event.target.value); + }; + + const handleSearchFieldChange = (event) => { + setSearchField(event.target.value); + }; + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const filteredOrders = orders?.filter((order) => { + if (searchField === "Order ID") { + return order.uniqueId.toLowerCase().includes(searchText.toLowerCase()); + } + if (searchField === "Status") { + return order.status.toLowerCase().includes(searchText.toLowerCase()); + } + return true; + }); return ( -
-
-
-
-
-
-
- Dispatched Orders -
-
-
-
-
-
-
-
-
-
-
- -
-
-
- -
- + + Dispatched Order Placed List + + + + Search By + + + + + +
+ + + Order ID + Order Date + Items + Order Value + Status + Action + + + + {loading ? ( + Array.from(new Array(rowsPerPage)).map((_, index) => ( + + + + + + )) + ) : filteredOrders.length > 0 ? ( + filteredOrders.map((order) => ( + + {order.uniqueId} + + {new Date(order.createdAt).toDateString()} + , {formatAMPM(order.createdAt)} + + {order.orderItem.length} + {order.grandTotal.toFixed(2)} + {order.status} + + - - - - - - - - - - - {!loading && showData.length === 0 && ( - - - - )} - {loading ? ( - - - - ) : ( - showData.map((order, i) => { - return ( - - - - - - - - - ); - }) - )} - -
Order IDCustomerOrder valueOrder AtStatusActions
-
No Data Available
-
- Loading... -
{order?.orderID} - {order?.user?.name} - - ₹{order?.total_amount} - - {new Date(order?.paidAt).toLocaleString( - "en-IN", - { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - } - )} - - - {order?.orderStatus} - - - {/* */} - - - -
-
- -
-
-
- Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} - {Math.min( - currentPage * itemPerPage, - dispatchedOrdersData.length - )}{" "} - of {dispatchedOrdersData.length} entries -
-
- -
-
-
    -
  • - setCurrentPage((prev) => prev - 1)} - > - Previous - -
    • - - {!(currentPage - 1 < 1) && ( -
  • - - setCurrentPage((prev) => prev - 1) - } - > - {currentPage - 1} - -
    • - )} - -
  • - - {currentPage} - -
    • - - {!( - (currentPage + 1) * itemPerPage - itemPerPage > - dispatchedOrdersData.length - 1 - ) && ( -
  • - { - setCurrentPage((prev) => prev + 1); - }} - > - {currentPage + 1} - -
    • - )} - -
  • - dispatchedOrdersData.length - 1 - ) - ? "paginate_button page-item next" - : "paginate_button page-item next disabled" - } - > - setCurrentPage((prev) => prev + 1)} - > - Next - -
    • -
-
-
-
-
-
-
-
-
-
-
+ View + + + + )) + ) : ( + + + Data not found + + + )} + + + + + ); -} +}; + +// 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 DispatchedOrders; diff --git a/src/views/orders/NewOrders.js b/src/views/orders/NewOrders.js index e61103a..8cde3b6 100644 --- a/src/views/orders/NewOrders.js +++ b/src/views/orders/NewOrders.js @@ -1,648 +1,847 @@ +// import React, { useState, useEffect } from "react"; +// import { Link } from "react-router-dom"; +// import axios from "axios"; +// import * as XLSX from "xlsx"; +// import { saveAs } from "file-saver"; + +// import { isAutheticated } from "src/auth"; +// import Button from "@material-ui/core/Button"; +// import { cilSearch } from "@coreui/icons"; +// import CIcon from "@coreui/icons-react"; +// import { TextField, FormControl, Select, MenuItem } from "@material-ui/core"; +// import { Typography } from "@material-ui/core"; +// import DatePicker from "react-datepicker"; +// import "react-datepicker/dist/react-datepicker.css"; + +// function NewOrders() { +// const token = isAutheticated(); +// const [loading, setLoading] = useState(true); +// const [success, setSuccess] = useState(true); +// const [newOrdersData, setNewOrdersData] = useState([]); +// // console.log(newOrdersData); + +// const [currentPage, setCurrentPage] = useState(1); +// const [itemPerPage, setItemPerPage] = useState(10); +// const [showData, setShowData] = useState(newOrdersData); + +// const handleShowEntries = (e) => { +// setCurrentPage(1); +// setItemPerPage(e.target.value); +// }; + +// function getNewOrder() { +// axios +// .get(`/api/order/getAll/new`, { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// }) +// .then((res) => { +// const filteredOrders = res.data.order.filter( +// (order) => order.orderType === "WebSite" +// ); + +// setNewOrdersData(filteredOrders); +// setLoading(false); +// }) +// .catch((err) => { +// console.log(err); +// setLoading(false); +// }); +// } +// useEffect(() => { +// setLoading(true); +// getNewOrder(); +// }, [token]); + +// // Export to excel +// const exportToExcel = () => { +// const flattenedData = newOrdersData.map((order) => ({ +// "Order ID": order?.orderID, +// Customer: order?.user?.name, +// "Order value": `₹${order?.total_amount}`, +// "Order At": new Date(order?.paidAt).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// }), +// Status: order?.orderStatus, +// })); + +// const worksheet = XLSX.utils.json_to_sheet(flattenedData); + +// // Apply styles to header row +// const headerStyle = { +// font: { bold: true }, +// fill: { fgColor: { rgb: "CCCCFF" } }, // Light blue background +// alignment: { horizontal: "center" }, +// border: { top: { style: "thin" }, bottom: { style: "thin" } }, +// }; +// Object.keys(worksheet).forEach((cell) => { +// const cellRef = worksheet[cell]; +// if (cellRef.t === "s" && cellRef.s) { +// cellRef.s = headerStyle; +// } +// }); + +// // Apply styles to data rows +// const dataStyle = { +// border: { bottom: { style: "thin" } }, +// }; +// Object.keys(worksheet).forEach((cell) => { +// const cellRef = worksheet[cell]; +// if (cellRef.t !== "s" && cellRef.s) { +// cellRef.s = dataStyle; +// } +// }); + +// const workbook = XLSX.utils.book_new(); +// XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); + +// const excelBuffer = XLSX.write(workbook, { +// bookType: "xlsx", +// type: "array", +// }); +// const blob = new Blob([excelBuffer], { +// type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8", +// }); + +// saveAs(blob, "exportedData.xlsx"); +// }; + +// const handleDelete = (id) => { +// console.log(id); +// swal({ +// title: "Are you sure?", +// icon: "error", +// buttons: { +// Yes: { text: "Yes", value: true }, +// Cancel: { text: "Cancel", value: "cancel" }, +// }, +// }).then((value) => { +// if (value === true) { +// axios +// .delete(`/api/order/delete/${id}`, { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// }) +// .then((res) => { +// setSuccess((prev) => !prev); +// }) +// .catch((err) => { +// swal({ +// title: "Warning", +// text: err.response.data.message +// ? err.response.data.message +// : "Something went wrong!", +// icon: "error", +// button: "Retry", +// dangerMode: true, +// }); +// }); +// } +// }); +// }; +// const [searchTerm, setSearchTerm] = useState(""); +// const [searchValue, setsearchValue] = useState("orderId"); +// const handleChange = (event) => { +// const { name, value } = event.target; +// if (name === "Search") { +// setsearchValue(value); +// } +// }; +// const formatDate = (dateString) => { +// const dateArray = dateString.split(" "); +// const day = dateArray[0]; +// const month = dateArray[1]; +// const year = dateArray[2]; +// const monthNumber = new Date(Date.parse(`${month} 1, 2022`)).getMonth() + 1; +// return `${year}-${ +// monthNumber < 10 ? "0" + monthNumber : monthNumber +// }-${day}`; +// }; +// // const formatDate = (date) => { +// // const day = ("0" + date.getDate()).slice(-2); +// // const month = ("0" + (date.getMonth() + 1)).slice(-2); +// // const year = date.getFullYear(); +// // return `${year}-${month}-${day}`; +// // }; +// console.log(searchTerm); +// useEffect(() => { +// setTimeout(() => { +// if (searchTerm !== "") { +// let searchedResult = []; +// if (searchValue === "orderId") { +// searchedResult = newOrdersData.filter((item) => +// item.orderID.toString().includes(searchTerm) +// ); +// } else if (searchValue === "Name") { +// searchedResult = newOrdersData.filter((item) => +// item.user?.name +// .toString() +// .toLowerCase() +// .includes(searchTerm.toLowerCase()) +// ); +// } else if (searchValue === "City") { +// searchedResult = newOrdersData.filter((item) => +// item.shippingInfo.city +// .toString() +// .toLowerCase() +// .includes(searchTerm.toLowerCase()) +// ); +// } else if (searchValue === "Amount") { +// searchedResult = newOrdersData.filter((item) => +// item.total_amount.toString().includes(searchTerm) +// ); +// } else if (searchValue === "OrderDate") { +// // Format input date +// const formattedDate = formatDate(searchTerm); + +// searchedResult = newOrdersData.filter((item) => +// item.createdAt.includes(formattedDate) +// ); +// } else if (searchValue === "ProductName") { +// searchedResult = newOrdersData.filter((order) => +// order.orderItems.some((item) => +// item.name +// .toString() +// .toLowerCase() +// .includes(searchTerm.toLowerCase()) +// ) +// ); +// } else if (searchValue === "MobileNumber") { +// searchedResult = newOrdersData.filter((item) => +// item.shippingInfo.phone_Number.toString().includes(searchTerm) +// ); +// } + +// setShowData(searchedResult); +// } else { +// getNewOrder(); +// } +// }, 100); +// }, [searchTerm, searchValue, newOrdersData]); + +// useEffect(() => { +// const loadData = () => { +// const indexOfLastPost = currentPage * itemPerPage; +// const indexOfFirstPost = indexOfLastPost - itemPerPage; +// setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost)); +// }; +// loadData(); +// }, [currentPage, itemPerPage, newOrdersData]); +// return ( +//
+//
+//
+//
+//
+//
+//
+// New Orders +//
+ +// {/*
+// +// +// +//
*/} +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// +//
+//
+//
+//
+//
+// +// Search by : +// +// +// +// +//
+ +// {/*
+// {searchValue === "OrderDate" && ( +// setSearchTerm(date)} +// dateFormat="dd/MM/yyyy" +// placeholderText="Select a date" +// /> +// )} +// {searchValue !== "OrderDate" && ( +// setSearchTerm(e.target.value)} +// /> +// )} +// +//
*/} +//
+// setSearchTerm(e.target.value)} +// /> +// +//
+//
+// +//
+ +//
+// +// +// +// +// +// +// +// +// +// +// +// +// {!loading && showData.length === 0 && ( +// +// +// +// )} +// {loading ? ( +// +// +// +// ) : ( +// showData.map((order, i) => { +// return ( +// +// +// +// +// +// +// +// +// ); +// }) +// )} +// +//
Order IDCustomerOrder valueOrder AtStatusActions
+//
No Data Available
+//
+// Loading... +//
{order?.orderID} +// {order?.user?.name} +// +// ₹{order?.total_amount} +// +// {new Date(order?.paidAt).toLocaleString( +// "en-IN", +// { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// } +// )} +// +// +// {order?.orderStatus} +// +// +// {/* */} +// +// +// +// {/* +// +// */} + +// {/* */} +//
+//
+ +//
+//
+//
+// Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} +// {Math.min( +// currentPage * itemPerPage, +// newOrdersData.length +// )}{" "} +// of {newOrdersData.length} entries +//
+//
+ +//
+//
+//
    +//
  • +// setCurrentPage((prev) => prev - 1)} +// > +// Previous +// +//
    • + +// {!(currentPage - 1 < 1) && ( +//
  • +// +// setCurrentPage((prev) => prev - 1) +// } +// > +// {currentPage - 1} +// +//
    • +// )} + +//
  • +// +// {currentPage} +// +//
    • + +// {!( +// (currentPage + 1) * itemPerPage - itemPerPage > +// newOrdersData.length - 1 +// ) && ( +//
  • +// { +// setCurrentPage((prev) => prev + 1); +// }} +// > +// {currentPage + 1} +// +//
    • +// )} + +//
  • +// newOrdersData.length - 1 +// ) +// ? "paginate_button page-item next" +// : "paginate_button page-item next disabled" +// } +// > +// setCurrentPage((prev) => prev + 1)} +// > +// Next +// +//
    • +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ); +// } + +// export default NewOrders; import React, { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; +import { + Box, + Button, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, + TablePagination, + TextField, + MenuItem, + FormControl, + InputLabel, + Select, + Skeleton, +} from "@mui/material"; +import { useNavigate } from "react-router-dom"; import axios from "axios"; -import * as XLSX from "xlsx"; -import { saveAs } from "file-saver"; - import { isAutheticated } from "src/auth"; -import Button from "@material-ui/core/Button"; -import { cilSearch } from "@coreui/icons"; -import CIcon from "@coreui/icons-react"; -import { TextField, FormControl, Select, MenuItem } from "@material-ui/core"; -import { Typography } from "@material-ui/core"; -import DatePicker from "react-datepicker"; -import "react-datepicker/dist/react-datepicker.css"; -function NewOrders() { - const token = isAutheticated(); +const NewOrders = () => { + const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(true); - const [success, setSuccess] = useState(true); - const [newOrdersData, setNewOrdersData] = useState([]); - // console.log(newOrdersData); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [totalOrders, setTotalOrders] = useState(0); + const [searchField, setSearchField] = useState("Order ID"); + const [searchText, setSearchText] = useState(""); + const navigate = useNavigate(); + const token = isAutheticated(); - const [currentPage, setCurrentPage] = useState(1); - const [itemPerPage, setItemPerPage] = useState(10); - const [showData, setShowData] = useState(newOrdersData); - - const handleShowEntries = (e) => { - setCurrentPage(1); - setItemPerPage(e.target.value); - }; - - function getNewOrder() { - axios - .get(`/api/order/getAll/new`, { + // Fetch orders with pagination + const fetchOrders = async (page, limit) => { + setLoading(true); + try { + const response = await axios.get("/api/get-new-order-admin", { headers: { - "Access-Control-Allow-Origin": "*", Authorization: `Bearer ${token}`, }, - }) - .then((res) => { - const filteredOrders = res.data.order.filter( - (order) => order.orderType === "WebSite" - ); - - setNewOrdersData(filteredOrders); - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); + params: { + page: page + 1, // Adjusting for zero-based index in the UI + limit, + searchField, + searchText, + }, }); - } - useEffect(() => { - setLoading(true); - getNewOrder(); - }, [token]); - - // Export to excel - const exportToExcel = () => { - const flattenedData = newOrdersData.map((order) => ({ - "Order ID": order?.orderID, - Customer: order?.user?.name, - "Order value": `₹${order?.total_amount}`, - "Order At": new Date(order?.paidAt).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - }), - Status: order?.orderStatus, - })); - - const worksheet = XLSX.utils.json_to_sheet(flattenedData); - - // Apply styles to header row - const headerStyle = { - font: { bold: true }, - fill: { fgColor: { rgb: "CCCCFF" } }, // Light blue background - alignment: { horizontal: "center" }, - border: { top: { style: "thin" }, bottom: { style: "thin" } }, - }; - Object.keys(worksheet).forEach((cell) => { - const cellRef = worksheet[cell]; - if (cellRef.t === "s" && cellRef.s) { - cellRef.s = headerStyle; - } - }); - - // Apply styles to data rows - const dataStyle = { - border: { bottom: { style: "thin" } }, - }; - Object.keys(worksheet).forEach((cell) => { - const cellRef = worksheet[cell]; - if (cellRef.t !== "s" && cellRef.s) { - cellRef.s = dataStyle; - } - }); - - const workbook = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); - - const excelBuffer = XLSX.write(workbook, { - bookType: "xlsx", - type: "array", - }); - const blob = new Blob([excelBuffer], { - type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8", - }); - - saveAs(blob, "exportedData.xlsx"); - }; - - const handleDelete = (id) => { - console.log(id); - swal({ - title: "Are you sure?", - icon: "error", - buttons: { - Yes: { text: "Yes", value: true }, - Cancel: { text: "Cancel", value: "cancel" }, - }, - }).then((value) => { - if (value === true) { - axios - .delete(`/api/order/delete/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setSuccess((prev) => !prev); - }) - .catch((err) => { - swal({ - title: "Warning", - text: err.response.data.message - ? err.response.data.message - : "Something went wrong!", - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - } - }); - }; - const [searchTerm, setSearchTerm] = useState(""); - const [searchValue, setsearchValue] = useState("orderId"); - const handleChange = (event) => { - const { name, value } = event.target; - if (name === "Search") { - setsearchValue(value); + console.log(response); + setOrders(response?.data?.placedOrders); + setTotalOrders(response?.data?.totalOrders); + } catch (error) { + console.error("Error fetching orders:", error); + } finally { + setLoading(false); } }; - const formatDate = (dateString) => { - const dateArray = dateString.split(" "); - const day = dateArray[0]; - const month = dateArray[1]; - const year = dateArray[2]; - const monthNumber = new Date(Date.parse(`${month} 1, 2022`)).getMonth() + 1; - return `${year}-${ - monthNumber < 10 ? "0" + monthNumber : monthNumber - }-${day}`; + + useEffect(() => { + fetchOrders(page, rowsPerPage); + }, [page, rowsPerPage, searchField, searchText]); + + const handleSearchChange = (event) => { + setSearchText(event.target.value); }; - // const formatDate = (date) => { - // const day = ("0" + date.getDate()).slice(-2); - // const month = ("0" + (date.getMonth() + 1)).slice(-2); - // const year = date.getFullYear(); - // return `${year}-${month}-${day}`; - // }; - console.log(searchTerm); - useEffect(() => { - setTimeout(() => { - if (searchTerm !== "") { - let searchedResult = []; - if (searchValue === "orderId") { - searchedResult = newOrdersData.filter((item) => - item.orderID.toString().includes(searchTerm) - ); - } else if (searchValue === "Name") { - searchedResult = newOrdersData.filter((item) => - item.user?.name - .toString() - .toLowerCase() - .includes(searchTerm.toLowerCase()) - ); - } else if (searchValue === "City") { - searchedResult = newOrdersData.filter((item) => - item.shippingInfo.city - .toString() - .toLowerCase() - .includes(searchTerm.toLowerCase()) - ); - } else if (searchValue === "Amount") { - searchedResult = newOrdersData.filter((item) => - item.total_amount.toString().includes(searchTerm) - ); - } else if (searchValue === "OrderDate") { - // Format input date - const formattedDate = formatDate(searchTerm); - searchedResult = newOrdersData.filter((item) => - item.createdAt.includes(formattedDate) - ); - } else if (searchValue === "ProductName") { - searchedResult = newOrdersData.filter((order) => - order.orderItems.some((item) => - item.name - .toString() - .toLowerCase() - .includes(searchTerm.toLowerCase()) - ) - ); - } else if (searchValue === "MobileNumber") { - searchedResult = newOrdersData.filter((item) => - item.shippingInfo.phone_Number.toString().includes(searchTerm) - ); - } + const handleSearchFieldChange = (event) => { + setSearchField(event.target.value); + }; - setShowData(searchedResult); - } else { - getNewOrder(); - } - }, 100); - }, [searchTerm, searchValue, newOrdersData]); + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const filteredOrders = orders?.filter((order) => { + if (searchField === "Order ID") { + return order.uniqueId.toLowerCase().includes(searchText.toLowerCase()); + } + if (searchField === "Status") { + return order.status.toLowerCase().includes(searchText.toLowerCase()); + } + return true; + }); - useEffect(() => { - const loadData = () => { - const indexOfLastPost = currentPage * itemPerPage; - const indexOfFirstPost = indexOfLastPost - itemPerPage; - setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost)); - }; - loadData(); - }, [currentPage, itemPerPage, newOrdersData]); return ( -
-
-
-
-
-
-
- New Orders -
- - {/*
- + + + New Order Placed List + + + + Search By + + + + + + + + + Order ID + Order Date + Items + Order Value + Status + Action + + + + {loading ? ( + Array.from(new Array(rowsPerPage)).map((_, index) => ( + + + + + + )) + ) : filteredOrders.length > 0 ? ( + filteredOrders.map((order) => ( + + {order.uniqueId} + + {new Date(order.createdAt).toDateString()} + , {formatAMPM(order.createdAt)} + + {order.orderItem.length} + {order.grandTotal.toFixed(2)} + {order.status} + - - */} - - - -
-
-
-
-
-
-
-
- -
-
-
-
-
- - Search by : - - - - -
- - {/*
- {searchValue === "OrderDate" && ( - setSearchTerm(date)} - dateFormat="dd/MM/yyyy" - placeholderText="Select a date" - /> - )} - {searchValue !== "OrderDate" && ( - setSearchTerm(e.target.value)} - /> - )} - -
*/} -
- setSearchTerm(e.target.value)} - /> - -
-
- -
- -
-
- - - - - - - - - - - - {!loading && showData.length === 0 && ( - - - - )} - {loading ? ( - - - - ) : ( - showData.map((order, i) => { - return ( - - - - - - - - - ); - }) - )} - -
Order IDCustomerOrder valueOrder AtStatusActions
-
No Data Available
-
- Loading... -
{order?.orderID} - {order?.user?.name} - - ₹{order?.total_amount} - - {new Date(order?.paidAt).toLocaleString( - "en-IN", - { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - } - )} - - - {order?.orderStatus} - - - {/* */} - - - - {/* - - */} - - {/* */} -
-
- -
-
-
- Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} - {Math.min( - currentPage * itemPerPage, - newOrdersData.length - )}{" "} - of {newOrdersData.length} entries -
-
- -
-
-
    -
  • - setCurrentPage((prev) => prev - 1)} - > - Previous - -
    • - - {!(currentPage - 1 < 1) && ( -
  • - - setCurrentPage((prev) => prev - 1) - } - > - {currentPage - 1} - -
    • - )} - -
  • - - {currentPage} - -
    • - - {!( - (currentPage + 1) * itemPerPage - itemPerPage > - newOrdersData.length - 1 - ) && ( -
  • - { - setCurrentPage((prev) => prev + 1); - }} - > - {currentPage + 1} - -
    • - )} - -
  • - newOrdersData.length - 1 - ) - ? "paginate_button page-item next" - : "paginate_button page-item next disabled" - } - > - setCurrentPage((prev) => prev + 1)} - > - Next - -
    • -
-
-
-
-
-
-
-
-
-
- + + + )) + ) : ( + + + Data not found + + + )} + + + + + ); -} +}; + +// 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 NewOrders; diff --git a/src/views/orders/ProcessingOrders.js b/src/views/orders/ProcessingOrders.js index 4c10d21..8cb227a 100644 --- a/src/views/orders/ProcessingOrders.js +++ b/src/views/orders/ProcessingOrders.js @@ -1,301 +1,501 @@ +// import React, { useState, useEffect } from "react"; +// import { Link } from "react-router-dom"; +// import axios from "axios"; +// import { isAutheticated } from "src/auth"; +// import toast from "react-hot-toast"; + +// function ProcessingOrders() { +// const token = isAutheticated(); +// const [loading, setLoading] = useState(true); +// const [success, setSuccess] = useState(true); +// const [processingOrdersData, setProcessingOrdersData] = useState([]); + +// const [currentPage, setCurrentPage] = useState(1); +// const [itemPerPage, setItemPerPage] = useState(10); +// const [showData, setShowData] = useState(processingOrdersData); + +// const handleShowEntries = (e) => { +// setCurrentPage(1); +// setItemPerPage(e.target.value); +// }; + +// useEffect(() => { +// function getProcessingOrder() { +// axios +// .get(`/api/order/getAll/processing`, { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// }) +// .then((res) => { +// console.log(res.data.order); +// setProcessingOrdersData(res.data.order); +// setLoading(false); +// }) +// .catch((err) => { +// console.log(err); +// setLoading(false); +// }); +// } +// getProcessingOrder(); +// }, []); + +// useEffect(() => { +// const loadData = () => { +// const indexOfLastPost = currentPage * itemPerPage; +// const indexOfFirstPost = indexOfLastPost - itemPerPage; +// setShowData( +// processingOrdersData.slice(indexOfFirstPost, indexOfLastPost) +// ); +// }; +// loadData(); +// }, [currentPage, itemPerPage, processingOrdersData]); + +// return ( +//
+//
+//
+//
+//
+//
+//
+// Processing Orders +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// +//
+//
+//
+ +//
+// +// +// +// +// +// +// +// +// +// +// +// +// {!loading && showData.length === 0 && ( +// +// +// +// )} +// {loading ? ( +// +// +// +// ) : ( +// showData.map((order, i) => { +// return ( +// +// +// +// +// +// +// +// +// ); +// }) +// )} +// +//
Order IDCustomerOrder valueOrder AtStatusActions
+//
No Data Available
+//
+// Loading... +//
{order?.orderID} +// {order?.user?.name} +// +// ₹{order?.total_amount} +// +// {new Date(order?.paidAt).toLocaleString( +// "en-IN", +// { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// } +// )} +// +// +// {order?.orderStatus} +// +// +// {/* */} +// +// +// +//
+//
+ +//
+//
+//
+// Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} +// {Math.min( +// currentPage * itemPerPage, +// processingOrdersData.length +// )}{" "} +// of {processingOrdersData.length} entries +//
+//
+ +//
+//
+//
    +//
  • +// setCurrentPage((prev) => prev - 1)} +// > +// Previous +// +//
    • + +// {!(currentPage - 1 < 1) && ( +//
  • +// +// setCurrentPage((prev) => prev - 1) +// } +// > +// {currentPage - 1} +// +//
    • +// )} + +//
  • +// +// {currentPage} +// +//
    • + +// {!( +// (currentPage + 1) * itemPerPage - itemPerPage > +// processingOrdersData.length - 1 +// ) && ( +//
  • +// { +// setCurrentPage((prev) => prev + 1); +// }} +// > +// {currentPage + 1} +// +//
    • +// )} + +//
  • +// processingOrdersData.length - 1 +// ) +// ? "paginate_button page-item next" +// : "paginate_button page-item next disabled" +// } +// > +// setCurrentPage((prev) => prev + 1)} +// > +// Next +// +//
    • +//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ); +// } + +// export default ProcessingOrders; + import React, { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; +import { + Box, + Button, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, + TablePagination, + TextField, + MenuItem, + FormControl, + InputLabel, + Select, + Skeleton, +} from "@mui/material"; +import { useNavigate } from "react-router-dom"; import axios from "axios"; import { isAutheticated } from "src/auth"; -import toast from "react-hot-toast"; -function ProcessingOrders() { - const token = isAutheticated(); +const ProcessingOrders = () => { + const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(true); - const [success, setSuccess] = useState(true); - const [processingOrdersData, setProcessingOrdersData] = useState([]); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [totalOrders, setTotalOrders] = useState(0); + const [searchField, setSearchField] = useState("Order ID"); + const [searchText, setSearchText] = useState(""); + const navigate = useNavigate(); + const token = isAutheticated(); - const [currentPage, setCurrentPage] = useState(1); - const [itemPerPage, setItemPerPage] = useState(10); - const [showData, setShowData] = useState(processingOrdersData); - - const handleShowEntries = (e) => { - setCurrentPage(1); - setItemPerPage(e.target.value); + // Fetch orders with pagination + const fetchOrders = async (page, limit) => { + setLoading(true); + try { + const response = await axios.get("/api/get-processing-order-admin", { + headers: { + Authorization: `Bearer ${token}`, + }, + params: { + page: page + 1, // Adjusting for zero-based index in the UI + limit, + searchField, + searchText, + }, + }); + console.log(response); + setOrders(response?.data?.processingOrders); + setTotalOrders(response?.data?.totalOrders); + } catch (error) { + console.error("Error fetching orders:", error); + } finally { + setLoading(false); + } }; useEffect(() => { - function getProcessingOrder() { - axios - .get(`/api/order/getAll/processing`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - console.log(res.data.order); - setProcessingOrdersData(res.data.order); - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - } - getProcessingOrder(); - }, []); + fetchOrders(page, rowsPerPage); + }, [page, rowsPerPage, searchField, searchText]); - useEffect(() => { - const loadData = () => { - const indexOfLastPost = currentPage * itemPerPage; - const indexOfFirstPost = indexOfLastPost - itemPerPage; - setShowData( - processingOrdersData.slice(indexOfFirstPost, indexOfLastPost) - ); - }; - loadData(); - }, [currentPage, itemPerPage, processingOrdersData]); + const handleSearchChange = (event) => { + setSearchText(event.target.value); + }; + + const handleSearchFieldChange = (event) => { + setSearchField(event.target.value); + }; + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const filteredOrders = orders?.filter((order) => { + if (searchField === "Order ID") { + return order.uniqueId.toLowerCase().includes(searchText.toLowerCase()); + } + if (searchField === "Status") { + return order.status.toLowerCase().includes(searchText.toLowerCase()); + } + return orders; + }); return ( -
-
-
-
-
-
-
- Processing Orders -
-
-
-
-
-
-
-
-
-
-
- -
-
-
- -
- + + Processing Order Placed List + + + + Search By + + + + + +
+ + + Order ID + Order Date + Items + Order Value + Status + Action + + + + {loading ? ( + Array.from(new Array(rowsPerPage)).map((_, index) => ( + + + + + + )) + ) : filteredOrders.length > 0 ? ( + filteredOrders.map((order) => ( + + {order.uniqueId} + + {new Date(order.createdAt).toDateString()} + , {formatAMPM(order.createdAt)} + + {order.orderItem.length} + {order.grandTotal.toFixed(2)} + {order.status} + + - - - - - - - - - - - {!loading && showData.length === 0 && ( - - - - )} - {loading ? ( - - - - ) : ( - showData.map((order, i) => { - return ( - - - - - - - - - ); - }) - )} - -
Order IDCustomerOrder valueOrder AtStatusActions
-
No Data Available
-
- Loading... -
{order?.orderID} - {order?.user?.name} - - ₹{order?.total_amount} - - {new Date(order?.paidAt).toLocaleString( - "en-IN", - { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - } - )} - - - {order?.orderStatus} - - - {/* */} - - - -
-
- -
-
-
- Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} - {Math.min( - currentPage * itemPerPage, - processingOrdersData.length - )}{" "} - of {processingOrdersData.length} entries -
-
- -
-
-
    -
  • - setCurrentPage((prev) => prev - 1)} - > - Previous - -
    • - - {!(currentPage - 1 < 1) && ( -
  • - - setCurrentPage((prev) => prev - 1) - } - > - {currentPage - 1} - -
    • - )} - -
  • - - {currentPage} - -
    • - - {!( - (currentPage + 1) * itemPerPage - itemPerPage > - processingOrdersData.length - 1 - ) && ( -
  • - { - setCurrentPage((prev) => prev + 1); - }} - > - {currentPage + 1} - -
    • - )} - -
  • - processingOrdersData.length - 1 - ) - ? "paginate_button page-item next" - : "paginate_button page-item next disabled" - } - > - setCurrentPage((prev) => prev + 1)} - > - Next - -
    • -
-
-
-
-
-
-
-
-
-
-
+ View + + + + )) + ) : ( + + + Data not found + + + )} + + + + + ); -} +}; + +// 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 ProcessingOrders; diff --git a/src/views/orders/ViewOrders.js b/src/views/orders/ViewOrders.js index f5ac28d..bb19801 100644 --- a/src/views/orders/ViewOrders.js +++ b/src/views/orders/ViewOrders.js @@ -1,1010 +1,1622 @@ -import React, { useState, useEffect, useRef } from "react"; -import axios from "axios"; -import { Link, useNavigate, useParams } from "react-router-dom"; -import QRCode from "react-qr-code"; +// import React, { useState, useEffect, useRef } from "react"; +// import axios from "axios"; +// import { Link, useNavigate, useParams } from "react-router-dom"; +// import QRCode from "react-qr-code"; +// import { isAutheticated } from "src/auth"; +// import { useDispatch, useSelector } from "react-redux"; +// import { addItemsToCart } from "src/redux/Actions/cartAction"; +// import toast from "react-hot-toast"; +// import { cibBlackberry } from "@coreui/icons"; +// import Button from "@material-ui/core/Button"; + +// function ViewOrders() { +// const { status, id } = useParams(); +// const [success, setSuccess] = useState(true); + +// const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } = +// useSelector((state) => state.cart); + +// const AllStates = useSelector((state) => state); +// const getValue = useRef(); +// const getFranchiseeID = useRef(); +// const dispatch = useDispatch(); +// const navigate = useNavigate(); +// const printOrderRef = useRef(); +// const token = isAutheticated(); +// const [productData, setProductData] = useState([]); +// const [allFranchisee, setAllFranchisee] = useState([]); +// const [allTax, setAllTax] = useState([]); +// const [orderDetails, setOrderDetails] = useState(); + +// const [productDetails, setProductDetails] = useState(); +// const [loading, setLoading] = useState(true); +// const [orderId, setOrderId] = useState(null); +// const [orderStatus, setOrderStatus] = useState(""); +// // const [data, setData] = useState({ +// // product_Name: '', +// // address: '', +// // quantity: '', +// // contact_Number: '', +// // total_Price: '', +// // }) +// useEffect(() => { +// const getSingleOrder = async () => { +// setLoading(true); +// const res = await axios.get(`/api/order/getOne/${id}`, { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// }); +// if (res.data) { +// setLoading(false); +// setOrderId(res.data?.order?.order_id); +// setOrderDetails(res.data?.order); +// console.log("nnnnnnnnnnn", res.data?.order); +// // let options = { +// // Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id, +// // name: res.data?.order?.shippingInfo?.name, + +// // contact_Number: res.data?.order?.shippingInfo?.contact_Number, +// // contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name, +// // address: res.data?.order?.shippingInfo?.address, +// // city: res.data?.order?.shippingInfo?.city, +// // price_Lable: res.data?.order?.shippingInfo?.Franchisee?.price_Lable, +// // state: res.data?.order?.shippingInfo?.state, +// // banner: res.data?.order?.shippingInfo?.Franchisee?.banner?.url, +// // // Franchisee_Url: res?.data?.data?.url +// // } +// // dispatch({ type: "addShippingInfo", payload: options }); +// // if (res.data?.order?.orderItems) { +// // res.data?.order?.orderItems.map((i, ind) => { +// // dispatch({ type: "addToCart", payload: i }); +// // dispatch({ type: "calculatePrice" }); + +// // }) +// // } +// } +// }; +// getSingleOrder(); +// }, [token]); + +// const handleChange = (e) => { +// if (e.target.type === "text") { +// setData((prev) => ({ ...prev, [e.target.id]: e.target.value })); +// } else { +// if (e.target.value === "") toast.error("please select status"); +// setOrderStatus(e.target.value); +// } +// }; +// const handleQuantityChange = (e) => { +// setData((prev) => ({ +// ...prev, +// quantity: e.target.value, +// total_Price: productDetails?.base_Price * e.target.value, +// })); +// }; +// // ------------------------------------------------------ + +// const handlechangestatus = () => { +// if (orderStatus === "dispatched") { +// swal({ +// title: `Are you sure for ${orderStatus}?`, +// icon: "warning", +// content: { +// element: "div", +// attributes: { +// innerHTML: +// '' + +// '', +// }, +// }, +// buttons: { +// Yes: { text: "Submit", value: true }, + +// Cancel: { text: "Cancel", value: "cancel" }, +// }, +// }).then((result) => { +// if (result === true) { +// // You have the input values, you can use them in your API call +// const courierName = document.getElementById("input1").value.trim(); +// const TrackingID = document.getElementById("input2").value.trim(); + +// // Check if values are entered +// if (courierName === "" || TrackingID === "") { +// swal({ +// title: "Warning", +// text: "Please enter values Courier Name And Tracking ID", +// icon: "warning", +// button: "Ok", +// dangerMode: true, +// }); +// } else { +// axios +// .patch( +// `/api/order/change/status/${id}`, +// { +// status: orderStatus, +// courierName, +// TrackingID, +// sendemail: orderDetails?.user?.email, +// customerName: orderDetails?.user?.name, +// }, +// { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// } +// ) +// .then((res) => { +// console.log("status"); +// toast.success( +// `Order status change ${status} to ${orderStatus}` +// ); +// // setSuccess((prev) => !prev); +// }) +// .catch((err) => { +// swal({ +// title: "Warning", +// text: err.response.data.message +// ? err.response.data.message +// : "Something went wrong!", +// icon: "error", +// button: "Retry", +// dangerMode: true, +// }); +// }); +// } +// } +// // else { +// // swal.close(); // Close the popup if canceled +// // } +// }); +// } else if (orderStatus === "cancelled") { +// swal({ +// title: `Are you sure for ${orderStatus}?`, +// icon: "warning", +// content: { +// element: "div", +// attributes: { +// innerHTML: +// '

Reson for cancellation.?

', +// }, +// }, +// buttons: { +// Yes: { text: "Submit", value: true }, + +// Cancel: { text: "Cancel", value: "cancel" }, +// }, +// }).then((result) => { +// if (result === true) { +// // You have the input values, you can use them in your API call +// const ReasonforCancellation = document +// .getElementById("input1") +// .value.trim(); + +// // Check if values are entered +// if (ReasonforCancellation === "") { +// swal({ +// title: "Warning", +// text: "Please enter Reason for Cancellation", +// icon: "warning", +// button: "Ok", +// dangerMode: true, +// }); +// } else { +// axios +// .patch( +// `/api/order/change/status/${id}`, +// { +// status: orderStatus, +// ReasonforCancellation, +// }, +// { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// } +// ) +// .then((res) => { +// console.log("status"); +// toast.success( +// `Order status change ${status} to ${orderStatus}` +// ); +// // setSuccess((prev) => !prev); +// }) +// .catch((err) => { +// swal({ +// title: "Warning", +// text: err.response.data.message +// ? err.response.data.message +// : "Something went wrong!", +// icon: "error", +// button: "Retry", +// dangerMode: true, +// }); +// }); +// } +// } +// // else { +// // swal.close(); // Close the popup if canceled +// // } +// }); +// } else if (orderStatus === "delivered") { +// swal({ +// title: `Are you sure for ${orderStatus}?`, +// icon: "warning", +// content: { +// element: "div", +// attributes: { +// innerHTML: +// '', +// // '', +// }, +// }, +// buttons: { +// Yes: { text: "Submit", value: true }, + +// Cancel: { text: "Cancel", value: "cancel" }, +// }, +// }).then((result) => { +// if (result === true) { +// // You have the input values, you can use them in your API call +// const DDate = document.getElementById("input1").value.trim(); + +// // Check if values are entered +// if (DDate === "") { +// swal({ +// title: "Warning", +// text: "Please enter Delivered Date", +// icon: "warning", +// button: "Ok", +// dangerMode: true, +// }); +// } else { +// axios +// .patch( +// `/api/order/change/status/${id}`, +// { +// status: orderStatus, +// DDate, +// }, +// { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// } +// ) +// .then((res) => { +// console.log("status"); +// toast.success( +// `Order status change ${status} to ${orderStatus}` +// ); +// // setSuccess((prev) => !prev); +// }) +// .catch((err) => { +// swal({ +// title: "Warning", +// text: err.response.data.message +// ? err.response.data.message +// : "Something went wrong!", +// icon: "error", +// button: "Retry", +// dangerMode: true, +// }); +// }); +// } +// } +// // else { +// // swal.close(); // Close the popup if canceled +// // } +// }); +// } else { +// swal({ +// title: `Are you sure for ${orderStatus}?`, +// icon: "warning", + +// buttons: { +// Yes: { text: "Yes", value: true }, +// Cancel: { text: "Cancel", value: "cancel" }, +// }, +// }).then((value) => { +// if (value === true) { +// axios +// .patch( +// `/api/order/change/status/${id}`, +// { status: orderStatus }, +// { +// headers: { +// "Access-Control-Allow-Origin": "*", +// Authorization: `Bearer ${token}`, +// }, +// } +// ) +// .then((res) => { +// console.log("status"); +// toast.success(`order status change ${status} to ${orderStatus}`); +// // setSuccess((prev) => !prev); +// }) +// .catch((err) => { +// swal({ +// title: "Warning", +// text: err.response.data.message +// ? err.response.data.message +// : "Something went wrong!", +// icon: "error", +// button: "Retry", +// dangerMode: true, +// }); +// }); +// } +// }); +// } +// }; + +// function getBack() { +// navigate(`/orders/${status}`, { replace: true }); +// } + +// return ( +// <> +// {" "} +//
+//
+//
+//
+//
+//
+//
+//

View Order

+//
+//
+// {orderDetails?.orderID && ( +// +//
Order ID : {orderDetails?.orderID}
{" "} +// +// )} +//
+// {orderDetails?.courier_name && ( +//
+// +//
+// Courier Name: {orderDetails?.courier_name} +//
{" "} +//
+// Tracking ID : {orderDetails?.courier_tracking_id} +//
+// +//
+// )} +// {orderDetails?.isDelivered && ( +//
+// +//
Delivered: Yes
{" "} +//
+// Delivered Date: {orderDetails?.DeliveredDate} +//
+// +//
+// )} +//
+// {/* */} + +// +// +// +//
+//
+//
+//
+// {loading ? ( +//
+//
+// Loading... +//
+//
+// ) : ( +//
+//
+// {orderDetails?.shipingInfo !== null && ( +//
+//
+// {/*
+// +//
+// +// + +//
+ +//
*/} + +//
+//
+// Products : {orderDetails?.orderItems?.length} +//
+//
+ +// {orderDetails?.orderItems && +// orderDetails?.orderItems.map( +// (productDetails, i) => ( +//
+//
+//
+// {productDetails?.name} +//
+//
+//
+// {productDetails?.name} +//
+//
+//
+//
+// +// {" "} +// Quantity:{" "} +// {productDetails?.quantity} +// +//
+// {productDetails?.variant_Name ? ( +//

+// Variant : ₹ +// +// {productDetails?.variant_Name} +// +//

+// ) : ( +//

+// It`s Device +//

+// )} +//

+// Subtotal: ₹ +// {productDetails?.product_Subtotal} +//

+//
+//
+//

+// +// {productDetails?.variant_Name +// ? "Price:" +// : "Master Price"} +// {" "} +// ₹{productDetails?.price} +//

+// {productDetails?.gst_rate && ( +//

+// +// {productDetails?.variant_Name +// ? "GST Rate:" +// : "Master GST Rate:"}{" "} +// +// +// {productDetails?.gst_rate} % +// +//

+// )} +//

+// +// {productDetails?.variant_Name +// ? "GST:" +// : "Master GST:"}{" "} +// {" "} +// +// ₹{productDetails?.gst_amount} +// +//

+//
+//
+//
+//
+//
+//
+// ) +// )} +//
+//
+// Shipping Charge: {" "} +// ₹{orderDetails?.shipping_charge} +//
+// {orderDetails?.isCouponUsed && ( +//
+// Coupon_Code: +// {orderDetails?.couponUsed?.coupon_code} +//
+// )} +//
+//
+//
+// {" "} +// Total Amount: ₹ +// {Number(orderDetails?.total_amount) + +// Number( +// orderDetails?.couponUsed?.discount_amount +// ? orderDetails?.couponUsed +// ?.discount_amount +// : 0 +// )} +//
{" "} +// {orderDetails?.isCouponUsed && ( +// +// Coupon Discount:₹ +// {Number( +// orderDetails?.couponUsed?.discount_amount +// )} +// +// )} +//
+// {orderDetails?.isCouponUsed && ( +//
+// {" "} +// Total After Discount: ₹ +// {Number(orderDetails?.total_amount)} +//
+// )} +//
+//
+//
+//
+//
+// )} + +//
+//
+// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// {orderDetails?.status_timeline?.cancelled && ( +// +// +// +// +// +// )} +// {/* +// +// +// +// */} +// +//
Order Placed On : +// {orderDetails?.createdAt +// ? new Date( +// orderDetails?.createdAt +// ).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// }) +// : new Date( +// productData?.placed_on +// ).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// })} +//
+// Processing Started +// : +// {orderDetails?.status_timeline?.processing +// ? new Date( +// orderDetails?.status_timeline?.processing +// ).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// }) +// : "-"} +//
+// Dispatched On +// : +// {orderDetails?.status_timeline?.dispatched +// ? new Date( +// orderDetails?.status_timeline?.dispatched +// ).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// }) +// : "-"} +//
+// Delivered On +// : +// {orderDetails?.status_timeline?.delivered +// ? new Date( +// orderDetails?.status_timeline?.delivered +// ).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// }) +// : "-"} +//
+// Cancelled On +// : +// {orderDetails?.status_timeline?.cancelled +// ? new Date( +// orderDetails?.status_timeline?.cancelled +// ).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// }) +// : "-"} +//
Returned On : +// {orderDetails?.status_timeline?.returned +// ? new Date( +// orderDetails?.status_timeline?.returned +// ).toLocaleString("en-IN", { +// month: "short", +// day: "numeric", +// year: "numeric", +// hour: "2-digit", +// minute: "numeric", +// hour12: true, +// }) +// : "-"} +//
+//
+//
+//
+//
+//
+//
+//
+// {orderDetails?.orderStatus !== "cancelled" ? ( +//
+// Order Status: {orderDetails?.orderStatus} +//
+// ) : ( +// <> +//
+// Order Status: {orderDetails?.orderStatus} +//
+//

+// {" "} +// Order Cancelled Reason:{" "} +// {orderDetails?.order_Cancelled_Reason} +//

+// +// )} +// {/* order status change */}{" "} +//
+// {" "} +// {status !== "cancelled" && +// status !== "returned" && +// status !== "delivered" && ( +//
+// +//
+//
+// +//
+// {orderStatus && ( +//
+// +//
+// )} +//
+//
+// )} +//
+// {/* */} +// +// {/*
+// +// +//
*/} +//
+// {orderDetails?.shipingInfo !== null && ( +//
+//
+// {/*
+// {orderDetails?.shippingInfo?.name} +//
*/} +//
+//
+// Name: {orderDetails?.shippingInfo?.first_Name}{" "} +// {orderDetails?.shippingInfo?.last_Name} +//
+ +//

+// Contact No. :{" "} +// {orderDetails?.shippingInfo?.phone_Number} +//

+// +// street. : {orderDetails?.shippingInfo?.street} +// + +//

+// City : {orderDetails?.shippingInfo?.city} +//

+//

+// State : {orderDetails?.shippingInfo?.state} +//

+//

+// country : {orderDetails?.shippingInfo?.country} +//

+//

+// Postal Code. :{" "} +// {orderDetails?.shippingInfo?.postalCode} +//

+//
+//
+//
+//
+// )} +//
+// +//
+//
+// +//
+ +//
+// +//
+//
+// +//
+//
+// +//
+//
+// +//
+//
+//
+//
+//
+// )} +//
+//
+//
+//
+// {/* */} +//
+// +// ); +// } + +// export default ViewOrders; +import React, { useState, useEffect } from "react"; +import { + Box, + Typography, + Grid, + Button, + FormControl, + Dialog, + DialogActions, + DialogContent, + 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 { useDispatch, useSelector } from "react-redux"; -import { addItemsToCart } from "src/redux/Actions/cartAction"; -import toast from "react-hot-toast"; -import { cibBlackberry } from "@coreui/icons"; -import Button from "@material-ui/core/Button"; +import Swal from "sweetalert2"; -function ViewOrders() { - const { status, id } = useParams(); - const [success, setSuccess] = useState(true); - - const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } = - useSelector((state) => state.cart); - - const AllStates = useSelector((state) => state); - const getValue = useRef(); - const getFranchiseeID = useRef(); - const dispatch = useDispatch(); - const navigate = useNavigate(); - const printOrderRef = useRef(); - const token = isAutheticated(); - const [productData, setProductData] = useState([]); - const [allFranchisee, setAllFranchisee] = useState([]); - const [allTax, setAllTax] = useState([]); - const [orderDetails, setOrderDetails] = useState(); - - const [productDetails, setProductDetails] = useState(); - const [loading, setLoading] = useState(true); - const [orderId, setOrderId] = useState(null); +const ViewOrders = () => { + const [order, setOrder] = useState(null); // State to store order details + const [status, setStatus] = useState(""); + const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const [openDispatchDialog, setOpenDispatchDialog] = useState(false); + const [openCancelDialog, setOpenCancelDialog] = useState(false); + const [openDeliveredDialog, setOpenDeliveredDialog] = useState(false); // New dialog state for delivery confirmation + const [courierName, setCourierName] = useState(""); + const [courierId, setCourierId] = useState(""); + const [cancellationReason, setCancellationReason] = useState(""); + const [deliveryDate, setDeliveryDate] = useState(""); + const token = isAutheticated(); // State for delivery date const [orderStatus, setOrderStatus] = useState(""); - // const [data, setData] = useState({ - // product_Name: '', - // address: '', - // quantity: '', - // contact_Number: '', - // total_Price: '', - // }) + 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 getSingleOrder = async () => { - setLoading(true); - const res = await axios.get(`/api/order/getOne/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }); - if (res.data) { + const fetchOrderDetails = async () => { + try { + const response = await axios.get( + `/api/get-single-placed-order-pd/${id}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ); + console.log(response); + setOrder(response.data.singleOrder); + setStatus(response.data.singleOrder?.status); + + setLoading(false); + } catch (err) { + setError("Failed to fetch order details"); setLoading(false); - setOrderId(res.data?.order?.order_id); - setOrderDetails(res.data?.order); - console.log("nnnnnnnnnnn", res.data?.order); - // let options = { - // Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id, - // name: res.data?.order?.shippingInfo?.name, - - // contact_Number: res.data?.order?.shippingInfo?.contact_Number, - // contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name, - // address: res.data?.order?.shippingInfo?.address, - // city: res.data?.order?.shippingInfo?.city, - // price_Lable: res.data?.order?.shippingInfo?.Franchisee?.price_Lable, - // state: res.data?.order?.shippingInfo?.state, - // banner: res.data?.order?.shippingInfo?.Franchisee?.banner?.url, - // // Franchisee_Url: res?.data?.data?.url - // } - // dispatch({ type: "addShippingInfo", payload: options }); - // if (res.data?.order?.orderItems) { - // res.data?.order?.orderItems.map((i, ind) => { - // dispatch({ type: "addToCart", payload: i }); - // dispatch({ type: "calculatePrice" }); - - // }) - // } } }; - getSingleOrder(); - }, [token]); - const handleChange = (e) => { - if (e.target.type === "text") { - setData((prev) => ({ ...prev, [e.target.id]: e.target.value })); - } else { - if (e.target.value === "") toast.error("please select status"); - setOrderStatus(e.target.value); - } - }; - const handleQuantityChange = (e) => { - setData((prev) => ({ - ...prev, - quantity: e.target.value, - total_Price: productDetails?.base_Price * e.target.value, - })); - }; - // ------------------------------------------------------ + fetchOrderDetails(); + }, [id]); - const handlechangestatus = () => { + const handleStatusChange = (event) => { + setOrderStatus(event.target.value); + }; + + const handleUpdateClick = () => { if (orderStatus === "dispatched") { - swal({ - title: `Are you sure for ${orderStatus}?`, - icon: "warning", - content: { - element: "div", - attributes: { - innerHTML: - '' + - '', - }, - }, - buttons: { - Yes: { text: "Submit", value: true }, - - Cancel: { text: "Cancel", value: "cancel" }, - }, - }).then((result) => { - if (result === true) { - // You have the input values, you can use them in your API call - const courierName = document.getElementById("input1").value.trim(); - const TrackingID = document.getElementById("input2").value.trim(); - - // Check if values are entered - if (courierName === "" || TrackingID === "") { - swal({ - title: "Warning", - text: "Please enter values Courier Name And Tracking ID", - icon: "warning", - button: "Ok", - dangerMode: true, - }); - } else { - axios - .patch( - `/api/order/change/status/${id}`, - { - status: orderStatus, - courierName, - TrackingID, - sendemail: orderDetails?.user?.email, - customerName: orderDetails?.user?.name, - }, - { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - } - ) - .then((res) => { - console.log("status"); - toast.success( - `Order status change ${status} to ${orderStatus}` - ); - // setSuccess((prev) => !prev); - }) - .catch((err) => { - swal({ - title: "Warning", - text: err.response.data.message - ? err.response.data.message - : "Something went wrong!", - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - } - } - // else { - // swal.close(); // Close the popup if canceled - // } - }); + setOpenDispatchDialog(true); } else if (orderStatus === "cancelled") { - swal({ - title: `Are you sure for ${orderStatus}?`, - icon: "warning", - content: { - element: "div", - attributes: { - innerHTML: - '

Reson for cancellation.?

', - }, - }, - buttons: { - Yes: { text: "Submit", value: true }, - - Cancel: { text: "Cancel", value: "cancel" }, - }, - }).then((result) => { - if (result === true) { - // You have the input values, you can use them in your API call - const ReasonforCancellation = document - .getElementById("input1") - .value.trim(); - - // Check if values are entered - if (ReasonforCancellation === "") { - swal({ - title: "Warning", - text: "Please enter Reason for Cancellation", - icon: "warning", - button: "Ok", - dangerMode: true, - }); - } else { - axios - .patch( - `/api/order/change/status/${id}`, - { - status: orderStatus, - ReasonforCancellation, - }, - { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - } - ) - .then((res) => { - console.log("status"); - toast.success( - `Order status change ${status} to ${orderStatus}` - ); - // setSuccess((prev) => !prev); - }) - .catch((err) => { - swal({ - title: "Warning", - text: err.response.data.message - ? err.response.data.message - : "Something went wrong!", - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - } - } - // else { - // swal.close(); // Close the popup if canceled - // } - }); + setOpenCancelDialog(true); } else if (orderStatus === "delivered") { - swal({ - title: `Are you sure for ${orderStatus}?`, - icon: "warning", - content: { - element: "div", - attributes: { - innerHTML: - '', - // '', - }, - }, - buttons: { - Yes: { text: "Submit", value: true }, - - Cancel: { text: "Cancel", value: "cancel" }, - }, - }).then((result) => { - if (result === true) { - // You have the input values, you can use them in your API call - const DDate = document.getElementById("input1").value.trim(); - - // Check if values are entered - if (DDate === "") { - swal({ - title: "Warning", - text: "Please enter Delivered Date", - icon: "warning", - button: "Ok", - dangerMode: true, - }); - } else { - axios - .patch( - `/api/order/change/status/${id}`, - { - status: orderStatus, - DDate, - }, - { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - } - ) - .then((res) => { - console.log("status"); - toast.success( - `Order status change ${status} to ${orderStatus}` - ); - // setSuccess((prev) => !prev); - }) - .catch((err) => { - swal({ - title: "Warning", - text: err.response.data.message - ? err.response.data.message - : "Something went wrong!", - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - } - } - // else { - // swal.close(); // Close the popup if canceled - // } - }); + setOpenDeliveredDialog(true); } else { - swal({ - title: `Are you sure for ${orderStatus}?`, - icon: "warning", - - buttons: { - Yes: { text: "Yes", value: true }, - Cancel: { text: "Cancel", value: "cancel" }, - }, - }).then((value) => { - if (value === true) { - axios - .patch( - `/api/order/change/status/${id}`, - { status: orderStatus }, - { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - } - ) - .then((res) => { - console.log("status"); - toast.success(`order status change ${status} to ${orderStatus}`); - // setSuccess((prev) => !prev); - }) - .catch((err) => { - swal({ - title: "Warning", - text: err.response.data.message - ? err.response.data.message - : "Something went wrong!", - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - } - }); + setOpenConfirmDialog(true); } }; - function getBack() { - navigate(`/orders/${status}`, { replace: true }); + const handleConfirmUpdate = async (e) => { + e.preventDefault(); + try { + if (orderStatus === "cancelled") { + if (!cancellationReason) { + Swal.fire("Please give the order cancellation reason"); + } + const cancellationRes = await axios.patch( + `/api/change/status/${id}`, + { + status: orderStatus, + ReasonforCancellation: cancellationReason, + }, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (cancellationRes.status === 200) { + Swal.fire( + "Order Status updated", + `Order got cancelled due to${cancellationReason}`, + "success" + ); + navigate(`/orders/${orderStatus}/${id}`); + } + } + // else if (orderStatus === "dispatched") { + // const cancellationRes = await axios.patch( + // `/api/change/status/${id}`, + // { + // status: orderStatus, + // courierName, + // TrackingID: courierId, + // }, + // { + // headers: { + // "Access-Control-Allow-Origin": "*", + // Authorization: `Bearer ${token}`, + // }, + // } + // ); + // if (cancellationRes.status === 200) { + // Swal.fire("Order Status updated", `Order Dispatched`, "success"); + + // navigate(`/orders/${orderStatus}/${id}`); + // } + // } + // else if (orderStatus === "delivered") { + // if (!deliveryDate) { + // Swal.fire("Please enter the Delivery Date"); + // setOpenDeliveredDialog(false); + // return; + // } + // const cancellationRes = await axios.patch( + // `/api/change/status/${id}`, + // { + // status: orderStatus, + // DDate: deliveryDate, + // }, + // { + // headers: { + // "Access-Control-Allow-Origin": "*", + // Authorization: `Bearer ${token}`, + // }, + // } + // ); + // if (cancellationRes.status === 200) { + // Swal.fire("Order Status updated", `Order in processing`, "success"); + // navigate(`/orders/${orderStatus}/${id}`); + // } + // } + else if (orderStatus === "processing") { + const cancellationRes = await axios.patch( + `/api/change/status/${id}`, + { + status: orderStatus, + }, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (cancellationRes.status === 200) { + Swal.fire("Order Status updated", `Order in processing`, "success"); + navigate(`/orders/${orderStatus}/${id}`); + } + } + } catch (error) { + Swal.fire("Something went wrong ", error.message, "error"); + } + // Perform update logic here + setOpenConfirmDialog(false); + setOpenDispatchDialog(false); + setOpenCancelDialog(false); + setOpenDeliveredDialog(false); // Close delivered dialog + }; + + const handleCancel = async () => { + setOpenConfirmDialog(false); + setOpenDispatchDialog(false); + setOpenCancelDialog(false); + setOpenDeliveredDialog(false); // Close delivered dialog + }; + + const timelineData = [ + { event: "Order Placed On", date: order?.createdAt }, + { + event: "Processing Started", + date: order?.status_timeline?.processing || "-", + }, + { event: "Dispatched On", date: order?.status_timeline?.dispatched || "-" }, + { event: "Delivered On", date: order?.status_timeline?.delivered || "-" }, + ]; + + if (loading) { + return Loading...; + } + + if (error) { + return {error}; } return ( - <> - {" "} -
-
-
-
-
-
+ + + Order ID: {order?.uniqueId} + + + + + + + + Order Summary + + + + {order?.orderItem.map((item, index) => ( + + + + + + {item.productId.name} + + + Price:₹{item.price} + + + Quantity: {item.quantity} + + + Subtotal: ₹{item.price * item.quantity} + + + Tax ({item.GST}%): ₹ + {((item.GST * item.price) / 100) * item.quantity} + + + Total with Tax: ₹{" "} + {((item.GST * item.price) / 100) * item.quantity + + item.price * item.quantity} + + + + + ))} + + + + -
-

View Order

-
-
- {orderDetails?.orderID && ( - -
Order ID : {orderDetails?.orderID}
{" "} - - )} -
- {orderDetails?.courier_name && ( -
- -
- Courier Name: {orderDetails?.courier_name} -
{" "} -
- Tracking ID : {orderDetails?.courier_tracking_id} -
- -
- )} - {orderDetails?.isDelivered && ( -
- -
Delivered: Yes
{" "} -
- Delivered Date: {orderDetails?.DeliveredDate} -
- -
- )} -
- {/* */} + + Order Summary + + + + Total Items: {order?.orderItem.length} + - - - -
-
-
-
- {loading ? ( -
-
- Loading... -
-
- ) : ( -
-
- {orderDetails?.shipingInfo !== null && ( -
-
- {/*
- -
- - - -
- -
*/} - -
-
- Products : {orderDetails?.orderItems?.length} -
-
- - {orderDetails?.orderItems && - orderDetails?.orderItems.map( - (productDetails, i) => ( -
-
-
- {productDetails?.name} -
-
-
- {productDetails?.name} -
-
-
-
- - {" "} - Quantity:{" "} - {productDetails?.quantity} - -
- {productDetails?.variant_Name ? ( -

- Variant : ₹ - - {productDetails?.variant_Name} - -

- ) : ( -

- It`s Device -

- )} -

- Subtotal: ₹ - {productDetails?.product_Subtotal} -

-
-
-

- - {productDetails?.variant_Name - ? "Price:" - : "Master Price"} - {" "} - ₹{productDetails?.price} -

- {productDetails?.gst_rate && ( -

- - {productDetails?.variant_Name - ? "GST Rate:" - : "Master GST Rate:"}{" "} - - - {productDetails?.gst_rate} % - -

- )} -

- - {productDetails?.variant_Name - ? "GST:" - : "Master GST:"}{" "} - {" "} - - ₹{productDetails?.gst_amount} - -

-
-
-
-
-
-
- ) + Total Subtotal: ₹{order?.subtotal} + Total Tax: ₹{order?.gstTotal} + + Grand Total: ₹{order?.grandTotal} + + + + + + + + + Status timeline + + + + {timelineData.map((row, index) => ( + + + {row.event} + + + {row.date !== "-" ? ( + <> + {new Date(row.date).toDateString()} + , {formatAMPM(row.date)} + + ) : ( + "-" )} -
-
- Shipping Charge: {" "} - ₹{orderDetails?.shipping_charge} -
- {orderDetails?.isCouponUsed && ( -
- Coupon_Code: - {orderDetails?.couponUsed?.coupon_code} -
- )} -
-
-
- {" "} - Total Amount: ₹ - {Number(orderDetails?.total_amount) + - Number( - orderDetails?.couponUsed?.discount_amount - ? orderDetails?.couponUsed - ?.discount_amount - : 0 - )} -
{" "} - {orderDetails?.isCouponUsed && ( - - Coupon Discount:₹ - {Number( - orderDetails?.couponUsed?.discount_amount - )} - - )} -
- {orderDetails?.isCouponUsed && ( -
- {" "} - Total After Discount: ₹ - {Number(orderDetails?.total_amount)} -
- )} -
-
- - - - )} -
-
- -
- - - - - - - - - - - - - - - - - - - - - - {orderDetails?.status_timeline?.cancelled && ( - - - - - - )} - {/* - - - - */} - -
Order Placed On : - {orderDetails?.createdAt - ? new Date( - orderDetails?.createdAt - ).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - }) - : new Date( - productData?.placed_on - ).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - })} -
- Processing Started - : - {orderDetails?.status_timeline?.processing - ? new Date( - orderDetails?.status_timeline?.processing - ).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - }) - : "-"} -
- Dispatched On - : - {orderDetails?.status_timeline?.dispatched - ? new Date( - orderDetails?.status_timeline?.dispatched - ).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - }) - : "-"} -
- Delivered On - : - {orderDetails?.status_timeline?.delivered - ? new Date( - orderDetails?.status_timeline?.delivered - ).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - }) - : "-"} -
- Cancelled On - : - {orderDetails?.status_timeline?.cancelled - ? new Date( - orderDetails?.status_timeline?.cancelled - ).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - }) - : "-"} -
Returned On : - {orderDetails?.status_timeline?.returned - ? new Date( - orderDetails?.status_timeline?.returned - ).toLocaleString("en-IN", { - month: "short", - day: "numeric", - year: "numeric", - hour: "2-digit", - minute: "numeric", - hour12: true, - }) - : "-"} -
-
-
-
-
-
-
-
- {orderDetails?.orderStatus !== "cancelled" ? ( -
- Order Status: {orderDetails?.orderStatus} -
- ) : ( - <> -
- Order Status: {orderDetails?.orderStatus} -
-

- {" "} - Order Cancelled Reason:{" "} - {orderDetails?.order_Cancelled_Reason} -

- - )} - {/* order status change */}{" "} -
- {" "} - {status !== "cancelled" && - status !== "returned" && - status !== "delivered" && ( -
- -
-
- -
- {orderStatus && ( -
- -
- )} -
-
- )} -
- {/* */} - - {/*
- - -
*/} -
- {orderDetails?.shipingInfo !== null && ( -
-
- {/*
- {orderDetails?.shippingInfo?.name} -
*/} -
-
- Name: {orderDetails?.shippingInfo?.first_Name}{" "} - {orderDetails?.shippingInfo?.last_Name} -
+ {/* {row.date} */} + + + ))} + + + + + + + + + + + + + Customer Details + + + SBU: {order?.addedBy.SBU} + + + Name: {order?.addedBy.name} + + + Email id: {order?.addedBy.email} + + + Number: {order?.addedBy.phone} + + + + + Bill Address + + {order?.billTo} + + + + Ship Address + + {order?.shipTo} + + + + Payment mode + + + {order?.paymentMode} + + -

- Contact No. :{" "} - {orderDetails?.shippingInfo?.phone_Number} -

- - street. : {orderDetails?.shippingInfo?.street} - + + + Order Status + + {order?.status} + {order?.status === "cancelled" && ( + + {order?.order_Cancelled_Reason} + + )} + + + + {order?.status !== "cancelled" && order?.status !== "delivered" && ( + + + + )} -

- City : {orderDetails?.shippingInfo?.city} -

-

- State : {orderDetails?.shippingInfo?.state} -

-

- country : {orderDetails?.shippingInfo?.country} -

-

- Postal Code. :{" "} - {orderDetails?.shippingInfo?.postalCode} -

-
-
-
-
- )} -
- -
-
- -
+ {orderStatus && ( + + )} + + -
- -
-
- -
-
- -
-
- -
-
-
-
-
- )} -
-
-
-
- {/* */} -
- + {/* Dialog for dispatch details */} + + Dispatch Details +
+ + + Please provide courier name and ID for dispatch: + + + setCourierName(e.target.value)} + /> + setCourierId(e.target.value)} + /> + + + + + +
+ + + {/* Dialog for cancellation reason */} + + Cancellation Reason +
+ + + Please provide a reason for cancelling the order: + + setCancellationReason(e.target.value)} + /> + + + + + +
+ + + {/* Dialog for delivery confirmation */} + + Confirm Delivery +
+ + + Please confirm the delivery details: + + + setDeliveryDate(e.target.value)} + InputLabelProps={{ + shrink: true, + }} + /> + + + + + + +
+ + ); -} - +}; +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 ViewOrders; diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js index a177a95..380d955 100644 --- a/src/views/pages/login/Login.js +++ b/src/views/pages/login/Login.js @@ -19,6 +19,7 @@ import ClipLoader from "react-spinners/ClipLoader"; import { useState } from "react"; import axios from "axios"; import { useHistory } from "react-router-dom"; +import swal from "sweetalert"; const Login = () => { const [loading, setLoading] = useState(false);