-
-
-
-
-
-
-
-
- Cancelled Orders
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
+ View
+
+
+
+ ))
+ ) : (
+
-
-
-
- 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 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
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+// | Order ID | +//Customer | +//Order value | +//Order At | +//Status | +//Actions | +//
|---|---|---|---|---|---|
+// 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 +// +// +//
-
-
-
-
-
-
-
-
-
- Delivered Orders
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
+ View
+
+
+
+ ))
+ ) : (
+
-
-
-
- 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 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
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+// | Order ID | +//Customer | +//Order value | +//Order At | +//Status | +//Actions | +//
|---|---|---|---|---|---|
+// 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 +// +// +//
-
-
-
-
-
-
-
-
-
- Dispatched Orders
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
+ View
+
+
+
+ ))
+ ) : (
+
-
-
-
- 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 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
+//
+
+// {/*
+//
+//
+//
+//
*/}
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// Search by :
+//
+//
+//
+//
+//
+
+// {/*
+// {searchValue === "OrderDate" && (
+// setSearchTerm(date)}
+// dateFormat="dd/MM/yyyy"
+// placeholderText="Select a date"
+// />
+// )}
+// {searchValue !== "OrderDate" && (
+// setSearchTerm(e.target.value)}
+// />
+// )}
+//
*/}
+//
+// setSearchTerm(e.target.value)}
+// />
+//
+//
+//
+//
+//
+//
+
+// | Order ID | +//Customer | +//Order value | +//Order At | +//Status | +//Actions | +//
|---|---|---|---|---|---|
+// 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 +// +// +//
-
-
-
-
-
-
- New Orders
-
-
- {/*
-
+
+
+ New Order Placed List
+
+
+
+ Search By
+
+
+
+
+
+
+
+
);
-}
+};
+
+// 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 (
+//
| Order ID | -Customer | -Order value | -Order At | -Status | -Actions | -
|---|---|---|---|---|---|
- 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 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
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+// | Order ID | +//Customer | +//Order value | +//Order At | +//Status | +//Actions | +//
|---|---|---|---|---|---|
+// 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 +// +// +//
-
-
-
-
-
-
-
-
-
- Processing Orders
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Loading... ;
+ }
+
+ if (error) {
+ return {error} ;
}
return (
- <>
- {" "}
-
-
-
-
-
-
-
-
-
-
+ View
+
+
+
+ ))
+ ) : (
+
-
-
-
- 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 - - -
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 ( +// <> +// {" "} +//
+//
+//
+//
+//
+//
+//
+//
+// {loading ? (
+//
+//
+//
+//
+//
+//
+// View Order
+//
+// {orderDetails?.orderID && (
+//
+//
+// {orderDetails?.courier_name && (
+// Order ID : {orderDetails?.orderID}
{" "} +// +// )} +//
+//
+//
+// )}
+// {orderDetails?.isDelivered && (
+// +// Courier Name: {orderDetails?.courier_name} +//
{" "} +//+// Tracking ID : {orderDetails?.courier_tracking_id} +//
+// +//
+//
+//
+// )}
+// Delivered: Yes
{" "} +//+// Delivered Date: {orderDetails?.DeliveredDate} +//
+// +//
+// {/* */}
+
+//
+//
+//
+//
+//
+//
+// ) : (
+//
+// Loading...
+//
+//
+//
+// )}
+//
+// {orderDetails?.shipingInfo !== null && (
+//
+//
+//
+// )}
+
+//
+// {/*
+//
+//
+//
*/}
+
+//
+//
+//
+
+//
+
+//
+//
+ +// {orderDetails?.orderItems && +// orderDetails?.orderItems.map( +// (productDetails, i) => ( +//
+// +// Products : {orderDetails?.orderItems?.length} +//
+//+ +// {orderDetails?.orderItems && +// orderDetails?.orderItems.map( +// (productDetails, i) => ( +//
+//
+//
+// )
+// )}
+//
+//
+//
+// 
+//
+//
+//
+// +// {productDetails?.name} +//
+//
+//
+//
+//
+//
+//
+// {" "}
+// Quantity:{" "}
+// {productDetails?.quantity}
+//
+//
+// {productDetails?.variant_Name ? (
+// +// Variant : ₹ +// +// {productDetails?.variant_Name} +// +//
+// ) : ( +//+// It`s Device +//
+// )} +//
+//
+//
+//
+//
+// +// {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 && ( +//
+// +// {orderDetails?.isCouponUsed && ( +//
+// Coupon_Code: +// {orderDetails?.couponUsed?.coupon_code} +//
+// )} +//
+//
+// {orderDetails?.isCouponUsed && ( +//
+// +// {" "} +// 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)} +//
+// )} +//
+//
+//
+//
+//
+//
+//
+//
+// | 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" ? (
+//
+// {orderDetails?.shipingInfo !== null && (
+// +// 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 && (
+//
+//
+//
+// )}
+//
+//
+//
+//
*/}
+//
+//
+//
+// )}
+//
+// {/*
+//
+// 
+//
*/}
+//
+//
+// street. : {orderDetails?.shippingInfo?.street}
+//
+
+//
+// +// Name: {orderDetails?.shippingInfo?.first_Name}{" "} +// {orderDetails?.shippingInfo?.last_Name} +//
+ +//+// Contact No. :{" "} +// {orderDetails?.shippingInfo?.phone_Number} +//
+//+// 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 ? (
-
-
-
+
+
+ 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 && (
-
-
- {orderDetails?.courier_name && (
- Order ID : {orderDetails?.orderID}
{" "} - - )} -
-
-
- )}
- {orderDetails?.isDelivered && (
- - Courier Name: {orderDetails?.courier_name} -
{" "} -- Tracking ID : {orderDetails?.courier_tracking_id} -
- -
-
-
- )}
- Delivered: Yes
{" "} -- Delivered Date: {orderDetails?.DeliveredDate} -
- -
- {/* */}
+
+ Order Summary
+
+
+ Total Items: {order?.orderItem.length}
+
-
-
-
-
-
-
- ) : (
-
- Loading...
-
-
-
-
- {orderDetails?.shipingInfo !== null && (
-
-
-
-
- )}
-
- {/*
-
-
-
*/}
-
-
-
-
-
-
-
-
-
- - {orderDetails?.orderItems && - orderDetails?.orderItems.map( - (productDetails, i) => ( -Total Subtotal: ₹{order?.subtotal}
+ Total Tax: ₹{order?.gstTotal}
+
+ Grand Total: ₹{order?.grandTotal}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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}
+
+
-
- street. : {orderDetails?.shippingInfo?.street}
-
+
+
+ Order Status
+
+ {order?.status}
+ {order?.status === "cancelled" && (
+
+ {order?.order_Cancelled_Reason}
+
+ )}
+
+
+
+ {order?.status !== "cancelled" && order?.status !== "delivered" && (
+
+
+
+ )}
-
- - Products : {orderDetails?.orderItems?.length} -
-- - {orderDetails?.orderItems && - orderDetails?.orderItems.map( - (productDetails, i) => ( -
-
-
- )
+
-
-
-
-
-
-
- - {productDetails?.name} -
-
-
-
-
-
-
- {" "}
- Quantity:{" "}
- {productDetails?.quantity}
-
-
- {productDetails?.variant_Name ? (
- - Variant : ₹ - - {productDetails?.variant_Name} - -
- ) : ( -- It`s Device -
- )} -
-
-
-
-
- - {productDetails?.variant_Name - ? "GST Rate:" - : "Master GST Rate:"}{" "} - - - {productDetails?.gst_rate} % - -
- )} -- - {productDetails?.variant_Name - ? "GST:" - : "Master GST:"}{" "} - {" "} - - ₹{productDetails?.gst_amount} - -
--
| 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" ? (
-
- {orderDetails?.shipingInfo !== null && (
- - 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 && (
-
-
-
- )}
-
-
-
-
*/}
-
-
- {/*
-
-
*/}
-
-
- Name: {orderDetails?.shippingInfo?.first_Name}{" "} - {orderDetails?.shippingInfo?.last_Name} -
+ {/* {row.date} */} + + + ))} + +- Contact No. :{" "} - {orderDetails?.shippingInfo?.phone_Number} -
-- City : {orderDetails?.shippingInfo?.city} -
-- State : {orderDetails?.shippingInfo?.state} -
-- country : {orderDetails?.shippingInfo?.country} -
-- Postal Code. :{" "} - {orderDetails?.shippingInfo?.postalCode} -
--
-
-
-
-
-
+ {orderStatus && (
+
+ )}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/*
-
+ {/* Dialog for dispatch details */}
+
+
+ {/* Dialog for cancellation reason */}
+
+
+ {/* Dialog for delivery confirmation */}
+
+
);
-}
-
+};
+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);