{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "time-tracker-timesheet",
  "title": "Time Tracker Timesheet",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/time-tracker-timesheet/TimeTrackerTimesheet.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport {\n  Briefcase,\n  Calendar,\n  CircleDollarSign,\n  Clock,\n  DollarSign,\n  Download,\n  Play,\n  Plus,\n  Square,\n  Trash2,\n  TrendingUp,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface Props {\n  title?: string\n  subtitle?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Time Tracker & Timesheet',\n  subtitle: 'Track live project hours, calculate client billing rates, and review weekly activity.',\n})\n\nexport interface ProjectOption {\n  id: string\n  name: string\n  client: string\n  rate: number\n  rateLabel: string\n  color: string\n  badgeClass: string\n  dotClass: string\n}\n\nexport interface TimeEntry {\n  id: string\n  task: string\n  projectId: string\n  projectName: string\n  clientName: string\n  projectBadgeClass: string\n  date: string\n  dateLabel: string\n  startTime: string\n  endTime: string\n  durationSeconds: number\n  isBillable: boolean\n  rate: number\n  amount: number\n}\n\nconst projects: ProjectOption[] = [\n  {\n    id: 'acme',\n    name: 'Acme Corp',\n    client: 'Acme Enterprises',\n    rate: 150,\n    rateLabel: '$150/hr',\n    color: 'blue',\n    badgeClass: 'bg-info/10 text-info border-info/20',\n    dotClass: 'bg-info',\n  },\n  {\n    id: 'stripe',\n    name: 'Stripe Retainer',\n    client: 'Stripe, Inc.',\n    rate: 175,\n    rateLabel: '$175/hr',\n    color: 'chart-2',\n    badgeClass: 'bg-chart-2/10 text-chart-2 border-chart-2/20',\n    dotClass: 'bg-chart-2',\n  },\n  {\n    id: 'linear',\n    name: 'Linear Sync',\n    client: 'Linear Orbit',\n    rate: 160,\n    rateLabel: '$160/hr',\n    color: 'chart-3',\n    badgeClass: 'bg-chart-3/10 text-chart-3 border-chart-3/20',\n    dotClass: 'bg-chart-3',\n  },\n  {\n    id: 'uipkge',\n    name: 'UIPKGE Core',\n    client: 'Internal OSS',\n    rate: 0,\n    rateLabel: 'Internal · $0/hr',\n    color: 'emerald',\n    badgeClass: 'bg-success/10 text-success border-success/20',\n    dotClass: 'bg-success',\n  },\n]\n\nconst initialEntries: TimeEntry[] = [\n  {\n    id: 'entry-1',\n    task: 'Refactoring OKLCH Color Engine & AST Parser',\n    projectId: 'acme',\n    projectName: 'Acme Corp',\n    clientName: 'Acme Enterprises',\n    projectBadgeClass: 'bg-info/10 text-info border-info/20',\n    date: '2026-08-21',\n    dateLabel: 'Today · Friday, Aug 21',\n    startTime: '09:00',\n    endTime: '11:30',\n    durationSeconds: 9000,\n    isBillable: true,\n    rate: 150,\n    amount: 375,\n  },\n  {\n    id: 'entry-2',\n    task: 'Webhook idempotency retry queue architecture',\n    projectId: 'stripe',\n    projectName: 'Stripe Retainer',\n    clientName: 'Stripe, Inc.',\n    projectBadgeClass: 'bg-chart-2/10 text-chart-2 border-chart-2/20',\n    date: '2026-08-21',\n    dateLabel: 'Today · Friday, Aug 21',\n    startTime: '13:00',\n    endTime: '15:45',\n    durationSeconds: 9900,\n    isBillable: true,\n    rate: 175,\n    amount: 481.25,\n  },\n  {\n    id: 'entry-3',\n    task: 'Weekly sprint retrospective & design token review',\n    projectId: 'uipkge',\n    projectName: 'UIPKGE Core',\n    clientName: 'Internal OSS',\n    projectBadgeClass: 'bg-success/10 text-success border-success/20',\n    date: '2026-08-21',\n    dateLabel: 'Today · Friday, Aug 21',\n    startTime: '16:00',\n    endTime: '17:30',\n    durationSeconds: 5400,\n    isBillable: false,\n    rate: 0,\n    amount: 0,\n  },\n  {\n    id: 'entry-4',\n    task: 'Bidirectional GraphQL sync engine & schema migrations',\n    projectId: 'linear',\n    projectName: 'Linear Sync',\n    clientName: 'Linear Orbit',\n    projectBadgeClass: 'bg-chart-3/10 text-chart-3 border-chart-3/20',\n    date: '2026-08-20',\n    dateLabel: 'Yesterday · Thursday, Aug 20',\n    startTime: '09:30',\n    endTime: '14:00',\n    durationSeconds: 16200,\n    isBillable: true,\n    rate: 160,\n    amount: 720,\n  },\n  {\n    id: 'entry-5',\n    task: 'Design system Figma token export automation',\n    projectId: 'acme',\n    projectName: 'Acme Corp',\n    clientName: 'Acme Enterprises',\n    projectBadgeClass: 'bg-info/10 text-info border-info/20',\n    date: '2026-08-20',\n    dateLabel: 'Yesterday · Thursday, Aug 20',\n    startTime: '14:45',\n    endTime: '17:30',\n    durationSeconds: 9900,\n    isBillable: true,\n    rate: 150,\n    amount: 412.5,\n  },\n]\n\nconst entries = ref<TimeEntry[]>(initialEntries)\nconst activeTask = ref('Refactoring OKLCH Color Engine & AST Parser')\nconst selectedProjectId = ref('acme')\nconst isBillable = ref(true)\nconst isRunning = ref(true)\nconst timerSeconds = ref(6138) // 01:42:18\n\nfunction formatDuration(totalSeconds: number): string {\n  const hours = Math.floor(totalSeconds / 3600)\n  const minutes = Math.floor((totalSeconds % 3600) / 60)\n  const seconds = totalSeconds % 60\n  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`\n}\n\nfunction formatCurrency(val: number): string {\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: 'USD',\n    minimumFractionDigits: 2,\n  }).format(val)\n}\n\nconst formattedTimer = computed(() => formatDuration(timerSeconds.value))\n\nlet timerInterval: ReturnType<typeof setInterval> | null = null\n\nfunction toggleTimer() {\n  isRunning.value = !isRunning.value\n}\n\nfunction resumeEntry(entry: TimeEntry) {\n  activeTask.value = entry.task\n  selectedProjectId.value = entry.projectId\n  isBillable.value = entry.isBillable\n  isRunning.value = true\n}\n\nfunction deleteEntry(id: string) {\n  entries.value = entries.value.filter((e) => e.id !== id)\n}\n\nonMounted(() => {\n  timerInterval = setInterval(() => {\n    if (isRunning.value) {\n      timerSeconds.value++\n    }\n  }, 1000)\n})\n\nonBeforeUnmount(() => {\n  if (timerInterval) {\n    clearInterval(timerInterval)\n  }\n})\n\nconst groupedEntries = computed(() => {\n  const groups: Record<\n    string,\n    { label: string; date: string; entries: TimeEntry[]; totalSeconds: number; totalAmount: number }\n  > = {}\n\n  for (const entry of entries.value) {\n    if (!groups[entry.date]) {\n      groups[entry.date] = {\n        label: entry.dateLabel,\n        date: entry.date,\n        entries: [],\n        totalSeconds: 0,\n        totalAmount: 0,\n      }\n    }\n    groups[entry.date].entries.push(entry)\n    groups[entry.date].totalSeconds += entry.durationSeconds\n    groups[entry.date].totalAmount += entry.amount\n  }\n\n  return Object.values(groups)\n})\n</script>\n\n<template>\n  <div data-slot=\"time-tracker-timesheet\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex items-center gap-2.5\">\n          <h2 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">{{ props.title }}</h2>\n          <Badge variant=\"outline\" class=\"border-border hidden text-xs font-medium sm:inline-flex\">\n            Toggl Engine\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-sm\">{{ props.subtitle }}</p>\n      </div>\n\n      <div class=\"flex items-center gap-2.5\">\n        <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"h-9 gap-1.5 shadow-xs\">\n          <Download class=\"size-4\" aria-hidden=\"true\" />\n          Export CSV\n        </Button>\n        <Button size=\"sm\" class=\"h-9 gap-1.5 shadow-xs\">\n          <Plus class=\"size-4\" aria-hidden=\"true\" />\n          Manual Entry\n        </Button>\n      </div>\n    </div>\n\n    <!-- Live Running Stopwatch Hero Bar -->\n    <Card class=\"border-border bg-card overflow-hidden shadow-xs\">\n      <CardContent class=\"p-4 sm:p-5\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Task description & Project Tag Select -->\n          <div class=\"flex flex-1 flex-col gap-3 sm:flex-row sm:items-center\">\n            <!-- Task Description Input -->\n            <div class=\"relative flex-1\">\n              <Input\n                v-model=\"activeTask\"\n                type=\"text\"\n                placeholder=\"What are you working on?\"\n                class=\"h-10 text-sm font-medium focus-visible:ring-2\"\n              />\n            </div>\n\n            <!-- Project / Client Tag Select -->\n            <div class=\"w-full shrink-0 sm:w-64\">\n              <Select v-model=\"selectedProjectId\">\n                <SelectTrigger class=\"h-10 text-xs sm:text-sm\">\n                  <SelectValue placeholder=\"Select client/project\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem v-for=\"proj in projects\" :key=\"proj.id\" :value=\"proj.id\">\n                    <div class=\"flex items-center gap-2\">\n                      <span :class=\"cn('size-2 shrink-0 rounded-full', proj.dotClass)\" />\n                      <span class=\"text-foreground font-medium\">{{ proj.name }}</span>\n                      <span class=\"text-muted-foreground text-xs\">· {{ proj.rateLabel }}</span>\n                    </div>\n                  </SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n\n          <!-- Controls: Billable Switch, Live Stopwatch, Primary Action Button -->\n          <div\n            class=\"border-border/60 flex flex-wrap items-center justify-between gap-3 border-t pt-3 sm:border-t-0 sm:pt-0 lg:justify-end\"\n          >\n            <!-- Billable Switch -->\n            <div class=\"flex items-center gap-2\">\n              <Switch id=\"billable-toggle-vue\" v-model=\"isBillable\" size=\"sm\" />\n              <label\n                for=\"billable-toggle-vue\"\n                class=\"flex cursor-pointer items-center gap-1.5 text-xs font-medium select-none\"\n              >\n                <DollarSign\n                  :class=\"cn('size-3.5', isBillable ? 'text-success font-semibold' : 'text-muted-foreground')\"\n                  aria-hidden=\"true\"\n                />\n                <span :class=\"isBillable ? 'text-foreground font-medium' : 'text-muted-foreground'\">Billable</span>\n              </label>\n            </div>\n\n            <Separator orientation=\"vertical\" class=\"hidden h-7 sm:block\" />\n\n            <!-- Live Running Stopwatch Timer -->\n            <div class=\"flex items-center gap-2.5\">\n              <div\n                class=\"border-border/80 bg-muted/50 dark:bg-muted/30 flex items-center gap-2.5 rounded-lg border px-3.5 py-1.5 shadow-xs\"\n              >\n                <div class=\"relative flex size-2.5 items-center justify-center\">\n                  <span\n                    v-if=\"isRunning\"\n                    class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"\n                  />\n                  <span\n                    :class=\"\n                      cn(\n                        'relative inline-flex size-2.5 rounded-full',\n                        isRunning ? 'bg-success' : 'bg-muted-foreground/40',\n                      )\n                    \"\n                  />\n                </div>\n                <span class=\"text-foreground font-mono text-xl font-bold tracking-tight tabular-nums sm:text-2xl\">\n                  {{ formattedTimer }}\n                </span>\n              </div>\n\n              <!-- Primary Start / Stop Button -->\n              <Button\n                :variant=\"isRunning ? 'destructive' : 'default'\"\n                size=\"default\"\n                class=\"h-10 gap-2 px-4 font-medium shadow-xs\"\n                @click=\"toggleTimer\"\n              >\n                <Square v-if=\"isRunning\" class=\"size-4 fill-current\" aria-hidden=\"true\" />\n                <Play v-else class=\"size-4 fill-current\" aria-hidden=\"true\" />\n                <span>{{ isRunning ? 'Stop' : 'Start' }}</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4 Timesheet Summary Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- 1. Total Hours This Week -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Total Hours This Week</p>\n            <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n              <Clock class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"flex items-baseline gap-2\">\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">38.5 hrs</p>\n            <span class=\"text-muted-foreground text-xs tabular-nums\">/ 40.0 target</span>\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <span class=\"text-success inline-flex items-center font-medium\">\n              <TrendingUp class=\"mr-0.5 size-3.5\" aria-hidden=\"true\" />\n              96%\n            </span>\n            <span>of weekly target logged</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2. Billable Hours -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Billable Hours</p>\n            <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-lg\">\n              <CircleDollarSign class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">32.0 hrs</p>\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span class=\"text-success font-medium\">83% billable ratio</span>\n            <span>6.5 hrs internal</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 3. Total Earnings -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Total Earnings</p>\n            <div class=\"bg-chart-2/10 text-chart-2 flex size-8 items-center justify-center rounded-lg\">\n              <DollarSign class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$4,800.00</p>\n          <p class=\"text-muted-foreground text-xs\">Avg $150.00/hr effective rate</p>\n        </CardContent>\n      </Card>\n\n      <!-- 4. Active Clients -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Active Clients</p>\n            <div class=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-lg\">\n              <Briefcase class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">3 active clients</p>\n          <p class=\"text-muted-foreground truncate text-xs\">Acme Corp · Stripe · Linear</p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Weekly Timesheet & Daily Activity Table -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"border-border/60 border-b pb-3\">\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Weekly Timesheet & Daily Activity</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Detailed time entries for the current billing cycle (Aug 17 – Aug 23, 2026).\n            </CardDescription>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Badge variant=\"outline\" class=\"border-border font-mono text-xs font-medium\">\n              Week 34 · 38h 30m · $4,800.00\n            </Badge>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader class=\"bg-muted/40\">\n              <TableRow>\n                <TableHead class=\"min-w-[160px]\">Project & Client</TableHead>\n                <TableHead class=\"min-w-[280px]\">Task Description</TableHead>\n                <TableHead class=\"min-w-[130px]\">Billable</TableHead>\n                <TableHead class=\"min-w-[130px]\">Time Range</TableHead>\n                <TableHead class=\"min-w-[110px] text-right\">Duration</TableHead>\n                <TableHead class=\"min-w-[110px] text-right\">Amount</TableHead>\n                <TableHead class=\"w-24 text-right\">\n                  <span class=\"sr-only\">Actions</span>\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <template v-for=\"group in groupedEntries\" :key=\"group.date\">\n                <!-- Day Group Header Subrow -->\n                <TableRow class=\"border-border bg-muted/20 hover:bg-muted/30 border-y font-medium\">\n                  <TableCell colspan=\"4\" class=\"text-foreground py-2.5 text-xs font-semibold\">\n                    <div class=\"flex items-center gap-2\">\n                      <Calendar class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                      <span>{{ group.label }}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"text-foreground py-2.5 text-right font-mono text-xs font-semibold tabular-nums\">\n                    {{ formatDuration(group.totalSeconds) }}\n                  </TableCell>\n                  <TableCell class=\"text-foreground py-2.5 text-right font-mono text-xs font-semibold tabular-nums\">\n                    {{ formatCurrency(group.totalAmount) }}\n                  </TableCell>\n                  <TableCell class=\"py-2.5\" />\n                </TableRow>\n\n                <!-- Entries for this day -->\n                <TableRow v-for=\"entry in group.entries\" :key=\"entry.id\" class=\"hover:bg-muted/50 transition-colors\">\n                  <!-- Project Badge & Client -->\n                  <TableCell>\n                    <div class=\"flex flex-col gap-1\">\n                      <Badge variant=\"outline\" :class=\"cn('w-fit text-xs font-normal', entry.projectBadgeClass)\">\n                        {{ entry.projectName }}\n                      </Badge>\n                      <span class=\"text-muted-foreground text-xs\">{{ entry.clientName }}</span>\n                    </div>\n                  </TableCell>\n\n                  <!-- Task description -->\n                  <TableCell>\n                    <p class=\"text-foreground text-sm font-medium\">{{ entry.task }}</p>\n                  </TableCell>\n\n                  <!-- Billable Status -->\n                  <TableCell>\n                    <div class=\"flex items-center gap-1.5\">\n                      <Badge\n                        v-if=\"entry.isBillable\"\n                        variant=\"outline\"\n                        class=\"border-success/30 bg-success/10 text-success text-xs font-medium\"\n                      >\n                        <DollarSign class=\"mr-0.5 size-3\" aria-hidden=\"true\" />\n                        Billable (${{ entry.rate }}/h)\n                      </Badge>\n                      <Badge\n                        v-else\n                        variant=\"outline\"\n                        class=\"border-border bg-muted/60 text-muted-foreground text-xs font-normal\"\n                      >\n                        Non-billable\n                      </Badge>\n                    </div>\n                  </TableCell>\n\n                  <!-- Time Range -->\n                  <TableCell class=\"text-muted-foreground font-mono text-xs whitespace-nowrap tabular-nums\">\n                    {{ entry.startTime }} – {{ entry.endTime }}\n                  </TableCell>\n\n                  <!-- Duration -->\n                  <TableCell\n                    class=\"text-foreground text-right font-mono text-sm font-medium whitespace-nowrap tabular-nums\"\n                  >\n                    {{ formatDuration(entry.durationSeconds) }}\n                  </TableCell>\n\n                  <!-- Billable Amount -->\n                  <TableCell class=\"text-right font-mono text-sm font-semibold whitespace-nowrap tabular-nums\">\n                    <span :class=\"entry.isBillable ? 'text-foreground' : 'text-muted-foreground'\">\n                      {{ formatCurrency(entry.amount) }}\n                    </span>\n                  </TableCell>\n\n                  <!-- Actions -->\n                  <TableCell class=\"text-right\">\n                    <div class=\"flex items-center justify-end gap-1\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        class=\"text-muted-foreground hover:text-foreground size-8\"\n                        title=\"Resume Timer\"\n                        @click=\"resumeEntry(entry)\"\n                      >\n                        <Play class=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n                        <span class=\"sr-only\">Resume timer for {{ entry.task }}</span>\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        class=\"text-muted-foreground hover:text-destructive size-8\"\n                        title=\"Delete Entry\"\n                        @click=\"deleteEntry(entry.id)\"\n                      >\n                        <Trash2 class=\"size-3.5\" aria-hidden=\"true\" />\n                        <span class=\"sr-only\">Delete entry</span>\n                      </Button>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              </template>\n\n              <!-- Empty state -->\n              <TableRow v-if=\"entries.length === 0\">\n                <TableCell :colspan=\"7\" class=\"h-32 text-center\">\n                  <div class=\"text-muted-foreground flex flex-col items-center justify-center gap-1.5\">\n                    <Clock class=\"text-muted-foreground/60 size-6\" aria-hidden=\"true\" />\n                    <p class=\"text-foreground text-sm font-medium\">No time entries recorded for this week</p>\n                    <p class=\"text-xs\">Start the live timer above to log your hours.</p>\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n\n        <!-- Timesheet Table Footer Strip -->\n        <div\n          class=\"border-border bg-card text-muted-foreground flex flex-col items-center justify-between gap-3 border-t px-4 py-3 text-xs sm:flex-row\"\n        >\n          <p class=\"tabular-nums\">\n            Showing <span class=\"text-foreground font-medium\">{{ entries.length }}</span> time entries across\n            <span class=\"text-foreground font-medium\">{{ groupedEntries.length }}</span> days\n          </p>\n          <div class=\"flex items-center gap-3\">\n            <span class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n              Total: {{ formatDuration(entries.reduce((acc, e) => acc + e.durationSeconds, 0)) }} ({{\n                formatCurrency(entries.reduce((acc, e) => acc + e.amount, 0))\n              }})\n            </span>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/TimeTrackerTimesheet.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Toggl/Harvest-style live time tracker with active running stopwatch, project rate selection, billable status toggle, 4 weekly summary metric cards, and daily grouped timesheet activity ledger with resume actions.",
  "categories": [
    "productivity",
    "app",
    "billing"
  ]
}