reloads config settings endpoint on change of product

page c;leanup
Merge branch 'settings-page-sort' of MERMS/MermsPanelReactJS into master
2025-09-05 15:43:35 +01:00 · 2025-09-04 13:57:49 -04:00 · 2025-09-04 17:47:39 +00:00 · 2025-09-04 17:46:47 +01:00 · 2025-09-04 11:52:35 -04:00 · 2025-09-04 11:02:23 +00:00
84 changed files with 3640 additions and 1099 deletions
@@ -1,5 +1,7 @@
-SKIP_PREFLIGHT_CHECK=true 
+REACT_APP_PANEL_NAME="MERMS Panel DEV"
+SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
+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"
@@ -1,7 +1,10 @@
-SKIP_PREFLIGHT_CHECK=true 
+REACT_APP_PANEL_NAME="MERMS Panel DEV"
+SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
+NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MAIN_API_LL="http://localhost:14700"
 REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"

@@ -1,7 +1,9 @@
-SKIP_PREFLIGHT_CHECK=true 
+REACT_APP_PANEL_NAME="MERMS Panel"
+SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="production"
+NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
-REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MAIN_API="https://api.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"

@@ -1,5 +1,7 @@
+REACT_APP_PANEL_NAME="MERMS Panel QA"
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
+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"
@@ -126,10 +126,10 @@ RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
 # add app
  COPY . ./

-# start app
-#  CMD ["npm","run", "start"]
+# start appdpvle
+#CMD ["npm","run", "start"]
 
 # CMD ["yarn", "start"]

 # start app
-  CMD /bin/sh ./run.sh
+ CMD /bin/sh ./run.sh
@@ -10,6 +10,8 @@
    "@fullcalendar/timegrid": "^6.1.15",
    "@popperjs/core": "^2.11.8",
    "@reduxjs/toolkit": "^2.4.0",
+    "@stripe/react-stripe-js": "^3.9.1",
+    "@stripe/stripe-js": "^7.8.0",
    "@tanstack/react-query": "^5.62.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
@@ -33,8 +35,7 @@
  },
  "scripts": {
    "start": "react-scripts start -e .env.development",
-    "build": "react-scripts start -e .env.development",
-    "build_real": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
@@ -1,31 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
    <meta
-      name="description"
-      content="Web site created using create-react-app"
+            name="description"
+            content="Empowering Healthcare Decision-Making with Artificial Intelligence"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
    <title>MERMS-Panel</title>
-  </head>
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y9QSQFV003"></script>
-  <script>
+</head>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-Y9QSQFV003"></script>
+<script>
    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+
+    function gtag() {
+        dataLayer.push(arguments);
+    }
+
    gtag('js', new Date());

    gtag('config', 'G-Y9QSQFV003');
-  </script>
-  <body class="light-sidebar">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-  <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> -->
+</script>
+<body class="light-sidebar">
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+</body>
+<!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> -->
 </html>
@@ -4,12 +4,17 @@ set -x

 export NODE_ENV="${NODE_ENV:-development}"

-if [ $NODE_ENV == "development" ]; then
+if [ $NODE_ENV = "development" ]; then
  # this runs webpack-dev-server with hot reloading
  echo "Development build"
  npm install --legacy-peer-deps
  npm start
  # npm run build
+elif [ $NODE_ENV = "qa" -o $NODE_ENV = "test" ]; then
+  echo "QA build"
+  export NODE_ENV="test"
+  npm install --legacy-peer-deps
+  npm start
 else
  # build the app and serve it via nginx
  echo "Production build"
@@ -1,5 +1,5 @@
 .custom-bg {
-  background-image: url('./assets/bg/bg_1.jpg') !important;
+  background-image: url('./assets/bg/bg_2.jpg') !important;
  background-size: cover;
  background-repeat: no-repeat;
 }
@@ -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
    },
  },
 })
@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom';
+import {Routes, Route} from 'react-router-dom';

 import UserExist from './component/authorization/UserExist';
 import AuthLayout from './component/auth/AuthLayout';
@@ -19,40 +19,53 @@ import ProductPage from './views/ProductPage'
 import SocketIOContextProvider from './component/context/SocketIOContext';
 import CSignupPage from './views/CSignupPage';
 import HelpPage from './views/HelpPage';
+import SubscriptionPage from './views/SubscriptionPage';
+import OnboardPage from "./views/OnboardPage";
+import AccPWDResetPage from './views/AccPWDResetPage';
+import ProfileCompletePage from './views/ProfileCompletePage';
+import SubscribePage from './views/Subscribe'
+import StartPage from "./views/StartPage";

 function AppRouters() {
-  return (
-    <div className="">
-      <Routes>
-        <Route element={<BearerToken />}>
-          {/* auth routes wrapper */}
-          <Route element={<AuthLayout />}>
-            <Route path={siteLinks.home} element={<LoginPage />} />
-            <Route path={siteLinks.login} element={<LoginPage />} />
-            <Route path={siteLinks.signup} element={<SignupPage />} />
-            <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
-            <Route path={siteLinks.csignup} element={<CSignupPage />} />
-            <Route path={siteLinks.error} element={<LoginPage />} />
-          </Route>
+    return (
+        <div className="">
+            <Routes>
+                <Route element={<BearerToken/>}>
+                    {/* auth routes wrapper */}
+                    <Route element={<AuthLayout/>}>
+                        <Route path={siteLinks.home} element={<LoginPage/>}/>
+                        <Route path={siteLinks.login} element={<LoginPage/>}/>
+                        <Route path={siteLinks.signup} element={<SignupPage/>}/>
+                        <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage/>}/>
+                        <Route path={siteLinks.csignup} element={<CSignupPage/>}/>
+                        <Route path={siteLinks.accreset} element={<AccPWDResetPage/>}/>
+                        <Route path={siteLinks.error} element={<LoginPage/>}/>
+                    </Route>

-          {/* protected routes */}
-          <Route element={<SocketIOContextProvider />}>
-            <Route element={<UserExist />}> 
-              <Route path={siteLinks.dash} element={<HomePage />} />
-              <Route path={siteLinks.product} element={<ProductPage />} />
-              <Route path={siteLinks.reports} element={<ReportsPage />} />
-              <Route path={siteLinks.comments} element={<CommentsPage />} />
-              <Route path={siteLinks.contacts} element={<ContactsPage />} />
-              <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>
-      </Routes>
-    </div>
-  );
+                    {/* protected routes */}
+                    <Route element={<SocketIOContextProvider/>}>
+                        <Route element={<UserExist/>}>
+                            <Route path={siteLinks.start} element={<StartPage/>}/>
+                            <Route path={siteLinks.dash} element={<HomePage/>}/>
+                            <Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
+                            <Route path={siteLinks.product} element={<ProductPage/>}/>
+                            <Route path={siteLinks.reports} element={<ReportsPage/>}/>
+                            <Route path={siteLinks.comments} element={<CommentsPage/>}/>
+                            <Route path={siteLinks.contacts} element={<ContactsPage/>}/>
+                            <Route path={siteLinks.user} element={<UserPage/>}/>
+                            <Route path={siteLinks.subscription} element={<SubscriptionPage/>}/>
+                            <Route path={siteLinks.subscription_success} element={<SubscriptionPage/>}/>
+                            <Route path={siteLinks.onboard} element={<OnboardPage/>}/>
+                            <Route path={siteLinks.calendar} element={<CalendarPage/>}/>
+                            <Route path={siteLinks.settings} element={<SettingsPage/>}/>
+                            <Route path={siteLinks.subscribe} element={<SubscribePage/>}/>
+                            <Route path={siteLinks.help} element={<HelpPage/>}/>
+                        </Route>
+                    </Route>
+                </Route>
+            </Routes>
+        </div>
+    );
 }

 export default AppRouters;
@@ -0,0 +1,220 @@
+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 { completePWDReset, verifyResetToken } from '../../services/services';
+import { updateUserDetails } from '../../store/UserDetails'
+
+import { IoMdArrowDropdown } from "react-icons/io";
+import getImage from '../../utils/getImage';
+
+const validationSchema = Yup.object().shape({
+      password: Yup.string().required("Password is required"),
+      confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
+  })
+
+  const initialValues = {
+    password: '',
+    confirmpassword: '',
+  };
+
+export default function AccPWDReset() {
+
+    const {token} = useParams()
+
+    const dispatch = useDispatch()
+
+    const navigate = useNavigate()
+
+    const [user, setUser] = useState(null)
+
+// API to verify email link
+  const verifyLink = useMutation({
+    mutationFn: (fields) => {
+        return verifyResetToken(fields)
+    },
+    onSuccess: (res) => {
+        // console.log('res', res.data)
+        if(res.data.resultCode != '0' || !res?.data?.pending_uid){
+            throw({message: res?.data?.resultDescription})
+        }
+        // setUser({user:'testaccount', ...res.data})
+        setUser(res.data)
+    },
+    // onError: (err) => {
+    //     console.log('err', err)
+    // }
+  })
+
+  const resetPWD = useMutation({
+    mutationFn: (fields) => {
+        return completePWDReset(fields)
+    },
+    onSuccess: (res) => {
+        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)
+    // }
+  })
+  
+  const handleCompletePWDReset = (values) => {
+    let reqData = {
+        reset_token: token,
+        reset_uid: user?.pending_uid,
+        new_password: values.password,
+    }
+    resetPWD.mutate(reqData)
+  }
+
+  useEffect(()=>{
+    if(!token){
+        return navigate(siteLinks.login, {replace: true})
+    }
+    verifyLink.mutate({reset_token: token})
+  }, [])
+
+  return (
+    <div className="app">
+        <div className="app-wrap">
+            <div className="app-contant">
+                <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-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>
+                                    {(verifyLink.isSuccess && !resetPWD.isSuccess) && <p>Complete your password reset</p>}
+                                    <div
+                                    >
+                                        <div className='mt-2'>
+                                            <div className="row">
+                                                {resetPWD.isSuccess ?
+                                                    <>
+                                                        <div className='col-12'>
+                                                            <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
+                                                                <h4 className='p-4 text-black'>Your password reset is completed</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>
+                        
+                                                        <div className="col-12  mt-3">
+                                                            <p>Go <Link to={siteLinks.home}> Back</Link></p>
+                                                        </div>
+                                                    </>
+                                                    :
+                                                    <>
+                                                        {verifyLink.isPending ?
+                                                            <div className='col-12'>
+                                                                <div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                                    <div className="col-12 d-flex flex-column justify-content-center align-items-center">
+                                                                        <p className='text-black'>loading...</p>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            : verifyLink.isSuccess ?
+                                                                <div className='col-12'>
+                                                                    <Formik
+                                                                        initialValues={initialValues}
+                                                                        validationSchema={validationSchema}
+                                                                        onSubmit={handleCompletePWDReset}
+                                                                    >
+                                                                        {(props) => {
+                                                                        return (
+                                                                            <Form className='mt-2'>
+                                                                                <div className="row">
+                                                                                    <>
+                                                                                        <div className="col-12">
+                                                                                            <div className="form-group">
+                                                                                                <label className={`text-black fw-bold control-label`}>Username: {user?.user}</label>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <div className="col-12">
+                                                                                            <div className="form-group">
+                                                                                                <label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
+                                                                                                <input type="password" name='password' className="form-control" placeholder="password" value={props.values.password} onChange={props.handleChange} />
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <div className="col-12">
+                                                                                            <div className="form-group">
+                                                                                                <label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
+                                                                                                <input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
+                                                                                            </div>
+                                                                                        </div>
+
+                                                                                        {resetPWD.error &&
+                                                                                            <>
+                                                                                            <div className="col-12">
+                                                                                                <p className='text-danger'>{resetPWD.error.message}</p>
+                                                                                            </div>
+                                                                                            </>
+                                                                                        }
+
+                                                                                        <div className="col-12 mt-3 text-end">
+                                                                                            <button type='submit' className="btn btn-primary text-uppercase">{resetPWD.isPending ? 'loading...' : 'reset password'}</button>
+                                                                                        </div>
+                                                                                    </>
+                                                                                </div>
+                                                                            </Form>
+                                                                        );
+                                                                        }}
+                                                                    </Formik>
+                                                                </div>
+                                                            : verifyLink.error ?
+                                                            <>
+                                                                <div className='col-12'>
+                                                                    <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#E9D0DD'}}>
+                                                                        <h4 className='p-4 text-black'>Unable to continue password reset. Please start again</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>
+                                
+                                                                <div className="col-12  mt-3">
+                                                                    <p>Go <Link to={siteLinks.home}> Back</Link></p>
+                                                                </div>
+                                                            </>
+                                                            :
+                                                            null
+                                                        }
+                                                    </>
+                                                }
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
+                            <div className="row align-items-center h-100">
+                                <div className="col-7 mx-auto ">
+                                    <img className="img-fluid" src={LoginImg} alt="" />
+                                </div>
+                            </div>
+                        </div> */}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+  )
+}
@@ -66,7 +66,7 @@ export default function CSignup() {
        localStorage.setItem('room', room)
        localStorage.setItem('uid', uid)
        dispatch(updateUserDetails({ ...res?.data }));
-        navigate('/dash') // later add redux to dispatch state
+        navigate(siteLinks.start, {replace: true}) // later add redux to dispatch state
    },
    // onError: (err) => {
    //     console.log('err', err)
@@ -97,10 +97,10 @@ 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>
+                                    <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                    {/* <p>Welcome, Enter your password.</p> */}
                                    <div
                                    >
@@ -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>
+}
@@ -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>
+                                        <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
+                                        {!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>
@@ -27,7 +27,7 @@ export default function Login() {
            <div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
                <div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
                    <div className='w-full text-left'>
-                        <h1 className="mb-2 text-black text-4xl font-semibold">MERMS Panel</h1>
+                        <h1 className="mb-2 text-black text-4xl font-semibold">{process.env.REACT_APP_PANEL_NAME}</h1>
                        <p className='text-black-gray text-base'>Welcome back, please login to your account.</p>
                    </div>
                    <form className="w-full text-14 text-left text-black-gray">
@@ -83,10 +83,10 @@ 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>
+                                        <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                        <p>Welcome back, please login to your account.</p>
                                        <form className="mt-3 mt-sm-5">
                                            <div className="row">
@@ -124,16 +124,24 @@ 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> <Link to={siteLinks.signup}>
+                                                        {/*<span style={{fontWeight: 'bolder'}}>Sign Up</span>*/}
+                                                        <button className="btn btn-warning text-uppercase">
+                                                            Sign Up
+                                                        </button>
+                                                    </Link><span style={{paddingLeft: '5px' , fontWeight: 'bolder'}}> if you don't have an account yet.</span></p>
                                                </div>
                                            </div>
                                        </form>
+                                        <div className="row" style={{margin: '5px'}}>
+                                            <hr />
+                                        </div>
                                        <div className="row" style={{marginTop: '20px'}}>
                                            <div className="col-6">
                                                <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 +149,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 +161,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>
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, {useEffect, useState} from 'react'
 import LoginImg from '../../assets/bg/login.svg'
 import MainLoader from '../loaders/MainLoader'
-import { Link, useNavigate } from 'react-router-dom'
+import {Link, useNavigate} from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import Label from '../Label'
 import TextInput from '../inputs/TextInput'
@@ -9,89 +9,98 @@ import TextInput from '../inputs/TextInput'

 export default function Signup() {

-  const [loading, setLoading] = useState(true)
+    const [loading, setLoading] = useState(true)

-  const navigate = useNavigate()
+    const navigate = useNavigate()

-  useEffect(()=>{
-    const timer = setTimeout(()=>{
-        setLoading(false)
-    },1000)
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setLoading(false)
+        }, 1000)

-    return () => clearTimeout(timer)
-  },[])
+        return () => clearTimeout(timer)
+    }, [])

-  return (
-    <div className="h-screen bg-white w-full flex justify-center items-center">
-        <div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
-            <div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
-                <div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
-                    <div className='w-full text-left'>
-                        <h1 className="mb-2 text-black text-4xl font-semibold">MERMS Panel</h1>
-                        <p className='text-black-gray text-base'>Welcome, Please create your account.</p>
-                    </div>
-                    <form className="w-full text-14 text-left text-black-gray">
-                        <div className="w-full flex flex-col gap-4 justify-start items-start">
-                            <div className='w-full grid grid-cols-2 gap-8'>
-                                <div className="w-full">
-                                    <div className="w-full flex flex-col gap-2">
-                                        <Label desc='First Name*' />
-                                        <TextInput type='text' placeholder='Firstname' />
-                                    </div>
-                                </div>
-                                <div className="w-full">
-                                    <div className="w-full flex flex-col gap-2">
-                                        <Label desc='Last Name*' />
-                                        <TextInput type='text' placeholder='Lastname' />
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="w-full">
-                                <div className="w-full flex flex-col gap-2">
-                                    <Label desc='Email*' />
-                                    <TextInput type='text' placeholder='Email' />
-                                </div>
-                            </div>
-                            <div className="w-full">
-                                <div className="w-full flex flex-col gap-2">
-                                    <Label desc='User Name*' />
-                                    <TextInput type='text' placeholder='Username' />
-                                </div>
-                            </div>
-                            <div className="w-full">
-                                <div className="w-full flex flex-col gap-2">
-                                    <Label desc='Password*' />
-                                    <TextInput type='password' placeholder='Password' />
-                                </div>
-                            </div>
-                            <div className="w-full text-left">
-                                <div className="flex justify-between items-center">
-                                    <div className="flex gap-2">
-                                        <input className="form-check-input" type="checkbox" id="gridCheck" />
-                                        <label className="font-semibold form-check-label" htmlFor="gridCheck">
-                                        I accept terms & policy
-                                        </label>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="w-full mt-3">
-                                <button onClick={()=>{navigate(siteLinks.home)}} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign Up</button>
-                            </div>
-                            <div className="mt-3">
-                                <p className='font-medium'>Already have an account ?<Link to={siteLinks.login} className=' hover:text-primary'> Sign In</Link></p>
-                            </div>
+    return (
+        <div className="h-screen bg-white w-full flex justify-center items-center">
+            <div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
+                <div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
+                    <div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
+                        <div className='w-full text-left'>
+                            <h1 className="mb-2 text-black text-4xl font-semibold">{process.env.REACT_APP_PANEL_NAME}</h1>
+                            <p className='text-black-gray text-base'>Welcome, Please create your account.</p>
                        </div>
-                    </form>
+                        <form className="w-full text-14 text-left text-black-gray">
+                            <div className="w-full flex flex-col gap-4 justify-start items-start">
+                                <div className='w-full grid grid-cols-2 gap-8'>
+                                    <div className="w-full">
+                                        <div className="w-full flex flex-col gap-2">
+                                            <Label desc='First Name*'/>
+                                            <TextInput type='text' placeholder='Firstname'/>
+                                        </div>
+                                    </div>
+                                    <div className="w-full">
+                                        <div className="w-full flex flex-col gap-2">
+                                            <Label desc='Last Name*'/>
+                                            <TextInput type='text' placeholder='Lastname'/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="w-full">
+                                    <div className="w-full flex flex-col gap-2">
+                                        <Label desc='Email*'/>
+                                        <TextInput type='text' placeholder='Email'/>
+                                    </div>
+                                </div>
+                                <div className="w-full">
+                                    <div className="w-full flex flex-col gap-2">
+                                        <Label desc='User Name*'/>
+                                        <TextInput type='text' placeholder='Username'/>
+                                    </div>
+                                </div>
+                                <div className="w-full">
+                                    <div className="w-full flex flex-col gap-2">
+                                        <Label desc='Password*'/>
+                                        <TextInput type='password' placeholder='Password'/>
+                                    </div>
+                                </div>
+                                <div className="w-full text-left">
+                                    <div className="flex justify-between items-center">
+                                        <div className="flex gap-2">
+                                            <input className="form-check-input" type="checkbox" id="gridCheck"/>
+                                            <label className="font-semibold form-check-label" htmlFor="gridCheck">
+                                                I accept terms & policy of use.
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="w-full mt-3">
+                                    <button onClick={() => {
+                                        navigate(siteLinks.home)
+                                    }} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign
+                                        Up
+                                    </button>
+                                </div>
+                                <div className="mt-3">
+                                    <p className='font-medium'>Already have an account ?
+                                        <Link to={siteLinks.login}
+                                              className='hover:text-primary font-bold'> Sign In
+                                        </Link>
+                                    </p>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
                </div>
-            </div>
-            <div className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
-                <div className="w-full">
-                    <div className="w-2/3 mx-auto">
-                        <img className="w-[80%]" src={LoginImg} alt="" />
+                <div
+                    className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
+                    <div className="w-full">
+                        <div className="w-2/3 mx-auto">
+                            <img className="w-[80%]" src={LoginImg} alt=""/>
+                        </div>
                    </div>
                </div>
            </div>
        </div>
-    </div>
-  )
+    )
 }
@@ -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()
@@ -60,10 +61,10 @@ 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>
+                                        <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                        <p>Welcome, Please create your account.</p>
                                        <Formik
                                            initialValues={initialValues}
@@ -130,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>
@@ -87,7 +87,7 @@ export default function Calendar(){
                    <div className="card card-statistics">
                        <div className="card-header">
                            <div className="card-heading">
-                                <h4 className="card-title">Event Calendar</h4>
+                                <h4 className="card-title">Events</h4>
                            </div>
                        </div>
                        <div className="card-body">
@@ -2,371 +2,557 @@ import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";

-export default function Comments(){
-
-    return(
-        <>
-            <BreadcrumbComBS title='Comments' paths={['Dashboard', 'Comments']} />
-            <div className="row">
-                {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
-                <div className="col-12">
-                    <div className="card card-statistics mail-contant">
-                        <div className="card-body p-0">
-                            <div className="row no-gutters">
-                                <div className="col-md-4 col-xxl-2 col-md-4">
-                                    <div className="mail-sidebar">
-                                        <div className="row justify-content-center">
-                                            <div className="col-12">
-                                                <div className="text-center mail-sidebar-title px-4">
-                                                    <a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
-                                                </div>
-                                            </div>
-                                            <div className="col-12">
-                                                <div className="px-4 py-4">
-                                                    <ul className="pl-0">
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-envelope-o text-primary pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Inbox</span>
-                                                                            </span>
-                                                                            <span className="nav-item ml-auto text-right">
-                                                                                             <span className="badge badge-pill badge-primary float-right">0+</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-paper-plane-o pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Sent Mail</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-
-                                                    </ul>
-                                                    <ul className="pl-0 mt-5">
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-circle-o text-danger pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Personal</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-circle-o pr-4 text-warning"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Work</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-plus pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Add Category</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="col-md-8  col-xxl-4 border-md-t">
-                                    <div className="mail-content  border-right border-n h-100">
-                                        <div className="mail-search border-bottom">
-                                            <div className="row align-items-center mx-0">
-                                                <div className="col-12">
-                                                    <div className="form-group pt-3">
-                                                        <input type="text" className="form-control" id="search" placeholder="Search.." />
-                                                        <i className="fa fa-search"></i>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="mail-msg scrollbar scroll_dark">
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/01.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Martin smith</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>Since there is not an "all the above" category, I'll take the opportunity to enthusiastically congratulate you on the very high quality.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/02.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>DutcaPatrick</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Mobile app Designer </h5>
-                                                            <p>Very nice template, lots of pages and good documentation.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>m_morsch</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Landing page Designer</h5>
-                                                            <p>Excellent and at a great price... thank you very much!</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/04.jpg")} className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>AnnaHorno</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Re-Design ios app</h5>
-                                                            <p>Solved my theme problem in 10 minutes. We thank you.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/05.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Wdcorbitt</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Mobil UX/UI Designer</h5>
-                                                            <p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/06.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Anne Smith</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Jobly Opportunity</h5>
-                                                            <p>Mentor has so many features and layouts. Its a great choice.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/07.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Paul Flavius</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>There are many people in the world with amazing talents who realize only a small percentage of their potential. </p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/08.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Sara Lisbon</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">UI Designer</h5>
-                                                            <p>We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/09.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Annahorno</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="col-xxl-6 border-t border-xxl-t">
-                                    <div className="mail-chat py-5 px-5">
-                                        <div className="media align-items-center">
-                                            <div className="bg-img mr-3">
-                                                <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                            </div>
-                                            <div>
-                                                <h4 className="mb-0">Dutca Patrick</h4>
-                                                <p>30 Min ago</p>
-                                            </div>
-                                        </div>
-                                        <div className="mt-4 d-flex justify-content-between">
-                                            <div>
-                                                <h3>Landing page Designer...</h3>
-                                            </div>
-                                            <div className="d-flex">
-                                                {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
-                                                {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <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>
-                                            <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
-                                            <div className="my-5">
-                                                <p>Have lovely Day,</p>
-                                                <p>adminjon</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    {/*<div className="d-md-flex px-5 py-4">*/}
-                                    {/*    <div className="flex-fill align-items-center">*/}
-                                    {/*        <div className="d-flex">*/}
-                                    {/*            <i className="ti ti-clip pr-3 font-22"></i>*/}
-                                    {/*            <p className="pr-3 font-weight-bold">Wireframe</p>*/}
-                                    {/*            <p>(220.MB)</p>*/}
-                                    {/*        </div>*/}
-                                    {/*    </div>*/}
-                                    {/*    <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>*/}
-                                    {/*</div>*/}
-                                    <div className="bg-light mail-f px-4 py-3">
-                                        <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
-                                            <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
-                                            <a href="javascript:void(0)" className="text-primary"><i className="fa fa-microphone"></i></a>
-                                        </div>
-                                        <div className="collapse" id="editer">
-                                            <div className="form-group">
-                                                <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
-                                            </div>
-                                        </div>
-                                        <div className="collapse" id="forward">
-                                            <div className="form-group">
-                                                <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
-                                            </div>
-                                        </div>
-                                        <div className="d-flex align-items-center justify-content-between py-2">
-                                            <div>
-                                                <ul className="nav">
-                                                    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>
-                                                    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>
-                                                    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>
-                                                </ul>
-                                            </div>
-                                            <div>
-                                                <a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+export default function Comments() {
+  return (
+    <>
+      <BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
+      <div className="row">
+        {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+        <div className="col-12">
+          <div className="card card-statistics mail-contant">
+            <div className="card-body p-0">
+              <div className="row no-gutters">
+                <div className="col-md-4 col-xxl-2 col-md-4">
+                  <div className="mail-sidebar">
+                    <div className="row justify-content-center">
+                      <div className="col-12">
+                        <div className="text-center mail-sidebar-title px-4">
+                          <a
+                            href="javascript:void(0)"
+                            className="btn btn-primary btn-block py-3 font-weight-bold font-18"
+                          >
+                            <i className="fa fa-plus pl-2"></i>
+                          </a>
                        </div>
+                      </div>
+                      <div className="col-12">
+                        <div className="px-4 py-4">
+                          <ul className="pl-0">
+                            <li className="py-2">
+                              <a href="javascript:void(0)">
+                                <span className="nav align-items-center">
+                                  <span>
+                                    <i className="fa fa-envelope-o text-primary pr-4"></i>
+                                  </span>
+                                  <span>
+                                    <span>Inbox</span>
+                                  </span>
+                                  <span className="nav-item ml-auto text-right">
+                                    <span className="badge badge-pill badge-primary float-right">
+                                      0+
+                                    </span>
+                                  </span>
+                                </span>
+                              </a>
+                            </li>
+                            <li className="py-2">
+                              <a href="javascript:void(0)">
+                                <span className="nav align-items-center">
+                                  <span>
+                                    <i className="fa fa-paper-plane-o pr-4"></i>
+                                  </span>
+                                  <span>
+                                    <span>Sent Mail</span>
+                                  </span>
+                                </span>
+                              </a>
+                            </li>
+                          </ul>
+                          <ul className="pl-0 mt-5">
+                            <li className="py-2">
+                              <a href="javascript:void(0)">
+                                <span className="nav align-items-center">
+                                  <span>
+                                    <i className="fa fa-circle-o text-danger pr-4"></i>
+                                  </span>
+                                  <span>
+                                    <span>Personal</span>
+                                  </span>
+                                </span>
+                              </a>
+                            </li>
+                            <li className="py-2">
+                              <a href="javascript:void(0)">
+                                <span className="nav align-items-center">
+                                  <span>
+                                    <i className="fa fa-circle-o pr-4 text-warning"></i>
+                                  </span>
+                                  <span>
+                                    <span>Work</span>
+                                  </span>
+                                </span>
+                              </a>
+                            </li>
+                            <li className="py-2">
+                              <a href="javascript:void(0)">
+                                <span className="nav align-items-center">
+                                  <span>
+                                    <i className="fa fa-plus pr-4"></i>
+                                  </span>
+                                  <span>
+                                    <span>Add Category</span>
+                                  </span>
+                                </span>
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
                    </div>
+                  </div>
                </div>
+                <div className="col-md-8  col-xxl-4 border-md-t">
+                  <div className="mail-content  border-right border-n h-100">
+                    <div className="mail-search border-bottom">
+                      <div className="row align-items-center mx-0">
+                        <div className="col-12">
+                          <div className="form-group pt-3">
+                            <input
+                              type="text"
+                              className="form-control"
+                              id="search"
+                              placeholder="Search.."
+                            />
+                            <i className="fa fa-search"></i>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="mail-msg scrollbar scroll_dark">
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/01.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>Martin smith</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">Saas Designer</h5>
+                              <p>
+                                Since there is not an "all the above" category,
+                                I'll take the opportunity to enthusiastically
+                                congratulate you on the very high quality.
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/02.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>DutcaPatrick</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">
+                                Mobile app Designer{" "}
+                              </h5>
+                              <p>
+                                Very nice template, lots of pages and good
+                                documentation.
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/03.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>m_morsch</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">
+                                Landing page Designer
+                              </h5>
+                              <p>
+                                Excellent and at a great price... thank you very
+                                much!
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/04.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>AnnaHorno</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">Re-Design ios app</h5>
+                              <p>
+                                Solved my theme problem in 10 minutes. We thank
+                                you.
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/05.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>Wdcorbitt</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">
+                                Mobil UX/UI Designer
+                              </h5>
+                              <p>
+                                Asked for information and received it EXTREMELY
+                                quickly. Great layout - good code - great price!{" "}
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/06.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>Anne Smith</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">Jobly Opportunity</h5>
+                              <p>
+                                Mentor has so many features and layouts. Its a
+                                great choice.
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/07.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>Paul Flavius</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">Saas Designer</h5>
+                              <p>
+                                There are many people in the world with amazing
+                                talents who realize only a small percentage of
+                                their potential.{" "}
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/08.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>Sara Lisbon</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">UI Designer</h5>
+                              <p>
+                                We can look a bit further back in time to Albert
+                                Einstein or even further back to Abraham
+                                Lincoln.
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div className="mail-msg-item">
+                        <a href="javascript:void(0)">
+                          <div className="media align-items-center">
+                            <div className="mr-3">
+                              <div className="bg-img">
+                                <img
+                                  src={getImage("avtar/09.jpg")}
+                                  className="img-fluid"
+                                  alt="user"
+                                />
+                              </div>
+                            </div>
+                            <div className="w-100">
+                              <div className="mail-msg-item-titel justify-content-between">
+                                <p>Annahorno</p>
+                                <p className="d-none d-xl-block">
+                                  06:59 <span> PM </span>
+                                </p>
+                              </div>
+                              <h5 className="mb-0 my-2">Saas Designer</h5>
+                              <p>
+                                One of the most difficult aspects of achieving
+                                success is staying motivated over the long haul.
+                              </p>
+                              <p className="d-xl-none">
+                                06:59 <span> PM </span>
+                              </p>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-xxl-6 border-t border-xxl-t">
+                  <div className="mail-chat py-5 px-5">
+                    <div className="media align-items-center">
+                      <div className="bg-img mr-3">
+                        <img
+                          src={getImage("avtar/03.jpg")}
+                          className="img-fluid"
+                          alt="user"
+                        />
+                      </div>
+                      <div>
+                        <h4 className="mb-0">Dutca Patrick</h4>
+                        <p>30 Min ago</p>
+                      </div>
+                    </div>
+                    <div className="mt-4 d-flex justify-content-between">
+                      <div>
+                        <h3>Landing page Designer...</h3>
+                      </div>
+                      <div className="d-flex">
+                        {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
+                        {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
+                      </div>
+                    </div>
+                    <div>
+                      <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>
+                      <p>
+                        We know this in our gut, but what can we do about it?
+                        How can we motivate ourselves? One of the most difficult
+                        aspects of achieving success is staying motivated over
+                        the long haul.
+                      </p>
+                      <div className="my-5">
+                        <p>Have lovely Day,</p>
+                        <p>adminjon</p>
+                      </div>
+                    </div>
+                  </div>
+                  {/*<div className="d-md-flex px-5 py-4">*/}
+                  {/*    <div className="flex-fill align-items-center">*/}
+                  {/*        <div className="d-flex">*/}
+                  {/*            <i className="ti ti-clip pr-3 font-22"></i>*/}
+                  {/*            <p className="pr-3 font-weight-bold">Wireframe</p>*/}
+                  {/*            <p>(220.MB)</p>*/}
+                  {/*        </div>*/}
+                  {/*    </div>*/}
+                  {/*    <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></a></div>*/}
+                  {/*</div>*/}
+                  <div className="bg-light mail-f px-4 py-3">
+                    <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
+                      <p>
+                        Click here to{" "}
+                        <a
+                          href="#editer"
+                          data-toggle="collapse"
+                          className="text-primary px-1"
+                        >
+                          Reply
+                        </a>
+                        or
+                        <a
+                          href="#forward"
+                          data-toggle="collapse"
+                          className="text-primary px-1"
+                        >
+                          Forward
+                        </a>
+                      </p>
+                      <a href="javascript:void(0)" className="text-primary">
+                        <i className="fa fa-microphone"></i>
+                      </a>
+                    </div>
+                    <div className="collapse" id="editer">
+                      <div className="form-group">
+                        <textarea
+                          className="form-control mt-3"
+                          id="exampleFormControlTextarea1"
+                          rows="3"
+                          placeholder="Type here..."
+                        ></textarea>
+                      </div>
+                    </div>
+                    <div className="collapse" id="forward">
+                      <div className="form-group">
+                        <input
+                          className="form-control mt-3"
+                          id="exampleFormControl"
+                          placeholder="Email Address"
+                        />
+                      </div>
+                    </div>
+                    <div className="d-flex align-items-center justify-content-between py-2">
+                      <div>
+                        <ul className="nav">
+                          <li className="nav-item pr-3">
+                            <a href="javascript:void(0)">
+                              <i className="ti ti-clip font-20"></i>
+                            </a>
+                          </li>
+                          <li className="nav-item pr-3">
+                            <a href="javascript:void(0)">
+                              <i className="ti ti-face-smile font-20"></i>
+                            </a>
+                          </li>
+                          <li className="nav-item">
+                            <a href="javascript:void(0)">
+                              <i className="ti ti-gallery font-20"></i>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                      <div>
+                        <a
+                          href="javascript:void(0)"
+                          className="btn btn-primary"
+                        >
+                          <span>Send</span>{" "}
+                          <i className="fa fa-paper-plane"></i>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
            </div>
-        </>
-    )
-}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import React, { useEffect, useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";
@@ -7,303 +7,343 @@ import { contactData } from "../../services/services";
 import queryKeys from "../../services/queryKeys";
 import getCustomTime from "../../utils/getCustomTime";

-export default function Contacts(){
+export default function Contacts() {
+  // const {data:contacts, isFetching, isError, error} = useQuery({
+  //     queryKey: queryKeys.contacts,
+  //     queryFn: () => contactData()
+  // })

-    // const {data:contacts, isFetching, isError, error} = useQuery({
-    //     queryKey: queryKeys.contacts,
-    //     queryFn: () => contactData()
-    // })
+  const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY

-    const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
+  const [activeContactUID, setActiveContactUID] = useState("");
+  const [activeDetail, setActiveDetail] = useState([]);

-    const [activeContactUID, setActiveContactUID] = useState('')
-    const [activeDetail, setActiveDetail] = useState([])
+  const [filteredContactData, setFiltererdContactData] = useState([]);

-    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 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);
+    let detail = contactsData.filter((item) => item.uid == uid);
+    setActiveDetail(detail);
+  };

-    const changeActiveUID = (uid) => {
-        setActiveContactUID(uid)
-        let detail = contactsData.filter(item => item.uid == uid)
-        setActiveDetail(detail)
+  const changeActiveCategoryUID = (id) => {
+    let filteredConData = [];
+    setActiveCategoryUID(id);
+    if (id == "0") {
+      filteredConData = contactsData;
+    } else {
+      filteredConData = contactsData.filter((item) => item.category == id);
    }
+    setFiltererdContactData(filteredConData);
+    changeActiveUID(filteredConData[0]?.uid);
+  };

-    const changeActiveCategoryUID = (id) => {
-        let filteredConData = []
-        setActiveCategoryUID(id)
-        if(id == '0'){
-            filteredConData = contactsData
-        }else{
-            filteredConData = contactsData.filter(item => item.category == id)
-        }
-        setFiltererdContactData(filteredConData)
-        changeActiveUID(filteredConData[0]?.uid)
-    }
-
-    useEffect(()=>{
+  useEffect(() => {
    let reqData = {
-        token: localStorage.getItem('token'), // USER TOKEN
-        uid: localStorage.getItem('uid') // USER UID
-    }
-    getContactData.mutate(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
+  const contactsData = getContactData?.data?.data?.contacts; // LIST OF CONTACTS
+  const contactsCategory = getContactData?.data?.data?.category; // LIST OF CATEGORY

-    return(
+  return (
+    <>
+      <BreadcrumbComBS title="Contacts" paths={["Dashboard", "Contacts"]} />
+      {getContactData?.isPending ? (
        <>
-            <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
-            {getContactData?.isPending ? 
-                <>
-                    <div className="row">
-                        <div className="col-12">
-                            <p className='text-mute'>Loading...</p>
-                        </div>
-                    </div>
-                </>
-                : getContactData?.error ?
-                <div className="row">
-                    <div className="col-12">
-                        <p className='text-danger'>{getContactData?.error?.message}</p>
-                    </div>
-                </div>
-                :
-                <div className="row">
-                    {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
-                    <div className="col-12">
-                        <div className="card card-statistics mail-contant">
-                            <div className="card-body p-0">
-                                <div className="row no-gutters">
-                                    <div className="col-md-4 col-xxl-2 col-md-4">
-                                        <div className="mail-sidebar">
-                                            <div className="row justify-content-center">
-                                                <div className="d-none col-12">
-                                                    <div className="text-center mail-sidebar-title px-4">
-                                                        <a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
-                                                    </div>
-                                                </div>
-                                                <div className="col-12">
-                                                    <div className="px-4 py-4">
-                                                        <ul className="pl-0">
-                                                            <li className="py-2">
-                                                                <a href="#">
-                                                                                <span className="nav align-items-center">
-                                                                                            <span>
-                                                                                                <i className="fa fa-envelope-o text-primary pr-4"></i>
-                                                                                            </span>
-                                                                                <span>
-                                                                                                <span>Inbox</span>
-                                                                                </span>
-                                                                                <span className="nav-item ml-auto text-right">
-                                                                                                <span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
-                                                                                </span>
-                                                                                </span>
-                                                                </a>
-                                                            </li>
-                                                            <li className="py-2">
-                                                                <a href="#">
-                                                                                <span className="nav align-items-center">
-                                                                                            <span>
-                                                                                                <i className="fa fa-paper-plane-o pr-4"></i>
-                                                                                            </span>
-                                                                                <span>
-                                                                                                <span>Replied Mail</span>
-                                                                                </span>
-                                                                                </span>
-                                                                </a>
-                                                            </li>
-
-                                                        </ul>
-
-                                                        <ul className="pl-0 mt-5">
-                                                            <li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
-                                                                    <div>
-                                                                        <span className="nav align-items-center">
-                                                                            <span>
-                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
-                                                                            </span>
-                                                                        <span>
-                                                                            <span>All</span>
-                                                                        </span>
-                                                                        </span>
-                                                                    </div>
-                                                                </li>
-                                                            {contactsCategory && contactsCategory.map(item => (
-                                                                <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 == `A00000${item?.cid}` ? 'text-primary' : 'text-warning'}`}></i>
-                                                                            </span>
-                                                                        <span>
-                                                                            <span>{item?.description}</span>
-                                                                        </span>
-                                                                        </span>
-                                                                    </div>
-                                                                </li>
-                                                            ))}
-                                                            {/* <li className="py-2">
-                                                                <a href="#">
-                                                                                <span className="nav align-items-center">
-                                                                                            <span>
-                                                                                                <i className="fa fa-circle-o pr-4 text-warning"></i>
-                                                                                            </span>
-                                                                                <span>
-                                                                                                <span>Work</span>
-                                                                                </span>
-                                                                                </span>
-                                                                </a>
-                                                            </li>
-                                                            <li className="py-2">
-                                                                <a href="#">
-                                                                                <span className="nav align-items-center">
-                                                                                            <span>
-                                                                                                <i className="fa fa-plus pr-4"></i>
-                                                                                            </span>
-                                                                                <span>
-                                                                                                <span>Add Category</span>
-                                                                                </span>
-                                                                                </span>
-                                                                </a>
-                                                            </li> */}
-                                                        </ul>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="col-md-8  col-xxl-4 border-md-t">
-                                        <div className="mail-content  border-right border-n h-100">
-                                            <div className="mail-search border-bottom">
-                                                <div className="row align-items-center mx-0">
-                                                    <div className="col-12">
-                                                        {/*<div className="form-group pt-3">*/}
-                                                        {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
-                                                        {/*        <i className="fa fa-search"></i>*/}
-                                                        {/*</div>*/}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="mail-msg scrollbar scroll_dark">
-                                                {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'}`}>
-                                                            <a href="#">
-                                                                <div className="media align-items-center">
-                                                                    <div className="mr-3">
-                                                                        <div className="bg-img">
-                                                                            <img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="w-100">
-                                                                        <div className="mail-msg-item-titel justify-content-between">
-                                                                            <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>
-                                                                        </div>
-                                                                        <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()}
-                                                                            {/* {getCustomTime(contact.added)} */}
-                                                                            </span>
-                                                                        </p>
-                                                                    </div>
-                                                                </div>
-                                                            </a>
-                                                        </div>
-                                                    )
-                                                })}
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="col-xxl-6 border-t border-xxl-t">
-
-                                        <div className="mail-chat py-5 px-5">
-                                            <div className="media align-items-center">
-                                                <div className="bg-img mr-3">
-                                                    <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                                </div>
-                                                <div>
-                                                    <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 : 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>*/}
-                                                    {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
-                                                </div>
-                                            </div>
-                                            <div>
-                                                <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>
-                                                <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
-                                                {/*<div className="my-5">*/}
-                                                {/*    <p>Have lovely Day,</p>*/}
-                                                {/*    <p>adminjon</p>*/}
-                                                {/*</div>*/}
-                                            </div>
-                                        </div>
-
-                                        <div className="bg-light mail-f px-4 py-3">
-                                            <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
-                                                <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
-                                                <a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
-                                            </div>
-                                            <div className="collapse" id="editer">
-                                                <div className="form-group">
-                                                    <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
-                                                </div>
-                                            </div>
-                                            <div className="collapse" id="forward">
-                                                <div className="form-group">
-                                                    <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
-                                                </div>
-                                            </div>
-                                            <div className="d-flex align-items-center justify-content-between py-2">
-                                                <div>
-                                                    {/*<ul className="nav">*/}
-                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
-                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
-                                                    {/*    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
-                                                    {/*</ul>*/}
-                                                </div>
-                                                <div>
-                                                    {/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
+          <div className="row">
+            <div className="col-12">
+              <p className="text-mute">Loading...</p>
+            </div>
+          </div>
        </>
-    )
+      ) : getContactData?.error ? (
+        <div className="row">
+          <div className="col-12">
+            <p className="text-danger">{getContactData?.error?.message}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="row">
+          {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+          <div className="col-12">
+            <div
+              className="card card-statistics mail-contant"
+              style={{ minHeight: "200px", borderRadius: "10px" }}
+            >
+              <div className="card-body p-0">
+                <div className="row no-gutters">
+                  <div className="col-md-4 col-xxl-2 col-md-4">
+                    <div className="mail-sidebar">
+                      <div className="row justify-content-center">
+                        <div className="d-none col-12">
+                          <div className="text-center mail-sidebar-title px-4">
+                            <a
+                              href="#"
+                              className="btn btn-primary btn-block py-3 font-weight-bold font-18"
+                            >
+                              <i className="fa fa-plus pl-2"></i>
+                            </a>
+                          </div>
+                        </div>
+                        <div className="col-12">
+                          <div className="px-4 py-4">
+                            <ul className="pl-0">
+                              <li className="py-2">
+                                <a href="#">
+                                  <span className="nav align-items-center">
+                                    <span>
+                                      <i className="fa fa-envelope-o text-primary pr-4"></i>
+                                    </span>
+                                    <span>
+                                      <span>Inbox</span>
+                                    </span>
+                                    <span className="nav-item ml-auto text-right">
+                                      <span className="badge badge-pill badge-primary float-right">
+                                        {contactsData?.length}
+                                      </span>
+                                    </span>
+                                  </span>
+                                </a>
+                              </li>
+                              {/*<li className="py-2">*/}
+                              {/*    <a href="#">*/}
+                              {/*                <span*/}
+                              {/*                    className="nav align-items-center">*/}
+                              {/*                            <span>*/}
+                              {/*                                <i className="fa fa-paper-plane-o pr-4"></i>*/}
+                              {/*                            </span>*/}
+                              {/*                <span>*/}
+                              {/*                                <span>Replied Mail</span>*/}
+                              {/*                </span>*/}
+                              {/*                </span>*/}
+                              {/*    </a>*/}
+                              {/*</li>*/}
+                            </ul>
+
+                            <ul className="pl-0 mt-5">
+                              <li
+                                className="py-2"
+                                onClick={() => changeActiveCategoryUID("0")}
+                                style={{ cursor: "pointer" }}
+                              >
+                                <div>
+                                  <span className="nav align-items-center">
+                                    <span>
+                                      <i
+                                        className={`fa fa-circle-o pr-4 ${
+                                          activeCategoryUID == "0"
+                                            ? "text-primary"
+                                            : "text-warning"
+                                        }`}
+                                      ></i>
+                                    </span>
+                                    <span>
+                                      <span>All</span>
+                                    </span>
+                                  </span>
+                                </div>
+                              </li>
+                              {contactsCategory &&
+                                contactsCategory.map((item) => (
+                                  <li
+                                    key={item?.cid}
+                                    className="py-2"
+                                    onClick={() =>
+                                      changeActiveCategoryUID(`${item?.cid}`)
+                                    }
+                                    style={{ cursor: "pointer" }}
+                                  >
+                                    <div>
+                                      <span className="nav align-items-center">
+                                        <span>
+                                          <i
+                                            className={`fa fa-circle-o pr-4 ${
+                                              activeCategoryUID ==
+                                              `${item?.cid}`
+                                                ? "text-primary"
+                                                : "text-warning"
+                                            }`}
+                                          ></i>
+                                        </span>
+                                        <span>
+                                          <span>{item?.description}</span>
+                                        </span>
+                                      </span>
+                                    </div>
+                                  </li>
+                                ))}
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
+                    <div className="mail-content  border-right border-n h-100" style={{placeContent: 'center'}}>
+                      {/* <div className="mail-search border-bottom">
+                        <div className="row align-items-center mx-0">
+                          <div className="col-12">
+                            <div className="form-group pt-3">
+                               <input type="text" className="form-control" id="search" placeholder="Search.." />
+                                   <i className="fa fa-search"></i>
+                            </div>
+                          </div>
+                        </div>
+                      </div> */}
+                      <div className="mail-msg scrollbar scroll_dark">
+                        { filteredContactData.length ?
+                          filteredContactData?.map((contact, index) => {
+                            const isActive =
+                              contact?.uid == activeContactUID ||
+                              (!activeContactUID && index == 0);
+                            const avtarImage =
+                              contact?.category === undefined
+                                ? "avtar/01.jpg"
+                                : "avtar/" + contact.category + ".png";
+                            return (
+                              <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">
+                                      <div className="bg-img">
+                                        <img
+                                          src={getImage(avtarImage)}
+                                          className="img-fluid"
+                                          alt="user"
+                                        />
+                                      </div>
+                                    </div>
+                                    <div className="w-100">
+                                      <div className="mail-msg-item-titel justify-content-between">
+                                        <p>
+                                          <span
+                                            style={{
+                                              fontSize: "14px",
+                                              color: "#148399",
+                                              fontWeight: "bolder",
+                                            }}
+                                          >
+                                            {contact?.sender}
+                                          </span>
+                                        </p>
+                                        {/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
+                                        <p className="d-none d-xl-block">
+                                          <span style={{ fontSize: "14px" }}>
+                                            {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>
+                                      <p className="d-xl-none">
+                                        <span>
+                                          {new Date(
+                                            contact?.added
+                                          ).toDateString()}
+                                          {/* {getCustomTime(contact.added)} */}
+                                        </span>
+                                      </p>
+                                    </div>
+                                  </div>
+                                </a>
+                              </div>
+                            );
+                          })
+                          :
+                          <p className="text-center">Messages will appear here as soon as they are available for selection</p>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                  {filteredContactData.length > 0 &&
+                  <div className="col-xxl-6 border-t border-xxl-t">
+                    <div className="mail-chat py-5 px-5">
+                      <div className="media align-items-center">
+                        <div className="bg-img mr-3">
+                          <img
+                            src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
+                            className="img-fluid"
+                            alt="user"
+                          />
+                        </div>
+                        <div>
+                          <h4 className="mb-0" style={{ color: "#148399" }}>
+                            {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
+                              : 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>*/}
+                          {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
+                        </div>
+                      </div>
+                      <div>
+                        <p>
+                          {activeContactUID
+                            ? activeDetail[0]?.message
+                            : filteredContactData[0]?.message}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 }
@@ -0,0 +1,88 @@
+import React from 'react'
+import { getDashPayments } from '../../services/services'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+import getImage from '../../utils/getImage'
+
+export default function DashPayments() {
+
+    
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.dash_payments,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getDashPayments(reqData)
+        }
+    })
+
+    const payments = data?.data?.member_payments
+    // console.log('data', payments)
+
+  return (
+    <>
+        <div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
+            <div className="card card-statistics h-100 mb-0 panel_round_c3">
+                <div className="card-header d-flex justify-content-between">
+                    <div className="card-heading">
+                        <h4 className="card-title">Payments</h4>
+                    </div>
+                </div>
+                <div className="overflow-y-auto card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
+                    <div className="datatable-wrapper table-responsive">
+                    {isFetching ? 
+                        <>
+                            <div className="col-12">
+                                <div className="p-4">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </div>
+                        </>
+                        : isError ?
+                        <div className="col-12">
+                            <div className="p-4">
+                                <p className='text-danger'>{error.message}</p>
+                            </div>
+                        </div>
+                        :
+                        <table id="datatable" className="table table-borderless table-striped">
+                            <thead>
+                            <tr>
+                                {/* <th style={{width: '30px'}}>#</th> */}
+                                <th>Date</th>
+
+                                <th  style={{width: '130px'}}>Subscription</th>
+                                <th  style={{width: '80px'}}>Amount</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                                {payments.length > 0 ? 
+                                payments.map((item, index) => {
+                                    return (
+                                        <tr key={index}>
+                                            {/* <td>{Number(item?.id).toString().padStart(6,'0')}</td> */}
+                                            <td>
+                                                {getDateTimeFromDateString(item?.added)}
+                                            </td>
+
+                                            <td>{item?.option_name}</td>
+                                            <td className='text-right'>${item?.amount}</td>
+                                        </tr>
+                                    )
+                                })
+                                :
+                                    <td colSpan={3} className='text-center'>No record found</td>
+                                }
+                            </tbody>
+                        </table>
+                    }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+  )
+}
@@ -5,6 +5,7 @@ import Products from "./Products";
 import TopBar from "./TopBar";
 import ProductsURL from "./ProductsURL";
 import { SocketContextValues } from "../context/SocketIOContext";
+import DashPayments from "./DashPayments";

 export default function HomeSections(){

@@ -52,41 +53,7 @@ export default function HomeSections(){
        <div className="row">
            <ProductsURL />

-            <div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
-                <div className="card card-statistics h-100 mb-0 panel_round_c3">
-                    <div className="card-header d-flex justify-content-between">
-                        <div className="card-heading">
-                            <h4 className="card-title">Payments</h4>
-                        </div>
-                        {/*<div className="dropdown">*/}
-                        {/*    <a className="p-2" href="#!" data-toggle="dropdown" aria-haspopup="true"*/}
-                        {/*       aria-expanded="false">*/}
-                        {/*        <i className="fe fe-circle"></i>*/}
-                        {/*    </a>*/}
-                        {/*    <div className="dropdown-menu custom-dropdown dropdown-menu-right p-4">*/}
-                        {/*        <h6 className="mb-1">Action</h6>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-o pr-2"></i>View*/}
-                        {/*            reports</a>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-edit pr-2"></i>Edit reports</a>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-bar-chart-o pr-2"></i>Statistics</a>*/}
-                        {/*        <h6 className="mb-1 mt-3">Export</h6>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-pdf-o pr-2"></i>Export*/}
-                        {/*            to PDF</a>*/}
-                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-excel-o pr-2"></i>Export*/}
-                        {/*            to CSV</a>*/}
-                        {/*    </div>*/}
-                        {/*</div>*/}
-                    </div>
-                    <div className="card-body">
-                        {/*<h5>We only started collecting data from February 2019 </h5>*/}
-                        {/*<p>Questions about the Net Earnings number? <a*/}
-                        {/*    className="btn btn-square btn-inverse-success btn-xs ml-1" href="#">Click here</a></p>*/}
-                        <div className="row mt-4">
-                            .
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <DashPayments />
        </div>
    </>;

@@ -42,15 +42,15 @@ export default function Products() {
                :
                <div className="row m-b-20">
                    {products && products.map((product, index) => (
-                        <div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
+                        <div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
                            <Link to={productPath(product?.product_id)}  >
-                                <div className="d-flex align-items-center extraProductCard">
+                                <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className="fa fa-cart-plus text-primary"></i>
+                                        <i className={`fa ${product?.product_icon} text-primary`}></i>
                                    </div>
                                    <div className="report-details">
-                                        <p>{product?.status_text}</p>
-                                        <h4>{product?.name}</h4>
+                                        <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
+                                        <h4><span style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
                                    </div>
                                </div>
                            </Link>
@@ -2,6 +2,7 @@ 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() {

@@ -59,32 +60,28 @@ export default function ProductsURL() {
                            </thead>
                            <tbody>
                                {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 statusColor = item?.status === '1' ? 'badge-success-inverse' : item?.status === '6' ? 'badge-success-inverse' : item?.status == '7' ? 'badge-danger-inverse' : 'badge-info-inverse'
+                                    let statusText = item?.status === '1' ? 'Preparing' : item?.status === '6' ? 'Provisioning' : item?.status == '7' ? 'Ready' : 'Started'
                                    let productUrl = '/product/'+ item?.product_id
+                                    let externalUrl= item?.url_protocol +"://"+ item?.internal_url;
                                    return (
                                        <tr key={index}>
-                                            <td>{Number(item?.id)}</td>
+                                            <td>{Number(item?.id).toString().padStart(6,'0')}</td>
                                            <td>
-                                                {item?.description} - 
-                                                {/* <a href={productUrl} target='_blank'>{item?.external_url}</a> */}
+                                                <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={productUrl} target='_blank'><i className="fe fe-edit"></i></a></td>
+                                            <td><span className={`badge ${statusColor}`}>{statusText}</span></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>
                                    )
                                })}
                            </tbody>
-                            <tfoot>
-                            <tr>
-                                <th>#</th>
-                                <th>Name</th>
-                                <th>Price</th>
-                                <th>In stock</th>
-                                <th>Status</th>
-                                <th>Action</th>
-                            </tr>
-                            </tfoot>
                        </table>
                    }
                    </div>
@@ -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>
                                )
@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
 import queryKeys from '../../services/queryKeys'
+import { Link } from 'react-router-dom'

 export default function TopBar() {

@@ -56,31 +57,37 @@ export default function TopBar() {
        <>
        {data && data?.map((item, index)=>{
            let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
+            let dataSpan = ''
+            if(item?.extra_style){
+                const data = item.data_span.split(' ')
+                dataSpan = `${data[0]} ${data[1]}`
+            }
+
            return (
-            <div key={item.id + index} className="col-sm-6 col-xxl-3">
-                <div className="card card-statistics ecommerce-contant overflow-h">
-                    <div className="card-body p-0">
-                        <div className="d-flex m-b-0 ecommerce-contant-text h-100">
-                            <div className="w-100">
-                                <div className="row p-3">
-                                    <div className="col">
-                                        <h3 className="mb-0">{item?.value || 0}</h3>
-                                        <small className="d-block">{item?.data_span}</small>
+                <div key={item.id + index} className="col-sm-6 col-xxl-3">
+                    <Link to={item?.link}>
+                        <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
+                            <div className="card-body p-0">
+                                <div className="d-flex m-b-0 ecommerce-contant-text h-100">
+                                    <div className="w-100">
+                                        <div className="row p-3">
+                                            <div className="col">
+                                                <h3 className="mb-0">{item?.value || 0}</h3>
+                                                <small className="d-block">{item?.extra_style ? dataSpan : item?.data_span}</small>
+                                            </div>
+                                            <div className="col text-right">
+                                                <h5 className="text-muted mb-0">{item?.description}</h5>
+                                            </div>
+                                        </div>
+                                        <div className="apexchart-wrapper">
+                                            <div id="ecommercedemo3" className="chart-fit"></div>
+                                        </div>
                                    </div>
-                                    <div className="col text-right">
-                                        <h5 className="text-muted mb-0">{item?.description}</h5>
-                                        <strong className={`${textColor} m-t-5`}><i
-                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
-                                    </div>
-                                </div>
-                                <div className="apexchart-wrapper">
-                                    <div id="ecommercedemo3" className="chart-fit"></div>
                                </div>
                            </div>
                        </div>
-                    </div>
+                    </Link>
                </div>
-            </div>
            )
        })}
        </>
@@ -1,16 +1,22 @@
 import React from 'react'
+import { Outlet, useLocation } from 'react-router-dom';
 import UserMenu from "./layoutcom/UserMenu";
 import UserHeader from "./layoutcom/UserHeader";
 import UserFooter from "./layoutcom/UserFooter";
-import { Outlet } from 'react-router-dom';
+import siteLinks from '../../links/siteLinks';


 export default function Layout() {
+
+  const {pathname} = useLocation()
+  // const isProfileComplete = pathname == siteLinks.profile_complete
+
  return (
      <div className="app">
        <div className="app-wrap">
          <UserHeader />
          <div className="app-container">
+            
            <aside className="app-navbar">
              <UserMenu />
            </aside>
@@ -5,7 +5,7 @@ export default function UserFooter(){
    const year = new Date().getFullYear()

    return <>
-        <footer className="footer">
+        <footer className={`footer`}>
            <div className="row">
                <div className="col-12 col-sm-6 text-center text-sm-left">
                    <p>&copy; Copyright {year}. All rights reserved.</p>
@@ -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,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">
+                                <a onClick={toggleMenu} 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} onClick={toggleMenu} 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">
-                                                <h4 className="text-white mb-0 font-600">{userDetails?.firstname} {userDetails?.lastname}</h4>
-                                                <p className="text-white font-600">{userDetails.email}</p>
+                                                {/* <h4 className="text-white mb-0 font-600">{userDetails?.username}</h4> */}
+                                                <p className="text-white font-600">{userDetails.username}</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
@@ -83,8 +90,8 @@ export default function UserHeader(){
                                        </div>
                                    </div>
                                    <div className="p-4">
-                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.user}>
-                                            <i className="fa fa-user pr-2 text-success"></i> Users</Link>
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.subscription}>
+                                            <i className="fa fa-user pr-2 text-success"></i> Subscription</Link>
                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.contacts}>
                                            <i className="fa fa-envelope pr-2 text-primary"></i> Contacts
                                            <span className="badge badge-primary ml-auto">6</span>
@@ -16,11 +16,11 @@ export default function UserMenu() {
    return (
        <>
            <div className="sidebar-nav scrollbar scroll_dark">
-                <ul className="metismenu " id="sidebarNav">
+                <ul className="metismenu h-100" id="sidebarNav">
                    <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 />
@@ -30,7 +30,7 @@ export default function UserMenu() {
                        <ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
                            <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
                            <li className={`${pathname == siteLinks.calendar ? 'active' : ''}`}><Link to={siteLinks.calendar}>Calendar</Link></li>
-                            <li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Contacts</Link></li>
+                            <li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Sites Contacts</Link></li>
                            <li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Comments</Link></li>
                        </ul>
                    </li>
@@ -48,13 +48,13 @@ export default function UserMenu() {
                            </div>
                        </Link>
                        <ul id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-bs-parent="#sidebarNav">
-                            <li className={`${pathname == siteLinks.user ? 'active' : ''}`}><Link to={siteLinks.user}>Users</Link></li>
+                            <li className={`${pathname == siteLinks.subscription ? 'active' : ''}`}><Link to={siteLinks.subscription}>Subscription</Link></li>
                            <li className={`${pathname == siteLinks.settings ? 'active' : ''}`}><Link to={siteLinks.settings}>Settings</Link></li>
                        </ul>
                    </li>


-                    <li className="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded">
+                    <li className="sidebar-banner p-4 bg-gradient text-center m-3 mt-auto d-block rounded">
                        <h5 className="text-white mb-1">MERMS Panel</h5>
                        <Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to='' onClick={logout}> Log Out</Link>
                    </li>
@@ -0,0 +1,71 @@
+import React from 'react'
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+
+export default function Onboard() {
+
+    const pricingFields ={
+        starter: { name: 'Starter', price:  5.99, active: true },
+        basic:   { name: 'Basic',   price: 12.99, active: true },
+        premium: { name: 'Premium', price: 20.00, active: true },
+    }
+
+    return (
+        <>
+            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
+
+
+
+            <div className="row">
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Current Subscription(s)</h5>
+                                <h2 className="text-primary pt-3">Basic</h2>
+                                {/*<p className="text-primary pb-3">/ Monthly</p>*/}
+                                {/*<ul className="py-2">*/}
+                                {/*    <li>post jobs</li>*/}
+                                {/*    <li>advanced instructors search</li>*/}
+                                {/*    <li>invite candidates</li>*/}
+                                {/*    <li>post events</li>*/}
+                                {/*    <li>cancel any time</li>*/}
+                                {/*</ul>*/}
+
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <>
+                    {Object.entries(pricingFields)?.map(([key, value]) => (
+
+                        <div key={key} className="col-xl-3 col-md-6">
+                            <div className="card card-statistics text-center py-3">
+                                <div className="card-body pricing-content">
+                                    <div className="pricing-content-card">
+                                        <h5>{value.name}</h5>
+                                        <h2 className="text-primary pt-3">${value.price}</h2>
+                                        <p className="text-primary pb-3">/ Monthly</p>
+                                        <ul className="py-2">
+                                            <li>post jobs</li>
+                                            <li>advanced instructors search</li>
+                                            <li>invite candidates</li>
+                                            <li>post events</li>
+                                            <li>cancel any time</li>
+                                        </ul>
+                                        <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go {value.name}</a></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    ))}
+                </>
+
+            </div>
+
+        </>
+    )
+}
@@ -1,140 +1,83 @@
-import React from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { useSelector } from "react-redux";
 import getImage from "../../utils/getImage";
-import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { productRefreshSite, getSettingsData } from "../../services/services";
+import Settings from "./settingsTab/Settings";
+import queryKeys from "../../services/queryKeys";


-export default function ProductActive(){
+export default function ProductActive({productData}){
+
+    const iframe = useRef()
+
+    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>*/}
+                                        <h4  style={{color: '#148399', fontWeight: 'bolder'}}>
+                                            <a  href={externalUrl} target='_blank'>{externalUrl}</a></h4>
+                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn">
+                                            <img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
+                                        </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={externalUrl}></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>
-                                    </div>
+                                <div className="card-body">
+                                    <Settings productData={productData} />
                                </div>
                            </div>
                        </div>
                    </div>
-                </div>
+                </>
            </div>
-
        </>
    )
 }
@@ -2,14 +2,16 @@ 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 { useLocation, useNavigate } from 'react-router-dom';
 import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
 import queryKeys from "../../services/queryKeys";
+import siteLinks from '../../links/siteLinks';

 export default function ProductFactory(){
+    const navigate = useNavigate()
    const location = useLocation();
    const pathname = location.pathname;

@@ -45,8 +47,9 @@ export default function ProductFactory(){
                    </>
                    : isError ?
                        <div className="row">
-                            <div className="col-12">
+                            <div className="text-center col-12" style={{minHeight: '500px', placeContent: 'center'}}>
                                <p className='text-danger'>{error?.message}</p>
+                                <button onClick={() => navigate(siteLinks.home)} className='mt-3 btn btn-primary'>Return Home</button>
                            </div>
                        </div>
                    :
@@ -83,7 +83,7 @@ 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>
-                            <div className="card-text" dangerouslySetInnerHTML={{__html: productDescription}}/>
+                            <div className="card-text" style={{fontSize: '14px'}} dangerouslySetInnerHTML={{__html: productDescription}}/>
                            {/* <p className="card-text">{productDescription}</p> */}
                        </div>
                    </div>
@@ -97,7 +97,7 @@ export default function ProductStart(props){
                                </>

                                <div className="card-body">
-                                    <p className="card-text">Start with your goals in mind and then work possible. </p>
+                                    <p className="card-text">We are actively working to launch this feature soon and will keep you informed every step of the way. </p>
                                </div>
                                <ul className="list-group list-group-flush">
                                    <li className="list-group-item"><h4>Coming soon!!!</h4></li>
@@ -109,19 +109,15 @@ export default function ProductStart(props){
                                {/*<img className="card-img-top" src={getImage('widget/01.jpg')} alt="Card image cap" />*/}
                                <div className="card-body">
                                    <h4 className="card-title">Subscription</h4>
-                                    <p className="card-text">Start with your goals in mind and then work possible.ith yand Goals. If the plan doesn’t support the vision then change it! </p>
+                                    <p className="card-text">Launch your <span style={{color: '#148399' , fontWeight: 'bolder'}}>{productTitle}</span> with us for free! Benefit from our dedicated support and customize features that align perfectly with your goals. Experience everything at no cost! </p>
                                </div>
                                <ul className="list-group list-group-flush">
                                    <li className="list-group-item"><h4>{promotion_text}</h4></li>
-                                    <li className="list-group-item">90 days free and 3.95/Month</li>
+                                    <li className="list-group-item">90 days free and $5.99/Month</li>
                                    <li className="list-group-item"></li>
                                </ul>
-                                {/*<div className="card-body">*/}
-                                {/*    <a href="javascript:void(0)" className="card-link">Card link</a>*/}
-                                {/*    <a href="javascript:void(0)" className="card-link">Another link</a>*/}
-                                {/*</div>*/}
                                <div  className="subscribe-box">
-                                    <button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Start Subscription</button>
+                                    <button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Activate Now!</button>
                                </div>
                            </div>
                        </>
@@ -134,13 +130,13 @@ export default function ProductStart(props){
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
-                            <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
+                            <h5 className="modal-title" style={{fontSize: '18px'}} id="verticalCenterTitle">{productTitle}</h5>
                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
-                            <div className="" dangerouslySetInnerHTML={{__html: saleText}}/>
+                            <div style={{fontSize: '18px'}} className="" dangerouslySetInnerHTML={{__html: saleText}}/>
                            {/* {mutation.error &&
                            <>
                                <div className="col-12">
@@ -162,8 +158,8 @@ export default function ProductStart(props){
                            )}
                        </div>
                        <div className="modal-footer">
-                            <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>
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                            <button type="button" className="btn btn-primary" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'activating...' : 'Start Activation'}</button>
                        </div>
                    </div>
                </div>
@@ -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>
+
+        </>
+    )
+}
@@ -0,0 +1,179 @@
+import React, {memo, useEffect, useMemo, useState} from 'react'
+import {useMutation, useQueryClient} from "@tanstack/react-query";
+import {pageSettings} from "../../../services/services";
+import SiteTemplateSelector from './SiteTemplateSelector';
+import NoYesBooleanDropdown from './NoYesBooleanDropdown';
+import {IoMdArrowDropdown} from 'react-icons/io';
+import queryKeys from '../../../services/queryKeys';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
+
+const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) => {
+
+        const queryClient = useQueryClient()
+
+        const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+
+
+        // const computeFieldData = useMemo(()=>{
+        //     const fieldData = {}
+        //     Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+        //     fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+        //     })
+        //     backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+        //     fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+        //     })
+        //     return fieldData
+        // },[backendValues.data])
+
+
+        const [fields, setFields] = useState({})
+
+        const sortedData = sortObjectByListOrder(data ? data : {}) // SORTED SETTINGSCONFIG
+
+        useEffect(() => {
+            const fieldData = {}
+            Object.entries(sortedData)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+                fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+            })
+            backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+                fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+            })
+            setFields(fieldData)
+        }, [backendValues.data])
+
+        const handleChange = ({target: {name, value}}) => {
+            setFields(prev => ({...prev, [name]: value}))
+            setFieldsChanged(true)
+        }
+
+        const submitSettings = useMutation({
+            mutationFn: (fields) => {
+                return pageSettings(fields)
+            },
+            onSuccess: (res) => {
+                if (res?.data?.resultCode != '0') {
+                    return setReqStatus({error: true, message: 'Unable to complete, try again later'})
+                }
+                setFieldsChanged(false)
+                setReqStatus({error: false, message: 'Completed successfully'})
+            },
+            onError: (err) => {
+                setReqStatus({error: true, message: 'Unable to complete, try again later'})
+            },
+            onSettled: () => {
+                queryClient.refetchQueries({  // refetches productProvision API call
+                    queryKey: [...queryKeys.settingsData],
+                })
+                setTimeout(() => {
+                    setReqStatus({error: null, message: ''})
+                }, 3000)
+            },
+        })
+
+        const handleSubmit = () => {
+            const reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id,
+                settings: {
+                    ...fields
+                }
+            }
+            submitSettings.mutate(reqData)
+        }
+
+        return (
+            <>
+                {backendValues?.isFetching || !backendValues?.data ?
+                    <>
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-mute'>Loading...</p>
+                            </div>
+                        </div>
+                    </>
+                    : backendValues?.isError ?
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-danger'>{backendValues?.error.message}</p>
+                            </div>
+                        </div>
+                        :
+                        <>
+                            {isCustom === true ?
+                                <SiteTemplateSelector name={name} data={sortedData} isCustom={isCustom}
+                                                      productData={productData}/>
+                                :
+                                <div className="page-account-form">
+                                    <div className="p-0" style={{minHeight: '500px'}}>
+
+                                        <form id='tab_form'>
+                                            <div className="form-row">
+                                                <>
+                                                    {Object.entries(sortedData)?.map(([key, value]) => {
+                                                            let fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
+                                                            let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                                            return (
+                                                                <div key={key} className="form-group col-md-12">
+                                                                    <label htmlFor="name1">{value.name}</label>
+                                                                    {value.controls === 'TEXT' ?
+                                                                        <input name={fieldName} type="text"
+                                                                               className="form-control" id={key}
+                                                                               value={fieldValue} onChange={handleChange}/>
+                                                                        : value.controls === 'TEXTAREA' ?
+                                                                            <textarea name={fieldName} rows={5}
+                                                                                      style={{resize: 'none'}} type="text"
+                                                                                      className="form-control" id={key}
+                                                                                      value={fieldValue}
+                                                                                      onChange={handleChange}/>
+                                                                            : value.controls === 'SELECT_NO_YES' ?
+                                                                                // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
+                                                                                <div className='position-relative'>
+                                                                                    <select onChange={handleChange}
+                                                                                            name={fieldName} value={fieldValue}
+                                                                                            className="form-control">
+                                                                                        <option value=''>Select</option>
+                                                                                        <option value='0'>No</option>
+                                                                                        <option value='1'>Yes</option>
+                                                                                    </select>
+                                                                                    <IoMdArrowDropdown
+                                                                                        className='position-absolute w-auto'
+                                                                                        style={{
+                                                                                            top: '50%',
+                                                                                            right: '2px',
+                                                                                            transform: 'translateY(-50%)'
+                                                                                        }}/>
+                                                                                </div>
+                                                                                :
+                                                                                null
+                                                                    }
+                                                                </div>
+                                                            )
+                                                        }
+                                                    )}
+                                                </>
+                                                {reqStatus.message &&
+                                                    <>
+                                                        <div className="col-12">
+                                                            <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                                                        </div>
+                                                    </>
+                                                }
+                                                <div className="form-group col-md-12" style={{textAlign: 'right'}}>
+                                                    <button onClick={handleSubmit} type="button" className="btn btn-primary"
+                                                            disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+                                                </div>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            }
+                        </>
+                }
+            </>
+        )
+    }
+)
+
+
+export default GeneralTab
@@ -0,0 +1,11 @@
+import React, {memo} from 'react'
+
+export default function NoYesBooleanDropdown(name, value, onChange) {
+    return (
+        <select onChange={onChange} name={name} value={value} className="form-control">
+            <option value=''>Select</option>
+            <option value='0'>No</option>
+            <option value='1'>Yes</option>
+        </select>
+    )
+}
@@ -0,0 +1,124 @@
+import React, { memo, useMemo, useState } from 'react'
+import GeneralTab from './GeneralTab'
+import { getSettingsData, getMyProductConfig } from '../../../services/services';
+import queryKeys from '../../../services/queryKeys';
+import { useSelector } from 'react-redux';
+import { useQuery } from '@tanstack/react-query';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
+
+const Settings = memo(({productData}) => {
+
+    const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
+
+    const {data:configData, isFetching:configIsFetching, configIsError, error:configError} = useQuery({
+        queryKey: queryKeys.myProductConfig,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getMyProductConfig(reqData)
+        },
+        staleTime: 0,
+    })
+    const settingsConfig = configData?.data?.settings_items
+    // console.log('CONFIG DATA...', settingsConfig)
+
+
+    const [fieldsChanged, setFieldsChanged] = useState(false)
+
+    // const [activeTab, setActiveTab] = useState(Object.entries(settingsConfig)[0][1]?.controls)
+     const [activeTab, setActiveTab] = useState(null)
+
+    const handleChangeTab = (value) => {
+        // if(fieldsChanged){
+        //     const proceed = confirm('Continue without saving changes')
+        //     if(proceed){
+        //         setActiveTab(value)
+        //         setFieldsChanged(false)
+        //     }
+        // }else{
+        //     setActiveTab(value)
+        // }
+        setActiveTab(value)
+    }
+
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.settingsData,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getSettingsData(reqData)
+        },
+        staleTime: 0,
+        enabled: settingsConfig ? true : false
+    })
+
+    const settingsData = {data: data?.data?.settings, isFetching, isError, error}
+    // console.log('data', settingsData)
+
+    const sortedSettingsConfig = sortObjectByListOrder(settingsConfig ? settingsConfig : {}) // SORTED SETTINGSCONFIG
+
+      return (
+        <>
+        {configIsFetching ? 
+            <>
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </div>
+            </>
+            : configIsError ?
+            <div className="row">
+                <div className="col-12">
+                    <p className='text-danger'>{configError.message}</p>
+                </div>
+            </div>
+            :
+            <div className="tab tab-vertical">
+                <ul className="nav nav-tabs" role="tablist">
+                    <>
+                        {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
+                            <li key={key} className="nav-item">
+                            <a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
+                                id={key} 
+                                // data-bs-toggle="pill"
+                                // data-bs-target={`#${value.controls}`}
+                                type="button" 
+                                // role="tab"
+                                // aria-controls={value.controls}
+                                // aria-selected="true"
+                                onClick={()=>handleChangeTab(value.controls)}
+                            >
+                                {value.title}
+                            </a>
+                            </li>
+                        ))}
+                    </>
+                </ul>
+                <div className="tab-content">
+                    <>
+                        {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
+                            <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
+                                // id={value.controls} role="tabpanel"
+                                // aria-labelledby={key}
+                            >
+                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
+                            </div>
+                        ))}
+                    </>
+                </div>
+            </div>
+            }
+        </>
+      )
+    }
+)
+
+export default Settings
@@ -0,0 +1,143 @@
+import React, {memo} from 'react'
+import getImage from "../../../utils/getImage";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import { getProductTemplateData, activateTemplate } from '../../../services/services';
+
+const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
+
+        const queryClient = useQueryClient()
+
+        const {data:templateData, isFetching, isError, error} = useQuery({
+            queryKey: queryKeys.productTemplateData,
+            queryFn: () => {
+                let reqData = {
+                    token: localStorage.getItem('token'), // USER TOKEN
+                    uid: localStorage.getItem('uid'), // USER UID
+                    product_id: productData?.product_id
+                }
+            return getProductTemplateData(reqData)
+            },
+            staleTime: 0
+        })
+
+        const templateResponse = templateData?.data
+        const currentTemUID = templateResponse?.current_template_uid
+        const templates = templateResponse?.templates
+
+        // console.log('data Template', templateResponse)
+        // console.log("Page data == ", data)
+
+        const handleActivateTemplate = useMutation({
+            mutationFn: (fields) => {
+                return activateTemplate(fields)
+            },
+            onSuccess: (res) => {
+                if(res?.data?.resultCode != '0'){
+                    throw new Error(res.data.resultDescription)
+                }
+                queryClient.refetchQueries({  // refetches productProvision API call
+                    queryKey: [...queryKeys.settingsData],
+                })
+            },
+            onSettled: () => {
+                setTimeout(()=>{
+                    handleActivateTemplate.reset()
+                }, 3000)
+            }
+        })
+
+        const handleSubmit = (tem_uid) => {
+            const reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id,
+                template_uid: tem_uid
+            }
+            // console.log(reqData)
+            handleActivateTemplate.mutate(reqData)
+        }
+
+        return (
+            <div className="page-account-form">
+                <div className="p-0">
+                    {isFetching ? 
+                    <>
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-mute'>Loading...</p>
+                            </div>
+                        </div>
+                    </>
+                    : isError ?
+                    <div className="row">
+                        <div className="col-12">
+                            <p className='text-danger'>{error?.message}</p>
+                        </div>
+                    </div>
+                    :
+                    <div className="row">
+                        <>
+                        {!templates?.length ?
+                            <p>No data Found</p>
+                            :
+                            templates.map(template => (
+                                <div key={template.template_uid} className="col-xl-6 col-sm-6">
+                                    <div className="card card-statistics">
+                                        <div className="card-body">
+                                            <div className="text-center p-2">
+                                                <div className="mb-2">
+                                                    <img  src={getImage('file-icon/svg.png')} alt={template.title} />
+                                                </div>
+                                                <h4 className="mb-0">{template.title}</h4>
+                                                {currentTemUID == template.template_uid ?
+                                                <button className="btn btn-light" disabled={true}>Active</button>
+                                                :
+                                                <button onClick={()=>handleSubmit(template.template_uid)} className="btn btn-primary">Activate</button>
+                                                }
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                            {/* {Object.entries(data)?.map(([key, value]) => (
+                                <div key={key} className="col-xl-6 col-sm-6">
+                                    <div className="card card-statistics">
+                                        <div className="card-body">
+                                            <div className="text-center p-2">
+                                                <div className="mb-2">
+                                                    <img  src={getImage(value.banner)} alt={value.title} />
+                                                </div>
+                                                <h4 className="mb-0">{value.title}</h4>
+                                                <a href="javascript:void(0)" className="btn btn-light">Activate</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))} */}
+                        </>
+                        
+                        <div className="col-12">
+                            <>
+                            {handleActivateTemplate.isPending ?
+                            <p className={'text-center '}>loading...</p>
+                            :
+                            handleActivateTemplate.isError ?
+                            <p className={'text-center text-danger'}>{handleActivateTemplate.error.message}</p>
+                            :
+                            handleActivateTemplate.isSuccess?
+                            <p className={'text-center text-success'}>Templated activated successfully</p>
+                            :
+                            null
+                            }
+                            </>
+                        </div>
+                    </div>
+                    }
+                </div>
+            </div>
+        )
+    }
+)
+export default SiteTemplateSelector
@@ -0,0 +1,128 @@
+import React, {memo, useState} from 'react'
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { pageSettings } from "../../../services/services";
+import SiteTemplateSelector from './SiteTemplateSelector';
+import NoYesBooleanDropdown from './NoYesBooleanDropdown';
+import { IoMdArrowDropdown } from 'react-icons/io';
+import queryKeys from '../../../services/queryKeys';
+
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+
+    const queryClient = useQueryClient()
+
+    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+
+    const fieldData = {}
+    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+    fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+    })
+    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+    fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+    })
+
+    // console.log('fieldData', fieldData)
+
+    const [fields, setFields] = useState(fieldData)
+    
+    const handleChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+        setFieldsChanged(true)
+    }
+
+    const submitSettings = useMutation({
+        mutationFn: (fields) => {
+            return pageSettings(fields)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                return setReqStatus({error: true, message: 'Unable to complete, try again later'})
+            }
+            setFieldsChanged(false)
+            setReqStatus({error: false, message: 'Completed successfully'})
+        },
+        onError: (err) => {
+            setReqStatus({error: true, message: 'Unable to complete, try again later'})
+        },
+        onSettled: () => {
+            queryClient.refetchQueries({  // refetches productProvision API call
+                queryKey: [...queryKeys.settingsData],
+            })
+            setTimeout(()=>{
+                setReqStatus({error: null, message: ''})
+            },3000)
+        },
+    })
+
+      const handleSubmit = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData?.product_id,
+            settings : {
+            ...fields
+            }
+        }
+        // console.log('formInfo', reqData)
+        submitSettings.mutate(reqData)
+      }
+
+      if (isCustom ===  true){
+          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+      }
+
+
+      return (
+        <div className="page-account-form">
+            <div className="p-0" style={{ minHeight: '500px'}}>
+
+                <form id='tab_form'>
+                    <div className="form-row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => {
+                                let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
+                                let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                return (
+                                    <div key={key} className="form-group col-md-12">
+                                        <label htmlFor="name1">{value.name}</label>
+                                        {value.controls == 'TEXT' ?
+                                            <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            :value.controls == 'TEXTAREA' ?
+                                            <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            : value.controls == 'SELECT_NO_YES' ?
+                                            // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
+                                            <div className='position-relative'>
+                                                <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
+                                                    <option value=''>Select</option>
+                                                    <option value='0'>No</option>
+                                                    <option value='1'>Yes</option>
+                                                </select>
+                                                <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
+                                            </div>
+                                            :
+                                            null
+                                        }
+                                    </div>
+                                )
+                            }
+                            )}
+                        </>
+                        {reqStatus.message &&
+                            <>
+                            <div className="col-12">
+                                <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                            </div>
+                            </>
+                        }
+                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+      )
+    }
+)
+
+
+export default GeneralTab
@@ -0,0 +1,179 @@
+import React, { memo, useMemo, useState } from 'react'
+import GeneralTab from './GeneralTab'
+import { getSettingsData, getMyProductConfig } from '../../../services/services';
+import queryKeys from '../../../services/queryKeys';
+import { useSelector } from 'react-redux';
+import { useQuery } from '@tanstack/react-query';
+
+const Settings = memo(({productData}) => {
+
+    const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
+
+    const {data:configData, isFetching:configIsFetching, configIsError, error:configError} = useQuery({
+        queryKey: queryKeys.myProductConfig,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getMyProductConfig(reqData)
+        }
+    })
+    const settingsConfig = configData?.data?.settings_items
+    // console.log('CONFIG DATA...', settingsConfig)
+   
+    const dataFields ={
+        site_title: { name: 'Title', controls: 'TEXT', active: true },
+        site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
+        site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
+        site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
+        site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
+    }
+
+    const socialFields ={
+        facebook: { name: 'Facebook', controls: 'TEXT', active: true },
+        twitter: { name: 'Twitter', controls: 'TEXT', active: true },
+        youtube: { name: 'Youtube', controls: 'TEXT', active: true },
+    }
+
+    const homeFields ={
+        banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
+        banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
+    }
+
+    const footerFields ={
+        footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
+        boolean_footer_show_email: { name: 'Show email in footer', controls: 'SELECT_NO_YES', active: true },
+        boolean_footer_show_made_by: { name: 'Show made by in footer', controls: 'SELECT_NO_YES', active: true },
+        boolean_footer_show_socials: { name: 'Show social in footer', controls: 'SELECT_NO_YES', active: true },
+    }
+
+    const aboutFields ={
+        about_title: { name: 'About Title', controls: 'TEXT', active: true },
+        about_description: { name: 'About Details', controls: 'TEXTAREA', active: true },
+        about_extra_1: { name: 'Extra About us', controls: 'TEXTAREA', active: true },
+        about_extra_2: { name: 'More About us', controls: 'TEXTAREA', active: true },
+    }
+
+    const templateData = {
+        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
+        template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
+        template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
+        template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
+        template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
+        template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
+        template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
+        template_9 : { title: 'Template Name-9',   template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
+    }
+
+    const contactFields ={
+        contact_title : { name: 'Contact Title', controls: 'TEXT', active: true },
+        contact_introduction: { name: 'Extra Introduction', controls: 'TEXTAREA', active: true },
+    }
+
+    const settingsObject = useMemo(()=>{
+        return {
+           settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
+           home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false,  data: homeFields},
+           footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
+           about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
+           contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: contactFields },
+           social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
+           template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
+           color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
+       };
+    },[])
+
+
+    const [fieldsChanged, setFieldsChanged] = useState(false)
+
+    const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+
+    const handleChangeTab = (value) => {
+        // if(fieldsChanged){
+        //     const proceed = confirm('Continue without saving changes')
+        //     if(proceed){
+        //         setActiveTab(value)
+        //         setFieldsChanged(false)
+        //     }
+        // }else{
+        //     setActiveTab(value)
+        // }
+        setActiveTab(value)
+    }
+
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.settingsData,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getSettingsData(reqData)
+        }
+    })
+
+    const settingsData = data?.data?.settings
+    // console.log('data', settingsData)
+
+      return (
+        <>
+        {isFetching ? 
+            <>
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </div>
+            </>
+            : isError ?
+            <div className="row">
+                <div className="col-12">
+                    <p className='text-danger'>{error.message}</p>
+                </div>
+            </div>
+            :
+            <div className="tab tab-vertical">
+                <ul className="nav nav-tabs" role="tablist">
+                    <>
+                        {Object.entries(settingsObject).map(([key, value]) => (
+                            <li key={key} className="nav-item">
+                            <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
+                                id={key} 
+                                // data-bs-toggle="pill"
+                                // data-bs-target={`#${value.controls}`}
+                                type="button" 
+                                // role="tab"
+                                // aria-controls={value.controls}
+                                // aria-selected="true"
+                                onClick={()=>handleChangeTab(value.controls)}
+                            >
+                                {value.title}
+                            </a>
+                            </li>
+                        ))}
+                    </>
+                </ul>
+                <div className="tab-content">
+                    <>
+                        {Object.entries(settingsObject).map(([key, value]) => (
+                            <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                // id={value.controls} role="tabpanel"
+                                // aria-labelledby={key}
+                            >
+                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
+                            </div>
+                        ))}
+                    </>
+                </div>
+            </div>
+            }
+        </>
+      )
+    }
+)
+
+export default Settings
@@ -0,0 +1,245 @@
+import React, {useEffect, useMemo, useState} from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+// import { useLocation } from "react-router-dom";
+// import { Form, Formik } from "formik";
+import * as Yup from "yup";
+import {useMutation, useQuery} from "@tanstack/react-query";
+import getImage from "../../utils/getImage";
+import {IoMdArrowDropdown} from "react-icons/io";
+import {completeProfile, getCommonPractice} from '../../services/services';
+import siteLinks from "../../links/siteLinks";
+import {useLocation, useNavigate} from "react-router-dom";
+import {updateUserDetails} from "../../store/UserDetails";
+import {useDispatch} from "react-redux";
+
+
+// const validationSchema = Yup.object().shape({
+//     practice: Yup.string().required("Required"),
+//     specialization: Yup.string().required("Required"),
+//     introduction: Yup.string().min(1, "Minimum 10 characters").max(50, "Maximum 50 characters").required("Required"),
+// })
+
+//   const initialValues = {
+//     practice: '',
+//     specialization: '',
+//     introduction: '',
+//   };
+
+
+export default function ProfileCompleteCom() {
+
+    const dispatch = useDispatch()
+
+    const navigate = useNavigate()
+
+    const {state: {redirectLink}} = useLocation()
+
+    const [practices, setPractices] = useState([])
+
+    const [initialValues, setInitialValues] = useState({
+        practice: '',
+        specialization: '',
+        introduction: '',
+    })
+
+    const specialties = useMemo(() => { // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
+        setInitialValues(prev => ({...prev, specialization: ''}))
+        if (!initialValues.practice) {
+            return []
+        }
+        const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties
+        return specialtiesArr
+    }, [initialValues.practice])
+
+
+    const mutation = useMutation({
+        mutationFn: (fields) => {
+            const {practice, specialization} = fields
+            if (!practice || !specialization) {
+                throw new Error('Please select both practice and specialization fields')
+            }
+            return completeProfile(fields)
+        },
+        onError: () => {
+            setTimeout(() => {
+                mutation.reset()
+            }, 4000)
+        },
+        onSuccess: (res) => {
+            if (res.data.resultCode != '0') {
+                throw({message: res?.data?.resultDescription})
+            }
+            dispatch(updateUserDetails({profile_completed: res?.data?.profile_completed}));
+            setTimeout(() => {
+                navigate(redirectLink)
+            }, 2000)
+            // console.log('res', res)
+        }
+    })
+
+    const commonPractices = useMutation({ // FUNCTION TO GET COMMON PRACTICES
+        mutationFn: (fields) => {
+            return getCommonPractice(fields)
+        },
+        onError: () => {
+            setPractices([])
+        },
+        onSuccess: (res) => {
+            if (!res?.data) {
+                return setPractices([])
+            }
+            let returnPractices = Object.entries(res?.data).filter(([key, value]) => typeof value == 'object')?.map(item => item[1])
+            setPractices(returnPractices)
+        }
+    })
+
+    const handlePracticeChange = ({target: {name, value}}) => {
+        setInitialValues(prev => ({...prev, [name]: value}))
+    }
+
+    const handleCompleteProfile = () => { // FUNCTION TO COMPLETE PROFILE
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            ...initialValues
+        }
+        mutation.mutate(reqData)
+    }
+
+    useEffect(() => {
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid') // USER UID
+        }
+        commonPractices.mutate(reqData)
+    }, [])
+
+    return <>
+
+        <BreadcrumbComBS title='Tell us more about your practice.' paths={['Dashboard', 'Profile']}/>
+
+        {commonPractices?.isFetching ?
+            <>
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </div>
+            </>
+            : commonPractices?.isError ?
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-danger'>{commonPractices?.error?.message}</p>
+                    </div>
+                </div>
+                :
+                <div className="row pt-1">
+                    <div className="col-md-6 m-b-30">
+                        <div className="card card-statistics h-100 mb-0" style={{borderRadius: '10px'}}>
+                            {/* <div className="card-header d-flex align-items-center justify-content-between">
+                            <div className="card-heading">
+                                <h4 className="card-title">My Product URLs</h4>
+                            </div>
+                        </div> */}
+                            {/* <div style={{minHeight: '400px'}}></div> */}
+                            <div className="card-body">
+                                <div className='h-100 row flex-column'>
+                                    {/* <div className="row"> */}
+                                    <>
+                                        <div className="">
+                                            <div className="form-group position-relative">
+                                                <label className={`text-black fw-bold control-label`}>Practice :</label>
+                                                <div className="position-relative">
+                                                    {/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
+                                                        <option value=''>Select</option>
+                                                        {practices.map((practice, index)=>(
+                                                            <option key={index} value={practice.practice}>{practice.practice}</option>
+                                                        ))}
+                                                    </select> */}
+                                                    <select onChange={handlePracticeChange} name='practice'
+                                                            value={initialValues.practice} className="form-control">
+                                                        <option value=''>Select</option>
+                                                        {practices.map((practice, index) => (
+                                                            <option key={index}
+                                                                    value={practice.practice}>{practice.practice}</option>
+                                                        ))}
+                                                    </select>
+                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{
+                                                        top: '50%',
+                                                        right: '2px',
+                                                        transform: 'translateY(-50%)'
+                                                    }}/>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div className="">
+                                            <div className="form-group">
+                                                <label className={`text-black fw-bold control-label`}>Your
+                                                    Specialization :</label>
+                                                <div className="position-relative">
+                                                    <select onChange={handlePracticeChange} name='specialization'
+                                                            value={initialValues.specialization}
+                                                            className="form-control">
+                                                        <option value=''>Select</option>
+                                                        {specialties.map((specialty, index) => (
+                                                            <option key={index} value={specialty}>{specialty}</option>
+                                                        ))}
+                                                    </select>
+                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{
+                                                        top: '50%',
+                                                        right: '2px',
+                                                        transform: 'translateY(-50%)'
+                                                    }}/>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div className="">
+                                            <div className="form-group position-relative">
+                                                <label className={`text-black fw-bold control-label`}>Other General
+                                                    Information :</label>
+                                                <textarea name='introduction' rows={10} style={{resize: 'none'}}
+                                                          className="form-control" value={initialValues.introduction}
+                                                          onChange={handlePracticeChange}/>
+                                            </div>
+                                        </div>
+
+                                        <div className="">
+                                            <div className="form-group position-relativ'e">
+                                                {/*<label className={`text-black fw-bold control-label`}>What we use this*/}
+                                                {/*    information for :</label>*/}
+                                                <div style={{fontSize: '14px', borderRadius: '10px', backgroundColor: 'aliceblue', fontWeight:'bolder', padding: '15px' }}>
+                                                    MERMS A.I. agents use the information supplied to help generate useful entries for your product settings.
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        {(mutation.isError || mutation.isSuccess) &&
+                                            <>
+                                                <div className="">
+                                                    <p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
+                                                </div>
+                                            </>
+                                        }
+
+                                        <div className="mt-auto text-end">
+                                            <button type='button' onClick={handleCompleteProfile}
+                                                    className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
+                                        </div>
+                                    </>
+                                    {/* </div> */}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-md-6 m-b-30">
+                        <div className="text-center img-block left-column wow fadeInRight">
+                            <img className="img-fluid" src={getImage('tell-us-more.png')} alt="content-image"/>
+                        </div>
+                    </div>
+                </div>
+        }
+    </>;
+
+}
@@ -1,12 +1,13 @@
 import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";


-export default function Settings(){
-
-    return(
+export default function Settings() {
+    const avtarImage = "avtar/merms-user.png";
+    return (
        <>
-            <BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']} />
+            <BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']}/>
            {/*<div className="row">*/}
            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
            {/*</div>*/}
@@ -15,48 +16,27 @@ export default function Settings(){
            <div className="row account-contant">
                <div className="col-12">
                    <div className="card card-statistics">
-                        <div className="card-body p-0" style={{backgroundColor:"#f9f9fb"}}>
+                        <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">
                                        <div className="profile-img text-center rounded-circle">
                                            <div className="pt-5">
                                                <div className="bg-img m-auto">
-                                                    <img src="assets/img/avtar/01.jpg" className="img-fluid"
-                                                         alt="users-avatar" />
+                                                    {/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
+                                                    {/*     alt="users-avatar" />*/}
+                                                    <img src={getImage(avtarImage)}
+                                                         className="img-fluid" alt="user"/>
                                                </div>
                                                <div className="profile pt-4">
                                                    <h4 className="mb-1">Alice Williams</h4>
-                                                    <p>Enthusiast</p>
+                                                    <div style={{padding: '10px'}}>
+                                                        <hr/>
+                                                    </div>
                                                </div>
                                            </div>
                                        </div>

-                                        <div className="py-5 profile-counter">
-                                            <ul className="nav justify-content-center text-center">
-                                                <li className="nav-item border-right px-3">
-                                                    <div>
-                                                        <h4 className="mb-0">90</h4>
-                                                        <p>Post</p>
-                                                    </div>
-                                                </li>
-
-                                                <li className="nav-item border-right px-3">
-                                                    <div>
-                                                        <h4 className="mb-0">1.5K</h4>
-                                                        <p>Messages</p>
-                                                    </div>
-                                                </li>
-
-                                                <li className="nav-item px-3">
-                                                    <div>
-                                                        <h4 className="mb-0">4.4K</h4>
-                                                        <p>Members</p>
-                                                    </div>
-                                                </li>
-                                            </ul>
-                                        </div>
-
                                        <div className="profile-btn text-center">
                                            <div>
                                                <button className="btn btn-light text-primary mb-2">Upload New Avatar
@@ -79,17 +59,17 @@ export default function Settings(){
                                                    <div className="form-group col-md-12">
                                                        <label htmlFor="name1">First Name</label>
                                                        <input type="text" className="form-control" id="name1"
-                                                               value="Alice" />
+                                                               value="Alice"/>
                                                    </div>
                                                    <div className="form-group col-md-12">
                                                        <label htmlFor="name1">Last Name</label>
                                                        <input type="text" className="form-control" id="name1"
-                                                               value="Williams" />
+                                                               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" />
+                                                               value="This is the best hospital name"/>
                                                    </div>
                                                    {/*<div className="form-group col-md-12">*/}
                                                    {/*    <label htmlFor="title1">Email</label>*/}
@@ -99,23 +79,23 @@ export default function Settings(){
                                                    <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" />
+                                                               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" />
+                                                               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" />
+                                                           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" />
+                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>
                                                </div>

                                                {/*<div className="form-row">*/}
@@ -154,7 +134,7 @@ export default function Settings(){
                                                {/*            </label>*/}
                                                {/*    </div>*/}
                                                {/*</div>*/}
-                                                <div style={{textAlign:"right"}}>
+                                                <div style={{textAlign: "right"}}>
                                                    <button type="submit" className="btn btn-primary">Update Profile
                                                    </button>
                                                </div>
@@ -173,39 +153,40 @@ export default function Settings(){
                                                <div className="form-group">
                                                    <label htmlFor="fb">Facebook URL:</label>
                                                    <input type="text" className="form-control" id="fb"
-                                                           value="https://www.facebook.com/" />
+                                                           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/" />
+                                                           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" />
+                                                           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" />
+                                                           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/" />
+                                                           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" />
+                                                           value="https://yourwebsite.com"/>
                                                </div>
-                                                <div style={{textAlign:"right"}}>
-                                                    <button type="submit" className="btn btn-primary">Update Links</button>
+                                                <div style={{textAlign: "right"}}>
+                                                    <button type="submit" className="btn btn-primary">Update Links
+                                                    </button>
                                                </div>

                                            </form>
@@ -0,0 +1,82 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+
+export default function Start() {
+
+    const bgImg = getImage("side-banner.jpg");
+
+    return (
+        <>
+            <BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']}/>
+            <div className="row">
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3"
+                         style={{minHeight: '550px', borderRadius: '10px', backgroundImage: `url(${bgImg})`}}>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Start with</h5>
+                                <h2 className="text-primary pt-3"><a href="/product/A000001">Personal Website</a></h2>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <li>post events</li>
+                                    <li>cancel any time</li>
+                                </ul>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Start with</h5>
+                                <h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <li>post events</li>
+                                    <li>cancel any time</li>
+                                </ul>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    {/*<div className="card card-statistics text-center py-3">*/}
+                    {/*<div className="card-body pricing-content">*/}
+                    {/*<div className="pricing-content-card">*/}
+                    {/*    <h5>small</h5>*/}
+                    {/*    <h2 className="text-primary pt-3">$80</h2>*/}
+                    {/*    <p className="text-primary pb-3">/ Monthly</p>*/}
+                    {/*    <ul className="py-2">*/}
+                    {/*        <li>post jobs</li>*/}
+                    {/*        <li>advanced instructors search</li>*/}
+                    {/*        <li>invite candidates</li>*/}
+                    {/*        <li>post events</li>*/}
+                    {/*        <li>cancel any time</li>*/}
+                    {/*    </ul>*/}
+                    {/*    <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
+                </div>
+            </div>
+
+        </>
+    )
+}
@@ -0,0 +1,57 @@
+import React from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+import {MyProductData, StripeSubscriptionCreate} from '../../services/services';
+import {useQuery} from "@tanstack/react-query";
+import queryKeys from "../../services/queryKeys";
+import { useNavigate } from 'react-router-dom';
+//const stripePromise = loadStripe('your_stripe_publishable_key');
+const stripePromise = loadStripe('pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT');
+
+const CheckoutForm = ({ priceId, customerId ,option_name }) => {
+    const stripe = useStripe();
+    const elements = useElements();
+    const navigate = useNavigate();
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+
+        if (!stripe || !elements) {
+            return;
+        }
+
+        let reqData = {
+            priceId : priceId,
+            customerId: customerId,
+            option_name: option_name,
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid') // USER UID
+        }
+
+        StripeSubscriptionCreate(reqData).then( (res)=>{
+            console.log(res);
+            console.log(res.data.stripe_session);
+            //navigate(res.data.stripe_session)
+            window.location.replace(res.data.stripe_session);
+        });
+
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <CardElement />
+            <button type="submit" disabled={!stripe}>
+                Subscribe
+            </button>
+        </form>
+    );
+};
+
+const StripeSubscriptionButton = ({ priceId, customerId ,option_name}) => {
+    return (
+        <Elements stripe={stripePromise}>
+            <CheckoutForm priceId={priceId} customerId={customerId} option_name={option_name} />
+        </Elements>
+    );
+};
+
+export default StripeSubscriptionButton;
@@ -0,0 +1,35 @@
+import React from 'react'
+
+export default function SubcribePaymentOptions({activePaymentType, setActivePaymentType}){
+
+    const handleSwitch = ({target:{name, value}}) => {
+        console.log('SWITCH', name, value)
+        setActivePaymentType(value)
+    }
+
+    return <>
+
+
+                <div className="card-header">
+                    <div className="card-heading">
+                        <h4 className="card-title">Select Payment Option</h4>
+                    </div>
+                </div>
+                <div className="card-body">
+
+                    <div className="form-check form-check-inline">
+                        <input onChange={handleSwitch} className="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
+                               value="previous" checked={activePaymentType == 'previous'} />
+                            <label className="form-check-label" htmlFor="inlineRadio1">Previous Cards</label>
+                    </div>
+                    <div className="form-check form-check-inline">
+                        <input onChange={handleSwitch} className="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
+                               value="new" checked={activePaymentType == 'new'} />
+                            <label className="form-check-label" htmlFor="inlineRadio2">Add New card</label>
+                    </div>
+                </div>
+                {/*<div className="card card-statistics"> </div>*/}
+
+    </>
+
+}
@@ -0,0 +1,72 @@
+import React, {useState} from 'react'
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import {Link, useLocation} from 'react-router-dom'
+import SubscribeNewCard from "./SubscribeNewCard";
+import SubscribePreviousCard from "./SubscribePreviousCard";
+import SubcribePaymentOptions from "./SubcribePaymentOptions";
+import StripeSubscriptionButton from "./StripeSubscriptionButton";
+
+
+
+
+export default function Subscribe() {
+    const {state: {selectedSubscription,customerId}} = useLocation()
+
+    console.log('selectedSubscription', selectedSubscription)
+    console.log('selectedSubscription.option_name',selectedSubscription.option_name)
+    console.log('customerId', customerId)
+
+    let [activePaymentType, setActivePaymentType] = useState('previous')
+
+    return (
+        <>
+            <BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']}/>
+
+            <div className="row">
+                <div className="col-12 col-lg-6 col-xl-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Current Subscription(s)</h5>
+                                {/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
+                                <SubcribePaymentOptions activePaymentType={activePaymentType}
+                                                        setActivePaymentType={setActivePaymentType}/>
+                                {activePaymentType == 'new' ?
+                                    <SubscribeNewCard/>
+                                    :
+                                    <SubscribePreviousCard/>
+                                }
+                                <>
+                                    <StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id} customerId={customerId} option_name={selectedSubscription.option_name} />
+                                </>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <>
+                    <div key="basic" className="col-12 col-lg-6 col-xl-6">
+                        <div className="card card-statistics text-center py-3">
+                            <div className="card-body pricing-content">
+                                <div className="pricing-content-card">
+                                    <h5>{selectedSubscription.display_name}</h5>
+                                    <h2 className="text-primary pt-3">${selectedSubscription.monthly}</h2>
+                                    <p className="text-primary pb-3">/ Monthly</p>
+                                    <ol className="py-2"
+                                        style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
+                                        {selectedSubscription?.items?.map(item => (
+                                            <li key={item.description}>{item.description}</li>
+                                        ))}
+                                    </ol>
+                                    {/*<div className="pt-2">*/}
+                                    {/*    <button   className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
+                                    {/*</div>*/}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </>
+            </div>
+        </>
+    )
+}
@@ -0,0 +1,28 @@
+import React from 'react'
+export default function SubscribeNewCard(){
+
+    return <>
+        <div className="row">
+            <div className="col-md-12 col-12 selects-contant">
+                <div className="card card-statistics">
+                    <div className="card-header">
+                        <div className="card-heading" style={{textAlign: 'left'}}>
+                            <h4 className="card-title">Pay with New Card</h4>
+                        </div>
+                    </div>
+                    <div className="card-body">
+                        <div className="form-group mb-0">
+
+
+
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+    </>
+
+}
@@ -0,0 +1,36 @@
+import React from 'react'
+import { IoMdArrowDropdown } from 'react-icons/io'
+
+export default function SubscribePreviousCard() {
+
+    return <>
+        {/*<div className="row select-wrapper">*/}
+        {/*    <div className="col-md-12 col-12 selects-contant">*/}
+                <div className="row">
+                    <div className="col-md-12 col-12 selects-contant">
+                        <div className="card card-statistics">
+                            <div className="card-header">
+                                <div className="card-heading" style={{textAlign: 'left'}}>
+                                    <h4 className="card-title">Pay with Previous Card</h4>
+                                </div>
+                            </div>
+                            <div className="card-body">
+                                <div className="position-relative form-group mb-0">
+                                    <select className="js-basic-single form-control" name="state">
+                                        <option value="AK">Visa xxxx xxxx xxxx 1234</option>
+                                        <option value="HI">Mastercard xxxx xxxx xxxx 1234</option>
+                                    </select>
+                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+            {/*    </div>*/}
+            {/*</div>*/}
+        </div>
+
+
+    </>
+
+}
@@ -0,0 +1,111 @@
+import React from 'react'
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+import {getSubscriptions} from '../../services/services';
+import {useQuery} from '@tanstack/react-query';
+import queryKeys from '../../services/queryKeys';
+import siteLinks from "../../links/siteLinks";
+import {Link, useNavigate} from 'react-router-dom'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
+
+export default function Subscription() {
+    const navigate = useNavigate()
+    const pricingFields = {
+        starter: {name: 'Starter', price: 5.99, active: true},
+        basic: {name: 'Basic', price: 12.99, active: true},
+        premium: {name: 'Premium', price: 20.00, active: true},
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.subscriptions,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getSubscriptions(reqData)
+        }
+    })
+
+    const currentSubscription = data?.data?.current_product
+    const otherSubscriptions = data?.data?.options
+    const stripe_customer_id = data?.data.stripe_customer_id
+
+    // console.log('urlData', data?.data)
+
+    return (
+        <>
+            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']}/>
+
+            {isFetching ?
+                <>
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </>
+                : isError ?
+                    <div className="col-12">
+                        <p className='text-danger'>{error.message}</p>
+                    </div>
+                    :
+                    <div className="row">
+                        <div className="col-12 col-lg-6 col-xl-3">
+                            <div className="card card-statistics text-center py-3" style={{backgroundColor: '#e6f5f4'}}>
+                                <div className="card-body pricing-content">
+                                    <div className="pricing-content-card" style={{minHeight: '350px'}}>
+                                        <h5>Your Subscription(s)</h5>
+                                        <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
+                                    </div>
+                                    <div className="pt-2" style={{textAlign: 'left'}}>
+                                        <div style={{fontSize: '12px', fontWeight: 'bolder' , color: "#3E3699"  }}>
+                                            Next Payment: {getDateTimeFromDateString(currentSubscription?.next_payment)}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <>
+                            {Object.entries(otherSubscriptions)?.map(([key, value]) => (
+
+                                <div key={key} className="col-12 col-lg-6 col-xl-3">
+                                    <div className="card card-statistics text-center py-3">
+                                        <div className="card-body pricing-content">
+                                            <div className="pricing-content-card" style={{minHeight: '350px'}}>
+                                                <h5>{value.display_name}</h5>
+                                                <h2 className="text-primary pt-3">${value.monthly}</h2>
+                                                <p className="text-primary pb-3">/ Monthly</p>
+                                                <ol className="py-2"
+                                                    style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
+                                                    {value?.items?.map(item => (
+                                                        <li key={item.description}>{item.description}</li>
+                                                    ))}
+                                                </ol>
+
+                                            </div>
+                                        </div>
+                                        <div className="pt-2" style={{fontWeight: 'bolder'}}>
+                                            {
+                                                (currentSubscription?.display_name == value.option_name) ? 'Current Subscription' :
+                                                    <button onClick={() => {
+                                                        navigate(siteLinks.subscribe, {
+                                                            state: {
+                                                                selectedSubscription: value,
+                                                                customerId: stripe_customer_id
+                                                            }
+                                                        })
+                                                    }}
+                                                            className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
+                                            }
+                                        </div>
+                                    </div>
+                                </div>
+
+                            ))}
+                        </>
+
+                    </div>
+            }
+        </>
+    )
+}
@@ -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;
@@ -90,7 +90,23 @@ $today-highlight-bg: #fcf8e3;
 $btn-bg: #8e54e9;
 $btn-border: #8e54e9;
 $event-padding: 10px;
+.manage{
+  background-color:lightgreen !important;
+  border-radius: 5px !important;
+}
+.creating{
+  background-color: lightyellow !important;
+  border-radius: 5px !important;
+}
+.billing{
+  background-color: #b9c2c5;
+  color: #77117a;
+}

+.next_billing{
+  background-color: #cff1f0;
+  color: #19548e;
+}
 .extraProductCard{
  background-color: aliceblue;
  border-radius: 5px;
@@ -0,0 +1,17 @@
+function getDateFromDateString(dateString) {
+    const date = new Date(dateString);
+    
+    // Ensure the date is valid
+    if (isNaN(date)) {
+        return "Invalid date string";
+    }
+
+    // Get the year, month, and day
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');  // Months are 0-indexed, so we add 1
+    const day = String(date.getDate()).padStart(2, '0');
+
+    return `${year}-${month}-${day}`;
+}
+
+export default getDateFromDateString
@@ -0,0 +1,33 @@
+function getDateTimeFromDateString(dateString) {
+  const date = new Date(dateString);
+
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
+                  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+  const dayName = days[date.getDay()];
+  const monthName = months[date.getMonth()];
+  const day = date.getDate();
+  const year = date.getFullYear();
+
+  // Add ordinal suffix
+  function getOrdinal(n) {
+    if (n > 3 && n < 21) return "th"; // 4-20 are all "th"
+    switch (n % 10) {
+      case 1: return "st";
+      case 2: return "nd";
+      case 3: return "rd";
+      default: return "th";
+    }
+  }
+
+  // Format time in 12hr with AM/PM
+  let hours = date.getHours();
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const ampm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12 || 12;
+
+  return `${dayName}, ${monthName} ${day}${getOrdinal(day)} ${year} ${hours}:${minutes}${ampm}`;
+}
+
+export default getDateTimeFromDateString
@@ -0,0 +1,14 @@
+const sortObjectByListOrder = (data) => {
+    const sortedEntriesByValue = Object.entries(data).sort((a, b) => {
+        if(a[1].list_order > b[1].list_order){
+            return 1
+        }else{
+            return -1
+        }
+    }); // Sorts numerically by value
+
+    const sortedObjectByValue = Object.fromEntries(sortedEntriesByValue);
+    return sortedObjectByValue
+}
+
+export default sortObjectByListOrder
@@ -3,17 +3,24 @@ const siteLinks = {
    help: '/help',
    home: '/',
    dash: '/dash',
+    start: '/start',
+    profile_complete: '/profile-complete',
    product: '/product/*',
    contacts: '/contacts',
    comments: '/comments',
    reports: '/reports',
+    subscription: '/subscription',
+    subscription_success:'/subscription-success',
+    subscribe: '/subscribe',
+    onboard: '/subscription',
    user: '/user',
    calendar: '/calendar',
    settings: '/settings',
    login: '/auth/login',
    signup: '/auth/signup',
    forgetpwd: '/auth/forgetpwd',
-    csignup: '/csignup/:jwt'
+    csignup: '/csignup/:jwt',
+    accreset: '/accreset/:token'
 }

 export default siteLinks
@@ -1,13 +1,18 @@
 const queryKeys = {
    user_details: ['user_details'],
    product_url: ['product_url'],
+    dash_payments: ['dash_payments'],
    products: ['product-data'],
    myproduct_provision: ['myproduct_provision'],
    product_page: ['product_page'],
+    recentAction: ['recent-action'],
+    settingsData: ['settings_data'],
+    myProductConfig: ['myproduct_config'],
+    productTemplateData: ['product_template_data'],
+    subscriptions: ['subscriptions'],
    
    dashboard: ['dashboard'],
    topBar: ['top-bar'],
-    recentAction: ['recent-action'],
    calendar_events: ['calendar_events'],
    contacts: ['contacts']
 }
@@ -26,7 +26,8 @@ const postAuxEnd = (path, postData, media=false) => {
    return axios.post(`${basePath}${path}`, postData).then(res => {
        return res
    }).catch(err => {
-        throw new Error(err.response.data.msg);
+        // console.log('res', err.response.data)
+        throw new Error(err.response.data.error_message);
    })
 }

@@ -83,6 +84,13 @@ export const MyProductData = (reqData) => {
    return postAuxEnd(`/panel/myproduct/dash`, postData, false)
 }

+export const StripeSubscriptionCreate = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/subscription/start`, postData, false)
+}
+
 // FUNCTION TO GET CALENDAR EVENTS
 export const getCalendarEvents = (reqData) => {
    let postData = {
@@ -107,6 +115,14 @@ export const productsURL = (reqData) => {
    return postAuxEnd(`/panel/account/products/url`, postData, false)
 }

+// FUNCTION TO GET DASHBOARD PAYMENTS
+export const getDashPayments = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/payments`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
 export const productsData = (reqData) => {
    let postData = {
@@ -115,6 +131,14 @@ export const productsData = (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 = {
@@ -126,8 +150,85 @@ export const recentActions = (reqData) => {
    return postAuxEnd(`/panel/account/actions`, postData, false)
 }

+// FUNCTION TO VERIFY RESET TOKEN
+export const verifyResetToken = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/resetverify', postData, false)
+}

+// FUNCTION TO COMPLETE PASSWORD RESET
+export const completePWDReset = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/resetcomplete', postData, false)
+}

+// FUNCTION TO SUBMIT PAGE TAB SETTINGS
+export const pageSettings = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/settings`, postData, false)
+}
+
+// FUNCTION TO GET SETTINGS DATA
+export const getSettingsData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/settings/values`, postData, false)
+}
+
+// FUNCTION TO GET MY PRODUCT CONFIGURATION
+export const getMyProductConfig = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/configuration`, postData, false)
+}
+
+// FUNCTION TO GET SETTINGS DATA
+export const getProductTemplateData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/templates`, postData, false)
+}
+
+// FUNCTION TO ACTIVATE TEMPLATE
+export const activateTemplate = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/template/activate`, postData, false)
+}
+
+// FUNCTION TO GET PRODUCT SUBSCRIPTIONS
+export const completeProfile = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/startprofile`, postData, false)
+}
+
+// FUNCTION TO COMPLETE PROFILE
+export const getSubscriptions = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/subscription/products`, postData, false)
+}
+
+// FUNCTION TO GET COMMON PRACTICE
+export const getCommonPractice = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/common/practice`, postData, false)
+}



@@ -0,0 +1,7 @@
+import AccPWDReset from '../component/auth/AccPWDReset'
+
+export default function AccPWDResetPage() {
+  return (
+    <AccPWDReset />
+  )
+}
@@ -0,0 +1,7 @@
+
+import Onboard from '../component/onboard/Onboard';
+
+
+export default function OnboardPage(){
+    return <Onboard />
+}
@@ -1,6 +1,23 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import ProductFactory from '../component/product/ProductFactory'
+import { useSelector } from 'react-redux';
+import siteLinks from '../links/siteLinks';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+
 export default function ProductPage() {
+
+    const navigate = useNavigate()
+    let {pathname} = useLocation()
+
+    const { userDetails: { profile_completed }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+    useEffect(()=>{
+        if(!profile_completed){
+            navigate(siteLinks.profile_complete, {replace: true, state:{redirectLink: pathname}})
+        }
+    },[])
+    
    return (
        <ProductFactory />
    )
@@ -0,0 +1,5 @@
+import ProfileCompleteCom from '../component/profile_complete/ProfileCompleteCom';
+
+export default function ProfileCompletePage(){
+    return <ProfileCompleteCom />
+}
@@ -0,0 +1,7 @@
+
+import Start from "../component/start/Start";
+
+
+export default function StartPage(){
+    return <Start />
+}
@@ -0,0 +1,9 @@
+import React from 'react'
+//import Signup2 from '../component/auth/Signup2'
+import Subscribe from '../component/subscribe/Subscribe'
+
+export default function SubscribePage() {
+    return (
+        <Subscribe />
+    )
+}
@@ -0,0 +1,7 @@
+
+import Subscription from '../component/subscription/Subscription';
+
+
+export default function SubscriptionPage(){
+    return <Subscription />
+}
Author	SHA1	Message	Date
victorAnumudu	3db5d56410	reloads config settings endpoint on change of product	2025-09-05 15:43:35 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6c107c8000	page c;leanup	2025-09-04 13:57:49 -04:00
ameye	225a3d36e4	Merge branch 'settings-page-sort' of MERMS/MermsPanelReactJS into master	2025-09-04 17:47:39 +00:00
victorAnumudu	f66f92c58d	fixed settings page sorting by list order	2025-09-04 17:46:47 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	599e8a7715	Fix page	2025-09-04 11:52:35 -04:00
ameye	97b75e0d9b	Merge branch 'signup-redirect' of MERMS/MermsPanelReactJS into master	2025-09-04 11:02:23 +00:00
victorAnumudu	4bc985892e	redirects to /start on complete signup	2025-09-04 11:43:48 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	c951f925d8	panel data key	2025-09-03 21:00:28 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	1681ca1437	Start page	2025-09-02 14:58:59 -04:00
ameye	d2cb38f141	Merge branch 'template-endpoint' of MERMS/MermsPanelReactJS into master	2025-09-01 20:10:56 +00:00
victorAnumudu	67d26f6ab0	template endpoint added	2025-09-01 21:01:47 +01:00
ameye	72dc343d01	Merge branch 'dashboard-payments-fix' of MERMS/MermsPanelReactJS into master	2025-09-01 15:11:16 +00:00
victorAnumudu	4969ad1ae4	fixed dashboard payments endpoint	2025-09-01 16:08:26 +01:00
ameye	9e33578ef2	Merge branch 'payments-endpoint' of MERMS/MermsPanelReactJS into master	2025-09-01 14:34:42 +00:00
victorAnumudu	be6dab1ec9	added dashboard payments endpoint	2025-09-01 15:28:47 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	aae69ffd3b	footer data	2025-09-01 09:24:30 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6294d7cafd	Modify link	2025-09-01 08:39:10 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	be483c9451	Fix syntax	2025-08-31 14:26:10 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6559d00052	start app	2025-08-31 14:25:00 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6f3ed362b7	Environmant label	2025-08-31 14:21:31 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	fe88a6d7f2	added Site name to env	2025-08-31 14:07:50 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6adb6aed1f	fix text	2025-08-31 13:57:02 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	373c5427c2	reformat code	2025-08-31 07:36:10 -04:00
ameye	a9473debdb	Merge branch 'date-formatting' of MERMS/MermsPanelReactJS into master	2025-08-31 11:26:32 +00:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e4eb445059	Fix code layout	2025-08-30 23:02:49 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	44b2e08006	Fix header text	2025-08-30 22:27:35 -04:00
victorAnumudu	17239f9ea8	formatted date string and image bug	2025-08-30 22:30:45 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	519b6e5585	Removed spaces	2025-08-30 15:42:22 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	56fb97eda1	settings age	2025-08-30 14:29:05 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	1abc998120	Icons	2025-08-30 13:58:58 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	858dd39936	Improve contacts	2025-08-30 12:46:32 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	292c8409d6	fix UID use	2025-08-30 12:20:24 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	45c457e210	entries help	2025-08-30 11:51:11 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	1e7014172d	new image data	2025-08-30 11:17:47 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	98bf50fcde	fix text	2025-08-30 10:32:16 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	4385d8bec0	fix page rad	2025-08-30 10:23:58 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	d1c86ec9b2	fix text	2025-08-30 09:41:34 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	dae4862db2	styling tob bar	2025-08-30 09:32:59 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	d80bb55205	fonst sizes	2025-08-30 09:11:35 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	3205d5627e	more styles	2025-08-30 08:41:25 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	bfea6b956b	option_name	2025-08-30 07:53:05 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	4ec74ff895	sub tabs	2025-08-30 07:48:26 -04:00
ameye	84b4523154	Merge branch 'template-bug-fix' of MERMS/MermsPanelReactJS into master	2025-08-26 21:38:17 +00:00
victorAnumudu	c19cfdd524	fixed template data bug	2025-08-26 18:15:55 +01:00
ameye	2476c491be	Merge branch 'template-api-fix' of MERMS/MermsPanelReactJS into master	2025-08-26 15:57:36 +00:00
victorAnumudu	ece281ef8a	API data added	2025-08-26 16:04:02 +01:00
ameye	8ae0de1004	Merge branch 'template-api' of MERMS/MermsPanelReactJS into master	2025-08-25 19:43:40 +00:00
victorAnumudu	13ac1d1f85	added template API	2025-08-25 19:55:01 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	5a408311ae	Activation button	2025-08-25 09:09:42 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	9c64d8178e	Fix text	2025-08-24 08:30:42 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	be8f54bb42	Fix text	2025-08-24 08:06:06 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2c6102dfa5	options	2025-08-23 23:02:53 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	bbd6ecac58	Added link	2025-08-23 18:31:01 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	56ce8f0556	pakage json	2025-08-23 17:06:21 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	9e4de10251	stripe button	2025-08-23 16:53:50 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	777f3cbec4	merms panel	2025-08-23 08:30:32 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a6e9d507ae	fix sub page	2025-08-23 08:10:06 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	c1af89919e	fix description	2025-08-23 07:22:03 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a8686ac2e7	fix descriptions	2025-08-23 07:15:19 -04:00
ameye	591b1fa3b9	Merge branch 'payment-switch' of MERMS/MermsPanelReactJS into master	2025-08-19 18:28:58 +00:00
victorAnumudu	3d5bdc2afd	fixed payment switch btn	2025-08-19 19:11:49 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	cdb676a047	payment forms	2025-08-19 11:54:55 -04:00
ameye	34febdedfa	Merge branch 'selected-subscribe' of MERMS/MermsPanelReactJS into master	2025-08-18 19:09:17 +00:00
victorAnumudu	cb4f9fbb42	fixed selected subscription page	2025-08-18 19:40:49 +01:00
Olusesan Ameye	ad4a92ceed	Support test/qa envrionment	2025-08-17 10:42:08 +00:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	d71fe9cc01	env to qa	2025-08-16 06:54:41 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	aeb9f0512c	NODE_ENV	2025-08-16 06:47:27 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	62c3a8be82	correct api path	2025-08-16 06:24:44 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	c7c1da919d	subscribe cards	2025-08-16 06:15:09 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	669a249499	removed wrong entry	2025-08-16 06:09:16 -04:00
ameye	2cc57f0b0a	Merge branch 'page-settings-fix' of MERMS/MermsPanelReactJS into master	2025-08-15 10:50:29 +00:00
victorAnumudu	2be1f2ebd1	fixed page settings return value bug	2025-08-15 08:59:08 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	54be47e1c8	Subscribing starter	2025-08-14 12:16:59 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	8eefbbede8	subscribe add	2025-08-14 09:12:53 -04:00
ameye	fa6b53ede0	Merge branch 'complete-profile-bug' of MERMS/MermsPanelReactJS into master	2025-08-14 11:47:26 +00:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a5ac576176	Subscribe and payment starter	2025-08-14 07:47:06 -04:00
victorAnumudu	b840f28667	fixed API issue	2025-08-14 12:22:29 +01:00
ameye	66d1ae1609	Merge branch 'common-practice' of MERMS/MermsPanelReactJS into master	2025-08-13 18:13:45 +00:00
victorAnumudu	9cfb4651af	added common practice endpoint	2025-08-13 19:08:35 +01:00
ameye	2d141b529c	Merge branch 'complete-profile-aside' of MERMS/MermsPanelReactJS into master	2025-08-13 16:00:48 +00:00
victorAnumudu	b418ca7d58	added aside menu back	2025-08-13 16:51:59 +01:00
ameye	9eea804f71	Merge branch 'profile-complete-layout' of MERMS/MermsPanelReactJS into master	2025-08-13 11:09:57 +00:00
victorAnumudu	f3ebb0a925	updated profile layout	2025-08-13 11:08:30 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6421eb5b3e	Page layout	2025-08-12 19:01:41 -04:00
ameye	971624a358	Merge branch 'profile-complete' of MERMS/MermsPanelReactJS into master	2025-08-12 21:07:37 +00:00
victorAnumudu	21463ed501	added page for profile complete	2025-08-12 19:51:13 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	f450d0e868	fic env for live	2025-08-12 05:23:01 -04:00
ameye	c880cccb5a	Merge branch 'subscription-endpoint' of MERMS/MermsPanelReactJS into master	2025-08-11 20:58:28 +00:00
victorAnumudu	c776419dcf	added subscription endpoint	2025-08-11 21:49:13 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	80d5c8ea12	no, yes - Drop down here	2025-08-11 11:33:09 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	df6d2b570c	Add yesy no frop down	2025-08-11 11:15:30 -04:00
ameye	a802c1ca39	Merge branch 'about-more-text' of MERMS/MermsPanelReactJS into master	2025-08-10 11:38:17 +00:00
victorAnumudu	1a054a9fbc	fixed about more text bug	2025-08-10 09:35:24 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	33eacecacf	Added to settings	2025-08-09 19:03:34 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a71017fae6	add contacts	2025-08-08 05:56:24 -04:00
ameye	8969234fe5	Merge branch 'fields-population' of MERMS/MermsPanelReactJS into master	2025-08-08 09:55:00 +00:00
victorAnumudu	a0da97e14d	populate fields from backend	2025-08-08 10:51:42 +01:00
ameye	4d1de18713	Merge branch 'settings-endpoint-start' of MERMS/MermsPanelReactJS into master	2025-08-07 21:02:08 +00:00
victorAnumudu	4fe66fd161	merged with master	2025-08-07 21:49:14 +01:00
victorAnumudu	6028e4c617	added settings values endpoint	2025-08-07 21:41:36 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	398392062c	Added more about configurations	2025-08-07 13:13:41 -04:00
ameye	b84eac1299	Merge branch 'settings-endpoint' of MERMS/MermsPanelReactJS into master	2025-08-06 13:46:22 +00:00
victorAnumudu	52e3553aaa	added settings endpoint	2025-08-06 14:03:03 +01:00
ameye	220e4952d5	Merge branch 'reset-pwd-contd' of MERMS/MermsPanelReactJS into master	2025-08-05 21:27:33 +00:00
victorAnumudu	59c90ea175	reset password payload fix	2025-08-05 18:16:40 +01:00
ameye	9838fc948e	Merge branch 'refresh-icon' of MERMS/MermsPanelReactJS into master	2025-08-05 16:54:21 +00:00
victorAnumudu	cb4c741a90	refresh icon fixed	2025-08-05 17:50:34 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	bba38affae	Icon fix	2025-08-03 07:42:55 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	9468793d91	Merge branch 'master' of https://gitlab.chiefsoft.net/MERMS/MermsPanelReactJS	2025-08-03 07:20:14 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	44224e23ff	style update	2025-08-03 07:20:08 -04:00
ameye	5b926300ae	Merge branch 'reset-pwd-bug-fix' of MERMS/MermsPanelReactJS into master	2025-08-02 17:02:23 +00:00
victorAnumudu	9125730d2b	bug fix	2025-08-02 16:51:52 +01:00
victor.ebuka	00baa0b9bf	Merge branch 'pwd-reset-started' of MERMS/MermsPanelReactJS into master	2025-08-02 15:49:02 +00:00
victorAnumudu	f5018bc6b7	started password reset	2025-08-02 16:47:29 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	59d9eb3df9	On boarding page	2025-07-30 06:34:54 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	8f78011800	new bqckground	2025-07-29 21:41:48 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	3c3f70fd3f	Improved subscription show	2025-07-29 07:50:11 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	4f62410e6d	SUB PAGE	2025-07-28 21:56:11 -04:00
ameye	b8c65ee091	Merge branch 'menu-dropdown-fix' of MERMS/MermsPanelReactJS into master	2025-07-28 22:23:31 +00:00
victorAnumudu	5e1e97a2dd	fix menu drop down bug	2025-07-28 14:38:37 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	f794e6d31c	Fix template banners	2025-07-27 15:42:03 -04:00
ameye	a4e1376c27	Merge branch 'input-fields-fix' of MERMS/MermsPanelReactJS into master	2025-07-27 18:42:33 +00:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	16db88808b	Clean status codes	2025-07-27 13:31:39 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	2e97ec9857	subscription page	2025-07-27 13:06:02 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6ec537bebf	Subscriptuion starter	2025-07-26 16:33:19 -04:00
victorAnumudu	d84c266653	fixed input fields	2025-07-26 21:17:23 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	bb5a886e47	style added	2025-07-26 15:12:40 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	b5a37c4cc5	calendar fix	2025-07-26 15:03:21 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	ddde4bd0d5	Added Site template layout	2025-07-26 13:10:05 -04:00
ameye	bf9c6c8b32	Merge branch 'tab-control-fix' of MERMS/MermsPanelReactJS into master	2025-07-25 20:58:04 +00:00
victorAnumudu	14e588b0a9	fixed tab controls	2025-07-25 20:41:25 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	dde01ab79a	Site data	2025-07-25 11:58:37 -04:00
ameye	a5f1c4b5bb	Merge branch 'iframe-bug-fix' of MERMS/MermsPanelReactJS into master	2025-07-24 20:20:16 +00:00
victorAnumudu	a16dd7af24	fixed iframe bug	2025-07-24 21:16:48 +01:00
ameye	54d44e39d3	Merge branch 'internal-url' of MERMS/MermsPanelReactJS into master	2025-07-24 15:39:28 +00:00
victorAnumudu	578a0e4c8f	url fixed	2025-07-24 13:18:10 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	d0ac2515a3	form data	2025-07-23 22:47:44 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	b26f8b4e0d	fix data	2025-07-23 22:30:27 -04:00
ameye	ab6518e2ee	Merge branch 'text-hidden' of MERMS/MermsPanelReactJS into master	2025-07-22 20:08:58 +00:00
victorAnumudu	563abe6c35	menu dropdown fix	2025-07-22 20:03:27 +01:00
victorAnumudu	894ed6ea35	hid text on success	2025-07-22 20:01:11 +01:00
ameye	71859d9712	Merge branch 'tab-menu-fix' of MERMS/MermsPanelReactJS into master	2025-07-22 00:19:02 +00:00
victorAnumudu	6d9a0e5624	Merged with master branch	2025-07-22 01:15:52 +01:00
victorAnumudu	0bd0b3ca64	tab selection fixed	2025-07-22 01:12:28 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	0bef976bca	footer links	2025-07-21 20:07:11 -04:00
ameye	0d6dc40633	Merge branch 'recent-action-fix' of MERMS/MermsPanelReactJS into master	2025-07-21 15:50:59 +00:00
victorAnumudu	f50590850b	fixed recent action section bug	2025-07-21 16:48:01 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	1dcae6b163	fix links	2025-07-20 23:22:39 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	c06dc93e9a	Added more links	2025-07-20 23:08:55 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	67d67e773a	Fix page	2025-07-20 23:04:08 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	0493ee4f03	settings page	2025-07-20 22:54:44 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	866c127135	fix dash icon	2025-07-20 20:50:05 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	f7d27a3778	Unuased header	2025-07-19 20:36:27 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	c7fac54e12	product url	2025-07-19 09:14:49 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	f994c7f45e	url protocol	2025-07-17 17:55:07 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	b0821981e7	added url	2025-07-17 17:34:37 -04:00
Olusesan Ameye	a220f2faa4	Permission fix	2025-07-17 09:04:53 +00:00
ameye	2e46a56146	Merge branch 'product-page-reload' of MERMS/MermsPanelReactJS into master	2025-07-15 19:47:37 +00:00