First pass

src/components/ClientChart.vue

@@ -0,0 +1,83 @@
+<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip,
+  Legend,
+  BarController
+} from 'chart.js';
+
+ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend, BarController);
+
+interface ClientData {
+  name: string;
+  totalTime: number;
+}
+
+const props = defineProps<{
+  clients: ClientData[];
+}>();
+
+const chartData = computed(() => ({
+  labels: props.clients.map(c => c.name),
+  datasets: [{
+    label: 'Time Tracked',
+    data: props.clients.map(c => c.totalTime / (1000 * 60)), // Convert to minutes
+    backgroundColor: '#6366f1',
+    borderColor: '#4f46e5',
+    borderWidth: 1,
+  }]
+}));
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      beginAtZero: true,
+      ticks: {
+        color: '#e2e8f0',
+        callback: function(value: number) {
+          const hours = Math.floor(value / 60);
+          const mins = value % 60;
+          return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
+        }
+      },
+      grid: {
+        color: '#334155'
+      }
+    },
+    x: {
+      ticks: {
+        color: '#e2e8f0'
+      },
+      grid: {
+        display: false
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: function(context: any) {
+          const minutes = Math.round(context.raw);
+          const hours = Math.floor(minutes / 60);
+          const mins = minutes % 60;
+          return ` ${hours}h ${mins}m`;
+        }
+      }
+    }
+  }
+};
+</script>