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/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/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>
+                                                {/* <h4 className="text-white mb-0 font-600">{userDetails?.username}</h4> */}
-                                                <p className="text-white font-600">{userDetails.email}</p>
+                                                <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

@@ -37,14 +37,14 @@ export default function ProductActive({productData}){
     }
 
     const templateData = {
-        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: '/assets/img/file-icon/svg.png', active: '' },
+        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: '/assets/img/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: '/assets/img/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: '/assets/img/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: '/assets/img/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: '/assets/img/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: '/assets/img/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: '/assets/img/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 = {

src/component/product/settingsTab/SiteTemplateSelector.jsx

@@ -1,4 +1,5 @@
 import React, {memo} from 'react'
+import getImage from "../../../utils/getImage";
 
 const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
         console.log("Page data == ", data)
@@ -13,7 +14,7 @@ const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
                                         <div className="card-body">
                                             <div className="text-center p-2">
                                                 <div className="mb-2">
-                                                    <img src={value.banner} alt={value.title} />
+                                                    <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>

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 />
+}