fixed input fields

src/component/calendar/Calendar.jsx

@@ -87,7 +87,7 @@ export default function Calendar(){
                     <div className="card card-statistics">
                         <div className="card-header">
                             <div className="card-heading">
-                                <h4 className="card-title">Event Calendar</h4>
+                                <h4 className="card-title">Events</h4>
                             </div>
                         </div>
                         <div className="card-body">

src/component/home/TopBar.jsx

@@ -58,7 +58,7 @@ export default function TopBar() {
             let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
             return (
             <div key={item.id + index} className="col-sm-6 col-xxl-3">
-                <div className="card card-statistics ecommerce-contant overflow-h">
+                <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `}>
                     <div className="card-body p-0">
                         <div className="d-flex m-b-0 ecommerce-contant-text h-100">
                             <div className="w-100">
@@ -68,9 +68,7 @@ export default function TopBar() {
                                         <small className="d-block">{item?.data_span}</small>
                                     </div>
                                     <div className="col text-right">
-                                        <h5 className="text-muted mb-0">{item?.description}</h5>
+                                        <h5 className="text-muted mb-0"><a href={item?.link}>{item?.description}</a></h5>
-                                        <strong className={`${textColor} m-t-5`}><i
-                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
                                     </div>
                                 </div>
                                 <div className="apexchart-wrapper">

src/component/product/ProductActive.jsx

@@ -1,19 +1,85 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import getImage from "../../utils/getImage";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import GeneralTab from "./settingsTab/GeneralTab";
+import { useMutation } from "@tanstack/react-query";
+import { productRefreshSite } from "../../services/services";
 
 
 export default function ProductActive({productData}){
-       const settingsObject = {
+    const iframe = useRef()
-            home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
+   
-            footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
+    const dataFields ={
-            about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
+        site_title: { name: 'Title', controls: 'TEXT', active: true },
-            contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
+        site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
-            social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
+        site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
-            template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
+        site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
-            color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
+        site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
-            };
+    }
+
+    const socialFields ={
+        facebook: { name: 'Facebook', controls: 'TEXT', active: true },
+        twitter: { name: 'Twitter', controls: 'TEXT', active: true },
+        youtube: { name: 'Youtube', controls: 'TEXT', active: true },
+    }
+
+    const homeFields ={
+        banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
+        banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
+    }
+
+    const footerFields ={
+        footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
+    }
+
+    const aboutFields ={
+        about_description: { name: 'About us', controls: 'TEXTAREA', active: true },
+    }
+
+    const templateData = {
+        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: '/assets/img/file-icon/svg.png', active: '' },
+        template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: '/assets/img/file-icon/svg.png', active: '' },
+        template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: '/assets/img/file-icon/svg.png', active: '' },
+        template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: '/assets/img/file-icon/svg.png', active: '' },
+        template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: '/assets/img/file-icon/svg.png', active: '' },
+        template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: '/assets/img/file-icon/svg.png', active: '' },
+        template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: '/assets/img/file-icon/svg.png', active: '' },
+        template_9 : { title: 'Template Name-9',   template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: '/assets/img/file-icon/svg.png', active: '' },
+    }
+
+    const settingsObject = {
+        settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
+        home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false,  data: homeFields},
+        footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
+        about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
+        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: {} },
+        social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
+        template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
+        color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
+    };
+
+
+     const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+
+    const refresh = useMutation({
+        mutationFn: (fields) => {
+            return productRefreshSite(fields)
+        },
+        onSuccess: (res) => {
+            iframe.current.src += ''
+        }
+    })
+
+    const handleRefresh = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData.product_id,
+            subscription_uid: productData.subscription_uid
+        }
+        refresh.mutate(reqData)
+    }
+    let externalUrl= 'https://'+productData?.internal_url
 
     return(
         <>
@@ -24,74 +90,71 @@ export default function ProductActive({productData}){
 
 
             <div className="row account-contant">
-<>
+                <>
-
+                    <div className="row tabs-contant">
-
+                        <div className="col-xxl-6">
-    <div className="row tabs-contant">
+                            <div className="card card-statistics">
-        <div className="col-xxl-6">
+                                <div className="card-header">
-            <div className="card card-statistics">
+                                    <div className="card-heading d-flex justify-content-between">
-                <div className="card-header">
+                                        <h4 className="card-title">{externalUrl}</h4>
-                    <div className="card-heading">
+                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn btn-primary">IC</button>
-                        <h4 className="card-title">{productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}</h4>
-                    </div>
-                </div>
-                <div className="card-body">
-                    <iframe style={{borderWidth: '0px;'}} src={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
-
-                </div>
-            </div>
-        </div>
-        <div className="col-xxl-6">
-            <div className="card card-statistics">
-                <div className="card-header">
-                    <div className="card-heading">
-                        <h4 className="card-title"> Site Settings </h4>
-                    </div>
-                </div>
-                <div className="card-body">
-                    <div className="tab tab-vertical">
-                        <ul className="nav nav-tabs" role="tablist">
-                            <>
-                                {Object.entries(settingsObject).map(([key, value]) => (
-                                    <li className="nav-item">
-                                      <a className={`nav-link ${value.active}`}
-                                         id={key} data-bs-toggle="pill"
-                                         data-bs-target={`#${value.controls}`}
-                                         type="button" role="tab"
-                                         aria-controls={value.controls}
-                                         aria-selected="true">{value.title}</a>
-                                    </li>
-                                ))}
-                             </>
-                        </ul>
-                        <div className="tab-content">
-                            <>
-                                {Object.entries(settingsObject).map(([key, value]) => (
-                                    <div className={`tab-pane fade  ${value.active}`}
-                                         id={value.controls} role="tabpanel"
-                                         aria-labelledby={key}>
-                                         <GeneralTab name={value.title} data={value.data} />
                                     </div>
-                                ))}
+                                </div>
-                            </>
+                                <div className="card-body">
+                                    <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
+                                </div>
+                                <div className="p-4 ml-auto">
+                                    <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-xxl-6">
+                            <div className="card card-statistics">
+                                <div className="card-header">
+                                    <div className="card-heading">
+                                        <h4 className="card-title"> Site Settings </h4>
+                                    </div>
+                                </div>
+                                <div className="card-body">
+                                    <div className="tab tab-vertical">
+                                        <ul className="nav nav-tabs" role="tablist">
+                                            <>
+                                                {Object.entries(settingsObject).map(([key, value]) => (
+                                                    <li key={key} className="nav-item">
+                                                    <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
+                                                        id={key} data-bs-toggle="pill"
+                                                        // data-bs-target={`#${value.controls}`}
+                                                        type="button" role="tab"
+                                                        // aria-controls={value.controls}
+                                                        // aria-selected="true"
+                                                        onClick={()=>setActiveTab(value.controls)}
+                                                    >
+                                                        {value.title}
+                                                    </a>
+                                                    </li>
+                                                ))}
+                                            </>
+                                        </ul>
+                                        <div className="tab-content">
+                                            <>
+                                                {Object.entries(settingsObject).map(([key, value]) => (
+                                                    <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                                        // id={value.controls} role="tabpanel"
+                                                        // aria-labelledby={key}
+                                                    >
+                                                        <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
+                                                    </div>
+                                                ))}
+                                            </>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
+                </>
             </div>
-        </div>
-    </div>
-
-
-
-
-</>
-
-
-
-
-
-            </div>
-
         </>
     )
 }

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,49 +1,57 @@
-import React from 'react'
+import React, {memo, useState} from 'react'
+import SiteTemplateSelector from './SiteTemplateSelector';
 
-export default function GeneralTab({name='Full Name'}) {
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
-  return (
+      console.log("Page data == ", data)
-    <div className="page-account-form">
+
-        <div className="p-0">
+      const fieldData = {}
-            <form>
+      Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
-                <h4>{name}</h4>
+        fieldData[value.name] = ''
-                <div className="form-row">
+      })
-                    <div className="form-group col-md-12">
+      const [fields, setFields] = useState(fieldData)
-                        <label htmlFor="name1">Full Name</label>
+      const handleChange = ({target:{name, value}}) => {
-                        <input type="text" className="form-control" id="name1"
+        setFields(prev => ({...prev, [name]:value}))
-                                value="Alice Williams" />
+      }
-                    </div>
+
-                    <div className="form-group col-md-12">
+      const handleSubmit = () => {
-                        <label htmlFor="title1">Title</label>
+        console.log('formInfo', fields)
-                        <input type="text" className="form-control" id="title1"
+      }
-                                value="Marketing expert" />
+
-                    </div>
+      if (isCustom ===  true){
-                    <div className="form-group col-md-12">
+          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
-                        <label htmlFor="phone1">Phone Number</label>
+      }
-                        <input type="text" className="form-control" id="phone1"
-                                value="(01) 97 563 15613" />
-                    </div>
-                    <div className="form-group col-md-12">
-                        <label htmlFor="email1">Email</label>
-                        <input type="email" className="form-control" id="email1"
-                                value="alicewilliams@gmail.com" />
-                    </div>
-                </div>
-                <div className="form-group">
-                    <label htmlFor="add1">Address</label>
-                    <input type="text" className="form-control" id="add1"
-                            value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
-                </div>
-                <div className="form-group">
-                    <label htmlFor="add2">Address 2</label>
-                    <input type="text" className="form-control" id="add2"
-                            value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
-                </div>
 
 
-                <button type="submit" className="btn btn-primary">Update Information
+      return (
-                </button>
+        <div className="page-account-form">
-            </form>
+            <div className="p-0" style={{ minHeight: '500px'}}>
+
+                <form id='tab_form'>
+                    <div className="form-row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => (
+                                <div key={key} className="form-group col-md-12">
+                                    <label htmlFor="name1">{value.name}</label>
+                                    {value.controls == 'TEXT' ?
+                                        <input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
+                                        :value.controls == 'TEXTAREA' ?
+                                        <textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
+                                        :
+                                        null
+                                    }
+                                </div>
+                            ))}
+                        </>
+                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
         </div>
-    </div>
+      )
-  )
+    }
-}
+)
+
+
+export default GeneralTab

src/component/product/settingsTab/SiteTemplateSelector.jsx

@@ -0,0 +1,32 @@
+import React, {memo} from 'react'
+
+const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
+        console.log("Page data == ", data)
+        return (
+            <div className="page-account-form">
+                <div className="p-0">
+                    <div className="row">
+                        <>
+                            {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={value.banner} alt={value.title} />
+                                                </div>
+                                                <h4 className="mb-0">{value.title}</h4>
+                                                <a href="javascript:void(0)" className="btn btn-light">Activate</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+)
+export default SiteTemplateSelector

src/services/services.js

@@ -115,6 +115,14 @@ export const productsData = (reqData) => {
     return postAuxEnd(`/panel/account/products`, postData, false)
 }
 
+// FUNCTION TO REFRESH SITE
+export const productRefreshSite = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/refresh`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = (reqData) => {
     let postData = {