From 4baebf776158cdc868c83a560dfcfe687839d3c8 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 20 Jul 2026 11:26:50 -0500
Subject: [PATCH] chore(analytics): fill Analytics tab with Progress quota bars

Add a thin DkProgress wrapper over the v0 Progress compound and replace
the Analytics "coming soon" stub with four product-shaped quota metrics
(request plan, active keys, error budget, rate-limit headroom).
---
 src/components/DkProgress.vue | 80 +++++++++++++++++++++++++++++++++++
 src/pages/DashboardPage.vue   | 73 ++++++++++++++++++++++++++++++--
 2 files changed, 149 insertions(+), 4 deletions(-)
 create mode 100644 src/components/DkProgress.vue

diff --git a/src/components/DkProgress.vue b/src/components/DkProgress.vue
new file mode 100644
index 0000000..b2b340c
--- /dev/null
+++ b/src/components/DkProgress.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+  import { Progress } from '@vuetify/v0'
+
+  defineOptions({ name: 'DkProgress' })
+
+  const {
+    max = 100,
+    label,
+  } = defineProps<{
+    max?: number
+    label?: string
+  }>()
+
+  const model = defineModel<number>({ default: 0 })
+</script>
+
+<template>
+  <Progress.Root
+    v-model="model"
+    :max="max"
+    class="dk-progress"
+  >
+    <div v-if="label || $slots.default" class="dk-progress__header">
+      <Progress.Label v-if="label" class="dk-progress__label">{{ label }}</Progress.Label>
+      <slot />
+      <Progress.Value v-slot="{ percent, total }" class="dk-progress__value">
+        <slot name="value" :percent="percent" :total="total" :max="max">
+          {{ Math.round(percent) }}%
+        </slot>
+      </Progress.Value>
+    </div>
+
+    <Progress.Track class="dk-progress__track">
+      <Progress.Fill class="dk-progress__fill" />
+    </Progress.Track>
+  </Progress.Root>
+</template>
+
+<style scoped>
+  .dk-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .dk-progress__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .dk-progress__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--v0-theme-text);
+  }
+
+  .dk-progress__value {
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--v0-theme-muted);
+    margin-left: auto;
+  }
+
+  .dk-progress__track {
+    position: relative;
+    height: 0.5rem;
+    border-radius: 999px;
+    background: var(--v0-theme-border);
+    overflow: hidden;
+  }
+
+  .dk-progress__fill {
+    height: 100%;
+    border-radius: 999px;
+    background: var(--v0-theme-primary);
+    transition: width 0.2s ease;
+  }
+</style>
diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index 88bd8f1..29b72ac 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -20,6 +20,7 @@
   import DkCommandPalette from '../components/DkCommandPalette.vue'
   import DkLogo from '../components/DkLogo.vue'
   import DkCreateKeyDialog from '../components/DkCreateKeyDialog.vue'
+  import DkProgress from '../components/DkProgress.vue'
   import { useKeys } from '../composables/useKeys'
 
   defineOptions({ name: 'DkDashboardPage' })
@@ -37,6 +38,39 @@
     { label: 'Error Rate', value: '0.3%', icon: mdiAlertCircleOutline },
   ]
 
+  // Demo analytics quotas — product-shaped Progress surfaces, not live metrics.
+  const analytics = [
+    {
+      id: 'requests',
+      label: 'Monthly request quota',
+      value: 240_000,
+      max: 1_000_000,
+      format: (total: number, max: number) =>
+        `${(total / 1000).toFixed(0)}k / ${(max / 1000).toFixed(0)}k`,
+    },
+    {
+      id: 'keys',
+      label: 'Active keys vs plan limit',
+      value: 24,
+      max: 50,
+      format: (total: number, max: number) => `${total} / ${max}`,
+    },
+    {
+      id: 'errors',
+      label: 'Error budget remaining',
+      value: 97,
+      max: 100,
+      format: (total: number) => `${total}% remaining`,
+    },
+    {
+      id: 'rate',
+      label: 'Rate-limit headroom',
+      value: 720,
+      max: 1000,
+      format: (total: number, max: number) => `${total} / ${max} rpm`,
+    },
+  ]
+
   const sidebarSections = [
     { label: 'Overview', icon: mdiViewDashboard, items: ['All Keys', 'Create New', 'Rotate'] },
     { label: 'Management', icon: mdiCog, items: ['Overview', 'Usage', 'Errors'] },
@@ -159,10 +193,23 @@
           />
         </template>
         <template #analytics>
-          <DkCard>
-            <h3 class="dk-dashboard__tab-title">Analytics</h3>
-            <p class="dk-dashboard__tab-desc">Usage analytics and charts coming soon.</p>
-          </DkCard>
+          <div class="dk-dashboard__analytics">
+            <DkCard
+              v-for="metric in analytics"
+              :key="metric.id"
+              class="dk-dashboard__metric"
+            >
+              <DkProgress
+                :model-value="metric.value"
+                :max="metric.max"
+                :label="metric.label"
+              >
+                <template #value="{ total, max }">
+                  {{ metric.format(total, max) }}
+                </template>
+              </DkProgress>
+            </DkCard>
+          </div>
         </template>
         <template #settings>
           <DkCard>
@@ -315,4 +362,22 @@
   .dk-dashboard__tab-desc {
     color: var(--v0-theme-muted);
   }
+
+  .dk-dashboard__analytics {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+
+  .dk-dashboard__metric {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: 720px) {
+    .dk-dashboard__analytics {
+      grid-template-columns: 1fr;
+    }
+  }
 </style>