fixed iframe bug

.env

@@ -1,15 +1,15 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
-REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

.env.development

@@ -1,15 +1,16 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
-REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
+

.env.production

@@ -3,6 +3,7 @@ REACT_APP_NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"
 
 # login footer links
 REACT_APP_HOME_LINK='https://www.mermsemr.com/'

.env.qa

@@ -0,0 +1,15 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_NODE_ENV="development"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
+
+# login footer links
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     extra_hosts:
       - api.mermsemr.com:10.10.33.15
       - devapi.mermsemr.com:10.10.33.15
-      - dev-socket.mermsemr.com:10.10.33.15
+      - devsocket.mermsemr.com:10.10.33.15
       - socket.mermsemr.com:10.10.33.15
       - dev-media.mermsemr.com:10.10.33.15
       - media.mermsemr.com:10.10.33.15

src/App.css

@@ -22,10 +22,9 @@
 }
 
 .login-links a {
-  font-size: 15px;
-  font-weight: 700;
+  font-size: 14px;
   padding: 0px 20px;
-  border-right: 2px solid;
+  border-right: 2px solid #6c757d;
   cursor: pointer;
 }
 
@@ -35,4 +34,17 @@
 
 .login-links a:last-child{
   border: 0px;
+}
+
+button{
+  font-size: 1rem!important;
+  font-weight: 700!important;
+}
+
+.font-600 {
+  font-weight: 600;
+}
+
+.accordion-button, .accordion-button:not(.collapsed) {
+  background-color: transparent!important;
 }

src/App.js

@@ -1,23 +1,28 @@
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import { Provider } from 'react-redux';
+import store from './store/store'
 import AppRouters from './AppRouters';
 
 import './App.css';
 
 
-function App() {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        refetchOnWindowFocus: false,
-        retry: 3,
-        // refetchOnMount: false,
-        staleTime: Infinity // can also be a number in millisecond
-      },
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 3,
+      // refetchOnMount: false,
+      staleTime: 10*60*1000 // can also be a number in millisecond
     },
-  })
+  },
+})
+
+function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <AppRouters />
+      <Provider store={store}>
+        <AppRouters />
+      </Provider>
     </QueryClientProvider>
   );
 }

src/AppRouters.jsx

@@ -18,6 +18,7 @@ import SettingsPage from './views/SettingsPage'
 import ProductPage from './views/ProductPage'
 import SocketIOContextProvider from './component/context/SocketIOContext';
 import CSignupPage from './views/CSignupPage';
+import HelpPage from './views/HelpPage';
 
 function AppRouters() {
   return (
@@ -45,6 +46,7 @@ function AppRouters() {
               <Route path={siteLinks.user} element={<UserPage />} />
               <Route path={siteLinks.calendar} element={<CalendarPage />} />
               <Route path={siteLinks.settings} element={<SettingsPage />} />
+              <Route path={siteLinks.help} element={<HelpPage />} />
             </Route>
           </Route>
         </Route>

src/component/auth/CSignup.jsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
+import { useDispatch } from 'react-redux'
 
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query';
 import { completeRegistration, verifyEmail } from '../../services/services';
+import { updateUserDetails } from '../../store/UserDetails'
 
 import { IoMdArrowDropdown } from "react-icons/io";
 
@@ -28,6 +30,8 @@ const validationSchema = Yup.object().shape({
 export default function CSignup() {
 
     const {jwt} = useParams()
+    
+    const dispatch = useDispatch()
 
     const navigate = useNavigate()
 
@@ -51,15 +55,19 @@ export default function CSignup() {
         return completeRegistration(fields)
     },
     onSuccess: (res) => {
-        const {token, room} = res?.data?.data
-        if(token){
-            localStorage.setItem('token', token)
-            localStorage.setItem('room', room)
-            // const data = {token}
-            // dispatch(updateUserDetails({ ...data }));
-            navigate('/dash') // later add redux to dispatch state
+        if(res?.data?.resultCode != '0'){
+            throw({message: res?.data?.resultDescription})
         }
-    }
+        const {token, room, uid} = res?.data
+        if(!token || !room){
+            throw({message: 'something went wrong, try again!'})
+        }
+        localStorage.setItem('token', token)
+        localStorage.setItem('room', room)
+        localStorage.setItem('uid', uid)
+        dispatch(updateUserDetails({ ...res?.data }));
+        navigate('/dash') // later add redux to dispatch state
+    },
     // onError: (err) => {
     //     console.log('err', err)
     // }
@@ -70,7 +78,7 @@ export default function CSignup() {
         country : values.country,    
         username: values.username,
         password: values.password,
-        verify_link: user.verify_link
+        verify_link: jwt
     }
     cSignup.mutate(reqData)
   }
@@ -89,7 +97,7 @@ export default function CSignup() {
                 <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                        <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                        <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                             <div className="mt-5 d-flex">
                                 <div className="bg-white register p-5">
                                     <h1 className="mb-2">MERMS Panel</h1>
@@ -196,7 +204,7 @@ export default function CSignup() {
                                                 }
 
                                                 <div className="col-12 mt-3 text-center">
-                                                    <Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
+                                                    <Link to={siteLinks.signup} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
                                                 </div>
                                                 
                                                 <div className="col-12 mt-3 text-center">

src/component/auth/ExtFooter.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function ExtFooter() {
+    return <div className="login-links">
+        <a href={process.env.REACT_APP_HOME_LINK}>Home</a>
+        <a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
+        <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
+        <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
+    </div>
+}

src/component/auth/Forgetpwd2.jsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query'
 import { recoverPWD } from '../../services/services';
+import getImage from '../../utils/getImage';
 
 const validationSchema = Yup.object().shape({
     username: Yup.string()
@@ -46,11 +47,11 @@ export default function Forgetpwd2() {
                 <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1h">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1h" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register p-5">
                                         <h1 className="mb-2">MERMS Panel</h1>
-                                        <p>Please enter your username.</p>
+                                        {!mutation.isSuccess && <p>Please enter your username.</p>}
                                         <Formik
                                         initialValues={initialValues}
                                         validationSchema={validationSchema}
@@ -81,8 +82,9 @@ export default function Forgetpwd2() {
                                                         </>
                                                     :
                                                     <div className='col-12'>
-                                                        <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                        <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
                                                             <h4 className='p-4 text-black'>Check your email to continue password reset.</h4>
+                                                            <img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
                                                             <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
                                                         </div>
                                                     </div>

src/component/auth/Login2.jsx

@@ -83,7 +83,7 @@ export default function Login() {
                 <div className="vh-100 custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register px-5 pt-5 pb-3">
                                         <h1 className="mb-2">MERMS Panel</h1>
@@ -124,7 +124,7 @@ export default function Login() {
                                                     <button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
                                                 </div>
                                                 <div className="col-12  mt-3">
-                                                    <p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
+                                                    <p>Don't have an account ?<Link to={siteLinks.signup}><span style={{fontWeight: 'bolder'}}>Sign Up</span></Link></p>
                                                 </div>
                                             </div>
                                         </form>
@@ -133,7 +133,7 @@ export default function Login() {
                                                 <div className="app-store-icons-wrap text-center">
                                                     <a className="icon google"
                                                         href='#' >
-                                                        <img src={IOSDownload} className='w-100 h-auto' alt='IOS Download' />
+                                                        <img src={IOSDownload} className='w-80 h-auto' alt='IOS Download' />
                                                     </a>
                                                 </div>
                                             </div>
@@ -141,7 +141,7 @@ export default function Login() {
                                             <div className="col-6">
                                                 <div className="app-store-icons-wrap text-center">
                                                     <a className="icon apple"  href='#'>
-                                                        <img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
+                                                        <img src={GoogleDownload} className='w-80 h-auto' alt='IOS Download' />
                                                     </a>
                                                 </div>
                                             </div>
@@ -153,6 +153,7 @@ export default function Login() {
                                             <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
                                             <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
                                         </div>
+
                                     </div>
                                 </div>
                             </div>

src/component/auth/Signup2.jsx

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query';
 import { signUpUser } from '../../services/services';
+import getImage from '../../utils/getImage';
 
 const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -49,6 +50,7 @@ export default function Signup2() {
   const signUp = (values) => {
     // helpers.resetForm()
     // console.log('values', values, helpers)
+    delete values.isChecked
     mutation.mutate(values)
   }
 
@@ -59,7 +61,7 @@ export default function Signup2() {
                 <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register p-5">
                                         <h1 className="mb-2">MERMS Panel</h1>
@@ -129,8 +131,9 @@ export default function Signup2() {
                                                             </>
                                                             :
                                                             <div className='col-12'>
-                                                                <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
-                                                                    <h4 className='p-4 text-black'>Check your email to continue.</h4>
+                                                                <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
+                                                                    <h4 className='p-4 text-black' style={{marginBottom: '-30px'}}>Check your email to continue.</h4>
+                                                                    <img className='' style={{width: '200px'}} src={getImage('check-mail.png')} alt='mail-alert' />
                                                                     <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
                                                                 </div>
                                                             </div>

src/component/authorization/BearerToken.jsx

@@ -11,7 +11,8 @@ export default function BearerToken() {
         return userToken(fields)
     },
     onError: (error) => {
-        location.reload();
+      console.log(error)
+      // window.location.reload(true)
     },
       onSuccess: (res) => {
         if(res?.data?.resultCode != '0'){

src/component/calendar/Calendar.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import EventCalendar from "./EventCalendar";
@@ -16,12 +16,42 @@ export default function Calendar(){
     //     setDraggedEvent(event)
     // }
 
+    // const {data, isFetching, isError, error} = useQuery({
+    //     queryKey: queryKeys.calendar_events,
+    //     queryFn: () => getCalendarEvents()
+    // })
+
+    // const calendarEvents = useMutation({
+    //     mutationFn: (reqData) => {
+    //         return getCalendarEvents(reqData)
+    //     },
+    //     onError: (error) => {
+    //         console.log(error)
+    //     },
+    //     onSuccess: (res) => {
+    //         if(res?.data?.resultCode != '0'){
+    //             throw({message: 'Something went wrong'})
+    //         }
+    //     }
+    // })
+
+    // useEffect(()=>{
+    // let reqData = {
+    //     token: localStorage.getItem('token'), // USER TOKEN
+    //     uid: localStorage.getItem('uid') // USER UID
+    // }
+    // calendarEvents.mutate(reqData)
+    // },[])
+    let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.calendar_events,
-        queryFn: () => getCalendarEvents()
+        queryFn: () => getCalendarEvents(reqData)
     })
 
-    const receievedEvents = data?.data?.bar_data
+    const receievedEvents = data?.data
     const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
     const eventList = receievedEvents?.list //EVENT LIST FROM API
 
@@ -70,7 +100,7 @@ export default function Calendar(){
                                 </>
                                 : isError ?
                                 <div className="col-12">
-                                    <p className='text-danger'>{error.message}</p>
+                                    <p className='text-danger'>{error?.message}</p>
                                 </div>
                                 :
                                 <>
@@ -83,7 +113,7 @@ export default function Calendar(){
                                             Drag and drop your event or click in the calendar.
                                         </p> */}
 
-                                        {category.map((item, index) => {
+                                        {category?.map((item, index) => {
                                             let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
                                             let circleColor = item?.cid == '1' ? 'text-success' : item?.cid == '2' ? 'text-danger' : item?.cid == '3' ? 'text-warning' : 'text-primary'
                                             return (

src/component/calendar/EventCalendar.jsx

@@ -81,7 +81,7 @@ export default function EventCalendar({removeAfterDrop, eventList, activeCategor
   useEffect(()=>{
     // let newEventList = eventList?.map(item => ({...item, start: new Date(item?.start)}))
     let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
-    console.log('newEventList', newEventList)
+    // console.log('newEventList', newEventList)
     setCurrentEvents(newEventList)
   },[activeCategory])
 

src/component/contacts/Contacts.js

@@ -2,27 +2,40 @@
 import React, { useEffect, useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { contactData } from "../../services/services";
 import queryKeys from "../../services/queryKeys";
 import getCustomTime from "../../utils/getCustomTime";
 
 export default function Contacts(){
 
-    const {data:contacts, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.contacts,
-        queryFn: () => contactData()
-    })
-
-    const contactsData = contacts?.data?.calendar_data?.contacts // LIST OF CONTACTS
-    const contactsCategory = contacts?.data?.calendar_data?.category // LIST OF CATEGORY
+    // const {data:contacts, isFetching, isError, error} = useQuery({
+    //     queryKey: queryKeys.contacts,
+    //     queryFn: () => contactData()
+    // })
 
     const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
 
-    const [activeContactUID, setActiveContactUID] = useState(null)
-    const [activeDetail, setActiveDetail] = useState(null)
+    const [activeContactUID, setActiveContactUID] = useState('')
+    const [activeDetail, setActiveDetail] = useState([])
 
-    const [filteredContactData, setFiltererdContactData] = useState(null)
+    const [filteredContactData, setFiltererdContactData] = useState([])
+
+    
+    const getContactData = useMutation({
+        mutationFn: (reqData) => {
+            return contactData(reqData)
+        },
+        onError: (error) => {
+            console.log(error)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                throw({message: 'Something went wrong'})
+            }
+            setFiltererdContactData(res?.data?.contacts)
+        }
+    })
 
     const changeActiveUID = (uid) => {
         setActiveContactUID(uid)
@@ -42,10 +55,21 @@ export default function Contacts(){
         changeActiveUID(filteredConData[0]?.uid)
     }
 
+    useEffect(()=>{
+    let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+    getContactData.mutate(reqData)
+    },[])
+
+    const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS
+    const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY
+
     return(
         <>
             <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
-            {isFetching ? 
+            {getContactData?.isPending ? 
                 <>
                     <div className="row">
                         <div className="col-12">
@@ -53,10 +77,10 @@ export default function Contacts(){
                         </div>
                     </div>
                 </>
-                : isError ?
+                : getContactData?.error ?
                 <div className="row">
                     <div className="col-12">
-                        <p className='text-danger'>{error.message}</p>
+                        <p className='text-danger'>{getContactData?.error?.message}</p>
                     </div>
                 </div>
                 :
@@ -121,14 +145,14 @@ export default function Contacts(){
                                                                     </div>
                                                                 </li>
                                                             {contactsCategory && contactsCategory.map(item => (
-                                                                <li key={item?.product_id} className="py-2" onClick={()=>changeActiveCategoryUID(item?.product_id)} style={{cursor: 'pointer'}}>
+                                                                <li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`A00000${item?.cid}`)} style={{cursor: 'pointer'}}>
                                                                     <div>
                                                                         <span className="nav align-items-center">
                                                                             <span>
-                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == item?.product_id ? 'text-primary' : 'text-warning'}`}></i>
+                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == `A00000${item?.cid}` ? 'text-primary' : 'text-warning'}`}></i>
                                                                             </span>
                                                                         <span>
-                                                                            <span>{item?.title}</span>
+                                                                            <span>{item?.description}</span>
                                                                         </span>
                                                                         </span>
                                                                     </div>
@@ -177,10 +201,10 @@ export default function Contacts(){
                                                 </div>
                                             </div>
                                             <div className="mail-msg scrollbar scroll_dark">
-                                                {contactsData && (filteredContactData || contactsData).map((contact, index)=> {
-                                                    const isActive = (contact.uid == activeContactUID) || (!activeContactUID && index == 0)
+                                                {contactsData && filteredContactData?.map((contact, index)=> {
+                                                    const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
                                                     return (
-                                                        <div key={contact.uid} onClick={()=>changeActiveUID(contact.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
+                                                        <div key={contact?.uid} onClick={()=>changeActiveUID(contact?.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
                                                             <a href="#">
                                                                 <div className="media align-items-center">
                                                                     <div className="mr-3">
@@ -190,15 +214,15 @@ export default function Contacts(){
                                                                     </div>
                                                                     <div className="w-100">
                                                                         <div className="mail-msg-item-titel justify-content-between">
-                                                                            <p>{contact.sender}</p>
+                                                                            <p>{contact?.sender}</p>
                                                                             {/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
-                                                                            <p className="d-none d-xl-block"><span>{new Date(contact.added).toDateString()}</span></p>
+                                                                            <p className="d-none d-xl-block"><span>{new Date(contact?.added).toDateString()}</span></p>
                                                                         </div>
-                                                                        <h5 className="mb-0 my-2">{contact.title}</h5>
-                                                                        <p>{contact.message.length < 100 ? contact.message : contact.message.substring(0,101) + ' ...' }</p>
+                                                                        <h5 className="mb-0 my-2">{contact?.title}</h5>
+                                                                        <p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p>
                                                                         <p className="d-xl-none">
                                                                             <span>
-                                                                            {new Date(contact.added).toDateString()}
+                                                                            {new Date(contact?.added).toDateString()}
                                                                             {/* {getCustomTime(contact.added)} */}
                                                                             </span>
                                                                         </p>
@@ -219,13 +243,13 @@ export default function Contacts(){
                                                     <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
                                                 </div>
                                                 <div>
-                                                    <h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
-                                                    <p>{activeContactUID ? new Date(activeDetail[0].added).toDateString() : new Date(contactsData[0].added).toDateString()}</p>
+                                                    <h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
+                                                    <p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
                                                 </div>
                                             </div>
                                             <div className="mt-4 d-flex justify-content-between">
                                                 <div>
-                                                    <h3>{activeContactUID ? activeDetail[0].title : contactsData[0].title}</h3>
+                                                    <h3>{activeContactUID ? activeDetail[0]?.title : filteredContactData[0]?.title}</h3>
                                                 </div>
                                                 <div className="d-flex">
                                                     {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
@@ -233,7 +257,7 @@ export default function Contacts(){
                                                 </div>
                                             </div>
                                             <div>
-                                                <p>{activeContactUID ? activeDetail[0].message : contactsData[0].message}</p>
+                                                <p>{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}</p>
                                                 {/* <p className="my-4">hey adminjon...</p>
                                                 <p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
                                                 <p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>

src/component/help/HelpCom.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+
+
+export default function HelpCom(){
+
+    return(
+        <>
+            <BreadcrumbComBS title='Frequesntly Asked Questions' paths={['Dashboard', 'Help']} />
+            {/*<div className="row">*/}
+            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+            {/*</div>*/}
+
+
+            <div className="row account-contant">
+                <div className="col-12">
+                    <div className="card card-statistics">
+                        <div className="card-body p-lg-15" style={{backgroundColor:"#f9f9fb"}}>
+                            
+                                <p className="mb-4">First, a disclaimer – the entire process of writing a blog post often takes more than a couple of hours, even if you can type eighty words as per minute and your writing skills are sharp.</p>
+                            <div className="row">
+                                <div className="accordion" id="accordionExample">
+                                    {['a', 'b', 'c', 'd'].map((item, index)=>{
+                                        return (
+                                            <div className="accordion-item">
+                                                <h2 className="accordion-header">
+                                                <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target={`#${item}`} aria-expanded="true" aria-controls="collapseOne">
+                                                    {`Accordion Item ${item} 1`}
+                                                </button>
+                                                </h2>
+                                                <div id={item} className={`accordion-collapse collapse ${index == 0 && 'show'}`} data-bs-parent="#accordionExample">
+                                                <div className="accordion-body">
+                                                    <strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the accordion-body, though the transition does limit overflow.
+                                                </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}

src/component/home/Products.jsx

@@ -1,29 +1,22 @@
 import { useQuery } from '@tanstack/react-query'
-import React from 'react'
-import { productData } from '../../services/services'
-import queryKeys from '../../services/queryKeys'
+import { productsData } from '../../services/services'
 import productPath from "../../utils/productpath";
 import { Link } from 'react-router-dom';
+
+import queryKeys from '../../services/queryKeys'
+
+
 export default function Products() {
 
+    let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.product,
-        queryFn: () => productData()
+        queryKey: queryKeys.products,
+        queryFn: () => productsData(reqData)
     })
-/*
-   {
-      "banner": "p1.jpg",
-      "description": "Your personal professional web presence",
-      "id": 1,
-      "name": "Personal Website",
-      "product_id": "A000001",
-      "product_uid": "e92282b4-3ee1-4026-92ac-12cfd214b43a",
-      "status": 5,
-      "status_text": "Activate Now"
-    },
- */
-    //const products = data?.data?.products_list?.products
-    const products = data?.data?.products_list
+    const products = data?.data?.products_data // PRODUCTS DATA
 
   return (
     <>
@@ -43,7 +36,7 @@ export default function Products() {
                 : isError ?
                 <div className="row">
                     <div className="col-12">
-                        <p className='text-danger'>{error.message}</p>
+                        <p className='text-danger'>{error?.message}</p>
                     </div>
                 </div>
                 :

src/component/home/ProductsURL.jsx

@@ -2,15 +2,22 @@ import React from 'react'
 import { productsURL } from '../../services/services'
 import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
+import getImage from '../../utils/getImage'
 
 export default function ProductsURL() {
 
-    const {data:data, isFetching, isError, error} = useQuery({
+    let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.product_url,
-        queryFn: () => productsURL()
+        queryFn: () => productsURL(reqData)
     })
 
-    const urlData = data?.data?.url_data?.url
+    const urlData = data?.data?.products_data
+    // console.log('data', urlData)
 
   return (
     <>
@@ -55,13 +62,21 @@ export default function ProductsURL() {
                                 {urlData && urlData.map((item, index) => {
                                     let statusColor = item?.status === 'Preparing' ? 'badge-success-inverse' : item?.status === 'Active' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
                                     let productUrl = '/product/'+ item?.product_id
+                                    let externalUrl= item?.url_protocol +"://"+ item?.internal_url;
                                     return (
                                         <tr key={index}>
-                                            <td>{Number(item?.no) + Number(index)}</td>
-                                            <td>{item?.description} - <a href={productUrl} target='_blank'>{item?.url}</a></td>
+                                            <td>{Number(item?.id).toString().padStart(6,'0')}</td>
+                                            <td>
+                                                <a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> -  {item?.description}
+                                            </td>
 
                                             <td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
-                                            <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
+                                            {/* <td><a className="mr-3" href={productUrl}><i className="fe fe-edit"></i></a></td> */}
+                                            <td>
+                                                <a className="mr-3" href={productUrl}>
+                                                    <img src={getImage('arrow-next.png')} alt='next' />
+                                                </a>
+                                            </td>
                                         </tr>
                                     )
                                 })}

src/component/home/RecentActions.jsx

@@ -10,7 +10,7 @@ export default function RecentActions() {
         queryFn: () => recentActions()
     })
 
-    const actionData = dataAction?.data?.action_data
+    const actionData = dataAction?.data?.recent_actions
 
   return (
     <>
@@ -43,7 +43,7 @@ export default function RecentActions() {
                     <div className="d-xxs-flex align-items-center">
                         <div className="total-sales">
                             <p>Last Update</p>
-                            <h3>{dataAction?.data?.action_data?.last_update}</h3>
+                            <h3>{dataAction?.data?.last_update}</h3>
                         </div>
                         <div className="mb-3 mb-sm-0 ml-auto">
                             {/*<button className="btn btn-primary btn-xs">View All Invoices</button>*/}
@@ -62,19 +62,19 @@ export default function RecentActions() {
                     <div className="row no-gutters">
                         <div className="col-6 col-xxs-3 ">
                             <p>Initial</p>
-                            <h4>{actionData?.initial}</h4>
+                            <h4>{dataAction?.data?.initial}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Processing</p>
-                            <h4>{actionData?.processing}</h4>
+                            <h4>{dataAction?.data?.processing}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Verifying</p>
-                            <h4>{actionData?.verifying}</h4>
+                            <h4>{dataAction?.data?.verifying}</h4>
                         </div>
                         <div className="col-6 col-xxs-3 ">
                             <p>Completed</p>
-                            <h4>{actionData?.completed}</h4>
+                            <h4>{dataAction?.data?.completed}</h4>
                         </div>
                     </div>
                     <div className="table-responsive m-t-20">
@@ -89,16 +89,16 @@ export default function RecentActions() {
                             </tr>
                             </thead>
                             <tbody className="text-muted">
-                            {actionData && actionData?.actions.map((action, index) => {
+                            {actionData && actionData?.map((action, index) => {
                                 let bgColor = action?.status == '5' ? 'badge-success-inverse' : action?.status == '3' ? 'badge-info-inverse' : action?.status == '0' ? 'badge-warning-inverse' : 'badge-primary-inverse'
                                 let text = action?.status == '5' ? 'completed' : action?.status == '3' ? 'verifying' : action?.status == '0' ? 'processing' : 'processing'
                                 return (
                                     <tr key={index}>
-                                        <td>{action?.no}</td>
-                                        <td>{action?.description}</td>
-                                        <td>{new Date(action?.date).toDateString()}</td>
+                                        <td>{action?.id}</td>
+                                        <td>{action?.action_label}</td>
+                                        <td>{new Date(action?.added).toDateString()}</td>
                                         <td>
-                                            <label className={`badge mb-0 ${bgColor}`}>{text}</label>
+                                            <label className={`badge mb-0 ${bgColor}`}>{action?.status_description}</label>
                                         </td>
                                     </tr>
                                 )

src/component/home/TopBar.jsx

@@ -1,37 +1,44 @@
-import React, {useEffect} from 'react'
-import { useMutation } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
 
 export default function TopBar() {
 
-  const topBarData = useMutation({
-    mutationFn: (reqData) => {
-        return topBar(reqData)
-    },
-    onError: (error) => {
-        console.log(error)
-        location.reload();
-    },
-      onSuccess: (res) => {
-        if(res?.data?.resultCode != '0'){
-            throw({message: 'Something went wrong'})
-        }
-    }
-  })
+//   const topBarData = useMutation({
+//     mutationFn: (reqData) => {
+//         return topBar(reqData)
+//     },
+//     onError: (error) => {
+//         console.log(error)
+//     },
+//       onSuccess: (res) => {
+//         if(res?.data?.resultCode != '0'){
+//             throw({message: 'Something went wrong'})
+//         }
+//     }
+//   })
 
-    useEffect(()=>{
-      let reqData = {
+//     useEffect(()=>{
+//       let reqData = {
+//         token: localStorage.getItem('token'), // USER TOKEN
+//         uid: localStorage.getItem('uid') // USER UID
+//       }
+//       topBarData.mutate(reqData)
+//     },[])
+    
+    let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
-      }
-      topBarData.mutate(reqData)
-    },[])
-    
-    const data = topBarData?.data?.data?.top_bar // top bar data
+    }
+    const {data:topBarData, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.topBar,
+        queryFn: () => topBar(reqData)
+    })
+    const data = topBarData?.data?.top_bar // top bar data
 
   return (
     <>
-        {topBarData.isPending ? 
+        {isFetching ? 
         <>
             <div className="col-12">
                 <div className="card p-4">
@@ -39,10 +46,10 @@ export default function TopBar() {
                 </div>
             </div>
         </>
-        : topBarData.error ?
+        : isError?
         <div className="col-12">
             <div className="card p-4">
-                <p className='text-danger'>{topBarData.error.message}</p>
+                <p className='text-danger'>{error.message}</p>
             </div>
         </div>
         :

src/component/layout/layoutcom/UserFooter.jsx

@@ -2,11 +2,13 @@ import React from "react";
 
 export default function UserFooter(){
 
+    const year = new Date().getFullYear()
+
     return <>
         <footer className="footer">
             <div className="row">
                 <div className="col-12 col-sm-6 text-center text-sm-left">
-                    <p>&copy; Copyright 2024. All rights reserved.</p>
+                    <p>&copy; Copyright {year}. All rights reserved.</p>
                 </div>
                 <div className="col  col-sm-6 ml-sm-auto text-center text-sm-right">
                     <p>A division of <i className="fa fa-key text-danger mx-1"></i> autoMedSys A.I.</p>

src/component/layout/layoutcom/UserHeader.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import getImage from "../../../utils/getImage";
 import { Link, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -9,6 +9,8 @@ export default function UserHeader(){
 
     const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
+    const nav_menu = useRef(null)
+
     const toggleSidebar = (e) => {
         e.preventDefault()
         document.body.classList.toggle('sidebar-toggled')
@@ -32,14 +34,19 @@ export default function UserHeader(){
         window.location.reload()
     }
 
+    const toggleMenu = (e) => {
+        // e.preventDefault()
+        nav_menu.current.classList.toggle('show')
+    }
+
     return (
         <header className="app-header top-bar">
             <nav className="navbar navbar-expand-md">
                 <div className="navbar-header d-flex align-items-center">
                     <a href="#" onClick={toggleSidebar} className="mobile-toggle"><i className="ti ti-align-right"></i></a>
                     <a className="navbar-brand" href="/dash">
-                        <img src={getImage('logo-light.png')} className="img-fluid logo-desktop" alt="logo"/>
-                        <img src={getImage('logo-icon.png')} className="img-fluid logo-mobile" alt="logo"/>
+                        <img src={getImage('logo-pink.png')} className="img-fluid logo-desktop" alt="logo"/>
+                        <img src={getImage('logo-pink.png')} className="img-fluid logo-mobile" alt="logo"/>
                     </a>
                 </div>
                 <button onClick={removeSidebar} className="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -66,16 +73,16 @@ export default function UserHeader(){
 
                         <ul className="navbar-nav nav-right ml-auto">
                             <li className="nav-item user-profile">
-                                <a href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown">
-                                    <img src={getImage('avtar/02.jpg')} alt="avtar-img" />
+                                <a onClick={toggleMenu} href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdow">
+                                    <img src={getImage('profile-pic-circle.png')} alt="avtar-img" />
                                     <span className="bg-success user-status"></span>
                                 </a>
-                                <div className="dropdown-menu animated fadeIn">
+                                <div ref={nav_menu} className="dropdown-menu animated fadeIn">
                                     <div className="bg-gradient px-4 py-3">
                                         <div className="d-flex align-items-center justify-content-between">
                                             <div className="mr-1">
-                                                <h5 className="text-white mb-0">{userDetails?.firstname} {userDetails?.lastname}</h5>
-                                                <small className="text-white">{userDetails.email}</small>
+                                                <h4 className="text-white mb-0 font-600">{userDetails?.firstname} {userDetails?.lastname}</h4>
+                                                <p className="text-white font-600">{userDetails.email}</p>
                                             </div>
                                             <a href="#" onClick={logout} className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
                                                data-placement="top" title="" data-original-title="Logout"> <i
@@ -92,8 +99,10 @@ export default function UserHeader(){
                                         <Link className="dropdown-item d-flex nav-link" to={siteLinks.settings}>
                                             <i className=" ti ti-settings pr-2 text-info"></i> Settings
                                         </Link>
-                                        <a className="dropdown-item d-flex nav-link" href="#">
-                                            <i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.help}>
+                                            <i className="fa fa-compass pr-2 text-warning"></i> 
+                                            Need help?
+                                        </Link>
 
                                         {/*<div className="row mt-2">*/}
                                         {/*    <div className="col">*/}

src/component/layout/layoutcom/UserMenu.jsx

@@ -20,7 +20,7 @@ export default function UserMenu() {
                     <li className="nav-static-title">Panel</li>
                     <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
                         <Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                            <i className="nav-icon ti ti-rocket"></i>
+                            <i className="nav-icon ti ti-home"></i>
                             <div className='d-flex gap-2 justify-content-between align-items-center'>
                                 <span className="nav-title">Dashboard</span>
                                 <IoIosArrowDown />

src/component/product/ProductActive.jsx

@@ -1,140 +1,114 @@
-import React from "react";
+import React, { useRef } from "react";
 import getImage from "../../utils/getImage";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import GeneralTab from "./settingsTab/GeneralTab";
+import { useMutation } from "@tanstack/react-query";
+import { productRefreshSite } from "../../services/services";
 
 
-export default function ProductActive(){
+export default function ProductActive({productData}){
+    const iframe = useRef()
+
+    const settingsObject = {
+        home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
+        footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
+        about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
+        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
+        social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
+        template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
+        color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
+    };
+
+    const refresh = useMutation({
+        mutationFn: (fields) => {
+            return productRefreshSite(fields)
+        },
+        onSuccess: (res) => {
+            iframe.current.src += ''
+        }
+    })
+
+    const handleRefresh = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData.product_id,
+            subscription_uid: productData.subscription_uid
+
+        }
+        refresh.mutate(reqData)
+    }
+    let externalUrl= 'https://'+productData?.internal_url
 
     return(
         <>
-            <BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />
+            {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
             {/*<div className="row">*/}
             {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
             {/*</div>*/}
 
 
             <div className="row account-contant">
-                <div className="col-12">
-                    <div className="card card-statistics">
-                        <div className="card-body p-0">
-                            <div className="row no-gutters">
-                                <div className="col-xl-3 pb-xl-0 pb-5 border-right">
-                                    <div className="page-account-profil pt-5">
-                                        <div className="profile-img text-center rounded-circle">
-                                            <div className="pt-5">
-                                                <div className="bg-img m-auto">
-                                                    <img src={getImage('widget/01.jpg')}   className="img-fluid"
-                                                         alt="users-avatar" />
-                                                </div>
-                                                <div className="profile pt-4">
-                                                    <h4 className="mb-1">Product Short Name</h4>
-                                                    <p>last Update : 00:00:0000</p>
-                                                </div>
-                                            </div>
-                                        </div>
-
-
+                <>
+                    <div className="row tabs-contant">
+                        <div className="col-xxl-6">
+                            <div className="card card-statistics">
+                                <div className="card-header">
+                                    <div className="card-heading d-flex justify-content-between">
+                                        <h4 className="card-title">{externalUrl}</h4>
+                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn btn-primary">IC</button>
                                     </div>
                                 </div>
-                                <div className="col-xl-5 col-md-6 col-12 border-t border-right">
-                                    <div className="page-account-form">
-                                        <div className="form-titel border-bottom p-3">
-                                            <h5 className="mb-0 py-2">Edit Your Product Settings</h5>
-                                        </div>
-                                        <div className="p-4">
-                                            <form>
-                                                <div className="form-row">
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="name1">Full Name</label>
-                                                        <input type="text" className="form-control" id="name1"
-                                                               value="Alice Williams" />
-                                                    </div>
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="title1">Title</label>
-                                                        <input type="text" className="form-control" id="title1"
-                                                               value="Marketing expert" />
-                                                    </div>
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="phone1">Phone Number</label>
-                                                        <input type="text" className="form-control" id="phone1"
-                                                               value="(01) 97 563 15613" />
-                                                    </div>
-                                                    <div className="form-group col-md-12">
-                                                        <label htmlFor="email1">Email</label>
-                                                        <input type="email" className="form-control" id="email1"
-                                                               value="alicewilliams@gmail.com" />
-                                                    </div>
-                                                </div>
-                                                <div className="form-group">
-                                                    <label htmlFor="add1">Address</label>
-                                                    <input type="text" className="form-control" id="add1"
-                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
-                                                </div>
-                                                <div className="form-group">
-                                                    <label htmlFor="add2">Address 2</label>
-                                                    <input type="text" className="form-control" id="add2"
-                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
-                                                </div>
-
-
-                                                <button type="submit" className="btn btn-primary">Update Information
-                                                </button>
-                                            </form>
-                                        </div>
+                                <div className="card-body">
+                                    <iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
+                                </div>
+                                <div className="p-4 ml-auto">
+                                    <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-xxl-6">
+                            <div className="card card-statistics">
+                                <div className="card-header">
+                                    <div className="card-heading">
+                                        <h4 className="card-title"> Site Settings </h4>
                                     </div>
                                 </div>
-                                <div className="col-xl-4 col-md-6 border-t col-12">
-                                    <div className="page-account-form">
-                                        <div className="form-titel border-bottom p-3">
-                                            <h5 className="mb-0 py-2">Your External Link</h5>
-                                        </div>
-                                        <div className="p-4">
-                                            <form>
-                                                <div className="form-group">
-                                                    <label htmlFor="fb">Facebook URL:</label>
-                                                    <input type="text" className="form-control" id="fb"
-                                                           value="https://www.facebook.com/" />
-                                                </div>
-                                                <div className="form-group">
-                                                    <label htmlFor="tr">Twitter URL:</label>
-                                                    <input type="text" className="form-control" id="tr"
-                                                           value="https://twitter.com/" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="br">Blogger URL:</label>
-                                                    <input type="text" className="form-control" id="br"
-                                                           value="https://www.blogger.com" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="go">Google+ URL:</label>
-                                                    <input type="text" className="form-control" id="go"
-                                                           value="https://plus.google.com/discover" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="li">LinkedIn URL:</label>
-                                                    <input type="text" className="form-control" id="li"
-                                                           value="https://in.linkedin.com/" />
-                                                </div>
-
-                                                <div className="form-group">
-                                                    <label htmlFor="we">Website URL:</label>
-                                                    <input type="text" className="form-control" id="we"
-                                                           value="https://yourwebsite.com" />
-                                                </div>
-                                                <button type="submit" className="btn btn-primary">Save & Update</button>
-                                            </form>
+                                <div className="card-body">
+                                    <div className="tab tab-vertical">
+                                        <ul className="nav nav-tabs" role="tablist">
+                                            <>
+                                                {Object.entries(settingsObject).map(([key, value]) => (
+                                                    <li className="nav-item">
+                                                    <a className={`nav-link ${value.active}`}
+                                                        id={key} data-bs-toggle="pill"
+                                                        data-bs-target={`#${value.controls}`}
+                                                        type="button" role="tab"
+                                                        aria-controls={value.controls}
+                                                        aria-selected="true">{value.title}</a>
+                                                    </li>
+                                                ))}
+                                            </>
+                                        </ul>
+                                        <div className="tab-content">
+                                            <>
+                                                {Object.entries(settingsObject).map(([key, value]) => (
+                                                    <div className={`tab-pane fade  ${value.active}`}
+                                                        id={value.controls} role="tabpanel"
+                                                        aria-labelledby={key}>
+                                                        <GeneralTab name={value.title} data={value.data} />
+                                                    </div>
+                                                ))}
+                                            </>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                </>
             </div>
-
         </>
     )
 }

src/component/product/ProductFactory.jsx

@@ -1,39 +1,34 @@
-import React, {useState} from "react";
 import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
 import { useLocation } from 'react-router-dom';
-import {MyProductData, productData} from "../../services/services";
-import queryKeys from "../../services/queryKeys";
+import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
+import queryKeys from "../../services/queryKeys";
 
 export default function ProductFactory(){
     const location = useLocation();
     const pathname = location.pathname;
-    const [productStatus, setProductStatus] = useState(0);
-
-    //productConst.PRODUCT_ACTIVE
-
 
     // Split the pathname by '/' and get the last element
-    const lastPart = pathname.split('/').pop();
-    // console.log(lastPart)
+    const productID = pathname.split('/').pop();
 
+    let reqData = {
+        product_id : productID,
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.product,
-        queryFn: () => MyProductData(lastPart)
+        queryKey: queryKeys.product_page,
+        queryFn: () => MyProductData(reqData),
+        staleTime: 0
     })
 
-
-
-    const myproduct_data = data?.data?.myproduct_data
-    //setProductStatus(myproduct_data?.status)
-
+    const myproduct_data = data?.data?.myproduct?.myproudct // PRODUCT DETAILS
     const product_name =  myproduct_data?.product_name;
-
     const product_status  = myproduct_data?.status;
 
     return(
@@ -51,24 +46,23 @@ export default function ProductFactory(){
                     : isError ?
                         <div className="row">
                             <div className="col-12">
-                                <p className='text-danger'>{error.message}</p>
+                                <p className='text-danger'>{error?.message}</p>
                             </div>
                         </div>
-                        :
-                <div>
-                    {(product_status <= productConst.PRODUCT_AVAILABLE)?
-                        <ProductStart productData={myproduct_data} />
-                        :<></> }
+                    :
+                    <div>
+                        {(product_status <= productConst.PRODUCT_AVAILABLE)?
+                            <ProductStart productData={myproduct_data} />
+                            :<></> }
 
-                     {(product_status === productConst.PRODUCT_PROVISIONING)?
-                        <ProductProvision productData={myproduct_data} />
-                        :<></> }
+                        {(product_status === productConst.PRODUCT_PROVISIONING)?
+                            <ProductProvision productData={myproduct_data} />
+                            :<></> }
 
-                    {(product_status === productConst.PRODUCT_ACTIVE)?
-                        <ProductActive productData={myproduct_data} />
-                        :<></> }
-
-                </div>
+                        {(product_status === productConst.PRODUCT_ACTIVE)?
+                            <ProductActive productData={myproduct_data} />
+                            :<></> }
+                    </div>
                }
             </div>
         </>

src/component/product/ProductProvision.jsx

@@ -25,7 +25,7 @@ export default function ProductProvision(props){
         queryFn: () => productProvision(reqData)
     })
 
-    const provisionData = provision?.data?.provision
+    const provisionData = provision?.data
 
     useEffect(()=>{
         joinRoom(productSubUID); // provision subscription room
@@ -60,7 +60,7 @@ export default function ProductProvision(props){
                                     <div className="card-body">
                                         <div className="progress">
                                             <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
-                                            aria-valuenow={`${provisionData.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData.percent_completed}%`}} ></div>
+                                            aria-valuenow={`${provisionData?.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData?.percent_completed}%`}} ></div>
                                         </div>
                                 </div>
                             </div>
@@ -110,11 +110,9 @@ export default function ProductProvision(props){
                             <div className="card card-statistics ">
                                 <h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
                                 <img className="card-img-top" src={getImage('widget/working.jpg')}  alt="Card image cap" />
-                                <div className="card-body">
-                                <p>
-                                    {productDescription}
-                                </p>
-                                </div>
+                                {/* <div className="card-body">
+                                    <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
+                                </div> */}
                             </div>
 
                         </div>

src/component/product/ProductStart.jsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
+import {useNavigate} from 'react-router-dom'
 import getImage from "../../utils/getImage";
-// import { Modal } from "bootstrap";
+import { Modal } from "bootstrap";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { subscribe } from '../../services/services'
 import queryKeys from "../../services/queryKeys";
@@ -8,24 +9,28 @@ import queryKeys from "../../services/queryKeys";
 export default function ProductStart(props){
 
     const queryClient = useQueryClient()
+    const navigate = useNavigate()
 
     const [requestStatus, setRequestStatus] = useState({status:false, message: ''})
-
     const product_uid = props?.productData?.product_uid;
     const product_id = props?.productData?.product_id;
-    const productBanner = "product/"+props.productData?.banner;
-    const productTitle  = props.productData?.title;
-    const productDescription  = props.productData?.description;
-    const promotion_text  = props.productData?.promotion_text;
-    const product_status  = props.productData?.status;
-    const modalRef = useRef()
+    const productBanner = `product/${props.productData?.banner}`;
+    const productTitle  = props?.productData?.title;
+    const productDescription  = props?.productData?.description;
+    const promotion_text  = props?.productData?.promotion_text;
+    const product_status  = props?.productData?.status;
+    const saleText  = props?.productData?.sale_text;
 
-    const refetch = () => {
-        queryClient.refetchQueries({
-            queryKey: [...queryKeys.product],
-            // type: 'active',
-            // exact: true,
-        })
+    const modalRef = useRef(null)
+
+    const invalidate = () => {
+        // queryClient.refetchQueries({
+        //     queryKey: [...queryKeys.product],
+        //     // type: 'active',
+        //     // exact: true,
+        // })
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.product_url] })
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.product_page] })
     }
 
     const mutation = useMutation({
@@ -38,9 +43,12 @@ export default function ProductStart(props){
         },
           onSuccess: (res) => {
             setRequestStatus({status:true, message:'successful'})
+            navigate(`/product/${product_id}`, {replace: true}) //'/product/'+ product_id
+            dismissModal()
             console.log(res)
         },
         onSettled: () => {
+            invalidate() // Invalidates selected queries
             setTimeout(()=>{
                 setRequestStatus({status:false, message:''})
             },4000)
@@ -51,6 +59,22 @@ export default function ProductStart(props){
         mutation.mutate({product_id: product_id})
     }
 
+    const dismissModal = () => {
+        const body = document.querySelector('body')
+        body.removeAttribute('style')
+        // body.classList.toggle('modal-open')
+
+        const modalBackdrop = document.querySelectorAll('.modal-backdrop')
+        modalBackdrop.forEach(item => {
+            if (item) {
+                item.remove();
+            }
+        })
+        
+        const modal = Modal.getInstance(modalRef.current);
+        modal && modal.hide();
+    };
+
     return (
         <>
             <div className="row">
@@ -59,7 +83,8 @@ export default function ProductStart(props){
                         <img className="card-img-top" src={getImage(productBanner)}  alt="Card image cap" />
                         <div className="card-body">
                             <h4 className="card-title">{productTitle}</h4>
-                            <p className="card-text">{productDescription}</p>
+                            <div className="card-text" dangerouslySetInnerHTML={{__html: productDescription}}/>
+                            {/* <p className="card-text">{productDescription}</p> */}
                         </div>
                     </div>
                 </div>
@@ -110,21 +135,12 @@ export default function ProductStart(props){
                     <div className="modal-content">
                         <div className="modal-header">
                             <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
-                            <button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
                         <div className="modal-body">
-                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-                                in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at
-                                eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                            </p>
-                            <p>
-                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia
-                                bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque
-                                nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                                fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-                            </p>
+                            <div className="" dangerouslySetInnerHTML={{__html: saleText}}/>
                             {/* {mutation.error &&
                             <>
                                 <div className="col-12">
@@ -146,7 +162,7 @@ export default function ProductStart(props){
                             )}
                         </div>
                         <div className="modal-footer">
-                            <button onClick={refetch} type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                             <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
                         </div>
                     </div>

src/component/product/_PA.jsx

@@ -0,0 +1,278 @@
+import React from "react";
+import getImage from "../../utils/getImage";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+
+
+export default function ProductActive(){
+
+    return(
+        <>
+            {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
+            {/*<div className="row">*/}
+            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+            {/*</div>*/}
+
+
+            <div className="row account-contant">
+<>
+
+
+    <div className="row tabs-contant">
+        <div className="col-xxl-6">
+            <div className="card card-statistics">
+                <div className="card-header">
+                    <div className="card-heading">
+                        <h4 className="card-title">https://25681.devprov.mermsemr.com/</h4>
+                    </div>
+                </div>
+                <div className="card-body">
+                    <iframe style={{borderWidth: '0px;'}} src="https://25681.devprov.mermsemr.com/" width="100%" height="600" title="https://25681.devprov.mermsemr.com"></iframe>
+
+                </div>
+            </div>
+        </div>
+        <div className="col-xxl-6">
+            <div className="card card-statistics">
+                <div className="card-header">
+                    <div className="card-heading">
+                        <h4 className="card-title"> Site Settings </h4>
+                    </div>
+                </div>
+                <div className="card-body">
+                    <div className="tab tab-vertical">
+                        <ul className="nav nav-tabs" role="tablist">
+                            <li className="nav-item">
+                                <a className="nav-link active show" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">General</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Home Page</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="profile-09-tab" data-toggle="tab" href="#profile-09" role="tab" aria-controls="profile-09" aria-selected="false"> Footer </a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="portfolio-09-tab" data-toggle="tab" href="#portfolio-09" role="tab" aria-controls="portfolio-09" aria-selected="false">About Page </a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="contact-09-tab" data-toggle="tab" href="#contact-09" role="tab" aria-controls="contact-09" aria-selected="false"> Contact Page</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Socials</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Template</a>
+                            </li>
+                            <li className="nav-item">
+                                <a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true"> Color Scheme</a>
+                            </li>
+                        </ul>
+                        <div className="tab-content">
+                            <div className="tab-pane fade active show" id="home-09" role="tabpanel" aria-labelledby="home-09-tab">
+
+                                    <div className="page-account-form">
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+
+                            </div>
+                            <div className="tab-pane fade" id="profile-09" role="tabpanel" aria-labelledby="profile-09-tab">
+                                    <div className="page-account-form">
+
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+                            </div>
+                            <div className="tab-pane fade" id="portfolio-09" role="tabpanel" aria-labelledby="portfolio-09-tab">
+                                <p>
+                                    <div className="page-account-form">
+                                        <div className="form-titel border-bottom p-3">
+                                            <h5 className="mb-0 py-2">Edit Your Product Settings</h5>
+                                        </div>
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </p>                            </div>
+                            <div className="tab-pane fade" id="contact-09" role="tabpanel" aria-labelledby="contact-09-tab">
+                                <p>
+                                    <div className="page-account-form">
+                                        <div className="form-titel border-bottom p-3">
+                                            <h5 className="mb-0 py-2">Edit Your Product Settings</h5>
+                                        </div>
+                                        <div className="p-4">
+                                            <form>
+                                                <div className="form-row">
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Full Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Alice Williams" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="title1">Title</label>
+                                                        <input type="text" className="form-control" id="title1"
+                                                               value="Marketing expert" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="phone1">Phone Number</label>
+                                                        <input type="text" className="form-control" id="phone1"
+                                                               value="(01) 97 563 15613" />
+                                                    </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="email1">Email</label>
+                                                        <input type="email" className="form-control" id="email1"
+                                                               value="alicewilliams@gmail.com" />
+                                                    </div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add1">Address</label>
+                                                    <input type="text" className="form-control" id="add1"
+                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label htmlFor="add2">Address 2</label>
+                                                    <input type="text" className="form-control" id="add2"
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                                                </div>
+
+
+                                                <button type="submit" className="btn btn-primary">Update Information
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+</>
+
+
+
+
+
+            </div>
+
+        </>
+    )
+}

src/component/product/settingsTab/GeneralTab.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+export default function GeneralTab({name='Full Name'}) {
+  return (
+    <div className="page-account-form">
+        <div className="p-0">
+            <form>
+                <h4>{name}</h4>
+                <div className="form-row">
+                    <div className="form-group col-md-12">
+                        <label htmlFor="name1">Full Name</label>
+                        <input type="text" className="form-control" id="name1"
+                                value="Alice Williams" />
+                    </div>
+                    <div className="form-group col-md-12">
+                        <label htmlFor="title1">Title</label>
+                        <input type="text" className="form-control" id="title1"
+                                value="Marketing expert" />
+                    </div>
+                    <div className="form-group col-md-12">
+                        <label htmlFor="phone1">Phone Number</label>
+                        <input type="text" className="form-control" id="phone1"
+                                value="(01) 97 563 15613" />
+                    </div>
+                    <div className="form-group col-md-12">
+                        <label htmlFor="email1">Email</label>
+                        <input type="email" className="form-control" id="email1"
+                                value="alicewilliams@gmail.com" />
+                    </div>
+                </div>
+                <div className="form-group">
+                    <label htmlFor="add1">Address</label>
+                    <input type="text" className="form-control" id="add1"
+                            value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+                </div>
+                <div className="form-group">
+                    <label htmlFor="add2">Address 2</label>
+                    <input type="text" className="form-control" id="add2"
+                            value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+                </div>
+
+
+                <button type="submit" className="btn btn-primary">Update Information
+                </button>
+            </form>
+        </div>
+    </div>
+  )
+}

src/component/settings/Settings.jsx

@@ -15,7 +15,7 @@ export default function Settings(){
             <div className="row account-contant">
                 <div className="col-12">
                     <div className="card card-statistics">
-                        <div className="card-body p-0">
+                        <div className="card-body p-0" style={{backgroundColor:"#f9f9fb"}}>
                             <div className="row no-gutters">
                                 <div className="col-xl-3 pb-xl-0 pb-5 border-right">
                                     <div className="page-account-profil pt-5">
@@ -62,9 +62,9 @@ export default function Settings(){
                                                 <button className="btn btn-light text-primary mb-2">Upload New Avatar
                                                 </button>
                                             </div>
-                                            <div>
-                                                <button className="btn btn-danger">Delete</button>
-                                            </div>
+                                            {/*<div>*/}
+                                            {/*    <button className="btn btn-danger">Delete</button>*/}
+                                            {/*</div>*/}
                                         </div>
                                     </div>
                                 </div>
@@ -77,15 +77,25 @@ export default function Settings(){
                                             <form>
                                                 <div className="form-row">
                                                     <div className="form-group col-md-12">
-                                                        <label htmlFor="name1">Full Name</label>
+                                                        <label htmlFor="name1">First Name</label>
                                                         <input type="text" className="form-control" id="name1"
-                                                               value="Alice Williams" />
+                                                               value="Alice" />
                                                     </div>
                                                     <div className="form-group col-md-12">
-                                                        <label htmlFor="title1">Title</label>
-                                                        <input type="text" className="form-control" id="title1"
-                                                               value="Marketing expert" />
+                                                        <label htmlFor="name1">Last Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="Williams" />
                                                     </div>
+                                                    <div className="form-group col-md-12">
+                                                        <label htmlFor="name1">Account Name</label>
+                                                        <input type="text" className="form-control" id="name1"
+                                                               value="This is the best hospital name" />
+                                                    </div>
+                                                    {/*<div className="form-group col-md-12">*/}
+                                                    {/*    <label htmlFor="title1">Email</label>*/}
+                                                    {/*    <input type="text" className="form-control" id="title1"*/}
+                                                    {/*           value="email@email.com" />*/}
+                                                    {/*</div>*/}
                                                     <div className="form-group col-md-12">
                                                         <label htmlFor="phone1">Phone Number</label>
                                                         <input type="text" className="form-control" id="phone1"
@@ -108,135 +118,47 @@ export default function Settings(){
                                                            value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
                                                 </div>
 
-                                                <div className="form-row">
-                                                    <div className="col-12">
-                                                        <label className="mb-1">Birthday</label>
-                                                    </div>
-                                                    <div className="form-group col-md-4">
-                                                        <select id="inputState" className="form-control">
-                                                            <option>Date</option>
-                                                            <option>01</option>
-                                                            <option>02</option>
-                                                            <option>03</option>
-                                                            <option>04</option>
-                                                            <option>05</option>
-                                                            <option>06</option>
-                                                            <option>07</option>
-                                                            <option>08</option>
-                                                            <option>09</option>
-                                                            <option>10</option>
-                                                            <option selected="">11</option>
-                                                            <option>12</option>
-                                                            <option>13</option>
-                                                            <option>14</option>
-                                                            <option>15</option>
-                                                            <option>16</option>
-                                                            <option>17</option>
-                                                            <option>18</option>
-                                                            <option>19</option>
-                                                            <option>20</option>
-                                                            <option>21</option>
-                                                            <option>22</option>
-                                                            <option>23</option>
-                                                            <option>24</option>
-                                                            <option>25</option>
-                                                            <option>26</option>
-                                                            <option>27</option>
-                                                            <option>28</option>
-                                                            <option>29</option>
-                                                            <option>30</option>
-                                                            <option>31</option>
-                                                        </select>
-                                                    </div>
-                                                    <div className="form-group col-md-4">
-                                                        <select id="inputState1" className="form-control">
-                                                            <option>Month</option>
-                                                            <option>January</option>
-                                                            <option>February</option>
-                                                            <option>March</option>
-                                                            <option>April</option>
-                                                            <option selected="">May</option>
-                                                            <option>June</option>
-                                                            <option>July</option>
-                                                            <option>August</option>
-                                                            <option>September</option>
-                                                            <option>October</option>
-                                                            <option>November</option>
-                                                            <option>December</option>
-                                                        </select>
-                                                    </div>
+                                                {/*<div className="form-row">*/}
+                                                {/*    <div className="form-group col-md-4">*/}
+                                                {/*        <label htmlFor="inputState3">City</label>*/}
+                                                {/*        <select id="inputState3" className="form-control">*/}
+                                                {/*            <option>Choose...</option>*/}
+                                                {/*            <option selected="">London</option>*/}
+                                                {/*            <option>Montreal</option>*/}
+                                                {/*            <option>Delhi</option>*/}
+                                                {/*            <option>Tokyo</option>*/}
+                                                {/*        </select>*/}
+                                                {/*    </div>*/}
+                                                {/*    <div className="form-group col-md-4">*/}
+                                                {/*        <label htmlFor="inputState4">State</label>*/}
+                                                {/*        <select id="inputState4" className="form-control">*/}
+                                                {/*            <option>Choose...</option>*/}
+                                                {/*            <option selected="">England</option>*/}
+                                                {/*            <option>California</option>*/}
+                                                {/*            <option>Texas</option>*/}
+                                                {/*            <option>Scotland</option>*/}
+                                                {/*        </select>*/}
+                                                {/*    </div>*/}
+                                                {/*    <div className="form-group col-md-4">*/}
+                                                {/*        <label htmlFor="inputZip">Zip</label>*/}
+                                                {/*        <input type="text" className="form-control" id="inputZip"*/}
+                                                {/*               value="EC1A 1BB" />*/}
+                                                {/*    </div>*/}
+                                                {/*</div>*/}
+                                                {/*<div className="form-group">*/}
+                                                {/*    <div className="form-check">*/}
+                                                {/*        <input className="form-check-input" type="checkbox"*/}
+                                                {/*               id="gridCheck" />*/}
+                                                {/*            <label className="form-check-label" htmlFor="gridCheck">*/}
+                                                {/*                I agree to receive email notification.*/}
+                                                {/*            </label>*/}
+                                                {/*    </div>*/}
+                                                {/*</div>*/}
+                                                <div style={{textAlign:"right"}}>
+                                                    <button type="submit" className="btn btn-primary">Update Profile
+                                                    </button>
+                                                </div>
 
-                                                    <div className="form-group col-md-4">
-                                                        <select id="inputState2" className="form-control">
-                                                            <option>Year</option>
-                                                            <option>1984</option>
-                                                            <option>1985</option>
-                                                            <option>1986</option>
-                                                            <option>1987</option>
-                                                            <option>1988</option>
-                                                            <option>1989</option>
-                                                            <option>1990</option>
-                                                            <option>1991</option>
-                                                            <option>1992</option>
-                                                            <option>1993</option>
-                                                            <option selected="">1994</option>
-                                                            <option>1995</option>
-                                                            <option>1996</option>
-                                                            <option>1997</option>
-                                                            <option>1998</option>
-                                                            <option>1999</option>
-                                                            <option>2000</option>
-                                                            <option>2001</option>
-                                                            <option>2002</option>
-                                                            <option>2003</option>
-                                                            <option>2004</option>
-                                                            <option>2005</option>
-                                                            <option>2006</option>
-                                                            <option>2007</option>
-                                                            <option>2008</option>
-                                                            <option>2009</option>
-                                                            <option>2010</option>
-                                                        </select>
-                                                    </div>
-                                                </div>
-                                                <div className="form-row">
-                                                    <div className="form-group col-md-4">
-                                                        <label htmlFor="inputState3">City</label>
-                                                        <select id="inputState3" className="form-control">
-                                                            <option>Choose...</option>
-                                                            <option selected="">London</option>
-                                                            <option>Montreal</option>
-                                                            <option>Delhi</option>
-                                                            <option>Tokyo</option>
-                                                        </select>
-                                                    </div>
-                                                    <div className="form-group col-md-4">
-                                                        <label htmlFor="inputState4">State</label>
-                                                        <select id="inputState4" className="form-control">
-                                                            <option>Choose...</option>
-                                                            <option selected="">England</option>
-                                                            <option>California</option>
-                                                            <option>Texas</option>
-                                                            <option>Scotland</option>
-                                                        </select>
-                                                    </div>
-                                                    <div className="form-group col-md-4">
-                                                        <label htmlFor="inputZip">Zip</label>
-                                                        <input type="text" className="form-control" id="inputZip"
-                                                               value="EC1A 1BB" />
-                                                    </div>
-                                                </div>
-                                                <div className="form-group">
-                                                    <div className="form-check">
-                                                        <input className="form-check-input" type="checkbox"
-                                                               id="gridCheck" />
-                                                            <label className="form-check-label" htmlFor="gridCheck">
-                                                                I agree to receive email notification.
-                                                            </label>
-                                                    </div>
-                                                </div>
-                                                <button type="submit" className="btn btn-primary">Update Information
-                                                </button>
                                             </form>
                                         </div>
                                     </div>
@@ -282,7 +204,10 @@ export default function Settings(){
                                                     <input type="text" className="form-control" id="we"
                                                            value="https://yourwebsite.com" />
                                                 </div>
-                                                <button type="submit" className="btn btn-primary">Save & Update</button>
+                                                <div style={{textAlign:"right"}}>
+                                                    <button type="submit" className="btn btn-primary">Update Links</button>
+                                                </div>
+
                                             </form>
                                         </div>
                                     </div>

src/component/users/Users.jsx

@@ -53,172 +53,172 @@ export default function Users(){
                             </div>
                         </div>
                     </div>
-                    <div className="col-xxl-3 col-xl-4 col-sm-6">
-                        <div className="card card-statistics contact-contant">
-                            <div className="card-body py-4">
-                                <div className="d-flex align-items-center">
-                                    <div className="bg-img">
-                                        <img src="assets/img/avtar/02.jpg" alt="" className="img-fluid" />
-                                    </div>
-                                    <div className="ml-3">
-                                        <h4 className="mb-0">Samuel Woods</h4>
-                                        <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon">
-                                                <div className="img-icon"><i className="fa fa-mobile"></i></div>
-                                            </div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>026-123-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-phone"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>80-1230-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-envelope-o"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>Samuel.Woods@gmail.com</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-xxl-3 col-xl-4  col-sm-6">
-                        <div className="card card-statistics contact-contant">
-                            <div className="card-body py-4">
-                                <div className="d-flex align-items-center">
-                                    <div className="bg-img">
-                                        <img src="assets/img/avtar/03.jpg" alt="" className="img-fluid" />
-                                    </div>
-                                    <div className="ml-3">
-                                        <h4 className="mb-0">Garettdon</h4>
-                                        <p><span className="badge badge-primary-inverse px-2 py-1 mt-1">Office</span></p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-mobile"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>026-123-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-phone"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>80-1230-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-envelope-o"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>Garettdon@gmail.com</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-xxl-3 col-xl-4  col-sm-6">
-                        <div className="card card-statistics contact-contant">
-                            <div className="card-body py-4">
-                                <div className="d-flex align-items-center">
-                                    <div className="bg-img">
-                                        <img src="assets/img/avtar/04.jpg" alt="" className="img-fluid" />
-                                    </div>
-                                    <div className="ml-3">
-                                        <h4 className="mb-0">Garynice</h4>
-                                        <p><span className="badge badge-warning-inverse px-2 py-1 mt-1">Home</span></p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-mobile"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>026-123-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-phone"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>80-1230-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-envelope-o"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>Garynice@gmail.com</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-xxl-3 col-xl-4  col-sm-6">
-                        <div className="card card-statistics contact-contant">
-                            <div className="card-body py-4">
-                                <div className="d-flex align-items-center">
-                                    <div className="bg-img">
-                                        <img src="assets/img/avtar/05.jpg" alt="" className="img-fluid" />
-                                    </div>
-                                    <div className="ml-3">
-                                        <h4 className="mb-0">Andrew nico</h4>
-                                        <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>
-                                    </div>
-                                </div>
-                                <div>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-mobile"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>026-123-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-phone"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>80-1230-8546</p>
-                                        </li>
-                                    </ul>
-                                    <ul className="nav">
-                                        <li className="nav-item">
-                                            <div className="img-icon"><i className="fa fa-envelope-o"></i></div>
-                                        </li>
-                                        <li className="nav-item">
-                                            <p>Andrew.nico@gmail.com</p>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    {/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
+                    {/*    <div className="card card-statistics contact-contant">*/}
+                    {/*        <div className="card-body py-4">*/}
+                    {/*            <div className="d-flex align-items-center">*/}
+                    {/*                <div className="bg-img">*/}
+                    {/*                    <img src="assets/img/avtar/02.jpg" alt="" className="img-fluid" />*/}
+                    {/*                </div>*/}
+                    {/*                <div className="ml-3">*/}
+                    {/*                    <h4 className="mb-0">Samuel Woods</h4>*/}
+                    {/*                    <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>*/}
+                    {/*                </div>*/}
+                    {/*            </div>*/}
+                    {/*            <div>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon">*/}
+                    {/*                            <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
+                    {/*                        </div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>026-123-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>80-1230-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>Samuel.Woods@gmail.com</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*            </div>*/}
+                    {/*        </div>*/}
+                    {/*    </div>*/}
+                    {/*</div>*/}
+                    {/*<div className="col-xxl-3 col-xl-4  col-sm-6">*/}
+                    {/*    <div className="card card-statistics contact-contant">*/}
+                    {/*        <div className="card-body py-4">*/}
+                    {/*            <div className="d-flex align-items-center">*/}
+                    {/*                <div className="bg-img">*/}
+                    {/*                    <img src="assets/img/avtar/03.jpg" alt="" className="img-fluid" />*/}
+                    {/*                </div>*/}
+                    {/*                <div className="ml-3">*/}
+                    {/*                    <h4 className="mb-0">Garettdon</h4>*/}
+                    {/*                    <p><span className="badge badge-primary-inverse px-2 py-1 mt-1">Office</span></p>*/}
+                    {/*                </div>*/}
+                    {/*            </div>*/}
+                    {/*            <div>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>026-123-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>80-1230-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>Garettdon@gmail.com</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*            </div>*/}
+                    {/*        </div>*/}
+                    {/*    </div>*/}
+                    {/*</div>*/}
+                    {/*<div className="col-xxl-3 col-xl-4  col-sm-6">*/}
+                    {/*    <div className="card card-statistics contact-contant">*/}
+                    {/*        <div className="card-body py-4">*/}
+                    {/*            <div className="d-flex align-items-center">*/}
+                    {/*                <div className="bg-img">*/}
+                    {/*                    <img src="assets/img/avtar/04.jpg" alt="" className="img-fluid" />*/}
+                    {/*                </div>*/}
+                    {/*                <div className="ml-3">*/}
+                    {/*                    <h4 className="mb-0">Garynice</h4>*/}
+                    {/*                    <p><span className="badge badge-warning-inverse px-2 py-1 mt-1">Home</span></p>*/}
+                    {/*                </div>*/}
+                    {/*            </div>*/}
+                    {/*            <div>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>026-123-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>80-1230-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>Garynice@gmail.com</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*            </div>*/}
+                    {/*        </div>*/}
+                    {/*    </div>*/}
+                    {/*</div>*/}
+                    {/*<div className="col-xxl-3 col-xl-4  col-sm-6">*/}
+                    {/*    <div className="card card-statistics contact-contant">*/}
+                    {/*        <div className="card-body py-4">*/}
+                    {/*            <div className="d-flex align-items-center">*/}
+                    {/*                <div className="bg-img">*/}
+                    {/*                    <img src="assets/img/avtar/05.jpg" alt="" className="img-fluid" />*/}
+                    {/*                </div>*/}
+                    {/*                <div className="ml-3">*/}
+                    {/*                    <h4 className="mb-0">Andrew nico</h4>*/}
+                    {/*                    <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>*/}
+                    {/*                </div>*/}
+                    {/*            </div>*/}
+                    {/*            <div>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>026-123-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>80-1230-8546</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*                <ul className="nav">*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
+                    {/*                    </li>*/}
+                    {/*                    <li className="nav-item">*/}
+                    {/*                        <p>Andrew.nico@gmail.com</p>*/}
+                    {/*                    </li>*/}
+                    {/*                </ul>*/}
+                    {/*            </div>*/}
+                    {/*        </div>*/}
+                    {/*    </div>*/}
+                    {/*</div>*/}
                     <div className="col-xxl-3 col-xl-4  col-sm-6">
                         <div className="card card-statistics contact-contant">
                             <div className="card-body py-4">

src/css/mail/_mail.scss

@@ -85,7 +85,13 @@
 }
 
 .mail-contant .mail-f{
-	position: absolute;
+	position: relative;
 	width: 100%;
 	bottom: 0;
+	@include desktop {
+		position: absolute;
+	}
+	@include desktop-lg {
+		position: absolute;
+	}
 }

src/css/partials/_header.scss

@@ -588,11 +588,16 @@
                     left: 0px;
                 }
             }
-            .show + .dropdown-menu{
-                margin-top: 0;
-                visibility: visible;
-                opacity: 1;
+            .show{
+                margin-top: 0!important;
+                visibility: visible!important;
+                opacity: 1!important;
             }
+            // .show + .dropdown-menu{
+            //     margin-top: 0;
+            //     visibility: visible;
+            //     opacity: 1;
+            // }
             // .show {
             //     .dropdown-menu{
             //         margin-top: 0;

src/css/partials/_layout.scss

@@ -10,6 +10,7 @@ body {
     outline:0;
     background:$body;
     color:$muted;
+    font-weight: $font-regular;
     &.sidebar-mini {
         .app-main {
             padding-left:$sidebar-mini;

src/css/partials/_typography.scss

@@ -39,8 +39,7 @@ h6 {
 
 p {
 	color: $muted;
-	font-weight: $font-regular;
-	font-size: $font-base;
+	font-size: $font-18;
 	line-height: $line-md;
 }
 a {

src/css/partials/_variables.scss

@@ -35,13 +35,13 @@ $container-max-widths: (
 
 // Colors
 $body 	  		: #f9f9fb;
-$primary  		: #8E54E9;
+$primary  		: #148399; //#8E54E9;
 $primary2		  : #4776E6;
 $secondary    : #a1a1a1;
 $light-gray		: #eceef3;
 $dark-gray		: #2c2e3e;
 $darker-gray  : #333333;
-$muted 			  : #a6a9b7;
+$muted 			  : #6c757d; //#a6a9b7;
 $info			    : #45aaf2;
 $danger			  : #e3324c;
 $cyan			    : #2bcbba;
@@ -75,7 +75,7 @@ $behance      : #053eff;
 $whatsapp     : #4FCE5D;
 
 // Font family
-$font-primary	: 'Roboto', sans-serif;
+$font-primary	: 'Plus Jakarta Sans', sans-serif;
 
 //Font size
 

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 // import './index.css';
-import { Provider } from 'react-redux';
+// import { Provider } from 'react-redux';
+// import store from './store/store'
 import { BrowserRouter } from 'react-router-dom';
-import store from './store/store'
 
 import App from './App';
 //import reportWebVitals from './reportWebVitals';
@@ -17,9 +17,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <Provider store={store}>
-        <App />
-      </Provider>
+      <App />
     </BrowserRouter>
   </React.StrictMode>
 );

src/links/siteLinks.js

@@ -1,5 +1,6 @@
 const siteLinks = {
     error: '*',
+    help: '/help',
     home: '/',
     dash: '/dash',
     product: '/product/*',

src/services/queryKeys.js

@@ -1,12 +1,13 @@
 const queryKeys = {
     user_details: ['user_details'],
+    product_url: ['product_url'],
+    products: ['product-data'],
+    myproduct_provision: ['myproduct_provision'],
+    product_page: ['product_page'],
+    recentAction: ['recent-action'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],
-    recentAction: ['recent-action'],
-    product: ['product-data'],
-    product_url: ['product_url'],
-    myproduct_provision: ['myproduct_provision'],
     calendar_events: ['calendar_events'],
     contacts: ['contacts']
 }

src/services/services.js

@@ -43,7 +43,7 @@ const getAuxEnd = (path, reqData= null) => {
     })
 }
 
-// FUNCTION TO LOGIN USER IN
+// FUNCTION TO AUTHORIZE USER IN
 export const userToken = (reqData) => {
     let postData = {
         ...reqData
@@ -67,15 +67,77 @@ export const userInfo = (reqData) => {
     return postAuxEnd('/panel/account', postData, false)
 }
 
+// FUNCTION TO GET DASHBOARD TOP BAR SECTION
+export const topBar = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/bar`, postData, false)
+}
+
+// FUNCTION TO GET PRODUCT BY ID
+export const MyProductData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/dash`, postData, false)
+}
+
+// FUNCTION TO GET CALENDAR EVENTS
+export const getCalendarEvents = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/calendar`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
-export const productData = () => {
-     let postData = {
-        "token":"b",
-        "uid": 'h'
+export const contactData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/contacts`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
+export const productsURL = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/url`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
+export const productsData = (reqData) => {
+    let postData = {
+        ...reqData,
     }
     return postAuxEnd(`/panel/account/products`, postData, false)
 }
 
+// FUNCTION TO REFRESH SITE
+export const productRefreshSite = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/refresh`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
+export const recentActions = (reqData) => {
+    let postData = {
+        ...reqData,
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+    //return getAuxEnd(`/panel/account/actions`)
+    return postAuxEnd(`/panel/account/actions`, postData, false)
+}
+
+
+
+
+
 
 
 
@@ -85,7 +147,7 @@ export const signUpUser = (reqData) => {
     let postData = {
         ...reqData
     }
-    return postAuxEnd('/panel/auth/register', postData, false)
+    return postAuxEnd('/panel/Register', postData, false)
 }
 
 // FUNCTION TO VERIFY EMAIL
@@ -93,7 +155,7 @@ export const verifyEmail = (reqData) => {
     let postData = {
         ...reqData
     }
-    return postAuxEnd('/panel/auth/register/verify', postData, false)
+    return postAuxEnd('/panel/Register/verify', postData, false)
 }
 
 // FUNCTION TO COMPLETE REGISTRATION
@@ -101,15 +163,17 @@ export const completeRegistration = (reqData) => {
     let postData = {
         ...reqData
     }
-    return postAuxEnd('/panel/auth/register/complete', postData, false)
+    return postAuxEnd('/panel/Register/complete', postData, false)
 }
 
 // FUNCTION TO SUBSCRIBE
 export const subscribe = (reqData) => {
     let postData = {
-        ...reqData
+        ...reqData,
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
     }
-    return postAuxEnd('/panel/myproduct/subscription', postData, false)
+    return postAuxEnd(`/panel/myproduct/subscription`, postData, false)
 }
 
 
@@ -121,52 +185,14 @@ export const recoverPWD = (reqData) => {
     return postAuxEnd('/panel/auth/reset', postData, false)
 }
 
-// FUNCTION TO GET DASHBOARD TOP BAR SECTION
-export const topBar = (reqData) => {
-    let postData = {
-        ...reqData,
-        // "token":"there-will-be-token",
-        // "uid": "there-will-be-uid"
-    }
-    return postAuxEnd(`/panel/account/bar`, postData, false)
-}
-
-// FUNCTION TO GET CALENDAR EVENTS
-export const getCalendarEvents = () => {
-   // return getAuxEnd(`/panel/account/calendar`)
-    let postData = {
-        "a":"b"
-    }
-    return postAuxEnd(`/panel/account/calendar`, postData, false)
-}
-
-// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
-export const recentActions = () => {
-    //return getAuxEnd(`/panel/account/actions`)
-    let postData = {
-        "a":"b"
-    }
-    return postAuxEnd(`/panel/account/actions`, postData, false)
-}
-
 // FUNCTION TO GET MY PRODUCT PROVISION DATA
 export const productProvision = (reqData) => {
-    const postData = { ...reqData }
-    return getAuxEnd(`/panel/myproduct/provision`, postData)
+    let postData = {
+        ...reqData,
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+    return postAuxEnd(`/panel/myproduct/provision`, postData, false)
+    // return getAuxEnd(`/panel/myproduct/provision`, postData)
 }
 
-// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
-export const contactData = () => {
-    return getAuxEnd(`/panel/contacts`)
-}
-
-// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
-export const productsURL = () => {
-    return getAuxEnd(`/panel/account/products/url`)
-}
-
-export const MyProductData = (productID) => {
-    const reqData = { product_id : productID}
-    //console.log(reqData)
-    return getAuxEnd(`/panel/myproduct/dash`,reqData)
-}

src/utils/getImage.js

@@ -1,6 +1,6 @@
 let getImage = (location) => {
     if (!location) {
-        return require(`../assets/img/logo.png`);
+        return require(`../assets/img/logo-pink.png`);
     } else {
         return require(`../assets/img/${location}`);
     }

src/views/HelpPage.jsx

@@ -0,0 +1,7 @@
+import HelpCom from '../component/help/HelpCom'
+
+export default function HelpPage() {
+  return (
+    <HelpCom />
+  )
+}