fix menu drop down bug

src/AppRouters.jsx

@@ -19,6 +19,8 @@ import ProductPage from './views/ProductPage'
 import SocketIOContextProvider from './component/context/SocketIOContext';
 import CSignupPage from './views/CSignupPage';
 import HelpPage from './views/HelpPage';
+import SubscriptionPage from './views/SubscriptionPage';
+
 
 function AppRouters() {
   return (
@@ -44,6 +46,7 @@ function AppRouters() {
               <Route path={siteLinks.comments} element={<CommentsPage />} />
               <Route path={siteLinks.contacts} element={<ContactsPage />} />
               <Route path={siteLinks.user} element={<UserPage />} />
+              <Route path={siteLinks.subscription} element={<SubscriptionPage />} />
               <Route path={siteLinks.calendar} element={<CalendarPage />} />
               <Route path={siteLinks.settings} element={<SettingsPage />} />
               <Route path={siteLinks.help} element={<HelpPage />} />

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/ProductsURL.jsx

@@ -60,7 +60,8 @@ export default function ProductsURL() {
                             </thead>
                             <tbody>
                                 {urlData && urlData.map((item, index) => {
-                                    let statusColor = item?.status === 'Preparing' ? 'badge-success-inverse' : item?.status === 'Active' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
+                                    let statusColor = item?.status === '1' ? 'badge-success-inverse' : item?.status === '6' ? 'badge-success-inverse' : item?.status == '7' ? 'badge-danger-inverse' : 'badge-info-inverse'
+                                    let statusText = item?.status === '1' ? 'Preparing' : item?.status === '6' ? 'Provisioning' : item?.status == '7' ? 'Ready' : 'Started'
                                     let productUrl = '/product/'+ item?.product_id
                                     let externalUrl= item?.url_protocol +"://"+ item?.internal_url;
                                     return (
@@ -70,7 +71,7 @@ export default function ProductsURL() {
                                                 <a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> -  {item?.description}
                                             </td>
 
-                                            <td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
+                                            <td><span className={`badge ${statusColor}`}>{statusText}</span></td>
                                             {/* <td><a className="mr-3" href={productUrl}><i className="fe fe-edit"></i></a></td> */}
                                             <td>
                                                 <a className="mr-3" href={productUrl}>
@@ -81,16 +82,6 @@ export default function ProductsURL() {
                                     )
                                 })}
                             </tbody>
-                            <tfoot>
-                            <tr>
-                                <th>#</th>
-                                <th>Name</th>
-                                <th>Price</th>
-                                <th>In stock</th>
-                                <th>Status</th>
-                                <th>Action</th>
-                            </tr>
-                            </tfoot>
                         </table>
                     }
                     </div>

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>
-                                        <strong className={`${textColor} m-t-5`}><i
-                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
+                                        <h5 className="text-muted mb-0"><a href={item?.link}>{item?.description}</a></h5>
                                     </div>
                                 </div>
                                 <div className="apexchart-wrapper">

src/component/layout/layoutcom/UserHeader.jsx

@@ -77,12 +77,12 @@ export default function UserHeader(){
                                     <img src={getImage('profile-pic-circle.png')} alt="avtar-img" />
                                     <span className="bg-success user-status"></span>
                                 </a>
-                                <div ref={nav_menu} className="dropdown-menu animated fadeIn">
+                                <div ref={nav_menu} onClick={toggleMenu} className="dropdown-menu animated fadeIn">
                                     <div className="bg-gradient px-4 py-3">
                                         <div className="d-flex align-items-center justify-content-between">
                                             <div className="mr-1">
-                                                <h4 className="text-white mb-0 font-600">{userDetails?.firstname} {userDetails?.lastname}</h4>
-                                                <p className="text-white font-600">{userDetails.email}</p>
+                                                {/* <h4 className="text-white mb-0 font-600">{userDetails?.username}</h4> */}
+                                                <p className="text-white font-600">{userDetails.username}</p>
                                             </div>
                                             <a href="#" onClick={logout} className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
                                                data-placement="top" title="" data-original-title="Logout"> <i

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_description: { name: 'Main Banner Text', controls: 'TEXTAREA', active: true },
+        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 },
+    }
+
+    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: '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 settingsObject = {
-        settings: { title: 'Settings', controls: 'settings', active: 'active show' , data: dataFields},
-        home_tab: { title: 'Home Page', controls: 'home', active: '' , data: homeFields},
-        footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
-        about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
-        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
-        social_tab: { title: 'Socials', controls: 'social', active: '', data: socialFields },
-        template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
-        color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
+        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: {} },
+        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 [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">
-                <form>
+            <div className="p-0" style={{ minHeight: '500px'}}>
+
+                <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,33 @@
+import React, {memo} from 'react'
+import getImage from "../../../utils/getImage";
+
+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={getImage(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

src/component/subscription/Subscription.jsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+
+export default function Subscription() {
+    return (
+        <>
+            <BreadcrumbComBS title='Home' paths={['Dashboard', 'Subscription']} />
+
+
+
+            <div className="row">
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+
+
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>Premium</h5>
+                                <h2 className="text-primary pt-3">$150</h2>
+                                <p className="text-primary pb-3">/ Monthly</p>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <li>post events</li>
+                                    <li>cancel any time</li>
+                                </ul>
+                                <div className="pt-2"><a href="javascript:void(0)" className="btn btn-primary btn-round btn-sm">go premium</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>basic</h5>
+                                <h2 className="text-primary pt-3">$130</h2>
+                                <p className="text-primary pb-3">/ Monthly</p>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <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>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col-xl-3 col-md-6">
+                    <div className="card card-statistics text-center py-3">
+                        <div className="card-body pricing-content">
+                            <div className="pricing-content-card">
+                                <h5>starter</h5>
+                                <h2 className="text-primary pt-3">$100</h2>
+                                <p className="text-primary pb-3">/ Monthly</p>
+                                <ul className="py-2">
+                                    <li>post jobs</li>
+                                    <li>advanced instructors search</li>
+                                    <li>invite candidates</li>
+                                    <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>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
+
+        </>
+    )
+}

src/css/style.scss

@@ -91,6 +91,10 @@ $btn-bg: #8e54e9;
 $btn-border: #8e54e9;
 $event-padding: 10px;
 
+.billing{
+  background-color: darkgoldenrod;
+  color: white;
+}
 .extraProductCard{
   background-color: aliceblue;
   border-radius: 5px;

src/links/siteLinks.js

@@ -7,6 +7,7 @@ const siteLinks = {
     contacts: '/contacts',
     comments: '/comments',
     reports: '/reports',
+    subscription: '/subscription',
     user: '/user',
     calendar: '/calendar',
     settings: '/settings',

src/views/SubscriptionPage.jsx

@@ -0,0 +1,7 @@
+
+import Subscription from '../component/subscription/Subscription';
+
+
+export default function SubscriptionPage(){
+    return <Subscription />
+}