From f72bc3387110243c03705e77304b541914bce673 Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Tue, 30 Jul 2024 15:04:56 +0200
Subject: [PATCH] implementing snapshots

---
 dashboard/app.vue                             |   8 +-
 dashboard/components/CVerticalNavigation.vue  |  24 +++-
 dashboard/components/DatePicker.vue           |  63 +++++++++++
 .../components/dialog/CreateSnapshot.vue      |  89 +++++++++++++++
 dashboard/composables/useCustomDialog.ts      |  27 ++++-
 dashboard/package.json                        |   4 +-
 dashboard/pages/report.vue                    |   6 +-
 dashboard/pnpm-lock.yaml                      | 106 ++++++++++++++----
 dashboard/tailwind.config.js                  |  42 +++++++
 9 files changed, 338 insertions(+), 31 deletions(-)
 create mode 100644 dashboard/components/DatePicker.vue
 create mode 100644 dashboard/components/dialog/CreateSnapshot.vue

diff --git a/dashboard/app.vue b/dashboard/app.vue
index b37898e..826da4b 100644
--- a/dashboard/app.vue
+++ b/dashboard/app.vue
@@ -8,7 +8,7 @@ const debugMode = process.dev;
 
 const { alerts, closeAlert } = useAlert();
 
-const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDialog();
+const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dialogClosable } = useCustomDialog();
 </script>
 
 <template>
@@ -45,9 +45,9 @@ const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDial
     </div>
 
     <div v-if="showDialog"
-      class="custom-dialog flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 w-full h-full z-[100] backdrop-blur-[2px] bg-black/50">
-      <div class="bg-menu w-full h-full rounded-xl relative">
-        <div class="flex justify-end absolute z-[100] right-8 top-8">
+      class="custom-dialog w-full h-full flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 z-[100] backdrop-blur-[2px] bg-black/50">
+      <div :style="dialogStyle" class="bg-lyx-widget rounded-xl relative outline outline-1 outline-lyx-widget-lighter">
+        <div v-if="dialogClosable" class="flex justify-end absolute z-[100] right-8 top-8">
           <i @click="closeDialog()" class="fas fa-close text-[1.6rem] hover:text-gray-500 cursor-pointer"></i>
         </div>
         <div class="flex items-center justify-center w-full h-full p-4">
diff --git a/dashboard/components/CVerticalNavigation.vue b/dashboard/components/CVerticalNavigation.vue
index 0a1bd08..c4bdce6 100644
--- a/dashboard/components/CVerticalNavigation.vue
+++ b/dashboard/components/CVerticalNavigation.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-
+import CreateSnapshot from './dialog/CreateSnapshot.vue';
 
 export type Entry = {
     label: string,
@@ -36,6 +36,17 @@ const snapshotsItems = computed(() => {
     return snapshots.value as any[];
 })
 
+
+const { openDialogEx } = useCustomDialog();
+
+function openSnapshotDialog() {
+    openDialogEx(CreateSnapshot, {
+        width: "20rem",
+        height: "16rem",
+        closable: false
+    });
+}
+
 </script>
 
 <template>
@@ -59,7 +70,16 @@ const snapshotsItems = computed(() => {
 
             <div class="px-4 w-full flex-col">
 
-                <div class="poppins text-[.8rem] mb-2 px-2"> Snapshots </div>
+                <div class="flex mb-2 px-2 items-center justify-between">
+                    <div class="poppins text-[.8rem]">
+                        Snapshots
+                    </div>
+                    <div @click="openSnapshotDialog()"
+                        class="poppins text-[.8rem] px-2 rounded-lg outline outline-[2px] outline-lyx-widget-lighter cursor-pointer hover:bg-lyx-widget-lighter">
+                        <i class="far fa-plus"></i>
+                        Add
+                    </div>
+                </div>
 
                 <USelectMenu class="w-full" v-model="snapshot" :options="snapshotsItems">
                     <template #label>
diff --git a/dashboard/components/DatePicker.vue b/dashboard/components/DatePicker.vue
new file mode 100644
index 0000000..1d44d14
--- /dev/null
+++ b/dashboard/components/DatePicker.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = {
+  transparent: true,
+  borderless: true,
+  color: 'primary',
+  'is-dark': { selector: 'html', darkClass: 'dark' },
+  'first-day-of-week': 2,
+}
+</script>
+
+<template>
+  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
+  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
+</template>
+
+<style>
+:root {
+  --vc-gray-50: rgb(var(--color-gray-50));
+  --vc-gray-100: rgb(var(--color-gray-100));
+  --vc-gray-200: rgb(var(--color-gray-200));
+  --vc-gray-300: rgb(var(--color-gray-300));
+  --vc-gray-400: rgb(var(--color-gray-400));
+  --vc-gray-500: rgb(var(--color-gray-500));
+  --vc-gray-600: rgb(var(--color-gray-600));
+  --vc-gray-700: rgb(var(--color-gray-700));
+  --vc-gray-800: rgb(var(--color-gray-800));
+  --vc-gray-900: rgb(var(--color-gray-900));
+}
+
+.vc-primary {
+  --vc-accent-50: rgb(var(--color-primary-50));
+  --vc-accent-100: rgb(var(--color-primary-100));
+  --vc-accent-200: rgb(var(--color-primary-200));
+  --vc-accent-300: rgb(var(--color-primary-300));
+  --vc-accent-400: rgb(var(--color-primary-400));
+  --vc-accent-500: rgb(var(--color-primary-500));
+  --vc-accent-600: rgb(var(--color-primary-600));
+  --vc-accent-700: rgb(var(--color-primary-700));
+  --vc-accent-800: rgb(var(--color-primary-800));
+  --vc-accent-900: rgb(var(--color-primary-900));
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/components/dialog/CreateSnapshot.vue b/dashboard/components/dialog/CreateSnapshot.vue
new file mode 100644
index 0000000..bbeb855
--- /dev/null
+++ b/dashboard/components/dialog/CreateSnapshot.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+
+const { closeDialog } = useCustomDialog();
+
+import { sub, format, isSameDay, type Duration } from 'date-fns'
+
+const ranges = [
+    { label: 'Last 7 days', duration: { days: 7 } },
+    { label: 'Last 14 days', duration: { days: 14 } },
+    { label: 'Last 30 days', duration: { days: 30 } },
+    { label: 'Last 3 months', duration: { months: 3 } },
+    { label: 'Last 6 months', duration: { months: 6 } },
+    { label: 'Last year', duration: { years: 1 } }
+]
+const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })
+
+function isRangeSelected(duration: Duration) {
+    return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
+}
+
+function selectRange(duration: Duration) {
+    selected.value = { start: sub(new Date(), duration), end: new Date() }
+}
+
+const currentColor = ref<string>("");
+
+const colorpicker = ref<HTMLInputElement | null>(null);
+
+function showColorPicker() {
+    colorpicker.value?.click();
+}
+
+function onColorChange() {
+    currentColor.value = colorpicker.value?.value || '#000000';
+}
+
+</script>
+
+<template>
+    <div class="w-full h-full flex  flex-col">
+
+        <div class="poppins text-center">
+            Create a snapshot
+        </div>
+
+        <div class="mt-10 flex items-center gap-2">
+            <div :style="`background-color: ${currentColor};`" @click="showColorPicker" class="w-6 h-6 rounded-full aspect-[1/1] relative">
+                <input @input="onColorChange" ref="colorpicker" class="relative w-0 h-0 z-[-100]" type="color">
+            </div>
+            <div class="grow">
+                <input placeholder="Snapshot name" class="px-4 py-2 w-full rounded-lg bg-lyx-widget-light" type="text">
+            </div>
+        </div>
+
+        <div class="mt-4 justify-center flex w-full">
+
+            <UPopover :popper="{ placement: 'bottom' }">
+                <UButton icon="i-heroicons-calendar-days-20-solid">
+                    {{ selected.start.toLocaleDateString() }} - {{ selected.end.toLocaleDateString() }}
+                </UButton>
+                <template #panel="{ close }">
+                    <div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
+                        <div class="hidden sm:flex flex-col py-4">
+                            <UButton v-for="(range, index) in ranges" :key="index" :label="range.label" color="gray"
+                                variant="ghost" class="rounded-none px-6"
+                                :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
+                                truncate @click="selectRange(range.duration)" />
+                        </div>
+
+                        <DatePicker v-model="selected" @close="close" />
+                    </div>
+                </template>
+            </UPopover>
+
+
+        </div>
+
+        <div class="grow"></div>
+        <div class="flex items-center justify-around">
+            <div @click="closeDialog()">
+                Cancel
+            </div>
+            <div @click="closeDialog()">
+                Confirm
+            </div>
+        </div>
+
+    </div>
+</template>
\ No newline at end of file
diff --git a/dashboard/composables/useCustomDialog.ts b/dashboard/composables/useCustomDialog.ts
index e3692dd..0a2ea20 100644
--- a/dashboard/composables/useCustomDialog.ts
+++ b/dashboard/composables/useCustomDialog.ts
@@ -4,17 +4,42 @@ import type { Component } from "vue";
 const showDialog = ref<boolean>(false);
 const dialogParams = ref<any>({});
 const dialogComponent = ref<Component>();
+const dialogWidth = ref<string>("100%");
+const dialogHeight = ref<string>("100%");
+const dialogClosable = ref<boolean>(true);
 
 function closeDialog() {
     showDialog.value = false;
 }
 
+export type CustomDialogOptions = {
+    params?: any,
+    width?: string,
+    height?: string,
+    closable?: boolean
+}
+
+function openDialogEx(component: Component, options?: CustomDialogOptions) {
+    dialogComponent.value = component;
+    dialogParams.value = options?.params || {};
+    showDialog.value = true;
+    dialogWidth.value = options?.width || '100%';
+    dialogHeight.value = options?.height || '100%';
+    dialogClosable.value = options?.closable ?? true;
+}
+
 function openDialog(component: Component, params: any) {
     dialogComponent.value = component;
     dialogParams.value = params;
     showDialog.value = true;
+    dialogWidth.value = '100%';
+    dialogHeight.value = '100%';
 }
 
+const dialogStyle = computed(() => {
+    return `width: ${dialogWidth.value}; height: ${dialogHeight.value}`;
+});
+
 export function useCustomDialog() {
-    return { showDialog, closeDialog, openDialog, dialogParams, dialogComponent };
+    return { showDialog, openDialogEx, closeDialog, openDialog, dialogParams, dialogComponent, dialogStyle, dialogClosable };
 }
\ No newline at end of file
diff --git a/dashboard/package.json b/dashboard/package.json
index cbec412..34a9757 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -10,11 +10,12 @@
     "postinstall": "nuxt prepare",
     "test": "vitest",
     "docker-build": "docker build -t litlyx-dashboard -f Dockerfile ../",
-		"docker-inspect": "docker run -it litlyx-dashboard sh"
+    "docker-inspect": "docker run -it litlyx-dashboard sh"
   },
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.12.0",
     "chart.js": "^3.9.1",
+    "date-fns": "^3.6.0",
     "dayjs": "^1.11.11",
     "google-auth-library": "^9.9.0",
     "jsonwebtoken": "^9.0.2",
@@ -29,6 +30,7 @@
     "redis": "^4.6.13",
     "sass": "^1.75.0",
     "stripe": "^15.8.0",
+    "v-calendar": "^3.1.2",
     "vue": "^3.4.21",
     "vue-chart-3": "^3.1.8",
     "vue-router": "^4.3.0"
diff --git a/dashboard/pages/report.vue b/dashboard/pages/report.vue
index bafd2bc..b49fd60 100644
--- a/dashboard/pages/report.vue
+++ b/dashboard/pages/report.vue
@@ -31,7 +31,9 @@ async function generatePDF() {
 
     <div class="home w-full h-full px-10 lg:px-0 overflow-y-auto pb-[12rem] md:pb-0">
 
-        <div class="flex flex-col items-center justify-center mt-20 gap-20">
+        <DialogCreateSnapshot></DialogCreateSnapshot>
+
+        <!-- <div class="flex flex-col items-center justify-center mt-20 gap-20">
 
             <div class="flex flex-col items-center justify-center gap-10">
                 <div class="poppins text-[2.4rem] font-bold text-text">
@@ -84,7 +86,7 @@ async function generatePDF() {
 
 
 
-        </div>
+        </div> -->
 
     </div>
 
diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml
index 2f36c4d..6ec10fa 100644
--- a/dashboard/pnpm-lock.yaml
+++ b/dashboard/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       chart.js:
         specifier: ^3.9.1
         version: 3.9.1
+      date-fns:
+        specifier: ^3.6.0
+        version: 3.6.0
       dayjs:
         specifier: ^1.11.11
         version: 1.11.11
@@ -56,6 +59,9 @@ importers:
       stripe:
         specifier: ^15.8.0
         version: 15.8.0
+      v-calendar:
+        specifier: ^3.1.2
+        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.4.27(typescript@5.4.2))
       vue:
         specifier: ^3.4.21
         version: 3.4.27(typescript@5.4.2)
@@ -1125,6 +1131,9 @@ packages:
   '@types/jsonwebtoken@9.0.6':
     resolution: {integrity: sha512-/5hndP5dCjloafCXns6SZyESp3Ldq7YjH3zwzwczYnjxIT0Fqzk5ROSYVGfFyczIue7IUEj8hkvLbPoLQ18vQw==}
 
+  '@types/lodash@4.17.7':
+    resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
+
   '@types/node-fetch@2.6.11':
     resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==}
 
@@ -1140,6 +1149,9 @@ packages:
   '@types/pdfkit@0.13.4':
     resolution: {integrity: sha512-ixGNDHYJCCKuamY305wbfYSphZ2WPe8FPkjn8oF4fHV+PgPV4V+hecPh2VOS2h4RNtpSB3zQcR4sCpNvvrEb1A==}
 
+  '@types/resize-observer-browser@0.1.11':
+    resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -1373,20 +1385,20 @@ packages:
   '@vue/reactivity@3.4.27':
     resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==}
 
-  '@vue/reactivity@3.4.28':
-    resolution: {integrity: sha512-B5uvZK0ArgBMkjK8RA9l5XP+PuQ/x99oqrcHRc78wa0pWyDje5X/isGihuiuSr0nFZTA5guoy78sJ6J8XxZv1A==}
+  '@vue/reactivity@3.4.34':
+    resolution: {integrity: sha512-ua+Lo+wBRlBEX9TtgPOShE2JwIO7p6BTZ7t1KZVPoaBRfqbC7N3c8Mpzicx173fXxx5VXeU6ykiHo7WgLzJQDA==}
 
   '@vue/runtime-core@3.4.27':
     resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==}
 
-  '@vue/runtime-core@3.4.28':
-    resolution: {integrity: sha512-Corp5aAn5cm9h2cse6w5vRlnlfpy8hBRrsgCzHSoUohStlbqBXvI/uopPVkCivPCgY4fJZhXOufYYJ3DXzpN/w==}
+  '@vue/runtime-core@3.4.34':
+    resolution: {integrity: sha512-PXhkiRPwcPGJ1BnyBZFI96GfInCVskd0HPNIAZn7i3YOmLbtbTZpB7/kDTwC1W7IqdGPkTVC63IS7J2nZs4Ebg==}
 
   '@vue/runtime-dom@3.4.27':
     resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==}
 
-  '@vue/runtime-dom@3.4.28':
-    resolution: {integrity: sha512-y9lDMMFf2Y5GpYdE8+IuavVl95D1GY1Zp8jU1vZhQ3Z4ga3f0Ym+XxRhcFtqaQAm9u82GwB7zDpBxafWDRq4pw==}
+  '@vue/runtime-dom@3.4.34':
+    resolution: {integrity: sha512-dXqIe+RqFAK2Euak4UsvbIupalrhc67OuQKpD7HJ3W2fv8jlqvI7szfBCsAEcE8o/wyNpkloxB6J8viuF/E3gw==}
 
   '@vue/server-renderer@3.4.27':
     resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
@@ -1396,8 +1408,8 @@ packages:
   '@vue/shared@3.4.27':
     resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
 
-  '@vue/shared@3.4.28':
-    resolution: {integrity: sha512-2b+Vuv5ichZQZPmRJfniHQkBSNigmRsRkr17bkYqBFy3J88T4lB7dRbAX/rx8qr9v0cr8Adg6yP872xhxGmh0w==}
+  '@vue/shared@3.4.34':
+    resolution: {integrity: sha512-x5LmiRLpRsd9KTjAB8MPKf0CDPMcuItjP0gbNqFCIgL1I8iYp4zglhj9w9FPCdIbHG2M91RVeIbArFfFTz9I3A==}
 
   '@vueuse/components@10.10.0':
     resolution: {integrity: sha512-HiA10NQ9HJAGnju+8ZK4TyA8LIc0a6BnJmVWDa/k+TRhaYCVacSDU04k0BQ2otV+gghUDdwu98upf6TDRXpoeg==}
@@ -1965,6 +1977,18 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  date-fns-tz@2.0.1:
+    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
+    peerDependencies:
+      date-fns: 2.x
+
+  date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+
+  date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+
   dayjs@1.11.11:
     resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
 
@@ -4533,6 +4557,12 @@ packages:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true
 
+  v-calendar@3.1.2:
+    resolution: {integrity: sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      vue: ^3.2.0
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -4729,6 +4759,11 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-screen-utils@1.0.0-beta.13:
+    resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
+    peerDependencies:
+      vue: ^3.2.0
+
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
@@ -6168,6 +6203,8 @@ snapshots:
     dependencies:
       '@types/node': 20.12.12
 
+  '@types/lodash@4.17.7': {}
+
   '@types/node-fetch@2.6.11':
     dependencies:
       '@types/node': 18.19.33
@@ -6189,6 +6226,8 @@ snapshots:
     dependencies:
       '@types/node': 20.12.12
 
+  '@types/resize-observer-browser@0.1.11': {}
+
   '@types/resolve@1.20.2': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -6614,7 +6653,7 @@ snapshots:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
       '@vue/compiler-dom': 3.4.27
-      '@vue/shared': 3.4.28
+      '@vue/shared': 3.4.34
       computeds: 0.0.1
       minimatch: 9.0.4
       muggle-string: 0.3.1
@@ -6627,19 +6666,19 @@ snapshots:
     dependencies:
       '@vue/shared': 3.4.27
 
-  '@vue/reactivity@3.4.28':
+  '@vue/reactivity@3.4.34':
     dependencies:
-      '@vue/shared': 3.4.28
+      '@vue/shared': 3.4.34
 
   '@vue/runtime-core@3.4.27':
     dependencies:
       '@vue/reactivity': 3.4.27
       '@vue/shared': 3.4.27
 
-  '@vue/runtime-core@3.4.28':
+  '@vue/runtime-core@3.4.34':
     dependencies:
-      '@vue/reactivity': 3.4.28
-      '@vue/shared': 3.4.28
+      '@vue/reactivity': 3.4.34
+      '@vue/shared': 3.4.34
 
   '@vue/runtime-dom@3.4.27':
     dependencies:
@@ -6647,11 +6686,11 @@ snapshots:
       '@vue/shared': 3.4.27
       csstype: 3.1.3
 
-  '@vue/runtime-dom@3.4.28':
+  '@vue/runtime-dom@3.4.34':
     dependencies:
-      '@vue/reactivity': 3.4.28
-      '@vue/runtime-core': 3.4.28
-      '@vue/shared': 3.4.28
+      '@vue/reactivity': 3.4.34
+      '@vue/runtime-core': 3.4.34
+      '@vue/shared': 3.4.34
       csstype: 3.1.3
 
   '@vue/server-renderer@3.4.27(vue@3.4.27(typescript@5.4.2))':
@@ -6662,7 +6701,7 @@ snapshots:
 
   '@vue/shared@3.4.27': {}
 
-  '@vue/shared@3.4.28': {}
+  '@vue/shared@3.4.34': {}
 
   '@vueuse/components@10.10.0(vue@3.4.27(typescript@5.4.2))':
     dependencies:
@@ -7244,6 +7283,16 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  date-fns-tz@2.0.1(date-fns@2.30.0):
+    dependencies:
+      date-fns: 2.30.0
+
+  date-fns@2.30.0:
+    dependencies:
+      '@babel/runtime': 7.24.6
+
+  date-fns@3.6.0: {}
+
   dayjs@1.11.11: {}
 
   db0@0.1.4: {}
@@ -10163,6 +10212,17 @@ snapshots:
 
   uuid@9.0.1: {}
 
+  v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.4.27(typescript@5.4.2)):
+    dependencies:
+      '@popperjs/core': 2.11.8
+      '@types/lodash': 4.17.7
+      '@types/resize-observer-browser': 0.1.11
+      date-fns: 2.30.0
+      date-fns-tz: 2.0.1(date-fns@2.30.0)
+      lodash: 4.17.21
+      vue: 3.4.27(typescript@5.4.2)
+      vue-screen-utils: 1.0.0-beta.13(vue@3.4.27(typescript@5.4.2))
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -10340,8 +10400,8 @@ snapshots:
 
   vue-chart-3@3.1.8(chart.js@3.9.1)(vue@3.4.27(typescript@5.4.2)):
     dependencies:
-      '@vue/runtime-core': 3.4.28
-      '@vue/runtime-dom': 3.4.28
+      '@vue/runtime-core': 3.4.34
+      '@vue/runtime-dom': 3.4.34
       chart.js: 3.9.1
       csstype: 3.1.3
       lodash-es: 4.17.21
@@ -10366,6 +10426,10 @@ snapshots:
       '@vue/devtools-api': 6.6.1
       vue: 3.4.27(typescript@5.4.2)
 
+  vue-screen-utils@1.0.0-beta.13(vue@3.4.27(typescript@5.4.2)):
+    dependencies:
+      vue: 3.4.27(typescript@5.4.2)
+
   vue-template-compiler@2.7.16:
     dependencies:
       de-indent: 1.0.2
diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
index ce41b78..44361a5 100644
--- a/dashboard/tailwind.config.js
+++ b/dashboard/tailwind.config.js
@@ -29,6 +29,48 @@ module.exports = {
                     light: '#2c91ed',
                     sub: '#99A7F1',
                 },
+                "lyx-primary": {
+                    DEFAULT: '#5680F8',
+                    dark: '#222A42',
+                    hover: '#2A3450'
+                },
+                "lyx-text": {
+                    DEFAULT: '#FFFFFF',
+                    dark: '#D4D4D4',
+                    darker: '#6A6A6A'
+                },
+                "lyx-widget": {
+                    DEFAULT: '#151515',
+                    light: '#1E1E1E',
+                    lighter: '#262626'
+                },
+                "lyx-background": {
+                    DEFAULT: '#0A0A0A',
+                    light: '#121212',
+                    lighter: '#212121'
+                },
+                "lyx-danger": {
+                    DEFAULT: '#F86956',
+                    dark: '#4A2D29'
+                },
+                "lyx-chart": {
+                    purple: {
+                        DEFAULT: '#5655D7',
+                        dark: '#282844'
+                    },
+                    green: {
+                        DEFAULT: '#1D9B86',
+                        dark: '#213734'
+                    },
+                    cyan: {
+                        DEFAULT: '#4ABDE8',
+                        dark: '#273D48'
+                    },
+                    orange: {
+                        DEFAULT: '#F56524',
+                        dark: '#492C22'
+                    }
+                }
             }
         },
     },