From e2f9f3536213ffd8add10a53ccc5d602db0b6b97 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 13 May 2026 11:09:46 +0100
Subject: [PATCH] refactor(dashboard): extract ProjectBreakdown and
 ToolUsageList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/dashboard/ProjectBreakdown.vue | 68 +++++++++++++++++++
 .../components/dashboard/ToolUsageList.vue    | 55 +++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 web/src/components/dashboard/ProjectBreakdown.vue
 create mode 100644 web/src/components/dashboard/ToolUsageList.vue

diff --git a/web/src/components/dashboard/ProjectBreakdown.vue b/web/src/components/dashboard/ProjectBreakdown.vue
new file mode 100644
index 0000000..c279320
--- /dev/null
+++ b/web/src/components/dashboard/ProjectBreakdown.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import Card from '@/components/ui/Card.vue'
+import CardHeader from '@/components/ui/CardHeader.vue'
+import CardTitle from '@/components/ui/CardTitle.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import Progress from '@/components/ui/Progress.vue'
+import { formatDuration } from '@/lib/utils'
+import type { ProjectSummary } from '@/types'
+
+defineProps<{
+  data: ProjectSummary[]
+  loading: boolean
+}>()
+
+const progressColor = (pct: number | null) => {
+  if (!pct) return 'default'
+  if (pct > 90) return 'danger'
+  if (pct > 70) return 'warning'
+  return 'success'
+}
+</script>
+
+<template>
+  <Card class="border-border/60 bg-card panel-glow">
+    <CardHeader class="pb-2">
+      <CardTitle class="text-xs font-semibold text-muted-foreground uppercase tracking-widest">Projects</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <!-- Loading skeleton -->
+      <div v-if="loading" class="space-y-3">
+        <div v-for="i in 5" :key="i" class="space-y-1.5">
+          <div class="flex justify-between">
+            <div class="h-3 rounded bg-muted animate-pulse" :style="{ width: `${80 + i * 15}px` }" />
+            <div class="h-3 w-12 bg-muted animate-pulse rounded" />
+          </div>
+          <div class="h-1.5 bg-muted animate-pulse rounded-full" />
+        </div>
+      </div>
+      <!-- Empty state -->
+      <div v-else-if="data.length === 0" class="flex flex-col items-center justify-center py-8 gap-2">
+        <svg class="h-8 w-8 text-muted-foreground/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7a2 2 0 012-2h3.586a1 1 0 01.707.293l1.414 1.414A1 1 0 0011.414 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
+        </svg>
+        <p class="text-xs text-muted-foreground">No project data yet</p>
+      </div>
+      <!-- List -->
+      <div v-else class="space-y-2.5">
+        <RouterLink
+          v-for="proj in data.slice(0, 8)"
+          :key="proj.project_id"
+          :to="`/projects/${proj.project_id}`"
+          class="block group"
+        >
+          <div class="flex items-center justify-between text-xs mb-1">
+            <span class="text-foreground truncate max-w-[160px] font-medium group-hover:text-primary transition-colors">{{ proj.display_name }}</span>
+            <span class="text-muted-foreground shrink-0 tabular-nums ml-2">{{ formatDuration(proj.total_hours) }}</span>
+          </div>
+          <Progress
+            v-if="proj.progress_pct !== null"
+            :value="proj.progress_pct"
+            :color="progressColor(proj.progress_pct)"
+          />
+        </RouterLink>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/web/src/components/dashboard/ToolUsageList.vue b/web/src/components/dashboard/ToolUsageList.vue
new file mode 100644
index 0000000..f6e2c43
--- /dev/null
+++ b/web/src/components/dashboard/ToolUsageList.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Card from '@/components/ui/Card.vue'
+import CardHeader from '@/components/ui/CardHeader.vue'
+import CardTitle from '@/components/ui/CardTitle.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+import type { ToolUsage } from '@/types'
+
+const props = defineProps<{
+  data: ToolUsage[]
+  loading: boolean
+}>()
+
+const maxToolPct = computed(() => Math.max(...props.data.map((t) => t.pct), 1))
+</script>
+
+<template>
+  <Card class="border-border/60 bg-card panel-glow">
+    <CardHeader class="pb-2">
+      <CardTitle class="text-xs font-semibold text-muted-foreground uppercase tracking-widest">Tool Usage</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <!-- Loading skeleton -->
+      <div v-if="loading" class="space-y-3">
+        <div v-for="i in 5" :key="i" class="flex items-center gap-2">
+          <div class="h-3 rounded bg-muted animate-pulse" :style="{ width: `${40 + i * 10}px` }" />
+          <div class="flex-1 h-2 bg-muted animate-pulse rounded-full" />
+          <div class="h-3 w-8 bg-muted animate-pulse rounded" />
+        </div>
+      </div>
+      <!-- Empty state -->
+      <div v-else-if="data.length === 0" class="flex flex-col items-center justify-center py-8 gap-2">
+        <svg class="h-8 w-8 text-muted-foreground/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        </svg>
+        <p class="text-xs text-muted-foreground">No tool data yet</p>
+      </div>
+      <!-- List -->
+      <div v-else class="space-y-2.5">
+        <div v-for="tool in data.slice(0, 8)" :key="tool.tool" class="flex items-center gap-2.5">
+          <span class="text-xs text-foreground w-24 truncate shrink-0 tabular-nums">{{ tool.tool }}</span>
+          <div class="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+            <div
+              class="h-full bg-primary/70 rounded-full transition-all duration-300"
+              :style="{ width: `${(tool.pct / maxToolPct) * 100}%` }"
+            />
+          </div>
+          <span class="text-xs text-muted-foreground w-9 text-right shrink-0 tabular-nums">
+            {{ (tool.pct ?? 0).toFixed(0) }}%
+          </span>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>