From ba5f9d1826a6725b25bfde7d149302e1804452be Mon Sep 17 00:00:00 2001
From: pawan-dot <71133473+pawan-dot@users.noreply.github.com>
Date: Thu, 9 Feb 2023 18:05:02 +0530
Subject: [PATCH] franchisee edit

---
 src/_nav.js                                   |   2 +-
 src/routes.js                                 |  18 +-
 src/views/Products/AddProduct.js              |   2 +-
 .../{EditTemple.js => AddFranchisee.js}       | 229 +++++---
 .../{AddTemple.js => EditFranchisee.js}       | 239 ++++++--
 .../Temples/{Temples.js => Franchisees.js}    |  46 +-
 src/views/orders/AddOrder.js                  |  10 +-
 src/views/orders/EditOrder.js                 |  21 +-
 src/views/orders/NewOrders.js                 |   5 +-
 src/views/orders/ViewOrders.js                | 543 ++++++++++++++++++
 10 files changed, 949 insertions(+), 166 deletions(-)
 rename src/views/Temples/{EditTemple.js => AddFranchisee.js} (79%)
 rename src/views/Temples/{AddTemple.js => EditFranchisee.js} (66%)
 rename src/views/Temples/{Temples.js => Franchisees.js} (93%)
 create mode 100644 src/views/orders/ViewOrders.js

diff --git a/src/_nav.js b/src/_nav.js
index 64bc615..22aec88 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -52,7 +52,7 @@ const _nav = [
     component: CNavItem,
     name: 'Franchisee',
     icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
-    to: '/temples',
+    to: '/franchisees',
   },
   {
     component: CNavGroup,
diff --git a/src/routes.js b/src/routes.js
index 9abfda9..e243285 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -22,10 +22,10 @@ import Socialmedia from './views/configuration/Socialmedia.js'
 import Address from './views/configuration/Address.js'
 import Logo from './views/configuration/Logo.js'
 import Login from './views/pages/login/Login'
-//temple
-import Temples from './views/Temples/Temples'
-import AddTemple from './views/Temples/AddTemple'
-import EditTemple from './views/Temples/EditTemple'
+//Franchisees
+import Franchisees from './views/Temples/Franchisees'
+import AddFranchisee from './views/Temples/AddFranchisee'
+import EditFranchisee from './views/Temples/EditFranchisee'
 import Products from './views/Products/Products'
 //product
 import AddProduct from './views/Products/AddProduct'
@@ -46,6 +46,8 @@ import Tax from './views/configuration/tax/Tax'
 import Addtax from './views/configuration/tax/Addtax'
 import Edittax from './views/configuration/tax/Edittax'
 import EditOrder from './views/orders/EditOrder'
+import ViewOrders from './views/orders/ViewOrders'
+
 const routes = [
 
   { path: '/', exact: true, name: 'Home' },
@@ -65,7 +67,7 @@ const routes = [
   { path: '/orders/new', name: 'New Orders', element: NewOrders },
   { path: '/order/add', name: 'add Order', element: AddOrder },
   { path: '/orders/edit/:id', name: 'Edit Order', element: EditOrder },
-  //{ path: '/orders/view/:id', name: 'Edit Order', element: EditOrder },
+  { path: '/orders/view/:id', name: 'View Order', element: ViewOrders },
 
   // { path: '/orders/processing', name: 'Processing Orders', element: ProcessingOrders },
   // { path: '/orders/dispatched', name: 'Dispatched Orders', element: DispatchedOrders },
@@ -76,9 +78,9 @@ const routes = [
 
 
   //Temple
-  { path: '/temples', name: 'Temples', element: Temples },
-  { path: '/temple/add', name: 'Add Temple', element: AddTemple },
-  { path: '/temple/edit/:id', name: 'Edit Temples', element: EditTemple },
+  { path: '/franchisees', name: 'Franchisees', element: Franchisees },
+  { path: '/franchisee/add', name: 'Add Franchisee', element: AddFranchisee },
+  { path: '/franchisee/edit/:id', name: 'Edit Franchisee', element: EditFranchisee },
 
   //dashboard
 
diff --git a/src/views/Products/AddProduct.js b/src/views/Products/AddProduct.js
index 98f0b75..a2e658b 100644
--- a/src/views/Products/AddProduct.js
+++ b/src/views/Products/AddProduct.js
@@ -440,7 +440,7 @@ const AddProduct = () => {
                                 </label>  <select className="   form-control" name="" id=""
                                     onChange={(e) => TaxRatechange(e)}
                                 >
-                                    <option value="" disabled>---</option>
+                                    <option value="" disabled>-----</option>
 
                                     {allTax.map((t, i) =>
                                         <option key={i} value={`tax:${t.tax},name:${t.name}  ,taxId:${t._id}`}>{t.tax}% {t.name}</option>
diff --git a/src/views/Temples/EditTemple.js b/src/views/Temples/AddFranchisee.js
similarity index 79%
rename from src/views/Temples/EditTemple.js
rename to src/views/Temples/AddFranchisee.js
index 1208108..ca3469c 100644
--- a/src/views/Temples/EditTemple.js
+++ b/src/views/Temples/AddFranchisee.js
@@ -1,45 +1,47 @@
 
 
+
 import React, { useEffect, useState } from 'react'
 import Button from '@material-ui/core/Button'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import swal from 'sweetalert'
 import axios from 'axios'
 import { isAutheticated } from 'src/auth'
+// import { WebsiteURL } from '../WebsiteURL'
 
-const EditTemple = () => {
-
-
+const AddFranchisee = () => {
     const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/')
-    const id = useParams()?.id
     const token = isAutheticated()
     const navigate = useNavigate()
     const [data, setData] = useState({
         image: '',
         imageURL: '',
         name: '',
+        email: '',
         address_line_1: '',
         address_line_2: '',
-        contact_Person_Name: '',
-        contact_Number: '',
-        price_Lable: '',
         city: '',
         state_name: '',
         short_url: '',
-        // pan: '',
-        // business_name: '',
-        // gstin: '',
-        // option: '',
+        contact_Number: '',
+        contact_Person_Name: '',
+        price_Lable: '',
+        pin_Code: ''
     })
+
     const [cities, setCities] = useState([])
+
     const [loading, setLoading] = useState(false)
+    const [validForm, setValidForm] = useState(false)
+
+
     const [limiter, setLimiter] = useState({
         name: 100,
         nameHas: 100,
     })
 
-    const getRequired = async () => {
-        await axios
+    const getRequired = () => {
+        axios
             .get(`/api/city`, {
                 headers: {
                     'Access-Control-Allow-Origin': '*',
@@ -50,36 +52,70 @@ const EditTemple = () => {
                 setCities([...res.data.data])
             })
             .catch((err) => { })
-        axios
-            .get(`/api/Temple/withoutpopulate/${id}`, {
-                headers: {
-                    'Access-Control-Allow-Origin': '*',
-                    Authorization: `Bearer ${token}`,
-                },
-            })
-            .then((res) => {
-                setData((prev) => ({
-                    ...prev,
-                    ...res.data?.data,
-                    city: res.data?.data?.city,
-                    imageURL: res.data?.data?.banner?.url,
-                }))
-                setLimiter((prev) => ({ ...prev, nameHas: prev.name - res.data?.data?.name?.length || 0 }))
-            })
-            .catch((err) => { })
     }
 
     useEffect(() => {
         getRequired()
     }, [])
+    const [errors, setErrors] = useState({
+        emailError: '',
 
+
+    })
+    const validEmailRegex = RegExp(
+        /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+    )
+    const validateForm = () => {
+        let valid = true
+        Object.values(errors).forEach((val) => {
+            if (val.length > 0) {
+                valid = false
+                return false
+            }
+        })
+        Object.values(data.email).forEach((val) => {
+            if (val.length <= 0) {
+                valid = false
+                return false
+            }
+        })
+        return valid
+    }
+
+    //cheking email and password
     useEffect(() => {
-        const setStateName = () => {
-            const city = cities.filter((m) => data.city === m?._id)
-            setData((prev) => ({ ...prev, state_name: city[0]?.state?.state_name || '' }))
+        if (validateForm()) {
+            setValidForm(true)
+        } else {
+            setValidForm(false)
         }
-        setStateName()
-    }, [data.city])
+    }, [errors])
+    // const handleChange = (e) => {
+    //     const { name, value } = e.target
+
+    //     switch (name) {
+    //         case 'email':
+    //             setErrors({
+    //                 ...errors,
+    //                 emailError: validEmailRegex.test(value) ? '' : 'Email is not valid!',
+    //             })
+
+    //             break
+    //         case 'password':
+    //             setErrors((errors) => ({
+    //                 ...errors,
+    //                 passwordError: validPasswordRegex.test(value)
+    //                     ? ''
+    //                     : 'Password Shoud Be 8 Characters Long, Atleast One Uppercase, Atleast One Lowercase,Atleast One Digit, Atleast One Special Character',
+    //             }))
+    //             break
+    //         default:
+    //             break
+    //     }
+
+    //     setAuth({ ...auth, [name]: value })
+    // }
+
 
     const handleChange = (e) => {
         if (e.target.id === 'name') {
@@ -88,7 +124,19 @@ const EditTemple = () => {
                 ...prev,
                 [e.target.id + 'Has']: prev[e.target.id] - e.target.value.length,
             }))
-            // setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
+            setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
+        }
+        if (e.target.id === 'email') {
+            setErrors({
+                ...errors,
+                emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
+            })
+
+
+        }
+        if (e.target.id === 'city') {
+            const city = cities.filter((m) => e.target.value === m?._id)
+            setData((prev) => ({ ...prev, state_name: city[0]?.state?.state_name || '' }))
         }
         if (e.target.id === 'image') {
             if (
@@ -125,14 +173,18 @@ const EditTemple = () => {
     const handleSubmit = () => {
         if (
             data.name.trim() === '' ||
+            data.email.trim() === '' ||
+            data.contact_Number === '' ||
+
+            data.contact_Person_Name === '' ||
             data.address_line_1.trim() === '' ||
             data.address_line_2.trim() === '' ||
             data.price_Lable.trim() === '' ||
-            data.contact_Number === '' ||
-            data.contact_Person_Name === '' ||
             data.city === '' ||
+            data.pin_Code.trim() === '' ||
             data.short_url === '' ||
-            data.state_name === ''
+            data.state_name === '' ||
+            data.imageURL.trim() === ''
         ) {
             swal({
                 title: 'Warning',
@@ -146,24 +198,23 @@ const EditTemple = () => {
         setLoading(true)
         const formData = new FormData()
         formData.set('name', data.name)
-        // formData.set('pan', data.pan)
-        // formData.set('business_name', data.business_name)
-        // formData.set('gstin', data.gstin)
-        // formData.set('option', data.option)
+        formData.set('email', data.email)
+
         formData.set('address_line_1', data.address_line_1)
         formData.set('address_line_2', data.address_line_2)
         formData.set('city', data.city)
-        formData.set('price_Lable', data.price_Lable)
-
-
         formData.set('state_name', data.state_name)
         formData.set('contact_Number', data.contact_Number)
         formData.set('contact_Person_Name', data.contact_Person_Name)
+
+        formData.set('price_Lable', data.price_Lable)
+        formData.set('pin_Code', data.pin_Code)
         formData.set('url', WebsiteURL + data.short_url + '/login')
         formData.set('short_url', data.short_url)
+
         formData.append('image', data.image)
         axios
-            .patch(`/api/Temple/${id}`, formData, {
+            .post(`/api/franchisee/`, formData, {
                 headers: {
                     Authorization: `Bearer ${token}`,
                     'Content-Type': 'multipart/formdata',
@@ -172,13 +223,13 @@ const EditTemple = () => {
             })
             .then((res) => {
                 swal({
-                    title: 'Updated',
-                    text: 'Temple updated successfully!',
+                    title: 'Added',
+                    text: res?.data?.message ? res?.data?.message : 'Franchisee added successfully!',
                     icon: 'success',
                     button: 'Return',
                 })
                 setLoading(false)
-                navigate('/temples', { replace: true })
+                navigate('/franchisees', { replace: true })
             })
             .catch((err) => {
                 setLoading(false)
@@ -206,7 +257,7 @@ const EditTemple = () => {
                   "
                     >
                         <div style={{ fontSize: '22px' }} className="fw-bold">
-                            Edit Franchisee
+                            Add Franchisee
                         </div>
                         <div style={{ display: 'flex', gap: '1rem' }}>
                             <h4 className="mb-0"></h4>
@@ -225,9 +276,9 @@ const EditTemple = () => {
                                 onClick={() => handleSubmit()}
                                 disabled={loading}
                             >
-                                {loading ? 'Loading' : 'Update'}
+                                {loading ? 'Loading' : 'Save'}
                             </Button>
-                            <Link to="/temples">
+                            <Link to="/franchisees">
                                 <Button
                                     variant="contained"
                                     color="secondary"
@@ -244,9 +295,8 @@ const EditTemple = () => {
                     </div>
                 </div>
             </div>
-
             <div className="row">
-                <div className="col-6 my-1">
+                <div className="col-sm-12 col-md-12 col-lg-6 my-1">
                     <div className="card h-100">
                         <div className="card-body px-5">
                             <div className="mb-3">
@@ -263,19 +313,24 @@ const EditTemple = () => {
                                 />
                                 <p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p>
                             </div>
-                            {/* <div className="mb-3">
+
+                            <div className="mb-3">
                                 <label htmlFor="title" className="form-label">
-                                    PAN*
+                                    Email *
                                 </label>
                                 <input
-                                    type="text"
+                                    type="email"
                                     className="form-control"
-                                    id="pan"
-                                    value={data.pan}
+                                    id="email"
+                                    value={data.email}
                                     maxLength="50"
                                     onChange={(e) => handleChange(e)}
                                 />
-                            </div> */}
+                                {errors.emailError && (
+                                    <p className="text-center py-2 text-danger">{errors.emailError}</p>
+                                )}
+                            </div>
+
                             <div className="mb-3">
                                 <label htmlFor="title" className="form-label">
                                     Address Line 1*
@@ -302,32 +357,7 @@ const EditTemple = () => {
                                     onChange={(e) => handleChange(e)}
                                 />
                             </div>
-                            {/* <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    Business Name*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="business_name"
-                                    value={data.business_name}
-                                    maxLength="50"
-                                    onChange={(e) => handleChange(e)}
-                                />
-                            </div>
-                            <div className="mb-3">
-                                <label htmlFor="title" className="form-label">
-                                    GSTIN*
-                                </label>
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    id="gstin"
-                                    value={data.gstin}
-                                    maxLength="50"
-                                    onChange={(e) => handleChange(e)}
-                                />
-                            </div> */}
+
                             <div className="mb-3">
                                 <label htmlFor="pageToLink" className="form-label">
                                     City*
@@ -364,10 +394,27 @@ const EditTemple = () => {
                                     disabled
                                 />
                             </div>
+                            <div className="mb-3">
+                                <label htmlFor="title" className="form-label">
+                                    Pin Code *
+                                </label>
+                                <input
+                                    type="Number"
+                                    className="form-control"
+                                    id="pin_Code"
+                                    value={data.pin_Code}
+                                    maxLength={8}
+                                    onChange={(e) => handleChange(e)}
+                                />
+                                {/* {data.pin_Code ? <><small className="charLeft mt-4 fst-italic">
+                                    {8 - data.pin_Code.length} characters left
+                                </small></> : <></>
+                                } */}
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div className="col-6 my-1">
+                <div className="col-sm-12 col-md-12 col-lg-6 my-1">
                     <div className="card h-100">
                         <div className="card-body px-5">
 
@@ -413,6 +460,7 @@ const EditTemple = () => {
                                     />
                                 </div>
                             </div>
+
                             <div className=" mb-3">
                                 <label htmlFor="title" className="form-label">
                                     Price Lable*
@@ -432,6 +480,7 @@ const EditTemple = () => {
 
                                 </select>
                             </div>
+
                             <div className="mb-3">
                                 <label htmlFor="image" className="form-label">
                                     Temple Banner*
@@ -460,4 +509,4 @@ const EditTemple = () => {
     )
 }
 
-export default EditTemple
+export default AddFranchisee
diff --git a/src/views/Temples/AddTemple.js b/src/views/Temples/EditFranchisee.js
similarity index 66%
rename from src/views/Temples/AddTemple.js
rename to src/views/Temples/EditFranchisee.js
index 18de170..872e645 100644
--- a/src/views/Temples/AddTemple.js
+++ b/src/views/Temples/EditFranchisee.js
@@ -1,22 +1,24 @@
 
 
-
 import React, { useEffect, useState } from 'react'
 import Button from '@material-ui/core/Button'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import swal from 'sweetalert'
 import axios from 'axios'
 import { isAutheticated } from 'src/auth'
-// import { WebsiteURL } from '../WebsiteURL'
 
-const AddTemple = () => {
+const EditFranchisee = () => {
+
+
     const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/')
+    const id = useParams()?.id
     const token = isAutheticated()
     const navigate = useNavigate()
     const [data, setData] = useState({
         image: '',
         imageURL: '',
         name: '',
+        email: '',
         address_line_1: '',
         address_line_2: '',
         city: '',
@@ -24,19 +26,19 @@ const AddTemple = () => {
         short_url: '',
         contact_Number: '',
         contact_Person_Name: '',
-        price_Lable: ''
+        price_Lable: '',
+        pin_Code: ''
     })
-
     const [cities, setCities] = useState([])
-
     const [loading, setLoading] = useState(false)
+    const [validForm, setValidForm] = useState(false)
     const [limiter, setLimiter] = useState({
         name: 100,
         nameHas: 100,
     })
 
-    const getRequired = () => {
-        axios
+    const getRequired = async () => {
+        await axios
             .get(`/api/city`, {
                 headers: {
                     'Access-Control-Allow-Origin': '*',
@@ -47,12 +49,121 @@ const AddTemple = () => {
                 setCities([...res.data.data])
             })
             .catch((err) => { })
+        axios
+            .get(`/api/franchisee/withoutpopulate/${id}`, {
+                headers: {
+                    'Access-Control-Allow-Origin': '*',
+                    Authorization: `Bearer ${token}`,
+                },
+            })
+            .then((res) => {
+                setData((prev) => ({
+                    ...prev,
+                    ...res.data?.data,
+                    city: res.data?.data?.city,
+                    imageURL: res.data?.data?.banner?.url,
+                }))
+                setLimiter((prev) => ({ ...prev, nameHas: prev.name - res.data?.data?.name?.length || 0 }))
+            })
+            .catch((err) => { })
     }
 
     useEffect(() => {
         getRequired()
     }, [])
 
+    useEffect(() => {
+        const setStateName = () => {
+            const city = cities.filter((m) => data.city === m?._id)
+            setData((prev) => ({ ...prev, state_name: city[0]?.state?.state_name || '' }))
+        }
+        setStateName()
+    }, [data.city])
+
+    //validate
+    const [errors, setErrors] = useState({
+        emailError: '',
+
+
+    })
+    const validEmailRegex = RegExp(
+        /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+    )
+    const validateForm = () => {
+        let valid = true
+        Object.values(errors).forEach((val) => {
+            if (val.length > 0) {
+                valid = false
+                return false
+            }
+        })
+        Object.values(data.email).forEach((val) => {
+            if (val.length <= 0) {
+                valid = false
+                return false
+            }
+        })
+        return valid
+    }
+
+    //cheking email 
+    useEffect(() => {
+        if (validateForm()) {
+            setValidForm(true)
+        } else {
+            setValidForm(false)
+        }
+    }, [errors])
+
+    // const handleChange = (e) => {
+    //     if (e.target.id === 'name') {
+    //         if (e.target.value.length === limiter[e.target.id] + 1) return
+    //         setLimiter((prev) => ({
+    //             ...prev,
+    //             [e.target.id + 'Has']: prev[e.target.id] - e.target.value.length,
+    //         }))
+    //         if (e.target.id === 'email') {
+    //             setErrors({
+    //                 ...errors,
+    //                 emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
+    //             })
+
+
+    //         }
+    //         // setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
+    //     }
+    //     if (e.target.id === 'image') {
+    //         if (
+    //             e.target.files[0]?.type === 'image/jpeg' ||
+    //             e.target.files[0]?.type === 'image/png' ||
+    //             e.target.files[0]?.type === 'image/jpg'
+    //         ) {
+    //             setData((prev) => ({
+    //                 ...prev,
+    //                 imageURL: URL.createObjectURL(e.target.files[0]),
+    //                 image: e.target.files[0],
+    //             }))
+    //             return
+    //         } else {
+    //             swal({
+    //                 title: 'Warning',
+    //                 text: 'Upload jpg, jpeg, png only.',
+    //                 icon: 'error',
+    //                 button: 'Close',
+    //                 dangerMode: true,
+    //             })
+    //             setData((prev) => ({
+    //                 ...prev,
+    //                 imageURL: '',
+    //                 image: '',
+    //             }))
+    //             e.target.value = null
+    //             return
+    //         }
+    //     }
+    //     setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
+    // }
+
     const handleChange = (e) => {
         if (e.target.id === 'name') {
             if (e.target.value.length === limiter[e.target.id] + 1) return
@@ -61,6 +172,14 @@ const AddTemple = () => {
                 [e.target.id + 'Has']: prev[e.target.id] - e.target.value.length,
             }))
             setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
+        }
+        if (e.target.id === 'email') {
+            setErrors({
+                ...errors,
+                emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
+            })
+
+
         }
         if (e.target.id === 'city') {
             const city = cities.filter((m) => e.target.value === m?._id)
@@ -101,8 +220,7 @@ const AddTemple = () => {
     const handleSubmit = () => {
         if (
             data.name.trim() === '' ||
-
-            // data.pan.trim() === '' ||
+            data.email.trim() === '' ||
             data.contact_Number === '' ||
 
             data.contact_Person_Name === '' ||
@@ -110,6 +228,7 @@ const AddTemple = () => {
             data.address_line_2.trim() === '' ||
             data.price_Lable.trim() === '' ||
             data.city === '' ||
+            data.pin_Code === '' ||
             data.short_url === '' ||
             data.state_name === '' ||
             data.imageURL.trim() === ''
@@ -126,24 +245,23 @@ const AddTemple = () => {
         setLoading(true)
         const formData = new FormData()
         formData.set('name', data.name)
-        // formData.set('pan', data.pan)
-        // formData.set('business_name', data.business_name)
-        // formData.set('gstin', data.gstin)
-        // formData.set('option', data.option)
+        formData.set('email', data.email)
+
         formData.set('address_line_1', data.address_line_1)
         formData.set('address_line_2', data.address_line_2)
         formData.set('city', data.city)
+        formData.set('price_Lable', data.price_Lable)
+
+
         formData.set('state_name', data.state_name)
+        formData.set('pin_Code', data.pin_Code)
         formData.set('contact_Number', data.contact_Number)
         formData.set('contact_Person_Name', data.contact_Person_Name)
-
-        formData.set('price_Lable', data.price_Lable)
         formData.set('url', WebsiteURL + data.short_url + '/login')
         formData.set('short_url', data.short_url)
-
         formData.append('image', data.image)
         axios
-            .post(`/api/temple`, formData, {
+            .patch(`/api/franchisee/${id}`, formData, {
                 headers: {
                     Authorization: `Bearer ${token}`,
                     'Content-Type': 'multipart/formdata',
@@ -152,13 +270,13 @@ const AddTemple = () => {
             })
             .then((res) => {
                 swal({
-                    title: 'Added',
-                    text: 'Temple added successfully!',
+                    title: 'Updated',
+                    text: res?.data?.message ? res?.data?.message : 'franchisee updated successfully!',
                     icon: 'success',
                     button: 'Return',
                 })
                 setLoading(false)
-                navigate('/temples', { replace: true })
+                navigate('/franchisees', { replace: true })
             })
             .catch((err) => {
                 setLoading(false)
@@ -186,7 +304,7 @@ const AddTemple = () => {
                   "
                     >
                         <div style={{ fontSize: '22px' }} className="fw-bold">
-                            Add Franchisee
+                            Edit Franchisee
                         </div>
                         <div style={{ display: 'flex', gap: '1rem' }}>
                             <h4 className="mb-0"></h4>
@@ -205,9 +323,9 @@ const AddTemple = () => {
                                 onClick={() => handleSubmit()}
                                 disabled={loading}
                             >
-                                {loading ? 'Loading' : 'Save'}
+                                {loading ? 'Loading' : 'Update'}
                             </Button>
-                            <Link to="/temples">
+                            <Link to="/franchisees">
                                 <Button
                                     variant="contained"
                                     color="secondary"
@@ -224,8 +342,9 @@ const AddTemple = () => {
                     </div>
                 </div>
             </div>
+
             <div className="row">
-                <div className="col-sm-12 col-md-12 col-lg-6 my-1">
+                <div className="col-6 my-1">
                     <div className="card h-100">
                         <div className="card-body px-5">
                             <div className="mb-3">
@@ -242,6 +361,22 @@ const AddTemple = () => {
                                 />
                                 <p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p>
                             </div>
+                            <div className="mb-3">
+                                <label htmlFor="title" className="form-label">
+                                    Email *
+                                </label>
+                                <input
+                                    type="email"
+                                    className="form-control"
+                                    id="email"
+                                    value={data.email}
+
+                                    onChange={(e) => handleChange(e)}
+                                />
+                                {errors.emailError && (
+                                    <p className="text-center py-2 text-danger">{errors.emailError}</p>
+                                )}
+                            </div>
 
                             <div className="mb-3">
                                 <label htmlFor="title" className="form-label">
@@ -269,7 +404,32 @@ const AddTemple = () => {
                                     onChange={(e) => handleChange(e)}
                                 />
                             </div>
-
+                            {/* <div className="mb-3">
+                                <label htmlFor="title" className="form-label">
+                                    Business Name*
+                                </label>
+                                <input
+                                    type="text"
+                                    className="form-control"
+                                    id="business_name"
+                                    value={data.business_name}
+                                    maxLength="50"
+                                    onChange={(e) => handleChange(e)}
+                                />
+                            </div>
+                            <div className="mb-3">
+                                <label htmlFor="title" className="form-label">
+                                    GSTIN*
+                                </label>
+                                <input
+                                    type="text"
+                                    className="form-control"
+                                    id="gstin"
+                                    value={data.gstin}
+                                    maxLength="50"
+                                    onChange={(e) => handleChange(e)}
+                                />
+                            </div> */}
                             <div className="mb-3">
                                 <label htmlFor="pageToLink" className="form-label">
                                     City*
@@ -306,10 +466,27 @@ const AddTemple = () => {
                                     disabled
                                 />
                             </div>
+                            <div className="mb-3">
+                                <label htmlFor="title" className="form-label">
+                                    Pin Code *
+                                </label>
+                                <input
+                                    type="Number"
+                                    className="form-control"
+                                    id="pin_Code"
+                                    value={data.pin_Code}
+                                    maxLength='8'
+                                    onChange={(e) => handleChange(e)}
+                                />
+                                {/* {data.pin_Code ? <><small className="charLeft mt-4 fst-italic">
+                                    {8 - data.pin_Code.length} characters left
+                                </small></> : <></>
+                                } */}
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div className="col-sm-12 col-md-12 col-lg-6 my-1">
+                <div className="col-6 my-1">
                     <div className="card h-100">
                         <div className="card-body px-5">
 
@@ -355,7 +532,6 @@ const AddTemple = () => {
                                     />
                                 </div>
                             </div>
-
                             <div className=" mb-3">
                                 <label htmlFor="title" className="form-label">
                                     Price Lable*
@@ -375,10 +551,9 @@ const AddTemple = () => {
 
                                 </select>
                             </div>
-
                             <div className="mb-3">
                                 <label htmlFor="image" className="form-label">
-                                    Temple Banner*
+                                    franchisee Banner*
                                 </label>
                                 <input
                                     type="file"
@@ -404,4 +579,4 @@ const AddTemple = () => {
     )
 }
 
-export default AddTemple
+export default EditFranchisee
diff --git a/src/views/Temples/Temples.js b/src/views/Temples/Franchisees.js
similarity index 93%
rename from src/views/Temples/Temples.js
rename to src/views/Temples/Franchisees.js
index d187f0c..515a84f 100644
--- a/src/views/Temples/Temples.js
+++ b/src/views/Temples/Franchisees.js
@@ -8,15 +8,15 @@ import swal from 'sweetalert'
 import OverLayButton from './OverLayButton.js'
 import { isAutheticated } from 'src/auth.js'
 
-const Temples = () => {
+const Franchisees = () => {
     const token = isAutheticated()
     const [loading, setLoading] = useState(true)
     const [success, setSuccess] = useState(true)
-    const [TemplesData, setTemplesData] = useState([])
+    const [FranchiseesData, setFranchiseesData] = useState([])
 
     const [currentPage, setCurrentPage] = useState(1)
     const [itemPerPage, setItemPerPage] = useState(10)
-    const [showData, setShowData] = useState(TemplesData)
+    const [showData, setShowData] = useState(FranchiseesData)
 
     const handleShowEntries = (e) => {
         setCurrentPage(1)
@@ -25,11 +25,11 @@ const Temples = () => {
 
     const getCategories = () => {
         axios
-            .get(`/api/temple`, {
+            .get(`/api/franchisee`, {
                 headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
             })
             .then((res) => {
-                setTemplesData(res.data.data)
+                setFranchiseesData(res.data.data)
                 setLoading(false)
             })
             .catch((err) => {
@@ -46,10 +46,10 @@ const Temples = () => {
         const loadData = () => {
             const indexOfLastPost = currentPage * itemPerPage
             const indexOfFirstPost = indexOfLastPost - itemPerPage
-            setShowData(TemplesData.slice(indexOfFirstPost, indexOfLastPost))
+            setShowData(FranchiseesData.slice(indexOfFirstPost, indexOfLastPost))
         }
         loadData()
-    }, [currentPage, itemPerPage, TemplesData])
+    }, [currentPage, itemPerPage, FranchiseesData])
 
     const handleDelete = (id) => {
         swal({
@@ -59,7 +59,7 @@ const Temples = () => {
         }).then((value) => {
             if (value === true) {
                 axios
-                    .delete(`/api/temple/${id}`, {
+                    .delete(`/api/franchisee/${id}`, {
                         headers: {
                             'Access-Control-Allow-Origin': '*',
                             Authorization: `Bearer ${token}`,
@@ -100,7 +100,7 @@ const Temples = () => {
                                 </div>
 
                                 <div className="page-title-right">
-                                    <Link to="/temple/add">
+                                    <Link to="/franchisee/add">
                                         <Button
                                             variant="contained"
                                             color="primary"
@@ -176,16 +176,16 @@ const Temples = () => {
                                                         </td>
                                                     </tr>
                                                 ) : (
-                                                    showData.map((temple, i) => {
+                                                    showData.map((franchisee, i) => {
                                                         return (
                                                             <tr key={i}>
-                                                                <td className="text-start">{temple.name}</td>
+                                                                <td className="text-start">{franchisee.name}</td>
                                                                 <td className="text-start">
-                                                                    <img src={temple.banner.url} alt="Test Image" height="50" />
+                                                                    <img src={franchisee.banner.url} alt="Test Image" height="50" />
                                                                 </td>
-                                                                <td className="text-start">{temple?.city?.city_name}</td>
+                                                                <td className="text-start">{franchisee?.city?.city_name}</td>
                                                                 <td className="text-start">
-                                                                    {new Date(temple.createdAt).toLocaleString('en-IN', {
+                                                                    {new Date(franchisee.createdAt).toLocaleString('en-IN', {
                                                                         month: '2-digit',
                                                                         day: 'numeric',
                                                                         year: 'numeric',
@@ -195,9 +195,9 @@ const Temples = () => {
                                                                     })}
                                                                 </td>
                                                                 <td className=" text-center">
-                                                                    <OverLayButton data={{ url: temple?.url }} />
+                                                                    <OverLayButton data={{ url: franchisee?.url }} />
 
-                                                                    <Link to={`/temple/products/${temple._id}`}>
+                                                                    <Link to={`/franchisee/products/${franchisee._id}`}>
                                                                         <button
                                                                             style={{ color: 'white' }}
                                                                             type="button"
@@ -211,7 +211,7 @@ const Temples = () => {
                                                                         </button>
                                                                     </Link>
 
-                                                                    <Link to={`/temple/edit/${temple._id}`}>
+                                                                    <Link to={`/franchisee/edit/${franchisee._id}`}>
                                                                         <button
                                                                             style={{ color: 'white' }}
                                                                             type="button"
@@ -234,7 +234,7 @@ const Temples = () => {
                                     
                                   "
                                                                         onClick={() => {
-                                                                            handleDelete(temple._id)
+                                                                            handleDelete(franchisee._id)
                                                                         }}
                                                                     >
                                                                         Delete
@@ -257,8 +257,8 @@ const Temples = () => {
                                                 aria-live="polite"
                                             >
                                                 Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
-                                                {Math.min(currentPage * itemPerPage, TemplesData.length)} of{' '}
-                                                {TemplesData.length} entries
+                                                {Math.min(currentPage * itemPerPage, FranchiseesData.length)} of{' '}
+                                                {FranchiseesData.length} entries
                                             </div>
                                         </div>
 
@@ -301,7 +301,7 @@ const Temples = () => {
 
                                                     {!(
                                                         (currentPage + 1) * itemPerPage - itemPerPage >
-                                                        TemplesData.length - 1
+                                                        FranchiseesData.length - 1
                                                     ) && (
                                                             <li className="paginate_button page-item ">
                                                                 <span
@@ -320,7 +320,7 @@ const Temples = () => {
                                                         className={
                                                             !(
                                                                 (currentPage + 1) * itemPerPage - itemPerPage >
-                                                                TemplesData.length - 1
+                                                                FranchiseesData.length - 1
                                                             )
                                                                 ? 'paginate_button page-item next'
                                                                 : 'paginate_button page-item next disabled'
@@ -348,4 +348,4 @@ const Temples = () => {
     )
 }
 
-export default Temples
+export default Franchisees
diff --git a/src/views/orders/AddOrder.js b/src/views/orders/AddOrder.js
index e2a544a..f6b217d 100644
--- a/src/views/orders/AddOrder.js
+++ b/src/views/orders/AddOrder.js
@@ -79,7 +79,7 @@ function AddOrder() {
         function getFranchiseeDetails() {
             setLoading(true)
             axios
-                .get(`/api/temple`, {
+                .get(`/api/franchisee`, {
                     headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
                 })
                 .then((res) => {
@@ -119,7 +119,7 @@ function AddOrder() {
         console.log(getFranchiseeID.current.value)
 
         axios
-            .get(`/api/Temple/arrayspopulate/${getFranchiseeID.current.value}`, {
+            .get(`/api/franchisee/arrayspopulate/${getFranchiseeID.current.value}`, {
                 headers: {
                     'Access-Control-Allow-Origin': '*',
                     Authorization: `Bearer ${token}`,
@@ -445,8 +445,12 @@ function AddOrder() {
                                                             Contact No. : {shipingInfo?.contact_Number}
                                                         </p>
                                                         <p className="m-0 ms-2 mt-1">
-                                                            contact Person Name. : {shipingInfo?.contact_Person_Name}
+                                                            Contact Person Name : {shipingInfo?.contact_Person_Name}
                                                         </p>
+                                                        <p className="m-0 ms-2 mt-1">
+                                                            Price Lable : {shipingInfo?.price_Lable}
+                                                        </p>
+
 
 
 
diff --git a/src/views/orders/EditOrder.js b/src/views/orders/EditOrder.js
index 8727453..c407c4c 100644
--- a/src/views/orders/EditOrder.js
+++ b/src/views/orders/EditOrder.js
@@ -38,6 +38,7 @@ function EditOrder() {
 
     const [productDetails, setProductDetails] = useState()
     const [loading, setLoading] = useState(true)
+    const [orderId, setOrderId] = useState(null)
     const [orderStatus, setOrderStatus] = useState('')
     // const [data, setData] = useState({
     //     product_Name: '',
@@ -52,8 +53,7 @@ function EditOrder() {
                 headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
             })
             if (res.data) {
-                // console.log(res.data?.order?.shippingInfo)
-
+                setOrderId(res.data?.order?.order_id)
                 let options = {
                     Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
                     name: res.data?.order?.shippingInfo?.name,
@@ -117,7 +117,7 @@ function EditOrder() {
         function getFranchiseeDetails() {
             setLoading(true)
             axios
-                .get(`/api/temple`, {
+                .get(`/api/franchisee`, {
                     headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
                 })
                 .then((res) => {
@@ -157,7 +157,7 @@ function EditOrder() {
         console.log(getFranchiseeID.current.value)
 
         axios
-            .get(`/api/Temple/arrayspopulate/${getFranchiseeID.current.value}`, {
+            .get(`/api/franchisee/arrayspopulate/${getFranchiseeID.current.value}`, {
                 headers: {
                     'Access-Control-Allow-Origin': '*',
                     Authorization: `Bearer ${token}`,
@@ -212,6 +212,7 @@ function EditOrder() {
                 headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
             })
             .then((res) => {
+
                 setLoading(false)
                 const productAllkey = Object.keys(res?.data?.product);
                 const productAllValue = Object.values(res?.data?.product);
@@ -393,8 +394,11 @@ function EditOrder() {
                     justify-content-between
                   "
                                 >
+
                                     <div style={{ fontSize: '22px' }} className="fw-bold">
-                                        Edit Order
+                                        <p> Edit Order</p>
+                                        {orderId && <span><small>Order ID :  {orderId}</small> </span>}
+
                                     </div>
                                     <div className="page-title-right">
                                         <Button
@@ -409,7 +413,7 @@ function EditOrder() {
                                             onClick={() => handleSubmit()}
                                             disabled={loading}
                                         >
-                                            {loading ? 'Loading' : 'Update'}
+                                            {loading ? 'Loading' : 'Edit Now'}
                                         </Button>
                                         <Link to="/orders/new">
                                             <Button
@@ -483,7 +487,10 @@ function EditOrder() {
                                                             Contact No. : {shipingInfo?.contact_Number}
                                                         </p>
                                                         <p className="m-0 ms-2 mt-1">
-                                                            contact Person Name. : {shipingInfo?.contact_Person_Name}
+                                                            Contact Person Name : {shipingInfo?.contact_Person_Name}
+                                                        </p>
+                                                        <p className="m-0 ms-2 mt-1">
+                                                            Price Lable : {shipingInfo?.price_Lable}
                                                         </p>
 
 
diff --git a/src/views/orders/NewOrders.js b/src/views/orders/NewOrders.js
index d32ca68..56aa6ee 100644
--- a/src/views/orders/NewOrders.js
+++ b/src/views/orders/NewOrders.js
@@ -200,7 +200,10 @@ function NewOrders() {
                                   </span>
                                 </td>
                                 <td className="text-start">
-                                  <Link to={`/orders/${order.orderStatus}/${order._id}`}>
+
+                                  {/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
+                                  <Link to={`/orders/view/${order._id}`}>
+
                                     <button
                                       style={{ color: 'white' }}
                                       type="button"
diff --git a/src/views/orders/ViewOrders.js b/src/views/orders/ViewOrders.js
new file mode 100644
index 0000000..a8169ff
--- /dev/null
+++ b/src/views/orders/ViewOrders.js
@@ -0,0 +1,543 @@
+
+
+
+
+import React, { useState, useEffect, useRef } from 'react'
+import axios from 'axios'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import QRCode from 'react-qr-code'
+import { isAutheticated } from 'src/auth'
+import { useDispatch, useSelector } from 'react-redux'
+import { addItemsToCart } from 'src/redux/Actions/cartAction'
+import toast from 'react-hot-toast'
+import { cibBlackberry } from '@coreui/icons'
+import Button from '@material-ui/core/Button'
+
+function ViewOrders() {
+    const { status, id } = useParams()
+
+    const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } = useSelector(
+        (state) => state.cart
+    );
+
+
+    const AllStates = useSelector(
+        (state) => state
+    );
+    const getValue = useRef()
+    const getFranchiseeID = useRef()
+    const dispatch = useDispatch();
+    const navigate = useNavigate()
+    const printOrderRef = useRef()
+    const token = isAutheticated()
+    const [productData, setProductData] = useState([])
+    const [allFranchisee, setAllFranchisee] = useState([])
+    const [allTax, setAllTax] = useState([])
+    const [orderDetails, setOrderDetails] = useState()
+
+
+
+    const [productDetails, setProductDetails] = useState()
+    const [loading, setLoading] = useState(true)
+    const [orderId, setOrderId] = useState(null)
+    const [orderStatus, setOrderStatus] = useState('')
+    // const [data, setData] = useState({
+    //     product_Name: '',
+    //     address: '',
+    //     quantity: '',
+    //     contact_Number: '',
+    //     total_Price: '',
+    // })
+    useEffect(() => {
+        const getSingleOrder = async () => {
+            setLoading(true)
+            const res = await axios.get(`/api/order/getOne/${id}`, {
+                headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
+            })
+            if (res.data) {
+                setLoading(false)
+                setOrderId(res.data?.order?.order_id)
+                setOrderDetails(res.data?.order)
+                console.log(res.data?.order.shippingInfo?.city)
+                // let options = {
+                //     Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
+                //     name: res.data?.order?.shippingInfo?.name,
+
+
+                //     contact_Number: res.data?.order?.shippingInfo?.contact_Number,
+                //     contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name,
+                //     address: res.data?.order?.shippingInfo?.address,
+                //     city: res.data?.order?.shippingInfo?.city,
+                //     price_Lable: res.data?.order?.shippingInfo?.Franchisee?.price_Lable,
+                //     state: res.data?.order?.shippingInfo?.state,
+                //     banner: res.data?.order?.shippingInfo?.Franchisee?.banner?.url,
+                //     // Franchisee_Url: res?.data?.data?.url
+                // }
+                // dispatch({ type: "addShippingInfo", payload: options });
+                // if (res.data?.order?.orderItems) {
+                //     res.data?.order?.orderItems.map((i, ind) => {
+                //         dispatch({ type: "addToCart", payload: i });
+                //         dispatch({ type: "calculatePrice" });
+
+                //     })
+                // }
+
+            }
+        }
+        getSingleOrder()
+
+    }, [token])
+
+
+
+    const handleChange = (e) => {
+        if (e.target.type === 'text') {
+            setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
+        } else {
+            setOrderStatus(e.target.value)
+        }
+    }
+    const handleQuantityChange = (e) => {
+
+        setData((prev) => ({
+            ...prev,
+            quantity: e.target.value,
+            total_Price: (productDetails?.base_Price * e.target.value)
+        }))
+
+    }
+
+
+
+
+
+    function getBack() {
+        navigate(`/orders/${status}`, { replace: true })
+    }
+
+    return (
+        <>
+            {' '}
+            <div className="main-content">
+                <div className="page-content">
+                    <div className="container-fluid">
+                        <div className="row">
+                            <div className="col-12">
+                                <div
+                                    className="
+                    page-title-box
+                    d-flex
+                    align-items-center
+                    justify-content-between
+                  "
+                                >
+
+                                    <div style={{ fontSize: '22px' }} className="fw-bold">
+                                        <p> View Order</p>
+                                        {orderId && <span><small>Order ID :  {orderId}</small> </span>}
+
+                                    </div>
+                                    <div className="page-title-right">
+                                        {/* <Button
+                                            variant="contained"
+                                            color="primary"
+                                            style={{
+                                                fontWeight: 'bold',
+                                                marginBottom: '1rem',
+                                                textTransform: 'capitalize',
+                                                marginRight: '5px',
+                                            }}
+                                            onClick={() => handleSubmit()}
+                                            disabled={loading}
+                                        >
+                                            {loading ? 'Loading' : 'Edit Now'}
+                                        </Button> */}
+                                        <Link to="/orders/new">
+                                            <Button
+                                                variant="contained"
+                                                color="secondary"
+                                                style={{
+                                                    fontWeight: 'bold',
+                                                    marginBottom: '1rem',
+                                                    textTransform: 'capitalize',
+                                                }}
+                                            >
+                                                Back
+                                            </Button>
+                                        </Link>
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </div>
+                        {loading ? (
+                            <div class="d-flex justify-content-center">
+                                <div class="spinner-border  text-info" role="status">
+                                    <span class="visually-hidden">Loading...</span>
+                                </div>
+                            </div>
+                        ) : (
+
+                            <div className="row">
+                                <div className="col-lg-6 mt-3">
+                                    <div className="card">
+                                        <div className="card-body">
+                                            <div className="mt-1">
+                                                <h5 className='text-success'>Order Status: {orderDetails?.orderStatus}</h5>
+                                                <label className="fw-bold">Franchisee :</label>
+                                                {/* <div className="d-flex">
+                                                <select
+                                                    className="form-control me-2"
+                                                    onChange={handleChange}
+                                                    value={orderStatus}
+                                                    ref={getFranchiseeID}
+                                                    disabled={shipingInfo !== null}
+                                                >
+                                                    <option value="" disabled></option>
+                                                    {allFranchisee && allFranchisee.map((item, index) =>
+                                                        <option key={index} value={item?._id}>{item?.name}</option>
+                                                    )}
+                                                </select>
+                                                <button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
+                                            </div> */}
+
+
+                                            </div>
+
+
+                                            {
+                                                orderDetails?.shipingInfo !== null &&
+                                                <div className="my-2">
+                                                    <div className="row" style={{ fontSize: '14px' }}>
+                                                        <div className="col-sm-4">
+                                                            <img
+                                                                src={orderDetails?.shippingInfo?.Franchisee?.banner?.url}
+                                                                alt={orderDetails?.shippingInfo?.name}
+                                                                // width='100%'
+                                                                style={{
+                                                                    width: '100%',
+                                                                    objectFit: 'contain',
+                                                                    maxHeight: '100px',
+                                                                }}
+                                                            />
+                                                        </div>
+                                                        <div className="col-sm-8">
+                                                            <h6 className="m-0 ms-2">{orderDetails?.shippingInfo?.name}</h6>
+                                                            <parent className="m-0 ms-2 mt-3">
+                                                                Address. : {orderDetails?.shippingInfo?.address}
+                                                            </parent>
+                                                            <p className="m-0 ms-2 mt-1">
+                                                                Contact No. : {orderDetails?.shippingInfo?.contact_Number}
+                                                            </p>
+                                                            <p className="m-0 ms-2 mt-1">
+                                                                Contact Person Name : {orderDetails?.shippingInfo?.contact_Person_Name}
+                                                            </p>
+                                                            <p className="m-0 ms-2 mt-1">
+                                                                Price Lable : {orderDetails?.shippingInfo?.Franchisee?.price_Lable}
+                                                            </p>
+
+                                                            <p className="m-0 ms-2 mt-1">
+                                                                City : {orderDetails?.shippingInfo?.city}
+                                                            </p>
+                                                            <p className="m-0 ms-2 mt-1">
+                                                                State : {orderDetails?.shippingInfo?.state}
+                                                            </p>
+
+
+
+
+
+
+
+                                                        </div>
+                                                    </div>
+                                                    <hr />
+
+                                                </div>
+                                            }
+                                            <div className="mt-3">
+                                                <label>
+                                                    <span className="fw-bold">Payment Status : </span>
+                                                    {orderDetails?.isPaid === false ? 'Not Paid' : 'Paid'}
+                                                </label>
+                                            </div>
+                                            <div className="mt-1">
+                                                <label>
+                                                    <span className="fw-bold"> Order Created By: </span>
+                                                    {orderDetails?.user?.name}
+                                                </label>
+                                            </div>
+                                            <div className="mt-1">
+                                                <label>
+                                                    <span className="fw-bold">Razorpay Order ID : </span>
+                                                    {productData?.razorpay_order_id}
+                                                </label>
+                                            </div>
+
+                                            <div className="mt-1">
+                                                <label>
+                                                    <span className="fw-bold">Razorpay Payment ID : </span>
+                                                    {productData?.razorpay_payment_id}
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+
+                                </div>
+                                <div className="col-lg-6 mt-3">
+
+                                    {orderDetails?.shipingInfo !== null && <div className="card">
+                                        <div className="card-body">
+                                            {/* <div className="mt-1">
+                                            <label className="fw-bold">Select Product:</label>
+                                            <div className="d-flex">
+                                                <select
+                                                    className="form-control me-2"
+                                                    // onChange={handleGetSingleProduct}
+                                                    // value={productData?._id}
+                                                    ref={getValue}
+
+                                                >
+                                                    <option value="" >-----</option>
+                                                    {productData && productData.map((item, index) =>
+                                                        <option key={index} value={item?._id}>{item?.name}</option>
+                                                    )}
+
+                                                </select>
+                                                <button className='btn-sm btn-primary' onClick={(e) => handleGetSingleProduct(e)}>Add</button>
+
+                                            </div>
+
+                                        </div> */}
+
+                                            <div className="mt-2">
+                                                <h6 className="fw-bold">Products : {orderDetails?.orderItems?.length}</h6>
+
+                                                {
+                                                    orderDetails?.orderItems && orderDetails?.orderItems.map((productDetails, i) =>
+                                                        <div className="my-2">
+                                                            <div className="row" style={{ fontSize: '14px' }}>
+                                                                <div className="col-sm-4">
+                                                                    <img
+                                                                        src={productDetails?.image}
+                                                                        alt={productDetails?.name}
+                                                                        style={{
+                                                                            width: '100%',
+                                                                            objectFit: 'contain',
+                                                                            maxHeight: '150px',
+                                                                        }}
+                                                                    />
+                                                                </div>
+                                                                <div className="col-sm-8">
+                                                                    <h6 className="m-0 ms-2">{productDetails?.name}</h6>
+                                                                    <div className="row">
+                                                                        <div className="col-sm-6">
+
+
+                                                                            <div
+                                                                                className='d-flex justify-content-center mt-3 me-3 '
+                                                                                style={{
+
+                                                                                    width: "6rem",
+
+
+                                                                                }}>
+                                                                                <span className='px-2 mt-1' style={{}}> Quantity: {productDetails?.quantity}</span>
+
+                                                                            </div>
+
+                                                                            <p className="m-0 mt-3 ms-3">
+                                                                                <stong>Price With Tax:</stong> ₹{productDetails?.price_With_Tax}
+                                                                            </p>
+                                                                        </div>
+                                                                        <div className="col-sm-6">
+                                                                            <p className="m-0 mt-3">
+                                                                                <stong> Price:</stong> ₹{productDetails?.price}
+                                                                            </p>
+
+
+
+
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <hr />
+
+                                                        </div>
+                                                    )
+                                                }
+                                                <h5 className="m-0 contents-center mt-3">
+
+                                                    <small className='mb-2'>Shipping Charge: </small> ₹{orderDetails?.shipping_charge}
+
+                                                    <br />
+                                                    <span className='mt-2'> Total Order Value: </span> ₹{orderDetails?.total_amount}
+                                                </h5>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    }
+
+
+
+
+
+
+
+                                    <div className="card my-1">
+                                        <div className="card-body">
+                                            <label className="fw-bold">Status Timeline :</label>
+                                            <table
+                                                className="table table-info table-sm m-0"
+                                                style={{
+                                                    borderRadius: '8px',
+                                                    borderCollapse: 'collapse',
+                                                    overflow: 'hidden',
+                                                }}
+                                            >
+                                                <tbody>
+                                                    <tr className="text-center">
+                                                        <th scope="row">Order Placed On</th>
+                                                        <td> : </td>
+                                                        <td>
+                                                            {orderDetails?.createdAt
+                                                                ? new Date(orderDetails?.createdAt).toLocaleString('en-IN', {
+                                                                    month: 'short',
+                                                                    day: 'numeric',
+                                                                    year: 'numeric',
+                                                                    hour: '2-digit',
+                                                                    minute: 'numeric',
+                                                                    hour12: true,
+                                                                })
+                                                                : new Date(productData?.placed_on).toLocaleString('en-IN', {
+                                                                    month: 'short',
+                                                                    day: 'numeric',
+                                                                    year: 'numeric',
+                                                                    hour: '2-digit',
+                                                                    minute: 'numeric',
+                                                                    hour12: true,
+                                                                })}
+                                                        </td>
+                                                    </tr>
+                                                    <tr className="text-center">
+                                                        <th scope="row">Processing Started</th>
+                                                        <td> : </td>
+                                                        <td>
+                                                            {productData?.status_timeline?.processing
+                                                                ? new Date(productData?.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>
+                                                            {productData?.status_timeline?.dispatched
+                                                                ? new Date(productData?.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>
+                                                            {productData?.status_timeline?.delivered
+                                                                ? new Date(productData?.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>
+                                                            {productData?.status_timeline?.cancelled
+                                                                ? new Date(productData?.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>
+                                                            {productData?.status_timeline?.returned
+                                                                ? new Date(productData?.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 productData={productData} ref={printOrderRef} /> */}
+            </div>
+        </>
+    )
+}
+
+export default ViewOrders