From 67d26f6ab05ca6c117d4500bed501d10087ddb33 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 1 Sep 2025 21:01:47 +0100
Subject: [PATCH] template endpoint added

---
 src/component/home/DashPayments.jsx           |   4 +-
 .../product/settingsTab/GeneralTab.jsx        | 158 ++++++++++------
 .../product/settingsTab/Settings.jsx          |  86 ++-------
 .../settingsTab/SiteTemplateSelector.jsx      |  62 +++++-
 .../product/settingsTab/_GeneralTab.jsx       | 128 +++++++++++++
 .../product/settingsTab/_Settings.jsx         | 179 ++++++++++++++++++
 src/services/services.js                      |   8 +
 7 files changed, 483 insertions(+), 142 deletions(-)
 create mode 100644 src/component/product/settingsTab/_GeneralTab.jsx
 create mode 100644 src/component/product/settingsTab/_Settings.jsx

diff --git a/src/component/home/DashPayments.jsx b/src/component/home/DashPayments.jsx
index f470c02..8e44fd6 100644
--- a/src/component/home/DashPayments.jsx
+++ b/src/component/home/DashPayments.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { getDashPayments } from '../../services/services'
 import { useQuery } from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
-import getDateFromDateString from '../../helpers/getDateFromDateString'
+import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
 import getImage from '../../utils/getImage'
 
 export default function DashPayments() {
@@ -65,7 +65,7 @@ export default function DashPayments() {
                                         <tr key={index}>
                                             {/* <td>{Number(item?.id).toString().padStart(6,'0')}</td> */}
                                             <td>
-                                                {getDateFromDateString(item?.added)}
+                                                {getDateTimeFromDateString(item?.added)}
                                             </td>
 
                                             <td>{item?.option_name}</td>
diff --git a/src/component/product/settingsTab/GeneralTab.jsx b/src/component/product/settingsTab/GeneralTab.jsx
index 3008775..a85744c 100644
--- a/src/component/product/settingsTab/GeneralTab.jsx
+++ b/src/component/product/settingsTab/GeneralTab.jsx
@@ -1,4 +1,4 @@
-import React, {memo, useState} from 'react'
+import React, {memo, useEffect, useMemo, useState} from 'react'
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { pageSettings } from "../../../services/services";
 import SiteTemplateSelector from './SiteTemplateSelector';
@@ -12,23 +12,37 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
 
     const [reqStatus, setReqStatus] = useState({error: null, message: ''})
 
-    const fieldData = {}
-    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
-    fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
-    })
-    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
-    fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
-    })
+    
+    // const computeFieldData = useMemo(()=>{
+    //     const fieldData = {}
+    //     Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+    //     fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+    //     })
+    //     backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+    //     fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+    //     })
+    //     return fieldData
+    // },[backendValues.data])
 
-    // console.log('fieldData', fieldData)
+    
+    const [fields, setFields] = useState({})
 
-    const [fields, setFields] = useState(fieldData)
+    useEffect(()=>{
+        const fieldData = {}
+        Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+        fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+        })
+        backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+        fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+        })
+        setFields(fieldData)
+    },[backendValues.data])
     
     const handleChange = ({target:{name, value}}) => {
         setFields(prev => ({...prev, [name]:value}))
         setFieldsChanged(true)
     }
-
+    
     const submitSettings = useMutation({
         mutationFn: (fields) => {
             return pageSettings(fields)
@@ -62,64 +76,82 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
             ...fields
             }
         }
-        // console.log('formInfo', reqData)
         submitSettings.mutate(reqData)
       }
 
-      if (isCustom ===  true){
-          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
-      }
-
-
       return (
-        <div className="page-account-form">
-            <div className="p-0" style={{ minHeight: '500px'}}>
-
-                <form id='tab_form'>
-                    <div className="form-row">
-                        <>
-                            {Object.entries(data)?.map(([key, value]) => {
-                                let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
-                                let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
-                                return (
-                                    <div key={key} className="form-group col-md-12">
-                                        <label htmlFor="name1">{value.name}</label>
-                                        {value.controls == 'TEXT' ?
-                                            <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
-                                            :value.controls == 'TEXTAREA' ?
-                                            <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
-                                            : value.controls == 'SELECT_NO_YES' ?
-                                            // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
-                                            <div className='position-relative'>
-                                                <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
-                                                    <option value=''>Select</option>
-                                                    <option value='0'>No</option>
-                                                    <option value='1'>Yes</option>
-                                                </select>
-                                                <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
-                                            </div>
-                                            :
-                                            null
-                                        }
-                                    </div>
-                                )
-                            }
-                            )}
-                        </>
-                        {reqStatus.message &&
-                            <>
-                            <div className="col-12">
-                                <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
-                            </div>
-                            </>
-                        }
-                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
-                            <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
-                        </div>
+        <>
+        {backendValues?.isFetching || !backendValues?.data ? 
+            <>
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
                     </div>
-                </form>
+                </div>
+            </>
+            : backendValues?.isError ?
+            <div className="row">
+                <div className="col-12">
+                    <p className='text-danger'>{backendValues?.error.message}</p>
+                </div>
             </div>
-        </div>
+            :
+            <>
+            {isCustom ===  true ?
+            <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+            :
+            <div className="page-account-form">
+                <div className="p-0" style={{ minHeight: '500px'}}>
+
+                    <form id='tab_form'>
+                        <div className="form-row">
+                            <>
+                                {Object.entries(data)?.map(([key, value]) => {
+                                    let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
+                                    let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                    return (
+                                        <div key={key} className="form-group col-md-12">
+                                            <label htmlFor="name1">{value.name}</label>
+                                            {value.controls == 'TEXT' ?
+                                                <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                                :value.controls == 'TEXTAREA' ?
+                                                <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                                : value.controls == 'SELECT_NO_YES' ?
+                                                // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
+                                                <div className='position-relative'>
+                                                    <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
+                                                        <option value=''>Select</option>
+                                                        <option value='0'>No</option>
+                                                        <option value='1'>Yes</option>
+                                                    </select>
+                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
+                                                </div>
+                                                :
+                                                null
+                                            }
+                                        </div>
+                                    )
+                                }
+                                )}
+                            </>
+                            {reqStatus.message &&
+                                <>
+                                <div className="col-12">
+                                    <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                                </div>
+                                </>
+                            }
+                            <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                                <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            }
+            </>
+            }
+        </>
       )
     }
 )
diff --git a/src/component/product/settingsTab/Settings.jsx b/src/component/product/settingsTab/Settings.jsx
index 1719c33..7d48221 100644
--- a/src/component/product/settingsTab/Settings.jsx
+++ b/src/component/product/settingsTab/Settings.jsx
@@ -18,77 +18,16 @@ const Settings = memo(({productData}) => {
                 product_id: productData?.product_id
             }
            return getMyProductConfig(reqData)
-        }
+        },
     })
     const settingsConfig = configData?.data?.settings_items
     // console.log('CONFIG DATA...', settingsConfig)
-   
-    const dataFields ={
-        site_title: { name: 'Title', 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 },
-    }
-
-    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 },
-        boolean_footer_show_email: { name: 'Show email in footer', controls: 'SELECT_NO_YES', active: true },
-        boolean_footer_show_made_by: { name: 'Show made by in footer', controls: 'SELECT_NO_YES', active: true },
-        boolean_footer_show_socials: { name: 'Show social in footer', controls: 'SELECT_NO_YES', active: true },
-    }
-
-    const aboutFields ={
-        about_title: { name: 'About Title', controls: 'TEXT', active: true },
-        about_description: { name: 'About Details', controls: 'TEXTAREA', active: true },
-        about_extra_1: { name: 'Extra About us', controls: 'TEXTAREA', active: true },
-        about_extra_2: { name: 'More About us', controls: 'TEXTAREA', active: true },
-    }
-
-    const templateData = {
-        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
-        template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
-        template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
-        template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
-        template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
-        template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
-        template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
-        template_9 : { title: 'Template Name-9',   template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
-    }
-
-    const contactFields ={
-        contact_title : { name: 'Contact Title', controls: 'TEXT', active: true },
-        contact_introduction: { name: 'Extra Introduction', controls: 'TEXTAREA', active: true },
-    }
-
-    const settingsObject = useMemo(()=>{
-        return {
-           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: contactFields },
-           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 [fieldsChanged, setFieldsChanged] = useState(false)
 
-    const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+    // const [activeTab, setActiveTab] = useState(Object.entries(settingsConfig)[0][1]?.controls)
+     const [activeTab, setActiveTab] = useState(null)
 
     const handleChangeTab = (value) => {
         // if(fieldsChanged){
@@ -113,15 +52,16 @@ const Settings = memo(({productData}) => {
                 product_id: productData?.product_id
             }
            return getSettingsData(reqData)
-        }
+        },
+        enabled: settingsConfig ? true : false
     })
 
-    const settingsData = data?.data?.settings
+    const settingsData = {data: data?.data?.settings, isFetching, isError, error}
     // console.log('data', settingsData)
 
       return (
         <>
-        {isFetching ? 
+        {configIsFetching ? 
             <>
                 <div className="row">
                     <div className="col-12">
@@ -129,19 +69,19 @@ const Settings = memo(({productData}) => {
                     </div>
                 </div>
             </>
-            : isError ?
+            : configIsError ?
             <div className="row">
                 <div className="col-12">
-                    <p className='text-danger'>{error.message}</p>
+                    <p className='text-danger'>{configError.message}</p>
                 </div>
             </div>
             :
             <div className="tab tab-vertical">
                 <ul className="nav nav-tabs" role="tablist">
                     <>
-                        {Object.entries(settingsObject).map(([key, value]) => (
+                        {Object.entries(settingsConfig).map(([key, value], index) => (
                             <li key={key} className="nav-item">
-                            <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
+                            <a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
                                 id={key} 
                                 // data-bs-toggle="pill"
                                 // data-bs-target={`#${value.controls}`}
@@ -159,8 +99,8 @@ const Settings = memo(({productData}) => {
                 </ul>
                 <div className="tab-content">
                     <>
-                        {Object.entries(settingsObject).map(([key, value]) => (
-                            <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                        {Object.entries(settingsConfig).map(([key, value], index) => (
+                            <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
                                 // id={value.controls} role="tabpanel"
                                 // aria-labelledby={key}
                             >
diff --git a/src/component/product/settingsTab/SiteTemplateSelector.jsx b/src/component/product/settingsTab/SiteTemplateSelector.jsx
index bd37e8d..09a4319 100644
--- a/src/component/product/settingsTab/SiteTemplateSelector.jsx
+++ b/src/component/product/settingsTab/SiteTemplateSelector.jsx
@@ -1,11 +1,13 @@
 import React, {memo} from 'react'
 import getImage from "../../../utils/getImage";
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import queryKeys from '../../../services/queryKeys';
-import { getProductTemplateData } from '../../../services/services';
+import { getProductTemplateData, activateTemplate } from '../../../services/services';
 
 const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
 
+        const queryClient = useQueryClient()
+
         const {data:templateData, isFetching, isError, error} = useQuery({
             queryKey: queryKeys.productTemplateData,
             queryFn: () => {
@@ -20,10 +22,42 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
         })
 
         const templateResponse = templateData?.data
+        const currentTemUID = templateResponse?.current_template_uid
         const templates = templateResponse?.templates
 
-        // console.log('data Template', templates)
+        // console.log('data Template', templateResponse)
         // console.log("Page data == ", data)
+
+        const handleActivateTemplate = useMutation({
+            mutationFn: (fields) => {
+                return activateTemplate(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 = (tem_uid) => {
+            const reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id,
+                template_uid: tem_uid
+            }
+            // console.log(reqData)
+            handleActivateTemplate.mutate(reqData)
+        }
+
         return (
             <div className="page-account-form">
                 <div className="p-0">
@@ -56,7 +90,11 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
                                                     <img  src={getImage('file-icon/svg.png')} alt={template.title} />
                                                 </div>
                                                 <h4 className="mb-0">{template.title}</h4>
-                                                <a href="#" className="btn btn-light">Activate</a>
+                                                {currentTemUID == template.template_uid ?
+                                                <button className="btn btn-light" disabled={true}>Active</button>
+                                                :
+                                                <button onClick={()=>handleSubmit(template.template_uid)} className="btn btn-primary">Activate</button>
+                                                }
                                             </div>
                                         </div>
                                     </div>
@@ -79,6 +117,22 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
                                 </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>
diff --git a/src/component/product/settingsTab/_GeneralTab.jsx b/src/component/product/settingsTab/_GeneralTab.jsx
new file mode 100644
index 0000000..3008775
--- /dev/null
+++ b/src/component/product/settingsTab/_GeneralTab.jsx
@@ -0,0 +1,128 @@
+import React, {memo, useState} from 'react'
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { pageSettings } from "../../../services/services";
+import SiteTemplateSelector from './SiteTemplateSelector';
+import NoYesBooleanDropdown from './NoYesBooleanDropdown';
+import { IoMdArrowDropdown } from 'react-icons/io';
+import queryKeys from '../../../services/queryKeys';
+
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+
+    const queryClient = useQueryClient()
+
+    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+
+    const fieldData = {}
+    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+    fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
+    })
+    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+    fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
+    })
+
+    // console.log('fieldData', fieldData)
+
+    const [fields, setFields] = useState(fieldData)
+    
+    const handleChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+        setFieldsChanged(true)
+    }
+
+    const submitSettings = useMutation({
+        mutationFn: (fields) => {
+            return pageSettings(fields)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                return setReqStatus({error: true, message: 'Unable to complete, try again later'})
+            }
+            setFieldsChanged(false)
+            setReqStatus({error: false, message: 'Completed successfully'})
+        },
+        onError: (err) => {
+            setReqStatus({error: true, message: 'Unable to complete, try again later'})
+        },
+        onSettled: () => {
+            queryClient.refetchQueries({  // refetches productProvision API call
+                queryKey: [...queryKeys.settingsData],
+            })
+            setTimeout(()=>{
+                setReqStatus({error: null, message: ''})
+            },3000)
+        },
+    })
+
+      const handleSubmit = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData?.product_id,
+            settings : {
+            ...fields
+            }
+        }
+        // console.log('formInfo', reqData)
+        submitSettings.mutate(reqData)
+      }
+
+      if (isCustom ===  true){
+          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
+      }
+
+
+      return (
+        <div className="page-account-form">
+            <div className="p-0" style={{ minHeight: '500px'}}>
+
+                <form id='tab_form'>
+                    <div className="form-row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => {
+                                let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
+                                let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
+                                return (
+                                    <div key={key} className="form-group col-md-12">
+                                        <label htmlFor="name1">{value.name}</label>
+                                        {value.controls == 'TEXT' ?
+                                            <input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            :value.controls == 'TEXTAREA' ?
+                                            <textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
+                                            : value.controls == 'SELECT_NO_YES' ?
+                                            // <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange}  />
+                                            <div className='position-relative'>
+                                                <select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
+                                                    <option value=''>Select</option>
+                                                    <option value='0'>No</option>
+                                                    <option value='1'>Yes</option>
+                                                </select>
+                                                <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
+                                            </div>
+                                            :
+                                            null
+                                        }
+                                    </div>
+                                )
+                            }
+                            )}
+                        </>
+                        {reqStatus.message &&
+                            <>
+                            <div className="col-12">
+                                <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                            </div>
+                            </>
+                        }
+                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+      )
+    }
+)
+
+
+export default GeneralTab
\ No newline at end of file
diff --git a/src/component/product/settingsTab/_Settings.jsx b/src/component/product/settingsTab/_Settings.jsx
new file mode 100644
index 0000000..1719c33
--- /dev/null
+++ b/src/component/product/settingsTab/_Settings.jsx
@@ -0,0 +1,179 @@
+import React, { memo, useMemo, useState } from 'react'
+import GeneralTab from './GeneralTab'
+import { getSettingsData, getMyProductConfig } from '../../../services/services';
+import queryKeys from '../../../services/queryKeys';
+import { useSelector } from 'react-redux';
+import { useQuery } from '@tanstack/react-query';
+
+const Settings = memo(({productData}) => {
+
+    const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
+
+    const {data:configData, isFetching:configIsFetching, configIsError, error:configError} = useQuery({
+        queryKey: queryKeys.myProductConfig,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getMyProductConfig(reqData)
+        }
+    })
+    const settingsConfig = configData?.data?.settings_items
+    // console.log('CONFIG DATA...', settingsConfig)
+   
+    const dataFields ={
+        site_title: { name: 'Title', 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 },
+    }
+
+    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 },
+        boolean_footer_show_email: { name: 'Show email in footer', controls: 'SELECT_NO_YES', active: true },
+        boolean_footer_show_made_by: { name: 'Show made by in footer', controls: 'SELECT_NO_YES', active: true },
+        boolean_footer_show_socials: { name: 'Show social in footer', controls: 'SELECT_NO_YES', active: true },
+    }
+
+    const aboutFields ={
+        about_title: { name: 'About Title', controls: 'TEXT', active: true },
+        about_description: { name: 'About Details', controls: 'TEXTAREA', active: true },
+        about_extra_1: { name: 'Extra About us', controls: 'TEXTAREA', active: true },
+        about_extra_2: { name: 'More About us', controls: 'TEXTAREA', active: true },
+    }
+
+    const templateData = {
+        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
+        template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
+        template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
+        template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
+        template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
+        template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
+        template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
+        template_9 : { title: 'Template Name-9',   template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
+    }
+
+    const contactFields ={
+        contact_title : { name: 'Contact Title', controls: 'TEXT', active: true },
+        contact_introduction: { name: 'Extra Introduction', controls: 'TEXTAREA', active: true },
+    }
+
+    const settingsObject = useMemo(()=>{
+        return {
+           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: contactFields },
+           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 [fieldsChanged, setFieldsChanged] = useState(false)
+
+    const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+
+    const handleChangeTab = (value) => {
+        // if(fieldsChanged){
+        //     const proceed = confirm('Continue without saving changes')
+        //     if(proceed){
+        //         setActiveTab(value)
+        //         setFieldsChanged(false)
+        //     }
+        // }else{
+        //     setActiveTab(value)
+        // }
+        setActiveTab(value)
+    }
+
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.settingsData,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+           return getSettingsData(reqData)
+        }
+    })
+
+    const settingsData = data?.data?.settings
+    // console.log('data', settingsData)
+
+      return (
+        <>
+        {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="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={()=>handleChangeTab(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} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
+                            </div>
+                        ))}
+                    </>
+                </div>
+            </div>
+            }
+        </>
+      )
+    }
+)
+
+export default Settings
diff --git a/src/services/services.js b/src/services/services.js
index bbccb66..019a11b 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -197,6 +197,14 @@ export const getProductTemplateData = (reqData) => {
     return postAuxEnd(`/panel/account/products/templates`, postData, false)
 }
 
+// FUNCTION TO ACTIVATE TEMPLATE
+export const activateTemplate = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/template/activate`, postData, false)
+}
+
 // FUNCTION TO GET PRODUCT SUBSCRIPTIONS
 export const completeProfile = (reqData) => {
     let postData = {