update sidebar dan dshboard

components/layout/SideBar.vue

@@ -9,21 +9,17 @@
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
-    <v-list-item class="py-4 px-2 sidebar-logo-container" :class="{ 'text-center': rail }">
+    <v-list-item class="py-4 px-3 sidebar-logo-container" :class="{ 'text-center': rail }">
       <NuxtLink to="/dashboard" class="sidebar-logo-link">
         <div class="d-flex align-center sidebar-logo-wrapper" :class="{ 'justify-center': rail }">
-          <NuxtImg
-            src="/logo mini.png"
-            alt="Antrean Logo"
-            class="sidebar-logo"
-            :class="{ 'sidebar-logo-rail': rail }"
-            width="48"
-            height="48"
-            format="webp"
-            quality="90"
-            loading="eager"
-            preload
-          />
+          <div class="sidebar-logo-image-wrapper">
+            <img
+              src="/love logo biru small.png"
+              alt="Antrean Logo"
+              class="sidebar-logo"
+              :class="{ 'sidebar-logo-rail': rail }"
+            />
+          </div>
           <v-list-item-title
             v-if="!rail"
             class="ml-2 text-h6 font-weight-bold sidebar-title"
@@ -337,12 +333,18 @@ onMounted(async () => {
 }
 
 .sidebar-logo-container {
+  overflow: visible !important;
+  
+  :deep(.v-list-item__content) {
+    overflow: visible !important;
+  }
+  
   &.text-center {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
   }
 }
 
@@ -353,6 +355,7 @@ onMounted(async () => {
   width: 100%;
   cursor: pointer;
   transition: opacity 0.2s ease;
+  overflow: visible;
   
   &:hover {
     opacity: 0.8;
@@ -365,6 +368,7 @@ onMounted(async () => {
 
 .sidebar-logo-wrapper {
   width: 100%;
+  overflow: visible;
   
   &.justify-center {
     justify-content: center;
@@ -373,13 +377,25 @@ onMounted(async () => {
   }
 }
 
+.sidebar-logo-image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  padding: 2px;
+  overflow: visible;
+}
+
 .sidebar-logo {
-  width: 48px;
-  height: 48px;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
   object-fit: contain;
   display: block;
   cursor: pointer;
   transition: transform 0.2s ease;
+  flex-shrink: 0;
   
   &:hover {
     transform: scale(1.05);
@@ -388,8 +404,8 @@ onMounted(async () => {
 
 .sidebar-logo-rail {
   margin: 0 auto;
-  width: 100%;
-  max-width: 48px;
+  width: auto;
+  max-width: none;
 }
 
 .sidebar-title {

nuxt.config.ts

@@ -20,43 +20,31 @@ export default defineNuxtConfig({
     }
   },
 
-  modules: [
-    // "@nuxt/content",
-    "@nuxt/eslint",
-    "@nuxt/fonts",
-    "@nuxt/icon",
-    "@nuxt/image",
-    "@nuxt/scripts",
-    "@nuxt/test-utils",
-    "@nuxt/ui",
-    "@pinia/nuxt",
-    "@vesp/nuxt-fontawesome",
-    "@nuxtjs/google-fonts",
-    async (_options, nuxt) => {
-      nuxt.hooks.hook("vite:extendConfig", async (config) => {
-        // @ts-expect-error
-        config.plugins.push(vuetify({ autoImport: true }));
-        
-        // // Add HTTPS plugin
-        // try {
-        //   // @ts-ignore
-        //   const { default: basicSsl } = await import('@vitejs/plugin-basic-ssl');
-        //   // @ts-expect-error
-        //   config.plugins.push(basicSsl());
-        //   // @ts-expect-error
-        //   config.server = config.server || {};
-        //   // @ts-expect-error
-        //   config.server.https = true;
-        //   // @ts-expect-error
-        //   config.server.host = '10.10.150.175';
-        //   // @ts-expect-error
-        //   config.server.port = 3001;
-        // } catch (e) {
-        //   console.warn('Failed to load HTTPS plugin:', e);
-        // }
-      });
-    },
-  ],
+  modules: [// "@nuxt/content",
+  "@nuxt/eslint", "@nuxt/fonts", "@nuxt/icon", "@nuxt/image", "@nuxt/scripts", "@nuxt/test-utils", "@nuxt/ui", "@pinia/nuxt", "@vesp/nuxt-fontawesome", "@nuxtjs/google-fonts", async (_options, nuxt) => {
+    nuxt.hooks.hook("vite:extendConfig", async (config) => {
+      // @ts-expect-error
+      config.plugins.push(vuetify({ autoImport: true }));
+      
+      // // Add HTTPS plugin
+      // try {
+      //   // @ts-ignore
+      //   const { default: basicSsl } = await import('@vitejs/plugin-basic-ssl');
+      //   // @ts-expect-error
+      //   config.plugins.push(basicSsl());
+      //   // @ts-expect-error
+      //   config.server = config.server || {};
+      //   // @ts-expect-error
+      //   config.server.https = true;
+      //   // @ts-expect-error
+      //   config.server.host = '10.10.150.175';
+      //   // @ts-expect-error
+      //   config.server.port = 3001;
+      // } catch (e) {
+      //   console.warn('Failed to load HTTPS plugin:', e);
+      // }
+    });
+  }, "nuxt-charts"],
 
   fontawesome: {
     icons: {

package.json

@@ -32,6 +32,7 @@
     "eslint": "^9.32.0",
     "html5-qrcode": "^2.3.8",
     "nuxt": "^3.17.7",
+    "nuxt-charts": "^2.0.0",
     "nuxt-qrcode": "^0.4.8",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.7.1",