Added Site template layout

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 },
@@ -28,17 +28,37 @@ export default function ProductActive({productData}){
         banner_description: { name: 'Main Banner Text', 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'}
@@ -123,7 +143,7 @@ export default function ProductActive({productData}){
                                                         // 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,10 +1,16 @@
 import React, {memo} 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)
+      if (isCustom ===  true){
+          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+      }
+
       return (
         <div className="page-account-form">
             <div className="p-0">
+
                 <form>
                     <div className="form-row">
                         <>

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 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