From 4e9de2d3c3fc2709e03b14de5440c6609c8b7f14 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 13 May 2026 11:09:41 +0100
Subject: [PATCH] refactor(dashboard): extract KpiRow with KpiCard components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/components/dashboard/KpiRow.vue | 54 +++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 web/src/components/dashboard/KpiRow.vue

diff --git a/web/src/components/dashboard/KpiRow.vue b/web/src/components/dashboard/KpiRow.vue
new file mode 100644
index 0000000..a5d1f78
--- /dev/null
+++ b/web/src/components/dashboard/KpiRow.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import KpiCard from '@/components/dashboard/KpiCard.vue'
+import { formatDuration } from '@/lib/utils'
+import type { KpiSummary } from '@/types'
+
+defineProps<{
+  summary: KpiSummary | null
+  loading: boolean
+}>()
+</script>
+
+<template>
+  <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
+    <KpiCard
+      label="Total Hours"
+      :value="summary ? formatDuration(summary.total_hours) : '—'"
+      icon="clock"
+      :loading="loading"
+      :hero="true"
+    />
+    <KpiCard
+      label="Working Days"
+      :value="summary?.working_days ?? '—'"
+      icon="calendar"
+      :loading="loading"
+    />
+    <KpiCard
+      label="Projects"
+      :value="summary?.total_projects ?? '—'"
+      icon="folder"
+      :loading="loading"
+      to="/projects"
+    />
+    <KpiCard
+      label="Avg / Day"
+      :value="summary ? formatDuration(summary.avg_hours_per_day) : '—'"
+      icon="trending-up"
+      :loading="loading"
+    />
+    <KpiCard
+      label="Top Project"
+      :value="summary?.top_project ?? '—'"
+      icon="star"
+      :loading="loading"
+      to="/projects"
+    />
+    <KpiCard
+      label="Commits"
+      :value="summary?.total_commits ?? '—'"
+      icon="git"
+      :loading="loading"
+    />
+  </div>
+</template>