product complete
This commit is contained in:
pawan-dot
parent
cf6dca4b7c
commit
e671d8fc91
@ -58,10 +58,12 @@
|
||||
"react-datepicker": "^4.8.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-paginate": "^8.1.3",
|
||||
"react-qr-code": "^2.0.11",
|
||||
"react-redux": "^7.2.6",
|
||||
"react-router-dom": "^6.7.0",
|
||||
"react-spinners": "^0.11.0",
|
||||
"react-time-picker": "^4.5.0",
|
||||
"react-to-print": "^2.14.11",
|
||||
"redux": "4.1.2",
|
||||
"serve": "^13.0.2",
|
||||
"simplebar-react": "^2.3.6",
|
||||
|
||||
46
src/_nav.js
46
src/_nav.js
@ -5,6 +5,7 @@ import {
|
||||
cilAppsSettings,
|
||||
cilBell,
|
||||
cilCalculator,
|
||||
cilCart,
|
||||
cilChartPie,
|
||||
cilClipboard,
|
||||
cilCommand,
|
||||
@ -51,6 +52,51 @@ const _nav = [
|
||||
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
|
||||
to: '/temples',
|
||||
},
|
||||
{
|
||||
component: CNavGroup,
|
||||
name: 'Franchisee Orders',
|
||||
icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'New',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/new',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Paid',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/returned',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Processing',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/processing',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Dispatched',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/dispatched',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Delivered',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/delivered',
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: 'Cancelled',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
to: '/orders/cancelled',
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
component: CNavItem,
|
||||
|
||||
@ -41,7 +41,6 @@ const AppSidebar = () => {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
console.log(configDetails.data.result)
|
||||
configDetails.data.result.map((item) => {
|
||||
setHeaderlogoUrl(item?.logo[0]?.Headerlogo)
|
||||
setFooterlogoUrl(item?.logo[0]?.Footerlogo)
|
||||
@ -51,7 +50,6 @@ const AppSidebar = () => {
|
||||
getConfiguration()
|
||||
}, [])
|
||||
|
||||
console.log(HeaderlogoUrl)
|
||||
//---------------------------//
|
||||
return (
|
||||
<CSidebar
|
||||
|
||||
@ -32,6 +32,14 @@ import AddProduct from './views/Products/AddProduct'
|
||||
import EditProduct from './views/Products/EditProduct'
|
||||
import ViewProduct from './views/Products/ViewProduct'
|
||||
|
||||
//Order Management
|
||||
import NewOrders from './views/orders/NewOrders.js'
|
||||
import ProcessingOrders from './views/orders/ProcessingOrders.js'
|
||||
import DispatchedOrders from './views/orders/DispatchedOrders.js'
|
||||
import DeliveredOrders from './views/orders/DeliveredOrders.js'
|
||||
import CancelledOrders from './views/orders/CancelledOrders.js'
|
||||
import ReturnedOrders from './views/orders/ReturnedOrders.js'
|
||||
import ViewOrder from './views/orders/ViewOrder.js'
|
||||
const routes = [
|
||||
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
@ -45,7 +53,14 @@ const routes = [
|
||||
{ path: '/product/add', name: 'Add products', element: AddProduct },
|
||||
{ path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
|
||||
{ path: '/product/view/:id', name: 'view products', element: ViewProduct },
|
||||
|
||||
//Order Management
|
||||
{ path: '/orders/new', name: 'New Orders', element: NewOrders },
|
||||
// { path: '/orders/processing', name: 'Processing Orders', element: ProcessingOrders },
|
||||
// { path: '/orders/dispatched', name: 'Dispatched Orders', element: DispatchedOrders },
|
||||
// { path: '/orders/delivered', name: 'Delivered Orders', element: DeliveredOrders },
|
||||
// { path: '/orders/cancelled', name: 'Cancelled Orders', element: CancelledOrders },
|
||||
// { path: '/orders/returned', name: 'Returned Orders', element: ReturnedOrders },
|
||||
// { path: '/orders/:status/:id', name: 'View Order', element: ViewOrder },
|
||||
|
||||
|
||||
//Temple
|
||||
|
||||
274
src/views/orders/CancelledOrders.js
Normal file
274
src/views/orders/CancelledOrders.js
Normal file
@ -0,0 +1,274 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
|
||||
function CancelledOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [cancelledOrdersData, setCancelledOrdersData] = useState([])
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(cancelledOrdersData)
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function getProcessingOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/cancelled`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setCancelledOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
getProcessingOrder()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(cancelledOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, cancelledOrdersData])
|
||||
|
||||
return (
|
||||
<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">
|
||||
Cancelled Orders
|
||||
</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-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</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.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).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-success text-white">
|
||||
{order?.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
</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, cancelledOrdersData.length)} of{' '}
|
||||
{cancelledOrdersData.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 >
|
||||
cancelledOrdersData.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 >
|
||||
cancelledOrdersData.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 CancelledOrders
|
||||
273
src/views/orders/DeliveredOrders.js
Normal file
273
src/views/orders/DeliveredOrders.js
Normal file
@ -0,0 +1,273 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
function DeliveredOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [deliveredOrdersData, setDeliveredOrdersData] = useState([])
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(deliveredOrdersData)
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function getProcessingOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/delivered`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setDeliveredOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
getProcessingOrder()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(deliveredOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, deliveredOrdersData])
|
||||
|
||||
return (
|
||||
<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">
|
||||
Delivered Orders
|
||||
</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-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</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.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).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-success text-white">
|
||||
{order?.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
</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, deliveredOrdersData.length)} of{' '}
|
||||
{deliveredOrdersData.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 >
|
||||
deliveredOrdersData.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 >
|
||||
deliveredOrdersData.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 DeliveredOrders
|
||||
274
src/views/orders/DispatchedOrders.js
Normal file
274
src/views/orders/DispatchedOrders.js
Normal file
@ -0,0 +1,274 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
|
||||
function DispatchedOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [dispatchedOrdersData, setDispatchedOrdersData] = useState([])
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(dispatchedOrdersData)
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function getDispatchedOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/dispatched`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setDispatchedOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
getDispatchedOrder()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(dispatchedOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, dispatchedOrdersData])
|
||||
|
||||
return (
|
||||
<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">
|
||||
Dispatched Orders
|
||||
</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-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</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.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).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-success text-white">
|
||||
{order?.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
</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, dispatchedOrdersData.length)} of{' '}
|
||||
{dispatchedOrdersData.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 >
|
||||
dispatchedOrdersData.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 >
|
||||
dispatchedOrdersData.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 DispatchedOrders
|
||||
275
src/views/orders/NewOrders.js
Normal file
275
src/views/orders/NewOrders.js
Normal file
@ -0,0 +1,275 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
function NewOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [newOrdersData, setNewOrdersData] = useState([])
|
||||
|
||||
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/list/new`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setNewOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
getNewOrder()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(newOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, newOrdersData])
|
||||
|
||||
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>
|
||||
</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">Franchisee</th>
|
||||
<th className="text-start">Order value</th>
|
||||
{/* <th className="text-start">Placed On</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.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).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-success text-white">
|
||||
{order?.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
</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 NewOrders
|
||||
239
src/views/orders/PrintOrderDetails.js
Normal file
239
src/views/orders/PrintOrderDetails.js
Normal file
@ -0,0 +1,239 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import QRCode from 'react-qr-code'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
|
||||
const PrintOrderDetails = React.forwardRef(({ orderData }, ref) => {
|
||||
const token = isAutheticated()
|
||||
const [company, setCompany] = useState({})
|
||||
const [logo, setLogo] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
function getConfig() {
|
||||
axios
|
||||
.get(`/api/config`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setCompany(res.data?.result[0]?.address[0])
|
||||
setLogo(res.data?.result[0]?.logo[0]?.Headerlogo)
|
||||
})
|
||||
}
|
||||
getConfig()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="container" ref={ref}>
|
||||
<div className="mx-5 my-5" style={{ border: '0.3px solid grey', height: '100%' }}>
|
||||
<div className="text-center">
|
||||
<h4 className="m-0">Order Confirmation</h4>
|
||||
</div>
|
||||
<hr className="my-1" />
|
||||
<table className="table table-sm mt-2 table-borderless" style={{ fontSize: '12px' }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowSpan={6}>
|
||||
{logo && (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<img src={logo} alt={company?.company} style={{ width: '150px' }} />
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<th style={{ whiteSpace: 'nowrap', fontSize: '15px' }} className="fw-bold">
|
||||
{company?.company}
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{company?.address}
|
||||
<br />
|
||||
{company?.city + ' ' + company?.state + ' ' + company?.pincode}
|
||||
<br />
|
||||
{company?.country}
|
||||
<br />
|
||||
GSTIN {company?.gstin}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr className="m-0" />
|
||||
<div className="row" style={{ fontSize: '12px' }}>
|
||||
<div className="col-6">
|
||||
<label className="ms-1">
|
||||
Order ID: <span className="fw-bold">{orderData?.order_id}</span>
|
||||
</label>
|
||||
<label className="ms-1">
|
||||
Razorpay Order ID: <span className="fw-bold">{orderData?.razorpay_order_id}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<label>
|
||||
Order Placed On:{' '}
|
||||
<span className="fw-bold">
|
||||
{new Date(orderData?.placed_on).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
hour12: true,
|
||||
})}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<table className="table table-sm table-bordered m-0" style={{ fontSize: '12px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bill To</th>
|
||||
<th>Ship To</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="fw-bold">{orderData?.address?.full_name}</span>
|
||||
<br />
|
||||
{orderData.address?.flat_house_no_apartment}
|
||||
<br />
|
||||
{orderData.address?.area_street_sector_village}
|
||||
<br />
|
||||
{orderData.address?.landmark && (
|
||||
<>
|
||||
{orderData.address?.landmark}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{orderData.address?.address_line && (
|
||||
<>
|
||||
{orderData.address?.address_line}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{orderData.address?.city}
|
||||
<br />
|
||||
{orderData.address?.pincode + ' ' + orderData.address?.state}
|
||||
</td>
|
||||
<td>
|
||||
<span className="fw-bold">{orderData?.address?.full_name}</span>
|
||||
<br />
|
||||
{orderData.address?.flat_house_no_apartment}
|
||||
<br />
|
||||
{orderData.address?.area_street_sector_village}
|
||||
<br />
|
||||
{orderData.address?.landmark && (
|
||||
<>
|
||||
{orderData.address?.landmark}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{orderData.address?.address_line && (
|
||||
<>
|
||||
{orderData.address?.address_line}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{orderData.address?.city}
|
||||
<br />
|
||||
{orderData.address?.pincode + ' ' + orderData.address?.state}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<label className="mt-1 ms-1" style={{ fontSize: '12px' }}>
|
||||
Items :
|
||||
</label>
|
||||
<table
|
||||
className="table table-sm table-bordered text-center m-0"
|
||||
style={{ fontSize: '12px' }}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>HSN Code</th>
|
||||
<th>Product Name</th>
|
||||
<th>Size</th>
|
||||
<th>Qnty</th>
|
||||
<th>Tax Type</th>
|
||||
<th>Gross Amount</th>
|
||||
<th>Tax Rate</th>
|
||||
<th>Net Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orderData?.items &&
|
||||
orderData?.items?.length > 0 &&
|
||||
orderData.items.map((e, i) => (
|
||||
<tr key={i}>
|
||||
<td>{i + 1}</td>
|
||||
<td>{e.product?.hsn_code}</td>
|
||||
<td>{e.product.name}</td>
|
||||
<td>{e.variant.size}</td>
|
||||
<td>{e.quantity}</td>
|
||||
<td>{e?.igst ? 'IGST' : 'CGST, SGST'}</td>
|
||||
<td>{e.price}</td>
|
||||
<td>
|
||||
{(e?.igst ? Number(e?.igst) : Number(e?.sgst) + Number(e?.cgst)).toFixed(2) +
|
||||
'%'}
|
||||
</td>
|
||||
<td>
|
||||
{e?.igst
|
||||
? ((e.price + (e.price * e.igst) / 100) * e.quantity).toFixed(2)
|
||||
: (
|
||||
(e.price + (e.price * e.cgst) / 100 + (e.price * e.sgst) / 100) *
|
||||
e.quantity
|
||||
).toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr>
|
||||
<th colSpan={100}>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div className="ms-3">
|
||||
Total Gross Amount
|
||||
<br />
|
||||
Rs.{orderData?.total_gross_amount}
|
||||
</div>
|
||||
<div>
|
||||
Tax Amount
|
||||
<br />
|
||||
Rs.{orderData?.tax_amount}
|
||||
</div>
|
||||
<div>
|
||||
Shipping Charge
|
||||
<br />
|
||||
Rs.{orderData?.shipping_charge}
|
||||
</div>
|
||||
<div className="me-3">
|
||||
Final Net Amount
|
||||
<br />
|
||||
Rs.{orderData?.total_amount}
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p className="text-center fw-bold my-1 p-0" style={{ fontSize: '12px' }}>
|
||||
Note: Tax Invoice will be sent along with the goods.
|
||||
</p>
|
||||
<p className="ms-2" style={{ fontSize: '12px' }}>
|
||||
Thanks for your business.
|
||||
</p>
|
||||
<QRCode
|
||||
value={JSON.stringify({ order_id: orderData?.order_id })}
|
||||
size={256}
|
||||
style={{ height: '150px', width: '150px', margin: '10px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default PrintOrderDetails
|
||||
274
src/views/orders/ProcessingOrders.js
Normal file
274
src/views/orders/ProcessingOrders.js
Normal file
@ -0,0 +1,274 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
|
||||
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/list/processing`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setProcessingOrdersData(res.data.data)
|
||||
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 (
|
||||
<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">
|
||||
Processing Orders
|
||||
</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-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</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.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).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-success text-white">
|
||||
{order?.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
</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, processingOrdersData.length)} of{' '}
|
||||
{processingOrdersData.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 >
|
||||
processingOrdersData.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 >
|
||||
processingOrdersData.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 ProcessingOrders
|
||||
274
src/views/orders/ReturnedOrders.js
Normal file
274
src/views/orders/ReturnedOrders.js
Normal file
@ -0,0 +1,274 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
|
||||
function ReturnedOrders() {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [returnedOrdersData, setReturnedOrdersData] = useState([])
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(returnedOrdersData)
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
setItemPerPage(e.target.value)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function getProcessingOrder() {
|
||||
axios
|
||||
.get(`/api/order/list/returned`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setReturnedOrdersData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
getProcessingOrder()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(returnedOrdersData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, returnedOrdersData])
|
||||
|
||||
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">
|
||||
Returned Orders
|
||||
</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-light" style={{ background: '#ecdddd' }}>
|
||||
<tr>
|
||||
<th className="text-start">Order ID</th>
|
||||
<th className="text-start">Parent Name</th>
|
||||
<th className="text-start">Amount</th>
|
||||
<th className="text-start">Placed On</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.order_id}</td>
|
||||
<td className="text-start">{order.parent.name}</td>
|
||||
<td className="text-start">{order?.total_amount}</td>
|
||||
<td className="text-start">
|
||||
{new Date(order?.placed_on).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-success text-white">
|
||||
{order?.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/orders/${order.status}/${order._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-primary btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
ms-2
|
||||
"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
</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, returnedOrdersData.length)} of{' '}
|
||||
{returnedOrdersData.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 >
|
||||
returnedOrdersData.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 >
|
||||
returnedOrdersData.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 ReturnedOrders
|
||||
522
src/views/orders/ViewOrder.js
Normal file
522
src/views/orders/ViewOrder.js
Normal file
@ -0,0 +1,522 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import axios from 'axios'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import QRCode from 'react-qr-code'
|
||||
import ReactToPrint from 'react-to-print'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
|
||||
import PrintOrderDetails from './PrintOrderDetails.js'
|
||||
|
||||
function ViewOrder() {
|
||||
const { status, id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const printOrderRef = useRef()
|
||||
const token = isAutheticated()
|
||||
const [orderData, setOrderData] = useState({})
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [orderStatus, setOrderStatus] = useState('')
|
||||
const [data, setData] = useState({
|
||||
courier_name: '',
|
||||
tracking_id: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
function getOrderDetails() {
|
||||
setLoading(true)
|
||||
axios
|
||||
.get(`/api/order/${id}`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setLoading(false)
|
||||
setOrderData(res.data.data)
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
getBack()
|
||||
})
|
||||
}
|
||||
getOrderDetails()
|
||||
}, [])
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (e.target.type === 'text') {
|
||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
||||
} else {
|
||||
setOrderStatus(e.target.value)
|
||||
}
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (orderStatus === '') return
|
||||
if (orderData.status === 'processing') {
|
||||
if (data.courier_name.trim() === '' || data.tracking_id.trim() === '') {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Enter Courier Name And Tracking ID!',
|
||||
icon: 'error',
|
||||
button: 'Retry',
|
||||
dangerMode: true,
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
setLoading(true)
|
||||
axios
|
||||
.patch(
|
||||
`/api/order/${id}`,
|
||||
{ ...data, status: orderStatus },
|
||||
{
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
},
|
||||
)
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: 'Updated',
|
||||
text: 'Order updated!',
|
||||
icon: 'success',
|
||||
button: 'Return',
|
||||
})
|
||||
setLoading(false)
|
||||
getBack()
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: '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">
|
||||
Order Details
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
{(orderData?.status === 'new' || orderData?.status === 'processing') && (
|
||||
<ReactToPrint
|
||||
trigger={() => (
|
||||
<button className="btn btn-info text-white me-2">Print</button>
|
||||
)}
|
||||
content={() => printOrderRef.current}
|
||||
/>
|
||||
)}
|
||||
|
||||
{orderData?.status !== 'cancelled' &&
|
||||
orderData?.status !== 'returned' &&
|
||||
orderData?.status !== 'delivered' && (
|
||||
<button
|
||||
className="btn btn-success text-white me-2"
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading' : 'Update'}
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn-primary" onClick={() => getBack()}>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-7 mt-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Order ID: {orderData?.order_id}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Parent Name: {orderData?.parent?.name}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">
|
||||
School Name: {orderData?.parent?.school?.name}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label className="fw-bold">Items :</label>
|
||||
{orderData?.items &&
|
||||
orderData?.items?.length > 0 &&
|
||||
orderData.items.map((e, i) => (
|
||||
<div key={i} className="my-2">
|
||||
<div className="row" style={{ fontSize: '14px' }}>
|
||||
<div className="col-sm-4">
|
||||
<img
|
||||
src={e.product?.images[0]?.url}
|
||||
alt={e.product.name}
|
||||
style={{
|
||||
width: '100%',
|
||||
objectFit: 'contain',
|
||||
maxHeight: '150px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-8">
|
||||
<h6 className="m-0">{e.product.name}</h6>
|
||||
<div className="row">
|
||||
<div className="col-sm-6">
|
||||
<p className="m-0">
|
||||
<span>SKU</span>: {e.product?.sku}
|
||||
</p>
|
||||
<p className="m-0">
|
||||
<span>Variant</span>: {e.variant.size}
|
||||
</p>
|
||||
<p className="m-0">
|
||||
<span>Quantity:</span> {e.quantity}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
{' '}
|
||||
<p className="m-0">
|
||||
<span>Price:</span> Rs.{e.price}
|
||||
</p>
|
||||
{e?.igst && (
|
||||
<p className="m-0">
|
||||
<span>IGST:</span> {e.igst}%
|
||||
</p>
|
||||
)}
|
||||
{e?.cgst && (
|
||||
<p className="m-0">
|
||||
<span>CGST:</span> {e.cgst}%
|
||||
</p>
|
||||
)}
|
||||
{e?.sgst && (
|
||||
<p className="m-0">
|
||||
<span>SGST:</span> {e.sgst}%
|
||||
</p>
|
||||
)}
|
||||
<p className="m-0">
|
||||
<span>Total:</span> Rs.{e.amount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 mt-3">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
{status !== 'cancelled' && status !== 'returned' && status !== 'delivered' && (
|
||||
<div className="mt-1">
|
||||
<label className="fw-bold">Status :</label>
|
||||
<select
|
||||
className="form-control"
|
||||
onChange={handleChange}
|
||||
value={orderStatus}
|
||||
>
|
||||
{orderData.status === 'new' && (
|
||||
<>
|
||||
<option value="">New</option>
|
||||
<option value="processing">Processing</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
</>
|
||||
)}
|
||||
{orderData.status === 'processing' && (
|
||||
<>
|
||||
<option value="">Processing</option>
|
||||
<option value="dispatched">Dispatch</option>
|
||||
</>
|
||||
)}
|
||||
{orderData.status === 'dispatched' && (
|
||||
<>
|
||||
<option value="">Dispatch</option>
|
||||
<option value="delivered">Delivered</option>
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3">
|
||||
{orderData?.order_id && (
|
||||
<div className="d-flex">
|
||||
<p className="fw-bold me-3">Order ID QR Code:</p>
|
||||
<QRCode
|
||||
value={JSON.stringify({ order_id: orderData?.order_id })}
|
||||
size={256}
|
||||
style={{ height: '150px', width: '150px' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{orderData.status === 'processing' && (
|
||||
<>
|
||||
<div className="mt-3">
|
||||
<label className="fw-bold">Courier Name* :</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="courier_name"
|
||||
value={data.courier_name}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<label className="fw-bold">Tracking ID* :</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="tracking_id"
|
||||
value={data.tracking_id}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="mt-3">
|
||||
<label>
|
||||
<span className="fw-bold">Amount Paid : </span>Rs.{orderData?.total_amount}
|
||||
</label>
|
||||
</div>
|
||||
{orderData?.address && (
|
||||
<>
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Address : </span>
|
||||
{`${orderData.address?.full_name}, ${orderData.address?.flat_house_no_apartment
|
||||
}, ${orderData.address?.area_street_sector_village}, ${orderData.address?.landmark && orderData.address?.landmark + ', '
|
||||
}${orderData.address?.address_line &&
|
||||
orderData.address?.address_line + ', '
|
||||
}${orderData.address?.city}, ${orderData.address?.state}, ${orderData.address?.pincode
|
||||
}`}
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
{' '}
|
||||
<span className="fw-bold">Contact Number : </span>
|
||||
{orderData.address?.mobile_number}
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{orderData?.courier_name && (
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Courier Name : </span>
|
||||
{orderData?.courier_name}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{orderData?.tracking_id && (
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Tracking ID : </span>
|
||||
{orderData?.tracking_id}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{/* <div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Order Placed On : </span>
|
||||
{new Date(orderData?.placed_on).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
hour12: true,
|
||||
})}
|
||||
</label>
|
||||
</div> */}
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Razorpay Order ID : </span>
|
||||
{orderData?.razorpay_order_id}
|
||||
</label>
|
||||
</div>{' '}
|
||||
<div className="mt-1">
|
||||
<label>
|
||||
<span className="fw-bold">Razorpay Payment ID : </span>
|
||||
{orderData?.razorpay_payment_id}
|
||||
</label>
|
||||
</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>
|
||||
{orderData?.status_timeline?.new
|
||||
? new Date(orderData?.status_timeline?.new).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: 'numeric',
|
||||
hour12: true,
|
||||
})
|
||||
: new Date(orderData?.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">Processing Started</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.processing
|
||||
? new Date(orderData?.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">Dispatched On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.dispatched
|
||||
? new Date(orderData?.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">Delivered On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.delivered
|
||||
? new Date(orderData?.status_timeline?.delivered).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">Cancelled On</th>
|
||||
<td> : </td>
|
||||
<td>
|
||||
{orderData?.status_timeline?.cancelled
|
||||
? new Date(orderData?.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>
|
||||
{orderData?.status_timeline?.returned
|
||||
? new Date(orderData?.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'none' }}>
|
||||
<PrintOrderDetails orderData={orderData} ref={printOrderRef} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ViewOrder
|
||||
Loading…
Reference in New Issue
Block a user