diff --git a/components/layout/SideBar.vue b/components/layout/SideBar.vue
index 1fec309..30ad326 100644
--- a/components/layout/SideBar.vue
+++ b/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 {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6c11532..51feaaa 100644
--- a/nuxt.config.ts
+++ b/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: {
diff --git a/package-lock.json b/package-lock.json
index 277b916..5d86bc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,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",
@@ -451,6 +452,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -711,6 +721,115 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/css": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.13.5.tgz",
+      "integrity": "sha512-wQdD0Xhkn3Qy2VNcIzbLP9MR8TafI0MJb7BEAXKp+w4+XqErksWR4OXomuDzPsN4InLdGhVe6EYcn2ZIUCpB8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@es-joy/jsdoccomment": {
       "version": "0.78.0",
       "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.78.0.tgz",
@@ -1897,6 +2016,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@kurkle/color": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
@@ -1918,6 +2043,45 @@
       "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
       "license": "MIT"
     },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "license": "ISC",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/geojson-rewind/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.3.tgz",
@@ -1939,6 +2103,42 @@
         "node": ">=18"
       }
     },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==",
+      "license": "ISC"
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.7.tgz",
+      "integrity": "sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@mdi/font": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
@@ -6057,6 +6257,295 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-collection": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.13.tgz",
+      "integrity": "sha512-v0Rgw3IZebRyamcwVmtTDCZ8OmQcj4siaYjNc7wGMZT7PmdSHawGsCOQMxyLvZ7lWjfohYLK0oXtilMOMgfY8A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-sankey": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
+      "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-shape": "^1"
+      }
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/dagre": {
+      "version": "0.7.53",
+      "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.53.tgz",
+      "integrity": "sha512-f4gkWqzPZvYmKhOsDnhq/R8mO4UMcKdxZo+i5SCkOU1wvGeHJeUXGIHeE9pnwGyPMDof1Vx5ZQo4nxpeg2TTVQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -6084,6 +6573,12 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -6099,6 +6594,32 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.6.tgz",
+      "integrity": "sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/mapbox__point-geometry": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
+      "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/mapbox__vector-tile": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
+      "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/mapbox__point-geometry": "*",
+        "@types/pbf": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -6124,18 +6645,103 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-path": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
       "integrity": "sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==",
       "license": "MIT"
     },
+    "node_modules/@types/pbf": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
+      "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==",
+      "license": "MIT"
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/supercluster": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-5.0.3.tgz",
+      "integrity": "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/three": {
+      "version": "0.135.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.135.0.tgz",
+      "integrity": "sha512-l7WLhIHjhHMtlpyTSltPPAKLpiMwgMD1hXHj59AVUpYRoZP7Fd9NNOSRSvZBCPLpTHPYojgQvSJCoza9zoL7bg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/topojson": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/@types/topojson/-/topojson-3.2.6.tgz",
+      "integrity": "sha512-ppfdlxjxofWJ66XdLgIlER/85RvpGyfOf8jrWf+3kVIjEatFxEZYD/Ea83jO672Xu1HRzd/ghwlbcZIUNHTskw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/topojson-client": "*",
+        "@types/topojson-server": "*",
+        "@types/topojson-simplify": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
+    "node_modules/@types/topojson-client": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@types/topojson-client/-/topojson-client-3.1.5.tgz",
+      "integrity": "sha512-C79rySTyPxnQNNguTZNI1Ct4D7IXgvyAs3p9HPecnl6mNrJ5+UhvGNYcZfpROYV2lMHI48kJPxwR+F9C6c7nmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
+    "node_modules/@types/topojson-server": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/topojson-server/-/topojson-server-3.0.4.tgz",
+      "integrity": "sha512-5+ieK8ePfP+K2VH6Vgs1VCt+fO1U8XZHj0UsF+NktaF0DavAo1q3IvCBXgokk/xmtvoPltSUs6vxuR/zMdOE1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
+    "node_modules/@types/topojson-simplify": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/topojson-simplify/-/topojson-simplify-3.0.3.tgz",
+      "integrity": "sha512-sBO5UZ0O2dB0bNwo0vut2yLHhj3neUGi9uL7/ROdm8Gs6dtt4jcB9OGDKr+M2isZwQM2RuzVmifnMZpxj4IGNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
+    "node_modules/@types/topojson-specification": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.5.tgz",
+      "integrity": "sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -6450,6 +7056,75 @@
       "integrity": "sha512-uKGyY8BuzN/a5gvzvA+3FVWo0+wUjgtfSdnmjtrOVwQCZPHpHDH2WRO3VZSOeluYrHoDCiXFffZXs8Dj1ULWtw==",
       "license": "MIT"
     },
+    "node_modules/@unovis/dagre-layout": {
+      "version": "0.8.8-2",
+      "resolved": "https://registry.npmjs.org/@unovis/dagre-layout/-/dagre-layout-0.8.8-2.tgz",
+      "integrity": "sha512-ZfDvfcYtzzhZhgKZty8XDi+zQIotfRqfNVF5M3dFQ9d9C5MTaRdbeBnPUkNrmlLJGgQ42HMOE2ajZLfm2VlRhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@unovis/graphlibrary": "^2.2.0-2",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/@unovis/graphlibrary": {
+      "version": "2.2.0-2",
+      "resolved": "https://registry.npmjs.org/@unovis/graphlibrary/-/graphlibrary-2.2.0-2.tgz",
+      "integrity": "sha512-HeEzpd/vDyWiIJt0rnh+2ICXUIuF2N0+Z9OJJiKg0DB+eFUcD+bk+9QPhYHwkFwfxdjDA9fHi1DZ/O/bbV58Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/@unovis/ts": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.6.2.tgz",
+      "integrity": "sha512-kSOWRiZsU4Kk1yuJSSaJs+zJCKNg3+2A0/6/7/y1Cu5uHggwGPeE3CzKaNOal/Hpc46bnZw2VLI23mY+gDFbeQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@emotion/css": "^11.7.1",
+        "@juggle/resize-observer": "^3.3.1",
+        "@types/d3": "^7.4.0",
+        "@types/d3-collection": "^1.0.10",
+        "@types/d3-sankey": "^0.11.2",
+        "@types/dagre": "^0.7.50",
+        "@types/geojson": "^7946.0.8",
+        "@types/leaflet": "1.7.6",
+        "@types/supercluster": "^5.0.2",
+        "@types/three": "^0.135.0",
+        "@types/throttle-debounce": "^5.0.0",
+        "@types/topojson": "^3.2.3",
+        "@types/topojson-client": "^3.0.0",
+        "@types/topojson-specification": "^1.0.2",
+        "@unovis/dagre-layout": "0.8.8-2",
+        "@unovis/graphlibrary": "2.2.0-2",
+        "d3": "^7.2.1",
+        "d3-collection": "^1.0.7",
+        "d3-geo-projection": "^4.0.0",
+        "d3-interpolate-path": "^2.2.3",
+        "d3-sankey": "^0.12.3",
+        "elkjs": "^0.10.0",
+        "geojson": "^0.5.0",
+        "leaflet": "1.7.1",
+        "maplibre-gl": "^2.1.9",
+        "striptags": "^3.2.0",
+        "supercluster": "^7.1.5",
+        "three": "^0.135.0",
+        "throttle-debounce": "^5.0.0",
+        "to-px": "^1.1.0",
+        "topojson-client": "^3.1.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@unovis/vue": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@unovis/vue/-/vue-1.6.2.tgz",
+      "integrity": "sha512-vFglLeiTnNk8VaCEjctAMQXi8Vi+dc217JLkbiIkOLNLXzOClv1ZLv7QjKplRHG+eq/DKC17WSBKINsjXuYbtQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@unovis/ts": "1.6.2",
+        "vue": "^3"
+      }
+    },
     "node_modules/@unrs/resolver-binding-android-arm-eabi": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
@@ -7832,6 +8507,21 @@
         }
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -8749,6 +9439,31 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -8875,6 +9590,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -9009,6 +9730,510 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
+      "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "d3-array": "1 - 3",
+        "d3-geo": "1.12.0 - 3"
+      },
+      "bin": {
+        "geo2svg": "bin/geo2svg.js",
+        "geograticule": "bin/geograticule.js",
+        "geoproject": "bin/geoproject.js",
+        "geoquantize": "bin/geoquantize.js",
+        "geostitch": "bin/geostitch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate-path": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.3.0.tgz",
+      "integrity": "sha512-tZYtGXxBmbgHsIc9Wms6LS5u4w6KbP8C09a4/ZYc4KLMYYqub57rRBUgpUr2CIarIrJEpdAWWxWQvofgaMpbKQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
@@ -9170,6 +10395,15 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/denque": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
@@ -9362,6 +10596,12 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "license": "MIT"
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "license": "ISC"
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -9380,6 +10620,12 @@
       "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
       "license": "ISC"
     },
+    "node_modules/elkjs": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.10.2.tgz",
+      "integrity": "sha512-Yx3ORtbAFrXelYkAy2g0eYyVY8QG0XEmGdQXmy0eithKKjbWRfl3Xe884lfkszfBF6UKyIy4LwfcZ3AZc8oxFw==",
+      "license": "EPL-2.0"
+    },
     "node_modules/embla-carousel": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
@@ -9582,6 +10828,21 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-ex/node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/error-stack-parser-es": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-1.0.5.tgz",
@@ -10459,6 +11720,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-8.0.0.tgz",
@@ -10642,6 +11909,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
+      "integrity": "sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
+      "license": "ISC"
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -10735,6 +12017,12 @@
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
       "license": "ISC"
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+      "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+      "license": "MIT"
+    },
     "node_modules/glob": {
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.0.tgz",
@@ -10794,6 +12082,38 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC"
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "16.5.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
@@ -11371,6 +12691,15 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ioredis": {
       "version": "5.9.1",
       "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.9.1.tgz",
@@ -11796,6 +13125,12 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-to-typescript-lite": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-to-typescript-lite/-/json-schema-to-typescript-lite-15.0.0.tgz",
@@ -11830,6 +13165,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/kdbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==",
+      "license": "ISC"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -11839,6 +13180,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -11921,6 +13271,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -12195,6 +13551,12 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/listhen": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.9.0.tgz",
@@ -12281,6 +13643,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.22",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.22.tgz",
+      "integrity": "sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -12380,6 +13748,39 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/maplibre-gl": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.4.0.tgz",
+      "integrity": "sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^2.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.5",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "@types/geojson": "^7946.0.10",
+        "@types/mapbox__point-geometry": "^0.1.2",
+        "@types/mapbox__vector-tile": "^1.3.0",
+        "@types/pbf": "^3.0.2",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.4",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.4.3",
+        "global-prefix": "^3.0.0",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^1.0.2",
+        "quickselect": "^2.0.0",
+        "supercluster": "^7.1.5",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -13416,6 +14817,12 @@
       "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
       "license": "MIT"
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
@@ -13867,6 +15274,17 @@
         }
       }
     },
+    "node_modules/nuxt-charts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nuxt-charts/-/nuxt-charts-2.0.0.tgz",
+      "integrity": "sha512-KoyJ36bYbyEDI/vx++CDMfCrsh/xcKCblw8zE0N6l3M/rSECARMpNUaOs9QS8xC+LgPACkEa8LEbBGv1i+NfsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@unovis/ts": "^1.6.2",
+        "@unovis/vue": "^1.6.2",
+        "vue-chrts": "2.0.0"
+      }
+    },
     "node_modules/nuxt-qrcode": {
       "version": "0.4.8",
       "resolved": "https://registry.npmjs.org/nuxt-qrcode/-/nuxt-qrcode-0.4.8.tgz",
@@ -14406,6 +15824,24 @@
         "parse-statements": "1.0.11"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-path": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.1.0.tgz",
@@ -14421,6 +15857,12 @@
       "integrity": "sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==",
       "license": "MIT"
     },
+    "node_modules/parse-unit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz",
+      "integrity": "sha512-hrqldJHokR3Qj88EIlV/kAyAi/G5R2+R56TBANxNMy0uPlYcttx0jnMW6Yx5KsKPSbC3KddM/7qQm3+0wEXKxg==",
+      "license": "MIT"
+    },
     "node_modules/parse-url": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-9.2.0.tgz",
@@ -14522,12 +15964,34 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
       "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "license": "MIT"
     },
+    "node_modules/pbf": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
@@ -15143,6 +16607,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
@@ -15228,6 +16698,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+      "license": "MIT"
+    },
     "node_modules/protocols": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.2.tgz",
@@ -15315,6 +16791,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "license": "ISC"
+    },
     "node_modules/radix3": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -15842,6 +17324,15 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/restructure": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
@@ -15864,6 +17355,12 @@
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "license": "MIT"
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.55.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
@@ -16046,6 +17543,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -17144,6 +18647,12 @@
       "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
       "license": "MIT"
     },
+    "node_modules/striptags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==",
+      "license": "MIT"
+    },
     "node_modules/structured-clone-es": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/structured-clone-es/-/structured-clone-es-1.0.0.tgz",
@@ -17166,6 +18675,21 @@
         "postcss": "^8.4.32"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
+    "node_modules/supercluster": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
+      "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^3.0.0"
+      }
+    },
     "node_modules/superjson": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
@@ -17471,6 +18995,21 @@
         "b4a": "^1.6.4"
       }
     },
+    "node_modules/three": {
+      "version": "0.135.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.135.0.tgz",
+      "integrity": "sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ==",
+      "license": "MIT"
+    },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -17508,6 +19047,21 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+      "license": "ISC"
+    },
+    "node_modules/to-px": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/to-px/-/to-px-1.1.0.tgz",
+      "integrity": "sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==",
+      "license": "MIT",
+      "dependencies": {
+        "parse-unit": "^1.0.1"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -17545,6 +19099,26 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
+    "node_modules/topojson-client/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -18974,6 +20548,17 @@
       "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
       "license": "MIT"
     },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
@@ -19014,6 +20599,14 @@
         "vue": "^3.0.0-0 || ^2.7.0"
       }
     },
+    "node_modules/vue-chrts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vue-chrts/-/vue-chrts-2.0.0.tgz",
+      "integrity": "sha512-TwjTlULMT4DQfw7XRH1scTNZSqIy/jCKf1+vSZ9+hm61KHrKLhK8+7+UeuK/tP2i4sCaOsRfvd+8ZQvluXyWAg==",
+      "peerDependencies": {
+        "vue": "^3.5.13"
+      }
+    },
     "node_modules/vue-component-type-helpers": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.2.2.tgz",
diff --git a/package.json b/package.json
index 17338bd..4ac609b 100644
--- a/package.json
+++ b/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",
diff --git a/pages/Dashboard.vue b/pages/Dashboard.vue
index 1063df1..8cf6c17 100644
--- a/pages/Dashboard.vue
+++ b/pages/Dashboard.vue
@@ -1,204 +1,353 @@
 <template>
-  <v-container fluid class="pa-8 dashboard-bg">
-    
-    <div class="d-flex justify-space-between align-center mb-10">
-      <div>
-        <h1 class="dashboard-title">
-          Antrean Dashboard
-        </h1>
-        <p v-if="user" class="dashboard-subtitle">
-          Selamat Datang, 
-          <span class="user-name">
-            {{ user.name || user.preferred_username }}
-          </span>! 🍊
-        </p>
+  <div class="dashboard-wrapper">
+    <!-- Modern Hero Header Section -->
+    <div class="dashboard-hero">
+      <!-- Geometric Background Pattern -->
+      <div class="hero-pattern">
+        <div class="pattern-circle circle-1"></div>
+        <div class="pattern-circle circle-2"></div>
+        <div class="pattern-circle circle-3"></div>
+        <div class="pattern-lines">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
       </div>
-      <div class="d-flex align-center">
-        
-        <v-menu offset-y>
-          <template v-slot:activator="{ props }">
-            <v-btn
-              v-bind="props"
-              color="secondary-600"
-              variant="flat"
-              class="export-btn mr-4"
-            >
-              <v-icon start icon="mdi-download-box-outline"></v-icon>
-              Export Data ({{ exportType }})
-              <v-icon end>mdi-menu-down</v-icon>
-            </v-btn>
-          </template>
-          <v-list>
-            <v-list-item 
-              v-for="(item, index) in exportOptions" 
-              :key="index"
-              @click="handleExport(item.type)"
-            >
-              <v-list-item-title>
-                <v-icon start :icon="item.icon"></v-icon>
-                {{ item.title }}
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
 
-        <v-chip color="white" variant="flat" class="date-chip">
-          <v-icon start icon="mdi-calendar-check-outline" color="secondary-600"></v-icon>
-          {{ currentDate }}
-        </v-chip>
-      </div>
+      <v-container fluid class="pa-4 hero-container">
+        <v-row align="center" class="hero-row">
+          <!-- Left Section: Welcome & Title -->
+          <v-col cols="12" md="6" class="hero-left">
+            <div class="welcome-section">
+              <div class="welcome-badge-new">
+                <div class="badge-dot"></div>
+                <span class="badge-text-new">DASHBOARD ANTREAN</span>
+              </div>
+              
+              <h1 class="hero-title-new">
+                Selamat Datang Kembali! 👋
+              </h1>
+              
+              <p v-if="user" class="hero-subtitle-new">
+                <span class="greeting-text">Halo,</span>
+                <span class="user-name-new">{{ user.name || user.preferred_username }}</span>
+                <span class="subtitle-desc">Berikut adalah ringkasan aktivitas hari ini</span>
+              </p>
+
+              <!-- Quick Info Pills -->
+              <div class="quick-info-pills">
+                <div class="info-pill">
+                  <v-icon size="16" color="white">mdi-clock-outline</v-icon>
+                  <span>Real-time Data</span>
+                </div>
+                <div class="info-pill">
+                  <v-icon size="16" color="white">mdi-calendar-today</v-icon>
+                  <span>{{ currentDate }}</span>
+                </div>
+              </div>
+            </div>
+          </v-col>
+
+          <!-- Right Section: Actions & Stats -->
+          <v-col cols="12" md="6" class="hero-right">
+            <div class="hero-actions-new">
+              <!-- Export Button -->
+              <v-menu offset-y>
+                <template v-slot:activator="{ props }">
+                  <v-btn
+                    v-bind="props"
+                    color="white"
+                    variant="flat"
+                    class="modern-btn export-btn-new"
+                    size="large"
+                    prepend-icon="mdi-download"
+                  >
+                    <span class="btn-text">Export Data</span>
+                    <v-icon end size="18">mdi-chevron-down</v-icon>
+                  </v-btn>
+                </template>
+                <v-list class="export-menu-new">
+                  <v-list-item 
+                    v-for="(item, index) in exportOptions" 
+                    :key="index"
+                    @click="handleExport(item.type)"
+                    class="export-item-new"
+                  >
+                    <template v-slot:prepend>
+                      <v-icon :icon="item.icon" size="20"></v-icon>
+                    </template>
+                    <v-list-item-title>{{ item.title }}</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+
+              <!-- Mini Stats Cards in Header -->
+              <div class="header-mini-stats">
+                <div class="mini-stat-card">
+                  <div class="mini-stat-icon">
+                    <v-icon size="20" color="white">mdi-account-multiple</v-icon>
+                  </div>
+                  <div class="mini-stat-content">
+                    <div class="mini-stat-value">324</div>
+                    <div class="mini-stat-label">Pasien Hari Ini</div>
+                  </div>
+                </div>
+
+                <div class="mini-stat-card">
+                  <div class="mini-stat-icon secondary">
+                    <v-icon size="20" color="white">mdi-clock-fast</v-icon>
+                  </div>
+                  <div class="mini-stat-content">
+                    <div class="mini-stat-value">47</div>
+                    <div class="mini-stat-label">Antrean Aktif</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
     </div>
 
-    <v-row class="mb-10">
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="stat-card stat-card-secondary">
-          <div class="d-flex align-center">
-            <v-icon size="48" color="secondary-600" class="mr-4">mdi-tablet-dashboard</v-icon>
-            <div>
-              <div class="stat-value">150</div>
-              <div class="stat-label">Total Antrean Online</div>
+    <!-- Main Content -->
+    <v-container fluid class="pa-3 dashboard-bg">
+
+    <!-- Compact Stats Cards Section -->
+    <v-row class="mb-2 stats-row">
+      <v-col cols="12" sm="6" lg="3" v-for="(stat, index) in stats" :key="index">
+        <v-card 
+          class="stat-card innovative-card" 
+          :class="`stat-card-${stat.color}`"
+          elevation="0"
+          :style="{ animationDelay: `${index * 0.1}s` }"
+        >
+          <!-- Animated Background Pattern -->
+          <div class="card-pattern">
+            <div class="pattern-dot"></div>
+            <div class="pattern-dot"></div>
+            <div class="pattern-dot"></div>
+          </div>
+          
+          <!-- Card Content -->
+          <div class="stat-card-content">
+            <div class="stat-header">
+              <div class="stat-icon-wrapper modern-icon" :class="`icon-${stat.color}`">
+                <v-icon :size="32" :color="stat.iconColor">{{ stat.icon }}</v-icon>
+                <div class="icon-glow"></div>
+              </div>
+              <div v-if="stat.change" class="stat-badge" :class="stat.changeType">
+                <v-icon size="12">{{ stat.changeIcon }}</v-icon>
+                <span>{{ stat.change }}</span>
+              </div>
+            </div>
+            
+            <div class="stat-body">
+              <div class="stat-value-wrapper">
+                <div class="stat-value modern-value">{{ stat.value }}</div>
+                <div class="value-sparkline"></div>
+              </div>
+              <div class="stat-label modern-label">{{ stat.label }}</div>
             </div>
           </div>
-        </v-card>
-      </v-col>
 
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="stat-card stat-card-primary">
-          <div class="d-flex align-center">
-            <v-icon size="48" color="primary-600" class="mr-4">mdi-account-hard-hat</v-icon>
-            <div>
-              <div class="stat-value">100</div>
-              <div class="stat-label">Total Antrean MJKN</div>
-            </div>
-          </div>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="stat-card stat-card-secondary">
-          <div class="d-flex align-center">
-            <v-icon size="48" color="secondary-600" class="mr-4">mdi-account-group</v-icon>
-            <div>
-              <div class="stat-value">500</div>
-              <div class="stat-label">Total Kunjungan</div>
-            </div>
-          </div>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" sm="6" md="3">
-        <v-card class="stat-card stat-card-primary">
-          <div class="d-flex align-center">
-            <v-icon size="48" color="primary-600" class="mr-4">mdi-timer-sand</v-icon>
-            <div>
-              <div class="stat-value">7.5s</div>
-              <div class="stat-label">Avg. Check-in Time</div>
-            </div>
+          <!-- Hover Effect Gradient -->
+          <div class="hover-gradient"></div>
+          
+          <!-- Progress Bar -->
+          <div class="stat-progress">
+            <div class="progress-bar" :class="`progress-${stat.color}`"></div>
           </div>
         </v-card>
       </v-col>
     </v-row>
 
-    <v-row class="mb-4">
-      <v-col cols="12" md="6">
-        <v-card class="chart-card">
-          <v-card-title class="chart-header">
-            <span class="chart-title">Registration Trend</span>
-            <v-btn-toggle v-model="queueTimePeriod" mandatory variant="outlined" color="secondary-600" class="period-toggle">
-              <v-btn size="small" value="day">Day</v-btn>
-            </v-btn-toggle>
-          </v-card-title>
-          <v-card-text class="pa-0">
-            <Bar
-              :data="queueChartData"
-              :options="queueChartOptions"
-              style="height: 350px"
-            />
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card class="chart-card">
-          <v-card-title class="chart-header">
-            <span class="chart-title">Total Registrasi Perbulan</span>
-            <div>
-              <v-chip
-                :color="activeYear === '2024' ? 'secondary-600' : 'neutral-300'"
-                :text-color="activeYear === '2024' ? 'white' : 'neutral-700'"
-                variant="flat"
-                class="year-chip mr-2"
-                @click="changeYear('2024')"
-              >
-                2024
-              </v-chip>
-              <v-chip
-                :color="activeYear === '2025' ? 'secondary-600' : 'neutral-300'"
-                :text-color="activeYear === '2025' ? 'white' : 'neutral-700'"
-                variant="flat"
-                class="year-chip"
-                @click="changeYear('2025')"
-              >
-                2025
-              </v-chip>
+      <!-- Charts Section -->
+      <v-row class="mb-2">
+        <!-- Chart 1: Tren Kunjungan Pasien (Area Chart) -->
+        <v-col cols="12" lg="8" md="12">
+          <v-card class="modern-card chart-card">
+            <div class="chart-header-modern">
+              <div class="chart-header-left">
+                <div class="chart-icon-wrapper chart-icon-primary">
+                  <v-icon size="small">mdi-chart-timeline-variant</v-icon>
+                </div>
+                <div>
+                  <h3 class="chart-title">Tren Kunjungan Pasien</h3>
+                  <p class="chart-subtitle">Perbandingan kunjungan bulanan</p>
+                </div>
+              </div>
+              <div class="chart-controls">
+                <v-chip class="live-chip" size="small">
+                  <v-icon class="pulse-icon" size="16">mdi-circle</v-icon>
+                  2025
+                </v-chip>
+              </div>
             </div>
-          </v-card-title>
-          <v-card-text class="pa-0">
-            <Bar
-              :data="barData"
-              :options="barOptions"
-              style="height: 350px"
-            />
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
+            <div class="chart-container">
+              <ClientOnly>
+                <Line
+                  v-if="visitTrendData.labels && visitTrendData.labels.length > 0"
+                  :data="visitTrendData"
+                  :options="areaChartOptions"
+                  class="chart-wrapper"
+                />
+                <template #fallback>
+                  <div class="chart-loading">
+                    <v-progress-circular indeterminate color="primary" size="50"></v-progress-circular>
+                    <p class="loading-text">Loading chart...</p>
+                  </div>
+                </template>
+              </ClientOnly>
+            </div>
+          </v-card>
+        </v-col>
 
-    <v-row>
-      <v-col cols="12" md="6">
-        <v-card class="chart-card">
-          <v-card-title class="chart-header">
-            <span class="chart-title">Realtime Check-in Velocity</span>
-            <v-chip size="small" color="success-600" class="live-chip">
-              <v-icon start size="small">mdi-circle</v-icon>
-              Live
-            </v-chip>
-          </v-card-title>
-          <v-card-text class="pa-0">
-            <Line
-              :data="realtimeLineData"
-              :options="lineOptions"
-              style="height: 350px"
-            />
-          </v-card-text>
-        </v-card>
-      </v-col>
-      <v-col cols="12" md="6">
-        <v-card class="chart-card">
-          <v-card-title class="chart-header">
-            <span class="chart-title">Registrant Type Breakdown</span>
-          </v-card-title>
-          <v-card-text class="d-flex justify-center align-center pa-0" style="height: 350px;">
-            <Pie
-              :data="pieData"
-              :options="pieOptions"
-              style="max-height: 100%; max-width: 100%;"
-            />
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
+        <!-- Chart 2: Status Pembayaran (Doughnut Chart) -->
+        <v-col cols="12" lg="4" md="6">
+          <v-card class="modern-card chart-card">
+            <div class="chart-header-modern">
+              <div class="chart-header-left">
+                <div class="chart-icon-wrapper chart-icon-success">
+                  <v-icon size="small">mdi-cash-multiple</v-icon>
+                </div>
+                <div>
+                  <h3 class="chart-title">Status Pembayaran</h3>
+                  <p class="chart-subtitle">Distribusi metode bayar</p>
+                </div>
+              </div>
+            </div>
+            <div class="chart-container">
+              <ClientOnly>
+                <Doughnut
+                  v-if="paymentStatusData.labels && paymentStatusData.labels.length > 0"
+                  :data="paymentStatusData"
+                  :options="doughnutOptions"
+                  class="chart-wrapper pie-chart"
+                />
+                <template #fallback>
+                  <div class="chart-loading">
+                    <v-progress-circular indeterminate color="success" size="50"></v-progress-circular>
+                    <p class="loading-text">Loading chart...</p>
+                  </div>
+                </template>
+              </ClientOnly>
+            </div>
+          </v-card>
+        </v-col>
+
+        <!-- Chart 3: Waktu Tunggu per Poli (Bar Chart) -->
+        <v-col cols="12" lg="6" md="6">
+          <v-card class="modern-card chart-card">
+            <div class="chart-header-modern">
+              <div class="chart-header-left">
+                <div class="chart-icon-wrapper chart-icon-secondary">
+                  <v-icon size="small">mdi-clock-outline</v-icon>
+                </div>
+                <div>
+                  <h3 class="chart-title">Waktu Tunggu per Poli</h3>
+                  <p class="chart-subtitle">Rata-rata waktu tunggu (menit)</p>
+                </div>
+              </div>
+            </div>
+            <div class="chart-container">
+              <ClientOnly>
+                <Bar
+                  v-if="waitingTimeData.labels && waitingTimeData.labels.length > 0"
+                  :data="waitingTimeData"
+                  :options="horizontalBarOptions"
+                  class="chart-wrapper"
+                />
+                <template #fallback>
+                  <div class="chart-loading">
+                    <v-progress-circular indeterminate color="secondary" size="50"></v-progress-circular>
+                    <p class="loading-text">Loading chart...</p>
+                  </div>
+                </template>
+              </ClientOnly>
+            </div>
+          </v-card>
+        </v-col>
+
+        <!-- Chart 4: Tingkat Kehadiran (Polar Area) -->
+        <v-col cols="12" lg="6" md="6">
+          <v-card class="modern-card chart-card">
+            <div class="chart-header-modern">
+              <div class="chart-header-left">
+                <div class="chart-icon-wrapper chart-icon-primary">
+                  <v-icon size="small">mdi-account-check</v-icon>
+                </div>
+                <div>
+                  <h3 class="chart-title">Tingkat Kehadiran</h3>
+                  <p class="chart-subtitle">Perbandingan hadir vs tidak hadir</p>
+                </div>
+              </div>
+              <div class="chart-controls">
+                <v-chip class="live-chip" size="small">
+                  <v-icon class="pulse-icon" size="16">mdi-circle</v-icon>
+                  Minggu Ini
+                </v-chip>
+              </div>
+            </div>
+            <div class="chart-container">
+              <ClientOnly>
+                <PolarArea
+                  v-if="attendanceData.labels && attendanceData.labels.length > 0"
+                  :data="attendanceData"
+                  :options="polarAreaOptions"
+                  class="chart-wrapper pie-chart"
+                />
+                <template #fallback>
+                  <div class="chart-loading">
+                    <v-progress-circular indeterminate color="primary" size="50"></v-progress-circular>
+                    <p class="loading-text">Loading chart...</p>
+                  </div>
+                </template>
+              </ClientOnly>
+            </div>
+          </v-card>
+        </v-col>
+      </v-row>
 
     <v-overlay v-model="isLoading" contained class="align-center justify-center">
       <v-progress-circular indeterminate size="64" color="secondary-600"></v-progress-circular>
       <p class="loading-text">Loading dashboard...</p>
     </v-overlay>
-  </v-container>
+    </v-container>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed, onUnmounted } from 'vue';
-import { Bar, Pie, Line } from 'vue-chartjs';
+import { ref, onMounted } from 'vue';
+import { Bar, Doughnut, Line, PolarArea } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  ArcElement,
+  LineElement,
+  PointElement,
+  Filler,
+  RadialLinearScale
+} from 'chart.js';
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  ArcElement,
+  LineElement,
+  PointElement,
+  Filler,
+  RadialLinearScale
+);
+
 import { useAuth } from '~/composables/useAuth';
 import dayjs from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
@@ -209,25 +358,10 @@ dayjs.extend(weekday);
 dayjs.extend(weekOfYear);
 dayjs.locale('id');
 
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-  ArcElement,
-  PointElement,
-  LineElement,
-} from 'chart.js';
-
 definePageMeta({
   middleware:['auth']
 })
 
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement, PointElement, LineElement);
-
 const user = ref(null);
 const isLoading = ref(false);
 const { checkAuth } = useAuth();
@@ -240,6 +374,7 @@ const colors = {
     500: '#567EE7',
     400: '#7898EC',
     300: '#9AB2F1',
+    200: '#BBCBF5',
   },
   secondary: {
     700: '#E65A0D',
@@ -249,7 +384,10 @@ const colors = {
     300: '#FFB58D',
   },
   success: {
+    700: '#008D65',
     600: '#33A484',
+    500: '#59B59B',
+    400: '#80C6B2',
   },
   neutral: {
     100: '#FFFFFF',
@@ -269,65 +407,568 @@ const exportOptions = ref([
 ]);
 
 const currentDate = ref('');
-const activeYear = ref('2025');
-const queueTimePeriod = ref('day'); 
 
-const mockQueueData = ref([
-  { date: '2025-10-13', registrants: 300, attendees: 250 },
-  { date: '2025-10-14', registrants: 450, attendees: 400 },
-  { date: '2025-10-15', registrants: 500, attendees: 420 },
-  { date: '2025-10-16', registrants: 400, attendees: 350 },
-  { date: '2025-10-17', registrants: 550, attendees: 500 },
-  { date: '2025-10-18', registrants: 435, attendees: 380 },
+// New Stats Data - Updated Metrics
+const stats = ref([
+  {
+    label: 'Pasien Hari Ini',
+    value: '324',
+    icon: 'mdi-account-heart',
+    iconSize: 24,
+    iconColor: 'white',
+    color: 'primary',
+    change: '+18.2%',
+    changeType: 'positive',
+    changeIcon: 'mdi-trending-up'
+  },
+  {
+    label: 'Antrean Aktif',
+    value: '47',
+    icon: 'mdi-clock-fast',
+    iconSize: 24,
+    iconColor: 'white',
+    color: 'secondary',
+    change: '+5',
+    changeType: 'positive',
+    changeIcon: 'mdi-arrow-up'
+  },
+  {
+    label: 'Rata-rata Tunggu',
+    value: '12 min',
+    icon: 'mdi-timer-outline',
+    iconSize: 24,
+    iconColor: 'white',
+    color: 'success',
+    change: '-3 min',
+    changeType: 'positive',
+    changeIcon: 'mdi-trending-down'
+  },
+  {
+    label: 'Tingkat Kehadiran',
+    value: '89.5%',
+    icon: 'mdi-check-circle',
+    iconSize: 24,
+    iconColor: 'white',
+    color: 'primary',
+    change: '+2.3%',
+    changeType: 'positive',
+    changeIcon: 'mdi-trending-up'
+  }
 ]);
 
-// --- SIMPLIFIED REALTIME CHART (NO AUTO-UPDATE) ---
-const maxDataPoints = 10;
-
-const realtimeLineData = ref({
-  labels: Array.from({ length: maxDataPoints }, (_, i) => 
-    dayjs().subtract((maxDataPoints - 1 - i) * 30, 'second').format('HH:mm:ss')
-  ),
+// New Data: Monthly Visit Trend (Area Chart)
+const visitTrendData = ref({
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'],
   datasets: [
     {
-      label: 'Check-ins/min',
-      backgroundColor: 'rgba(255, 132, 65, 0.1)', // secondary-500 with opacity 
-      borderColor: colors.secondary[500], 
-      data: Array.from({ length: maxDataPoints }, () => Math.floor(Math.random() * 20) + 40),
+      label: 'Pasien Umum',
+      data: [850, 920, 880, 1050, 1120, 1080, 1200, 1150, 1080, 1190, 1250, 1300],
+      backgroundColor: 'rgba(86, 126, 231, 0.2)',
+      borderColor: colors.primary[500],
+      borderWidth: 3,
       fill: true,
-      tension: 0.3, 
-      borderWidth: 3, 
-      pointRadius: 4, 
-      pointHoverRadius: 6,
-      pointBackgroundColor: colors.secondary[600],
+      tension: 0.4,
+      pointRadius: 5,
+      pointHoverRadius: 8,
+      pointBackgroundColor: colors.primary[600],
+      pointBorderColor: '#fff',
+      pointBorderWidth: 2,
+      pointHoverBorderWidth: 3,
+      pointHoverBorderColor: colors.primary[900],
     },
-  ],
+    {
+      label: 'Pasien BPJS',
+      data: [1200, 1350, 1280, 1480, 1550, 1620, 1700, 1650, 1590, 1720, 1800, 1850],
+      backgroundColor: 'rgba(255, 132, 65, 0.2)',
+      borderColor: colors.secondary[500],
+      borderWidth: 3,
+      fill: true,
+      tension: 0.4,
+      pointRadius: 5,
+      pointHoverRadius: 8,
+      pointBackgroundColor: colors.secondary[600],
+      pointBorderColor: '#fff',
+      pointBorderWidth: 2,
+      pointHoverBorderWidth: 3,
+      pointHoverBorderColor: colors.secondary[900],
+    }
+  ]
 });
 
-const lineOptions = ref({
+// Payment Status Data (Doughnut Chart)
+const paymentStatusData = ref({
+  labels: ['BPJS Kesehatan', 'Umum/Tunai', 'Asuransi Swasta', 'Corporate'],
+  datasets: [
+    {
+      data: [1850, 680, 320, 280],
+      backgroundColor: [
+        colors.primary[500],
+        colors.secondary[500],
+        colors.success[500],
+        colors.primary[300],
+      ],
+      borderColor: '#fff',
+      borderWidth: 3,
+      hoverOffset: 20,
+      hoverBorderWidth: 4,
+      hoverBorderColor: '#000',
+    }
+  ]
+});
+
+// Waiting Time per Poli Data (Horizontal Bar Chart)
+const waitingTimeData = ref({
+  labels: ['Poli Umum', 'Poli Anak', 'Poli Gigi', 'Poli Mata', 'Poli THT', 'Poli Jantung'],
+  datasets: [
+    {
+      label: 'Waktu Tunggu (menit)',
+      data: [15, 12, 8, 18, 10, 22],
+      backgroundColor: [
+        colors.primary[400],
+        colors.secondary[400],
+        colors.success[400],
+        colors.primary[500],
+        colors.secondary[500],
+        colors.success[500],
+      ],
+      hoverBackgroundColor: [
+        colors.primary[600],
+        colors.secondary[600],
+        colors.success[600],
+        colors.primary[700],
+        colors.secondary[700],
+        colors.success[700],
+      ],
+      borderColor: [
+        colors.primary[600],
+        colors.secondary[600],
+        colors.success[600],
+        colors.primary[700],
+        colors.secondary[700],
+        colors.success[700],
+      ],
+      borderWidth: 2,
+      borderRadius: 8,
+      hoverBorderWidth: 3,
+    }
+  ]
+});
+
+// Attendance Data (Polar Area Chart)
+const attendanceData = ref({
+  labels: ['Hadir Tepat Waktu', 'Hadir Terlambat', 'Tidak Hadir', 'Batal', 'Reschedule'],
+  datasets: [
+    {
+      data: [1850, 420, 280, 150, 230],
+      backgroundColor: [
+        colors.success[400],
+        colors.primary[400],
+        colors.secondary[400],
+        colors.neutral[500],
+        colors.primary[300],
+      ],
+      hoverBackgroundColor: [
+        colors.success[600],
+        colors.primary[600],
+        colors.secondary[600],
+        colors.neutral[700],
+        colors.primary[500],
+      ],
+      borderColor: '#fff',
+      borderWidth: 2,
+      hoverBorderWidth: 3,
+    }
+  ]
+});
+
+// Area Chart Options (Visit Trend)
+const areaChartOptions = ref({
   responsive: true,
   maintainAspectRatio: false,
-  animation: { duration: 0 },
+  animation: { 
+    duration: 1000,
+    easing: 'easeInOutQuart'
+  },
+  onHover: (event, activeElements) => {
+    if (event.native) {
+      event.native.target.style.cursor = activeElements.length > 0 ? 'pointer' : 'default';
+    }
+  },
   plugins: {
-    legend: { display: true },
-    title: { display: false }
+    legend: {
+      display: true,
+      position: 'top',
+      align: 'end',
+      labels: {
+        usePointStyle: true,
+        padding: 12,
+        font: {
+          size: 11,
+          weight: '600',
+          family: "'Inter', sans-serif"
+        },
+        color: colors.neutral[700],
+      }
+    },
+    tooltip: {
+      enabled: true,
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      titleColor: colors.neutral[900],
+      bodyColor: colors.neutral[700],
+      borderColor: colors.primary,
+      borderWidth: 2,
+      padding: 16,
+      boxPadding: 8,
+      displayColors: true,
+      usePointStyle: true,
+      caretPadding: 15,
+      cornerRadius: 8,
+      xAlign: 'center',
+      yAlign: 'top',
+      animation: {
+        duration: 200,
+        easing: 'easeInOutQuart'
+      },
+      titleFont: {
+        size: 13,
+        weight: 'bold',
+        family: "'Inter', sans-serif"
+      },
+      bodyFont: {
+        size: 12,
+        family: "'Inter', sans-serif"
+      },
+      callbacks: {
+        title: function(context) {
+          return `📈 ${context[0].label}`;
+        },
+        label: function(context) {
+          const value = context.parsed.y.toLocaleString('id-ID');
+          const percentage = ((context.parsed.y / Math.max(...context.dataset.data)) * 100).toFixed(0);
+          return [
+            `${context.dataset.label}: ${value} pasien`,
+            `Persentase: ${percentage}%`
+          ];
+        },
+        afterLabel: function(context) {
+          return `Dataset: ${context.dataset.label}`;
+        }
+      }
+    },
   },
   scales: {
+    x: {
+      grid: {
+        display: false,
+      },
+      ticks: {
+        color: colors.neutral[700],
+        font: {
+          size: 10,
+          weight: '500'
+        }
+      }
+    },
     y: {
       beginAtZero: true,
-      suggestedMax: 80,
-      title: { display: true, text: 'Check-ins per Minute' },
-      grid: { color: 'rgba(0, 0, 0, 0.05)' } 
+      grid: {
+        color: 'rgba(0, 0, 0, 0.05)',
+        drawBorder: false,
+      },
+      ticks: {
+        color: colors.neutral[700],
+        font: {
+          size: 10,
+          weight: '600'
+        },
+        callback: function(value) {
+          return value.toLocaleString('id-ID');
+        }
+      }
+    }
+  },
+  interaction: {
+    intersect: false,
+    mode: 'index'
+  }
+});
+
+// Doughnut Options (Payment Status)
+const doughnutOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: {
+    animateRotate: true,
+    animateScale: true,
+    duration: 1200,
+    easing: 'easeInOutQuart'
+  },
+  cutout: '65%',
+  plugins: {
+    legend: {
+      display: true,
+      position: 'bottom',
+      labels: {
+        usePointStyle: true,
+        padding: 12,
+        font: {
+          size: 10,
+          weight: '600',
+          family: "'Inter', sans-serif"
+        },
+        color: colors.neutral[700],
+        generateLabels: function(chart) {
+          const data = chart.data;
+          if (data.labels.length && data.datasets.length) {
+            return data.labels.map((label, i) => {
+              const value = data.datasets[0].data[i];
+              const total = data.datasets[0].data.reduce((a, b) => a + b, 0);
+              const percentage = ((value / total) * 100).toFixed(1);
+              return {
+                text: `${label}: ${percentage}%`,
+                fillStyle: data.datasets[0].backgroundColor[i],
+                hidden: false,
+                index: i
+              };
+            });
+          }
+          return [];
+        }
+      }
     },
-    x: {
-      title: { display: true, text: 'Time (HH:MM:SS)' },
-      grid: { display: false }
+    tooltip: {
+      enabled: true,
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      titleColor: colors.neutral[900],
+      bodyColor: colors.neutral[700],
+      borderColor: colors.success,
+      borderWidth: 2,
+      padding: 16,
+      boxPadding: 8,
+      displayColors: true,
+      usePointStyle: true,
+      caretPadding: 15,
+      cornerRadius: 8,
+      xAlign: 'center',
+      yAlign: 'top',
+      animation: {
+        duration: 200,
+        easing: 'easeInOutQuart'
+      },
+      titleFont: {
+        size: 13,
+        weight: 'bold',
+        family: "'Inter', sans-serif"
+      },
+      bodyFont: {
+        size: 12,
+        family: "'Inter', sans-serif"
+      },
+      callbacks: {
+        title: function(context) {
+          return `💳 Status Pembayaran`;
+        },
+        label: function(context) {
+          const label = context.label || '';
+          const value = context.parsed;
+          const total = context.dataset.data.reduce((a, b) => a + b, 0);
+          const percentage = ((value / total) * 100).toFixed(1);
+          return [
+            `${label}: ${value.toLocaleString('id-ID')}`,
+            `Persentase: ${percentage}%`,
+            `Total: ${total.toLocaleString('id-ID')}`
+          ];
+        }
+      }
+    }
+  }
+});
+
+// Horizontal Bar Options (Waiting Time)
+const horizontalBarOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  indexAxis: 'y',
+  animation: {
+    duration: 1000,
+    easing: 'easeInOutQuart'
+  },
+  onHover: (event, activeElements) => {
+    if (event.native) {
+      event.native.target.style.cursor = activeElements.length > 0 ? 'pointer' : 'default';
+    }
+  },
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      enabled: true,
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      titleColor: colors.neutral[900],
+      bodyColor: colors.neutral[700],
+      borderColor: colors.secondary,
+      borderWidth: 2,
+      padding: 16,
+      boxPadding: 8,
+      displayColors: true,
+      usePointStyle: true,
+      caretPadding: 15,
+      cornerRadius: 8,
+      xAlign: 'center',
+      yAlign: 'top',
+      animation: {
+        duration: 200,
+        easing: 'easeInOutQuart'
+      },
+      titleFont: {
+        size: 13,
+        weight: 'bold',
+        family: "'Inter', sans-serif"
+      },
+      bodyFont: {
+        size: 12,
+        family: "'Inter', sans-serif"
+      },
+      callbacks: {
+        title: function(context) {
+          return `⏱️ ${context[0].label}`;
+        },
+        label: function(context) {
+          const waitTime = context.parsed.x;
+          let status = '✅ Cepat';
+          if (waitTime > 30) status = '⚠️ Sedang';
+          if (waitTime > 60) status = '🔴 Lama';
+          return [
+            `Waktu tunggu: ${waitTime} menit`,
+            `Status: ${status}`
+          ];
+        }
+      }
+    },
+  },
+  scales: {
+    x: {
+      beginAtZero: true,
+      grid: {
+        color: 'rgba(0, 0, 0, 0.05)',
+        drawBorder: false,
+      },
+      ticks: {
+        color: colors.neutral[700],
+        font: {
+          size: 10,
+          weight: '600'
+        },
+        callback: function(value) {
+          return value + ' min';
+        }
+      }
+    },
+    y: {
+      grid: {
+        display: false,
+      },
+      ticks: {
+        color: colors.neutral[700],
+        font: {
+          size: 10,
+          weight: '500'
+        }
+      }
+    }
+  }
+});
+
+// Polar Area Options (Attendance)
+const polarAreaOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: {
+    animateRotate: true,
+    animateScale: true,
+    duration: 1200,
+    easing: 'easeInOutQuart'
+  },
+  plugins: {
+    legend: {
+      display: true,
+      position: 'bottom',
+      labels: {
+        usePointStyle: true,
+        padding: 10,
+        font: {
+          size: 10,
+          weight: '600',
+          family: "'Inter', sans-serif"
+        },
+        color: colors.neutral[700],
+      }
+    },
+    tooltip: {
+      enabled: true,
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      titleColor: colors.neutral[900],
+      bodyColor: colors.neutral[700],
+      borderColor: colors.primary,
+      borderWidth: 2,
+      padding: 16,
+      boxPadding: 8,
+      displayColors: true,
+      usePointStyle: true,
+      caretPadding: 15,
+      cornerRadius: 8,
+      xAlign: 'center',
+      yAlign: 'top',
+      animation: {
+        duration: 200,
+        easing: 'easeInOutQuart'
+      },
+      titleFont: {
+        size: 13,
+        weight: 'bold',
+        family: "'Inter', sans-serif"
+      },
+      bodyFont: {
+        size: 12,
+        family: "'Inter', sans-serif"
+      },
+      callbacks: {
+        title: function(context) {
+          return `👤 Tingkat Kehadiran`;
+        },
+        label: function(context) {
+          const label = context.label || '';
+          const value = context.parsed.r;
+          const total = context.dataset.data.reduce((a, b) => a + b, 0);
+          const percentage = ((value / total) * 100).toFixed(1);
+          return [
+            `${label}: ${value.toLocaleString('id-ID')}`,
+            `Persentase: ${percentage}%`,
+            `Total: ${total.toLocaleString('id-ID')}`
+          ];
+        }
+      }
+    }
+  },
+  scales: {
+    r: {
+      beginAtZero: true,
+      grid: {
+        color: 'rgba(0, 0, 0, 0.05)',
+      },
+      ticks: {
+        color: colors.neutral[700],
+        font: {
+          size: 9,
+          weight: '500'
+        },
+        backdropColor: 'transparent'
+      }
     }
   }
 });
-// --- END SIMPLIFIED REALTIME CHART ---
 
-// Single onMounted
 onMounted(async () => {
   console.log('📊 Dashboard mounted');
   try {
@@ -342,433 +983,1039 @@ onMounted(async () => {
   }
 });
 
-// Clean onUnmounted
-onUnmounted(() => {
-  console.log('🧹 Dashboard unmounting');
-});
-
-const changeYear = (year) => {
-  activeYear.value = year;
-};
-
-const getKpiData = () => {
-  return [
-    { name: 'Antrean Online', value: 150 },
-    { name: 'Antrean MJKN', value: 100 },
-    { name: 'Total Kunjungan', value: 500 },
-    { name: 'Avg. Check-in Time', value: '7.5s' },
-  ];
-};
-
-const convertJsonToCsv = (jsonData, fields) => {
-  if (!jsonData.length) return '';
-  
-  const header = fields.join(',');
-  
-  const csv = jsonData.map(row => 
-    fields.map(fieldName => {
-      let value = row[fieldName];
-      if (typeof value === 'string') {
-        value = `"${value.replace(/"/g, '""')}"`;
-      }
-      return value;
-    }).join(',')
-  ).join('\n');
-
-  return header + '\n' + csv;
-};
-
-const downloadFile = (data, filename, mimeType) => {
-  const dataStr = `data:${mimeType};charset=utf-8,` + encodeURIComponent(data);
-  const downloadAnchorNode = document.createElement('a');
-  downloadAnchorNode.setAttribute("href", dataStr);
-  downloadAnchorNode.setAttribute("download", filename);
-  document.body.appendChild(downloadAnchorNode);
-  downloadAnchorNode.click();
-  downloadAnchorNode.remove();
-}
-
 const handleExport = (type) => {
-  exportType.value = type.toUpperCase();
-  const filenamePrefix = "antrean_data_" + dayjs().format('YYYYMMDD');
-  
-  const dataToExport = mockQueueData.value;
-  
-  if (type === 'json') {
-    downloadFile(JSON.stringify(dataToExport, null, 2), `${filenamePrefix}.json`, 'application/json');
-    alert("Data Antrean berhasil diexport sebagai JSON! ✅");
-    
-  } else if (type === 'csv') {
-    const fields = ['date', 'registrants', 'attendees'];
-    const csvContent = convertJsonToCsv(dataToExport, fields);
-    
-    const kpiData = getKpiData().map(kpi => `# ${kpi.name}: ${kpi.value}`).join('\n');
-    const finalCsvContent = kpiData + '\n' + csvContent;
-    
-    downloadFile(finalCsvContent, `${filenamePrefix}.csv`, 'text/csv');
-    alert("Data Antrean berhasil diexport sebagai CSV! 📊");
-    
-  } else if (type === 'excel') {
-    alert("Excel (.xlsx) export requires a dedicated server endpoint. Simulating download... ⚠️");
-    
-  } else if (type === 'pdf') {
-    alert("PDF (.pdf) export requires client-side libraries (like jsPDF) or a server service. Simulating download... 📝");
-  }
+  console.log('Export:', type);
+  alert(`Export ${type} - Feature coming soon!`);
 };
-
-const processQueueData = (data, period) => {
-  const grouped = {};
-  const sortedDates = data.map(item => ({
-    ...item,
-    date: dayjs(item.date)
-  })).sort((a, b) => a.date.valueOf() - b.date.valueOf());
-
-  sortedDates.forEach(item => {
-    let key;
-    let label;
-    if (period === 'day') {
-      key = item.date.format('YYYY-MM-DD');
-      label = item.date.format('ddd, DD/MM');
-    } else if (period === 'week') {
-      key = item.date.format('YYYY-WW');
-      label = `Wk ${item.date.week()}`;
-    } else if (period === 'month') {
-      key = item.date.format('YYYY-MM');
-      label = item.date.format('MMM YYYY');
-    }
-    if (!grouped[key]) {
-      grouped[key] = { label: label, registrants: 0, attendees: 0 };
-    }
-    grouped[key].registrants += item.registrants;
-    grouped[key].attendees += item.attendees;
-  });
-
-  const finalLabels = Object.values(grouped).map(g => g.label);
-  const finalRegistrants = Object.values(grouped).map(g => g.registrants);
-  const finalAttendees = Object.values(grouped).map(g => g.attendees);
-
-  return {
-    labels: finalLabels,
-    datasets: [
-      {
-        label: `Registrants`,
-        backgroundColor: colors.primary[300], 
-        data: finalRegistrants,
-        yAxisID: 'y1',
-        type: 'bar',
-        borderRadius: 6,
-      },
-      {
-        label: `Attendees`,
-        backgroundColor: 'transparent', 
-        borderColor: colors.secondary[500],
-        data: finalAttendees,
-        yAxisID: 'y1',
-        type: 'line',
-        pointRadius: 5,
-        pointBackgroundColor: colors.secondary[600],
-        tension: 0.4,
-        borderWidth: 3,
-      },
-    ],
-  };
-};
-
-const queueChartData = computed(() => {
-  if (!mockQueueData.value.length) return { labels: [], datasets: [] };
-  return processQueueData(mockQueueData.value, queueTimePeriod.value);
-});
-
-const queueChartOptions = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: { display: true, position: 'top' },
-  },
-  scales: {
-    y1: {
-      beginAtZero: true,
-      title: { display: true, text: 'Count' },
-      grid: { display: true, color: 'rgba(0, 0, 0, 0.05)' }
-    },
-    x: {
-      grid: { display: false }
-    }
-  }
-});
-
-const visitorData2024 = [150, 200, 350, 400, 380, 500, 550, 600, 520, 480, 650, 700];
-const visitorData2025 = [200, 250, 400, 450, 420, 550, 600, 650, 570, 520, 700, 750];
-const conversionRate2025 = [2.5, 3.1, 4.0, 4.5, 4.2, 5.5, 6.0, 5.8, 5.7, 5.2, 6.5, 7.5];
-
-const barData = computed(() => {
-  const dataForYear = activeYear.value === '2024' ? visitorData2024 : visitorData2025;
-  const conversionData = activeYear.value === '2024' ? [2.0, 2.5, 3.5, 3.8, 3.6, 4.5, 5.0, 5.2, 4.8, 4.5, 5.5, 6.0] : conversionRate2025;
-
-  return {
-    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
-    datasets: [
-      {
-        label: `Total Registrants`,
-        backgroundColor: colors.primary[300], 
-        data: dataForYear,
-        yAxisID: 'y1',
-        type: 'bar',
-        borderRadius: 6,
-      },
-      {
-        label: `Conv. Rate (%)`,
-        borderColor: colors.secondary[500], 
-        backgroundColor: 'transparent',
-        data: conversionData,
-        yAxisID: 'y2',
-        type: 'line',
-        pointRadius: 5,
-        pointBackgroundColor: colors.secondary[600],
-        tension: 0.4,
-        borderWidth: 3,
-      }
-    ],
-  };
-});
-
-const barOptions = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: { display: true, position: 'top' },
-  },
-  scales: {
-    y1: {
-      position: 'left',
-      beginAtZero: true,
-      title: { display: true, text: 'Registrants' },
-      grid: { display: false }
-    },
-    y2: {
-      position: 'right',
-      beginAtZero: true,
-      suggestedMax: 10,
-      title: { display: true, text: 'Conv. Rate (%)' },
-      grid: { drawOnChartArea: false } 
-    },
-    x: {
-      grid: { display: false }
-    }
-  }
-});
-
-const pieData = ref({
-  labels: ['Offline Registrants', 'Online Registrants'],
-  datasets: [
-    {
-      backgroundColor: [colors.secondary[500], colors.primary[300]], 
-      hoverBackgroundColor: [colors.secondary[700], colors.primary[500]], 
-      data: [759, 1876],
-      borderWidth: 3, 
-      borderColor: colors.neutral[100],
-    },
-  ],
-});
-
-const pieOptions = ref({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    tooltip: {
-      callbacks: {
-        label: function(context) {
-          const label = context.label || '';
-          const value = context.parsed || 0;
-          const total = context.dataset.data.reduce((a, b) => a + b, 0);
-          const percentage = ((value / total) * 100).toFixed(1);
-          return `${label}: ${value} (${percentage}%)`;
-        }
-      }
-    }
-  }
-});
 </script>
 
-<style scoped lang="scss">
-@use '~/assets/scss/_colors.scss' as colorVars;
+<style lang="scss" scoped>
+@import '@/assets/scss/_colors.scss';
+@import '@/assets/scss/_variables.scss';
 
-/* Background */
-.dashboard-bg {
+.dashboard-wrapper {
+  min-height: 100vh;
   background: var(--color-neutral-300);
 }
 
-/* Typography */
-.dashboard-title {
-  font-size: 32px;
-  font-weight: 800;
-  color: var(--color-neutral-900);
-  margin: 0;
-  line-height: 1.2;
+/* Modern Hero Header Section */
+.dashboard-hero {
+  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
+  position: relative;
+  overflow: hidden;
+  min-height: 180px;
+  box-shadow: 0 4px 24px rgba(58, 97, 201, 0.2);
+
+  /* Geometric Pattern Background */
+  .hero-pattern {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    opacity: 0.1;
+    pointer-events: none;
+  }
+
+  .pattern-circle {
+    position: absolute;
+    border-radius: 50%;
+    border: 2px solid white;
+    
+    &.circle-1 {
+      width: 400px;
+      height: 400px;
+      top: -200px;
+      right: -100px;
+      animation: rotate-slow 30s linear infinite;
+    }
+    
+    &.circle-2 {
+      width: 250px;
+      height: 250px;
+      bottom: -100px;
+      left: -50px;
+      animation: rotate-slow 25s linear infinite reverse;
+    }
+    
+    &.circle-3 {
+      width: 150px;
+      height: 150px;
+      top: 50%;
+      left: 40%;
+      animation: pulse-circle 4s ease-in-out infinite;
+    }
+  }
+
+  .pattern-lines {
+    position: absolute;
+    inset: 0;
+    
+    .line {
+      position: absolute;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, white, transparent);
+      width: 100%;
+      
+      &:nth-child(1) {
+        top: 20%;
+        animation: slide-line 8s linear infinite;
+      }
+      
+      &:nth-child(2) {
+        top: 50%;
+        animation: slide-line 10s linear infinite;
+      }
+      
+      &:nth-child(3) {
+        top: 80%;
+        animation: slide-line 12s linear infinite;
+      }
+    }
+  }
 }
 
-.dashboard-subtitle {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--color-neutral-700);
-  margin: 8px 0 0 0;
+@keyframes rotate-slow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-.user-name {
-  font-weight: 700;
-  color: var(--color-secondary-600);
+@keyframes pulse-circle {
+  0%, 100% { transform: scale(1); opacity: 0.3; }
+  50% { transform: scale(1.2); opacity: 0.6; }
 }
 
-/* Export Button */
-.export-btn {
-  text-transform: none;
-  font-weight: 600;
-  font-size: 14px;
-  letter-spacing: 0;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(241, 111, 41, 0.2); // secondary-600 with opacity
+@keyframes slide-line {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
 }
 
-/* Date Chip */
-.date-chip {
-  padding: 12px 16px;
-  font-weight: 600;
-  font-size: 14px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--color-neutral-500);
+.hero-container {
+  position: relative;
+  z-index: 2;
 }
 
-/* Stat Cards */
-.stat-card {
-  background: var(--color-neutral-100);
-  border-radius: 12px;
-  padding: 24px;
-  border: 2px solid transparent;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  transition: all 0.3s ease;
+.hero-row {
+  min-height: 180px;
 }
 
-.stat-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
-}
-
-.stat-card-primary {
-  border-left-color: var(--color-secondary-600);
-}
-
-.stat-card-secondary {
-  border-left-color: var(--color-primary-600);
-}
-
-.stat-value {
-  font-size: 36px;
-  font-weight: 900;
-  color: var(--color-neutral-900);
-  line-height: 1;
-  margin-bottom: 8px;
-}
-
-.stat-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-neutral-700);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  line-height: 1.4;
-}
-
-/* Chart Cards */
-.chart-card {
-  background: var(--color-neutral-100);
-  border-radius: 12px;
-  padding: 24px;
-  border: 1px solid var(--color-neutral-500);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  min-height: 480px;
+/* Left Section */
+.hero-left {
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
-.chart-header {
+.welcome-section {
+  .welcome-badge-new {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    padding: 6px 16px;
+    border-radius: 50px;
+    margin-bottom: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    
+    .badge-dot {
+      width: 8px;
+      height: 8px;
+      background: var(--color-secondary-500);
+      border-radius: 50%;
+      animation: pulse-dot 2s ease-in-out infinite;
+    }
+    
+    .badge-text-new {
+      font-size: 11px;
+      font-weight: 700;
+      color: white;
+      letter-spacing: 1.2px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.3); opacity: 0.7; }
+}
+
+.hero-title-new {
+  font-size: 36px;
+  font-weight: 900;
+  color: white;
+  margin: 0 0 12px 0;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
+}
+
+.hero-subtitle-new {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0 0 16px 0;
+  
+  .greeting-text {
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.8);
+  }
+  
+  .user-name-new {
+    font-size: 20px;
+    font-weight: 800;
+    color: white;
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  }
+  
+  .subtitle-desc {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.7);
+    margin-top: 4px;
+  }
+}
+
+.quick-info-pills {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  
+  .info-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(8px);
+    padding: 6px 12px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    
+    span {
+      font-size: 12px;
+      font-weight: 600;
+      color: white;
+    }
+  }
+}
+
+/* Right Section */
+.hero-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.hero-actions-new {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.modern-btn {
+  text-transform: none;
+  font-weight: 700;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.export-btn-new {
+  padding: 12px 20px !important;
+  height: 48px !important;
+  
+  .btn-text {
+    font-size: 14px;
+    letter-spacing: 0.3px;
+  }
+}
+
+.export-menu-new {
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  
+  .export-item-new {
+    padding: 12px 16px;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: var(--color-primary-50);
+    }
+  }
+}
+
+.header-mini-stats {
+  display: flex;
+  gap: 10px;
+}
+
+.mini-stat-card {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 12px 14px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.18);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.mini-stat-icon {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary-500);
+  border-radius: 10px;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(86, 126, 231, 0.3);
+  
+  &.secondary {
+    background: var(--color-secondary-500);
+    box-shadow: 0 4px 12px rgba(255, 132, 65, 0.3);
+  }
+}
+
+.mini-stat-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  
+  .mini-stat-value {
+    font-size: 20px;
+    font-weight: 900;
+    color: white;
+    line-height: 1;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+  
+  .mini-stat-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.2;
+  }
+}
+
+/* Compact Background */
+.dashboard-bg {
+  background: var(--color-neutral-300);
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
+  min-height: auto;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      radial-gradient(circle at 20% 50%, rgba(58, 97, 201, 0.02) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(241, 111, 41, 0.02) 0%, transparent 50%);
+    pointer-events: none;
+  }
+}
+
+/* Compact Stats Cards */
+.stats-row {
+  margin-top: -40px;
+  position: relative;
+  z-index: 3;
+  
+  :deep(.v-col) {
+    padding: 6px !important;
+    display: flex;
+  }
+}
+
+.innovative-card {
+  background: 
+    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 24px;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fadeIn 0.6s ease-out;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  
+  &:hover {
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 
+      0 20px 40px rgba(0, 0, 0, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 1);
+    border-color: rgba(255, 255, 255, 1);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.card-pattern {
+  position: absolute;
+  inset: 0;
+  opacity: 0.03;
+  pointer-events: none;
+  
+  .pattern-dot {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--color-primary-600);
+    border-radius: 50%;
+    animation: pulse-dot 3s ease-in-out infinite;
+    
+    &:nth-child(1) {
+      top: 20%;
+      left: 15%;
+      animation-delay: 0s;
+    }
+    
+    &:nth-child(2) {
+      top: 60%;
+      right: 20%;
+      animation-delay: 1s;
+    }
+    
+    &:nth-child(3) {
+      bottom: 25%;
+      left: 50%;
+      animation-delay: 2s;
+    }
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 0.6;
+  }
+}
+
+/* Compact Stat Card Layout */
+.stat-card-content {
+  padding: 16px;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 130px;
+  height: 100%;
+  flex: 1;
+}
+
+.stat-header {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
+}
+
+.modern-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  display: flex;
   align-items: center;
-  padding: 0 0 16px 0;
-  margin-bottom: 16px;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  .icon-glow {
+    position: absolute;
+    inset: -6px;
+    background: currentColor;
+    border-radius: 16px;
+    opacity: 0;
+    filter: blur(16px);
+    transition: all 0.4s ease;
+  }
+  
+  :deep(.v-icon) {
+    font-size: 24px !important;
+  }
 }
 
-.chart-title {
-  font-size: 18px;
+.innovative-card:hover .modern-icon {
+  transform: scale(1.1) rotate(-5deg);
+  
+  .icon-glow {
+    opacity: 0.4;
+  }
+}
+
+.stat-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 4px 8px;
+  border-radius: 50px;
+  font-size: 10px;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  letter-spacing: 0.3px;
+  
+  &.positive {
+    background: var(--color-success-100);
+    color: var(--color-success-700);
+    box-shadow: 0 2px 8px rgba(51, 164, 132, 0.2);
+  }
 }
 
-.period-toggle {
-  font-size: 12px;
-  font-weight: 600;
-  border-radius: 8px;
-}
-
-.year-chip {
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 700;
-  border-radius: 20px;
-  transition: all 0.2s ease;
-}
-
-.year-chip:hover {
-  transform: scale(1.05);
-}
-
-.live-chip {
-  font-weight: 600;
-  color: var(--color-neutral-100);
-}
-
-.chart-card .v-card-text {
+.stat-body {
   flex: 1;
   display: flex;
   flex-direction: column;
+  justify-content: flex-end;
 }
 
-/* Loading */
-.loading-text {
-  margin-top: 16px;
+.stat-value-wrapper {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.modern-value {
+  font-size: 28px;
+  font-weight: 900;
   color: var(--color-neutral-900);
+  line-height: 1;
+  font-family: 'Inter', sans-serif;
+  letter-spacing: -0.5px;
+}
+
+.modern-label {
+  font-size: 11px;
   font-weight: 600;
-  font-size: 16px;
+  color: var(--color-neutral-700);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: 1.3;
+}
+
+.icon-primary {
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.3);
+}
+
+.icon-secondary {
+  background: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(241, 111, 41, 0.3);
+}
+
+.icon-success {
+  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(51, 164, 132, 0.3);
+}
+
+.hover-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, transparent 0%, rgba(86, 126, 231, 0.05) 100%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+
+.innovative-card:hover .hover-gradient {
+  opacity: 1;
+}
+
+.stat-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  width: 0;
+  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &.progress-primary {
+    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  }
+  
+  &.progress-secondary {
+    background: linear-gradient(90deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
+  }
+  
+  &.progress-success {
+    background: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  }
+}
+
+.innovative-card:hover .progress-bar {
+  width: 100%;
+}
+
+/* Compact Chart Cards */
+.v-row:not(.stats-row) {
+  :deep(.v-col) {
+    padding: 6px !important;
+    display: flex;
+  }
+}
+
+.modern-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 10px 40px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(58, 97, 201, 0.05) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+
+  &:hover {
+    box-shadow: 
+      0 20px 60px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(255, 255, 255, 0.8) inset;
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-4px);
+
+    &::before {
+      opacity: 1;
+    }
+
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.chart-card {
+  height: 320px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-header-modern {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(245, 247, 250, 0.3) 100%);
+  position: relative;
+  z-index: 1;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 18px;
+    right: 18px;
+    height: 2px;
+    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
+    opacity: 0.5;
+    border-radius: 2px;
+  }
+}
+
+.chart-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chart-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: 14px;
+    background: inherit;
+    opacity: 0;
+    filter: blur(10px);
+    transition: opacity 0.4s ease;
+  }
+  
+  :deep(.v-icon) {
+    font-size: 18px !important;
+  }
+}
+
+.chart-header-modern:hover .chart-icon-wrapper {
+  transform: scale(1.08) rotate(5deg);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+  
+  &::before {
+    opacity: 0.5;
+  }
+}
+
+.chart-icon-primary {
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  color: white;
+}
+
+.chart-icon-secondary {
+  background: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
+  color: white;
+}
+
+.chart-icon-success {
+  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  color: white;
+}
+
+.chart-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.3px;
+}
+
+.chart-subtitle {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-neutral-600);
+  margin: 3px 0 0 0;
+  opacity: 0.8;
+  letter-spacing: 0.2px;
+}
+
+.chart-container {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(245, 247, 250, 0.1) 100%);
+  border-radius: 0 0 24px 24px;
+  overflow: hidden;
+}
+
+.chart-wrapper {
+  width: 100% !important;
+  height: 100% !important;
+  max-height: 100%;
+  
+  canvas {
+    max-height: 100% !important;
+  }
+}
+
+.pie-chart {
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+:deep(canvas) {
+  border-radius: 12px;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: scale(1.02);
+  }
+}
+
+.chart-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 200px;
+  
+  .loading-text {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-neutral-700);
+    margin: 0;
+  }
+}
+
+.live-chip {
+  font-weight: 700;
+  font-size: 11px;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  box-shadow: 0 2px 10px rgba(51, 164, 132, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 5px 12px !important;
+  border-radius: 50px !important;
+}
+
+.pulse-icon {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
 }
 
 /* Responsive */
 @media (max-width: 960px) {
-  .dashboard-title {
-    font-size: 24px;
+  .dashboard-hero {
+    min-height: 200px;
   }
 
-  .dashboard-subtitle {
-    font-size: 14px;
+  .hero-row {
+    min-height: auto;
   }
 
-  .d-flex.justify-space-between {
-    flex-direction: column;
-    gap: 16px;
-    align-items: flex-start !important;
+  .hero-left,
+  .hero-right {
+    text-align: left;
   }
 
-  .d-flex.align-center .mr-4 {
-    margin-right: 0 !important;
-    margin-bottom: 8px;
+  .hero-right {
+    justify-content: flex-start;
+    margin-top: 16px;
   }
 
-  .stat-value {
+  .hero-title-new {
     font-size: 28px;
   }
 
-  .stat-label {
-    font-size: 11px;
+  .hero-subtitle-new {
+    .user-name-new {
+      font-size: 18px;
+    }
+  }
+
+  .hero-actions-new {
+    max-width: 100%;
+  }
+
+  .header-mini-stats {
+    flex-direction: column;
+  }
+
+  .mini-stat-card {
+    width: 100%;
+  }
+
+  .stats-row {
+    margin-top: -30px;
+    
+    :deep(.v-col) {
+      display: flex;
+    }
+  }
+  
+  .innovative-card {
+    height: 100%;
+  }
+
+  .stat-card-content {
+    padding: 14px;
+    min-height: 120px;
+  }
+
+  .modern-value {
+    font-size: 24px;
+  }
+
+  .modern-label {
+    font-size: 10px;
+  }
+
+  .modern-icon {
+    width: 42px;
+    height: 42px;
+  }
+
+  .chart-header-modern {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px 14px;
+  }
+
+  .chart-title {
+    font-size: 14px;
+  }
+  
+  .chart-subtitle {
+    font-size: 10px;
+  }
+  
+  .chart-card {
+    height: 280px;
   }
 }
-</style>
\ No newline at end of file
+
+@media (max-width: 600px) {
+  .dashboard-hero {
+    min-height: 240px;
+  }
+
+  .hero-title-new {
+    font-size: 24px;
+  }
+
+  .hero-subtitle-new {
+    .user-name-new {
+      font-size: 16px;
+    }
+    
+    .subtitle-desc {
+      font-size: 12px;
+    }
+  }
+
+  .quick-info-pills {
+    .info-pill {
+      font-size: 11px;
+      padding: 5px 10px;
+    }
+  }
+
+  .export-btn-new {
+    height: 44px !important;
+    
+    .btn-text {
+      font-size: 13px;
+    }
+  }
+
+  .mini-stat-card {
+    padding: 10px 12px;
+  }
+
+  .mini-stat-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  .mini-stat-content {
+    .mini-stat-value {
+      font-size: 18px;
+    }
+    
+    .mini-stat-label {
+      font-size: 10px;
+    }
+  }
+
+  .dashboard-bg {
+    padding: 8px !important;
+  }
+  
+  .stats-row,
+  .v-row:not(.stats-row) {
+    :deep(.v-col) {
+      display: flex;
+    }
+  }
+  
+  .innovative-card,
+  .modern-card {
+    height: 100%;
+  }
+
+  .stat-card-content {
+    padding: 12px;
+    min-height: 110px;
+  }
+
+  .modern-icon {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .chart-card {
+    height: 260px;
+  }
+}
+</style>
diff --git a/pages/Dashboard_OLD.vue b/pages/Dashboard_OLD.vue
new file mode 100644
index 0000000..9c552b9
--- /dev/null
+++ b/pages/Dashboard_OLD.vue
@@ -0,0 +1,1998 @@
+<template>
+  <div class="dashboard-wrapper">
+    <!-- Hero Header Section with Animated Background -->
+    <div class="dashboard-hero">
+      <div class="animated-bg">
+        <div class="gradient-orb orb-1"></div>
+        <div class="gradient-orb orb-2"></div>
+        <div class="gradient-orb orb-3"></div>
+      </div>
+      <v-container fluid class="pa-5 hero-container">
+        <div class="d-flex justify-space-between align-center flex-wrap">
+          <div class="hero-content">
+            <div class="welcome-badge animate-fade-in">
+              <v-icon size="18" class="mr-2 wave-animation">mdi-hand-wave</v-icon>
+              <span class="badge-text">Selamat Datang Kembali</span>
+            </div>
+            <h1 class="dashboard-title animate-slide-up">
+              <span class="title-gradient">Antrean</span> Dashboard
+            </h1>
+            <p v-if="user" class="dashboard-subtitle animate-slide-up">
+              Halo, 
+              <span class="user-name">
+                {{ user.name || user.preferred_username }}
+              </span>
+              <span class="greeting-emoji">✨</span>
+            </p>
+          </div>
+          <div class="hero-actions animate-fade-in">
+            <v-menu offset-y>
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  color="white"
+                  variant="flat"
+                  class="export-btn glass-effect"
+                  size="large"
+                >
+                  <v-icon start icon="mdi-download-box-outline"></v-icon>
+                  Export
+                  <v-icon end>mdi-menu-down</v-icon>
+                </v-btn>
+              </template>
+              <v-list class="export-menu">
+                <v-list-item 
+                  v-for="(item, index) in exportOptions" 
+                  :key="index"
+                  @click="handleExport(item.type)"
+                  class="export-item"
+                >
+                  <v-list-item-title>
+                    <v-icon start :icon="item.icon"></v-icon>
+                    {{ item.title }}
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+
+            <v-card class="date-card glass-effect" elevation="0">
+              <div class="date-icon-wrapper">
+                <v-icon icon="mdi-calendar-today" size="20"></v-icon>
+              </div>
+              <div class="date-content">
+                <span class="date-label">Today</span>
+                <span class="date-text">{{ currentDate }}</span>
+              </div>
+            </v-card>
+          </div>
+        </div>
+      </v-container>
+    </div>
+
+    <!-- Main Content -->
+    <v-container fluid class="pa-3 dashboard-bg">
+
+    <!-- Compact Stats Cards Section -->
+    <v-row class="mb-2 stats-row">
+      <v-col cols="12" sm="6" lg="3" v-for="(stat, index) in stats" :key="index">
+        <v-card 
+          class="stat-card innovative-card" 
+          :class="`stat-card-${stat.color}`"
+          elevation="0"
+          :style="{ animationDelay: `${index * 0.1}s` }"
+        >
+          <!-- Animated Background Pattern -->
+          <div class="card-pattern">
+            <div class="pattern-dot"></div>
+            <div class="pattern-dot"></div>
+            <div class="pattern-dot"></div>
+          </div>
+          
+          <!-- Card Content -->
+          <div class="stat-card-content">
+            <div class="stat-header">
+              <div class="stat-icon-wrapper modern-icon" :class="`icon-${stat.color}`">
+                <v-icon :size="32" :color="stat.iconColor">{{ stat.icon }}</v-icon>
+                <div class="icon-glow"></div>
+              </div>
+              <div v-if="stat.change" class="stat-badge" :class="stat.changeType">
+                <v-icon size="12">{{ stat.changeIcon }}</v-icon>
+                <span>{{ stat.change }}</span>
+              </div>
+            </div>
+            
+            <div class="stat-body">
+              <div class="stat-value-wrapper">
+                <div class="stat-value modern-value">{{ stat.value }}</div>
+                <div class="value-sparkline"></div>
+              </div>
+              <div class="stat-label modern-label">{{ stat.label }}</div>
+            </div>
+          </div>
+
+          <!-- Hover Effect Gradient -->
+          <div class="hover-gradient"></div>
+          
+          <!-- Progress Bar -->
+          <div class="stat-progress">
+            <div class="progress-bar" :class="`progress-${stat.color}`"></div>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Charts Section -->
+    <v-row class="mb-2">
+      <v-col cols="12" md="6">
+        <v-card class="chart-card modern-card" elevation="0">
+          <div class="chart-header-modern">
+            <div class="chart-header-left">
+              <div class="chart-icon-wrapper chart-icon-primary">
+                <v-icon size="20" color="primary-600">mdi-chart-line</v-icon>
+              </div>
+              <div>
+                <h3 class="chart-title">Registration Trend</h3>
+                <p class="chart-subtitle">Tren pendaftaran harian</p>
+              </div>
+            </div>
+            <v-btn-toggle v-model="queueTimePeriod" mandatory variant="outlined" color="primary-600" class="period-toggle" density="compact">
+              <v-btn size="small" value="day">Hari</v-btn>
+            </v-btn-toggle>
+          </div>
+          <v-card-text class="pa-3 chart-container">
+            <ClientOnly>
+              <Bar
+                v-if="queueChartData.labels && queueChartData.labels.length > 0"
+                :data="queueChartData"
+                :options="queueChartOptions"
+              />
+              <template #fallback>
+                <div class="chart-loading">Loading chart...</div>
+              </template>
+            </ClientOnly>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card class="chart-card modern-card" elevation="0">
+          <div class="chart-header-modern">
+            <div class="chart-header-left">
+              <div class="chart-icon-wrapper chart-icon-secondary">
+                <v-icon size="20" color="secondary-600">mdi-chart-bar</v-icon>
+              </div>
+              <div>
+                <h3 class="chart-title">Total Registrasi Perbulan</h3>
+                <p class="chart-subtitle">Data registrasi bulanan</p>
+              </div>
+            </div>
+            <div class="year-selector">
+              <v-chip
+                :color="activeYear === '2024' ? 'secondary-600' : 'neutral-300'"
+                :text-color="activeYear === '2024' ? 'white' : 'neutral-700'"
+                variant="flat"
+                class="year-chip mr-2"
+                @click="changeYear('2024')"
+                size="small"
+              >
+                2024
+              </v-chip>
+              <v-chip
+                :color="activeYear === '2025' ? 'secondary-600' : 'neutral-300'"
+                :text-color="activeYear === '2025' ? 'white' : 'neutral-700'"
+                variant="flat"
+                class="year-chip"
+                @click="changeYear('2025')"
+                size="small"
+              >
+                2025
+              </v-chip>
+            </div>
+          </div>
+          <v-card-text class="pa-3 chart-container">
+            <ClientOnly>
+              <Bar
+                v-if="barData.labels && barData.labels.length > 0"
+                :data="barData"
+                :options="barOptions"
+              />
+              <template #fallback>
+                <div class="chart-loading">Loading chart...</div>
+              </template>
+            </ClientOnly>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-card class="chart-card modern-card" elevation="0">
+          <div class="chart-header-modern">
+            <div class="chart-header-left">
+              <div class="chart-icon-wrapper chart-icon-success">
+                <v-icon size="20" color="success-600">mdi-pulse</v-icon>
+              </div>
+              <div>
+                <h3 class="chart-title">Realtime Check-in Velocity</h3>
+                <p class="chart-subtitle">Kecepatan check-in realtime</p>
+              </div>
+            </div>
+            <v-chip size="small" color="success-600" class="live-chip" variant="flat">
+              <v-icon start size="small" class="pulse-icon">mdi-circle</v-icon>
+              Live
+            </v-chip>
+          </div>
+          <v-card-text class="pa-3 chart-container">
+            <ClientOnly>
+              <Line
+                v-if="realtimeLineData.labels && realtimeLineData.labels.length > 0"
+                :data="realtimeLineData"
+                :options="lineOptions"
+              />
+              <template #fallback>
+                <div class="chart-loading">Loading chart...</div>
+              </template>
+            </ClientOnly>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-card class="chart-card modern-card" elevation="0">
+          <div class="chart-header-modern">
+            <div class="chart-header-left">
+              <div class="chart-icon-wrapper chart-icon-primary">
+                <v-icon size="20" color="primary-600">mdi-chart-pie</v-icon>
+              </div>
+              <div>
+                <h3 class="chart-title">Registrant Type Breakdown</h3>
+                <p class="chart-subtitle">Distribusi tipe registrasi</p>
+              </div>
+            </div>
+          </div>
+          <v-card-text class="d-flex justify-center align-center pa-3 chart-container">
+            <ClientOnly>
+              <Pie
+                v-if="pieData.labels && pieData.labels.length > 0"
+                :data="pieData"
+                :options="pieOptions"
+              />
+              <template #fallback>
+                <div class="chart-loading">Loading chart...</div>
+              </template>
+            </ClientOnly>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-overlay v-model="isLoading" contained class="align-center justify-center">
+      <v-progress-circular indeterminate size="64" color="secondary-600"></v-progress-circular>
+      <p class="loading-text">Loading dashboard...</p>
+    </v-overlay>
+    </v-container>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, onUnmounted } from 'vue';
+import { Bar, Pie, Line } from 'vue-chartjs';
+import { useAuth } from '~/composables/useAuth';
+import dayjs from 'dayjs';
+import weekday from 'dayjs/plugin/weekday';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import 'dayjs/locale/id';
+
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  ArcElement,
+  PointElement,
+  LineElement,
+} from 'chart.js';
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement, PointElement, LineElement);
+
+dayjs.extend(weekday);
+dayjs.extend(weekOfYear);
+dayjs.locale('id');
+
+definePageMeta({
+  middleware:['auth']
+})
+
+const user = ref(null);
+const isLoading = ref(false);
+const { checkAuth } = useAuth();
+
+// Color palette from assets/scss/_colors.scss
+const colors = {
+  primary: {
+    700: '#3556AE',
+    600: '#3A61C9',
+    500: '#567EE7',
+    400: '#7898EC',
+    300: '#9AB2F1',
+  },
+  secondary: {
+    700: '#E65A0D',
+    600: '#F16F29',
+    500: '#FF8441',
+    400: '#FF9D67',
+    300: '#FFB58D',
+  },
+  success: {
+    600: '#33A484',
+  },
+  neutral: {
+    100: '#FFFFFF',
+    300: '#F5F7FA',
+    500: '#CDD4DC',
+    700: '#717171',
+    900: '#212121',
+  },
+};
+
+const exportType = ref('JSON');
+const exportOptions = ref([
+  { title: 'JSON (.json)', type: 'json', icon: 'mdi-code-json' },
+  { title: 'CSV (.csv)', type: 'csv', icon: 'mdi-file-delimited' },
+  { title: 'Excel (.xlsx) - Server Only', type: 'excel', icon: 'mdi-file-excel' },
+  { title: 'PDF (.pdf) - Placeholder', type: 'pdf', icon: 'mdi-file-pdf' },
+]);
+
+const currentDate = ref('');
+const activeYear = ref('2025');
+const queueTimePeriod = ref('day'); 
+
+// New Data: Monthly Visit Trend (Area Chart)
+const visitTrendData = ref({
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des'],
+  datasets: [
+    {
+      label: 'Pasien Umum',
+      data: [850, 920, 880, 1050, 1120, 1080, 1200, 1150, 1080, 1190, 1250, 1300],
+      backgroundColor: 'rgba(86, 126, 231, 0.2)',
+      borderColor: colors.primary[500],
+      borderWidth: 3,
+      fill: true,
+      tension: 0.4,
+      pointRadius: 4,
+      pointHoverRadius: 6,
+      pointBackgroundColor: colors.primary[600],
+      pointBorderColor: '#fff',
+      pointBorderWidth: 2,
+    },
+    {
+      label: 'Pasien BPJS',
+      data: [1200, 1350, 1280, 1480, 1550, 1620, 1700, 1650, 1590, 1720, 1800, 1850],
+      backgroundColor: 'rgba(255, 132, 65, 0.2)',
+      borderColor: colors.secondary[500],
+      borderWidth: 3,
+      fill: true,
+      tension: 0.4,
+      pointRadius: 4,
+      pointHoverRadius: 6,
+      pointBackgroundColor: colors.secondary[600],
+      pointBorderColor: '#fff',
+      pointBorderWidth: 2,
+    }
+  ]
+});
+
+// New Stats Data - Updated Metrics
+const calculateStats = () => {
+  return [
+    {
+      label: 'Pasien Hari Ini',
+      value: '324',
+      icon: 'mdi-account-heart',
+      iconSize: 24,
+      iconColor: 'white',
+      color: 'primary',
+      change: '+18.2%',
+      changeType: 'positive',
+      changeIcon: 'mdi-trending-up'
+    },
+    {
+      label: 'Antrean Aktif',
+      value: '47',
+      icon: 'mdi-clock-fast',
+      iconSize: 24,
+      iconColor: 'white',
+      color: 'secondary',
+      change: '+5',
+      changeType: 'positive',
+      changeIcon: 'mdi-arrow-up'
+    },
+    {
+      label: 'Rata-rata Tunggu',
+      value: '12 min',
+      icon: 'mdi-timer-outline',
+      iconSize: 24,
+      iconColor: 'white',
+      color: 'success',
+      change: '-3 min',
+      changeType: 'positive',
+      changeIcon: 'mdi-trending-down'
+    },
+    {
+      label: 'Tingkat Kehadiran',
+      value: '89.5%',
+      icon: 'mdi-check-circle',
+      iconSize: 24,
+      iconColor: 'white',
+      color: 'primary',
+      change: '+2.3%',
+      changeType: 'positive',
+      changeIcon: 'mdi-trending-up'
+    }
+  ];
+};
+
+const stats = ref(calculateStats());
+
+// --- REALTIME CHECK-IN VELOCITY CHART - Direct data ---
+const realtimeLineData = ref({
+  labels: ['13:00:00', '13:00:30', '13:01:00', '13:01:30', '13:02:00', '13:02:30', '13:03:00', '13:03:30', '13:04:00', '13:04:30', '13:05:00', '13:05:30', '13:06:00', '13:06:30', '13:07:00'],
+  datasets: [
+    {
+      label: 'Check-ins/min',
+      backgroundColor: 'rgba(255, 132, 65, 0.15)', 
+      borderColor: colors.secondary[500], 
+      data: [42, 48, 45, 52, 50, 47, 55, 53, 49, 51, 48, 54, 52, 50, 46],
+      fill: true,
+      tension: 0.4, 
+      borderWidth: 3, 
+      pointRadius: 5, 
+      pointHoverRadius: 8,
+      pointBackgroundColor: colors.secondary[600],
+      pointBorderColor: '#fff',
+      pointBorderWidth: 2,
+    },
+  ],
+});
+
+const lineOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: { 
+    duration: 0,
+    easing: 'easeInOutQuart'
+  },
+  plugins: {
+    legend: { 
+      display: true,
+      position: 'top',
+      labels: {
+        usePointStyle: true,
+        padding: 15,
+        font: {
+          size: 12,
+          weight: 600
+        }
+      }
+    },
+    tooltip: {
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      padding: 12,
+      titleFont: { size: 13, weight: 600 },
+      bodyFont: { size: 12 },
+      cornerRadius: 8,
+      displayColors: true
+    },
+    title: { display: false }
+  },
+  scales: {
+    y: {
+      beginAtZero: true,
+      suggestedMax: 80,
+      title: { 
+        display: true, 
+        text: 'Check-ins per Minute',
+        font: { size: 12, weight: 600 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      },
+      grid: { 
+        color: 'rgba(0, 0, 0, 0.05)',
+        drawBorder: false
+      },
+      ticks: {
+        font: { size: 11 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      }
+    },
+    x: {
+      title: { 
+        display: true, 
+        text: 'Time (HH:MM:SS)',
+        font: { size: 12, weight: 600 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      },
+      grid: { display: false },
+      ticks: {
+        font: { size: 11 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      }
+    }
+  }
+});
+// --- END SIMPLIFIED REALTIME CHART ---
+
+// Single onMounted
+onMounted(async () => {
+  console.log('📊 Dashboard mounted');
+  try {
+    const sessionUser = await checkAuth();
+    if (sessionUser) {
+      user.value = sessionUser;
+      currentDate.value = dayjs().format('dddd, DD MMMM YYYY');
+      
+      // Recalculate stats after data is refreshed
+      stats.value = calculateStats();
+      
+      // Log data for debugging
+      console.log('📊 Queue Chart Data:', queueChartData.value);
+      console.log('📊 Bar Chart Data:', barData.value);
+      console.log('📊 Realtime Line Data:', realtimeLineData.value);
+      console.log('📊 Pie Data:', pieData.value);
+      console.log('✅ Dashboard loaded successfully with dummy data');
+    }
+  } catch (error) {
+    console.error('❌ Auth check error:', error);
+  }
+});
+
+// Clean onUnmounted
+onUnmounted(() => {
+  console.log('🧹 Dashboard unmounting');
+});
+
+const changeYear = (year) => {
+  activeYear.value = year;
+};
+
+const getKpiData = () => {
+  return [
+    { name: 'Antrean Online', value: 150 },
+    { name: 'Antrean MJKN', value: 100 },
+    { name: 'Total Kunjungan', value: 500 },
+    { name: 'Avg. Check-in Time', value: '7.5s' },
+  ];
+};
+
+const convertJsonToCsv = (jsonData, fields) => {
+  if (!jsonData.length) return '';
+  
+  const header = fields.join(',');
+  
+  const csv = jsonData.map(row => 
+    fields.map(fieldName => {
+      let value = row[fieldName];
+      if (typeof value === 'string') {
+        value = `"${value.replace(/"/g, '""')}"`;
+      }
+      return value;
+    }).join(',')
+  ).join('\n');
+
+  return header + '\n' + csv;
+};
+
+const downloadFile = (data, filename, mimeType) => {
+  const dataStr = `data:${mimeType};charset=utf-8,` + encodeURIComponent(data);
+  const downloadAnchorNode = document.createElement('a');
+  downloadAnchorNode.setAttribute("href", dataStr);
+  downloadAnchorNode.setAttribute("download", filename);
+  document.body.appendChild(downloadAnchorNode);
+  downloadAnchorNode.click();
+  downloadAnchorNode.remove();
+}
+
+const handleExport = (type) => {
+  exportType.value = type.toUpperCase();
+  const filenamePrefix = "antrean_data_" + dayjs().format('YYYYMMDD');
+  
+  const dataToExport = mockQueueData.value;
+  
+  if (type === 'json') {
+    downloadFile(JSON.stringify(dataToExport, null, 2), `${filenamePrefix}.json`, 'application/json');
+    alert("Data Antrean berhasil diexport sebagai JSON! ✅");
+    
+  } else if (type === 'csv') {
+    const fields = ['date', 'registrants', 'attendees'];
+    const csvContent = convertJsonToCsv(dataToExport, fields);
+    
+    const kpiData = getKpiData().map(kpi => `# ${kpi.name}: ${kpi.value}`).join('\n');
+    const finalCsvContent = kpiData + '\n' + csvContent;
+    
+    downloadFile(finalCsvContent, `${filenamePrefix}.csv`, 'text/csv');
+    alert("Data Antrean berhasil diexport sebagai CSV! 📊");
+    
+  } else if (type === 'excel') {
+    alert("Excel (.xlsx) export requires a dedicated server endpoint. Simulating download... ⚠️");
+    
+  } else if (type === 'pdf') {
+    alert("PDF (.pdf) export requires client-side libraries (like jsPDF) or a server service. Simulating download... 📝");
+  }
+};
+
+// Direct queue chart data - simpler approach
+const queueChartData = ref({
+  labels: ['Min, 14/01', 'Sel, 15/01', 'Rab, 16/01', 'Kam, 17/01', 'Jum, 18/01', 'Sab, 19/01', 'Min, 20/01'],
+  datasets: [
+    {
+      label: 'Registrants',
+      backgroundColor: colors.primary[300], 
+      borderColor: colors.primary[500],
+      data: [320, 450, 380, 520, 410, 490, 560],
+      borderRadius: 8,
+      borderSkipped: false,
+      borderWidth: 2,
+    },
+    {
+      label: 'Attendees',
+      backgroundColor: 'transparent', 
+      borderColor: colors.secondary[500],
+      data: [280, 400, 340, 480, 370, 450, 520],
+      type: 'line',
+      pointRadius: 6,
+      pointHoverRadius: 8,
+      pointBackgroundColor: colors.secondary[600],
+      pointBorderColor: '#fff',
+      pointBorderWidth: 2,
+      tension: 0.4,
+      borderWidth: 3,
+      fill: false,
+    },
+  ],
+});
+
+const queueChartOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { 
+      display: true, 
+      position: 'top',
+      labels: {
+        usePointStyle: true,
+        padding: 15,
+        font: {
+          size: 12,
+          weight: 600
+        }
+      }
+    },
+    tooltip: {
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      padding: 12,
+      titleFont: { size: 13, weight: 600 },
+      bodyFont: { size: 12 },
+      cornerRadius: 8,
+      displayColors: true
+    }
+  },
+  scales: {
+    y: {
+      beginAtZero: true,
+      title: { 
+        display: true, 
+        text: 'Count',
+        font: { size: 12, weight: 600 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      },
+      grid: { 
+        display: true, 
+        color: 'rgba(0, 0, 0, 0.05)',
+        drawBorder: false
+      },
+      ticks: {
+        font: { size: 11 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      }
+    },
+    x: {
+      grid: { display: false },
+      ticks: {
+        font: { size: 11 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      }
+    }
+  }
+});
+
+// Monthly registration data - more realistic progression
+const visitorData2024 = [
+  180, 220, 280, 320, 350, 420, 
+  480, 520, 490, 450, 580, 650
+];
+
+const visitorData2025 = [
+  220, 280, 380, 450, 420, 580, 
+  650, 720, 680, 620, 780, 850
+];
+
+// Conversion rate data (percentage)
+const conversionRate2024 = [2.2, 2.8, 3.5, 3.9, 3.7, 4.6, 5.2, 5.5, 5.1, 4.8, 6.0, 6.8];
+const conversionRate2025 = [2.8, 3.5, 4.2, 4.8, 4.5, 5.8, 6.5, 6.2, 6.0, 5.5, 7.2, 8.0];
+
+// Direct bar chart data - simpler approach
+const barData = computed(() => {
+  const dataForYear = activeYear.value === '2024' ? visitorData2024 : visitorData2025;
+  const conversionData = activeYear.value === '2024' ? conversionRate2024 : conversionRate2025;
+
+  return {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+    datasets: [
+      {
+        label: 'Total Registrants',
+        backgroundColor: colors.primary[300], 
+        borderColor: colors.primary[500],
+        data: dataForYear,
+        yAxisID: 'y1',
+        type: 'bar',
+        borderRadius: 8,
+        borderSkipped: false,
+        borderWidth: 2,
+      },
+      {
+        label: 'Conv. Rate (%)',
+        borderColor: colors.secondary[500], 
+        backgroundColor: 'transparent',
+        data: conversionData,
+        yAxisID: 'y2',
+        type: 'line',
+        pointRadius: 6,
+        pointHoverRadius: 8,
+        pointBackgroundColor: colors.secondary[600],
+        pointBorderColor: '#fff',
+        pointBorderWidth: 2,
+        tension: 0.4,
+        borderWidth: 3,
+        fill: false,
+      }
+    ],
+  };
+});
+
+const barOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { 
+      display: true, 
+      position: 'top',
+      labels: {
+        usePointStyle: true,
+        padding: 15,
+        font: {
+          size: 12,
+          weight: 600
+        }
+      }
+    },
+    tooltip: {
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      padding: 12,
+      titleFont: { size: 13, weight: 600 },
+      bodyFont: { size: 12 },
+      cornerRadius: 8,
+      displayColors: true
+    }
+  },
+  scales: {
+    y1: {
+      position: 'left',
+      beginAtZero: true,
+      title: { 
+        display: true, 
+        text: 'Registrants',
+        font: { size: 12, weight: 600 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      },
+      grid: { 
+        display: false,
+        drawBorder: false
+      },
+      ticks: {
+        font: { size: 11 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      }
+    },
+    y2: {
+      position: 'right',
+      beginAtZero: true,
+      suggestedMax: 10,
+      title: { 
+        display: true, 
+        text: 'Conv. Rate (%)',
+        font: { size: 12, weight: 600 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      },
+      grid: { 
+        drawOnChartArea: false,
+        drawBorder: false
+      },
+      ticks: {
+        font: { size: 11 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      }
+    },
+    x: {
+      grid: { display: false },
+      ticks: {
+        font: { size: 11 },
+        color: 'rgba(0, 0, 0, 0.6)'
+      }
+    }
+  }
+});
+
+// Direct pie chart data - simpler approach
+const pieData = ref({
+  labels: ['Offline Registrants', 'Online Registrants'],
+  datasets: [
+    {
+      label: 'Registrant Type',
+      backgroundColor: [
+        colors.secondary[500], // Orange for offline
+        colors.primary[400]    // Blue for online
+      ], 
+      hoverBackgroundColor: [
+        colors.secondary[700], 
+        colors.primary[600]
+      ], 
+      data: [1245, 2834], // ~30% offline, ~70% online
+      borderWidth: 3, 
+      borderColor: colors.neutral[100],
+      hoverBorderWidth: 4,
+    },
+  ],
+});
+
+const pieOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'bottom',
+      labels: {
+        usePointStyle: true,
+        padding: 20,
+        font: {
+          size: 12,
+          weight: 600
+        },
+        color: 'rgba(0, 0, 0, 0.8)'
+      }
+    },
+    tooltip: {
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      padding: 12,
+      titleFont: { size: 13, weight: 600 },
+      bodyFont: { size: 12 },
+      cornerRadius: 8,
+      displayColors: true,
+      callbacks: {
+        label: function(context) {
+          const label = context.label || '';
+          const value = context.parsed || 0;
+          const total = context.dataset.data.reduce((a, b) => a + b, 0);
+          const percentage = ((value / total) * 100).toFixed(1);
+          return `${label}: ${value} (${percentage}%)`;
+        }
+      }
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@use '~/assets/scss/_colors.scss' as colorVars;
+
+/* Dashboard Wrapper */
+.dashboard-wrapper {
+  min-height: 100vh;
+  background: var(--color-neutral-300);
+}
+
+/* Hero Header Section - Compact Design */
+.dashboard-hero {
+  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 50%, var(--color-secondary-600) 100%);
+  box-shadow: 0 8px 32px rgba(58, 97, 201, 0.25);
+  position: relative;
+  overflow: hidden;
+  min-height: 160px;
+
+  /* Animated Background Orbs */
+  .animated-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+  }
+
+  .gradient-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.4;
+    animation: float 20s ease-in-out infinite;
+  }
+
+  .orb-1 {
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
+    top: -150px;
+    left: -80px;
+    animation-delay: 0s;
+  }
+
+  .orb-2 {
+    width: 250px;
+    height: 250px;
+    background: radial-gradient(circle, rgba(255, 132, 65, 0.3) 0%, transparent 70%);
+    top: 50%;
+    right: -100px;
+    animation-delay: 7s;
+  }
+
+  .orb-3 {
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(circle, rgba(86, 126, 231, 0.2) 0%, transparent 70%);
+    bottom: -80px;
+    left: 30%;
+    animation-delay: 14s;
+  }
+
+  .hero-container {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(30px, -30px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+}
+
+/* Hero Content Styling */
+.welcome-badge {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: 50px;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  
+  .wave-animation {
+    animation: wave 2s ease-in-out infinite;
+  }
+}
+
+@keyframes wave {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(20deg); }
+  75% { transform: rotate(-20deg); }
+}
+
+.hero-content {
+  color: white;
+}
+
+.dashboard-title {
+  font-size: 32px;
+  font-weight: 900;
+  color: white;
+  margin: 0 0 6px 0;
+  line-height: 1.2;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  
+  .title-gradient {
+    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}
+
+.dashboard-subtitle {
+  font-size: 15px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.95);
+  margin: 0;
+}
+
+.user-name {
+  font-weight: 700;
+  color: var(--color-secondary-200);
+  text-shadow: 0 2px 8px rgba(255, 181, 141, 0.3);
+}
+
+.greeting-emoji {
+  margin-left: 6px;
+  font-size: 18px;
+  display: inline-block;
+  animation: sparkle 2s ease-in-out infinite;
+}
+
+@keyframes sparkle {
+  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
+  50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
+}
+
+.quick-stats {
+  display: none; // Hidden untuk compact mode
+}
+
+.hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* Glass Effect Buttons */
+.glass-effect {
+  background: rgba(255, 255, 255, 0.15) !important;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.25) !important;
+    transform: translateY(-4px) scale(1.02);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.export-btn {
+  text-transform: none;
+  font-weight: 700;
+  font-size: 13px;
+  letter-spacing: 0.3px;
+  border-radius: 12px;
+  padding: 8px 16px !important;
+  color: white !important;
+}
+
+.export-menu {
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+}
+
+.export-item {
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
+    transform: translateX(8px);
+  }
+}
+
+.date-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  
+  .date-icon-wrapper {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: white;
+  }
+  
+  .date-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  
+  .date-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .date-text {
+    font-weight: 700;
+    font-size: 12px;
+    color: white;
+  }
+}
+
+/* Compact Background */
+.dashboard-bg {
+  background: var(--color-neutral-300);
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
+  min-height: auto;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      radial-gradient(circle at 20% 50%, rgba(58, 97, 201, 0.02) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(241, 111, 41, 0.02) 0%, transparent 50%);
+    pointer-events: none;
+  }
+}
+
+/* Compact Stats Cards */
+.stats-row {
+  margin-top: -40px;
+  position: relative;
+  z-index: 3;
+  
+  :deep(.v-col) {
+    padding: 6px !important;
+    display: flex;
+  }
+}
+
+.innovative-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 10px 40px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  animation: fadeInUp 0.8s ease-out both;
+
+  &:hover {
+    transform: translateY(-12px) scale(1.02);
+    box-shadow: 
+      0 20px 60px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(255, 255, 255, 0.8) inset;
+    
+    .icon-glow {
+      opacity: 0.6;
+      transform: scale(1.5);
+    }
+    
+    .hover-gradient {
+      opacity: 1;
+    }
+    
+    .progress-bar {
+      width: 100%;
+    }
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Animated Background Pattern */
+.card-pattern {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 150px;
+  height: 150px;
+  opacity: 0.05;
+  pointer-events: none;
+  
+  .pattern-dot {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: currentColor;
+    border-radius: 50%;
+    animation: pulse-dot 3s ease-in-out infinite;
+    
+    &:nth-child(1) {
+      top: 20px;
+      right: 30px;
+      animation-delay: 0s;
+    }
+    
+    &:nth-child(2) {
+      top: 50px;
+      right: 60px;
+      animation-delay: 1s;
+    }
+    
+    &:nth-child(3) {
+      top: 80px;
+      right: 20px;
+      animation-delay: 2s;
+    }
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 1;
+  }
+}
+
+/* Compact Stat Card Layout */
+.stat-card-content {
+  padding: 16px;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 130px;
+  height: 100%;
+  flex: 1;
+}
+
+.stat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.modern-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  .icon-glow {
+    position: absolute;
+    inset: -6px;
+    background: currentColor;
+    border-radius: 16px;
+    opacity: 0;
+    filter: blur(16px);
+    transition: all 0.4s ease;
+  }
+  
+  :deep(.v-icon) {
+    font-size: 24px !important;
+  }
+}
+
+.stat-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 4px 8px;
+  border-radius: 50px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  
+  &.positive {
+    background: var(--color-success-100);
+    color: var(--color-success-700);
+    box-shadow: 0 2px 8px rgba(51, 164, 132, 0.2);
+  }
+}
+
+.stat-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.stat-value-wrapper {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.modern-value {
+  font-size: 28px;
+  font-weight: 900;
+  color: var(--color-neutral-900);
+  line-height: 1;
+  font-family: 'Inter', sans-serif;
+  letter-spacing: -0.5px;
+}
+
+.modern-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: 1.3;
+}
+
+.icon-primary {
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.3);
+}
+
+.icon-secondary {
+  background: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(241, 111, 41, 0.3);
+}
+
+.icon-success {
+  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(51, 164, 132, 0.3);
+}
+
+/* Hover Gradient Effect */
+.hover-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.05) 100%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+
+/* Animated Progress Bar */
+.stat-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  border-radius: 0 0 24px 24px;
+}
+
+.progress-bar {
+  height: 100%;
+  width: 0;
+  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &.progress-primary {
+    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  }
+  
+  &.progress-secondary {
+    background: linear-gradient(90deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
+  }
+  
+  &.progress-success {
+    background: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  }
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--color-neutral-900);
+  line-height: 1;
+  margin-bottom: 4px;
+  font-family: 'Inter', sans-serif;
+}
+
+.stat-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: 1.4;
+  margin-bottom: 8px;
+}
+
+.stat-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 6px;
+  margin-top: 4px;
+
+  &.positive {
+    color: var(--color-success-600);
+    background: var(--color-success-100);
+  }
+
+  &.negative {
+    color: var(--color-danger-600);
+    background: var(--color-danger-100);
+  }
+}
+
+.stat-card-decoration {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 120px;
+  height: 120px;
+  opacity: 0.1;
+  background: radial-gradient(circle, currentColor 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.stat-card-primary .stat-card-decoration {
+  color: var(--color-primary-600);
+}
+
+.stat-card-secondary .stat-card-decoration {
+  color: var(--color-secondary-600);
+}
+
+.stat-card-success .stat-card-decoration {
+  color: var(--color-success-600);
+}
+
+/* Compact Chart Cards */
+.v-row:not(.stats-row) {
+  :deep(.v-col) {
+    padding: 6px !important;
+    display: flex;
+  }
+}
+
+.modern-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 10px 40px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(58, 97, 201, 0.05) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+
+  &:hover {
+    box-shadow: 
+      0 20px 60px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(255, 255, 255, 0.8) inset;
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-4px);
+
+    &::before {
+      opacity: 1;
+    }
+
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.chart-card {
+  height: 320px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-header-modern {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(245, 247, 250, 0.3) 100%);
+  position: relative;
+  z-index: 1;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 18px;
+    right: 18px;
+    height: 2px;
+    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
+    opacity: 0.5;
+    border-radius: 2px;
+  }
+}
+
+.chart-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chart-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: 14px;
+    background: inherit;
+    opacity: 0;
+    filter: blur(10px);
+    transition: opacity 0.4s ease;
+  }
+  
+  :deep(.v-icon) {
+    font-size: 18px !important;
+  }
+}
+
+.chart-header-modern:hover .chart-icon-wrapper {
+  transform: scale(1.08) rotate(5deg);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+  
+  &::before {
+    opacity: 0.5;
+  }
+}
+
+.chart-icon-primary {
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  color: white;
+}
+
+.chart-icon-secondary {
+  background: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
+  color: white;
+}
+
+.chart-icon-success {
+  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  color: white;
+}
+
+.chart-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-neutral-900);
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.3px;
+}
+
+.chart-subtitle {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-neutral-600);
+  margin: 3px 0 0 0;
+  opacity: 0.8;
+  letter-spacing: 0.2px;
+}
+
+.period-toggle {
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 10px;
+  border: 1.5px solid var(--color-primary-200);
+  background: var(--color-primary-50);
+  overflow: hidden;
+  
+  :deep(.v-btn) {
+    transition: all 0.3s ease;
+    padding: 4px 10px !important;
+    
+    &.v-btn--active {
+      background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+      color: white;
+      box-shadow: 0 2px 8px rgba(58, 97, 201, 0.25);
+    }
+  }
+}
+
+.year-selector {
+  display: flex;
+  gap: 8px;
+}
+
+.year-chip {
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 50px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 6px 12px;
+  border: 1.5px solid transparent;
+
+  &:hover {
+    transform: translateY(-1px) scale(1.03);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.live-chip {
+  font-weight: 700;
+  font-size: 11px;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%);
+  box-shadow: 0 2px 10px rgba(51, 164, 132, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 5px 12px !important;
+  border-radius: 50px !important;
+}
+
+.pulse-icon {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(0.9);
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
+  }
+}
+
+.chart-card .v-card-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-neutral-100);
+}
+
+.chart-container {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(245, 247, 250, 0.1) 100%);
+  border-radius: 0 0 24px 24px;
+  overflow: hidden;
+}
+
+.chart-wrapper {
+  width: 100% !important;
+  height: 100% !important;
+  max-height: 100%;
+  
+  canvas {
+    max-height: 100% !important;
+  }
+}
+
+.pie-chart {
+  max-width: 400px;
+  max-height: 400px;
+  margin: 0 auto;
+}
+
+/* Enhanced Chart styling */
+:deep(canvas) {
+  border-radius: 12px;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.05));
+}
+
+:deep(.chartjs-render-monitor) {
+  border-radius: 12px;
+}
+
+/* Animate charts on hover */
+.chart-card:hover :deep(canvas) {
+  transform: scale(1.01);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Enhanced chart card animations */
+.chart-card {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Smooth transitions for chart interactions */
+:deep(.chartjs-tooltip) {
+  transition: all 0.2s ease;
+}
+
+/* Better legend styling */
+:deep(.chartjs-legend) {
+  font-family: 'Inter', sans-serif;
+}
+
+.chart-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  gap: 16px;
+  
+  &::before {
+    content: '';
+    width: 48px;
+    height: 48px;
+    border: 4px solid rgba(102, 126, 234, 0.1);
+    border-top-color: #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  
+  &::after {
+    content: 'Loading chart data...';
+    color: var(--color-neutral-600);
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Responsive chart container */
+@media (max-width: 960px) {
+  .chart-card {
+    height: 280px;
+  }
+  
+  .chart-loading {
+    height: 200px;
+  }
+}
+
+/* Loading */
+.loading-text {
+  margin-top: 16px;
+  color: var(--color-neutral-900);
+  font-weight: 600;
+  font-size: 16px;
+}
+
+/* Animations for Creative Elements */
+.animate-fade-in {
+  animation: fadeIn 0.8s ease-out;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.8s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Compact Responsive */
+@media (max-width: 960px) {
+  .dashboard-hero {
+    min-height: 140px;
+    
+    .hero-container {
+      padding: 16px 12px !important;
+    }
+  }
+
+  .dashboard-title {
+    font-size: 24px;
+  }
+
+  .dashboard-subtitle {
+    font-size: 13px;
+  }
+
+  .hero-actions {
+    width: 100%;
+    margin-top: 12px;
+    
+    .export-btn {
+      font-size: 12px;
+      padding: 6px 12px !important;
+    }
+    
+    .date-card {
+      font-size: 11px;
+    }
+  }
+
+  .stats-row {
+    margin-top: -30px;
+    
+    :deep(.v-col) {
+      display: flex;
+    }
+  }
+  
+  .innovative-card {
+    height: 100%;
+  }
+
+  .stat-card-content {
+    padding: 14px;
+    min-height: 120px;
+  }
+
+  .modern-value {
+    font-size: 24px;
+  }
+
+  .modern-label {
+    font-size: 10px;
+  }
+
+  .modern-icon {
+    width: 42px;
+    height: 42px;
+  }
+
+  .chart-header-modern {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px 14px;
+  }
+
+  .chart-title {
+    font-size: 14px;
+  }
+  
+  .chart-subtitle {
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 600px) {
+  .dashboard-bg {
+    padding: 8px !important;
+  }
+  
+  .stats-row,
+  .v-row:not(.stats-row) {
+    :deep(.v-col) {
+      display: flex;
+    }
+  }
+  
+  .innovative-card,
+  .modern-card {
+    height: 100%;
+  }
+
+  .stat-card-content {
+    padding: 12px;
+    min-height: 110px;
+  }
+
+  .modern-icon {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .chart-card {
+    height: 260px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/public/love logo biru small.png b/public/love logo biru small.png
new file mode 100644
index 0000000..67d1510
Binary files /dev/null and b/public/love logo biru small.png differ