Merge branch 'master' of http://128.199.30.231/possibillion/smellika-admin
This commit is contained in:
roshangarg
commit
a5aa3ce47b
@ -61,6 +61,7 @@
|
||||
"react-dom": "^18.0.0",
|
||||
"react-draft-wysiwyg": "^1.15.0",
|
||||
"react-hot-toast": "^2.4.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-qr-code": "^2.0.11",
|
||||
"react-quill": "^2.0.0",
|
||||
"react-redux": "^7.2.9",
|
||||
|
||||
@ -7,37 +7,26 @@
|
||||
* License MIT
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="CoreUI for React - Open Source Bootstrap Admin Template"
|
||||
/>
|
||||
<meta name="author" content="Łukasz Holeczek" />
|
||||
<meta
|
||||
name="keyword"
|
||||
content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React"
|
||||
/>
|
||||
<title>Smellika Admin</title>
|
||||
<!--
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template" />
|
||||
<meta name="author" content="Łukasz Holeczek" />
|
||||
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React" />
|
||||
<title>Smellika Admin</title>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
|
||||
/>
|
||||
<link rel="react" href="https://coreui.io/react/" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
|
||||
<link rel="react" href="https://coreui.io/react/" />
|
||||
|
||||
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> -->
|
||||
<!--
|
||||
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> -->
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -47,16 +36,16 @@
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
|
||||
-->
|
||||
<!-- <link href="/assets/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
<!-- <link href="/assets/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<!-- <link href="/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" /> -->
|
||||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> -->
|
||||
</head>
|
||||
<!-- <link href="/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" /> -->
|
||||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<body>
|
||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -66,6 +55,8 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
<!-- <script src="/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script> -->
|
||||
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
|
||||
</body>
|
||||
<!-- <script src="/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script> -->
|
||||
|
||||
</html>
|
||||
20
src/_nav.js
20
src/_nav.js
@ -152,6 +152,18 @@ const _nav = [
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: "/orders/cancelled",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "In Store Cash Orders",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: "/inStoreCashOrders/new",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "In Store QRCode Orders",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: "/InStoreQRCodeOrders/new",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -315,7 +327,13 @@ const _nav = [
|
||||
icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
|
||||
to: "/employee",
|
||||
},
|
||||
|
||||
//Point of Sale start
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Point of Sale",
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: "/pos",
|
||||
},
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: "Blog",
|
||||
|
||||
@ -14,7 +14,7 @@ import { cibGmail } from "@coreui/icons";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
const setupAxios = () => {
|
||||
//axios.defaults.baseURL = "http://localhost:5000";
|
||||
// axios.defaults.baseURL = "http://localhost:5000";
|
||||
axios.defaults.baseURL = "https://api.smellika.com";
|
||||
|
||||
axios.defaults.headers = {
|
||||
|
||||
@ -137,6 +137,10 @@ import { element } from "prop-types";
|
||||
import OrderdayChart from "./views/Charts/OrderDaywise";
|
||||
import RevenueCharts from "./views/Charts/RevenueCharts";
|
||||
import AddCustomer from "./views/customerDetails/addCustomer";
|
||||
import Pos from "./views/PointOfSale/Pos";
|
||||
import InStoreCashOrders from "./views/orders/InStoreCashOrders";
|
||||
import POSViewOrders from "./views/orders/POSViewOrders";
|
||||
import InStoreQRCodeOrders from "./views/orders/InStoreQRCodeOrders";
|
||||
import EmailCms from "./views/CustomerSupport/EmailCMS/EmailCms";
|
||||
import RegistrationEmail from "./views/CustomerSupport/EmailCMS/RegistrationEmail";
|
||||
import Employee from "./views/EmployeeAccess/Employee";
|
||||
@ -454,6 +458,10 @@ const routes = [
|
||||
name: "Returned Orders",
|
||||
element: ReturnedOrders,
|
||||
},
|
||||
//Point of sale orders
|
||||
{ path: "/inStoreCashOrders/new", name: "In Store Cash Orders", element:InStoreCashOrders },
|
||||
{ path: "/InStoreQRCodeOrders/new", name: "In Store QR Code Orders", element:InStoreQRCodeOrders },
|
||||
{ path: "/inStoreOrders/:status/:id", name: "View In Store Cash Orders", element: POSViewOrders },
|
||||
// { path: "/order/:status/:id", name: "View Order", element: ViewOdr },
|
||||
|
||||
//dashboard
|
||||
@ -625,6 +633,12 @@ const routes = [
|
||||
name: "Revenue (Day Wise)",
|
||||
element: RevenueCharts,
|
||||
},
|
||||
//Point of Sale Section
|
||||
{
|
||||
path: "/pos",
|
||||
name: "Point of Sale",
|
||||
element: Pos,
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
|
||||
77
src/views/PointOfSale/AddressSelectionModal.js
Normal file
77
src/views/PointOfSale/AddressSelectionModal.js
Normal file
@ -0,0 +1,77 @@
|
||||
import React from "react";
|
||||
import Modal from "react-modal";
|
||||
|
||||
const AddressSelectionModal = ({ isOpen, onClose, addresses, onSelect }) => {
|
||||
const modalStyle = {
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
maxWidth: "800px",
|
||||
width: "90%",
|
||||
},
|
||||
};
|
||||
|
||||
const tableStyle = {
|
||||
width: "100%",
|
||||
borderCollapse: "collapse",
|
||||
};
|
||||
|
||||
const thTdStyle = {
|
||||
border: "1px solid #ddd",
|
||||
padding: "8px",
|
||||
};
|
||||
|
||||
const thStyle = {
|
||||
...thTdStyle,
|
||||
backgroundColor: "#f2f2f2",
|
||||
};
|
||||
// console.log(addresses);
|
||||
return (
|
||||
<Modal isOpen={isOpen} onRequestClose={onClose} style={modalStyle}>
|
||||
<h2>Select Address</h2>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={thStyle}>First Name</th>
|
||||
<th style={thStyle}>Last Name</th>
|
||||
<th style={thStyle}>Phone Number</th>
|
||||
<th style={thStyle}>Street</th>
|
||||
<th style={thStyle}>City</th>
|
||||
<th style={thStyle}>Postal Code</th>
|
||||
<th style={thStyle}>State</th>
|
||||
{/* Add additional columns as needed */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{addresses.map((address, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
onClick={() => onSelect(address)}
|
||||
style={{ cursor: "pointer", ...thTdStyle }}
|
||||
>
|
||||
<td>{address.first_Name}</td>
|
||||
<td>{address.last_Name}</td>
|
||||
<td>{address.phone_Number}</td>
|
||||
<td>{address.street}</td>
|
||||
<td>{address.city}</td>
|
||||
<td>{address.postalCode}</td>
|
||||
<td>{address.state}</td>
|
||||
{/* Add additional columns as needed */}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<button onClick={onClose}>Close</button>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressSelectionModal;
|
||||
|
||||
1320
src/views/PointOfSale/Pos.js
Normal file
1320
src/views/PointOfSale/Pos.js
Normal file
File diff suppressed because it is too large
Load Diff
386
src/views/orders/InStoreCashOrders.js
Normal file
386
src/views/orders/InStoreCashOrders.js
Normal file
@ -0,0 +1,386 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
|
||||
import { isAutheticated } from "src/auth";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
function InStoreCashOrders() {
|
||||
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);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
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 === "PointOfSale" && order.paymentMode === "cod"
|
||||
);
|
||||
|
||||
// Set the filtered orders data
|
||||
setNewOrdersData(filteredOrders);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
getNewOrder();
|
||||
}, [success]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost));
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, newOrdersData]);
|
||||
|
||||
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,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
New Orders
|
||||
</div>
|
||||
|
||||
{/* <div className="page-title-right">
|
||||
<Link to="/order/add">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Add Order
|
||||
</Button>
|
||||
</Link>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-sm-12 col-md-12">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
select-w
|
||||
custom-select custom-select-sm
|
||||
form-control form-control-sm
|
||||
"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<thead
|
||||
className="thead"
|
||||
style={{ background: "rgb(140, 213, 213)" }}
|
||||
>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Customer</th>
|
||||
<th className="text-start">Order value</th>
|
||||
<th className="text-start">Order At</th>
|
||||
<th className="text-start">Status</th>
|
||||
<th className="text-start">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!loading && showData.length === 0 && (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<h5>No Data Available</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
showData.map((order, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{order?.orderID}</td>
|
||||
<td className="text-start">
|
||||
{order?.user?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
₹{order?.total_amount}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.createdAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<span className="badge text-bg-primary text-white">
|
||||
{order?.orderStatus}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||
<Link
|
||||
to={`/inStoreOrders/${order.orderStatus}/${order._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
{/* <Link to={`/orders/edit/${order._id}`}>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-info btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link> */}
|
||||
|
||||
{/* <button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-danger btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2 mt-1
|
||||
"
|
||||
onClick={() => handleDelete(order._id)}
|
||||
>
|
||||
Delete
|
||||
</button> */}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
newOrdersData.length
|
||||
)}{" "}
|
||||
of {newOrdersData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(currentPage - 1 < 1) && (
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
newOrdersData.length - 1
|
||||
) && (
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li
|
||||
className={
|
||||
!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
newOrdersData.length - 1
|
||||
)
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InStoreCashOrders;
|
||||
386
src/views/orders/InStoreQRCodeOrders.js
Normal file
386
src/views/orders/InStoreQRCodeOrders.js
Normal file
@ -0,0 +1,386 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
|
||||
import { isAutheticated } from "src/auth";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
function InStoreQRCodeOrders() {
|
||||
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);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
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 === "PointOfSale" && order.paymentMode === "online"
|
||||
);
|
||||
|
||||
// Set the filtered orders data
|
||||
setNewOrdersData(filteredOrders);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
getNewOrder();
|
||||
}, [success]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||
setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost));
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, newOrdersData]);
|
||||
|
||||
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,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
New Orders
|
||||
</div>
|
||||
|
||||
{/* <div className="page-title-right">
|
||||
<Link to="/order/add">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Add Order
|
||||
</Button>
|
||||
</Link>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-sm-12 col-md-12">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
style={{ width: "10%" }}
|
||||
name=""
|
||||
onChange={(e) => handleShowEntries(e)}
|
||||
className="
|
||||
select-w
|
||||
custom-select custom-select-sm
|
||||
form-control form-control-sm
|
||||
"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<thead
|
||||
className="thead"
|
||||
style={{ background: "rgb(140, 213, 213)" }}
|
||||
>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Customer</th>
|
||||
<th className="text-start">Order value</th>
|
||||
<th className="text-start">Order At</th>
|
||||
<th className="text-start">Status</th>
|
||||
<th className="text-start">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!loading && showData.length === 0 && (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<h5>No Data Available</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
showData.map((order, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{order?.orderID}</td>
|
||||
<td className="text-start">
|
||||
{order?.user?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
₹{order?.total_amount}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.createdAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<span className="badge text-bg-primary text-white">
|
||||
{order?.orderStatus}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
|
||||
<Link
|
||||
to={`/inStoreOrders/${order.orderStatus}/${order._id}`}
|
||||
>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
{/* <Link to={`/orders/edit/${order._id}`}>
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-info btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2 mt-1
|
||||
"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link> */}
|
||||
|
||||
{/* <button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-danger btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2 mt-1
|
||||
"
|
||||
onClick={() => handleDelete(order._id)}
|
||||
>
|
||||
Delete
|
||||
</button> */}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(
|
||||
currentPage * itemPerPage,
|
||||
newOrdersData.length
|
||||
)}{" "}
|
||||
of {newOrdersData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(currentPage - 1 < 1) && (
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
newOrdersData.length - 1
|
||||
) && (
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
{currentPage + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li
|
||||
className={
|
||||
!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
newOrdersData.length - 1
|
||||
)
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InStoreQRCodeOrders;
|
||||
@ -31,7 +31,11 @@ function NewOrders() {
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setNewOrdersData(res.data.order);
|
||||
const filteredOrders = res.data.order.filter(
|
||||
(order) => order.orderType === "WebSite"
|
||||
);
|
||||
|
||||
setNewOrdersData(filteredOrders);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -42,6 +46,7 @@ function NewOrders() {
|
||||
getNewOrder();
|
||||
}, [success]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage;
|
||||
|
||||
946
src/views/orders/POSViewOrders.js
Normal file
946
src/views/orders/POSViewOrders.js
Normal file
@ -0,0 +1,946 @@
|
||||
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 POSViewOrders() {
|
||||
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(res.data);
|
||||
// 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:
|
||||
'<input id="input1" placeholder="Enter Courier Name" className="swal2-input" style="margin:3px;height:40px;text-align:center;">' +
|
||||
'<input id="input2" placeholder="Courier Tracking ID" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
|
||||
},
|
||||
},
|
||||
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:
|
||||
'<p>Reson for cancellation.?</p><input id="input1" placeholder="Enter Reason for Cancellation" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
|
||||
},
|
||||
},
|
||||
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:
|
||||
'<input id="input1" type="date" placeholder="Delivered ON" className="swal2-input" style="height:40px;text-align:center;">',
|
||||
// '<input id="input2" placeholder="Courier Tracking ID" className="swal2-input" style="margin:3px;height:40px">',
|
||||
},
|
||||
},
|
||||
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 (
|
||||
<>
|
||||
{" "}
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
<p> View Order</p>
|
||||
</div>
|
||||
<div className="m-4">
|
||||
{orderDetails?.orderID && (
|
||||
<span>
|
||||
<h6 className="">Order ID : {orderDetails?.orderID}</h6>{" "}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{orderDetails?.courier_name && (
|
||||
<div className="m-4">
|
||||
<span>
|
||||
<h6 className="">
|
||||
Courier Name: {orderDetails?.courier_name}
|
||||
</h6>{" "}
|
||||
<h6 className="">
|
||||
Tracking ID : {orderDetails?.courier_tracking_id}
|
||||
</h6>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{orderDetails?.isDelivered && (
|
||||
<div className="m-4">
|
||||
<span>
|
||||
<h6 className="">Delivered: Yes</h6>{" "}
|
||||
<h6 className="">
|
||||
Delivered Date: {orderDetails?.DeliveredDate}
|
||||
</h6>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="page-title-right">
|
||||
{/* <Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '1rem',
|
||||
textTransform: 'capitalize',
|
||||
marginRight: '5px',
|
||||
}}
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading' : 'Edit Now'}
|
||||
</Button> */}
|
||||
|
||||
<Link
|
||||
to={
|
||||
orderDetails?.paymentMode === "cod"
|
||||
? `/inStoreCashOrders/${status}`
|
||||
: `/InStoreQRCodeOrders/${status}`
|
||||
}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="d-flex justify-content-center">
|
||||
<div className="spinner-border text-info" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row">
|
||||
<div className="col-lg-7 mt-3">
|
||||
{orderDetails?.shipingInfo !== null && (
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
{/* <div className="mt-1">
|
||||
<label className="fw-bold">Select Product:</label>
|
||||
<div className="d-flex">
|
||||
<select
|
||||
className="form-control me-2"
|
||||
// onChange={handleGetSingleProduct}
|
||||
// value={productData?._id}
|
||||
ref={getValue}
|
||||
|
||||
>
|
||||
<option value="" >-----</option>
|
||||
{productData && productData.map((item, index) =>
|
||||
<option key={index} value={item?._id}>{item?.name}</option>
|
||||
)}
|
||||
|
||||
</select>
|
||||
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleProduct(e)}>Add</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div> */}
|
||||
|
||||
<div className="mt-2">
|
||||
<h6 className="fw-bold">
|
||||
Products : {orderDetails?.orderItems?.length}
|
||||
</h6>
|
||||
<hr />
|
||||
|
||||
{orderDetails?.orderItems &&
|
||||
orderDetails?.orderItems.map(
|
||||
(productDetails, i) => (
|
||||
<div className="my-2">
|
||||
<div
|
||||
className="row"
|
||||
style={{ fontSize: "14px" }}
|
||||
>
|
||||
<div className="col-sm-4">
|
||||
<img
|
||||
src={productDetails?.image[0]?.url}
|
||||
alt={productDetails?.name}
|
||||
style={{
|
||||
width: "100%",
|
||||
objectFit: "contain",
|
||||
maxHeight: "150px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-8">
|
||||
<h6 className="m-0 ms-2">
|
||||
{productDetails?.name}
|
||||
</h6>
|
||||
<div className="row">
|
||||
<div className="col-sm-6">
|
||||
<div
|
||||
className="d-flex justify-content-center mt-3 me-3 "
|
||||
style={{
|
||||
width: "6rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="px-2 mt-1"
|
||||
style={{}}
|
||||
>
|
||||
{" "}
|
||||
Quantity:{" "}
|
||||
{productDetails?.quantity}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="m-0 mt-3 ms-3">
|
||||
<stong> Subtotal:</stong> ₹
|
||||
{productDetails?.quantity *
|
||||
productDetails?.price}
|
||||
</p>
|
||||
<p className="m-0 mt-3 ms-3">
|
||||
<stong> Variant:</stong>{" "}
|
||||
{productDetails?.variant_Name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<p className="m-0 mt-3">
|
||||
<stong> Price:</stong> ₹
|
||||
{productDetails?.price}
|
||||
</p>
|
||||
<p className="m-0 mt-3">
|
||||
<stong> GST:</stong> ₹
|
||||
{productDetails?.gst_amount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<div className="m-0 contents-center mt-3 mb-2">
|
||||
<small className="mb-4">Shipping Charge: </small> ₹
|
||||
{orderDetails?.shipping_charge}
|
||||
<br />
|
||||
<span className="mt-2"> Total Order Value: </span> ₹
|
||||
{orderDetails?.total_amount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card my-1">
|
||||
<div className="card-body">
|
||||
<label className="fw-bold">Status Timeline :</label>
|
||||
<table
|
||||
className="table table-info table-sm m-0"
|
||||
style={{
|
||||
borderRadius: "8px",
|
||||
borderCollapse: "collapse",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<tbody>
|
||||
<tr className="text-center">
|
||||
<th scope="row">Order Placed On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{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,
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
<th scope="row" className="text-warning">
|
||||
Processing Started
|
||||
</th>
|
||||
<td className="text-warning"> : </td>
|
||||
<td className="text-warning">
|
||||
{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,
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
<th scope="row" className="text-primary">
|
||||
Dispatched On
|
||||
</th>
|
||||
<td className="text-primary"> : </td>
|
||||
<td className="text-primary">
|
||||
{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,
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="text-center">
|
||||
<th scope="row" className="text-success">
|
||||
Delivered On
|
||||
</th>
|
||||
<td className="text-success"> : </td>
|
||||
<td className="text-success">
|
||||
{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,
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
{orderDetails?.status_timeline?.cancelled && (
|
||||
<tr className="text-center">
|
||||
<th scope="row" className="text-danger">
|
||||
Cancelled On
|
||||
</th>
|
||||
<td className="text-danger"> : </td>
|
||||
<td className="text-danger">
|
||||
{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,
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{/* <tr className="text-center">
|
||||
<th scope="row">Returned On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{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,
|
||||
})
|
||||
: "-"}
|
||||
</td>
|
||||
</tr> */}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 mt-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="mt-1">
|
||||
{orderDetails?.orderStatus !== "cancelled" ? (
|
||||
<h5 className="text-success">
|
||||
Order Status: {orderDetails?.orderStatus}
|
||||
</h5>
|
||||
) : (
|
||||
<>
|
||||
<h5 className="text-danger">
|
||||
Order Status: {orderDetails?.orderStatus}
|
||||
</h5>
|
||||
<p className="text-danger">
|
||||
{" "}
|
||||
Order Cancelled Reason:{" "}
|
||||
{orderDetails?.order_Cancelled_Reason}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{/* order status change */}{" "}
|
||||
<div className="mb-2">
|
||||
{" "}
|
||||
{status !== "cancelled" &&
|
||||
status !== "returned" &&
|
||||
status !== "delivered" && (
|
||||
<div className="mt-1">
|
||||
<label className="fw-bold">
|
||||
Change Status :
|
||||
</label>
|
||||
<div className="row">
|
||||
<div className="col-lg-9">
|
||||
<select
|
||||
className="form-control"
|
||||
onChange={handleChange}
|
||||
value={orderStatus}
|
||||
>
|
||||
{orderDetails?.orderStatus === "new" && (
|
||||
<>
|
||||
<option value="">New</option>
|
||||
<option value="processing">
|
||||
Processing
|
||||
</option>
|
||||
<option value="cancelled">
|
||||
Cancelled
|
||||
</option>
|
||||
</>
|
||||
)}
|
||||
{orderDetails?.orderStatus ===
|
||||
"processing" && (
|
||||
<>
|
||||
<option value="">Processing</option>
|
||||
<option value="dispatched">
|
||||
Dispatch
|
||||
</option>
|
||||
</>
|
||||
)}
|
||||
{orderDetails?.orderStatus ===
|
||||
"dispatched" && (
|
||||
<>
|
||||
<option value="">Dispatch</option>
|
||||
<option value="delivered">
|
||||
Delivered
|
||||
</option>
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
{orderStatus && (
|
||||
<div className="col-lg-3">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={(e) => handlechangestatus(e)}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* */}
|
||||
<label className="fw-bold mt-1">Shipping Info :</label>
|
||||
{/* <div className="d-flex">
|
||||
<select
|
||||
className="form-control me-2"
|
||||
onChange={handleChange}
|
||||
value={orderStatus}
|
||||
ref={getFranchiseeID}
|
||||
disabled={shipingInfo !== null}
|
||||
>
|
||||
<option value="" disabled></option>
|
||||
{allFranchisee && allFranchisee.map((item, index) =>
|
||||
<option key={index} value={item?._id}>{item?.name}</option>
|
||||
)}
|
||||
</select>
|
||||
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
|
||||
</div> */}
|
||||
</div>
|
||||
{orderDetails?.shipingInfo !== null && (
|
||||
<div className="">
|
||||
<div className="row" style={{ fontSize: "14px" }}>
|
||||
{/* <div className="col-sm-4">
|
||||
<img
|
||||
src={
|
||||
orderDetails?.shippingInfo?.Franchisee?.banner
|
||||
?.url
|
||||
}
|
||||
alt={orderDetails?.shippingInfo?.name}
|
||||
// width='100%'
|
||||
style={{
|
||||
width: "100%",
|
||||
objectFit: "contain",
|
||||
maxHeight: "100px",
|
||||
}}
|
||||
/>
|
||||
</div> */}
|
||||
<div className="col-sm-12">
|
||||
<h6 className="m-0 ms-2">
|
||||
Name: {orderDetails?.shippingInfo?.first_Name}{" "}
|
||||
{orderDetails?.shippingInfo?.last_Name}
|
||||
</h6>
|
||||
|
||||
<p className="m-0 ms-2 mt-1">
|
||||
Contact No. :{" "}
|
||||
{orderDetails?.shippingInfo?.phone_Number}
|
||||
</p>
|
||||
<parent className="m-0 ms-2 mt-3">
|
||||
street. : {orderDetails?.shippingInfo?.street}
|
||||
</parent>
|
||||
|
||||
<p className="m-0 ms-2 mt-1">
|
||||
City : {orderDetails?.shippingInfo?.city}
|
||||
</p>
|
||||
<p className="m-0 ms-2 mt-1">
|
||||
State : {orderDetails?.shippingInfo?.state}
|
||||
</p>
|
||||
<p className="m-0 ms-2 mt-1">
|
||||
country : {orderDetails?.shippingInfo?.country}
|
||||
</p>
|
||||
<p className="m-0 ms-2 mt-1">
|
||||
Postal Code. :{" "}
|
||||
{orderDetails?.shippingInfo?.postalCode}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3">
|
||||
<label>
|
||||
<span className="fw-bold">Payment Status : </span>
|
||||
{orderDetails?.isPaid === false ? (
|
||||
<span className="fw-bold text-danger">
|
||||
Not Paid
|
||||
</span>
|
||||
) : (
|
||||
<span className="fw-bold text-success">Paid</span>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
<div className="">
|
||||
<label>
|
||||
<span className="fw-bold">Payment Mode : </span>
|
||||
{orderDetails?.paymentMode === "online" ? (
|
||||
<span className="fw-bold text-success">ONLINE</span>
|
||||
) : (
|
||||
<span className="fw-bold text-primary">
|
||||
CASH ON DELIVERY
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<label>
|
||||
<span className="fw-bold"> Paid At: </span>
|
||||
|
||||
{orderDetails?.paidAt
|
||||
? new Date(orderDetails?.paidAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
}
|
||||
)
|
||||
: "----"}
|
||||
</label>
|
||||
</div>
|
||||
<div className="">
|
||||
<label>
|
||||
<span className="fw-bold"> Order Created By: </span>
|
||||
{orderDetails?.user?.name}
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">
|
||||
Razorpay Payment ID :{" "}
|
||||
</span>
|
||||
{orderDetails?.razorpay_payment_id
|
||||
? orderDetails?.razorpay_payment_id
|
||||
: "----"}
|
||||
</label>
|
||||
</div>
|
||||
<div className="">
|
||||
<label>
|
||||
<span className="fw-bold">Razorpay Order ID : </span>
|
||||
{orderDetails?.razorpay_order_id
|
||||
? orderDetails?.razorpay_order_id
|
||||
: "----"}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "none" }}>
|
||||
{/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default POSViewOrders;
|
||||
Loading…
Reference in New Issue
Block a user