From c951f925d8ccb355690763bb5ac34e0a853db978 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Wed, 3 Sep 2025 21:00:28 -0400
Subject: [PATCH] panel data key

---
 .../product/settingsTab/GeneralTab.jsx        | 290 +++++++++---------
 src/component/start/Start.jsx                 |   8 +-
 2 files changed, 157 insertions(+), 141 deletions(-)

diff --git a/src/component/product/settingsTab/GeneralTab.jsx b/src/component/product/settingsTab/GeneralTab.jsx
index a85744c..cb59ffd 100644
--- a/src/component/product/settingsTab/GeneralTab.jsx
+++ b/src/component/product/settingsTab/GeneralTab.jsx
@@ -1,158 +1,174 @@
 import React, {memo, useEffect, useMemo, useState} from 'react'
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { pageSettings } from "../../../services/services";
+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 {IoMdArrowDropdown} from 'react-icons/io';
 import queryKeys from '../../../services/queryKeys';
 
-const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
+const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) => {
 
-    const queryClient = useQueryClient()
+        const queryClient = useQueryClient()
 
-    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+        const [reqStatus, setReqStatus] = useState({error: null, message: ''})
 
-    
-    // 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])
 
-    
-    const [fields, setFields] = useState({})
+        // 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])
 
-    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)
-        },
-        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],
+
+        const [fields, setFields] = useState({})
+
+        useEffect(() => {
+            const fieldData = {}
+            Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+                fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
             })
-            setTimeout(()=>{
-                setReqStatus({error: null, message: ''})
-            },3000)
-        },
-    })
+            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 handleSubmit = () => {
-        const reqData = {
-            token: localStorage.getItem('token'), // USER TOKEN
-            uid: localStorage.getItem('uid'), // USER UID
-            product_id: productData?.product_id,
-            settings : {
-            ...fields
-            }
+        const handleChange = ({target: {name, value}}) => {
+            setFields(prev => ({...prev, [name]: value}))
+            setFieldsChanged(true)
         }
-        submitSettings.mutate(reqData)
-      }
 
-      return (
-        <>
-        {backendValues?.isFetching || !backendValues?.data ? 
-            <>
-                <div className="row">
-                    <div className="col-12">
-                        <p className='text-mute'>Loading...</p>
-                    </div>
-                </div>
-            </>
-            : backendValues?.isError ?
-            <div className="row">
-                <div className="col-12">
-                    <p className='text-danger'>{backendValues?.error.message}</p>
-                </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'}}>
+        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)
+            },
+        })
 
-                    <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>
+        const handleSubmit = () => {
+            const reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id,
+                settings: {
+                    ...fields
+                }
+            }
+            submitSettings.mutate(reqData)
+        }
+
+        return (
+            <>
+                {backendValues?.isFetching || !backendValues?.data ?
+                    <>
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-mute'>Loading...</p>
                             </div>
                         </div>
-                    </form>
-                </div>
-            </div>
-            }
+                    </>
+                    : backendValues?.isError ?
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-danger'>{backendValues?.error.message}</p>
+                            </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 = key; // value.key.toLowerCase().replaceAll(" ", "_")
+                                                            let fieldValue = fields[key]; //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/start/Start.jsx b/src/component/start/Start.jsx
index 101fe4e..e940b7e 100644
--- a/src/component/start/Start.jsx
+++ b/src/component/start/Start.jsx
@@ -33,7 +33,7 @@ export default function Start(){
                         <div className="card-body pricing-content">
                             <div className="pricing-content-card">
                                 <h5>Start with</h5>
-                                <h2 className="text-primary pt-3" >Personal Website</h2>
+                                <h2 className="text-primary pt-3" ><a href="/product/A000001">Personal Website</a></h2>
                                 <ul className="py-2">
                                     <li>post jobs</li>
                                     <li>advanced instructors search</li>
@@ -41,7 +41,7 @@ export default function Start(){
                                     <li>post events</li>
                                     <li>cancel any time</li>
                                 </ul>
-                                <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
+                                <div className="pt-2"><a href="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
                             </div>
                         </div>
                     </div>
@@ -52,7 +52,7 @@ export default function Start(){
                         <div className="card-body pricing-content">
                             <div className="pricing-content-card">
                                 <h5>Start with</h5>
-                                <h2 className="text-primary pt-3">Business Website</h2>
+                                <h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
                                 <ul className="py-2">
                                     <li>post jobs</li>
                                     <li>advanced instructors search</li>
@@ -60,7 +60,7 @@ export default function Start(){
                                     <li>post events</li>
                                     <li>cancel any time</li>
                                 </ul>
-                                <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
+                                <div className="pt-2"><a href="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
                             </div>
                         </div>
                     </div>