From 14e588b0a914c0a2b241ae53687a6ceaf4a57aa8 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 25 Jul 2025 20:41:25 +0100
Subject: [PATCH] fixed tab controls

---
 src/component/product/ProductActive.jsx       | 24 +++++---
 .../product/settingsTab/GeneralTab.jsx        | 57 +++++++++++--------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/src/component/product/ProductActive.jsx b/src/component/product/ProductActive.jsx
index 7d229cd..27b6809 100644
--- a/src/component/product/ProductActive.jsx
+++ b/src/component/product/ProductActive.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import getImage from "../../utils/getImage";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import GeneralTab from "./settingsTab/GeneralTab";
@@ -8,6 +8,7 @@ import { productRefreshSite } from "../../services/services";
 
 export default function ProductActive({productData}){
     const iframe = useRef()
+   
     const dataFields ={
         site_title: { name: 'Title', controls: 'TEXT', active: true },
         site_description: { name: 'Description', controls: 'TEXT', active: true },
@@ -38,6 +39,8 @@ export default function ProductActive({productData}){
         color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
     };
 
+     const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+
     const refresh = useMutation({
         mutationFn: (fields) => {
             return productRefreshSite(fields)
@@ -99,12 +102,16 @@ export default function ProductActive({productData}){
                                             <>
                                                 {Object.entries(settingsObject).map(([key, value]) => (
                                                     <li className="nav-item">
-                                                    <a className={`nav-link ${value.active}`}
+                                                    <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
                                                         id={key} data-bs-toggle="pill"
-                                                        data-bs-target={`#${value.controls}`}
+                                                        // data-bs-target={`#${value.controls}`}
                                                         type="button" role="tab"
-                                                        aria-controls={value.controls}
-                                                        aria-selected="true">{value.title}</a>
+                                                        // aria-controls={value.controls}
+                                                        // aria-selected="true"
+                                                        onClick={()=>setActiveTab(value.controls)}
+                                                    >
+                                                        {value.title}
+                                                    </a>
                                                     </li>
                                                 ))}
                                             </>
@@ -112,9 +119,10 @@ export default function ProductActive({productData}){
                                         <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}>
+                                                    <div className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                                        // id={value.controls} role="tabpanel"
+                                                        // aria-labelledby={key}
+                                                    >
                                                         <GeneralTab name={value.title} data={value.data} />
                                                     </div>
                                                 ))}
diff --git a/src/component/product/settingsTab/GeneralTab.jsx b/src/component/product/settingsTab/GeneralTab.jsx
index ab5f3fc..3334246 100644
--- a/src/component/product/settingsTab/GeneralTab.jsx
+++ b/src/component/product/settingsTab/GeneralTab.jsx
@@ -1,27 +1,36 @@
-import React from 'react'
+import React, {memo} from 'react'
 
-export default function GeneralTab({name='Full Name', data}) {
-  console.log("Page data == ", data)
-  return (
-    <div className="page-account-form">
-        <div className="p-0">
-            <form>
-                <div className="form-row">
-                    <>
-                        {Object.entries(data).map(([key, value]) => (
-                            <div className="form-group col-md-12">
-                                <label htmlFor="name1">{value.name}</label>
-                                  <input type="text" className="form-control" id={key}
-                                value="" />
-                            </div>
-                        ))}
-                    </>
-                    <div className="form-group col-md-12" style={{textAlign:'right'}}>
-                        <button type="submit" className="btn btn-primary">Update</button>
+const GeneralTab = memo(({name='Full Name', data}) =>{
+      console.log("Page data == ", data)
+      return (
+        <div className="page-account-form">
+            <div className="p-0">
+                <form>
+                    <div className="form-row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => (
+                                <div className="form-group col-md-12">
+                                    <label htmlFor="name1">{value.name}</label>
+                                    {value.controls == 'TEXT' ?
+                                        <input type="text" className="form-control" id={key} value="" />
+                                        :value.controls == 'TEXTAREA' ?
+                                        <textarea rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value="" />
+                                        :
+                                        null
+                                    }
+                                </div>
+                            ))}
+                        </>
+                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                            <button type="submit" className="btn btn-primary">Update</button>
+                        </div>
                     </div>
-                </div>
-            </form>
+                </form>
+            </div>
         </div>
-    </div>
-  )
-}
+      )
+    }
+)
+
+
+export default GeneralTab
\ No newline at end of file
-- 
2.34.1