gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product complete

Browse Source
This commit is contained in:
pawan-dot 2023-01-27 17:55:07 +05:30
parent cf6dca4b7c
commit e671d8fc91
13 changed files with 2470 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -58,10 +58,12 @@
"react-datepicker": "^4.8.0", "react-datepicker": "^4.8.0",
"react-dom": "^18.0.0", "react-dom": "^18.0.0",
"react-paginate": "^8.1.3", "react-paginate": "^8.1.3",
"react-qr-code": "^2.0.11",
"react-redux": "^7.2.6", "react-redux": "^7.2.6",
"react-router-dom": "^6.7.0", "react-router-dom": "^6.7.0",
"react-spinners": "^0.11.0", "react-spinners": "^0.11.0",
"react-time-picker": "^4.5.0", "react-time-picker": "^4.5.0",
"react-to-print": "^2.14.11",
"redux": "4.1.2", "redux": "4.1.2",
"serve": "^13.0.2", "serve": "^13.0.2",
"simplebar-react": "^2.3.6", "simplebar-react": "^2.3.6",

46
src/_nav.js
View File

@ -5,6 +5,7 @@ import {
cilAppsSettings, cilAppsSettings,
cilBell, cilBell,
cilCalculator, cilCalculator,
cilCart,
cilChartPie, cilChartPie,
cilClipboard, cilClipboard,
cilCommand, cilCommand,
@ -51,6 +52,51 @@ const _nav = [
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />, icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
to: '/temples', 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, component: CNavItem,

2
src/components/AppSidebar.js
View File

@ -41,7 +41,6 @@ const AppSidebar = () => {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}) })
console.log(configDetails.data.result)
configDetails.data.result.map((item) => { configDetails.data.result.map((item) => {
setHeaderlogoUrl(item?.logo[0]?.Headerlogo) setHeaderlogoUrl(item?.logo[0]?.Headerlogo)
setFooterlogoUrl(item?.logo[0]?.Footerlogo) setFooterlogoUrl(item?.logo[0]?.Footerlogo)
@ -51,7 +50,6 @@ const AppSidebar = () => {
getConfiguration() getConfiguration()
}, []) }, [])
console.log(HeaderlogoUrl)
//---------------------------// //---------------------------//
return ( return (
<CSidebar <CSidebar

2
src/index.js
View File

@ -12,7 +12,7 @@ import axios from 'axios'
const setupAxios = () => { const setupAxios = () => {
axios.defaults.baseURL = 'https://atpapi.checkapp.one' axios.defaults.baseURL = 'https://atpapi.checkapp.one'
//axios.defaults.baseURL = 'http://localhost:5000' // axios.defaults.baseURL = 'http://localhost:5000'
axios.defaults.headers = { axios.defaults.headers = {
'Cache-Control': 'no-cache,no-store', 'Cache-Control': 'no-cache,no-store',
'Pragma': 'no-cache', 'Pragma': 'no-cache',

17
src/routes.js
View File

@ -32,6 +32,14 @@ import AddProduct from './views/Products/AddProduct'
import EditProduct from './views/Products/EditProduct' import EditProduct from './views/Products/EditProduct'
import ViewProduct from './views/Products/ViewProduct' 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 = [ const routes = [
{ path: '/', exact: true, name: 'Home' }, { path: '/', exact: true, name: 'Home' },
@ -45,7 +53,14 @@ const routes = [
{ path: '/product/add', name: 'Add products', element: AddProduct }, { path: '/product/add', name: 'Add products', element: AddProduct },
{ path: '/product/edit/:id', name: 'Edit products', element: EditProduct }, { path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
{ path: '/product/view/:id', name: 'view products', element: ViewProduct }, { 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 //Temple

274
src/views/orders/CancelledOrders.js Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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