formatted date string and image bug

.env

@@ -1,5 +1,6 @@
 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"

.env.production

@@ -1,7 +1,8 @@
 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"
 

.env.qa

@@ -1,5 +1,6 @@
 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"

package.json

@@ -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": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
-    "build_real": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

run.sh

@@ -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"

src/App.css

@@ -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;
 }

src/AppRouters.jsx

@@ -19,6 +19,11 @@ 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'
 
 function AppRouters() {
   return (
@@ -32,6 +37,7 @@ function AppRouters() {
             <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>
 
@@ -39,13 +45,18 @@ function AppRouters() {
           <Route element={<SocketIOContextProvider />}>
             <Route element={<UserExist />}> 
               <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>

src/component/auth/AccPWDReset.jsx

@@ -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>
+  )
+}

src/component/calendar/Calendar.jsx

@@ -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">

src/component/comments/Comments.js

@@ -2,371 +2,557 @@ import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";
 
-export default function Comments(){
+export default function Comments() {
-
+  return (
-    return(
+    <>
-        <>
+      <BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
-            <BreadcrumbComBS title='Comments' paths={['Dashboard', 'Comments']} />
+      <div className="row">
-            <div className="row">
+        {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
-                {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+        <div className="col-12">
-                <div className="col-12">
+          <div className="card card-statistics mail-contant">
-                    <div className="card card-statistics mail-contant">
+            <div className="card-body p-0">
-                        <div className="card-body p-0">
+              <div className="row no-gutters">
-                            <div className="row no-gutters">
+                <div className="col-md-4 col-xxl-2 col-md-4">
-                                <div className="col-md-4 col-xxl-2 col-md-4">
+                  <div className="mail-sidebar">
-                                    <div className="mail-sidebar">
+                    <div className="row justify-content-center">
-                                        <div className="row justify-content-center">
+                      <div className="col-12">
-                                            <div className="col-12">
+                        <div className="text-center mail-sidebar-title px-4">
-                                                <div className="text-center mail-sidebar-title px-4">
+                          <a
-                                                    <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>
+                            href="javascript:void(0)"
-                                                </div>
+                            className="btn btn-primary btn-block py-3 font-weight-bold font-18"
-                                            </div>
+                          >
-                                            <div className="col-12">
+                            <i className="fa fa-plus pl-2"></i>
-                                                <div className="px-4 py-4">
+                          </a>
-                                                    <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 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>
+    </>
+  );
+}

src/component/contacts/Contacts.js

@@ -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,338 @@ 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({
+  const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY
-    //     queryKey: queryKeys.contacts,
-    //     queryFn: () => contactData()
-    // })
 
-    const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
+  const [activeContactUID, setActiveContactUID] = useState("");
+  const [activeDetail, setActiveDetail] = useState([]);
 
-    const [activeContactUID, setActiveContactUID] = useState('')
+  const [filteredContactData, setFiltererdContactData] = useState([]);
-    const [activeDetail, setActiveDetail] = 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 changeActiveUID = (uid) => {
-    const getContactData = useMutation({
+    setActiveContactUID(uid);
-        mutationFn: (reqData) => {
+    let detail = contactsData.filter((item) => item.uid == uid);
-            return contactData(reqData)
+    setActiveDetail(detail);
-        },
+  };
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-            setFiltererdContactData(res?.data?.contacts)
-        }
-    })
 
-    const changeActiveUID = (uid) => {
+  const changeActiveCategoryUID = (id) => {
-        setActiveContactUID(uid)
+    let filteredConData = [];
-        let detail = contactsData.filter(item => item.uid == uid)
+    setActiveCategoryUID(id);
-        setActiveDetail(detail)
+    if (id == "0") {
+      filteredConData = contactsData;
+    } else {
+      filteredConData = contactsData.filter((item) => item.category == `A00000${id}`);
     }
+    setFiltererdContactData(filteredConData);
+    changeActiveUID(filteredConData[0]?.uid);
+  };
 
-    const changeActiveCategoryUID = (id) => {
+  useEffect(() => {
-        let filteredConData = []
-        setActiveCategoryUID(id)
-        if(id == '0'){
-            filteredConData = contactsData
-        }else{
-            filteredConData = contactsData.filter(item => item.category == id)
-        }
-        setFiltererdContactData(filteredConData)
-        changeActiveUID(filteredConData[0]?.uid)
-    }
-
-    useEffect(()=>{
     let reqData = {
-        token: localStorage.getItem('token'), // USER TOKEN
+      token: localStorage.getItem("token"), // USER TOKEN
-        uid: localStorage.getItem('uid') // USER UID
+      uid: localStorage.getItem("uid"), // USER UID
-    }
+    };
-    getContactData.mutate(reqData)
+    getContactData.mutate(reqData);
-    },[])
+  }, []);
 
-    const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS
+  const contactsData = getContactData?.data?.data?.contacts; // LIST OF CONTACTS
-    const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY
+  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']} />
+          <div className="row">
-            {getContactData?.isPending ? 
+            <div className="col-12">
-                <>
+              <p className="text-mute">Loading...</p>
-                    <div className="row">
+            </div>
-                        <div className="col-12">
+          </div>
-                            <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>
-            }
         </>
-    )
+      ) : 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: "550px", 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="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);
+                            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>
+                            );
+                          })}
+                      </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={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : contactsData ? getImage("avtar/" + contactsData[0]?.category + ".png") : getImage("avtar/01.jpg")}
+                            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>
+      )}
+    </>
+  );
 }

src/component/home/Products.jsx

@@ -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>
+                                        <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
-                                        <h4>{product?.name}</h4>
+                                        <h4><span style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
                                     </div>
                                 </div>
                             </Link>

src/component/home/ProductsURL.jsx

@@ -60,7 +60,8 @@ 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 (
@@ -70,7 +71,7 @@ export default function ProductsURL() {
                                                 <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><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}>
@@ -81,16 +82,6 @@ export default function ProductsURL() {
                                     )
                                 })}
                             </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>

src/component/home/TopBar.jsx

@@ -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,21 +57,25 @@ 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 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?.data_span}</small>
+                                        <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>
+                                        <h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></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">

src/component/layout/Layout.jsx

@@ -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>

src/component/layout/layoutcom/UserFooter.jsx

@@ -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>

src/component/layout/layoutcom/UserHeader.jsx

@@ -73,16 +73,16 @@ export default function UserHeader(){
 
                         <ul className="navbar-nav nav-right ml-auto">
                             <li className="nav-item user-profile">
-                                <a onClick={toggleMenu} href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdow">
+                                <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 ref={nav_menu} 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>
+                                                {/* <h4 className="text-white mb-0 font-600">{userDetails?.username}</h4> */}
-                                                <p className="text-white font-600">{userDetails.email}</p>
+                                                <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
@@ -90,8 +90,8 @@ export default function UserHeader(){
                                         </div>
                                     </div>
                                     <div className="p-4">
-                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.user}>
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.subscription}>
-                                            <i className="fa fa-user pr-2 text-success"></i> Users</Link>
+                                            <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>

src/component/layout/layoutcom/UserMenu.jsx

@@ -16,7 +16,7 @@ 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">
@@ -30,8 +30,8 @@ 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>
+                            <li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Sites Comments</Link></li>
                         </ul>
                     </li>
                     <li className={`${pathname == siteLinks.reports ? 'active' : ''}`}>
@@ -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>

src/component/onboard/Onboard.jsx

@@ -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>
+
+        </>
+    )
+}

src/component/product/ProductActive.jsx

@@ -1,23 +1,15 @@
-import React, { useRef } 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 GeneralTab from "./settingsTab/GeneralTab";
+import { productRefreshSite, getSettingsData } from "../../services/services";
-import { useMutation } from "@tanstack/react-query";
+import Settings from "./settingsTab/Settings";
-import { productRefreshSite } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 
 export default function ProductActive({productData}){
-    const iframe = useRef()
 
-    const settingsObject = {
+    const iframe = useRef()
-        home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
-        footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
-        about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
-        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
-        social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
-        template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
-        color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
-    };
 
     const refresh = useMutation({
         mutationFn: (fields) => {
@@ -34,7 +26,6 @@ export default function ProductActive({productData}){
             uid: localStorage.getItem('uid'), // USER UID
             product_id: productData.product_id,
             subscription_uid: productData.subscription_uid
-
         }
         refresh.mutate(reqData)
     }
@@ -56,11 +47,13 @@ export default function ProductActive({productData}){
                                 <div className="card-header">
                                     <div className="card-heading d-flex justify-content-between">
                                         <h4 className="card-title">{externalUrl}</h4>
-                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn btn-primary">IC</button>
+                                        <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="card-body">
-                                    <iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
+                                    <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'}
@@ -76,33 +69,7 @@ export default function ProductActive({productData}){
                                     </div>
                                 </div>
                                 <div className="card-body">
-                                    <div className="tab tab-vertical">
+                                    <Settings productData={productData} />
-                                        <ul className="nav nav-tabs" role="tablist">
-                                            <>
-                                                {Object.entries(settingsObject).map(([key, value]) => (
-                                                    <li className="nav-item">
-                                                    <a className={`nav-link ${value.active}`}
-                                                        id={key} data-bs-toggle="pill"
-                                                        data-bs-target={`#${value.controls}`}
-                                                        type="button" role="tab"
-                                                        aria-controls={value.controls}
-                                                        aria-selected="true">{value.title}</a>
-                                                    </li>
-                                                ))}
-                                            </>
-                                        </ul>
-                                        <div className="tab-content">
-                                            <>
-                                                {Object.entries(settingsObject).map(([key, value]) => (
-                                                    <div className={`tab-pane fade  ${value.active}`}
-                                                        id={value.controls} role="tabpanel"
-                                                        aria-labelledby={key}>
-                                                        <GeneralTab name={value.title} data={value.data} />
-                                                    </div>
-                                                ))}
-                                            </>
-                                        </div>
-                                    </div>
                                 </div>
                             </div>
                         </div>

src/component/product/ProductStart.jsx

@@ -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-danger" data-bs-dismiss="modal">Cancel</button>
-                            <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
+                            <button type="button" className="btn btn-primary" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'activating...' : 'Start Activation'}</button>
                         </div>
                     </div>
                 </div>

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,49 +1,128 @@
-import React from 'react'
+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';
 
-export default function GeneralTab({name='Full Name'}) {
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
-  return (
+
-    <div className="page-account-form">
+    const queryClient = useQueryClient()
-        <div className="p-0">
+
-            <form>
+    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
-                <h4>{name}</h4>
+
-                <div className="form-row">
+    const fieldData = {}
-                    <div className="form-group col-md-12">
+    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
-                        <label htmlFor="name1">Full Name</label>
+    fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
-                        <input type="text" className="form-control" id="name1"
+    })
-                                value="Alice Williams" />
+    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
-                    </div>
+    fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
-                    <div className="form-group col-md-12">
+    })
-                        <label htmlFor="title1">Title</label>
+
-                        <input type="text" className="form-control" id="title1"
+    // console.log('fieldData', fieldData)
-                                value="Marketing expert" />
+
-                    </div>
+    const [fields, setFields] = useState(fieldData)
-                    <div className="form-group col-md-12">
+    
-                        <label htmlFor="phone1">Phone Number</label>
+    const handleChange = ({target:{name, value}}) => {
-                        <input type="text" className="form-control" id="phone1"
+        setFields(prev => ({...prev, [name]:value}))
-                                value="(01) 97 563 15613" />
+        setFieldsChanged(true)
-                    </div>
+    }
-                    <div className="form-group col-md-12">
+
-                        <label htmlFor="email1">Email</label>
+    const submitSettings = useMutation({
-                        <input type="email" className="form-control" id="email1"
+        mutationFn: (fields) => {
-                                value="alicewilliams@gmail.com" />
+            return pageSettings(fields)
-                    </div>
+        },
-                </div>
+        onSuccess: (res) => {
-                <div className="form-group">
+            if(res?.data?.resultCode != '0'){
-                    <label htmlFor="add1">Address</label>
+                return setReqStatus({error: true, message: 'Unable to complete, try again later'})
-                    <input type="text" className="form-control" id="add1"
+            }
-                            value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
+            setFieldsChanged(false)
-                </div>
+            setReqStatus({error: false, message: 'Completed successfully'})
-                <div className="form-group">
+        },
-                    <label htmlFor="add2">Address 2</label>
+        onError: (err) => {
-                    <input type="text" className="form-control" id="add2"
+            setReqStatus({error: true, message: 'Unable to complete, try again later'})
-                            value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
+        },
-                </div>
+        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} />
+      }
 
 
-                <button type="submit" className="btn btn-primary">Update Information
+      return (
-                </button>
+        <div className="page-account-form">
-            </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>
-    </div>
+      )
-  )
+    }
-}
+)
+
+
+export default GeneralTab

src/component/product/settingsTab/NoYesBooleanDropdown.jsx

@@ -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>
+    )
+}

src/component/product/settingsTab/Settings.jsx

@@ -0,0 +1,163 @@
+import React, { memo, useMemo, useState } from 'react'
+import GeneralTab from './GeneralTab'
+import { getSettingsData } 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 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 },
+    }
+
+    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

src/component/product/settingsTab/SiteTemplateSelector.jsx

@@ -0,0 +1,89 @@
+import React, {memo} from 'react'
+import getImage from "../../../utils/getImage";
+import { useQuery } from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import { getProductTemplateData } from '../../../services/services';
+
+const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
+
+        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 templates = templateResponse?.templates
+
+        // console.log('data Template', templates)
+        // console.log("Page data == ", data)
+        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>
+                                                <a href="#" className="btn btn-light">Activate</a>
+                                            </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>
+                    }
+                </div>
+            </div>
+        )
+    }
+)
+export default SiteTemplateSelector

src/component/profile_complete/ProfileCompleteCom.jsx

@@ -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>
+        }
+    </>;
+
+}

src/component/settings/Settings.jsx

@@ -1,9 +1,10 @@
 import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
 
 
 export default function Settings(){
-
+    const avtarImage = "avtar/merms-user.png";
     return(
         <>
             <BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']} />
@@ -22,41 +23,18 @@ export default function Settings(){
                                         <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"
+                                                    {/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
-                                                         alt="users-avatar" />
+                                                    {/*     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

src/component/subscribe/StripeSubscriptionButton.jsx

@@ -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;

src/component/subscribe/SubcribePaymentOptions.jsx

@@ -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>*/}
+
+    </>
+
+}

src/component/subscribe/Subscribe.jsx

@@ -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>
+        </>
+    )
+}

src/component/subscribe/SubscribeNewCard.jsx

@@ -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>
+
+
+    </>
+
+}

src/component/subscribe/SubscribePreviousCard.jsx

@@ -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>
+
+
+    </>
+
+}

src/component/subscription/Subscription.jsx

@@ -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>
+            }
+        </>
+    )
+}

src/css/style.scss

@@ -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;

src/helpers/getDateFromDateString.js

@@ -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

src/helpers/getDateTimeFromDateString.js

@@ -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

src/links/siteLinks.js

@@ -3,17 +3,23 @@ const siteLinks = {
     help: '/help',
     home: '/',
     dash: '/dash',
+    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

src/services/queryKeys.js

@@ -5,6 +5,9 @@ const queryKeys = {
     myproduct_provision: ['myproduct_provision'],
     product_page: ['product_page'],
     recentAction: ['recent-action'],
+    settingsData: ['settings_data'],
+    productTemplateData: ['product_template_data'],
+    subscriptions: ['subscriptions'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],

src/services/services.js

@@ -83,6 +83,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 = {
@@ -134,8 +141,69 @@ 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 SETTINGS DATA
+export const getProductTemplateData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/templates`, 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)
+}
 
 
 

src/views/AccPWDResetPage.jsx

@@ -0,0 +1,7 @@
+import AccPWDReset from '../component/auth/AccPWDReset'
+
+export default function AccPWDResetPage() {
+  return (
+    <AccPWDReset />
+  )
+}

src/views/OnboardPage.jsx

@@ -0,0 +1,7 @@
+
+import Onboard from '../component/onboard/Onboard';
+
+
+export default function OnboardPage(){
+    return <Onboard />
+}

src/views/ProductPage.jsx

@@ -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 />
     )

src/views/ProfileCompletePage.jsx

@@ -0,0 +1,5 @@
+import ProfileCompleteCom from '../component/profile_complete/ProfileCompleteCom';
+
+export default function ProfileCompletePage(){
+    return <ProfileCompleteCom />
+}

src/views/Subscribe.jsx

@@ -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 />
+    )
+}

src/views/SubscriptionPage.jsx

@@ -0,0 +1,7 @@
+
+import Subscription from '../component/subscription/Subscription';
+
+
+export default function SubscriptionPage(){
+    return <Subscription />
+}