profile image upload 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/App.css

@@ -51,4 +51,11 @@ button{
 
 .accordion-button, .accordion-button:not(.collapsed) {
   background-color: transparent!important;
+}
+
+@media (min-width: 992px) {
+  .modal-50 {
+    min-width: 50%;
+    max-width: 50%;
+  }
 }

src/AppRouters.jsx

@@ -26,6 +26,7 @@ import ProfileCompletePage from './views/ProfileCompletePage';
 import SubscribePage from './views/Subscribe'
 import StartPage from "./views/StartPage";
 import TrafficPage from "./views/TrafficPage";
+import MyMediaPage from './views/MyMediaPage.jsx';
 
 function AppRouters() {
     return (
@@ -52,6 +53,7 @@ function AppRouters() {
                             <Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
                             <Route path={siteLinks.product} element={<ProductPage/>}/>
                             <Route path={siteLinks.reports} element={<ReportsPage/>}/>
+                            <Route path={siteLinks.my_media} element={<MyMediaPage />}/>
                             <Route path={siteLinks.comments} element={<CommentsPage/>}/>
                             <Route path={siteLinks.contacts} element={<ContactsPage/>}/>
                             <Route path={siteLinks.user} element={<UserPage/>}/>

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

@@ -41,22 +41,27 @@ export default function Products() {
                 </div>
                 :
                 <div className="row m-b-20">
-                    {products && products.map((product, index) => (
-                        <div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
-                            <Link to={productPath(product?.product_id)}  >
-                                <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
-                                    <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
-                                        <i className={`fa ${product?.product_icon} text-primary`}></i>
+                    {products && products.map((product, index) =>
+                    {
+                        // let productName = product?.name?.length > 14 ? product?.name?.substring(0, 14) + '...' : product?.name
+                        return (
+                            <div key={product.uid+index} className={`col-12 col-lg-6 mb-2 mb-xxl-0`}>
+                                <Link to={productPath(product?.product_id)}  >
+                                    <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
+                                        <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
+                                            <i className={`fa ${product?.product_icon} text-primary`}></i>
+                                        </div>
+                                        <div className="report-details overflow-hidden">
+                                            <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
+                                            <h4><span className='w-100 d-inline-block text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
+                                        </div>
                                     </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>
-                                    </div>
-                                </div>
-                            </Link>
-
-                        </div>
-                    ))}
+                                </Link>
+    
+                            </div>
+                        )
+                    } 
+                    )}
                 </div>
             }
                 <div className="apexchart-wrapper">

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

@@ -11,7 +11,7 @@ export default function UserFooter(){
                     <p>&copy; Copyright {year}. All rights reserved.</p>
                 </div>
                 <div className="col  col-sm-6 ml-sm-auto text-center text-sm-right">
-                    <p>A division of <i className="fa fa-key text-danger mx-1"></i> autoMedSys A.I.</p>
+                    <p>A division of autoMedSys A.I.</p>
                 </div>
             </div>
         </footer>

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/layout/layoutcom/UserMenu.jsx

@@ -48,6 +48,7 @@ export default function UserMenu() {
                             </div>
                         </Link>
                         <ul id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-bs-parent="#sidebarNav">
+                            <li className={`${pathname == siteLinks.my_media ? 'active' : ''}`}><Link to={siteLinks.my_media}>Files and Media</Link></li>
                             <li className={`${pathname == siteLinks.subscription ? 'active' : ''}`}><Link to={siteLinks.subscription}>Subscription</Link></li>
                             <li className={`${pathname == siteLinks.settings ? 'active' : ''}`}><Link to={siteLinks.settings}>Settings</Link></li>
                         </ul>

src/component/mymedia/MyMedia.js

@@ -0,0 +1,242 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import {useState, useRef} from "react";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
+import queryKeys from "../../services/queryKeys";
+import {getMediaFileList, uploadFile} from "../../services/services";
+import getImage from "../../utils/getImage";
+
+
+export default function MyMedia() {
+
+    const queryClient = useQueryClient()
+
+    const basePath = process.env.REACT_APP_MAIN_API
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [message, setMessage] = useState('');
+    const [imageLink, setImageLink] = useState('')
+console.log('imageLink', imageLink)
+    // Function to handle file selection
+    const handleFileChange = (event) => {
+        setSelectedFile(event.target.files[0]);
+        setMessage('');
+    };
+
+    // Function to handle the upload to the API
+    const _handleUpload = async () => {
+        if (!selectedFile) {
+            setMessage('Please select a file first!');
+            return;
+        }
+
+        const formData = new FormData();
+        // 'file' is the field name that your API endpoint expects
+        formData.append('file', selectedFile);
+        formData.append("member_uid", localStorage.getItem('uid'));
+        formData.append("token", localStorage.getItem('token'));
+
+        try {
+            // Replace with your actual API endpoint URL
+            const apiEndpoint = basePath + '/upload/webfiles';
+            const response = await fetch(apiEndpoint, {
+                method: 'POST',
+                // The browser automatically sets the 'Content-Type' header to
+                // 'multipart/form-data' when you provide a FormData object as the body,
+                // which is required for file uploads.
+                body: formData,
+            });
+
+            if (response.ok) {
+                const result = await response.json();
+                setMessage('File uploaded successfully!');
+                console.log('Success:', result);
+            } else {
+                setMessage('Upload failed.');
+                console.error('Upload failed:', response.statusText);
+            }
+        } catch (error) {
+            setMessage('An error occurred during the upload.');
+            console.error('Error:', error);
+        }
+    }
+
+    const uploadFileMutation = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.file){
+                throw({message: 'Please select a file first!'})
+            }
+            return uploadFile(fields)
+        },
+        onSuccess: (res) => {
+            // console.log('res', res.data)
+            // if(res.data.resultCode != '0' || !res?.data?.pending_uid){
+            //     throw({message: res?.data?.resultDescription})
+            // }
+            setSelectedFile(null)
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.my_files],
+                // type: 'active',
+                // exact: true,
+            })
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                uploadFileMutation.reset()
+            }, 3000)
+        }
+    })
+
+    const handleUpload = () => {
+        let reqData = {
+            token: localStorage.getItem("token"), // USER TOKEN
+            member_uid: localStorage.getItem("uid"), // USER UID
+            file: selectedFile
+        };
+        // console.log(reqData)
+        uploadFileMutation.mutate(reqData)
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.my_files,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getMediaFileList(reqData)
+        }
+    })
+
+    const mediaFileList = data?.data
+
+    //debugger;
+
+    return (
+        <>
+            <BreadcrumbComBS title='Files' paths={['Dashboard', 'Files']}/>
+
+            <div className="row">
+                <div className="col-xl-6 col-xxl-4 m-b-30">
+                    <div className="card card-statistics mb-0 widget-support-list">
+                        <div className="card-header">
+                            <div className="card-heading">
+                                <h4 className="card-title">Upload File</h4>
+                            </div>
+                        </div>
+                        <div className="card-body pl-0 pr-0 scrollbar scroll_dark">
+                            <div className="widget-text">
+
+                                <div>
+                                    <input className="form-control form-control-sm" type="file"
+                                           onChange={handleFileChange}/>
+
+                                    {selectedFile && (
+                                        <div>
+                                            <h4>Selected File Details:</h4>
+                                            <ul>
+                                                <li>Name: {selectedFile.name}</li>
+                                                <li>Type: {selectedFile.type}</li>
+                                                <li>Size: {selectedFile.size} bytes</li>
+                                            </ul>
+                                            <div style={{width: '100%', textAlign: 'right'}}>
+                                                <button
+                                                    className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0"
+                                                    onClick={handleUpload} disabled={!selectedFile || uploadFileMutation.isPending || uploadFileMutation.isSuccess}>
+                                                    Upload
+                                                </button>
+                                            </div>
+
+                                            <>
+                                                {/* {message && <p>{message}</p>} */}
+                                                <p>{uploadFileMutation.isPending ? 'uploading...' : uploadFileMutation.isError ? uploadFileMutation?.error?.message : uploadFileMutation.isSuccess ? 'File Uploaded' : ''}</p>
+                                            </>
+                                        </div>
+
+                                    )}
+                                </div>
+
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+                <div className="col-xl-6 col-xxl-4 m-b-30">
+                    <div className="card card-statistics h-100 mb-0 widget-downloads-list" style={{}}>
+                        <div className="card-header d-flex justify-content-between">
+                            <div className="card-heading">
+                                <div className="card-heading">
+                                    <h4 className="card-title">Files List</h4>
+                                </div>
+                            </div>
+                        </div>
+                        {isFetching ? 
+                            <>
+                                <div className="col-12">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </>
+                            : isError ?
+                            <div className="col-12">
+                                <p className='text-danger'>{error?.message}</p>
+                            </div>
+                            :
+                            <div className="card-body scrollbar scroll_dark" style={{minHeight: '400px', maxHeight: '500px', overflowY: 'auto'}}>
+                                {mediaFileList && mediaFileList?.file_list && mediaFileList?.file_list.map((item, index) => {
+                                    const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
+                                    const avtarImage =
+                                        item?.file_type === undefined
+                                            ? "icons/01.png"
+                                            : "icons/" + item.file_type + ".png";
+                                    return (<div key={index} className={`widget-text ${imageLink == file_url && 'bg-light'}`}>
+                                        <div className={`media align-items-center`} onClick={()=>setImageLink(file_url)} style={{cursor: 'pointer'}}>
+                                            <img src={getImage(avtarImage)}
+                                                // src={`assets/img/file-icon/${item.file_type}.png`}
+                                                className="img-fluid"
+                                                alt={`${item.file_type}`}/>
+                                            <div className="media-body">
+                                                <h4 className="mb-0 ml-3">{item.filename}</h4>
+                                            </div>
+                                          
+                                            <div>
+                                                <a href={`${file_url}`} target='_blank'
+                                                className="btn btn-icon btn-round btn-outline-success">
+                                                    <i className="ti ti-download"></i>
+                                                </a>
+                                                <a href="" className="btn btn-icon btn-round btn-outline-danger ml-2">
+                                                    <i className="ti ti-close"></i>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>)
+                                })
+                                }
+                            </div>
+                        }
+                    </div>
+                </div>
+                <div className="col-xl-6 col-xxl-4 m-b-30">
+                    <div className="card card-statistics h-100 mb-0 widget-branches-list">
+                        <div className="card-header">
+                            <div className="card-heading">
+                                <h4 className="card-title">Preview</h4>
+                            </div>
+                        </div>
+                        <div className="card-body d-flex justify-content-center align-items-center pl-0 pr-0 scrollbar scroll_dark">
+                            {imageLink &&
+                                <img className="w-100 h-auto" src={imageLink} alt='file-image' />
+                            }
+                        </div>
+                        <div className="card-header d-flex justify-content-between align-items-center">
+                            {imageLink &&
+                            <>
+                                <p>0 x 0 px</p>
+                                <p>size: 0 bytes</p>
+                            </>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

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: '600px', maxHeight: '600px'}}>
                                     <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/Settings.jsx

@@ -5,6 +5,7 @@ import queryKeys from '../../../services/queryKeys';
 import { useSelector } from 'react-redux';
 import { useQuery } from '@tanstack/react-query';
 import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
+import TemplateConfigure from './TemplateConfigure';
 
 const Settings = memo(({productData}) => {
 
@@ -24,7 +25,7 @@ const Settings = memo(({productData}) => {
     })
     const settingsConfig = configData?.data?.settings_items
     // console.log('CONFIG DATA...', settingsConfig)
-
+    // console.log('configData', configData?.data?.subscription_template)
 
     const [fieldsChanged, setFieldsChanged] = useState(false)
 
@@ -81,12 +82,12 @@ const Settings = memo(({productData}) => {
                 </div>
             </div>
             :
-            <div className="tab tab-vertical">
-                <ul className="nav nav-tabs" role="tablist">
+            <div className="d-flex">
+                <ul className="bg-body-secondary flex-column nav" role="tablist" style={{width: '25%', minHeight: '670px', maxHeight: '670px'}}>
                     <>
                         {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <li key={key} className="nav-item">
-                            <a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
+                            <p className={`text-black nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show bg-primary text-white'}`}
                                 id={key} 
                                 // data-bs-toggle="pill"
                                 // data-bs-target={`#${value.controls}`}
@@ -97,12 +98,27 @@ const Settings = memo(({productData}) => {
                                 onClick={()=>handleChangeTab(value.controls)}
                             >
                                 {value.title}
-                            </a>
+                            </p>
                             </li>
                         ))}
+                        {configData?.data?.subscription_template &&
+                            <li className="mt-auto nav-item">
+                                <p className={`text-black nav-link ${(activeTab == 'config_temp') && 'active show bg-primary text-white'}`}
+                                    // data-bs-toggle="pill"
+                                    // data-bs-target={`#${value.controls}`}
+                                    type="button" 
+                                    // role="tab"
+                                    // aria-controls={value.controls}
+                                    // aria-selected="true"
+                                    onClick={()=>handleChangeTab('config_temp')}
+                                >
+                                    Configure Template
+                                </p>
+                            </li>
+                        }
                     </>
                 </ul>
-                <div className="tab-content">
+                <div className="p-3 tab-content" style={{width: '75%'}}>
                     <>
                         {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
@@ -112,6 +128,10 @@ const Settings = memo(({productData}) => {
                                 <GeneralTab tabKey={key} name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
                             </div>
                         ))}
+                        <div className={`tab-pane fade  ${(activeTab == 'config_temp') && 'active show'}`}
+                        >
+                            <TemplateConfigure productData={productData} />
+                        </div>
                     </>
                 </div>
             </div>

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/product/settingsTab/TemplateConfigure.jsx

@@ -0,0 +1,130 @@
+import React, {memo, useState} from 'react'
+import getImage from "../../../utils/getImage";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import {getTemplateConfig} from '../../../services/services';
+import {Link} from "react-router-dom";
+import siteLinks from "../../../links/siteLinks";
+import UploadModal from './UploadModal';
+
+const TemplateConfigure = ({productData}) => {
+
+    const [selectedSectionDetails, setSelectedSectionDetails] = useState({})
+
+    // /panel/myproduct/template-config
+
+    const queryClient = useQueryClient()
+
+    const {data: templateData, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.myTemplateConfig,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+            return getTemplateConfig(reqData)
+        },
+        staleTime: 0
+    })
+
+    const templateResponse = templateData?.data
+    const templateImages = templateResponse?.template_images?.data;
+    // debugger;
+    console.log("templateResponse", templateResponse);
+    // const currentColorUID = templateResponse?.current_colorstyle_uid
+    // const color_styles = templateResponse?.color_styles
+    // const custom_template_name = templateResponse?.custom_template_name
+
+    return <>
+        <div className="card card-statistics">
+            {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="card-header">
+                            <div className="card-heading">
+                                <h4 className="card-title"
+                                    style={{textTransform: 'none'}}>{templateResponse?.template_name}</h4>
+                            </div>
+                        </div>
+
+
+                        <div>
+                            <div className="col-12">
+                                <div>
+                                    <div>
+                                        <div>
+                                            <h4>Image List</h4>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <ul className="list-unstyled">
+                                            {templateImages && templateImages.map(
+                                                (item) => {
+                                                    const currImage = item?.default_val;
+                                                    return (
+                                                        <li className="media">
+                                                            <div style={{
+                                                                display: 'flex',
+                                                                flexDirection: 'row',
+                                                                padding: '5px',
+                                                                backgroundColor: 'aliceblue',
+                                                                margin: '2px',
+                                                                maxHeight: '150px'
+                                                            }}>
+                                                                <div className='d-flex justify-content-center align-items-center' style={{padding: '6px', width: '120px', height: '100px'}}>
+                                                                    <img className="mb-xxs-0 img-fluid"
+                                                                    style={{height: 'auto', maxHeight: '100px'}}
+                                                                         src={currImage} alt="image"/>
+                                                                </div>
+
+                                                                <div className="media-body" style={{padding: '2px'}}>
+                                                                    <div style={{
+                                                                        display: 'flex',
+                                                                        flexDirection: 'column'
+                                                                    }}>
+                                                                        <div style={{textAlign: 'right',width: '100%'}}></div>
+                                                                        {/* [Change Image] */}
+                                                                        <label onClick={()=>setSelectedSectionDetails(item)} className='w-100 text-end' data-bs-toggle="modal" data-bs-target="#verticalCenter" style={{cursor: 'pointer'}}>[Change Image]</label>
+                                                                        {/* <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/> */}
+                                                                        <div>
+                                                                            <h5 className="mt-0 mb-1">{item?.name}</h5>
+                                                                            {item?.description}
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+
+                                                        </li>
+                                                    )
+                                                }
+                                            )
+                                            }
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </>
+
+
+            } </div>
+            <UploadModal productId={productData?.product_id} selectedSectionDetails={selectedSectionDetails} />
+    </>
+}
+
+export default TemplateConfigure

src/component/product/settingsTab/UploadModal.jsx

@@ -0,0 +1,168 @@
+import React, { useRef, useState } from 'react'
+import { Modal } from "bootstrap";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import {getMediaFileList, templateMediaSet} from '../../../services/services';
+
+export default function UploadModal({productId, selectedSectionDetails}) {
+
+    const queryClient = useQueryClient()
+    
+    const [selectedFile, setSelectedFile] = useState('')
+
+    const handleSelectedFile = (file_uid) => {
+        // if(selectedFile.length && selectedFile.includes(file_uid)){
+        //     let indexOfItem = selectedFile.indexOf(file_uid)
+        //     let oldFiles = [...selectedFile]
+        //     oldFiles.splice(indexOfItem, 1)
+        //     setSelectedFile(oldFiles)
+        // }else{
+        //     setSelectedFile(prev => [...prev, file_uid])
+        // }
+        setSelectedFile(file_uid)
+    }
+
+    const modalRef = useRef(null)
+
+    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();
+    };
+
+    const changeTemplateMediaSet = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.file_uid){
+                throw({message: 'Please select a file first!'})
+            }
+            return templateMediaSet(fields)
+            },
+        onSuccess: (res) => {
+            // console.log('res', res.data)
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription})
+            }
+            setSelectedFile('')
+            dismissModal() // to close modal
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.myTemplateConfig],
+                // type: 'active',
+                // exact: true,
+            })
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                changeTemplateMediaSet.reset()
+            }, 3000)
+        }
+    })
+
+    const handleUpload = () => {
+        let reqData = {
+            token: localStorage.getItem("token"), // USER TOKEN
+            uid: localStorage.getItem("uid"), // USER UID
+            product_id: productId,
+            file_uid: selectedFile,
+            image_id: selectedSectionDetails?.id
+        };
+        // console.log('reqData', reqData)
+        changeTemplateMediaSet.mutate(reqData)
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.my_files,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getMediaFileList(reqData)
+        }
+    })
+
+    const mediaFileList = data?.data
+    // console.log('mediaFileList', mediaFileList) //file_list
+
+  return (
+    <>
+        {/* Vertical Center Modal */}
+        <div ref={modalRef} className="modal fade" id="verticalCenter" tabIndex="-1" role="dialog" aria-hidden="false">
+            <div className="modal-50 modal-dialog modal-dialog-centered modal-50" role="document">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h5 className="modal-title" style={{fontSize: '18px'}} id="verticalCenterTitle">Select New Picture</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">
+                        {isFetching ? 
+                            <>
+                                <div className="col-12">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </>
+                            : isError ?
+                            <div className="col-12">
+                                <p className='text-danger'>{error?.message}</p>
+                            </div>
+                            :
+                            <div className='row g-5 justify-content-center'>
+                                {mediaFileList?.file_list?.length ?
+                                <>
+                                {mediaFileList?.file_list?.map(item => {
+                                    const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
+                                    return(
+                                        <div onClick={()=>handleSelectedFile(item?.file_uid)} className={`p-3 text-center col-4`} style={{cursor: 'pointer'}}>
+                                            <div className={`p-3 ${(selectedFile == item?.file_uid) && 'bg-light'}`} style={{Height: '250px'}}>
+                                                <img key={item?.file_uid} className="img-fluid" style={{}} src={file_url} alt='file-image' />
+                                            </div>
+                                        </div>
+                                    )
+                                    }) 
+                                }
+                                </>
+                                :
+                                <p>No File(s) found!</p>
+                                }
+                            </div>
+                        }
+                        {changeTemplateMediaSet.error &&
+                        <>
+                            <div className="col-12">
+                            <p className='text-danger'>{changeTemplateMediaSet.error.message}</p>
+                        </div>
+                        </>
+                        }
+                        {changeTemplateMediaSet.isSuccess &&
+                        <>
+                            <div className="col-12">
+                                <p className='text-success'>{'subscription is successful'}</p>
+                            </div>
+                        </>
+                        }
+
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                        {selectedFile &&
+                            <button type="button" className="btn btn-primary" disabled={changeTemplateMediaSet?.isPending || changeTemplateMediaSet?.isSuccess} onClick={handleUpload}>{changeTemplateMediaSet?.isPending ? 'Applying...' : changeTemplateMediaSet?.isSuccess ? 'Applied' : 'Apply'}</button>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/* END of Vertical Center Modal */}
+    </>
+  )
+}

src/component/reports/PaymentReportTable.jsx

@@ -0,0 +1,202 @@
+import React, { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getPaymentReports } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
+
+export default function PaymentReportTable() {
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.payment_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getPaymentReports(reqData)
+        }
+    })
+
+    console.log('DATA', data?.data)
+    return (
+    <>
+        <div className="row">
+            <div className="col-md-12 m-b-30">
+                <div className="d-block d-sm-flex flex-nowrap align-items-center">
+                    <div className="page-title mb-2 mb-sm-0">
+                        <h4>Payments Report</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className="row">
+            {isFetching ? 
+            <>
+                <div className="col-12">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </>
+            : isError ?
+            <div className="col-12">
+                <p className='text-danger'>{error?.message}</p>
+            </div>
+            :
+            <div className="col-lg-12">
+                <div className="card card-statistics">
+                    <div className="card-body">
+                        <div className="export-table-wrapper table-responsive">
+                            <table id="export-table" className="table table-bordered">
+                                <thead className="thead-light">
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Position</th>
+                                    <th>Office</th>
+                                    <th>Age</th>
+                                    <th>Start date</th>
+                                    <th>Salary</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>Tiger Nixon</td>
+                                    <td>System Architect</td>
+                                    <td>Edinburgh</td>
+                                    <td>61</td>
+                                    <td>2011/04/25</td>
+                                    <td>$320,800</td>
+                                </tr>
+                                <tr>
+                                    <td>Garrett Winters</td>
+                                    <td>Accountant</td>
+                                    <td>Tokyo</td>
+                                    <td>63</td>
+                                    <td>2011/07/25</td>
+                                    <td>$170,750</td>
+                                </tr>
+                                <tr>
+                                    <td>Ashton Cox</td>
+                                    <td>Junior Technical Author</td>
+                                    <td>San Francisco</td>
+                                    <td>66</td>
+                                    <td>2009/01/12</td>
+                                    <td>$86,000</td>
+                                </tr>
+                                <tr>
+                                    <td>Cedric Kelly</td>
+                                    <td>Senior Javascript Developer</td>
+                                    <td>Edinburgh</td>
+                                    <td>22</td>
+                                    <td>2012/03/29</td>
+                                    <td>$433,060</td>
+                                </tr>
+                                <tr>
+                                    <td>Airi Satou</td>
+                                    <td>Accountant</td>
+                                    <td>Tokyo</td>
+                                    <td>33</td>
+                                    <td>2008/11/28</td>
+                                    <td>$162,700</td>
+                                </tr>
+                                <tr>
+                                    <td>Brielle Williamson</td>
+                                    <td>Integration Specialist</td>
+                                    <td>New York</td>
+                                    <td>61</td>
+                                    <td>2012/12/02</td>
+                                    <td>$372,000</td>
+                                </tr>
+                                <tr>
+                                    <td>Herrod Chandler</td>
+                                    <td>Sales Assistant</td>
+                                    <td>San Francisco</td>
+                                    <td>59</td>
+                                    <td>2012/08/06</td>
+                                    <td>$137,500</td>
+                                </tr>
+                                <tr>
+                                    <td>Rhona Davidson</td>
+                                    <td>Integration Specialist</td>
+                                    <td>Tokyo</td>
+                                    <td>55</td>
+                                    <td>2010/10/14</td>
+                                    <td>$327,900</td>
+                                </tr>
+                                <tr>
+                                    <td>Colleen Hurst</td>
+                                    <td>Javascript Developer</td>
+                                    <td>San Francisco</td>
+                                    <td>39</td>
+                                    <td>2009/09/15</td>
+                                    <td>$205,500</td>
+                                </tr>
+                                <tr>
+                                    <td>Sonya Frost</td>
+                                    <td>Software Engineer</td>
+                                    <td>Edinburgh</td>
+                                    <td>23</td>
+                                    <td>2008/12/13</td>
+                                    <td>$103,600</td>
+                                </tr>
+                                <tr>
+                                    <td>Jena Gaines</td>
+                                    <td>Office Manager</td>
+                                    <td>London</td>
+                                    <td>30</td>
+                                    <td>2008/12/19</td>
+                                    <td>$90,560</td>
+                                </tr>
+                                <tr>
+                                    <td>Quinn Flynn</td>
+                                    <td>Support Lead</td>
+                                    <td>Edinburgh</td>
+                                    <td>22</td>
+                                    <td>2013/03/03</td>
+                                    <td>$342,000</td>
+                                </tr>
+                                <tr>
+                                    <td>Charde Marshall</td>
+                                    <td>Regional Director</td>
+                                    <td>San Francisco</td>
+                                    <td>36</td>
+                                    <td>2008/10/16</td>
+                                    <td>$470,600</td>
+                                </tr>
+                                <tr>
+                                    <td>Haley Kennedy</td>
+                                    <td>Senior Marketing Designer</td>
+                                    <td>London</td>
+                                    <td>43</td>
+                                    <td>2012/12/18</td>
+                                    <td>$313,500</td>
+                                </tr>
+                                <tr>
+                                    <td>Tatyana Fitzpatrick</td>
+                                    <td>Regional Director</td>
+                                    <td>London</td>
+                                    <td>19</td>
+                                    <td>2010/03/17</td>
+                                    <td>$385,750</td>
+                                </tr>
+                                <tr>
+                                    <td>Michael Silva</td>
+                                    <td>Marketing Designer</td>
+                                    <td>London</td>
+                                    <td>66</td>
+                                    <td>2012/11/27</td>
+                                    <td>$198,500</td>
+                                </tr>
+
+                                </tbody>
+
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            }
+        </div>
+    </>
+    )
+}

src/component/reports/ProductReportTable.jsx

@@ -0,0 +1,205 @@
+import React, { useState }  from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getProductReports } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
+
+export default function ProductReportTable() {
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.product_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getProductReports(reqData)
+        }
+    })
+
+    console.log('DATA', data?.data)
+
+    return (
+    <>
+
+        <div className="row">
+            <div className="col-md-12 m-b-30">
+                <div className="d-block d-sm-flex flex-nowrap align-items-center">
+                    <div className="page-title mb-2 mb-sm-0">
+                        <h4>Products Report</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="row">
+            {isFetching ? 
+                <>
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </>
+                : isError ?
+                <div className="col-12">
+                    <p className='text-danger'>{error?.message}</p>
+                </div>
+                :
+                <div className="col-lg-12">
+                    <div className="card card-statistics">
+                        <div className="card-body">
+                            <div className="export-table-wrapper table-responsive">
+                                <table id="export-table" className="table table-bordered">
+                                    <thead className="thead-light">
+                                    <tr>
+                                        <th>Name</th>
+                                        <th>Position</th>
+                                        <th>Office</th>
+                                        <th>Age</th>
+                                        <th>Start date</th>
+                                        <th>Salary</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    <tr>
+                                        <td>Tiger Nixon</td>
+                                        <td>System Architect</td>
+                                        <td>Edinburgh</td>
+                                        <td>61</td>
+                                        <td>2011/04/25</td>
+                                        <td>$320,800</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Garrett Winters</td>
+                                        <td>Accountant</td>
+                                        <td>Tokyo</td>
+                                        <td>63</td>
+                                        <td>2011/07/25</td>
+                                        <td>$170,750</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Ashton Cox</td>
+                                        <td>Junior Technical Author</td>
+                                        <td>San Francisco</td>
+                                        <td>66</td>
+                                        <td>2009/01/12</td>
+                                        <td>$86,000</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Cedric Kelly</td>
+                                        <td>Senior Javascript Developer</td>
+                                        <td>Edinburgh</td>
+                                        <td>22</td>
+                                        <td>2012/03/29</td>
+                                        <td>$433,060</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Airi Satou</td>
+                                        <td>Accountant</td>
+                                        <td>Tokyo</td>
+                                        <td>33</td>
+                                        <td>2008/11/28</td>
+                                        <td>$162,700</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Brielle Williamson</td>
+                                        <td>Integration Specialist</td>
+                                        <td>New York</td>
+                                        <td>61</td>
+                                        <td>2012/12/02</td>
+                                        <td>$372,000</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Herrod Chandler</td>
+                                        <td>Sales Assistant</td>
+                                        <td>San Francisco</td>
+                                        <td>59</td>
+                                        <td>2012/08/06</td>
+                                        <td>$137,500</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Rhona Davidson</td>
+                                        <td>Integration Specialist</td>
+                                        <td>Tokyo</td>
+                                        <td>55</td>
+                                        <td>2010/10/14</td>
+                                        <td>$327,900</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Colleen Hurst</td>
+                                        <td>Javascript Developer</td>
+                                        <td>San Francisco</td>
+                                        <td>39</td>
+                                        <td>2009/09/15</td>
+                                        <td>$205,500</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Sonya Frost</td>
+                                        <td>Software Engineer</td>
+                                        <td>Edinburgh</td>
+                                        <td>23</td>
+                                        <td>2008/12/13</td>
+                                        <td>$103,600</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Jena Gaines</td>
+                                        <td>Office Manager</td>
+                                        <td>London</td>
+                                        <td>30</td>
+                                        <td>2008/12/19</td>
+                                        <td>$90,560</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Quinn Flynn</td>
+                                        <td>Support Lead</td>
+                                        <td>Edinburgh</td>
+                                        <td>22</td>
+                                        <td>2013/03/03</td>
+                                        <td>$342,000</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Charde Marshall</td>
+                                        <td>Regional Director</td>
+                                        <td>San Francisco</td>
+                                        <td>36</td>
+                                        <td>2008/10/16</td>
+                                        <td>$470,600</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Haley Kennedy</td>
+                                        <td>Senior Marketing Designer</td>
+                                        <td>London</td>
+                                        <td>43</td>
+                                        <td>2012/12/18</td>
+                                        <td>$313,500</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Tatyana Fitzpatrick</td>
+                                        <td>Regional Director</td>
+                                        <td>London</td>
+                                        <td>19</td>
+                                        <td>2010/03/17</td>
+                                        <td>$385,750</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Michael Silva</td>
+                                        <td>Marketing Designer</td>
+                                        <td>London</td>
+                                        <td>66</td>
+                                        <td>2012/11/27</td>
+                                        <td>$198,500</td>
+                                    </tr>
+
+                                    </tbody>
+
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    </>
+    )
+}

src/component/reports/Reports.jsx

@@ -1,14 +1,92 @@
 import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import {useQuery} from "@tanstack/react-query";
+import queryKeys from "../../services/queryKeys";
+import {getReportsTopicsList} from "../../services/services";
+import PaymentReportTable from "./PaymentReportTable";
+import ProductReportTable from "./ProductReportTable";
+import sortArrayByListOrder from "../../helpers/sortArrayByLIstOrder";
+import SystemReportTable from "./SystemReportTable";
 
 
-export default function Reports(){
+export default function Reports() {
 
-    return(
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.topics,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getReportsTopicsList(reqData)
+        }
+    })
+
+    const reportTopicList = data?.data?.topics?.topics;
+
+    const renderedTable = {
+        payment: <PaymentReportTable />,
+        product: <ProductReportTable />,
+        system: <SystemReportTable />
+    }
+
+    const sortedReportTopicList= sortArrayByListOrder(reportTopicList ? reportTopicList : []) // SORTED SETTINGSCONFIG
+
+    return (
         <>
-            <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']} />
+            <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']}/>
             <div className="row">
-                <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>
+            {isFetching ? 
+            <>
+                <div className="col-12">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </>
+            : isError ?
+            <div className="col-12">
+                <p className='text-danger'>{error?.message}</p>
+            </div>
+            :
+            <div>
+                <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">
+                                
+                                {/* <!-- Tabs --> */}
+                                <ul className="nav nav-tabs" id="myTab" role="tablist">
+                                    {sortedReportTopicList && sortedReportTopicList.map((item, index) => {
+                                        return (
+                                            <li key={index} className="nav-item" role="presentation">
+                                                <a className={`nav-link ${index == 0 && 'active'}`} id={`tab-${item?.url}`} href="#" data-bs-toggle="tab" data-bs-target={`#content-${item?.url}`} type="button" role="tab">
+                                                    {item?.name}
+                                                </a>
+                                            </li>
+                                        )
+                                    })}
+                                </ul>
+
+                                {/* <!-- Tab Content --> */}
+                                <div className="tab-content">
+                                    {sortedReportTopicList && sortedReportTopicList.map((item, index) => {
+                                        return (
+                                            <div key={index} className={`tab-pane fade show ${index == 0 && 'active'}`} id={`content-${item?.url}`} role="tabpanel">
+                                                {renderedTable[item?.url]}
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            }
             </div>
         </>
     )

src/component/reports/SystemReportTable.jsx

@@ -0,0 +1,205 @@
+import React, { useState }  from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getSystemReports } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
+
+export default function SystemReportTable() {
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.system_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getSystemReports(reqData)
+        },
+    })
+
+    console.log('DATA', data?.data)
+
+    return (
+    <>
+
+        <div className="row">
+            <div className="col-md-12 m-b-30">
+                <div className="d-block d-sm-flex flex-nowrap align-items-center">
+                    <div className="page-title mb-2 mb-sm-0">
+                        <h4>Systems Report</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="row">
+            {isFetching ? 
+                <>
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </>
+                : isError ?
+                <div className="col-12">
+                    <p className='text-danger'>{error?.message}</p>
+                </div>
+                :
+                <div className="col-lg-12">
+                    <div className="card card-statistics">
+                        <div className="card-body">
+                            <div className="export-table-wrapper table-responsive">
+                                <table id="export-table" className="table table-bordered">
+                                    <thead className="thead-light">
+                                    <tr>
+                                        <th>Name</th>
+                                        <th>Position</th>
+                                        <th>Office</th>
+                                        <th>Age</th>
+                                        <th>Start date</th>
+                                        <th>Salary</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    <tr>
+                                        <td>Tiger Nixon</td>
+                                        <td>System Architect</td>
+                                        <td>Edinburgh</td>
+                                        <td>61</td>
+                                        <td>2011/04/25</td>
+                                        <td>$320,800</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Garrett Winters</td>
+                                        <td>Accountant</td>
+                                        <td>Tokyo</td>
+                                        <td>63</td>
+                                        <td>2011/07/25</td>
+                                        <td>$170,750</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Ashton Cox</td>
+                                        <td>Junior Technical Author</td>
+                                        <td>San Francisco</td>
+                                        <td>66</td>
+                                        <td>2009/01/12</td>
+                                        <td>$86,000</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Cedric Kelly</td>
+                                        <td>Senior Javascript Developer</td>
+                                        <td>Edinburgh</td>
+                                        <td>22</td>
+                                        <td>2012/03/29</td>
+                                        <td>$433,060</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Airi Satou</td>
+                                        <td>Accountant</td>
+                                        <td>Tokyo</td>
+                                        <td>33</td>
+                                        <td>2008/11/28</td>
+                                        <td>$162,700</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Brielle Williamson</td>
+                                        <td>Integration Specialist</td>
+                                        <td>New York</td>
+                                        <td>61</td>
+                                        <td>2012/12/02</td>
+                                        <td>$372,000</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Herrod Chandler</td>
+                                        <td>Sales Assistant</td>
+                                        <td>San Francisco</td>
+                                        <td>59</td>
+                                        <td>2012/08/06</td>
+                                        <td>$137,500</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Rhona Davidson</td>
+                                        <td>Integration Specialist</td>
+                                        <td>Tokyo</td>
+                                        <td>55</td>
+                                        <td>2010/10/14</td>
+                                        <td>$327,900</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Colleen Hurst</td>
+                                        <td>Javascript Developer</td>
+                                        <td>San Francisco</td>
+                                        <td>39</td>
+                                        <td>2009/09/15</td>
+                                        <td>$205,500</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Sonya Frost</td>
+                                        <td>Software Engineer</td>
+                                        <td>Edinburgh</td>
+                                        <td>23</td>
+                                        <td>2008/12/13</td>
+                                        <td>$103,600</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Jena Gaines</td>
+                                        <td>Office Manager</td>
+                                        <td>London</td>
+                                        <td>30</td>
+                                        <td>2008/12/19</td>
+                                        <td>$90,560</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Quinn Flynn</td>
+                                        <td>Support Lead</td>
+                                        <td>Edinburgh</td>
+                                        <td>22</td>
+                                        <td>2013/03/03</td>
+                                        <td>$342,000</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Charde Marshall</td>
+                                        <td>Regional Director</td>
+                                        <td>San Francisco</td>
+                                        <td>36</td>
+                                        <td>2008/10/16</td>
+                                        <td>$470,600</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Haley Kennedy</td>
+                                        <td>Senior Marketing Designer</td>
+                                        <td>London</td>
+                                        <td>43</td>
+                                        <td>2012/12/18</td>
+                                        <td>$313,500</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Tatyana Fitzpatrick</td>
+                                        <td>Regional Director</td>
+                                        <td>London</td>
+                                        <td>19</td>
+                                        <td>2010/03/17</td>
+                                        <td>$385,750</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Michael Silva</td>
+                                        <td>Marketing Designer</td>
+                                        <td>London</td>
+                                        <td>66</td>
+                                        <td>2012/11/27</td>
+                                        <td>$198,500</td>
+                                    </tr>
+
+                                    </tbody>
+
+                                </table>
+                            </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.file){
+                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
+            member_uid: localStorage.getItem('uid'), // USER UID
+            file: 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/component/subscription/Subscription.jsx

@@ -57,7 +57,7 @@ export default function Subscription() {
                                         <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
                                     </div>
                                     <div className="pt-2" style={{textAlign: 'left'}}>
-                                        <div style={{fontSize: '12px', fontWeight: 'bolder' , color: "#3E3699"  }}>
+                                        <div style={{fontSize: '12px', fontWeight: 'bolder', color: "#3E3699"}}>
                                             Next Payment: {getDateTimeFromDateString(currentSubscription?.next_payment)}
                                         </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/helpers/sortArrayByLIstOrder.js

@@ -0,0 +1,17 @@
+function sortArrayByListOrder(data) {
+  // Convert object to array if needed
+  const array = Array.isArray(data)
+    ? [...data]
+    : Object.values(data);
+
+  // Sort ascending by list_order
+  array.sort((a, b) => {
+    const orderA = a.list_order ?? 0;
+    const orderB = b.list_order ?? 0;
+    return orderA - orderB;
+  });
+
+  return array;
+}
+
+export default sortArrayByListOrder

src/links/siteLinks.js

@@ -11,6 +11,7 @@ const siteLinks = {
     comments: '/comments',
     reports: '/reports',
     subscription: '/subscription',
+    my_media: '/my-files',
     subscription_success:'/subscription-success',
     subscribe: '/subscribe',
     onboard: '/subscription',

src/services/queryKeys.js

@@ -8,9 +8,15 @@ const queryKeys = {
     recentAction: ['recent-action'],
     settingsData: ['settings_data'],
     myProductConfig: ['myproduct_config'],
+    myTemplateConfig: ['mytemplate_config'],
     productTemplateData: ['product_template_data'],
     subscriptions: ['subscriptions'],
     profile_data: ['profile_data'],
+    my_files: ['my_files'],
+    topics: ['topics'],
+    payment_report: ['payment_report'],
+    product_report: ['product_report'],
+    system_report: ['system_report'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],

src/services/services.js

@@ -1,10 +1,9 @@
 import axios from "axios"
 
-
 axios.interceptors.request.use(
     config => {
         config.headers = {
-            Accept: "application/json",
+            // Accept: "application/json",
             "Access-Control-Allow-Origin": "*",
             // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
             // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
@@ -23,11 +22,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 +92,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 +238,20 @@ 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)
+}
+
+export const getTemplateConfig = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/template-config`, postData, false)
+}
+
 // FUNCTION TO ACTIVATE TEMPLATE
 export const activateTemplate = (reqData) => {
     let postData = {
@@ -222,6 +260,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 = {
@@ -238,6 +284,59 @@ export const getSubscriptions = (reqData) => {
     return postAuxEnd(`/panel/subscription/products`, postData, false)
 }
 
+export const getMediaFileList = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/media-files`, postData, false)
+}
+
+export const uploadFile = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/upload/webfiles`, postData, true)
+}
+
+// FUNCTION TO CHANGE TEMPLATE MEDIA SET
+export const templateMediaSet = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/template-media-set`, postData, false)
+}
+
+export const getReportsTopicsList = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/topics`, postData, false)
+}
+
+// FUNCTION TO GET PAYMENT REPORTS
+export const getPaymentReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/payment`, postData, false)
+}
+
+// FUNCTION TO GET PRODUCT REPORTS
+export const getProductReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/product`, postData, false)
+}
+
+// FUNCTION TO GET SYSTEM REPORTS
+export const getSystemReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/system`, postData, false)
+}
+
 // FUNCTION TO GET COMMON PRACTICE
 export const getCommonPractice = (reqData) => {
     let postData = {
@@ -254,6 +353,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,
+    }
+    return postAuxEnd(`/upload/profile-picture`, postData, true)
+    // throw new Error('Opps')
+}
+
 
 
 

src/views/MyMediaPage.jsx

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