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

@@ -11,7 +11,7 @@ export default function ProductActive({productData}){
    
     const dataFields ={
         site_title: { name: 'Title', controls: 'TEXT', active: true },
-        site_description: { name: 'Description', controls: 'TEXT', active: true },
+        site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
         site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
         site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
         site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
@@ -24,21 +24,41 @@ export default function ProductActive({productData}){
     }
 
     const homeFields ={
-        banner_text: { name: 'Main Banner Text', controls: 'TEXT', active: true },
+        banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
-        banner_description: { name: 'Main Banner Text', controls: 'TEXTAREA', 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' , data: dataFields},
+        settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
-        home_tab: { title: 'Home Page', controls: 'home', active: '' , data: homeFields},
+        home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false,  data: homeFields},
-        footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
+        footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
-        about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
+        about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
-        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
+        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: {} },
-        social_tab: { title: 'Socials', controls: 'social', active: '', data: socialFields },
+        social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
-        template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
+        template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
-        color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
+        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({
@@ -81,7 +101,7 @@ export default function ProductActive({productData}){
                                     </div>
                                 </div>
                                 <div className="card-body">
-                                    <iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
+                                    <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
                                 </div>
                                 <div className="p-4 ml-auto">
                                     <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
@@ -101,7 +121,7 @@ export default function ProductActive({productData}){
                                         <ul className="nav nav-tabs" role="tablist">
                                             <>
                                                 {Object.entries(settingsObject).map(([key, value]) => (
-                                                    <li className="nav-item">
+                                                    <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}`}
@@ -119,11 +139,11 @@ export default function ProductActive({productData}){
                                         <div className="tab-content">
                                             <>
                                                 {Object.entries(settingsObject).map(([key, value]) => (
-                                                    <div className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                                    <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} />
+                                                        <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
                                                     </div>
                                                 ))}
                                             </>

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,20 +1,41 @@
-import React, {memo} from 'react'
+import React, {memo, useState} from 'react'
+import SiteTemplateSelector from './SiteTemplateSelector';
 
-const GeneralTab = memo(({name='Full Name', data}) =>{
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
       console.log("Page data == ", data)
+
+      const fieldData = {}
+      Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+        fieldData[value.name] = ''
+      })
+      const [fields, setFields] = useState(fieldData)
+      const handleChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+      }
+
+      const handleSubmit = () => {
+        console.log('formInfo', fields)
+      }
+
+      if (isCustom ===  true){
+          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+      }
+
+
       return (
         <div className="page-account-form">
-            <div className="p-0">
+            <div className="p-0" style={{ minHeight: '500px'}}>
-                <form>
+
+                <form id='tab_form'>
                     <div className="form-row">
                         <>
                             {Object.entries(data)?.map(([key, value]) => (
-                                <div className="form-group col-md-12">
+                                <div key={key} className="form-group col-md-12">
                                     <label htmlFor="name1">{value.name}</label>
                                     {value.controls == 'TEXT' ?
-                                        <input type="text" className="form-control" id={key} value="" />
+                                        <input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
                                         :value.controls == 'TEXTAREA' ?
-                                        <textarea rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value="" />
+                                        <textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
                                         :
                                         null
                                     }
@@ -22,7 +43,7 @@ const GeneralTab = memo(({name='Full Name', data}) =>{
                             ))}
                         </>
                         <div className="form-group col-md-12" style={{textAlign:'right'}}>
-                            <button type="submit" className="btn btn-primary">Update</button>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
                         </div>
                     </div>
                 </form>

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