From d82eb440e8fda386821c89e1bdca990d21820a49 Mon Sep 17 00:00:00 2001
From: Martin Araneda <martix.araneda@gmail.com>
Date: Mon, 30 Jan 2023 12:48:37 -0300
Subject: [PATCH] basic chart menu finished

---
 frontend/package.json                  |   1 +
 frontend/src/components/TheWelcome.vue |  17 +-
 frontend/src/layout/AppConfig.vue      | 295 ---------------
 frontend/src/layout/AppLayout.vue      | 108 +++---
 frontend/src/layout/AppMenu.vue        |  39 +-
 frontend/src/main.js                   |   9 +-
 frontend/src/router/index.js           |  15 +-
 frontend/src/views/Landing.vue         | 484 +++++++++++++++++++++++++
 frontend/src/views/menu/Chart.vue      | 106 ++++++
 frontend/yarn.lock                     |  12 +
 10 files changed, 703 insertions(+), 383 deletions(-)
 delete mode 100644 frontend/src/layout/AppConfig.vue
 create mode 100644 frontend/src/views/Landing.vue
 create mode 100644 frontend/src/views/menu/Chart.vue

diff --git a/frontend/package.json b/frontend/package.json
index 4d2373c..71dc037 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "chart.js": "^4.2.0",
     "pinia": "^2.0.28",
     "primeflex": "^3.3.0",
     "primeicons": "^6.0.1",
diff --git a/frontend/src/components/TheWelcome.vue b/frontend/src/components/TheWelcome.vue
index 24fda7c..a887d34 100644
--- a/frontend/src/components/TheWelcome.vue
+++ b/frontend/src/components/TheWelcome.vue
@@ -1,14 +1,14 @@
 <script setup>
-    import WelcomeItem from './WelcomeItem.vue';
-    import DocumentationIcon from './icons/IconDocumentation.vue';
-    import ToolingIcon from './icons/IconTooling.vue';
-    import EcosystemIcon from './icons/IconEcosystem.vue';
-    import CommunityIcon from './icons/IconCommunity.vue';
-    import SupportIcon from './icons/IconSupport.vue';
+import WelcomeItem from './WelcomeItem.vue';
+import DocumentationIcon from './icons/IconDocumentation.vue';
+import ToolingIcon from './icons/IconTooling.vue';
+import EcosystemIcon from './icons/IconEcosystem.vue';
+import CommunityIcon from './icons/IconCommunity.vue';
+import SupportIcon from './icons/IconSupport.vue';
 </script>
 
 <template>
-    <div data-testid="greetings"><h1>You did it!</h1></div>
+    <!-- <div data-testid="greetings"><h1>You did it!</h1></div>
 
     <WelcomeItem>
         <template #icon>
@@ -174,5 +174,6 @@
             rel="noopener"
             >becoming a sponsor</a
         >.
-    </WelcomeItem>
+    </WelcomeItem> -->
+
 </template>
diff --git a/frontend/src/layout/AppConfig.vue b/frontend/src/layout/AppConfig.vue
deleted file mode 100644
index 292ad79..0000000
--- a/frontend/src/layout/AppConfig.vue
+++ /dev/null
@@ -1,295 +0,0 @@
-<script setup>
-    import RadioButton from 'primevue/radiobutton';
-    import Button from 'primevue/button';
-    import InputSwitch from 'primevue/inputswitch';
-    import Sidebar from 'primevue/sidebar';
-
-    import { ref } from 'vue';
-    import { useLayout } from '@/layout/composables/layout';
-
-    defineProps({
-        simple: {
-            type: Boolean,
-            default: false
-        }
-    });
-    const scales = ref([12, 13, 14, 15, 16]);
-    const visible = ref(false);
-
-    const { changeThemeSettings, setScale, layoutConfig } = useLayout();
-
-    const onConfigButtonClick = () => {
-        visible.value = !visible.value;
-    };
-    const onChangeTheme = (theme, mode) => {
-        const elementId = 'theme-css';
-        const linkElement = document.getElementById(elementId);
-        const cloneLinkElement = linkElement.cloneNode(true);
-        const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
-        cloneLinkElement.setAttribute('id', elementId + '-clone');
-        cloneLinkElement.setAttribute('href', newThemeUrl);
-        cloneLinkElement.addEventListener('load', () => {
-            linkElement.remove();
-            cloneLinkElement.setAttribute('id', elementId);
-            changeThemeSettings(theme, mode === 'dark');
-        });
-        linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-    };
-    const decrementScale = () => {
-        setScale(layoutConfig.scale.value - 1);
-        applyScale();
-    };
-    const incrementScale = () => {
-        setScale(layoutConfig.scale.value + 1);
-        applyScale();
-    };
-    const applyScale = () => {
-        document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
-    };
-</script>
-
-<template>
-    <button
-        class="layout-config-button p-link"
-        type="button"
-        @click="onConfigButtonClick()"
-    >
-        <i class="pi pi-cog"></i>
-    </button>
-
-    <Sidebar
-        v-model:visible="visible"
-        position="right"
-        :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'"
-        class="layout-config-sidebar w-20rem"
-    >
-        <h5>Scale</h5>
-        <div class="flex align-items-center">
-            <Button
-                icon="pi pi-minus"
-                type="button"
-                @click="decrementScale()"
-                class="p-button-text p-button-rounded w-2rem h-2rem mr-2"
-                :disabled="layoutConfig.scale.value === scales[0]"
-            ></Button>
-            <div class="flex gap-2 align-items-center">
-                <i
-                    class="pi pi-circle-fill text-300"
-                    v-for="s in scales"
-                    :key="s"
-                    :class="{ 'text-primary-500': s === layoutConfig.scale.value }"
-                ></i>
-            </div>
-            <Button
-                icon="pi pi-plus"
-                type="button"
-                pButton
-                @click="incrementScale()"
-                class="p-button-text p-button-rounded w-2rem h-2rem ml-2"
-                :disabled="layoutConfig.scale.value === scales[scales.length - 1]"
-            ></Button>
-        </div>
-
-        <template v-if="!simple">
-            <h5>Menu Type</h5>
-            <div class="flex">
-                <div class="field-radiobutton flex-1">
-                    <RadioButton
-                        name="menuMode"
-                        value="static"
-                        v-model="layoutConfig.menuMode.value"
-                        inputId="mode1"
-                    ></RadioButton>
-                    <label for="mode1">Static</label>
-                </div>
-
-                <div class="field-radiobutton flex-1">
-                    <RadioButton
-                        name="menuMode"
-                        value="overlay"
-                        v-model="layoutConfig.menuMode.value"
-                        inputId="mode2"
-                    ></RadioButton>
-                    <label for="mode2">Overlay</label>
-                </div>
-            </div>
-        </template>
-
-        <template v-if="!simple">
-            <h5>Input Style</h5>
-            <div class="flex">
-                <div class="field-radiobutton flex-1">
-                    <RadioButton
-                        name="inputStyle"
-                        value="outlined"
-                        v-model="layoutConfig.inputStyle.value"
-                        inputId="outlined_input"
-                    ></RadioButton>
-                    <label for="outlined_input">Outlined</label>
-                </div>
-                <div class="field-radiobutton flex-1">
-                    <RadioButton
-                        name="inputStyle"
-                        value="filled"
-                        v-model="layoutConfig.inputStyle.value"
-                        inputId="filled_input"
-                    ></RadioButton>
-                    <label for="filled_input">Filled</label>
-                </div>
-            </div>
-
-            <h5>Ripple Effect</h5>
-            <InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
-        </template>
-
-        <h5>PrimeOne Design - 2021</h5>
-        <div class="grid">
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('saga-blue', 'light')"
-                >
-                    <img
-                        src="/layout/images/themes/saga-blue.png"
-                        class="w-2rem h-2rem"
-                        alt="Saga Blue"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('saga-green', 'light')"
-                >
-                    <img
-                        src="/layout/images/themes/saga-green.png"
-                        class="w-2rem h-2rem"
-                        alt="Saga Green"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('saga-orange', 'light')"
-                >
-                    <img
-                        src="/layout/images/themes/saga-orange.png"
-                        class="w-2rem h-2rem"
-                        alt="Saga Orange"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('saga-purple', 'light')"
-                >
-                    <img
-                        src="/layout/images/themes/saga-purple.png"
-                        class="w-2rem h-2rem"
-                        alt="Saga Purple"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('vela-blue', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/vela-blue.png"
-                        class="w-2rem h-2rem"
-                        alt="Vela Blue"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('vela-green', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/vela-green.png"
-                        class="w-2rem h-2rem"
-                        alt="Vela Green"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('vela-orange', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/vela-orange.png"
-                        class="w-2rem h-2rem"
-                        alt="Vela Orange"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('vela-purple', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/vela-purple.png"
-                        class="w-2rem h-2rem"
-                        alt="Vela Purple"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('arya-blue', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/arya-blue.png"
-                        class="w-2rem h-2rem"
-                        alt="Arya Blue"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('arya-green', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/arya-green.png"
-                        class="w-2rem h-2rem"
-                        alt="Arya Green"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('arya-orange', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/arya-orange.png"
-                        class="w-2rem h-2rem"
-                        alt="Arya Orange"
-                    />
-                </button>
-            </div>
-            <div class="col-3">
-                <button
-                    class="p-link w-2rem h-2rem"
-                    @click="onChangeTheme('arya-purple', 'dark')"
-                >
-                    <img
-                        src="/layout/images/themes/arya-purple.png"
-                        class="w-2rem h-2rem"
-                        alt="Arya Purple"
-                    />
-                </button>
-            </div>
-        </div>
-    </Sidebar>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/frontend/src/layout/AppLayout.vue b/frontend/src/layout/AppLayout.vue
index 4fbaad1..c6ab286 100644
--- a/frontend/src/layout/AppLayout.vue
+++ b/frontend/src/layout/AppLayout.vue
@@ -1,67 +1,63 @@
 <script setup>
-    import { computed, watch, ref } from 'vue';
-    import AppTopbar from './AppTopbar.vue';
-    import AppFooter from './AppFooter.vue';
-    import AppSidebar from './AppSidebar.vue';
-    import AppConfig from './AppConfig.vue';
-    import { useLayout } from '@/layout/composables/layout';
+import { computed, watch, ref } from 'vue';
+import AppTopbar from './AppTopbar.vue';
+import AppFooter from './AppFooter.vue';
+import AppSidebar from './AppSidebar.vue';
+import { useLayout } from '@/layout/composables/layout';
 
-    const { layoutConfig, layoutState, isSidebarActive } = useLayout();
+const { layoutConfig, layoutState, isSidebarActive } = useLayout();
 
-    const outsideClickListener = ref(null);
+const outsideClickListener = ref(null);
 
-    watch(isSidebarActive, (newVal) => {
-        if (newVal) {
-            bindOutsideClickListener();
-        } else {
-            unbindOutsideClickListener();
-        }
-    });
+watch(isSidebarActive, (newVal) => {
+    if (newVal) {
+        bindOutsideClickListener();
+    } else {
+        unbindOutsideClickListener();
+    }
+});
 
-    const containerClass = computed(() => {
-        return {
-            'layout-theme-light': layoutConfig.darkTheme.value === 'light',
-            'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
-            'layout-overlay': layoutConfig.menuMode.value === 'overlay',
-            'layout-static': layoutConfig.menuMode.value === 'static',
-            'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
-            'layout-overlay-active': layoutState.overlayMenuActive.value,
-            'layout-mobile-active': layoutState.staticMenuMobileActive.value,
-            'p-input-filled': layoutConfig.inputStyle.value === 'filled',
-            'p-ripple-disabled': !layoutConfig.ripple.value
+const containerClass = computed(() => {
+    return {
+        'layout-theme-light': layoutConfig.darkTheme.value === 'light',
+        'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
+        'layout-overlay': layoutConfig.menuMode.value === 'overlay',
+        'layout-static': layoutConfig.menuMode.value === 'static',
+        'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
+        'layout-overlay-active': layoutState.overlayMenuActive.value,
+        'layout-mobile-active': layoutState.staticMenuMobileActive.value,
+        'p-input-filled': layoutConfig.inputStyle.value === 'filled',
+        'p-ripple-disabled': !layoutConfig.ripple.value
+    };
+});
+const bindOutsideClickListener = () => {
+    if (!outsideClickListener.value) {
+        outsideClickListener.value = (event) => {
+            if (isOutsideClicked(event)) {
+                layoutState.overlayMenuActive.value = false;
+                layoutState.staticMenuMobileActive.value = false;
+                layoutState.menuHoverActive.value = false;
+            }
         };
-    });
-    const bindOutsideClickListener = () => {
-        if (!outsideClickListener.value) {
-            outsideClickListener.value = (event) => {
-                if (isOutsideClicked(event)) {
-                    layoutState.overlayMenuActive.value = false;
-                    layoutState.staticMenuMobileActive.value = false;
-                    layoutState.menuHoverActive.value = false;
-                }
-            };
-            document.addEventListener('click', outsideClickListener.value);
-        }
-    };
-    const unbindOutsideClickListener = () => {
-        if (outsideClickListener.value) {
-            document.removeEventListener('click', outsideClickListener);
-            outsideClickListener.value = null;
-        }
-    };
-    const isOutsideClicked = (event) => {
-        const sidebarEl = document.querySelector('.layout-sidebar');
-        const topbarEl = document.querySelector('.layout-menu-button');
+        document.addEventListener('click', outsideClickListener.value);
+    }
+};
+const unbindOutsideClickListener = () => {
+    if (outsideClickListener.value) {
+        document.removeEventListener('click', outsideClickListener);
+        outsideClickListener.value = null;
+    }
+};
+const isOutsideClicked = (event) => {
+    const sidebarEl = document.querySelector('.layout-sidebar');
+    const topbarEl = document.querySelector('.layout-menu-button');
 
-        return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
-    };
+    return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
+};
 </script>
 
 <template>
-    <div
-        class="layout-wrapper"
-        :class="containerClass"
-    >
+    <div class="layout-wrapper" :class="containerClass">
         <app-topbar></app-topbar>
         <div class="layout-sidebar">
             <app-sidebar></app-sidebar>
@@ -77,4 +73,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>
diff --git a/frontend/src/layout/AppMenu.vue b/frontend/src/layout/AppMenu.vue
index 896e77d..3a8e448 100644
--- a/frontend/src/layout/AppMenu.vue
+++ b/frontend/src/layout/AppMenu.vue
@@ -1,33 +1,28 @@
 <script setup>
-    import { ref } from 'vue';
+import { ref } from 'vue';
 
-    import AppMenuItem from './AppMenuItem.vue';
+import AppMenuItem from './AppMenuItem.vue';
 
-    const model = ref([
-        {
-            label: 'Home',
-            items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
-        }
-    ]);
+const model = ref([
+    {
+        label: 'Home',
+        items: [
+            { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/home' },
+            { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/charts' }]
+
+    }
+]);
 </script>
 
 <template>
     <ul class="layout-menu">
-        <template
-            v-for="(item, i) in model"
-            :key="item"
-        >
-            <app-menu-item
-                v-if="!item.separator"
-                :item="item"
-                :index="i"
-            ></app-menu-item>
-            <li
-                v-if="item.separator"
-                class="menu-separator"
-            ></li>
+        <template v-for="(item, i) in model" :key="item">
+            <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
+            <li v-if="item.separator" class="menu-separator"></li>
         </template>
     </ul>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index feb3ed8..1bb02b1 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -4,8 +4,10 @@ import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
 
-import PrimeVue from 'primevue/config';
 
+import PrimeVue from 'primevue/config';
+import Chart from 'primevue/chart';
+import Dropdown from 'primevue/dropdown';
 import '@/assets/styles.scss';
 
 const app = createApp(App);
@@ -15,4 +17,9 @@ app.use(router);
 
 app.use(PrimeVue, { ripple: true });
 
+app.component('Chart', Chart);
+app.component('Dropdown', Dropdown);
+
 app.mount('#app');
+
+
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index e93315e..a00fdce 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,25 +1,36 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import AppLayout from '@/layout/AppLayout.vue';
 import HomeView from '../views/HomeView.vue';
+import Landing from '../views/Landing.vue';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
         {
             path: '/',
+            component: Landing
+        },
+        {
+            path: '/home',
             component: AppLayout,
             children: [
                 {
-                    path: '/',
-                    name: 'home',
+                    path: '/home',
+                    name: 'Home',
                     component: HomeView
                 },
+                {
+                    path: '/charts',
+                    name: 'charts',
+                    component: () => import('@/views/menu/Chart.vue')
+                },
                 {
                     path: '/about',
                     name: 'about',
                     // route level code-splitting
                     // this generates a separate chunk (About.[hash].js) for this route
                     // which is lazy-loaded when the route is visited.
+
                     component: () => import('../views/AboutView.vue')
                 }
             ]
diff --git a/frontend/src/views/Landing.vue b/frontend/src/views/Landing.vue
new file mode 100644
index 0000000..043ed4a
--- /dev/null
+++ b/frontend/src/views/Landing.vue
@@ -0,0 +1,484 @@
+<script setup>
+import { useLayout } from '@/layout/composables/layout';
+import { computed } from 'vue';
+
+const { layoutConfig, contextPath } = useLayout();
+
+const smoothScroll = (id) => {
+    document.querySelector(id).scrollIntoView({
+        behavior: 'smooth'
+    });
+};
+
+const logoUrl = computed(() => {
+    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+});
+</script>
+
+<template>
+    <div class="surface-0 flex justify-content-center">
+        <div id="home" class="landing-wrapper overflow-hidden">
+            <div
+                class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3">
+                <a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
+                        class="mr-0 lg:mr-2" /><span
+                        class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a>
+                <a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple
+                    v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+                    <i class="pi pi-bars text-4xl"></i>
+                </a>
+                <div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2"
+                    style="top: 120px">
+                    <ul
+                        class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
+                        <li>
+                            <a @click="smoothScroll('#hero')"
+                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                                <span>Home</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a @click="smoothScroll('#features')"
+                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                                <span>Features</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a @click="smoothScroll('#highlights')"
+                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                                <span>Highlights</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a @click="smoothScroll('#pricing')"
+                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                                <span>Pricing</span>
+                            </a>
+                        </li>
+                    </ul>
+                    <div
+                        class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
+                        <Button label="Login"
+                            class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
+                        <Button label="Register"
+                            class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
+                    </div>
+                </div>
+            </div>
+
+            <div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
+                style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)">
+                <div class="mx-4 md:mx-8 mt-0 md:mt-4">
+                    <h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem
+                            integer</span>eget magna fermentum</h1>
+                    <p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed
+                        cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
+                    <Button label="Get Started"
+                        class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
+                </div>
+                <div class="flex justify-content-center md:justify-content-end">
+                    <img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto" />
+                </div>
+            </div>
+
+            <div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
+                <div class="grid justify-content-center">
+                    <div class="col-12 text-center mt-8 mb-4">
+                        <h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
+                        <span class="text-600 text-2xl">Placerat in egestas erat...</span>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-yellow-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Easy to Use</h5>
+                                <span class="text-600">Posuere morbi leo urna molestie.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-cyan-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Fresh Design</h5>
+                                <span class="text-600">Semper risus in hendrerit.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-indigo-200"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Well Documented</h5>
+                                <span class="text-600">Non arcu risus quis varius quam quisque.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Responsive Layout</h5>
+                                <span class="text-600">Nulla malesuada pellentesque elit.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-orange-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Clean Code</h5>
+                                <span class="text-600">Condimentum lacinia quis vel eros.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-pink-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Dark Mode</h5>
+                                <span class="text-600">Convallis tellus id interdum velit laoreet.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-teal-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Ready to Use</h5>
+                                <span class="text-600">Mauris sit amet massa vitae.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-blue-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Modern Practices</h5>
+                                <span class="text-600">Elementum nibh tellus molestie nunc non.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
+                        <div
+                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
+                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
+                                <div class="flex align-items-center justify-content-center bg-purple-200 mb-3"
+                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
+                                    <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
+                                </div>
+                                <h5 class="mb-2 text-900">Privacy</h5>
+                                <span class="text-600">Neque egestas congue quisque.</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 mt-8 mb-8 p-2 md:p-8"
+                        style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)">
+                        <div
+                            class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
+                            <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
+                            <span class="text-gray-600 text-2xl">Peak Interactive</span>
+                            <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4"
+                                style="max-width: 800px">
+                                “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                                nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                                officia deserunt mollit anim id est laborum.”
+                            </p>
+                            <img src="/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
+                <div class="text-center">
+                    <h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
+                    <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
+                </div>
+
+                <div class="grid mt-8 pb-2 md:pb-8">
+                    <div class="flex justify-content-center col-12 lg:col-6 bg-purple-100 p-0 flex-order-1 lg:flex-order-0"
+                        style="border-radius: 8px">
+                        <img src="/demo/images/landing/mockup.svg" class="w-11" alt="mockup mobile" />
+                    </div>
+
+                    <div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
+                        <div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end"
+                            style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
+                        </div>
+                        <h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
+                        <span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Lectus arcu
+                            bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna
+                            sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
+                    </div>
+                </div>
+
+                <div class="grid my-8 pt-2 md:pt-8">
+                    <div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
+                        <div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start"
+                            style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
+                            <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
+                        </div>
+                        <h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
+                        <span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">Adipiscing
+                            commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero.
+                            Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod
+                            elementum nisi.</span>
+                    </div>
+
+                    <div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0"
+                        style="border-radius: 8px">
+                        <img src="/demo/images/landing/mockup-desktop.svg" class="w-11" alt="mockup" />
+                    </div>
+                </div>
+            </div>
+
+            <div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
+                <div class="text-center">
+                    <h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
+                    <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
+                </div>
+
+                <div class="grid justify-content-between mt-8 md:mt-0">
+                    <div class="col-12 lg:col-4 p-0 md:p-3">
+                        <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
+                            style="border-radius: 10px">
+                            <h3 class="text-900 text-center my-5">Free</h3>
+                            <img src="/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" />
+                            <div class="my-5 text-center">
+                                <span class="text-5xl font-bold mr-2 text-900">$0</span>
+                                <span class="text-600">per month</span>
+                                <Button label="Get Started"
+                                    class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
+                            </div>
+                            <Divider class="w-full bg-surface-200"></Divider>
+                            <ul class="my-5 list-none p-0 flex text-900 flex-column">
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Responsive Layout</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Unlimited Push Messages</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">50 Support Ticket</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Free Shipping</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
+                        <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
+                            style="border-radius: 10px">
+                            <h3 class="text-900 text-center my-5">Startup</h3>
+                            <img src="/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
+                            <div class="my-5 text-center">
+                                <span class="text-5xl font-bold mr-2 text-900">$1</span>
+                                <span class="text-600">per month</span>
+                                <Button label="Try Free"
+                                    class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
+                            </div>
+                            <Divider class="w-full bg-surface-200"></Divider>
+                            <ul class="my-5 list-none p-0 flex text-900 flex-column">
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Responsive Layout</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Unlimited Push Messages</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">50 Support Ticket</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Free Shipping</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
+                        <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
+                            style="border-radius: 10px">
+                            <h3 class="text-900 text-center my-5">Enterprise</h3>
+                            <img src="/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
+                            <div class="my-5 text-center">
+                                <span class="text-5xl font-bold mr-2 text-900">$999</span>
+                                <span class="text-600">per month</span>
+                                <Button label="Get a Quote"
+                                    class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
+                            </div>
+                            <Divider class="w-full bg-surface-200"></Divider>
+                            <ul class="my-5 list-none p-0 flex text-900 flex-column">
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Responsive Layout</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Unlimited Push Messages</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">50 Support Ticket</span>
+                                </li>
+                                <li class="py-2">
+                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
+                                    <span class="text-xl line-height-3">Free Shipping</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
+                <div class="grid justify-content-between">
+                    <div class="col-12 md:col-2" style="margin-top: -1.5rem">
+                        <a @click="smoothScroll('#home')"
+                            class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
+                            <img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
+                            <h4 class="font-medium text-3xl text-900">SAKAI</h4>
+                        </a>
+                    </div>
+
+                    <div class="col-12 md:col-10 lg:col-7">
+                        <div class="grid text-center md:text-left">
+                            <div class="col-12 md:col-3">
+                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor
+                                    Relations</a>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
+                                <a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
+                            </div>
+
+                            <div class="col-12 md:col-3 mt-4 md:mt-0">
+                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
+                                <a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
+                            </div>
+
+                            <div class="col-12 md:col-3 mt-4 md:mt-0">
+                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img
+                                        src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
+                                <a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
+                            </div>
+
+                            <div class="col-12 md:col-3 mt-4 md:mt-0">
+                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
+                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
+                                <a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<!-- <style scoped>
+#hero {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #eeefaf 0%, #c3e3fa 100%);
+    height: 700px;
+    overflow: hidden;
+}
+
+@media screen and (min-width: 768px) {
+    #hero {
+        -webkit-clip-path: ellipse(150% 87% at 93% 13%);
+        clip-path: ellipse(150% 87% at 93% 13%);
+        height: 530px;
+    }
+}
+
+@media screen and (min-width: 1300px) {
+    #hero > img {
+        position: absolute;
+    }
+
+    #hero > div > p {
+        max-width: 450px;
+    }
+}
+
+@media screen and (max-width: 1300px) {
+    #hero {
+        height: 600px;
+    }
+
+    #hero > img {
+        position: static;
+        transform: scale(1);
+        margin-left: auto;
+    }
+
+    #hero > div {
+        width: 100%;
+    }
+
+    #hero > div > p {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+</style> -->
diff --git a/frontend/src/views/menu/Chart.vue b/frontend/src/views/menu/Chart.vue
new file mode 100644
index 0000000..5becfec
--- /dev/null
+++ b/frontend/src/views/menu/Chart.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
+
+const { layoutConfig } = useLayout();
+let documentStyle = getComputedStyle(document.documentElement);
+let textColor = documentStyle.getPropertyValue('--text-color');
+let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+const lineData = ref(null);
+const lineOptions = ref(null);
+
+
+const setColorOptions = () => {
+    documentStyle = getComputedStyle(document.documentElement);
+    textColor = documentStyle.getPropertyValue('--text-color');
+    textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+    surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+};
+const setChart = () => {
+    lineData.value = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+            {
+                label: 'First Dataset',
+                data: [65, 59, 80, 81, 56, 55, 40],
+                fill: false,
+                backgroundColor: documentStyle.getPropertyValue('--primary-500'),
+                borderColor: documentStyle.getPropertyValue('--primary-500'),
+                tension: 0.4
+            },
+            {
+                label: 'Second Dataset',
+                data: [28, 48, 40, 19, 86, 27, 90],
+                fill: false,
+                backgroundColor: documentStyle.getPropertyValue('--primary-200'),
+                borderColor: documentStyle.getPropertyValue('--primary-200'),
+                tension: 0.4
+            }
+        ]
+    };
+
+    lineOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    fontColor: textColor
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: textColorSecondary
+                },
+                grid: {
+                    color: surfaceBorder,
+                    drawBorder: false
+                }
+            },
+            y: {
+                ticks: {
+                    color: textColorSecondary
+                },
+                grid: {
+                    color: surfaceBorder,
+                    drawBorder: false
+                }
+            }
+        }
+    };
+}
+watch(
+    layoutConfig.theme,
+    () => {
+        setColorOptions();
+        setChart();
+    },
+    { immediate: true }
+);
+
+</script>
+
+<template>
+    <div class="card">
+        <div class="grid p-fluid">
+            <div class="col-12 xl:col-2">
+                <span class="p-float-label">
+                    <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
+                    <label for="dropdown">Dropdown</label>
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card">
+        <div class="grid p-fluid">
+            <div class="col-12 xl:col-6">
+                <div class="card">
+                    <h5>Linear Chart</h5>
+                    <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8b78812..976b9d9 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -151,6 +151,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -456,6 +461,13 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chart.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.0.tgz#dd281b2ce890bff32f3e249cf2972a1e74bc032c"
+  integrity sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"