added refresh message display

.env

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

.env.development

@@ -1,7 +1,10 @@
+REACT_APP_PANEL_NAME="MERMS Panel DEV"
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
+NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MAIN_API_LL="http://localhost:14700"
 REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 

.env.production

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

.env.qa

@@ -1,5 +1,7 @@
+REACT_APP_PANEL_NAME="MERMS Panel QA"
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
+NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"

docker/Dockerfile

@@ -126,7 +126,7 @@ RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
 # add app
   COPY . ./
 
-# start app
+# start appdpvle
 #CMD ["npm","run", "start"]
  
 # CMD ["yarn", "start"]

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"
   },

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000"/>
     <meta
             name="description"
-      content="Web site created using create-react-app"
+            content="Empowering Healthcare Decision-Making with Artificial Intelligence"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
@@ -17,7 +17,11 @@
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y9QSQFV003"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+
+    function gtag() {
+        dataLayer.push(arguments);
+    }
+
     gtag('js', new Date());
 
     gtag('config', 'G-Y9QSQFV003');

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

@@ -14,6 +14,10 @@
   border-radius: 10px;
 }
 
+.border-radius-10 {
+  border-radius: 10px;
+}
+
 .login-links{
   margin-top: 50px;
   display: flex;

src/AppRouters.jsx

@@ -23,7 +23,9 @@ import SubscriptionPage from './views/SubscriptionPage';
 import OnboardPage from "./views/OnboardPage";
 import AccPWDResetPage from './views/AccPWDResetPage';
 import ProfileCompletePage from './views/ProfileCompletePage';
-
+import SubscribePage from './views/Subscribe'
+import StartPage from "./views/StartPage";
+import TrafficPage from "./views/TrafficPage";
 
 function AppRouters() {
     return (
@@ -44,7 +46,9 @@ function AppRouters() {
                     {/* protected routes */}
                     <Route element={<SocketIOContextProvider/>}>
                         <Route element={<UserExist/>}>
+                            <Route path={siteLinks.start} element={<StartPage/>}/>
                             <Route path={siteLinks.dash} element={<HomePage/>}/>
+                            <Route path={siteLinks.traffic} element={<TrafficPage/>}/>
                             <Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
                             <Route path={siteLinks.product} element={<ProductPage/>}/>
                             <Route path={siteLinks.reports} element={<ReportsPage/>}/>
@@ -52,9 +56,11 @@ function AppRouters() {
                             <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/CSignup.jsx

@@ -66,7 +66,7 @@ export default function CSignup() {
         localStorage.setItem('room', room)
         localStorage.setItem('uid', uid)
         dispatch(updateUserDetails({ ...res?.data }));
-        navigate('/dash') // later add redux to dispatch state
+        navigate(siteLinks.start, {replace: true}) // later add redux to dispatch state
     },
     // onError: (err) => {
     //     console.log('err', err)
@@ -100,7 +100,7 @@ export default function CSignup() {
                         <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                             <div className="mt-5 d-flex">
                                 <div className="bg-white register p-5">
-                                    <h1 className="mb-2">MERMS Panel</h1>
+                                    <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                     {/* <p>Welcome, Enter your password.</p> */}
                                     <div
                                     >

src/component/auth/Forgetpwd2.jsx

@@ -50,7 +50,7 @@ export default function Forgetpwd2() {
                             <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1h" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register p-5">
-                                        <h1 className="mb-2">MERMS Panel</h1>
+                                        <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                         {!mutation.isSuccess && <p>Please enter your username.</p>}
                                         <Formik
                                         initialValues={initialValues}

src/component/auth/Login.jsx

@@ -27,7 +27,7 @@ export default function Login() {
             <div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
                 <div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
                     <div className='w-full text-left'>
-                        <h1 className="mb-2 text-black text-4xl font-semibold">MERMS Panel</h1>
+                        <h1 className="mb-2 text-black text-4xl font-semibold">{process.env.REACT_APP_PANEL_NAME}</h1>
                         <p className='text-black-gray text-base'>Welcome back, please login to your account.</p>
                     </div>
                     <form className="w-full text-14 text-left text-black-gray">

src/component/auth/Login2.jsx

@@ -86,20 +86,20 @@ export default function Login() {
                             <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register px-5 pt-5 pb-3">
-                                        <h1 className="mb-2">MERMS Panel</h1>
+                                        <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                         <p>Welcome back, please login to your account.</p>
                                         <form className="mt-3 mt-sm-5">
                                             <div className="row">
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label text-black fw-bold">User Name*</label>
-                                                        <input maxLength={55} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
+                                                        <input maxLength={25} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label text-black fw-bold">Password*</label>
-                                                        <input maxLength={55} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
+                                                        <input maxLength={25} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
@@ -124,10 +124,18 @@ export default function Login() {
                                                     <button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
                                                 </div>
                                                 <div className="col-12  mt-3">
-                                                    <p>Don't have an account ?<Link to={siteLinks.signup}><span style={{fontWeight: 'bolder'}}>Sign Up</span></Link></p>
+                                                    <p> <Link to={siteLinks.signup}>
+                                                        {/*<span style={{fontWeight: 'bolder'}}>Sign Up</span>*/}
+                                                        <button className="btn btn-warning text-uppercase">
+                                                            Sign Up
+                                                        </button>
+                                                    </Link><span style={{paddingLeft: '5px' , fontWeight: 'bolder'}}> if you don't have an account yet.</span></p>
                                                 </div>
                                             </div>
                                         </form>
+                                        <div className="row" style={{margin: '5px'}}>
+                                            <hr />
+                                        </div>
                                         <div className="row" style={{marginTop: '20px'}}>
                                             <div className="col-6">
                                                 <div className="app-store-icons-wrap text-center">

src/component/auth/Signup.jsx

@@ -27,7 +27,7 @@ export default function Signup() {
                 <div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
                     <div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
                         <div className='w-full text-left'>
-                        <h1 className="mb-2 text-black text-4xl font-semibold">MERMS Panel</h1>
+                            <h1 className="mb-2 text-black text-4xl font-semibold">{process.env.REACT_APP_PANEL_NAME}</h1>
                             <p className='text-black-gray text-base'>Welcome, Please create your account.</p>
                         </div>
                         <form className="w-full text-14 text-left text-black-gray">
@@ -69,22 +69,35 @@ export default function Signup() {
                                         <div className="flex gap-2">
                                             <input className="form-check-input" type="checkbox" id="gridCheck"/>
                                             <label className="font-semibold form-check-label" htmlFor="gridCheck">
-                                        I accept terms & policy
+                                                I accept terms & policy of use.
                                             </label>
                                         </div>
                                     </div>
                                 </div>
                                 <div className="w-full mt-3">
-                                <button onClick={()=>{navigate(siteLinks.home)}} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign Up</button>
+                                    <button onClick={() => {
+                                        navigate(siteLinks.home)
+                                    }} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign
+                                        Up
+                                    </button>
                                 </div>
                                 <div className="mt-3">
-                                <p className='font-medium'>Already have an account ?<Link to={siteLinks.login} className=' hover:text-primary'> Sign In</Link></p>
+                                    <hr />
+                                    <p className='font-medium'>Already have an account ?
+                                        <Link to={siteLinks.login}
+                                              className='bg-secondary; hover:text-primary font-bold' style={{paddingRight: '10px'}}>
+                                            <button className="btn btn-warning text-uppercase">
+                                                Sign In
+                                            </button>
+                                        </Link>
+                                    </p>
                                 </div>
                             </div>
                         </form>
                     </div>
                 </div>
-            <div className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
+                <div
+                    className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
                     <div className="w-full">
                         <div className="w-2/3 mx-auto">
                             <img className="w-[80%]" src={LoginImg} alt=""/>

src/component/auth/Signup2.jsx

@@ -61,10 +61,11 @@ export default function Signup2() {
                     <div className="vh-100 bg-white custom-bg">
                         <div className="container-fluid p-0">
                             <div className="row no-gutters justify-content-center">
-                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
+                                <div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1"
+                                     style={{maxWidth: '520px'}}>
                                     <div className="mt-5 d-flex">
                                         <div className="bg-white register p-5">
-                                        <h1 className="mb-2">MERMS Panel</h1>
+                                            <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                             <p>Welcome, Please create your account.</p>
                                             <Formik
                                                 initialValues={initialValues}
@@ -79,20 +80,37 @@ export default function Signup2() {
                                                                     <>
                                                                         <div className="col-12 col-md-6">
                                                                             <div className="form-group">
-                                                                        <label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
+                                                                                <label
-                                                                        <input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
+                                                                                    className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First
+                                                                                    Name*</label>
+                                                                                <input type="text" name='firstname'
+                                                                                       className="form-control"
+                                                                                       placeholder="First Name"
+                                                                                       value={props.values.firstname}
+                                                                                       onChange={props.handleChange}/>
                                                                             </div>
                                                                         </div>
                                                                         <div className="col-12 col-md-6">
                                                                             <div className="form-group">
-                                                                        <label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
+                                                                                <label
-                                                                        <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
+                                                                                    className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last
+                                                                                    Name*</label>
+                                                                                <input type="text" name='lastname'
+                                                                                       className="form-control"
+                                                                                       placeholder="Last Name"
+                                                                                       value={props.values.lastname}
+                                                                                       onChange={props.handleChange}/>
                                                                             </div>
                                                                         </div>
                                                                         <div className="col-12">
                                                                             <div className="form-group">
-                                                                        <label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
+                                                                                <label
-                                                                        <input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
+                                                                                    className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
+                                                                                <input type="email" name='email'
+                                                                                       className="form-control"
+                                                                                       placeholder="Email"
+                                                                                       value={props.values.email}
+                                                                                       onChange={props.handleChange}/>
                                                                             </div>
                                                                         </div>
                                                                         {/* <div className="col-12">
@@ -109,12 +127,18 @@ export default function Signup2() {
                                                                 </div> */}
                                                                         <div className="col-12">
                                                                             <div className="form-check">
-                                                                        <input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
+                                                                                <input name='isChecked'
-                                                                        <label className="form-check-label" htmlFor="gridCheck">
+                                                                                       className="form-check-input"
+                                                                                       type="checkbox" id="gridCheck"
+                                                                                       value={props.values.isChecked}
+                                                                                       onChange={props.handleChange}/>
+                                                                                <label className="form-check-label"
+                                                                                       htmlFor="gridCheck">
                                                                                     I accept terms & policy
                                                                                 </label>
                                                                             </div>
-                                                                    <span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
+                                                                            <span
+                                                                                className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
                                                                         </div>
 
                                                                         {mutation.error &&
@@ -126,21 +150,36 @@ export default function Signup2() {
                                                                         }
 
                                                                         <div className="col-12 mt-3 text-end">
-                                                                    <button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
+                                                                            <button type='submit'
+                                                                                    className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
                                                                         </div>
                                                                     </>
                                                                     :
                                                                     <div className='col-12'>
-                                                                <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
+                                                                        <div
-                                                                    <h4 className='p-4 text-black' style={{marginBottom: '-30px'}}>Check your email to continue.</h4>
+                                                                            className="rounded-2 d-flex flex-column justify-content-between align-items-center"
-                                                                    <img className='' style={{width: '200px'}} src={getImage('check-mail.png')} alt='mail-alert' />
+                                                                            style={{backgroundColor: '#F2FAF7'}}>
-                                                                    <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
+                                                                            <h4 className='p-4 text-black'
+                                                                                style={{marginBottom: '-30px'}}>Check
+                                                                                your email to continue.</h4>
+                                                                            <img className='' style={{width: '200px'}}
+                                                                                 src={getImage('check-mail.png')}
+                                                                                 alt='mail-alert'/>
+                                                                            <Link to={siteLinks.login}
+                                                                                  className='p-2 text-primary'
+                                                                                  style={{color: '#6FCAEF'}}>Home</Link>
                                                                         </div>
                                                                     </div>
                                                                 }
 
                                                                 <div className="col-12 mt-3">
-                                                            <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
+                                                                    <p>Already have an account ?<Link
+                                                                        to={siteLinks.login}>
+                                                                        <button
+                                                                            className="btn btn-warning text-uppercase">
+                                                                            Sign In
+                                                                        </button>
+                                                                    </Link></p>
                                                                 </div>
                                                             </div>
                                                         </Form>

src/component/comments/Comments.js

@@ -1,31 +1,114 @@
-import React from "react";
+"use client";
+import React, { useEffect, useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { commentsData } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
+import getCustomTime from "../../utils/getCustomTime";
 
 export default function Comments() {
+  // const {data:contacts, isFetching, isError, error} = useQuery({
+  //     queryKey: queryKeys.contacts,
+  //     queryFn: () => contactData()
+  // })
+
+  const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY
+
+  const [activeContactUID, setActiveContactUID] = useState("");
+  const [activeDetail, setActiveDetail] = useState([]);
+
+  const [filteredContactData, setFiltererdContactData] = useState([]);
+
+  const getContactData = useMutation({
+    mutationFn: (reqData) => {
+      return commentsData(reqData);
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+    onSuccess: (res) => {
+      if (res?.data?.resultCode != "0") {
+        throw { message: "Something went wrong" };
+      }
+      setFiltererdContactData(res?.data?.contacts);
+    },
+  });
+
+  const changeActiveUID = (uid) => {
+    setActiveContactUID(uid);
+    let detail = contactsData.filter((item) => item.uid == uid);
+    setActiveDetail(detail);
+  };
+
+  const changeActiveCategoryUID = (id) => {
+    let filteredConData = [];
+    setActiveCategoryUID(id);
+    if (id == "0") {
+      filteredConData = contactsData;
+    } else {
+      filteredConData = contactsData.filter((item) => item.category == id);
+    }
+    setFiltererdContactData(filteredConData);
+    changeActiveUID(filteredConData[0]?.uid);
+  };
+
+  useEffect(() => {
+    let reqData = {
+      token: localStorage.getItem("token"), // USER TOKEN
+      uid: localStorage.getItem("uid"), // USER UID
+    };
+    getContactData.mutate(reqData);
+  }, []);
+
+  const contactsData = getContactData?.data?.data?.contacts; // LIST OF CONTACTS
+  const contactsCategory = getContactData?.data?.data?.category; // LIST OF CATEGORY
 
   return (
       <>
-            <BreadcrumbComBS title='Comments' paths={['Dashboard', 'Comments']} />
+        <BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
+        {getContactData?.isPending ? (
+            <>
+              <div className="row">
+                <div className="col-12">
+                  <p className="text-mute">Loading...</p>
+                </div>
+              </div>
+            </>
+        ) : getContactData?.error ? (
+            <div className="row">
+              <div className="col-12">
+                <p className="text-danger">{getContactData?.error?.message}</p>
+              </div>
+            </div>
+        ) : (
             <div className="row">
               {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
               <div className="col-12">
-                    <div className="card card-statistics mail-contant">
+                <div
+                    className="card card-statistics mail-contant"
+                    style={{ minHeight: "200px", borderRadius: "10px" }}
+                >
                   <div className="card-body p-0">
                     <div className="row no-gutters">
                       <div className="col-md-4 col-xxl-2 col-md-4">
                         <div className="mail-sidebar">
                           <div className="row justify-content-center">
-                                            <div className="col-12">
+                            <div className="d-none col-12">
                               <div className="text-center mail-sidebar-title px-4">
-                                                    <a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
+                                <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="javascript:void(0)">
+                                    <a href="#">
                                   <span className="nav align-items-center">
                                     <span>
                                       <i className="fa fa-envelope-o text-primary pr-4"></i>
@@ -34,71 +117,89 @@ export default function Comments(){
                                       <span>Inbox</span>
                                     </span>
                                     <span className="nav-item ml-auto text-right">
-                                                                                             <span className="badge badge-pill badge-primary float-right">0+</span>
+                                      <span className="badge badge-pill badge-primary float-right">
-                                                                            </span>
+                                        {contactsData?.length}
-                                                                            </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>
+                                  {/*<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>
                                 <ul className="pl-0 mt-5">
-                                                        <li className="py-2">
+                                  <li
-                                                            <a href="javascript:void(0)">
+                                      className="py-2"
+                                      onClick={() => changeActiveCategoryUID("0")}
+                                      style={{ cursor: "pointer" }}
+                                  >
+                                    <div>
                                   <span className="nav align-items-center">
                                     <span>
-                                                                                            <i className="fa fa-circle-o text-danger pr-4"></i>
+                                      <i
+                                          className={`fa fa-circle-o pr-4 ${
+                                              activeCategoryUID == "0"
+                                                  ? "text-primary"
+                                                  : "text-warning"
+                                          }`}
+                                      ></i>
                                     </span>
                                     <span>
-                                                                                            <span>Personal</span>
+                                      <span>All</span>
                                     </span>
                                   </span>
-                                                            </a>
+                                    </div>
                                   </li>
-                                                        <li className="py-2">
+                                  {contactsCategory &&
-                                                            <a href="javascript:void(0)">
+                                      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 text-warning"></i>
+                                          <i
+                                              className={`fa fa-circle-o pr-4 ${
+                                                  activeCategoryUID ==
+                                                  `${item?.cid}`
+                                                      ? "text-primary"
+                                                      : "text-warning"
+                                              }`}
+                                          ></i>
                                         </span>
                                         <span>
-                                                                                            <span>Work</span>
+                                          <span>{item?.description}</span>
                                         </span>
                                       </span>
-                                                            </a>
+                                            </div>
-                                                        </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={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
-                                    <div className="mail-content  border-right border-n h-100">
+                        <div className="mail-content  border-right border-n h-100" style={{placeContent: 'center'}}>
-                                        <div className="mail-search border-bottom">
+                          {/* <div className="mail-search border-bottom">
                         <div className="row align-items-center mx-0">
                           <div className="col-12">
                             <div className="form-group pt-3">
@@ -107,205 +208,120 @@ export default function Comments(){
                             </div>
                           </div>
                         </div>
-                                        </div>
+                      </div> */}
                           <div className="mail-msg scrollbar scroll_dark">
-                                            <div className="mail-msg-item">
+                            { filteredContactData.length ?
-                                                <a href="javascript:void(0)">
+                                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("avtar/01.jpg")}  className="img-fluid" alt="user" />
+                                                <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>Martin smith</p>
+                                                <p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></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">Saas Designer</h5>
+                                              <h5 className="mb-0 my-2">
-                                                            <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>
+                                                {contact?.title}
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
+                                              </h5>
-                                                        </div>
+                                              <p>
-                                                    </div>
+                                                {contact?.message?.length < 100
-                                                </a>
+                                                    ? contact?.message
-                                            </div>
+                                                    : contact?.message.substring(0, 101) +
-                                            <div className="mail-msg-item">
+                                                    " ..."}
-                                                <a href="javascript:void(0)">
+                                              </p>
-                                                    <div className="media align-items-center">
+                                              <p className="d-xl-none">
-                                                        <div className="mr-3">
+                                        <span>
-                                                            <div className="bg-img">
+                                          {new Date(
-                                                                <img  src={getImage("avtar/02.jpg")}  className="img-fluid" alt="user" />
+                                              contact?.added
-                                                            </div>
+                                          ).toDateString()}
-                                                        </div>
+                                          {/* {getCustomTime(contact.added)} */}
-                                                        <div className="w-100">
+                                        </span>
-                                                            <div className="mail-msg-item-titel justify-content-between">
+                                              </p>
-                                                                <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>
+                                  );
+                                })
+                                :
+                                <p className="text-center">Messages will appear here as soon as they are available for selection</p>
+                            }
                           </div>
                         </div>
                       </div>
+                      {filteredContactData.length > 0 &&
                           <div className="col-xxl-6 border-t border-xxl-t">
                             <div className="mail-chat py-5 px-5">
                               <div className="media align-items-center">
                                 <div className="bg-img mr-3">
-                                                <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
+                                  <img
+                                      src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
+                                      className="img-fluid"
+                                      alt="user"
+                                  />
                                 </div>
                                 <div>
-                                                <h4 className="mb-0">Dutca Patrick</h4>
+                                  <h4 className="mb-0" style={{ color: "#148399" }}>
-                                                <p>30 Min ago</p>
+                                    {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>Landing page Designer...</h3>
+                                  <h3>
+                                    {activeContactUID
+                                        ? activeDetail[0]?.title
+                                        : filteredContactData[0]?.title}
+                                  </h3>
                                 </div>
                                 <div className="d-flex">
                                   {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
@@ -313,60 +329,21 @@ export default function Comments(){
                                 </div>
                               </div>
                               <div>
-                                            <p className="my-4">hey adminjon...</p>
+                                <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>
+                                  {activeContactUID
-                                            <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>
+                                      ? activeDetail[0]?.message
-                                            <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>
+                                      : filteredContactData[0]?.message}
-                                            <div className="my-5">
+                                </p>
-                                                <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>
-                                    {/*        <div className="d-flex">*/}
+                  </div>
-                                    {/*            <i className="ti ti-clip pr-3 font-22"></i>*/}
+                </div>
-                                    {/*            <p className="pr-3 font-weight-bold">Wireframe</p>*/}
+              </div>
-                                    {/*            <p>(220.MB)</p>*/}
+            </div>
-                                    {/*        </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";
@@ -8,86 +8,87 @@ import queryKeys from "../../services/queryKeys";
 import getCustomTime from "../../utils/getCustomTime";
 
 export default function Contacts() {
-
   // const {data:contacts, isFetching, isError, error} = useQuery({
   //     queryKey: queryKeys.contacts,
   //     queryFn: () => contactData()
   // })
 
-    const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
+  const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY
 
-    const [activeContactUID, setActiveContactUID] = useState('')
+  const [activeContactUID, setActiveContactUID] = useState("");
-    const [activeDetail, setActiveDetail] = useState([])
+  const [activeDetail, setActiveDetail] = useState([]);
-
-    const [filteredContactData, setFiltererdContactData] = useState([])
 
+  const [filteredContactData, setFiltererdContactData] = useState([]);
 
   const getContactData = useMutation({
     mutationFn: (reqData) => {
-            return contactData(reqData)
+      return contactData(reqData);
     },
     onError: (error) => {
-            console.log(error)
+      console.log(error);
     },
     onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
+      if (res?.data?.resultCode != "0") {
-                throw({message: 'Something went wrong'})
+        throw { message: "Something went wrong" };
       }
-            setFiltererdContactData(res?.data?.contacts)
+      setFiltererdContactData(res?.data?.contacts);
-        }
+    },
-    })
+  });
 
   const changeActiveUID = (uid) => {
-        setActiveContactUID(uid)
+    setActiveContactUID(uid);
-        let detail = contactsData.filter(item => item.uid == uid)
+    let detail = contactsData.filter((item) => item.uid == uid);
-        setActiveDetail(detail)
+    setActiveDetail(detail);
-    }
+  };
 
   const changeActiveCategoryUID = (id) => {
-        let filteredConData = []
+    let filteredConData = [];
-        setActiveCategoryUID(id)
+    setActiveCategoryUID(id);
-        if(id == '0'){
+    if (id == "0") {
-            filteredConData = contactsData
+      filteredConData = contactsData;
     } else {
-            filteredConData = contactsData.filter(item => item.category == id)
+      filteredConData = contactsData.filter((item) => item.category == id);
-        }
-        setFiltererdContactData(filteredConData)
-        changeActiveUID(filteredConData[0]?.uid)
     }
+    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 (
     <>
-            <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
+      <BreadcrumbComBS title="Contacts" paths={["Dashboard", "Contacts"]} />
-            {getContactData?.isPending ? 
+      {getContactData?.isPending ? (
         <>
           <div className="row">
             <div className="col-12">
-                            <p className='text-mute'>Loading...</p>
+              <p className="text-mute">Loading...</p>
             </div>
           </div>
         </>
-                : getContactData?.error ?
+      ) : getContactData?.error ? (
         <div className="row">
           <div className="col-12">
-                        <p className='text-danger'>{getContactData?.error?.message}</p>
+            <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 card-statistics mail-contant"
+              style={{ minHeight: "200px", borderRadius: "10px" }}
+            >
               <div className="card-body p-0">
                 <div className="row no-gutters">
                   <div className="col-md-4 col-xxl-2 col-md-4">
@@ -95,7 +96,12 @@ export default function Contacts(){
                       <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>
+                            <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">
@@ -111,32 +117,44 @@ export default function Contacts(){
                                       <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 className="badge badge-pill badge-primary float-right">
+                                        {contactsData?.length}
+                                      </span>
                                     </span>
                                   </span>
                                 </a>
                               </li>
-                                                            <li className="py-2">
+                              {/*<li className="py-2">*/}
-                                                                <a href="#">
+                              {/*    <a href="#">*/}
-                                                                                <span className="nav align-items-center">
+                              {/*                <span*/}
-                                                                                            <span>
+                              {/*                    className="nav align-items-center">*/}
-                                                                                                <i className="fa fa-paper-plane-o pr-4"></i>
+                              {/*                            <span>*/}
-                                                                                            </span>
+                              {/*                                <i className="fa fa-paper-plane-o pr-4"></i>*/}
-                                                                                <span>
+                              {/*                            </span>*/}
-                                                                                                <span>Replied Mail</span>
+                              {/*                <span>*/}
-                                                                                </span>
+                              {/*                                <span>Replied Mail</span>*/}
-                                                                                </span>
+                              {/*                </span>*/}
-                                                                </a>
+                              {/*                </span>*/}
-                                                            </li>
+                              {/*    </a>*/}
-
+                              {/*</li>*/}
                             </ul>
 
                             <ul className="pl-0 mt-5">
-                                                            <li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
+                              <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>
+                                      <i
+                                        className={`fa fa-circle-o pr-4 ${
+                                          activeCategoryUID == "0"
+                                            ? "text-primary"
+                                            : "text-warning"
+                                        }`}
+                                      ></i>
                                     </span>
                                     <span>
                                       <span>All</span>
@@ -144,12 +162,27 @@ export default function Contacts(){
                                   </span>
                                 </div>
                               </li>
-                                                            {contactsCategory && contactsCategory.map(item => (
+                              {contactsCategory &&
-                                                                <li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`A00000${item?.cid}`)} style={{cursor: 'pointer'}}>
+                                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 == `A00000${item?.cid}` ? 'text-primary' : 'text-warning'}`}></i>
+                                          <i
+                                            className={`fa fa-circle-o pr-4 ${
+                                              activeCategoryUID ==
+                                              `${item?.cid}`
+                                                ? "text-primary"
+                                                : "text-warning"
+                                            }`}
+                                          ></i>
                                         </span>
                                         <span>
                                           <span>{item?.description}</span>
@@ -158,71 +191,89 @@ export default function Contacts(){
                                     </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={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
-                                        <div className="mail-content  border-right border-n h-100">
+                    <div className="mail-content  border-right border-n h-100" style={{placeContent: 'center'}}>
-                                            <div className="mail-search border-bottom">
+                      {/* <div className="mail-search border-bottom">
                         <div className="row align-items-center mx-0">
                           <div className="col-12">
-                                                        {/*<div className="form-group pt-3">*/}
+                            <div className="form-group pt-3">
-                                                        {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
+                               <input type="text" className="form-control" id="search" placeholder="Search.." />
-                                                        {/*        <i className="fa fa-search"></i>*/}
+                                   <i className="fa fa-search"></i>
-                                                        {/*</div>*/}
                             </div>
                           </div>
                         </div>
+                      </div> */}
                       <div className="mail-msg scrollbar scroll_dark">
-                                                {contactsData && filteredContactData?.map((contact, index)=> {
+                        { filteredContactData.length ?
-                                                    const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
+                          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'}`}>
+                              <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" />
+                                        <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>{contact?.sender}</p>
+                                        <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>{new Date(contact?.added).toDateString()}</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>
+                                      <h5 className="mb-0 my-2">
-                                                                        <p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p>
+                                        {contact?.title}
+                                      </h5>
+                                      <p>
+                                        {contact?.message?.length < 100
+                                          ? contact?.message
+                                          : contact?.message.substring(0, 101) +
+                                            " ..."}
+                                      </p>
                                       <p className="d-xl-none">
                                         <span>
-                                                                            {new Date(contact?.added).toDateString()}
+                                          {new Date(
+                                            contact?.added
+                                          ).toDateString()}
                                           {/* {getCustomTime(contact.added)} */}
                                         </span>
                                       </p>
@@ -230,26 +281,47 @@ export default function Contacts(){
                                   </div>
                                 </a>
                               </div>
-                                                    )
+                            );
-                                                })}
+                          })
+                          :
+                          <p className="text-center">Messages will appear here as soon as they are available for selection</p>
+                        }
                       </div>
                     </div>
                   </div>
+                  {filteredContactData.length > 0 &&
                   <div className="col-xxl-6 border-t border-xxl-t">
-
                     <div className="mail-chat py-5 px-5">
                       <div className="media align-items-center">
                         <div className="bg-img mr-3">
-                                                    <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
+                          <img
+                            src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
+                            className="img-fluid"
+                            alt="user"
+                          />
                         </div>
                         <div>
-                                                    <h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
+                          <h4 className="mb-0" style={{ color: "#148399" }}>
-                                                    <p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
+                            {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>
+                          <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>*/}
@@ -257,53 +329,21 @@ export default function Contacts(){
                         </div>
                       </div>
                       <div>
-                                                <p>{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}</p>
+                        <p>
-                                                {/* <p className="my-4">hey adminjon...</p>
+                          {activeContactUID
-                                                <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>
+                            ? activeDetail[0]?.message
-                                                <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>
+                            : filteredContactData[0]?.message}
-                                                <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> */}
+                        </p>
-                                                {/*<div className="my-5">*/}
-                                                {/*    <p>Have lovely Day,</p>*/}
-                                                {/*    <p>adminjon</p>*/}
-                                                {/*</div>*/}
-                                            </div>
-                                        </div>
-
-                                        <div className="bg-light mail-f px-4 py-3">
-                                            <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
-                                                <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
-                                                <a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
-                                            </div>
-                                            <div className="collapse" id="editer">
-                                                <div className="form-group">
-                                                    <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
-                                                </div>
-                                            </div>
-                                            <div className="collapse" id="forward">
-                                                <div className="form-group">
-                                                    <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
-                                                </div>
-                                            </div>
-                                            <div className="d-flex align-items-center justify-content-between py-2">
-                                                <div>
-                                                    {/*<ul className="nav">*/}
-                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
-                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
-                                                    {/*    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
-                                                    {/*</ul>*/}
-                                                </div>
-                                                <div>
-                                                    {/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                       </div>
                     </div>
                   </div>
                   }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </>
-    )
+  );
 }

src/component/context/SocketIOContext.jsx

@@ -41,7 +41,7 @@ export default function SocketIOContextProvider({children}) {
         socket.on(socketOnEvents.receive_message, (data) => {
             // setSocketMsgReceived(data.message);
             // dispatch(tableReload({type:'CHATMESSAGELIST'})) // dispatches to update chat message sending from owner to worker and vice versa
-            console.log('DATA', data)
+            console.log('SOCKET RECEIVED DATA *** ', data)
             queryClient.refetchQueries({
                 queryKey: [...queryKeys.recentAction],
                 // type: 'active',

src/component/home/DashPayments.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { getDashPayments } from '../../services/services'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+import getImage from '../../utils/getImage'
+
+export default function DashPayments() {
+
+    
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.dash_payments,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getDashPayments(reqData)
+        }
+    })
+
+    const payments = data?.data?.member_payments
+    // console.log('data', payments)
+
+  return (
+    <>
+        <div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
+            <div className="card card-statistics h-100 mb-0 panel_round_c3">
+                <div className="card-header d-flex justify-content-between">
+                    <div className="card-heading">
+                        <h4 className="card-title">Payments</h4>
+                    </div>
+                </div>
+                <div className="overflow-y-auto card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
+                    <div className="datatable-wrapper table-responsive">
+                    {isFetching ? 
+                        <>
+                            <div className="col-12">
+                                <div className="p-4">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </div>
+                        </>
+                        : isError ?
+                        <div className="col-12">
+                            <div className="p-4">
+                                <p className='text-danger'>{error.message}</p>
+                            </div>
+                        </div>
+                        :
+                        <table id="datatable" className="table table-borderless table-striped">
+                            <thead>
+                            <tr>
+                                {/* <th style={{width: '30px'}}>#</th> */}
+                                <th>Date</th>
+
+                                <th  style={{width: '130px'}}>Description</th>
+                                <th  style={{width: '80px'}}>Amount</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                                {payments && payments?.length > 0 ?
+                                payments.map((item, index) => {
+                                    return (
+                                        <tr key={index}>
+                                            {/* <td>{Number(item?.id).toString().padStart(6,'0')}</td> */}
+                                            <td>
+                                                {getDateTimeFromDateString(item?.added)}
+                                            </td>
+
+                                            <td>{item?.option_name}</td>
+                                            <td className='text-right'>${item?.amount}</td>
+                                        </tr>
+                                    )
+                                })
+                                :
+                                    <td colSpan={3} className='text-center'>No record found</td>
+                                }
+                            </tbody>
+                        </table>
+                    }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+  )
+}

src/component/home/HomeSections.jsx

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

src/component/home/Products.jsx

@@ -44,13 +44,13 @@ export default function Products() {
                     {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`}>
                             <Link to={productPath(product?.product_id)}  >
-                                <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} >
+                                <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 ${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/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,19 +57,26 @@ 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 ${item?.extra_style} `}>
+                    <Link to={item?.link}>
+                        <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
                             <div className="card-body p-0">
                                 <div className="d-flex m-b-0 ecommerce-contant-text h-100">
                                     <div className="w-100">
                                         <div className="row p-3">
                                             <div className="col">
                                                 <h3 className="mb-0">{item?.value || 0}</h3>
-                                        <small className="d-block">{item?.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"><a href={item?.link}>{item?.description}</a></h5>
+                                                <h5 className="text-muted mb-0">{item?.description}</h5>
                                             </div>
                                         </div>
                                         <div className="apexchart-wrapper">
@@ -78,6 +86,7 @@ export default function TopBar() {
                                 </div>
                             </div>
                         </div>
+                    </Link>
                 </div>
             )
         })}

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,7 +30,7 @@ export default function UserMenu() {
                         <ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
                             <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
                             <li className={`${pathname == siteLinks.calendar ? 'active' : ''}`}><Link to={siteLinks.calendar}>Calendar</Link></li>
-                            <li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Contacts</Link></li>
+                            <li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Sites Contacts</Link></li>
                             <li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Comments</Link></li>
                         </ul>
                     </li>
@@ -54,7 +54,7 @@ export default function UserMenu() {
                     </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/product/ProductActive.jsx

@@ -1,21 +1,26 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, {useEffect, useMemo, useRef, useState} from "react";
 import { useSelector } from "react-redux";
 import getImage from "../../utils/getImage";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { productRefreshSite, getSettingsData } from "../../services/services";
 import Settings from "./settingsTab/Settings";
 import queryKeys from "../../services/queryKeys";
+import {SocketContextValues} from "../context/SocketIOContext";
 
 
 export default function ProductActive({productData}){
-
+    const {joinRoom} = SocketContextValues() // Destructures values from socket context
     const iframe = useRef()
 
+    const [refreshMsg, setRefreshMsg] = useState('')
+
     const refresh = useMutation({
         mutationFn: (fields) => {
             return productRefreshSite(fields)
         },
         onSuccess: (res) => {
+            setRefreshMsg(res?.data?.message)
+            setTimeout(()=>{setRefreshMsg('')},3000)
             iframe.current.src += ''
         }
     })
@@ -31,6 +36,13 @@ export default function ProductActive({productData}){
     }
     let externalUrl= 'https://'+productData?.internal_url
 
+    const productSubUID = productData.subscription_uid;
+    useEffect(() => {
+        const provision_room  = "PROVISION_"+productSubUID;
+        console.log("JOINING ROOM ON ACTIVE *** ", provision_room);
+        joinRoom(provision_room); // provision subscription room
+    }, [])
+
     return(
         <>
             {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
@@ -46,7 +58,9 @@ export default function ProductActive({productData}){
                             <div className="card card-statistics">
                                 <div className="card-header">
                                     <div className="card-heading d-flex justify-content-between">
-                                        <h4 className="card-title">{externalUrl}</h4>
+                                        {/*<h4 className="card-title">{externalUrl}</h4>*/}
+                                        <h4  style={{color: '#148399', fontWeight: 'bolder'}}>
+                                            <a  href={externalUrl} target='_blank'>{externalUrl}</a></h4>
                                         <button type="button" onClick={()=>iframe.current.src += ''} className="btn">
                                             <img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
                                         </button>
@@ -56,11 +70,16 @@ export default function ProductActive({productData}){
                                     <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'}
+                                    <div className="d-flex justify-end gap-3">
+                                        {refreshMsg &&
+                                            <p className="text-success text-center">{refreshMsg}</p>
+                                        }
+                                        <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Initiating...' : 'Rebuild Site'}
                                         </button>
                                     </div>
                                 </div>
                             </div>
+                        </div>
                         <div className="col-xxl-6">
                             <div className="card card-statistics">
                                 <div className="card-header">

src/component/product/ProductFactory.jsx

@@ -2,14 +2,16 @@ import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
 import queryKeys from "../../services/queryKeys";
+import siteLinks from '../../links/siteLinks';
 
 export default function ProductFactory(){
+    const navigate = useNavigate()
     const location = useLocation();
     const pathname = location.pathname;
 
@@ -45,8 +47,9 @@ export default function ProductFactory(){
                     </>
                     : isError ?
                         <div className="row">
-                            <div className="col-12">
+                            <div className="text-center col-12" style={{minHeight: '500px', placeContent: 'center'}}>
                                 <p className='text-danger'>{error?.message}</p>
+                                <button onClick={() => navigate(siteLinks.home)} className='mt-3 btn btn-primary'>Return Home</button>
                             </div>
                         </div>
                     :

src/component/product/ProductProvision.jsx

@@ -28,7 +28,9 @@ export default function ProductProvision(props){
     const provisionData = provision?.data
 
     useEffect(() => {
-        joinRoom(productSubUID); // provision subscription room
+        const provision_room  = "PROVISION_"+productSubUID;
+        console.log("JOINING ROOM ON START *** ", provision_room);
+        joinRoom(provision_room); // provision subscription room
     }, [])
 
     return (
@@ -59,8 +61,11 @@ export default function ProductProvision(props){
                                     </div>
                                     <div className="card-body">
                                         <div className="progress">
-                                            <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+                                            <div className="progress-bar progress-bar-striped progress-bar-animated"
-                                            aria-valuenow={`${provisionData?.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData?.percent_completed}%`}} ></div>
+                                                 role="progressbar"
+                                                 aria-valuenow={`${provisionData?.percent_completed}%`}
+                                                 aria-valuemin="0" aria-valuemax="100"
+                                                 style={{width: `${provisionData?.percent_completed}%`}}></div>
                                         </div>
                                     </div>
                                 </div>
@@ -108,8 +113,10 @@ export default function ProductProvision(props){
 
                             <div className="col-lg-6">
                                 <div className="card card-statistics ">
-                                <h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
+                                    <h4 className="card-title" style={{padding: '10px'}}>Started creating your
-                                <img className="card-img-top" src={getImage('widget/working.jpg')}  alt="Card image cap" />
+                                        selection</h4>
+                                    <img className="card-img-top" src={getImage('widget/working.jpg')}
+                                         alt="Card image cap"/>
                                     {/* <div className="card-body">
                                     <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
                                 </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/ColorStyleConfigure.jsx

@@ -0,0 +1,6 @@
+const  ColorStyleConfigure =()=>{
+
+    return <>COLOR CONFIG</>
+}
+
+export default  ColorStyleConfigure

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,25 +1,55 @@
-import React, {memo, useState} from 'react'
+import React, {memo, useEffect, useMemo, useState} from 'react'
-import { useMutation } from "@tanstack/react-query";
+import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {pageSettings} from "../../../services/services";
 import SiteTemplateSelector from './SiteTemplateSelector';
 import NoYesBooleanDropdown from './NoYesBooleanDropdown';
 import {IoMdArrowDropdown} from 'react-icons/io';
+import queryKeys from '../../../services/queryKeys';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
+import URLConfiguration from "./URLConfiguration";
+import ColorStyleConfigure from "./ColorStyleConfigure";
 
-const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+const GeneralTab = memo(({
+                             name = 'Full Name',
+                             data,
+                             tabKey,
+                             isCustom,
+                             productData,
+                             backendValues,
+                             setFieldsChanged
+                         }) => {
+
+        const queryClient = useQueryClient()
 
         const [reqStatus, setReqStatus] = useState({error: null, message: ''})
 
+
+        // const computeFieldData = useMemo(()=>{
+        //     const fieldData = {}
+        //     Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+        //     fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+        //     })
+        //     backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+        //     fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+        //     })
+        //     return fieldData
+        // },[backendValues.data])
+
+
+        const [fields, setFields] = useState({})
+
+        const sortedData = sortObjectByListOrder(data ? data : {}) // SORTED SETTINGSCONFIG
+
+        useEffect(() => {
             const fieldData = {}
-    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+            Object.entries(sortedData)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
                 fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
             })
-    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+            backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
                 fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
             })
-
+            setFields(fieldData)
-    console.log('fieldData', fieldData)
+        }, [backendValues.data])
-
-    const [fields, setFields] = useState(fieldData)
 
         const handleChange = ({target: {name, value}}) => {
             setFields(prev => ({...prev, [name]: value}))
@@ -41,6 +71,9 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                 setReqStatus({error: true, message: 'Unable to complete, try again later'})
             },
             onSettled: () => {
+                queryClient.refetchQueries({  // refetches productProvision API call
+                    queryKey: [...queryKeys.settingsData],
+                })
                 setTimeout(() => {
                     setReqStatus({error: null, message: ''})
                 }, 3000)
@@ -56,41 +89,73 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                     ...fields
                 }
             }
-        // console.log('formInfo', reqData)
             submitSettings.mutate(reqData)
         }
-
+        console.log(tabKey);
-      if (isCustom ===  true){
-          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
-      }
-
-
         return (
+            <>
+                {backendValues?.isFetching || !backendValues?.data ?
+                    <>
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-mute'>Loading...</p>
+                            </div>
+                        </div>
+                    </>
+                    : backendValues?.isError ?
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-danger'>{backendValues?.error.message}</p>
+                            </div>
+                        </div>
+                        :
+                        <>
+                            {isCustom === true ?
+                                <>
+                                    {(tabKey === 'template_tab') && <SiteTemplateSelector name={name} data={sortedData} isCustom={isCustom} productData={productData}/>}
+                                    {(tabKey === 'url_config_tab') && <URLConfiguration name={name} data={sortedData} isCustom={isCustom} productData={productData}/>}
+                                    {(tabKey === 'color_scheme_tab') && <ColorStyleConfigure name={name} data={sortedData} isCustom={isCustom} productData={productData}/>}
+                                </>
+                                :
                                 <div className="page-account-form">
                                     <div className="p-0" style={{minHeight: '500px'}}>
 
                                         <form id='tab_form'>
                                             <div className="form-row">
                                                 <>
-                            {Object.entries(data)?.map(([key, value]) => {
+                                                    {Object.entries(sortedData)?.map(([key, value]) => {
-                                let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
+                                                            let fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
-                                let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                                            let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
                                                             return (
                                                                 <div key={key} className="form-group col-md-12">
                                                                     <label htmlFor="name1">{value.name}</label>
-                                        {value.controls == 'TEXT' ?
+                                                                    {value.controls === 'TEXT' ?
-                                            <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                                                        <input name={fieldName} type="text"
-                                            :value.controls == 'TEXTAREA' ?
+                                                                               className="form-control" id={key}
-                                            <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                                                               value={fieldValue} onChange={handleChange}/>
-                                            : value.controls == 'SELECT_NO_YES' ?
+                                                                        : 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">
+                                                                                    <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%)'}} />                                               
+                                                                                    <IoMdArrowDropdown
+                                                                                        className='position-absolute w-auto'
+                                                                                        style={{
+                                                                                            top: '50%',
+                                                                                            right: '2px',
+                                                                                            transform: 'translateY(-50%)'
+                                                                                        }}/>
                                                                                 </div>
                                                                                 :
                                                                                 null
@@ -108,12 +173,17 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
                                                     </>
                                                 }
                                                 <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>
+                                                    <button onClick={handleSubmit} type="button" className="btn btn-primary"
+                                                            disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
                                                 </div>
                                             </div>
                                         </form>
                                     </div>
                                 </div>
+                            }
+                        </>
+                }
+            </>
         )
     }
 )

src/component/product/settingsTab/Settings.jsx

@@ -1,78 +1,35 @@
 import React, { memo, useMemo, useState } from 'react'
 import GeneralTab from './GeneralTab'
-import { getSettingsData } from '../../../services/services';
+import { getSettingsData, getMyProductConfig } from '../../../services/services';
 import queryKeys from '../../../services/queryKeys';
 import { useSelector } from 'react-redux';
 import { useQuery } from '@tanstack/react-query';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
 
 const Settings = memo(({productData}) => {
 
     const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
 
-    const dataFields ={
+    const {data:configData, isFetching:configIsFetching, configIsError, error:configError} = useQuery({
-        site_title: { name: 'Title', controls: 'TEXT', active: true },
+        queryKey: queryKeys.myProductConfig,
-        site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
+        queryFn: () => {
-        site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
+            let reqData = {
-        site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
+                token: localStorage.getItem('token'), // USER TOKEN
-        site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
             }
-
+           return getMyProductConfig(reqData)
-    const socialFields ={
+        },
-        facebook: { name: 'Facebook', controls: 'TEXT', active: true },
+        staleTime: 0,
-        twitter: { name: 'Twitter', controls: 'TEXT', active: true },
+    })
-        youtube: { name: 'Youtube', controls: 'TEXT', active: true },
+    const settingsConfig = configData?.data?.settings_items
-    }
+    // console.log('CONFIG DATA...', settingsConfig)
-
-    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 [activeTab, setActiveTab] = useState(Object.entries(settingsConfig)[0][1]?.controls)
+     const [activeTab, setActiveTab] = useState(null)
 
     const handleChangeTab = (value) => {
         // if(fieldsChanged){
@@ -97,15 +54,19 @@ const Settings = memo(({productData}) => {
                 product_id: productData?.product_id
             }
            return getSettingsData(reqData)
-        }
+        },
+        staleTime: 0,
+        enabled: settingsConfig ? true : false
     })
 
-    const settingsData = data?.data?.settings
+    const settingsData = {data: data?.data?.settings, isFetching, isError, error}
     // console.log('data', settingsData)
 
+    const sortedSettingsConfig = sortObjectByListOrder(settingsConfig ? settingsConfig : {}) // SORTED SETTINGSCONFIG
+
       return (
         <>
-        {isFetching ? 
+        {configIsFetching ? 
             <>
                 <div className="row">
                     <div className="col-12">
@@ -113,19 +74,19 @@ const Settings = memo(({productData}) => {
                     </div>
                 </div>
             </>
-            : isError ?
+            : configIsError ?
             <div className="row">
                 <div className="col-12">
-                    <p className='text-danger'>{error.message}</p>
+                    <p className='text-danger'>{configError.message}</p>
                 </div>
             </div>
             :
             <div className="tab tab-vertical">
                 <ul className="nav nav-tabs" role="tablist">
                     <>
-                        {Object.entries(settingsObject).map(([key, value]) => (
+                        {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <li key={key} className="nav-item">
-                            <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
+                            <a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
                                 id={key} 
                                 // data-bs-toggle="pill"
                                 // data-bs-target={`#${value.controls}`}
@@ -143,12 +104,12 @@ const Settings = memo(({productData}) => {
                 </ul>
                 <div className="tab-content">
                     <>
-                        {Object.entries(settingsObject).map(([key, value]) => (
+                        {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
-                            <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                            <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
                                 // id={value.controls} role="tabpanel"
                                 // aria-labelledby={key}
                             >
-                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
+                                <GeneralTab tabKey={key} name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
                             </div>
                         ))}
                     </>

src/component/product/settingsTab/SiteTemplateSelector.jsx

@@ -1,14 +1,132 @@
 import React, {memo} from 'react'
 import getImage from "../../../utils/getImage";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import {getProductTemplateData, activateTemplate} from '../../../services/services';
+import {Link} from "react-router-dom";
+import siteLinks from "../../../links/siteLinks";
 
-const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
+const SiteTemplateSelector = memo(({name = 'Full Name', data, productData}) => {
+
+        const queryClient = useQueryClient()
+
+        const {data: templateData, isFetching, isError, error} = useQuery({
+            queryKey: queryKeys.productTemplateData,
+            queryFn: () => {
+                let reqData = {
+                    token: localStorage.getItem('token'), // USER TOKEN
+                    uid: localStorage.getItem('uid'), // USER UID
+                    product_id: productData?.product_id
+                }
+                return getProductTemplateData(reqData)
+            },
+            staleTime: 0
+        })
+
+        const templateResponse = templateData?.data
+        const currentTemUID = templateResponse?.current_template_uid
+        const templates = templateResponse?.templates
+        const custom_template_name = templateResponse?.custom_template_name
+
+        // console.log('data Template', templateResponse)
         console.log("Page data == ", data)
+
+        const handleActivateTemplate = useMutation({
+            mutationFn: (fields) => {
+                return activateTemplate(fields)
+            },
+            onSuccess: (res) => {
+                if (res?.data?.resultCode != '0') {
+                    throw new Error(res.data.resultDescription)
+                }
+                queryClient.refetchQueries({  // refetches productProvision API call
+                    queryKey: [...queryKeys.settingsData],
+                })
+            },
+            onSettled: () => {
+                setTimeout(() => {
+                    handleActivateTemplate.reset()
+                }, 3000)
+            }
+        })
+
+        const handleSubmit = (tem_uid) => {
+            const reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id,
+                template_uid: tem_uid
+            }
+            // console.log(reqData)
+            handleActivateTemplate.mutate(reqData)
+        }
+        if (custom_template_name && custom_template_name != '') {
+            // This implies we have a custom template , just return here
+            return <>
+                <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'
+                            style={{marginBottom: '20px'}}>Custom Product Template.</h4>
+                        <img className='' style={{width: '200px'}}
+                             src={getImage('custom-template.png')}
+                             alt='mail-alert'/>
+                        <h4 className='p-4 text-black'
+                            style={{marginTop: '20px'}}>This product is using a custom template named <span
+                            style={{color: 'darkred'}}>&ldquo;{custom_template_name}&rdquo;</span> .</h4>
+                    </div>
+                </div>
+
+            </>
+        }
         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">
                                 <>
-                            {Object.entries(data)?.map(([key, value]) => (
+                                    {!templates?.length ?
+                                        <p>No data Found</p>
+                                        :
+                                        templates.map(template => (
+                                            <div key={template.template_uid} className="col-xl-6 col-sm-6">
+                                                <div className="card card-statistics">
+                                                    <div className="card-body">
+                                                        <div className="text-center p-2">
+                                                            <div className="mb-2">
+                                                                <img src={getImage('file-icon/svg.png')}
+                                                                     alt={template.title}/>
+                                                            </div>
+                                                            <h4 className="mb-0">{template.title}</h4>
+                                                            {currentTemUID == template.template_uid ?
+                                                                <button className="btn btn-light"
+                                                                        disabled={true}>Active</button>
+                                                                :
+                                                                <button onClick={() => handleSubmit(template.template_uid)}
+                                                                        className="btn btn-primary">Activate</button>
+                                                            }
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ))
+                                    }
+                                    {/* {Object.entries(data)?.map(([key, value]) => (
                                 <div key={key} className="col-xl-6 col-sm-6">
                                     <div className="card card-statistics">
                                         <div className="card-body">
@@ -22,10 +140,28 @@ const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
                                         </div>
                                     </div>
                                 </div>
-                            ))}
+                            ))} */}
+                                </>
+
+                                <div className="col-12">
+                                    <>
+                                        {handleActivateTemplate.isPending ?
+                                            <p className={'text-center '}>loading...</p>
+                                            :
+                                            handleActivateTemplate.isError ?
+                                                <p className={'text-center text-danger'}>{handleActivateTemplate.error.message}</p>
+                                                :
+                                                handleActivateTemplate.isSuccess ?
+                                                    <p className={'text-center text-success'}>Templated activated
+                                                        successfully</p>
+                                                    :
+                                                    null
+                                        }
                                     </>
                                 </div>
                             </div>
+                    }
+                </div>
             </div>
         )
     }

src/component/product/settingsTab/URLConfiguration.jsx

@@ -0,0 +1,141 @@
+import {Form, Formik} from "formik";
+import * as Yup from "yup";
+import {useMutation} from '@tanstack/react-query';
+import {setExternalURL} from '../../../services/services';
+import { useState } from "react";
+
+const validationSchema = Yup.object().shape({
+    url: Yup.string().required("URL is required").matches(/^https?:\/\/[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-]+\.[a-zA-Z]+/, 'Must be like: https://example.mysite.com'),
+})
+
+// const initialValues = {
+//     url: '',
+// };
+
+const URLConfiguration = ({productData}) => {
+
+    const [externalURLChanged, setExternalURLChanged] = useState(true)
+
+    const initialValues = {
+        url: productData?.external_url || '',
+    };
+
+    let defaultUrl = 'https://' + productData?.internal_url
+    let externalUrl = productData?.external_url
+
+     const handleExternalURLChanged = (e) => {
+        if(e.target.value == externalUrl){
+            setExternalURLChanged(true)
+        }else{
+            setExternalURLChanged(false)
+        }
+    }
+
+    // API to set url
+    const setURL = useMutation({
+        mutationFn: (fields) => {
+            return setExternalURL(fields)
+        },
+        onSuccess: (res) => {
+            if (res.data.resultCode != '0') {
+                // throw({message: res?.data?.resultDescription})
+                throw({message: 'Something went wrong!'})
+            }
+        },
+        onSettled: () => {
+            setTimeout(() => {
+                setURL.reset()
+            }, 3000)
+        }
+        // onError: (err) => {
+        //     console.log('err', err)
+        // }
+    })
+
+    const handleSubmit = (values) => {
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            subscription_uid: productData?.subscription_uid,
+            external_url: values.url
+        }
+        setURL.mutate(reqData)
+    }
+
+    return <>
+        <div className="card card-statistics">
+            <div className="card-header">
+                <div className="card-heading">
+                    <h4 className="card-title" style={{textTransform: 'none'}}>{defaultUrl}</h4>
+                </div>
+            </div>
+            {/*<div className="card-body">*/}
+            {/*    <div className="form-group">*/}
+            {/*        /!*<label htmlFor="exampleInputEmail1">Email address</label>*!/*/}
+            {/*        <input type="email" className="form-control"*/}
+            {/*               aria-describedby="defaultUrlHelp" value={defaultUrl} readOnly={true} />*/}
+            {/*    </div>*/}
+            {/*</div>*/}
+        </div>
+
+        <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleSubmit}
+        >
+            {(props) => {
+                return (
+                    <Form className='w-full'>
+                        <div className="card card-statistics" style={{backgroundColor: '#b6e5ef'}}>
+                            <div className="card-header">
+                                <div className="card-heading">
+                                    <h4 className="card-title" style={{textTransform: 'none'}}>Set your own URL</h4>
+                                </div>
+                            </div>
+                            <div className="card-body">
+                                <div className="form-group">
+                                    <label htmlFor="exampleInputEmail1">Enter your full URL <span
+                                        className={`${(props.errors.url && props.touched.url) && 'text-danger'}`}>{props.errors.url}</span></label>
+                                    <input value={props.values.url} onChange={(e)=>{props.handleChange(e); handleExternalURLChanged(e)}} type="text"
+                                           className="form-control" id="url" aria-describedby="url"
+                                           placeholder="https://example.mysite.com"/>
+                                </div>
+                                <div style={{width: '100%', textAlign: 'right'}}>
+                                    <button 
+                                        type="submit" 
+                                        disabled={setURL.isPending || externalURLChanged}
+                                        className="btn btn-primary"
+                                    >
+                                        {setURL.isPending ? 'Loading...' : 'Submit'}
+                                    </button>
+                                </div>
+                            </div>
+
+                            {setURL.error &&
+                                <div className="col-12">
+                                    <p className='text-danger'>{setURL.error.message}</p>
+                                </div>
+                            }
+
+                            {setURL.isSuccess &&
+                                <div className="col-12">
+                                    <p className='text-success'>{'Completed successfully'}</p>
+                                </div>
+                            }
+                            <div style={{backgroundColor: '#94b8c0', borderRadius: '10px', padding: '10px'}}>
+                                Final steps to configure your URL:<br/>
+                                DNS:<br/>
+                                DNS:<br/>
+                                DNS:<br/>
+
+                            </div>
+                        </div>
+                    </Form>
+                );
+            }}
+        </Formik>
+
+    </>
+}
+
+export default URLConfiguration

src/component/product/settingsTab/_GeneralTab.jsx

@@ -0,0 +1,128 @@
+import React, {memo, useState} from 'react'
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { pageSettings } from "../../../services/services";
+import SiteTemplateSelector from './SiteTemplateSelector';
+import NoYesBooleanDropdown from './NoYesBooleanDropdown';
+import { IoMdArrowDropdown } from 'react-icons/io';
+import queryKeys from '../../../services/queryKeys';
+
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+
+    const queryClient = useQueryClient()
+
+    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+
+    const fieldData = {}
+    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+    fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+    })
+    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+    fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+    })
+
+    // console.log('fieldData', fieldData)
+
+    const [fields, setFields] = useState(fieldData)
+    
+    const handleChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+        setFieldsChanged(true)
+    }
+
+    const submitSettings = useMutation({
+        mutationFn: (fields) => {
+            return pageSettings(fields)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                return setReqStatus({error: true, message: 'Unable to complete, try again later'})
+            }
+            setFieldsChanged(false)
+            setReqStatus({error: false, message: 'Completed successfully'})
+        },
+        onError: (err) => {
+            setReqStatus({error: true, message: 'Unable to complete, try again later'})
+        },
+        onSettled: () => {
+            queryClient.refetchQueries({  // refetches productProvision API call
+                queryKey: [...queryKeys.settingsData],
+            })
+            setTimeout(()=>{
+                setReqStatus({error: null, message: ''})
+            },3000)
+        },
+    })
+
+      const handleSubmit = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData?.product_id,
+            settings : {
+            ...fields
+            }
+        }
+        // console.log('formInfo', reqData)
+        submitSettings.mutate(reqData)
+      }
+
+      if (isCustom ===  true){
+          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+      }
+
+
+      return (
+        <div className="page-account-form">
+            <div className="p-0" style={{ minHeight: '500px'}}>
+
+                <form id='tab_form'>
+                    <div className="form-row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => {
+                                let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
+                                let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                return (
+                                    <div key={key} className="form-group col-md-12">
+                                        <label htmlFor="name1">{value.name}</label>
+                                        {value.controls == 'TEXT' ?
+                                            <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            :value.controls == 'TEXTAREA' ?
+                                            <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            : value.controls == 'SELECT_NO_YES' ?
+                                            // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
+                                            <div className='position-relative'>
+                                                <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
+                                                    <option value=''>Select</option>
+                                                    <option value='0'>No</option>
+                                                    <option value='1'>Yes</option>
+                                                </select>
+                                                <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
+                                            </div>
+                                            :
+                                            null
+                                        }
+                                    </div>
+                                )
+                            }
+                            )}
+                        </>
+                        {reqStatus.message &&
+                            <>
+                            <div className="col-12">
+                                <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                            </div>
+                            </>
+                        }
+                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+      )
+    }
+)
+
+
+export default GeneralTab

src/component/product/settingsTab/_Settings.jsx

@@ -0,0 +1,179 @@
+import React, { memo, useMemo, useState } from 'react'
+import GeneralTab from './GeneralTab'
+import { getSettingsData, getMyProductConfig } from '../../../services/services';
+import queryKeys from '../../../services/queryKeys';
+import { useSelector } from 'react-redux';
+import { useQuery } from '@tanstack/react-query';
+
+const Settings = memo(({productData}) => {
+
+    const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
+
+    const {data:configData, isFetching:configIsFetching, configIsError, error:configError} = useQuery({
+        queryKey: queryKeys.myProductConfig,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getMyProductConfig(reqData)
+        }
+    })
+    const settingsConfig = configData?.data?.settings_items
+    // console.log('CONFIG DATA...', settingsConfig)
+   
+    const dataFields ={
+        site_title: { name: 'Title', controls: 'TEXT', active: true },
+        site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
+        site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
+        site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
+        site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
+    }
+
+    const socialFields ={
+        facebook: { name: 'Facebook', controls: 'TEXT', active: true },
+        twitter: { name: 'Twitter', controls: 'TEXT', active: true },
+        youtube: { name: 'Youtube', controls: 'TEXT', active: true },
+    }
+
+    const homeFields ={
+        banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
+        banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
+    }
+
+    const footerFields ={
+        footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
+        boolean_footer_show_email: { name: 'Show email in footer', controls: 'SELECT_NO_YES', active: true },
+        boolean_footer_show_made_by: { name: 'Show made by in footer', controls: 'SELECT_NO_YES', active: true },
+        boolean_footer_show_socials: { name: 'Show social in footer', controls: 'SELECT_NO_YES', active: true },
+    }
+
+    const aboutFields ={
+        about_title: { name: 'About Title', controls: 'TEXT', active: true },
+        about_description: { name: 'About Details', controls: 'TEXTAREA', active: true },
+        about_extra_1: { name: 'Extra About us', controls: 'TEXTAREA', active: true },
+        about_extra_2: { name: 'More About us', controls: 'TEXTAREA', active: true },
+    }
+
+    const templateData = {
+        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
+        template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
+        template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
+        template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
+        template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
+        template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
+        template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
+        template_9 : { title: 'Template Name-9',   template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
+    }
+
+    const contactFields ={
+        contact_title : { name: 'Contact Title', controls: 'TEXT', active: true },
+        contact_introduction: { name: 'Extra Introduction', controls: 'TEXTAREA', active: true },
+    }
+
+    const settingsObject = useMemo(()=>{
+        return {
+           settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
+           home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false,  data: homeFields},
+           footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
+           about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
+           contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: contactFields },
+           social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
+           template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
+           color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
+       };
+    },[])
+
+
+    const [fieldsChanged, setFieldsChanged] = useState(false)
+
+    const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+
+    const handleChangeTab = (value) => {
+        // if(fieldsChanged){
+        //     const proceed = confirm('Continue without saving changes')
+        //     if(proceed){
+        //         setActiveTab(value)
+        //         setFieldsChanged(false)
+        //     }
+        // }else{
+        //     setActiveTab(value)
+        // }
+        setActiveTab(value)
+    }
+
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.settingsData,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getSettingsData(reqData)
+        }
+    })
+
+    const settingsData = data?.data?.settings
+    // console.log('data', settingsData)
+
+      return (
+        <>
+        {isFetching ? 
+            <>
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </div>
+            </>
+            : isError ?
+            <div className="row">
+                <div className="col-12">
+                    <p className='text-danger'>{error.message}</p>
+                </div>
+            </div>
+            :
+            <div className="tab tab-vertical">
+                <ul className="nav nav-tabs" role="tablist">
+                    <>
+                        {Object.entries(settingsObject).map(([key, value]) => (
+                            <li key={key} className="nav-item">
+                            <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
+                                id={key} 
+                                // data-bs-toggle="pill"
+                                // data-bs-target={`#${value.controls}`}
+                                type="button" 
+                                // role="tab"
+                                // aria-controls={value.controls}
+                                // aria-selected="true"
+                                onClick={()=>handleChangeTab(value.controls)}
+                            >
+                                {value.title}
+                            </a>
+                            </li>
+                        ))}
+                    </>
+                </ul>
+                <div className="tab-content">
+                    <>
+                        {Object.entries(settingsObject).map(([key, value]) => (
+                            <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                // id={value.controls} role="tabpanel"
+                                // aria-labelledby={key}
+                            >
+                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
+                            </div>
+                        ))}
+                    </>
+                </div>
+            </div>
+            }
+        </>
+      )
+    }
+)
+
+export default Settings

src/component/profile_complete/ProfileCompleteCom.jsx

@@ -1,65 +1,78 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import { useLocation } from "react-router-dom";
-// import { Form, Formik } from "formik";
+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 { useNavigate } from "react-router-dom";
+import {useLocation, useNavigate} from "react-router-dom";
+import {updateUserDetails} from "../../store/UserDetails";
+import {useDispatch} from "react-redux";
 
 
-// const validationSchema = Yup.object().shape({
+const validationSchema = Yup.object().shape({
-//     practice: Yup.string().required("Required"),
+    practice: Yup.string().required("Required"),
-//     specialization: Yup.string().required("Required"),
+    specialization: Yup.string().when('practice', {
-//     introduction: Yup.string().min(1, "Minimum 10 characters").max(50, "Maximum 50 characters").required("Required"),
+        is: (value) => typeof value === 'string' && value.trim().length > 0,
-// })
+        then: (schema) => schema.required('Required'),
-
+        otherwise: (schema) => schema,
-//   const initialValues = {
+    }),
-//     practice: '',
+    introduction: Yup.string().min(1, "Minimum 1 character").max(50, "Maximum 50 characters"),
-//     specialization: '',
+    url_name: Yup.string().min(6, "Minimum 6 characters").max(16, "Maximum 16 characters").required("Required").matches(
-//     introduction: '',
+    /^[a-zA-Z0-9]+$/, // Regex for alphanumeric characters
-//   };
+    'Must contain only alphanumeric characters' // Custom error message
+    ),
+})
 
 
 export default function ProfileCompleteCom() {
 
+    const dispatch = useDispatch()
+
     const navigate = useNavigate()
 
+    const {state: {redirectLink}} = useLocation()
+
     const [practices, setPractices] = useState([])
+    const [specialties, setSpecialties] = useState([])
 
     const [initialValues, setInitialValues] = useState({
         practice: '',
         specialization: '',
         introduction: '',
+        url_name: ''
     })
 
-    const specialties = useMemo(()=>{ // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
+    const handleUpdateSpecialties = (e) => {
         setInitialValues(prev => ({...prev, specialization: ''}))
-        if(!initialValues.practice){
+        const specialtiesArr = practices.filter(item => item.practice == e.target.value)[0]?.specialties
-            return []
+        setSpecialties(specialtiesArr)
     }
-        const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties
-        return specialtiesArr
-    },[initialValues.practice])
 
 
     const mutation = useMutation({
         mutationFn: (fields) => {
-            const {practice, specialization} = fields
+            const {practice, specialization, url_name} = fields
-            if(!practice || !specialization){
+            if (!practice || !specialization || !url_name) {
-                throw new Error('Please select both practice and specialization fields')
+                throw new Error('Please Select both Practice, Specialization and Enter URL_Name')
             }
             return completeProfile(fields)
         },
         onError: () => {
-            setTimeout(()=>{mutation.reset()}, 4000)
+            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(siteLinks.home)
+                navigate(redirectLink)
             }, 2000)
             // console.log('res', res)
         }
@@ -81,15 +94,11 @@ export default function ProfileCompleteCom(){
         }
     })
 
-    const handlePracticeChange = ({target:{name, value}}) => {
+    const handleCompleteProfile = (values) => { // FUNCTION TO COMPLETE PROFILE
-        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
+            ...values
         }
         mutation.mutate(reqData)
     }
@@ -104,7 +113,7 @@ export default function ProfileCompleteCom(){
 
     return <>
 
-        <BreadcrumbComBS title='Update Profile' paths={['Dashboard', 'Profile']} />
+        <BreadcrumbComBS title='Tell us more about your practice.' paths={['Dashboard', 'Profile']}/>
 
         {commonPractices?.isFetching ?
             <>
@@ -123,7 +132,7 @@ export default function ProfileCompleteCom(){
                 :
                 <div className="row pt-1">
                     <div className="col-md-6 m-b-30">
-                    <div className="card card-statistics h-100 mb-0">
+                        <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>
@@ -133,10 +142,19 @@ export default function ProfileCompleteCom(){
                             <div className="card-body">
                                 <div className='h-100 row flex-column'>
                                     {/* <div className="row"> */}
+                                    <Formik
+                                        initialValues={initialValues}
+                                        validationSchema={validationSchema}
+                                        onSubmit={handleCompleteProfile}
+                                        enableReinitialize={true}
+                                    >
+                                        {(props) => {
+                                        return (
+                                            <Form className='mt-2'>
                                                 <>
                                                     <div className="">
                                                         <div className="form-group position-relative">
-                                                <label className={`text-black fw-bold control-label`}>Practice :</label>
+                                                            <label className={`text-black fw-bold control-label`}>Practice : <span className="text-danger">{(props.errors.practice && props.touched.practice) && props.errors.practice}</span></label>
                                                             <div className="position-relative">
                                                                 {/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
                                                                     <option value=''>Select</option>
@@ -144,39 +162,108 @@ export default function ProfileCompleteCom(){
                                                                         <option key={index} value={practice.practice}>{practice.practice}</option>
                                                                     ))}
                                                                 </select> */}
-                                                    <select onChange={handlePracticeChange} name='practice' value={initialValues.practice} className="form-control">
+                                                                <select 
+                                                                        onChange={(e) => {props.handleChange(e); props.setFieldValue('specialization', ''); handleUpdateSpecialties(e)}} 
+                                                                        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>
+                                                                        <option key={index}
+                                                                                value={practice.practice}>{practice.practice}</option>
                                                                     ))}
                                                                 </select>
-                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> 
+                                                                <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`}>Specialization :</label>
+                                                            <label className={`text-black fw-bold control-label`}>Your
+                                                                Specialization : <span className="text-danger">{(props.errors.specialization && props.touched.specialization) && props.errors.specialization}</span></label>
                                                             <div className="position-relative">
-                                                    <select onChange={handlePracticeChange} name='specialization' value={initialValues.specialization} className="form-control">
+                                                                <select onChange={props.handleChange} name='specialization'
+                                                                        value={props.values.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%)'}} /> 
+                                                                <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`}>General Information :</label>
+                                                            <label className={`text-black fw-bold control-label`}>Other General Information : <span className="text-danger">{(props.errors.introduction && props.touched.introduction) && props.errors.introduction}</span></label>
-                                                <textarea name='introduction' rows={10} style={{resize: 'none'}} className="form-control" value={initialValues.introduction} onChange={handlePracticeChange} />
+                                                            <textarea name='introduction' rows={5} style={{resize: 'none'}}
+                                                                    className="form-control" value={props.values.introduction}
+                                                                    onChange={props.handleChange}/>
                                                         </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>
+
+                                                    <div className="">
+                                                        <div className="form-group position-relative">
+                                                            <label className={`text-black fw-bold control-label`}>URL Name : <span className="text-danger">{(props.errors.url_name && props.touched.url_name) && props.errors.url_name}</span></label>
+                                                            <div className="position-relative d-flex flex-column flex-xxl-row" style={{gap: '10px'}}>
+                                                                {/* <select onChange={handlePracticeChange} name='url_name'
+                                                                        value={initialValues.url_name} 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%)'
+                                                                }}/> */}
+                                                                <input
+                                                                    className="form-control"
+                                                                    onChange={props.handleChange} name='url_name'
+                                                                    value={props.values.url_name}
+                                                                    minLength={6}
+                                                                    maxLength={16}
+                                                                />
+                                                                <p className="border-radius-10 p-2 border border-warning"
+                                                                style={{fontSize: "1.0rem"}}>We use the URL Name to form part of
+                                                                    your default URL when we configure
+                                                                    a new URL for your products. You can always change your product
+                                                                    URL. <br/>
+                                                                    <b>Example : <span style={{color: 'red'}}>url_name</span>.product.mermsemr.com
+                                                                    </b>
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
 
                                                     {(mutation.isError || mutation.isSuccess) &&
                                                         <>
@@ -187,9 +274,14 @@ export default function ProfileCompleteCom(){
                                                     }
 
                                                     <div className="mt-auto text-end">
-                                            <button type='button' onClick={handleCompleteProfile} className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
+                                                        <button type='submit'
+                                                                className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
                                                     </div>
                                                 </>
+                                            </Form>
+                                        );
+                                        }}
+                                    </Formik>
                                     {/* </div> */}
                                 </div>
                             </div>
@@ -197,7 +289,7 @@ export default function ProfileCompleteCom(){
                     </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('img-07.png')} alt="content-image" />
+                            <img className="img-fluid" src={getImage('tell-us-more.png')} alt="content-image"/>
                         </div>
                     </div>
                 </div>

src/component/settings/Settings.jsx

@@ -1,8 +1,67 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+import queryKeys from "../../services/queryKeys";
+import { useQuery } from "@tanstack/react-query";
+import { profileDetails } from "../../services/services";
+
+
+
+
+const profileValidationSchema = Yup.object().shape({
+    // firstname: Yup.string().required("firstname is required"),
+    // lastname: Yup.string().required("lastname is required"),
+    // email: Yup.string().required("email is required"),
+    // account_name: Yup.string().required("account name is required"),
+    // phone: Yup.string().required("phone is required"),
+    // full_address: Yup.string().required("full address is required"),
+})
+
+const linksValidationSchema = Yup.object().shape({
+    // facebook_url: Yup.string().required("facebook is required"),
+    // twitter_url: Yup.string().required("twitter is required"),
+    // blogger_url: Yup.string().required("blog is required"),
+    // google_url: Yup.string().required("google is required"),
+    // linked_url: Yup.string().required("linkedin is required"),
+    // website_url: Yup.string().required("website is required"),
+})
 
 
 export default function Settings() {
+    const avtarImage = "avtar/merms-user.png";
+
+    const [intialData, setInitialData] = useState({
+        external_links: {},
+        personal_data: {},
+    })
+
+    const {data:profileInfo, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.profile_data,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return profileDetails(reqData)
+        }
+    })
+    // const profileData = profileInfo?.data // profile data
+    useMemo(()=>{
+        const data = profileInfo?.data
+        setInitialData({external_links: data?.external_links, personal_data: data?.personal_data})
+    },[profileInfo])
+    // console.log('INI', intialData)
+    
+
+    const updateProfile = (values, helpers) => {
+        console.log('Values', values)
+    }
+
+    const updateLinks = (values, helpers) => {
+        console.log('Values', values)
+    }
 
     return (
         <>
@@ -11,7 +70,21 @@ export default function Settings(){
             {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
             {/*</div>*/}
 
-
+            {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 account-contant">
                     <div className="col-12">
                         <div className="card card-statistics">
@@ -22,39 +95,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>
+                                                        <h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
-                                                    <p>Enthusiast</p>
+                                                        <div style={{padding: '10px'}}>
+                                                            <hr/>
                                                         </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">
@@ -74,49 +126,50 @@ export default function Settings(){
                                                 <h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
                                             </div>
                                             <div className="p-4">
-                                            <form>
+                                                <Formik
+                                                    initialValues={intialData?.personal_data}
+                                                    validationSchema={profileValidationSchema}
+                                                    onSubmit={updateProfile}
+                                                >
+                                                    {(props) => {
+                                                    return (
+                                                        <Form className=''>
                                                             <div className="form-row">
                                                                 <div className="form-group col-md-12">
-                                                        <label htmlFor="name1">First Name</label>
+                                                                    <label htmlFor="name1">First Name {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">*</span>}</label>
-                                                        <input type="text" className="form-control" id="name1"
+                                                                    <input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
-                                                               value="Alice" />
                                                                 </div>
                                                                 <div className="form-group col-md-12">
-                                                        <label htmlFor="name1">Last Name</label>
+                                                                    <label htmlFor="name1">Last Name {(props.errors.lastname && props.touched.lastname) && <span className="text-danger">*</span>}</label>
-                                                        <input type="text" className="form-control" id="name1"
+                                                                    <input type="text" className="form-control" name="lastname" value={props.values?.lastname} onChange={props.handleChange} />
-                                                               value="Williams" />
                                                                 </div>
                                                                 <div className="form-group col-md-12">
-                                                        <label htmlFor="name1">Account Name</label>
+                                                                    <label htmlFor="name1">Account Name {(props.errors.account_name && props.touched.account_name) && <span className="text-danger">*</span>}</label>
-                                                        <input type="text" className="form-control" id="name1"
+                                                                    <input type="text" className="form-control" name="account_name" value={props.values?.account_name} onChange={props.handleChange} />
-                                                               value="This is the best hospital name" />
                                                                 </div>
                                                                 {/*<div className="form-group col-md-12">*/}
                                                                 {/*    <label htmlFor="title1">Email</label>*/}
-                                                    {/*    <input type="text" className="form-control" id="title1"*/}
+                                                                {/*    <input type="text" className="form-control" name="title1"*/}
                                                                 {/*           value="email@email.com" />*/}
                                                                 {/*</div>*/}
                                                                 <div className="form-group col-md-12">
-                                                        <label htmlFor="phone1">Phone Number</label>
+                                                                    <label htmlFor="phone1">Phone Number {(props.errors.phone && props.touched.phone) && <span className="text-danger">*</span>}</label>
-                                                        <input type="text" className="form-control" id="phone1"
+                                                                    <input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
-                                                               value="(01) 97 563 15613" />
                                                                 </div>
                                                                 <div className="form-group col-md-12">
-                                                        <label htmlFor="email1">Email</label>
+                                                                    <label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">*</span>}</label>
-                                                        <input type="email" className="form-control" id="email1"
+                                                                    <input type="text" className="form-control" name="email" value={props.values?.email} onChange={props.handleChange} />
-                                                               value="alicewilliams@gmail.com" />
                                                                 </div>
                                                             </div>
                                                             <div className="form-group">
-                                                    <label htmlFor="add1">Address</label>
+                                                                <label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">*</span>}</label>
-                                                    <input type="text" className="form-control" id="add1"
+                                                                <input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
-                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
-                                                </div>
-                                                <div className="form-group">
-                                                    <label htmlFor="add2">Address 2</label>
-                                                    <input type="text" className="form-control" id="add2"
-                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
                                                             </div>
+                                                            {/*<div className="form-group">*/}
+                                                            {/*    <label htmlFor="add2">Address 2</label>*/}
+                                                            {/*    <input type="text" className="form-control" id="add2"*/}
+                                                            {/*           value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>*/}
+                                                            {/*</div>*/}
 
                                                             {/*<div className="form-row">*/}
                                                             {/*    <div className="form-group col-md-4">*/}
@@ -158,8 +211,10 @@ export default function Settings(){
                                                                 <button type="submit" className="btn btn-primary">Update Profile
                                                                 </button>
                                                             </div>
-
+                                                        </Form>
-                                            </form>
+                                                    );
+                                                    }}
+                                                </Formik>
                                             </div>
                                         </div>
                                     </div>
@@ -169,46 +224,50 @@ export default function Settings(){
                                                 <h5 className="mb-0 py-2">Your External Link</h5>
                                             </div>
                                             <div className="p-4">
-                                            <form>
+                                                <Formik
+                                                    initialValues={intialData?.external_links}
+                                                    validationSchema={linksValidationSchema}
+                                                    onSubmit={updateLinks}
+                                                >
+                                                    {(props) => {
+                                                    return (
+                                                        <Form className=''>            
                                                             <div className="form-group">
-                                                    <label htmlFor="fb">Facebook URL:</label>
+                                                                <label htmlFor="fb">Facebook URL: {(props.errors.facebook_url && props.touched.facebook_url) && <span className="text-danger">*</span>}</label>
-                                                    <input type="text" className="form-control" id="fb"
+                                                                <input type="text" className="form-control" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
-                                                           value="https://www.facebook.com/" />
                                                             </div>
                                                             <div className="form-group">
-                                                    <label htmlFor="tr">Twitter URL:</label>
+                                                                <label htmlFor="tr">Twitter URL: {(props.errors.twitter_url && props.touched.twitter_url) && <span className="text-danger">*</span>}</label>
-                                                    <input type="text" className="form-control" id="tr"
+                                                                <input type="text" className="form-control" name="twitter_url" value={props.values?.twitter_url} onChange={props.handleChange} />
-                                                           value="https://twitter.com/" />
                                                             </div>
 
                                                             <div className="form-group">
-                                                    <label htmlFor="br">Blogger URL:</label>
+                                                                <label htmlFor="br">Blogger URL: {(props.errors.blogger_url && props.touched.blogger_url) && <span className="text-danger">*</span>}</label>
-                                                    <input type="text" className="form-control" id="br"
+                                                                <input type="text" className="form-control" name="blogger_url" value={props.values?.blogger_url} onChange={props.handleChange} />
-                                                           value="https://www.blogger.com" />
                                                             </div>
 
                                                             <div className="form-group">
-                                                    <label htmlFor="go">Google+ URL:</label>
+                                                                <label htmlFor="go">Google+ URL: {(props.errors.google_url && props.touched.google_url) && <span className="text-danger">*</span>}</label>
-                                                    <input type="text" className="form-control" id="go"
+                                                                <input type="text" className="form-control" name="google_url" value={props.values?.google_url} onChange={props.handleChange} />
-                                                           value="https://plus.google.com/discover" />
                                                             </div>
 
                                                             <div className="form-group">
-                                                    <label htmlFor="li">LinkedIn URL:</label>
+                                                                <label htmlFor="li">LinkedIn URL: {(props.errors.linked_url && props.touched.linked_url) && <span className="text-danger">*</span>}</label>
-                                                    <input type="text" className="form-control" id="li"
+                                                                <input type="text" className="form-control" name="linked_url" value={props.values?.linked_url} onChange={props.handleChange} />
-                                                           value="https://in.linkedin.com/" />
                                                             </div>
 
                                                             <div className="form-group">
-                                                    <label htmlFor="we">Website URL:</label>
+                                                                <label htmlFor="we">Website URL: {(props.errors.website_url && props.touched.website_url) && <span className="text-danger">*</span>}</label>
-                                                    <input type="text" className="form-control" id="we"
+                                                                <input type="text" className="form-control" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
-                                                           value="https://yourwebsite.com" />
                                                             </div>
                                                             <div style={{textAlign: "right"}}>
-                                                    <button type="submit" className="btn btn-primary">Update Links</button>
+                                                                <button type="submit" className="btn btn-primary">Update Links
+                                                                </button>
                                                             </div>
-
+                                                        </Form>
-                                            </form>
+                                                    );
+                                                    }}
+                                                </Formik>
                                             </div>
                                         </div>
                                     </div>
@@ -217,7 +276,7 @@ export default function Settings(){
                         </div>
                     </div>
                 </div>
-
+            }
         </>
     )
 }

src/component/start/Start.jsx

@@ -0,0 +1,82 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
+
+export default function Start() {
+
+    const bgImg = getImage("side-banner.jpg");
+
+    return (
+        <>
+            <BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']}/>
+            <div className="row">
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3"
+                         style={{minHeight: '550px', borderRadius: '10px', backgroundImage: `url(${bgImg})`}}>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Start with</h5>
+                                <h2 className="text-primary pt-3"><a href="/product/A000001">Personal Website</a></h2>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <li>post events</li>
+                                    <li>cancel any time</li>
+                                </ul>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Start with</h5>
+                                <h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <li>post events</li>
+                                    <li>cancel any time</li>
+                                </ul>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    {/*<div className="card card-statistics text-center py-3">*/}
+                    {/*<div className="card-body pricing-content">*/}
+                    {/*<div className="pricing-content-card">*/}
+                    {/*    <h5>small</h5>*/}
+                    {/*    <h2 className="text-primary pt-3">$80</h2>*/}
+                    {/*    <p className="text-primary pb-3">/ Monthly</p>*/}
+                    {/*    <ul className="py-2">*/}
+                    {/*        <li>post jobs</li>*/}
+                    {/*        <li>advanced instructors search</li>*/}
+                    {/*        <li>invite candidates</li>*/}
+                    {/*        <li>post events</li>*/}
+                    {/*        <li>cancel any time</li>*/}
+                    {/*    </ul>*/}
+                    {/*    <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
+                </div>
+            </div>
+
+        </>
+    )
+}

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

@@ -4,9 +4,12 @@ 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},
@@ -26,7 +29,9 @@ export default function Subscription() {
 
     const currentSubscription = data?.data?.current_product
     const otherSubscriptions = data?.data?.options
-    console.log('urlData', data?.data)
+    const stripe_customer_id = data?.data.stripe_customer_id
+
+    // console.log('urlData', data?.data)
 
     return (
         <>
@@ -45,12 +50,17 @@ export default function Subscription() {
                     :
                     <div className="row">
                         <div className="col-12 col-lg-6 col-xl-3">
-                    <div className="card card-statistics text-center py-3">
+                            <div className="card card-statistics text-center py-3" style={{backgroundColor: '#e6f5f4'}}>
                                 <div className="card-body pricing-content">
-                            <div className="pricing-content-card">
+                                    <div className="pricing-content-card" style={{minHeight: '350px'}}>
-                                <h5>Current Subscription(s)</h5>
+                                        <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>
@@ -61,19 +71,32 @@ export default function Subscription() {
                                 <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">
+                                            <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>
-                                        <ul className="py-2">
+                                                <ol className="py-2"
+                                                    style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
                                                     {value?.items?.map(item => (
-                                            <li key={item}>{item}</li>
+                                                        <li key={item.description}>{item.description}</li>
                                                     ))}
-                                        </ul>
+                                                </ol>
-                                    <div className="pt-2">
+
-                                        <button className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
                                             </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>

src/component/traffic/Traffic.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import TrafficChart from "./TrafficChart";
+
+
+export default function Traffic() {
+
+    return (
+        <>
+            <BreadcrumbComBS title='Traffic' paths={['Dashboard', 'Traffic']}/>
+            <div className="row">
+                <div className="col-lg-4">
+                    <div className="card card-statistics" style={{minHeight: '350px', borderRadius: '10px', backgroundColor: 'aliceblue'}}>
+                        <div className="card-header">
+                            <div className="card-heading">
+                                <h4 className="card-title">Site Traffic Monitoring</h4>
+                            </div>
+                        </div>
+                        <div className="card-body">
+
+
+
+                        </div>
+                    </div>
+                </div>
+                <div className="col-lg-8">
+                    <div className="card card-statistics">
+                        <div className="card-header">
+                            <div className="card-heading">
+                                <h4 className="card-title">Plot</h4>
+                            </div>
+                        </div>
+                        <div className="card-body">
+                            <div className="apexchart-wrapper">
+                                <TrafficChart />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}

src/component/traffic/TrafficChart.jsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import ReactApexChart from "react-apexcharts";
+
+    const TrafficChart = () => {
+        const [state, setState] = useState({
+          
+            series: [
+              {
+                // name: "High - 2013",
+                name: 'Professional Website',
+                data: [28, 29, 33, 36, 32, 32, 33, 33, 36, 32, 32, 33]
+              },
+              {
+                // name: "Low - 2013",
+                name: 'Personal Website',
+                data: [12, 11, 14, 18, 17, 13, 13, 14, 18, 17, 13, 13]
+              },
+              {
+                // name: "Low - 2013",
+                name: 'Personal Forum',
+                data: [10, 11, 14, 19, 18, 23, 17, 14, 10, 17, 23, 10]
+              },
+              {
+                // name: "High - 2013",
+                name: 'Professional Forum',
+                data: [20, 19, 30, 36, 30, 35, 33, 33, 36, 32, 32, 30]
+              }
+            ],
+            options: {
+              chart: {
+                height: 350,
+                type: 'line',
+                dropShadow: {
+                  enabled: true,
+                  color: '#000',
+                  top: 18,
+                  left: 7,
+                  blur: 10,
+                  opacity: 0.5
+                },
+                zoom: {
+                  enabled: false
+                },
+                toolbar: {
+                  show: false
+                }
+              },
+              colors: ['#77B6EA', '#545454', '#F50898','#213ece'],
+              dataLabels: {
+                enabled: true,
+              },
+              stroke: {
+                curve: 'smooth'
+              },
+              title: {
+                text: 'Recent Sites Traffic',
+                align: 'left'
+              },
+              grid: {
+                borderColor: '#e7e7e7',
+                row: {
+                  colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+                  opacity: 0.5
+                },
+              },
+              markers: {
+                size: 1
+              },
+              xaxis: {
+                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+                title: {
+                  text: 'Month'
+                }
+              },
+              yaxis: {
+                title: {
+                  text: 'Visits'
+                },
+                min: 5,
+                max: 40
+              },
+              legend: {
+                position: 'top',
+                horizontalAlign: 'right',
+                floating: true,
+                offsetY: -25,
+                offsetX: -5
+              }
+            },
+          
+          
+        });
+
+        
+
+        return (
+          <div>
+            <div id="chart">
+                <ReactApexChart options={state.options} series={state.series} type="line" height={450} />
+              </div>
+            <div id="html-dist"></div>
+          </div>
+        );
+      }
+
+
+
+      export default TrafficChart

src/css/style.scss

@@ -99,8 +99,13 @@ $event-padding: 10px;
   border-radius: 5px !important;
 }
 .billing{
-  background-color: darkgoldenrod;
+  background-color: #b9c2c5;
-  color: white;
+  color: #77117a;
+}
+
+.next_billing{
+  background-color: #cff1f0;
+  color: #19548e;
 }
 .extraProductCard{
   background-color: aliceblue;

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/helpers/sortObjectByListOrder.js

@@ -0,0 +1,14 @@
+const sortObjectByListOrder = (data) => {
+    const sortedEntriesByValue = Object.entries(data).sort((a, b) => {
+        if(a[1].list_order > b[1].list_order){
+            return 1
+        }else{
+            return -1
+        }
+    }); // Sorts numerically by value
+
+    const sortedObjectByValue = Object.fromEntries(sortedEntriesByValue);
+    return sortedObjectByValue
+}
+
+export default sortObjectByListOrder

src/links/siteLinks.js

@@ -3,12 +3,16 @@ const siteLinks = {
     help: '/help',
     home: '/',
     dash: '/dash',
+    traffic: '/traffic',
+    start: '/start',
     profile_complete: '/profile-complete',
     product: '/product/*',
     contacts: '/contacts',
     comments: '/comments',
     reports: '/reports',
     subscription: '/subscription',
+    subscription_success:'/subscription-success',
+    subscribe: '/subscribe',
     onboard: '/subscription',
     user: '/user',
     calendar: '/calendar',

src/services/queryKeys.js

@@ -1,12 +1,16 @@
 const queryKeys = {
     user_details: ['user_details'],
     product_url: ['product_url'],
+    dash_payments: ['dash_payments'],
     products: ['product-data'],
     myproduct_provision: ['myproduct_provision'],
     product_page: ['product_page'],
     recentAction: ['recent-action'],
     settingsData: ['settings_data'],
+    myProductConfig: ['myproduct_config'],
+    productTemplateData: ['product_template_data'],
     subscriptions: ['subscriptions'],
+    profile_data: ['profile_data'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],

src/services/services.js

@@ -26,7 +26,8 @@ const postAuxEnd = (path, postData, media=false) => {
     return axios.post(`${basePath}${path}`, postData).then(res => {
         return res
     }).catch(err => {
-        throw new Error(err.response.data.msg);
+        // console.log('res', err.response.data)
+        throw new Error(err.response.data.error_message);
     })
 }
 
@@ -75,6 +76,14 @@ export const topBar = (reqData) => {
     return postAuxEnd(`/panel/account/bar`, postData, false)
 }
 
+// FUNCTION TO GET PROFILE DATA
+export const profileDetails = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/profile`, postData, false)
+}
+
 // FUNCTION TO GET PRODUCT BY ID
 export const MyProductData = (reqData) => {
     let postData = {
@@ -83,6 +92,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 = {
@@ -91,7 +107,7 @@ export const getCalendarEvents = (reqData) => {
     return postAuxEnd(`/panel/account/calendar`, postData, false)
 }
 
-// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
+// FUNCTION TO GET CONTACT DATA
 export const contactData = (reqData) => {
     let postData = {
         ...reqData,
@@ -99,6 +115,14 @@ export const contactData = (reqData) => {
     return postAuxEnd(`/panel/contacts`, postData, false)
 }
 
+// FUNCTION TO GET COMMENTS DATA
+export const commentsData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/comments`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
 export const productsURL = (reqData) => {
     let postData = {
@@ -107,6 +131,14 @@ export const productsURL = (reqData) => {
     return postAuxEnd(`/panel/account/products/url`, postData, false)
 }
 
+// FUNCTION TO GET DASHBOARD PAYMENTS
+export const getDashPayments = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/payments`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
 export const productsData = (reqData) => {
     let postData = {
@@ -166,6 +198,30 @@ export const getSettingsData = (reqData) => {
     return postAuxEnd(`/panel/myproduct/settings/values`, postData, false)
 }
 
+// FUNCTION TO GET MY PRODUCT CONFIGURATION
+export const getMyProductConfig = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/configuration`, postData, false)
+}
+
+// FUNCTION TO GET SETTINGS DATA
+export const getProductTemplateData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/templates`, postData, false)
+}
+
+// FUNCTION TO ACTIVATE TEMPLATE
+export const activateTemplate = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/template/activate`, postData, false)
+}
+
 // FUNCTION TO GET PRODUCT SUBSCRIPTIONS
 export const completeProfile = (reqData) => {
     let postData = {
@@ -190,6 +246,14 @@ export const getCommonPractice = (reqData) => {
     return postAuxEnd(`/panel/common/practice`, postData, false)
 }
 
+// FUNCTION TO SET EXTERNAL URL
+export const setExternalURL = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/myproduct/external-url', postData, false)
+}
+
 
 
 

src/views/ProductPage.jsx

@@ -2,18 +2,19 @@ import React, { useEffect } from 'react'
 import ProductFactory from '../component/product/ProductFactory'
 import { useSelector } from 'react-redux';
 import siteLinks from '../links/siteLinks';
-import { useNavigate } from 'react-router-dom';
+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:{profile_completed: false}})
+            navigate(siteLinks.profile_complete, {replace: true, state:{redirectLink: pathname}})
         }
     },[])
     

src/views/StartPage.jsx

@@ -0,0 +1,7 @@
+
+import Start from "../component/start/Start";
+
+
+export default function StartPage(){
+    return <Start />
+}

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/TrafficPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import Traffic from "../component/traffic/Traffic";
+
+export default function TrafficPage() {
+    return (
+        <Traffic />
+    )
+}