fixed iframe bug

.env

@@ -2,14 +2,14 @@ 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://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

@@ -2,14 +2,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://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.js

@@ -12,7 +12,7 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
       retry: 3,
       // refetchOnMount: false,
-      staleTime: 360000 // can also be a number in millisecond
+      staleTime: 10*60*1000 // can also be a number in millisecond
     },
   },
 })

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/calendar/Calendar.jsx

@@ -21,29 +21,37 @@ export default function Calendar(){
     //     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'})
-            }
-        }
-    })
+    // 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(()=>{
+    // 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
     }
-    calendarEvents.mutate(reqData)
-    },[])
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.calendar_events,
+        queryFn: () => getCalendarEvents(reqData)
+    })
 
-    const receievedEvents = calendarEvents?.data?.data
+    const receievedEvents = data?.data
     const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
     const eventList = receievedEvents?.list //EVENT LIST FROM API
 
@@ -84,15 +92,15 @@ export default function Calendar(){
                         </div>
                         <div className="card-body">
                             <div className="row">
-                            {calendarEvents?.isPending ? 
+                            {isFetching ? 
                                 <>
                                     <div className="col-12">
                                         <p className='text-mute'>Loading...</p>
                                     </div>
                                 </>
-                                : calendarEvents?.error ?
+                                : isError ?
                                 <div className="col-12">
-                                    <p className='text-danger'>{calendarEvents?.error?.message}</p>
+                                    <p className='text-danger'>{error?.message}</p>
                                 </div>
                                 :
                                 <>

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/home/Products.jsx

@@ -1,34 +1,22 @@
-import React, {useEffect} from 'react'
-import { useMutation } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 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() {
-    const getProductsData = useMutation({
-        mutationFn: (reqData) => {
-            return productsData(reqData)
-        },
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-        }
-    })
 
-    useEffect(()=>{
-      let reqData = {
+    let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
-      }
-      getProductsData.mutate(reqData)
-    },[])
-    
-    const products = getProductsData?.data?.data?.products_data // PRODUCTS DATA
+    }
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.products,
+        queryFn: () => productsData(reqData)
+    })
+    const products = data?.data?.products_data // PRODUCTS DATA
 
   return (
     <>
@@ -37,7 +25,7 @@ export default function Products() {
                 <h4 className="card-title">My Products</h4>
             </div>
             <div className="card-body pb-0">
-            {getProductsData?.isPending ? 
+            {isFetching ? 
                 <>
                     <div className="row">
                         <div className="col-12">
@@ -45,10 +33,10 @@ export default function Products() {
                         </div>
                     </div>
                 </>
-                : getProductsData?.isPending ?
+                : isError ?
                 <div className="row">
                     <div className="col-12">
-                        <p className='text-danger'>{getProductsData?.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,36 +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)
-    },
-      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">
@@ -38,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/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,6 +34,11 @@ 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">
@@ -66,11 +73,11 @@ 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">
+                                <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">

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,5 +1,4 @@
-import {useEffect} from "react";
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
@@ -8,6 +7,7 @@ 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();
@@ -16,30 +16,18 @@ export default function ProductFactory(){
     // Split the pathname by '/' and get the last element
     const productID = pathname.split('/').pop();
 
-    const getProductData = useMutation({
-        mutationFn: (reqData) => {
-            return MyProductData(reqData)
-        },
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-        }
-    })
-
-    useEffect(()=>{
     let reqData = {
         product_id : productID,
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
     }
-    getProductData.mutate(reqData)
-    },[])
-        
-    const myproduct_data = getProductData?.data?.data?.myproduct?.myproudct // PRODUCT DETAILS
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.product_page,
+        queryFn: () => MyProductData(reqData),
+        staleTime: 0
+    })
+
+    const myproduct_data = data?.data?.myproduct?.myproudct // PRODUCT DETAILS
     const product_name =  myproduct_data?.product_name;
     const product_status  = myproduct_data?.status;
 
@@ -47,7 +35,7 @@ export default function ProductFactory(){
         <>
             <BreadcrumbComBS title={product_name} paths={['Dashboard', 'Product']} />
             <div className="row">
-                {getProductData?.isPending ?
+                {isFetching ?
                     <>
                         <div className="row">
                             <div className="col-12">
@@ -55,27 +43,26 @@ export default function ProductFactory(){
                             </div>
                         </div>
                     </>
-                    : getProductData?.error ?
+                    : isError ?
                         <div className="row">
                             <div className="col-12">
-                                <p className='text-danger'>{getProductData?.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,26 +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 saleText  = props.productData?.sale_text;
-    
-    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({
@@ -40,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)
@@ -53,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">
@@ -113,7 +135,7 @@ 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>
@@ -140,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/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/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

@@ -99,6 +99,30 @@ export const contactData = (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 = {
@@ -110,29 +134,13 @@ export const recentActions = (reqData) => {
     return postAuxEnd(`/panel/account/actions`, 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 GET DASHBOARD PRODUCT URL DATA SECTION
-export const productsURL = (reqData) => {
-    let postData = {
-        ...reqData,
-        token: localStorage.getItem('token'), // USER TOKEN
-        uid: localStorage.getItem('uid') // USER UID
-    }
-    return postAuxEnd(`/panel/account/products/url`, postData, false)
-    // return getAuxEnd(`/panel/account/products/url`)
-}
+
 
 // FUNCTION TO REGISTER USER
 export const signUpUser = (reqData) => {