user profile picture link added

.env

@@ -16,3 +16,6 @@ REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
 
+# show download button
+REACT_APP_SHOW_DOWNLOAD=0
+

.env.development

@@ -17,3 +17,6 @@ REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
 
+# show download button
+REACT_APP_SHOW_DOWNLOAD=0
+

.env.production

@@ -14,4 +14,7 @@ REACT_APP_CONTACTS_LINK='https://www.mermsemr.com/contacts'
 REACT_APP_TERMS_LINK='https://www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
-REACT_APP_TIMEOUT=600000
+REACT_APP_TIMEOUT=600000
+
+# show download button
+REACT_APP_SHOW_DOWNLOAD=0

src/component/auth/AuthFooter.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import GoogleDownload from '../../assets/img/download/andriod.jpg'
+import IOSDownload from '../../assets/img/download/apple.jpg'
+
+export default function AuthFooter() {
+  return (
+    <div className='w-100'>
+        {Number(process.env.REACT_APP_SHOW_DOWNLOAD) == 100 &&
+        <>
+            <div className="row" style={{margin: '5px'}}>
+                <hr />
+            </div>
+            <div className="row" style={{marginTop: '20px'}}>
+                <div className="col-6">
+                    <div className="app-store-icons-wrap text-center">
+                        <a className="icon google"
+                            href='#' >
+                            <img src={IOSDownload} className='w-80 h-auto' alt='IOS Download' />
+                        </a>
+                    </div>
+                </div>
+
+                <div className="col-6">
+                    <div className="app-store-icons-wrap text-center">
+                        <a className="icon apple"  href='#'>
+                            <img src={GoogleDownload} className='w-80 h-auto' alt='IOS Download' />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </>
+        }
+
+        <div className="login-links">
+            <a href={process.env.REACT_APP_HOME_LINK}>Home</a>
+            <a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
+            <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
+            <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
+        </div>
+    </div>
+  )
+}

src/component/auth/Forgetpwd2.jsx

@@ -8,6 +8,7 @@ import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query'
 import { recoverPWD } from '../../services/services';
 import getImage from '../../utils/getImage';
+import AuthFooter from './AuthFooter';
 
 const validationSchema = Yup.object().shape({
     username: Yup.string()
@@ -17,7 +18,7 @@ const validationSchema = Yup.object().shape({
     //     "Invalid email format"
     //   )
       .min(3, "Minimum 3 characters")
-      .max(50, "Maximum 50 characters")
+      .max(25, "Maximum 25 characters")
       .required("Email is required"),
   })
 
@@ -49,7 +50,7 @@ export default function Forgetpwd2() {
                         <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-1h" style={{maxWidth: '520px'}}>
                                 <div className="mt-5 d-flex">
-                                    <div className="bg-white register p-5">
+                                    <div className="bg-white register px-5 pt-5 pb-3">
                                         <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
                                         {!mutation.isSuccess && <p>Please enter your username.</p>}
                                         <Formik
@@ -65,7 +66,7 @@ export default function Forgetpwd2() {
                                                         <>
                                                             <div className="col-12">
                                                                 <div className="form-group">
-                                                                    <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
+                                                                    <label className={`text-black fw-bold control-label`}>Username* <span className='text-danger' style={{fontSize: '12px'}}>{(props.errors.username && props.touched.username) && props.errors.username}</span></label>
                                                                     <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
                                                                 </div>
                                                             </div>
@@ -97,6 +98,7 @@ export default function Forgetpwd2() {
                                             );
                                             }}
                                         </Formik>
+                                        <AuthFooter />
                                     </div>
                                 </div>
                             </div>

src/component/auth/Login2.jsx

@@ -9,8 +9,7 @@ import siteLinks from '../../links/siteLinks'
 import { loginUser } from '../../services/services'
 import { updateUserDetails } from '../../store/UserDetails'
 
-import GoogleDownload from '../../assets/img/download/andriod.jpg'
-import IOSDownload from '../../assets/img/download/apple.jpg'
+import AuthFooter from './AuthFooter'
 
 export default function Login() {
 
@@ -47,12 +46,12 @@ export default function Login() {
         console.log(error)
     },
       onSuccess: (res) => {
-        if(res?.data?.error_message){
+        if(res?.data && res?.data?.error_message){
             throw({message: res?.data?.error_message})
         }
         const {token, room, uid} = res?.data
         if(!token || !room){
-            throw({message: 'something went wrong, try again!'})
+            throw({message: 'Unable to complete your login, Please try again!'})
         }
         localStorage.setItem('token', token)
         localStorage.setItem('room', room)
@@ -133,35 +132,7 @@ export default function Login() {
                                                 </div>
                                             </div>
                                         </form>
-                                        <div className="row" style={{margin: '5px'}}>
-                                            <hr />
-                                        </div>
-                                        <div className="row" style={{marginTop: '20px'}}>
-                                            <div className="col-6">
-                                                <div className="app-store-icons-wrap text-center">
-                                                    <a className="icon google"
-                                                        href='#' >
-                                                        <img src={IOSDownload} className='w-80 h-auto' alt='IOS Download' />
-                                                    </a>
-                                                </div>
-                                            </div>
-
-                                            <div className="col-6">
-                                                <div className="app-store-icons-wrap text-center">
-                                                    <a className="icon apple"  href='#'>
-                                                        <img src={GoogleDownload} className='w-80 h-auto' alt='IOS Download' />
-                                                    </a>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <div className="login-links">
-                                            <a href={process.env.REACT_APP_HOME_LINK}>Home</a>
-                                            <a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
-                                            <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
-                                            <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
-                                        </div>
-
+                                        <AuthFooter />
                                     </div>
                                 </div>
                             </div>

src/component/auth/Signup2.jsx

@@ -9,6 +9,7 @@ import siteLinks from '../../links/siteLinks'
 import {useMutation} from '@tanstack/react-query';
 import {signUpUser} from '../../services/services';
 import getImage from '../../utils/getImage';
+import AuthFooter from './AuthFooter';
 
 const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -64,9 +65,9 @@ export default function Signup2() {
                                 <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">
+                                        <div className="bg-white register px-5 pt-5 pb-3">
                                             <h1 className="mb-2">{process.env.REACT_APP_PANEL_NAME}</h1>
-                                            <p>Welcome, Please create your account.</p>
+                                            <p>Welcome, please create your account.</p>
                                             <Formik
                                                 initialValues={initialValues}
                                                 validationSchema={validationSchema}
@@ -173,19 +174,23 @@ export default function Signup2() {
                                                                 }
 
                                                                 <div className="col-12 mt-3">
-                                                                    <p>Already have an account ?<Link
-                                                                        to={siteLinks.login}>
-                                                                        <button
-                                                                            className="btn btn-warning text-uppercase">
-                                                                            Sign In
-                                                                        </button>
-                                                                    </Link></p>
+                                                                    <p>
+                                                                        <span style={{paddingLeft: '5px' , fontWeight: 'bolder'}}>Already have an account? </span>
+                                                                        <Link
+                                                                            to={siteLinks.login}>
+                                                                            <button
+                                                                                className="btn btn-warning text-uppercase">
+                                                                                Sign In
+                                                                            </button>
+                                                                        </Link>
+                                                                    </p>
                                                                 </div>
                                                             </div>
                                                         </Form>
                                                     );
                                                 }}
                                             </Formik>
+                                            <AuthFooter />
                                         </div>
                                     </div>
                                 </div>

src/component/calendar/Calendar.jsx

@@ -48,7 +48,8 @@ export default function Calendar(){
     }
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.calendar_events,
-        queryFn: () => getCalendarEvents(reqData)
+        queryFn: () => getCalendarEvents(reqData),
+        staleTime: 0
     })
 
     const receievedEvents = data?.data

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

@@ -59,7 +59,7 @@ export default function DashPayments() {
                             </tr>
                             </thead>
                             <tbody>
-                                {payments.length > 0 ? 
+                                {payments && payments?.length > 0 ?
                                 payments.map((item, index) => {
                                     return (
                                         <tr key={index}>

src/component/home/Products.jsx

@@ -50,7 +50,7 @@ export default function Products() {
                                     </div>
                                     <div className="report-details">
                                         <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
-                                        <h4><span style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
+                                        <h4><span className='text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
                                     </div>
                                 </div>
                             </Link>

src/component/home/ProductsURL.jsx

@@ -31,7 +31,7 @@ export default function ProductsURL() {
                         {/*<a className="btn btn-xs" href="#!">Export <i className="zmdi zmdi-download pl-1"></i> </a>*/}
                     </div>
                 </div>
-                <div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
+                <div className="overflow-y-auto card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
                     <div className="datatable-wrapper table-responsive">
                     {isFetching ? 
                         <>

src/component/home/RecentActions.jsx

@@ -77,7 +77,7 @@ export default function RecentActions() {
                             <h4>{dataAction?.data?.completed}</h4>
                         </div>
                     </div>
-                    <div className="table-responsive m-t-20">
+                    <div className="overflow-y-auto table-responsive m-t-20">
                         <table id="datatable-buttons" className="table">
                             <thead>
                             <tr>
@@ -94,7 +94,7 @@ export default function RecentActions() {
                                 let text = action?.status == '5' ? 'completed' : action?.status == '3' ? 'verifying' : action?.status == '0' ? 'processing' : 'processing'
                                 return (
                                     <tr key={index}>
-                                        <td>{action?.id}</td>
+                                        <td>{(action?.id).toString().slice(-4)}</td>
                                         <td>{action?.action_label}</td>
                                         <td>{new Date(action?.added).toDateString()}</td>
                                         <td>

src/component/layout/layoutcom/UserHeader.jsx

@@ -7,7 +7,7 @@ import siteLinks from "../../../links/siteLinks";
 
 export default function UserHeader(){
 
-    const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+    const { userDetails } = useSelector((state) => state?.userDetails); // USER Details
 
     const nav_menu = useRef(null)
 
@@ -74,10 +74,15 @@ export default function UserHeader(){
                         <ul className="navbar-nav nav-right ml-auto">
                             <li className="nav-item user-profile">
                                 <a onClick={toggleMenu} className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdow">
-                                    <img src={getImage('profile-pic-circle.png')} alt="avtar-img" />
+                                    <img 
+                                        src={userDetails?.picture ? userDetails?.picture : getImage('profile-pic-circle.png')}
+                                        // src={getImage('profile-pic-circle.png')} 
+                                        alt="avtar-img" 
+                                    />
                                     <span className="bg-success user-status"></span>
                                 </a>
                                 <div ref={nav_menu} onClick={toggleMenu} className="dropdown-menu animated fadeIn">
+                                    <div className="position-fixed" style={{top: '0px', left: '0px', right: '0px', bottom: '0px'}}></div>
                                     <div className="bg-gradient px-4 py-3">
                                         <div className="d-flex align-items-center justify-content-between">
                                             <div className="mr-1">

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']} />*/}
@@ -54,12 +66,17 @@ export default function ProductActive({productData}){
                                         </button>
                                     </div>
                                 </div>
-                                <div className="card-body">
+                                <div className="card-body" style={{minHeight: '680px'}}>
                                     <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
                                 </div>
                                 <div className="p-4 ml-auto">
-                                    <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
-                                    </button>
+                                    <div 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>
@@ -70,7 +87,7 @@ export default function ProductActive({productData}){
                                         <h4 className="card-title"> Site Settings </h4>
                                     </div>
                                 </div>
-                                <div className="card-body">
+                                <div className="card-body" style={{minHeight: '680px'}}>
                                     <Settings productData={productData} />
                                 </div>
                             </div>

src/component/product/ProductProvision.jsx

@@ -1,39 +1,41 @@
-import { useEffect } from "react";
-import { useQuery } from "@tanstack/react-query";
+import {useEffect} from "react";
+import {useQuery} from "@tanstack/react-query";
 import queryKeys from "../../services/queryKeys";
-import { productProvision } from "../../services/services";
+import {productProvision} from "../../services/services";
 import getImage from "../../utils/getImage";
-import { SocketContextValues } from "../context/SocketIOContext";
+import {SocketContextValues} from "../context/SocketIOContext";
 
 
-export default function ProductProvision(props){
+export default function ProductProvision(props) {
     const {joinRoom} = SocketContextValues() // Destructures values from socket context
 
-    const productTitle  = props?.productData?.title;
-    const productDescription  = props?.productData?.description;
+    const productTitle = props?.productData?.title;
+    const productDescription = props?.productData?.description;
     const productID = props?.productData?.product_id
     const productUID = props?.productData?.product_uid
     const productSubUID = props?.productData?.product_subscription_uid
 
     const reqData = {
-        product_id : productID,
+        product_id: productID,
         product_subscription_uid: productSubUID
     }
 
-    const {data:provision, isFetching, isError, error} = useQuery({
+    const {data: provision, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.myproduct_provision,
         queryFn: () => productProvision(reqData)
     })
 
     const provisionData = provision?.data
 
-    useEffect(()=>{
-        joinRoom(productSubUID); // provision subscription room
-    },[])
+    useEffect(() => {
+        const provision_room = "PROVISION_" + productSubUID;
+        console.log("JOINING ROOM ON START *** ", provision_room);
+        joinRoom(provision_room); // provision subscription room
+    }, [])
 
     return (
         <>
-            {isFetching ? 
+            {isFetching ?
                 <>
                     <div className="row">
                         <div className="col-12">
@@ -42,82 +44,87 @@ export default function ProductProvision(props){
                     </div>
                 </>
                 : isError ?
-                <div className="row">
-                    <div className="col-12">
-                        <p className='text-danger'>{error.message}</p>
-                    </div>
-                </div>
-                :
-                <>
                     <div className="row">
-                        <div className="col-md-12">
-                            <div className="card card-statistics">
-                                <div className="card-header">
+                        <div className="col-12">
+                            <p className='text-danger'>{error.message}</p>
+                        </div>
+                    </div>
+                    :
+                    <>
+                        <div className="row">
+                            <div className="col-md-12">
+                                <div className="card card-statistics">
+                                    <div className="card-header">
                                         <div className="card-heading">
-                                        <h4 className="card-title">Creating - {productTitle} </h4>
+                                            <h4 className="card-title">Creating - {productTitle} </h4>
                                         </div>
                                     </div>
                                     <div className="card-body">
                                         <div className="progress">
-                                            <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
-                                            aria-valuenow={`${provisionData?.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData?.percent_completed}%`}} ></div>
+                                            <div className="progress-bar progress-bar-striped progress-bar-animated"
+                                                 role="progressbar"
+                                                 aria-valuenow={`${provisionData?.percent_completed}%`}
+                                                 aria-valuemin="0" aria-valuemax="100"
+                                                 style={{width: `${provisionData?.percent_completed}%`}}></div>
                                         </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div className="row">
-                        <div className="col-md-12">
+                        <div className="row">
+                            <div className="col-md-12">
 
 
+                            </div>
                         </div>
-                    </div>
-                    <div className="row">
-                        <div className="col-lg-6">
+                        <div className="row">
+                            <div className="col-lg-6">
 
-                            <div className="card card-statistics">
-                                <div className="card-header">
-                                    <div className="card-heading">
-                                        <h4 className="card-title">Progress Information</h4>
+                                <div className="card card-statistics">
+                                    <div className="card-header">
+                                        <div className="card-heading">
+                                            <h4 className="card-title">Progress Information</h4>
+                                        </div>
                                     </div>
-                                </div>
-                                <div className="card-body">
-                                    <div className="table-responsive">
-                                        <table className="table table-info mb-0">
-                                            <thead>
-                                            <tr>
-                                                <th scope="col" style={{width: '10px'}}>#</th>
-                                                <th scope="col">Action</th>
-
-                                            </tr>
-                                            </thead>
-                                            <tbody>
-                                                {provisionData?.activities?.map(item => (
-                                                <tr key={item.id}>
-                                                    <th scope="row">{item.id}</th>
-                                                    <td>{item.action}</td>
+                                    <div className="card-body">
+                                        <div className="table-responsive">
+                                            <table className="table table-info mb-0">
+                                                <thead>
+                                                <tr>
+                                                    <th scope="col" style={{width: '10px'}}>#</th>
+                                                    <th scope="col">Action</th>
 
                                                 </tr>
+                                                </thead>
+                                                <tbody>
+                                                {provisionData?.activities?.map(item => (
+                                                    <tr key={item.id}>
+                                                        <th scope="row">{item.id}</th>
+                                                        <td>{item.action}</td>
+
+                                                    </tr>
                                                 ))}
-                                            </tbody>
-                                        </table>
+                                                </tbody>
+                                            </table>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div className="col-lg-6">
-                            <div className="card card-statistics ">
-                                <h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
-                                <img className="card-img-top" src={getImage('widget/working.jpg')}  alt="Card image cap" />
-                                {/* <div className="card-body">
+                            <div className="col-lg-6">
+                                <div className="card card-statistics ">
+                                    <h4 className="card-title" style={{padding: '10px'}}>Started creating your
+                                        selection</h4>
+                                    <img className="card-img-top" src={getImage('widget/working.jpg')}
+                                         alt="Card image cap"/>
+                                    {/* <div className="card-body">
                                     <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
                                 </div> */}
-                            </div>
+                                </div>
 
+                            </div>
                         </div>
-                    </div>
-                </>
+                    </>
             }
         </>
     )

src/component/product/ProductStart.jsx

@@ -126,7 +126,7 @@ export default function ProductStart(props){
             </div>
 
             {/* Vertical Center Modal */}
-            <div ref={modalRef} className="modal fade" id="verticalCenter" tabIndex="-1" role="dialog" aria-hidden="true">
+            <div ref={modalRef} className="modal fade" id="verticalCenter" tabIndex="-1" role="dialog" aria-hidden="false">
                 <div className="modal-dialog modal-dialog-centered" role="document">
                     <div className="modal-content">
                         <div className="modal-header">

src/component/product/settingsTab/ColorStyleConfigure.jsx

@@ -1,6 +1,179 @@
-const  ColorStyleConfigure =()=>{
+import React, {memo} from 'react'
+import getImage from "../../../utils/getImage";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import {
+    getProductcolorStyleCss,
+    activateTemplate,
+    getProductColorStyles,
+    activateColorStyle
+} from '../../../services/services';
+import {Link} from "react-router-dom";
+import siteLinks from "../../../links/siteLinks";
 
-    return <>COLOR CONFIG</>
-}
+const ColorStyleConfigure = memo(({name = 'Full Name', data, productData}) => {
 
-export default  ColorStyleConfigure
+        const queryClient = useQueryClient()
+
+        const {data: colorStyleCss, isFetching, isError, error} = useQuery({
+            queryKey: queryKeys.productcolorStyleCss,
+            queryFn: () => {
+                let reqData = {
+                    token: localStorage.getItem('token'), // USER TOKEN
+                    uid: localStorage.getItem('uid'), // USER UID
+                    product_id: productData?.product_id
+                }
+                return getProductColorStyles(reqData)
+            },
+            staleTime: 0
+        })
+
+        const templateResponse = colorStyleCss?.data
+        const currentColorUID = templateResponse?.current_colorstyle_uid
+        const color_styles = templateResponse?.color_styles
+        const custom_template_name = templateResponse?.custom_template_name
+
+        // console.log('data Template', templateResponse)
+        console.log("Page data == ", data)
+
+        const handleActivateTemplate = useMutation({
+            mutationFn: (fields) => {
+                return activateColorStyle(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 = (style_uid) => {
+            const reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id,
+                color_style_uid: style_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 overflow-y-auto" style={{maxHeight: '550px'}}>
+                                <>
+                                    {!color_styles?.length ?
+                                        <p>No data Found</p>
+                                        :
+                                        color_styles.map(color_style => (
+                                            <div key={color_style.color_style_uid} className="col-xl-6 col-sm-6">
+                                                <div className="card card-statistics">
+                                                    <div className="card-body" style={{
+                                                        backgroundColor: `#${color_style.color_code}`,
+                                                        opacity: '0.85',
+                                                        borderRadius: '10px'
+                                                    }}>
+                                                        <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">{color_style.title}</h4>
+                                                            {currentColorUID === color_style.color_style_uid ?
+                                                                <button className="btn btn-light"
+                                                                        disabled={true}>Active</button>
+                                                                :
+                                                                <button
+                                                                    onClick={() => handleSubmit(color_style.color_style_uid)}
+                                                                    className="btn btn-primary">Select</button>
+                                                            }
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ))
+                                    }
+                                    {/* {Object.entries(data)?.map(([key, value]) => (
+                                <div key={key} className="col-xl-6 col-sm-6">
+                                    <div className="card card-statistics">
+                                        <div className="card-body">
+                                            <div className="text-center p-2">
+                                                <div className="mb-2">
+                                                    <img  src={getImage(value.banner)} alt={value.title} />
+                                                </div>
+                                                <h4 className="mb-0">{value.title}</h4>
+                                                <a href="javascript:void(0)" className="btn btn-light">Activate</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))} */}
+                                </>
+
+                                <div className="col-12">
+                                    <>
+                                        {handleActivateTemplate.isPending ?
+                                            <p className={'text-center '}>loading...</p>
+                                            :
+                                            handleActivateTemplate.isError ?
+                                                <p className={'text-center text-danger'}>{handleActivateTemplate.error.message}</p>
+                                                :
+                                                handleActivateTemplate.isSuccess ?
+                                                    <p className={'text-center text-success'}>Templated activated
+                                                        successfully</p>
+                                                    :
+                                                    null
+                                        }
+                                    </>
+                                </div>
+                            </div>
+                    }
+                </div>
+            </div>
+        )
+    }
+)
+export default ColorStyleConfigure

src/component/product/settingsTab/GeneralTab.jsx

@@ -112,9 +112,15 @@ const GeneralTab = memo(({
                         <>
                             {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}/>}
+                                    {(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">

src/component/product/settingsTab/SiteTemplateSelector.jsx

@@ -3,6 +3,8 @@ 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, productData}) => {
 
@@ -60,7 +62,23 @@ const SiteTemplateSelector = memo(({name = 'Full Name', data, productData}) => {
         }
         if (custom_template_name && custom_template_name != '') {
             // This implies we have a custom template , just return here
-            return <>This product is using a custom template named {custom_template_name} </>
+            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">
@@ -80,7 +98,7 @@ const SiteTemplateSelector = memo(({name = 'Full Name', data, productData}) => {
                                 </div>
                             </div>
                             :
-                            <div className="row">
+                            <div className="row overflow-y-auto" style={{maxHeight: '550px'}}>
                                 <>
                                     {!templates?.length ?
                                         <p>No data Found</p>

src/component/reports/Reports.jsx

@@ -8,7 +8,55 @@ export default function Reports(){
         <>
             <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']} />
             <div className="row">
-                <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>
+
+
+                <div>
+
+                    <div>
+
+                        <div className="card card-statistics" style={{minHeight:'550px'}}>
+                            {/*<div className="card-header">*/}
+                            {/*    <div className="card-heading">*/}
+                            {/*        <h4 className="card-title"> Tab vertical </h4>*/}
+                            {/*    </div>*/}
+                            {/*</div>*/}
+                            <div className="card-body">
+                                <div className="tab tab-vertical">
+                                    <ul className="nav nav-tabs" role="tablist">
+                                        <li className="nav-item">
+                                            <a className="nav-link active show" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true"> Home</a>
+                                        </li>
+                                        <li className="nav-item">
+                                            <a className="nav-link" id="profile-09-tab" data-toggle="tab" href="#profile-09" role="tab" aria-controls="profile-09" aria-selected="false"> Profile </a>
+                                        </li>
+                                        <li className="nav-item">
+                                            <a className="nav-link" id="portfolio-09-tab" data-toggle="tab" href="#portfolio-09" role="tab" aria-controls="portfolio-09" aria-selected="false">Portfolio </a>
+                                        </li>
+                                        <li className="nav-item">
+                                            <a className="nav-link" id="contact-09-tab" data-toggle="tab" href="#contact-09" role="tab" aria-controls="contact-09" aria-selected="false"> Contact </a>
+                                        </li>
+                                    </ul>
+                                    <div className="tab-content">
+                                        <div className="tab-pane fade active show" id="home-09" role="tabpanel" aria-labelledby="home-09-tab">
+                                            <p>Positive pleasure-oriented goals are much more powerful motivators than negative fear-based ones. Although each is successful separately, the right combination of both is the most powerful motivational force known to humankind.Make a list of your achievements toward your long-term goal and remind yourself that intentions don’t count, only action’s.</p>
+                                        </div>
+                                        <div className="tab-pane fade" id="profile-09" role="tabpanel" aria-labelledby="profile-09-tab">
+                                            <p>Reflect and experiment until you find the right combination of motivators for your personality and your personal goals. Do it today. Remind yourself of someone you know who died suddenly and the fact that there is no guarantee that tomorrow will come.</p>
+                                        </div>
+                                        <div className="tab-pane fade" id="portfolio-09" role="tabpanel" aria-labelledby="portfolio-09-tab">
+                                            <p>Commitment is something that comes from understanding that everything has its price and then having the willingness to pay that price. This is important because nobody wants to put significant effort into something, only to find out after the fact that the price was too high. We all know people who live this truth.Give yourself the power of responsibility.</p>
+                                        </div>
+                                        <div className="tab-pane fade" id="contact-09" role="tabpanel" aria-labelledby="contact-09-tab">
+                                            <p>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.Give yourself the power of responsibility. Remind yourself the only thing stopping you is yourself.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
             </div>
         </>
     )

src/component/settings/LinksForm.jsx

@@ -0,0 +1,159 @@
+import React, { useRef, useState } from 'react'
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+import { Modal } from "bootstrap";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { updateLinks } from "../../services/services";
+import queryKeys from '../../services/queryKeys';
+
+
+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 LinksForm({data}) {
+    const modalRef = useRef(null)
+
+    const queryClient = useQueryClient()
+    
+    const [intialData] = useState(data)
+
+    const [infoToUpdate, setInfoToUpdate] = useState({})
+
+    const dismissModal = () => {
+        const body = document.querySelector('body')
+        body.removeAttribute('style')
+        // body.classList.toggle('modal-open')
+
+        const modalBackdrop = document.querySelectorAll('.modal-backdrop')
+        modalBackdrop.forEach(item => {
+            if (item) {
+                item.remove();
+            }
+        })
+        
+        const modal = Modal.getInstance(modalRef.current);
+        modal && modal.hide();
+    };
+
+      // UPDATE LINKS MUTATION
+    const updateLinksMutation = useMutation({
+        mutationFn: (fields) => {
+            return updateLinks(fields)
+        },
+        onSuccess: (res) => {
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'En error occured'})
+            }
+        },
+        onSettled: ()=>{
+            setTimeout(() => {
+                dismissModal() //CLOSE MODAL HERE
+                queryClient.refetchQueries({
+                    queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
+                })
+                updateLinksMutation.reset()
+            }, 3000);
+        }
+    })
+    
+
+    const handleSetInfoToUpdate = (values, helpers) => {
+        setInfoToUpdate(values)
+        var modal = new Modal(document.getElementById('modal_links'));
+        modal.show();
+    }
+
+    const proceed = () => {
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            ...infoToUpdate
+        }
+        console.log(reqData)
+        // updateLinksMutation.mutate(reqData)
+    }
+
+  return (
+    <>
+        <Formik
+            initialValues={intialData}
+            validationSchema={linksValidationSchema}
+            onSubmit={handleSetInfoToUpdate}
+        >
+            {(props) => {
+            return (
+                <Form className=''>            
+                    <div className="form-group">
+                        <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" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
+                    </div>
+                    <div className="form-group">
+                        <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" name="twitter_url" value={props.values?.twitter_url} onChange={props.handleChange} />
+                    </div>
+
+                    <div className="form-group">
+                        <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" name="blogger_url" value={props.values?.blogger_url} onChange={props.handleChange} />
+                    </div>
+
+                    <div className="form-group">
+                        <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" name="google_url" value={props.values?.google_url} onChange={props.handleChange} />
+                    </div>
+
+                    <div className="form-group">
+                        <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" name="linked_url" value={props.values?.linked_url} onChange={props.handleChange} />
+                    </div>
+
+                    <div className="form-group">
+                        <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" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
+                    </div>
+                    <div style={{textAlign: "right"}}>
+                        <button type="submit" className="btn btn-primary">Update Links
+                        </button>
+                    </div>
+                </Form>
+            );
+            }}
+        </Formik>
+
+        {/* Vertical Center Modal */}
+        <div ref={modalRef} className="modal fade" id="modal_links" tabIndex="-1" role="dialog" aria-hidden="true">
+            <div className="modal-dialog modal-dialog-centered" role="document">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        {/* <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">
+                        <h5 className="text-center" style={{fontSize: '18px'}}>Are you sure, you want to update? gg</h5>
+                        {(updateLinksMutation.error || updateLinksMutation.isSuccess) && (
+                        <div className="col-12">
+                            <p className={`p-2 text-center ${updateLinksMutation.isSuccess ? 'text-success' : 'text-danger'}`}>
+                                {updateLinksMutation.isSuccess ? 'Updated Successfully' : updateLinksMutation.error.message}
+                            </p>
+                        </div>
+                        )}
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                        <button type="button" className="btn btn-primary" disabled={updateLinksMutation.isSuccess} onClick={proceed}>{updateLinksMutation.isPending ? 'Updating...' : 'Update'}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/* END of Vertical Center Modal */}
+    </>
+  )
+}

src/component/settings/ProfileForm.jsx

@@ -0,0 +1,164 @@
+import React, { useRef, useState } from 'react'
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+import { Modal } from "bootstrap";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { updateProfile } from "../../services/services";
+import queryKeys from '../../services/queryKeys';
+import { useDispatch } from 'react-redux';
+import { updateUserDetails } from '../../store/UserDetails'
+
+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"),
+})
+
+export default function ProfileForm({data}) {
+
+    const dispatch = useDispatch()
+
+    const modalRef = useRef(null)
+
+    const queryClient = useQueryClient()
+    
+    const [intialData] = useState(data)
+
+    const [infoToUpdate, setInfoToUpdate] = useState({})
+
+    const dismissModal = () => {
+        const body = document.querySelector('body')
+        body.removeAttribute('style')
+        // body.classList.toggle('modal-open')
+
+        const modalBackdrop = document.querySelectorAll('.modal-backdrop')
+        modalBackdrop.forEach(item => {
+            if (item) {
+                item.remove();
+            }
+        })
+        
+        const modal = Modal.getInstance(modalRef.current);
+        modal && modal.hide();
+    };
+
+      // UPDATE PROFILE MUTATION
+    const updateProfileMutation = useMutation({
+        mutationFn: (fields) => {
+            return updateProfile(fields)
+        },
+        onSuccess: (res) => {
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'An error occured'})
+            }
+            const account_name = res?.data?.personal_data?.account_name
+            dispatch(updateUserDetails({ account_name }));
+        },
+        onSettled: ()=>{
+            setTimeout(() => {
+                dismissModal() //CLOSE MODAL HERE
+                queryClient.refetchQueries({
+                    queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
+                })
+                updateProfileMutation.reset()
+            }, 3000);
+        }
+    })
+    
+
+    const handleSetInfoToUpdate = (values, helpers) => {
+        delete values.email
+        delete values.country
+        setInfoToUpdate(values)
+        var modal = new Modal(document.getElementById('modal'));
+        modal.show();
+    }
+
+    const proceed = () => {
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            ...infoToUpdate
+        }
+        updateProfileMutation.mutate(reqData)
+    }
+
+  return (
+    <>
+        <Formik
+            initialValues={intialData}
+            validationSchema={profileValidationSchema}
+            onSubmit={handleSetInfoToUpdate}
+        >
+            {(props) => {
+            return (
+                <Form className=''>
+                    <div className="form-row">
+                        <div className="form-group col-md-12">
+                            <label htmlFor="name1">First Name {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">{props.errors.firstname}*</span>}</label>
+                            <input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
+                        </div>
+                        <div className="form-group col-md-12">
+                            <label htmlFor="name1">Last Name {(props.errors.lastname && props.touched.lastname) && <span className="text-danger">{props.errors.lastname}*</span>}</label>
+                            <input type="text" className="form-control" name="lastname" value={props.values?.lastname} onChange={props.handleChange} />
+                        </div>
+                        <div className="form-group col-md-12">
+                            <label htmlFor="name1">Account Name {(props.errors.account_name && props.touched.account_name) && <span className="text-danger">{props.errors.account_name}*</span>}</label>
+                            <input type="text" className="form-control" name="account_name" value={props.values?.account_name} onChange={props.handleChange} />
+                        </div>
+                        <div className="form-group col-md-12">
+                            <label htmlFor="phone1">Phone Number {(props.errors.phone && props.touched.phone) && <span className="text-danger">{props.errors.phone}*</span>}</label>
+                            <input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
+                        </div>
+                        <div className="form-group col-md-12">
+                            <label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">{props.errors.email}*</span>}</label>
+                            <input type="text" className="form-control" name="email" readOnly value={props.values?.email} onChange={props.handleChange} />
+                        </div>
+                    </div>
+                    <div className="form-group">
+                        <label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">{props.errors.full_address}*</span>}</label>
+                        <input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
+                    </div>
+                    <div style={{textAlign: "right"}}>
+                        <button type="submit" className="btn btn-primary">Update Profile
+                        </button>
+                    </div>
+                </Form>
+            );
+            }}
+        </Formik>
+
+        {/* Vertical Center Modal */}
+        <div ref={modalRef} className="modal fade" id="modal" tabIndex="-1" role="dialog" aria-hidden="true">
+            <div className="modal-dialog modal-dialog-centered" role="document">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        {/* <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">
+                        <h5 className="text-center" style={{fontSize: '18px'}}>Are you sure, you want to update?</h5>
+                        {(updateProfileMutation.error || updateProfileMutation.isSuccess) && (
+                        <div className="col-12">
+                            <p className={`p-2 text-center ${updateProfileMutation.isSuccess ? 'text-success' : 'text-danger'}`}>
+                                {updateProfileMutation.isSuccess ? 'Updated Successfully' : updateProfileMutation.error.message}
+                            </p>
+                        </div>
+                        )}
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                        <button type="button" className="btn btn-primary" disabled={updateProfileMutation.isSuccess} onClick={proceed}>{updateProfileMutation.isPending ? 'Updating...' : 'Update'}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/* END of Vertical Center Modal */}
+    </>
+  )
+}

src/component/settings/ProfileImage.jsx

@@ -0,0 +1,117 @@
+import React, { memo, useRef, useState } from 'react'
+// import { useSelector } from 'react-redux';
+import getImage from '../../utils/getImage';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { uploadProfileImg } from '../../services/services';
+import queryKeys from '../../services/queryKeys';
+
+const ProfileImage = memo(({intialData}) => {
+
+    const queryClient = useQueryClient()
+
+    const [selectedImg, setSelectedImg] = useState(null)
+    
+    // const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS FOR ACTIVE USER DETAILS
+    const avtarImage = "avtar/merms-user.png";
+
+      // browser profile img
+    const browserImg = useRef(null);
+    const browseProfileImg = () => {
+        browserImg.current.click();
+    };
+
+    const profileImgChangeHandler = (event) => {
+        setSelectedImg(event.target.files[0])
+    }
+
+    const uploadProfileMutation = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.img){
+                throw new Error('Please, select an image')
+            }
+            return uploadProfileImg(fields)
+        },
+        onSuccess: (res) => {
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'An error occured'})
+            }
+            // const account_name = res?.data?.personal_data?.account_name
+            // dispatch(updateUserDetails({ account_name }));
+        },
+        onSettled: ()=>{
+            setTimeout(() => {
+                queryClient.refetchQueries({
+                    queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
+                })
+                uploadProfileMutation.reset()
+            }, 3000);
+        }
+    })
+
+    const proceedToUpload = () => {
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            img: selectedImg
+        }
+        // console.log('reqData', reqData)
+        uploadProfileMutation.mutate(reqData)
+    }
+
+      return (
+            <div className="col-xl-3 pb-xl-0 pb-5 border-right">
+                <div className="page-account-profil pt-5">
+                    <div className="profile-img text-center rounded-circle">
+                        <div className="pt-5">
+                            <div className="bg-img m-auto">
+                                <img 
+                                    src={selectedImg ? URL.createObjectURL(selectedImg) : intialData?.personal_data?.picture ? intialData?.personal_data?.picture : getImage(avtarImage)}
+                                    // src={getImage(avtarImage)}
+                                    className="img-fluid" alt="user"
+                                />
+                                <input 
+                                    ref={browserImg}
+                                    className='d-none' 
+                                    type='file' 
+                                    accept="image/*"
+                                    onChange={(e) => profileImgChangeHandler(e)}
+                                    id='profile-image'
+                                />
+                            </div>
+                            <div className="profile pt-4">
+                                <h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
+                                <div style={{padding: '10px'}}>
+                                    <hr/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div className="profile-btn text-center">
+                        <div>
+                            <button onClick={browseProfileImg} className="btn btn-light text-primary mb-2">Change
+                            </button>
+                        </div>
+                        {selectedImg &&
+                        <div>
+                            <button onClick={proceedToUpload} disabled={uploadProfileMutation.isSuccess || uploadProfileMutation.isPending} className="btn btn-light text-primary mb-2">
+                                {uploadProfileMutation.isPaused ? 'Upload...' : 'Upload New Avatar'}
+                            </button>
+                        </div>
+                        }
+                        {/* success or error message */}
+                        {(uploadProfileMutation.isSuccess || uploadProfileMutation.isError) &&
+                        <div>
+                            <p className={`${uploadProfileMutation.isSuccess ? 'text-success' : 'text-danger'}`}>
+                                {uploadProfileMutation.isSuccess ? 'Uploaded successfully' : uploadProfileMutation.error.message}
+                            </p>
+                        </div>
+                        }
+                    </div>
+                </div>
+            </div>
+      )
+    }
+)
+
+export default ProfileImage

src/component/settings/Settings.jsx

@@ -1,36 +1,14 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Form, Formik } from "formik";
-import * as Yup from "yup";
+import React, { useMemo, useState } from "react";
 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"),
-})
-
+import ProfileForm from "./ProfileForm";
+import LinksForm from "./LinksForm";
+import ProfileImage from "./ProfileImage";
 
 export default function Settings() {
-    const avtarImage = "avtar/merms-user.png";
 
     const [intialData, setInitialData] = useState({
         external_links: {},
@@ -53,15 +31,6 @@ export default function Settings() {
         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 (
         <>
@@ -90,131 +59,14 @@ export default function Settings() {
                         <div className="card card-statistics">
                             <div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
                                 <div className="row no-gutters">
-                                    <div className="col-xl-3 pb-xl-0 pb-5 border-right">
-                                        <div className="page-account-profil pt-5">
-                                            <div className="profile-img text-center rounded-circle">
-                                                <div className="pt-5">
-                                                    <div className="bg-img m-auto">
-                                                        {/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
-                                                        {/*     alt="users-avatar" />*/}
-                                                        <img src={getImage(avtarImage)}
-                                                            className="img-fluid" alt="user"/>
-                                                    </div>
-                                                    <div className="profile pt-4">
-                                                        <h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
-                                                        <div style={{padding: '10px'}}>
-                                                            <hr/>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            <div className="profile-btn text-center">
-                                                <div>
-                                                    <button className="btn btn-light text-primary mb-2">Upload New Avatar
-                                                    </button>
-                                                </div>
-                                                {/*<div>*/}
-                                                {/*    <button className="btn btn-danger">Delete</button>*/}
-                                                {/*</div>*/}
-                                            </div>
-                                        </div>
-                                    </div>
+                                    <ProfileImage intialData={intialData} />
                                     <div className="col-xl-5 col-md-6 col-12 border-t border-right">
                                         <div className="page-account-form">
                                             <div className="form-titel border-bottom p-3">
                                                 <h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
                                             </div>
                                             <div className="p-4">
-                                                <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 {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">*</span>}</label>
-                                                                    <input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
-                                                                </div>
-                                                                <div className="form-group col-md-12">
-                                                                    <label htmlFor="name1">Last Name {(props.errors.lastname && props.touched.lastname) && <span className="text-danger">*</span>}</label>
-                                                                    <input type="text" className="form-control" name="lastname" value={props.values?.lastname} onChange={props.handleChange} />
-                                                                </div>
-                                                                <div className="form-group col-md-12">
-                                                                    <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" name="account_name" value={props.values?.account_name} onChange={props.handleChange} />
-                                                                </div>
-                                                                {/*<div className="form-group col-md-12">*/}
-                                                                {/*    <label htmlFor="title1">Email</label>*/}
-                                                                {/*    <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 {(props.errors.phone && props.touched.phone) && <span className="text-danger">*</span>}</label>
-                                                                    <input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
-                                                                </div>
-                                                                <div className="form-group col-md-12">
-                                                                    <label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">*</span>}</label>
-                                                                    <input type="text" className="form-control" name="email" value={props.values?.email} onChange={props.handleChange} />
-                                                                </div>
-                                                            </div>
-                                                            <div className="form-group">
-                                                                <label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">*</span>}</label>
-                                                                <input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
-                                                            </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">*/}
-                                                            {/*        <label htmlFor="inputState3">City</label>*/}
-                                                            {/*        <select id="inputState3" className="form-control">*/}
-                                                            {/*            <option>Choose...</option>*/}
-                                                            {/*            <option selected="">London</option>*/}
-                                                            {/*            <option>Montreal</option>*/}
-                                                            {/*            <option>Delhi</option>*/}
-                                                            {/*            <option>Tokyo</option>*/}
-                                                            {/*        </select>*/}
-                                                            {/*    </div>*/}
-                                                            {/*    <div className="form-group col-md-4">*/}
-                                                            {/*        <label htmlFor="inputState4">State</label>*/}
-                                                            {/*        <select id="inputState4" className="form-control">*/}
-                                                            {/*            <option>Choose...</option>*/}
-                                                            {/*            <option selected="">England</option>*/}
-                                                            {/*            <option>California</option>*/}
-                                                            {/*            <option>Texas</option>*/}
-                                                            {/*            <option>Scotland</option>*/}
-                                                            {/*        </select>*/}
-                                                            {/*    </div>*/}
-                                                            {/*    <div className="form-group col-md-4">*/}
-                                                            {/*        <label htmlFor="inputZip">Zip</label>*/}
-                                                            {/*        <input type="text" className="form-control" id="inputZip"*/}
-                                                            {/*               value="EC1A 1BB" />*/}
-                                                            {/*    </div>*/}
-                                                            {/*</div>*/}
-                                                            {/*<div className="form-group">*/}
-                                                            {/*    <div className="form-check">*/}
-                                                            {/*        <input className="form-check-input" type="checkbox"*/}
-                                                            {/*               id="gridCheck" />*/}
-                                                            {/*            <label className="form-check-label" htmlFor="gridCheck">*/}
-                                                            {/*                I agree to receive email notification.*/}
-                                                            {/*            </label>*/}
-                                                            {/*    </div>*/}
-                                                            {/*</div>*/}
-                                                            <div style={{textAlign: "right"}}>
-                                                                <button type="submit" className="btn btn-primary">Update Profile
-                                                                </button>
-                                                            </div>
-                                                        </Form>
-                                                    );
-                                                    }}
-                                                </Formik>
+                                                <ProfileForm data={intialData.personal_data} />
                                             </div>
                                         </div>
                                     </div>
@@ -224,50 +76,7 @@ export default function Settings() {
                                                 <h5 className="mb-0 py-2">Your External Link</h5>
                                             </div>
                                             <div className="p-4">
-                                                <Formik
-                                                    initialValues={intialData?.external_links}
-                                                    validationSchema={linksValidationSchema}
-                                                    onSubmit={updateLinks}
-                                                >
-                                                    {(props) => {
-                                                    return (
-                                                        <Form className=''>            
-                                                            <div className="form-group">
-                                                                <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" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
-                                                            </div>
-                                                            <div className="form-group">
-                                                                <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" name="twitter_url" value={props.values?.twitter_url} onChange={props.handleChange} />
-                                                            </div>
-
-                                                            <div className="form-group">
-                                                                <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" name="blogger_url" value={props.values?.blogger_url} onChange={props.handleChange} />
-                                                            </div>
-
-                                                            <div className="form-group">
-                                                                <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" name="google_url" value={props.values?.google_url} onChange={props.handleChange} />
-                                                            </div>
-
-                                                            <div className="form-group">
-                                                                <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" name="linked_url" value={props.values?.linked_url} onChange={props.handleChange} />
-                                                            </div>
-
-                                                            <div className="form-group">
-                                                                <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" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
-                                                            </div>
-                                                            <div style={{textAlign: "right"}}>
-                                                                <button type="submit" className="btn btn-primary">Update Links
-                                                                </button>
-                                                            </div>
-                                                        </Form>
-                                                    );
-                                                    }}
-                                                </Formik>
+                                                <LinksForm data={intialData.external_links} />
                                             </div>
                                         </div>
                                     </div>

src/css/partials/_helpers.scss

@@ -2063,6 +2063,8 @@ ul.activity {
 .img-icon{
     width:60px;
     height:60px;
+    min-width:60px;
+    min-height:60px;
     border-radius:100px;
     text-align: center;
     line-height: 60px;

src/services/services.js

@@ -23,11 +23,20 @@ axios.interceptors.request.use(
 
 const postAuxEnd = (path, postData, media=false) => {
     const basePath = media ? process.env.REACT_APP_MAIN_API : process.env.REACT_APP_MAIN_API
-    return axios.post(`${basePath}${path}`, postData).then(res => {
+    let newPostData = {}
+    if(!media){
+        newPostData = {...postData}
+    }else{
+        newPostData = new FormData();
+        for (let data in postData) {
+        newPostData.append(data, postData[data]);
+        }
+    }
+    return axios.post(`${basePath}${path}`, newPostData).then(res => {
         return res
     }).catch(err => {
-        // console.log('res', err.response.data)
-        throw new Error(err.response.data.error_message);
+        // throw new Error(err.response.data.error_message);
+        throw new Error(err);
     })
 }
 
@@ -84,6 +93,22 @@ export const profileDetails = (reqData) => {
     return postAuxEnd(`/panel/account/profile`, postData, false)
 }
 
+// FUNCTION TO UPDATE PROFILE
+export const updateProfile = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/profile-update`, postData, false)
+}
+
+// FUNCTION TO UPDATE LINKS
+export const updateLinks = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return null //postAuxEnd(`/panel/account/links-update`, postData, false)
+}
+
 // FUNCTION TO GET PRODUCT BY ID
 export const MyProductData = (reqData) => {
     let postData = {
@@ -214,6 +239,12 @@ export const getProductTemplateData = (reqData) => {
     return postAuxEnd(`/panel/account/products/templates`, postData, false)
 }
 
+export const getProductColorStyles = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/color-styles`, postData, false)
+}
 // FUNCTION TO ACTIVATE TEMPLATE
 export const activateTemplate = (reqData) => {
     let postData = {
@@ -222,6 +253,14 @@ export const activateTemplate = (reqData) => {
     return postAuxEnd(`/panel/account/template/activate`, postData, false)
 }
 
+export const activateColorStyle = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/colorstyle/activate`, postData, false)
+}
+
+
 // FUNCTION TO GET PRODUCT SUBSCRIPTIONS
 export const completeProfile = (reqData) => {
     let postData = {
@@ -254,6 +293,15 @@ export const setExternalURL = (reqData) => {
     return postAuxEnd('/panel/myproduct/external-url', postData, false)
 }
 
+// FUNCTION TO UPLOAD PROFILE IMAGE
+export const uploadProfileImg = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    throw new Error('Opps')
+    // return postAuxEnd(`/panel/account/profile-update`, postData, true)
+}
+