From efb2686d876a00070c16b8b484c8f6799ad4328a Mon Sep 17 00:00:00 2001
From: Robin Malik <8790561+robinmalik@users.noreply.github.com>
Date: Fri, 7 Mar 2025 18:23:36 +0000
Subject: [PATCH] Add VSP to sidebar

---
 src/_nav.js                          |  54 ++++++++---
 src/components/AppSidebar.js         |  27 +++---
 src/views/widgets/WidgetsDropdown.js | 130 ++++++++++++++-------------
 3 files changed, 126 insertions(+), 85 deletions(-)

diff --git a/src/_nav.js b/src/_nav.js
index db78c49bd..8aa4aec9a 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import CIcon from '@coreui/icons-react'
-import {
+import
+{
   cilBell,
   cilCalculator,
   cilChartPie,
@@ -20,7 +21,7 @@ const _nav = [
     component: CNavItem,
     name: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilSpeedometer } customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -34,13 +35,40 @@ const _nav = [
     component: CNavItem,
     name: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilDrop } customClassName="nav-icon" />,
   },
   {
     component: CNavItem,
     name: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilPencil } customClassName="nav-icon" />,
+  },
+  {
+    component: CNavTitle,
+    name: 'Services',
+  },
+  {
+    component: CNavGroup,
+    name: 'Virtual Server Platform',
+    to: '/services/virtual-server-platform',
+    icon: <CIcon icon={ cilPuzzle } customClassName="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: 'Admin Tasks',
+        to: '/services/virtual-server-platform/admin-tasks',
+      },
+      {
+        component: CNavItem,
+        name: 'Reports',
+        to: '/services/virtual-server-platform/reports',
+      },
+      {
+        component: CNavItem,
+        name: 'Snapshots',
+        to: '/services/virtual-server-platform/snapshots',
+      }
+    ],
   },
   {
     component: CNavTitle,
@@ -50,7 +78,7 @@ const _nav = [
     component: CNavGroup,
     name: 'Base',
     to: '/base',
-    icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilPuzzle } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -133,7 +161,7 @@ const _nav = [
     component: CNavGroup,
     name: 'Buttons',
     to: '/buttons',
-    icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilCursor } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -155,7 +183,7 @@ const _nav = [
   {
     component: CNavGroup,
     name: 'Forms',
-    icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilNotes } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -203,12 +231,12 @@ const _nav = [
     component: CNavItem,
     name: 'Charts',
     to: '/charts',
-    icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilChartPie } customClassName="nav-icon" />,
   },
   {
     component: CNavGroup,
     name: 'Icons',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilStar } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -234,7 +262,7 @@ const _nav = [
   {
     component: CNavGroup,
     name: 'Notifications',
-    icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilBell } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -262,7 +290,7 @@ const _nav = [
     component: CNavItem,
     name: 'Widgets',
     to: '/widgets',
-    icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilCalculator } customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -275,7 +303,7 @@ const _nav = [
   {
     component: CNavGroup,
     name: 'Pages',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilStar } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -303,7 +331,7 @@ const _nav = [
     component: CNavItem,
     name: 'Docs',
     href: 'https://coreui.io/react/docs/templates/installation/',
-    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilDescription } customClassName="nav-icon" />,
   },
 ]
 
diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 021cb52c3..eef8b398e 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
-import {
+import
+{
   CCloseButton,
   CSidebar,
   CSidebarBrand,
@@ -19,7 +20,8 @@ import { sygnet } from 'src/assets/brand/sygnet'
 // sidebar nav config
 import navigation from '../_nav'
 
-const AppSidebar = () => {
+const AppSidebar = () =>
+{
   const dispatch = useDispatch()
   const unfoldable = useSelector((state) => state.sidebarUnfoldable)
   const sidebarShow = useSelector((state) => state.sidebarShow)
@@ -29,27 +31,30 @@ const AppSidebar = () => {
       className="border-end"
       colorScheme="dark"
       position="fixed"
-      unfoldable={unfoldable}
-      visible={sidebarShow}
-      onVisibleChange={(visible) => {
+      unfoldable={ unfoldable }
+      visible={ sidebarShow }
+      onVisibleChange={ (visible) =>
+      {
         dispatch({ type: 'set', sidebarShow: visible })
-      }}
+      } }
     >
       <CSidebarHeader className="border-bottom">
         <CSidebarBrand to="/">
-          <CIcon customClassName="sidebar-brand-full" icon={logo} height={32} />
-          <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
+          <CIcon customClassName="sidebar-brand-full" icon={ logo } height={ 32 } />
+          <CIcon customClassName="sidebar-brand-narrow" icon={ sygnet } height={ 32 } />
         </CSidebarBrand>
         <CCloseButton
           className="d-lg-none"
           dark
-          onClick={() => dispatch({ type: 'set', sidebarShow: false })}
+          onClick={ () => dispatch({ type: 'set', sidebarShow: false }) }
         />
       </CSidebarHeader>
-      <AppSidebarNav items={navigation} />
+
+      <AppSidebarNav items={ navigation } />
+
       <CSidebarFooter className="border-top d-none d-lg-flex">
         <CSidebarToggler
-          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+          onClick={ () => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable }) }
         />
       </CSidebarFooter>
     </CSidebar>
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index 85e2fc969..c7cc15fca 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -1,7 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 
-import {
+import
+{
   CRow,
   CCol,
   CDropdown,
@@ -15,46 +16,53 @@ import { CChartBar, CChartLine } from '@coreui/react-chartjs'
 import CIcon from '@coreui/icons-react'
 import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
 
-const WidgetsDropdown = (props) => {
+const WidgetsDropdown = (props) =>
+{
   const widgetChartRef1 = useRef(null)
   const widgetChartRef2 = useRef(null)
 
-  useEffect(() => {
-    document.documentElement.addEventListener('ColorSchemeChange', () => {
-      if (widgetChartRef1.current) {
-        setTimeout(() => {
-          widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
+  useEffect(() =>
+  {
+    document.documentElement.addEventListener('ColorSchemeChange', () =>
+    {
+      if(widgetChartRef1.current)
+      {
+        setTimeout(() =>
+        {
+          widgetChartRef1.current.data.datasets[ 0 ].pointBackgroundColor = getStyle('--cui-primary')
           widgetChartRef1.current.update()
         })
       }
 
-      if (widgetChartRef2.current) {
-        setTimeout(() => {
-          widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
+      if(widgetChartRef2.current)
+      {
+        setTimeout(() =>
+        {
+          widgetChartRef2.current.data.datasets[ 0 ].pointBackgroundColor = getStyle('--cui-info')
           widgetChartRef2.current.update()
         })
       }
     })
-  }, [widgetChartRef1, widgetChartRef2])
+  }, [ widgetChartRef1, widgetChartRef2 ])
 
   return (
-    <CRow className={props.className} xs={{ gutter: 4 }}>
-      <CCol sm={6} xl={4} xxl={3}>
+    <CRow className={ props.className } xs={ { gutter: 4 } }>
+      <CCol sm={ 6 } xl={ 4 } xxl={ 3 }>
         <CWidgetStatsA
           color="primary"
           value={
             <>
-              26K{' '}
+              26K{ ' ' }
               <span className="fs-6 fw-normal">
-                (-12.4% <CIcon icon={cilArrowBottom} />)
+                (-12.4% <CIcon icon={ cilArrowBottom } />)
               </span>
             </>
           }
           title="Users"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
+              <CDropdownToggle color="transparent" caret={ false } className="text-white p-0">
+                <CIcon icon={ cilOptions } />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -66,22 +74,22 @@ const WidgetsDropdown = (props) => {
           }
           chart={
             <CChartLine
-              ref={widgetChartRef1}
+              ref={ widgetChartRef1 }
               className="mt-3 mx-3"
-              style={{ height: '70px' }}
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+              style={ { height: '70px' } }
+              data={ {
+                labels: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' ],
                 datasets: [
                   {
                     label: 'My First dataset',
                     backgroundColor: 'transparent',
                     borderColor: 'rgba(255,255,255,.55)',
                     pointBackgroundColor: getStyle('--cui-primary'),
-                    data: [65, 59, 84, 84, 51, 55, 40],
+                    data: [ 65, 59, 84, 84, 51, 55, 40 ],
                   },
                 ],
-              }}
-              options={{
+              } }
+              options={ {
                 plugins: {
                   legend: {
                     display: false,
@@ -124,27 +132,27 @@ const WidgetsDropdown = (props) => {
                     hoverRadius: 4,
                   },
                 },
-              }}
+              } }
             />
           }
         />
       </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
+      <CCol sm={ 6 } xl={ 4 } xxl={ 3 }>
         <CWidgetStatsA
           color="info"
           value={
             <>
-              $6.200{' '}
+              $6.200{ ' ' }
               <span className="fs-6 fw-normal">
-                (40.9% <CIcon icon={cilArrowTop} />)
+                (40.9% <CIcon icon={ cilArrowTop } />)
               </span>
             </>
           }
           title="Income"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
+              <CDropdownToggle color="transparent" caret={ false } className="text-white p-0">
+                <CIcon icon={ cilOptions } />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -156,22 +164,22 @@ const WidgetsDropdown = (props) => {
           }
           chart={
             <CChartLine
-              ref={widgetChartRef2}
+              ref={ widgetChartRef2 }
               className="mt-3 mx-3"
-              style={{ height: '70px' }}
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+              style={ { height: '70px' } }
+              data={ {
+                labels: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' ],
                 datasets: [
                   {
                     label: 'My First dataset',
                     backgroundColor: 'transparent',
                     borderColor: 'rgba(255,255,255,.55)',
                     pointBackgroundColor: getStyle('--cui-info'),
-                    data: [1, 18, 9, 17, 34, 22, 11],
+                    data: [ 1, 18, 9, 17, 34, 22, 11 ],
                   },
                 ],
-              }}
-              options={{
+              } }
+              options={ {
                 plugins: {
                   legend: {
                     display: false,
@@ -213,27 +221,27 @@ const WidgetsDropdown = (props) => {
                     hoverRadius: 4,
                   },
                 },
-              }}
+              } }
             />
           }
         />
       </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
+      <CCol sm={ 6 } xl={ 4 } xxl={ 3 }>
         <CWidgetStatsA
           color="warning"
           value={
             <>
-              2.49%{' '}
+              2.49%{ ' ' }
               <span className="fs-6 fw-normal">
-                (84.7% <CIcon icon={cilArrowTop} />)
+                (84.7% <CIcon icon={ cilArrowTop } />)
               </span>
             </>
           }
           title="Conversion Rate"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
+              <CDropdownToggle color="transparent" caret={ false } className="text-white p-0">
+                <CIcon icon={ cilOptions } />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -246,20 +254,20 @@ const WidgetsDropdown = (props) => {
           chart={
             <CChartLine
               className="mt-3"
-              style={{ height: '70px' }}
-              data={{
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+              style={ { height: '70px' } }
+              data={ {
+                labels: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' ],
                 datasets: [
                   {
                     label: 'My First dataset',
                     backgroundColor: 'rgba(255,255,255,.2)',
                     borderColor: 'rgba(255,255,255,.55)',
-                    data: [78, 81, 80, 45, 34, 12, 40],
+                    data: [ 78, 81, 80, 45, 34, 12, 40 ],
                     fill: true,
                   },
                 ],
-              }}
-              options={{
+              } }
+              options={ {
                 plugins: {
                   legend: {
                     display: false,
@@ -285,27 +293,27 @@ const WidgetsDropdown = (props) => {
                     hoverRadius: 4,
                   },
                 },
-              }}
+              } }
             />
           }
         />
       </CCol>
-      <CCol sm={6} xl={4} xxl={3}>
+      <CCol sm={ 6 } xl={ 4 } xxl={ 3 }>
         <CWidgetStatsA
           color="danger"
           value={
             <>
-              44K{' '}
+              44K{ ' ' }
               <span className="fs-6 fw-normal">
-                (-23.6% <CIcon icon={cilArrowBottom} />)
+                (-23.6% <CIcon icon={ cilArrowBottom } />)
               </span>
             </>
           }
           title="Sessions"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
-                <CIcon icon={cilOptions} />
+              <CDropdownToggle color="transparent" caret={ false } className="text-white p-0">
+                <CIcon icon={ cilOptions } />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -318,8 +326,8 @@ const WidgetsDropdown = (props) => {
           chart={
             <CChartBar
               className="mt-3 mx-3"
-              style={{ height: '70px' }}
-              data={{
+              style={ { height: '70px' } }
+              data={ {
                 labels: [
                   'January',
                   'February',
@@ -343,12 +351,12 @@ const WidgetsDropdown = (props) => {
                     label: 'My First dataset',
                     backgroundColor: 'rgba(255,255,255,.2)',
                     borderColor: 'rgba(255,255,255,.55)',
-                    data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
+                    data: [ 78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82 ],
                     barPercentage: 0.6,
                   },
                 ],
-              }}
-              options={{
+              } }
+              options={ {
                 maintainAspectRatio: false,
                 plugins: {
                   legend: {
@@ -379,7 +387,7 @@ const WidgetsDropdown = (props) => {
                     },
                   },
                 },
-              }}
+              } }
             />
           }
         />