From bd1b2c36d160c04d00af3e54f7fa29e085f7072f Mon Sep 17 00:00:00 2001
From: lashman <lashman@robotbrush.com>
Date: Wed, 18 Feb 2026 10:39:08 +0200
Subject: [PATCH] add Calendar, Timesheet, and MiniTimer views

---
 src/components/NavRail.vue  |  10 +-
 src/router/index.ts         |  15 ++
 src/views/CalendarView.vue  | 364 ++++++++++++++++++++++++++++++++
 src/views/MiniTimer.vue     |  27 +++
 src/views/TimesheetView.vue | 407 ++++++++++++++++++++++++++++++++++++
 5 files changed, 822 insertions(+), 1 deletion(-)
 create mode 100644 src/views/CalendarView.vue
 create mode 100644 src/views/MiniTimer.vue
 create mode 100644 src/views/TimesheetView.vue

diff --git a/src/components/NavRail.vue b/src/components/NavRail.vue
index 643b783..524a541 100644
--- a/src/components/NavRail.vue
+++ b/src/components/NavRail.vue
@@ -8,6 +8,8 @@ import {
   Users,
   FolderKanban,
   List,
+  CalendarDays,
+  Grid3X3,
   BarChart3,
   FileText,
   Settings
@@ -23,6 +25,8 @@ const navItems = [
   { name: 'Clients', path: '/clients', icon: Users },
   { name: 'Projects', path: '/projects', icon: FolderKanban },
   { name: 'Entries', path: '/entries', icon: List },
+  { name: 'Calendar', path: '/calendar', icon: CalendarDays },
+  { name: 'Timesheet', path: '/timesheet', icon: Grid3X3 },
   { name: 'Invoices', path: '/invoices', icon: FileText },
   { name: 'Reports', path: '/reports', icon: BarChart3 },
   { name: 'Settings', path: '/settings', icon: Settings }
@@ -65,12 +69,16 @@ function navigate(path: string) {
       </button>
     </div>
 
-    <!-- Timer running indicator (bottom) -->
+    <!-- Timer status indicator (bottom) -->
     <div class="pb-4">
       <div
         v-if="timerStore.isRunning"
         class="w-2 h-2 rounded-full bg-status-running animate-pulse-dot"
       />
+      <div
+        v-else-if="timerStore.isPaused"
+        class="w-2 h-2 rounded-full bg-status-warning animate-pulse-dot"
+      />
     </div>
   </nav>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 659428c..32c0773 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -28,11 +28,26 @@ const router = createRouter({
       name: 'Entries',
       component: () => import('../views/Entries.vue')
     },
+    {
+      path: '/calendar',
+      name: 'Calendar',
+      component: () => import('../views/CalendarView.vue')
+    },
+    {
+      path: '/timesheet',
+      name: 'Timesheet',
+      component: () => import('../views/TimesheetView.vue')
+    },
     {
       path: '/reports',
       name: 'Reports',
       component: () => import('../views/Reports.vue')
     },
+    {
+      path: '/mini-timer',
+      name: 'MiniTimer',
+      component: () => import('../views/MiniTimer.vue')
+    },
     {
       path: '/invoices',
       name: 'Invoices',
diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
new file mode 100644
index 0000000..4d01e24
--- /dev/null
+++ b/src/views/CalendarView.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="p-6 h-full flex flex-col">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Calendar</h1>
+
+      <div class="flex items-center gap-3">
+        <button
+          @click="goToToday"
+          class="px-3 py-1.5 text-[0.75rem] font-medium border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
+        >
+          Today
+        </button>
+        <div class="flex items-center gap-1">
+          <button
+            @click="prevWeek"
+            class="p-1.5 text-text-tertiary hover:text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
+            title="Previous week"
+          >
+            <ChevronLeft class="w-4 h-4" :stroke-width="2" />
+          </button>
+          <button
+            @click="nextWeek"
+            class="p-1.5 text-text-tertiary hover:text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
+            title="Next week"
+          >
+            <ChevronRight class="w-4 h-4" :stroke-width="2" />
+          </button>
+        </div>
+        <span class="text-[0.75rem] text-text-secondary font-medium min-w-[10rem]">
+          {{ weekRangeLabel }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Calendar Grid -->
+    <div class="flex-1 bg-bg-surface rounded-lg border border-border-subtle overflow-hidden flex flex-col min-h-0">
+      <!-- Day column headers -->
+      <div class="grid shrink-0 border-b border-border-subtle" :style="gridStyle">
+        <!-- Top-left corner (hour gutter) -->
+        <div class="w-14 shrink-0 border-r border-border-subtle" />
+        <!-- Day headers -->
+        <div
+          v-for="(day, index) in weekDays"
+          :key="index"
+          class="px-2 py-2.5 text-center border-r border-border-subtle last:border-r-0"
+          :class="isToday(day) ? 'bg-accent/5' : ''"
+        >
+          <span
+            class="text-[0.6875rem] uppercase tracking-[0.08em] font-medium"
+            :class="isToday(day) ? 'text-accent-text' : 'text-text-tertiary'"
+          >
+            {{ formatDayHeader(day) }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Scrollable hour rows -->
+      <div ref="scrollContainer" class="flex-1 overflow-y-auto min-h-0">
+        <div class="grid relative" :style="gridStyle">
+          <!-- Hour labels column -->
+          <div class="w-14 shrink-0 border-r border-border-subtle">
+            <div
+              v-for="hour in hours"
+              :key="hour"
+              class="h-12 flex items-start justify-end pr-2 pt-0.5"
+            >
+              <span class="text-[0.6875rem] text-text-tertiary font-mono leading-none -translate-y-1/2">
+                {{ formatHourLabel(hour) }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Day columns -->
+          <div
+            v-for="(day, dayIndex) in weekDays"
+            :key="dayIndex"
+            class="relative border-r border-border-subtle last:border-r-0"
+            :class="isToday(day) ? 'bg-accent/[0.02]' : ''"
+          >
+            <!-- Hour grid lines -->
+            <div
+              v-for="hour in hours"
+              :key="hour"
+              class="h-12 border-b border-border-subtle"
+            />
+
+            <!-- Time entry blocks -->
+            <div
+              v-for="entry in getEntriesForDay(day)"
+              :key="entry.id"
+              class="absolute left-0.5 right-0.5 rounded px-1.5 py-1 overflow-hidden cursor-default border-l-[3px] min-h-[1.25rem]"
+              :style="getEntryStyle(entry)"
+              :title="getEntryTooltip(entry)"
+            >
+              <p class="text-[0.625rem] font-medium leading-tight truncate" :style="{ color: getProjectColor(entry.project_id) }">
+                {{ getProjectName(entry.project_id) }}
+              </p>
+              <p
+                v-if="entry.duration >= 1800"
+                class="text-[0.5625rem] text-text-tertiary leading-tight truncate mt-0.5"
+              >
+                {{ formatDuration(entry.duration) }}
+              </p>
+            </div>
+
+            <!-- Current time indicator -->
+            <div
+              v-if="isToday(day) && currentTimeOffset !== null"
+              class="absolute left-0 right-0 z-10 pointer-events-none"
+              :style="{ top: currentTimeOffset + 'px' }"
+            >
+              <div class="relative">
+                <div class="absolute -left-[3px] -top-[3px] w-[7px] h-[7px] rounded-full bg-status-error" />
+                <div class="h-[1.5px] bg-status-error w-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { useEntriesStore, type TimeEntry } from '../stores/entries'
+import { useProjectsStore } from '../stores/projects'
+
+const entriesStore = useEntriesStore()
+const projectsStore = useProjectsStore()
+
+const scrollContainer = ref<HTMLElement | null>(null)
+
+// The start-of-week date (Monday)
+const weekStart = ref(getMonday(new Date()))
+
+// Hours displayed: 6am through 11pm (6..23)
+const HOUR_START = 6
+const HOUR_END = 23
+const hours = Array.from({ length: HOUR_END - HOUR_START + 1 }, (_, i) => HOUR_START + i)
+const HOUR_HEIGHT = 48 // h-12 = 3rem = 48px
+
+// Current time tracking
+const currentTimeOffset = ref<number | null>(null)
+let timeInterval: ReturnType<typeof setInterval> | null = null
+
+// Grid template: fixed gutter + 7 equal columns
+const gridStyle = computed(() => ({
+  gridTemplateColumns: '3.5rem repeat(7, 1fr)'
+}))
+
+// Week days (Monday to Sunday)
+const weekDays = computed(() => {
+  const days: Date[] = []
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(weekStart.value)
+    d.setDate(d.getDate() + i)
+    days.push(d)
+  }
+  return days
+})
+
+// Week range label, e.g. "Feb 17 - Feb 23, 2026"
+const weekRangeLabel = computed(() => {
+  const start = weekDays.value[0]
+  const end = weekDays.value[6]
+  const startMonth = start.toLocaleString('en-US', { month: 'short' })
+  const endMonth = end.toLocaleString('en-US', { month: 'short' })
+  const startDay = start.getDate()
+  const endDay = end.getDate()
+  const year = end.getFullYear()
+
+  if (startMonth === endMonth) {
+    return `${startMonth} ${startDay} \u2013 ${endDay}, ${year}`
+  }
+  return `${startMonth} ${startDay} \u2013 ${endMonth} ${endDay}, ${year}`
+})
+
+// Navigation
+function prevWeek() {
+  const d = new Date(weekStart.value)
+  d.setDate(d.getDate() - 7)
+  weekStart.value = d
+  fetchWeekEntries()
+}
+
+function nextWeek() {
+  const d = new Date(weekStart.value)
+  d.setDate(d.getDate() + 7)
+  weekStart.value = d
+  fetchWeekEntries()
+}
+
+function goToToday() {
+  weekStart.value = getMonday(new Date())
+  fetchWeekEntries()
+  nextTick(() => scrollToCurrentTime())
+}
+
+// Fetch entries for the displayed week
+async function fetchWeekEntries() {
+  const start = formatISODate(weekDays.value[0])
+  const end = formatISODate(weekDays.value[6])
+  await entriesStore.fetchEntries(start, end)
+}
+
+// Get entries that fall on a given day
+function getEntriesForDay(day: Date): TimeEntry[] {
+  const dayStr = formatISODate(day)
+  return entriesStore.entries.filter(entry => {
+    const entryDate = new Date(entry.start_time)
+    const entryStr = formatISODate(entryDate)
+    return entryStr === dayStr
+  })
+}
+
+// Position and size an entry block
+function getEntryStyle(entry: TimeEntry): Record<string, string> {
+  const start = new Date(entry.start_time)
+  const startHour = start.getHours() + start.getMinutes() / 60
+  const durationHours = entry.duration / 3600
+
+  // Clamp to visible range
+  const visibleStart = Math.max(startHour, HOUR_START)
+  const visibleEnd = Math.min(startHour + durationHours, HOUR_END + 1)
+
+  if (visibleEnd <= HOUR_START || visibleStart >= HOUR_END + 1) {
+    return { display: 'none' }
+  }
+
+  const topOffset = (visibleStart - HOUR_START) * HOUR_HEIGHT
+  const height = Math.max((visibleEnd - visibleStart) * HOUR_HEIGHT, 20) // min 20px
+
+  const color = getProjectColor(entry.project_id)
+
+  return {
+    top: `${topOffset}px`,
+    height: `${height}px`,
+    backgroundColor: hexToRgba(color, 0.15),
+    borderLeftColor: color
+  }
+}
+
+// Tooltip for entry blocks
+function getEntryTooltip(entry: TimeEntry): string {
+  const project = getProjectName(entry.project_id)
+  const duration = formatDuration(entry.duration)
+  const start = new Date(entry.start_time)
+  const time = start.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+  const desc = entry.description ? ` — ${entry.description}` : ''
+  return `${project} (${duration}) at ${time}${desc}`
+}
+
+// Project helpers
+function getProjectName(projectId: number): string {
+  const project = projectsStore.projects.find(p => p.id === projectId)
+  return project?.name || 'Unknown Project'
+}
+
+function getProjectColor(projectId: number): string {
+  const project = projectsStore.projects.find(p => p.id === projectId)
+  return project?.color || '#6B7280'
+}
+
+// Format duration from seconds
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (h > 0) {
+    return `${h}h ${m}m`
+  }
+  return `${m}m`
+}
+
+// Date helpers
+function getMonday(date: Date): Date {
+  const d = new Date(date)
+  const day = d.getDay()
+  // getDay() returns 0 for Sunday, so adjust to get Monday
+  const diff = day === 0 ? -6 : 1 - day
+  d.setDate(d.getDate() + diff)
+  d.setHours(0, 0, 0, 0)
+  return d
+}
+
+function formatISODate(date: Date): string {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+function isToday(date: Date): boolean {
+  const today = new Date()
+  return formatISODate(date) === formatISODate(today)
+}
+
+function formatDayHeader(date: Date): string {
+  const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  return `${dayNames[date.getDay()]} ${date.getDate()}`
+}
+
+function formatHourLabel(hour: number): string {
+  if (hour === 0) return '12am'
+  if (hour === 12) return '12pm'
+  if (hour < 12) return `${hour}am`
+  return `${hour - 12}pm`
+}
+
+// Convert hex color to rgba
+function hexToRgba(hex: string, alpha: number): string {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  if (!result) return `rgba(107, 114, 128, ${alpha})`
+  const r = parseInt(result[1], 16)
+  const g = parseInt(result[2], 16)
+  const b = parseInt(result[3], 16)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+// Update current time indicator position
+function updateCurrentTime() {
+  const now = new Date()
+  const currentHour = now.getHours() + now.getMinutes() / 60
+
+  if (currentHour >= HOUR_START && currentHour <= HOUR_END + 1) {
+    currentTimeOffset.value = (currentHour - HOUR_START) * HOUR_HEIGHT
+  } else {
+    currentTimeOffset.value = null
+  }
+}
+
+// Scroll to current time area on mount
+function scrollToCurrentTime() {
+  if (!scrollContainer.value) return
+  const now = new Date()
+  const currentHour = now.getHours()
+  // Scroll to ~1 hour before current time for context
+  const targetHour = Math.max(currentHour - 1, HOUR_START)
+  const scrollTop = (targetHour - HOUR_START) * HOUR_HEIGHT
+  scrollContainer.value.scrollTop = scrollTop
+}
+
+// Lifecycle
+onMounted(async () => {
+  await Promise.all([
+    projectsStore.fetchProjects(),
+    fetchWeekEntries()
+  ])
+
+  updateCurrentTime()
+  timeInterval = setInterval(updateCurrentTime, 60_000)
+
+  nextTick(() => scrollToCurrentTime())
+})
+
+onUnmounted(() => {
+  if (timeInterval) {
+    clearInterval(timeInterval)
+    timeInterval = null
+  }
+})
+</script>
diff --git a/src/views/MiniTimer.vue b/src/views/MiniTimer.vue
new file mode 100644
index 0000000..a51df3c
--- /dev/null
+++ b/src/views/MiniTimer.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="mini-timer flex items-center justify-center h-screen bg-bg-base select-none" style="-webkit-app-region: drag">
+    <div class="text-center">
+      <p class="text-[2rem] font-medium font-[family-name:var(--font-heading)] tracking-tighter text-text-primary">
+        {{ timerStore.formattedTime }}
+      </p>
+      <p v-if="projectName" class="text-[0.6875rem] text-text-tertiary mt-1 truncate max-w-[180px]">
+        {{ projectName }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTimerStore } from '../stores/timer'
+import { useProjectsStore } from '../stores/projects'
+
+const timerStore = useTimerStore()
+const projectsStore = useProjectsStore()
+
+const projectName = computed(() => {
+  if (!timerStore.selectedProjectId) return ''
+  const project = projectsStore.projects.find(p => p.id === timerStore.selectedProjectId)
+  return project?.name || ''
+})
+</script>
diff --git a/src/views/TimesheetView.vue b/src/views/TimesheetView.vue
new file mode 100644
index 0000000..5dbf8fa
--- /dev/null
+++ b/src/views/TimesheetView.vue
@@ -0,0 +1,407 @@
+<template>
+  <div class="p-6">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Timesheet</h1>
+
+      <!-- Week Navigation -->
+      <div class="flex items-center gap-3">
+        <button
+          @click="prevWeek"
+          class="p-1.5 text-text-secondary hover:text-text-primary transition-colors duration-150"
+          title="Previous week"
+        >
+          <ChevronLeft class="w-5 h-5" :stroke-width="2" />
+        </button>
+
+        <button
+          @click="goToThisWeek"
+          class="px-3 py-1.5 text-xs text-text-secondary border border-border-subtle rounded-lg hover:text-text-primary hover:bg-bg-elevated transition-colors duration-150"
+        >
+          This Week
+        </button>
+
+        <button
+          @click="nextWeek"
+          class="p-1.5 text-text-secondary hover:text-text-primary transition-colors duration-150"
+          title="Next week"
+        >
+          <ChevronRight class="w-5 h-5" :stroke-width="2" />
+        </button>
+
+        <span class="text-[0.8125rem] text-text-primary font-medium ml-2">
+          {{ weekRangeLabel }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Timesheet Table -->
+    <div class="bg-bg-surface rounded-lg overflow-hidden">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-border-subtle">
+            <th class="px-3 py-2 text-left text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium w-56">
+              Project / Task
+            </th>
+            <th
+              v-for="(day, i) in dayHeaders"
+              :key="i"
+              class="px-3 py-2 text-right text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium"
+              :class="{ 'text-text-secondary': isToday(i) }"
+            >
+              {{ day }}
+            </th>
+            <th class="px-3 py-2 text-right text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">
+              Total
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Data rows -->
+          <tr
+            v-for="(row, rowIndex) in rows"
+            :key="rowIndex"
+            class="border-b border-border-subtle hover:bg-bg-elevated transition-colors duration-150"
+          >
+            <td class="px-3 py-2">
+              <div class="flex items-center gap-2">
+                <div
+                  class="w-2 h-2 rounded-full shrink-0"
+                  :style="{ backgroundColor: row.color }"
+                />
+                <span class="text-[0.75rem] text-text-primary truncate">{{ row.project_name }}</span>
+                <span v-if="row.task_name" class="text-[0.75rem] text-text-tertiary truncate">/ {{ row.task_name }}</span>
+              </div>
+            </td>
+            <td
+              v-for="(seconds, dayIndex) in row.days"
+              :key="dayIndex"
+              class="px-3 py-2 text-right text-[0.75rem] font-mono"
+              :class="seconds > 0 ? 'text-accent-text' : 'text-text-tertiary'"
+            >
+              {{ formatHM(seconds) }}
+            </td>
+            <td class="px-3 py-2 text-right text-[0.75rem] font-mono text-accent-text font-medium">
+              {{ formatHM(rowTotal(row)) }}
+            </td>
+          </tr>
+
+          <!-- Add Row (inline) -->
+          <tr v-if="showAddRow" class="border-b border-border-subtle bg-bg-inset">
+            <td class="px-3 py-2" colspan="9">
+              <div class="flex items-center gap-3">
+                <div class="w-48">
+                  <AppSelect
+                    v-model="newRowProjectId"
+                    :options="availableProjects"
+                    label-key="name"
+                    value-key="id"
+                    placeholder="Select project"
+                    :placeholder-value="null"
+                    :searchable="true"
+                  />
+                </div>
+                <div class="w-48">
+                  <AppSelect
+                    v-model="newRowTaskId"
+                    :options="availableTasks"
+                    label-key="name"
+                    value-key="id"
+                    placeholder="No task"
+                    :placeholder-value="null"
+                    :searchable="true"
+                    :disabled="!newRowProjectId"
+                  />
+                </div>
+                <button
+                  @click="confirmAddRow"
+                  :disabled="!newRowProjectId"
+                  class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150 disabled:opacity-40 disabled:cursor-not-allowed"
+                >
+                  Add
+                </button>
+                <button
+                  @click="cancelAddRow"
+                  class="px-3 py-1.5 text-text-secondary text-xs hover:text-text-primary transition-colors duration-150"
+                >
+                  Cancel
+                </button>
+              </div>
+            </td>
+          </tr>
+
+          <!-- Empty state -->
+          <tr v-if="rows.length === 0 && !showAddRow">
+            <td colspan="9" class="px-3 py-8 text-center">
+              <p class="text-[0.75rem] text-text-tertiary">No timesheet data for this week</p>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <!-- Column totals -->
+          <tr class="border-t border-border-visible bg-bg-elevated">
+            <td class="px-3 py-2 text-[0.6875rem] text-text-secondary uppercase tracking-[0.08em] font-medium">
+              Total
+            </td>
+            <td
+              v-for="(total, i) in columnTotals"
+              :key="i"
+              class="px-3 py-2 text-right text-[0.75rem] font-mono text-text-primary font-medium"
+            >
+              {{ formatHM(total) }}
+            </td>
+            <td class="px-3 py-2 text-right text-[0.75rem] font-mono text-accent-text font-bold">
+              {{ formatHM(grandTotal) }}
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+
+    <!-- Add Row Button -->
+    <button
+      v-if="!showAddRow"
+      @click="startAddRow"
+      class="mt-3 flex items-center gap-1.5 text-text-secondary text-xs hover:text-text-primary transition-colors duration-150"
+    >
+      <Plus class="w-4 h-4" :stroke-width="2" />
+      Add Row
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { ChevronLeft, ChevronRight, Plus } from 'lucide-vue-next'
+import { invoke } from '@tauri-apps/api/core'
+import AppSelect from '../components/AppSelect.vue'
+import { useProjectsStore, type Task } from '../stores/projects'
+
+const projectsStore = useProjectsStore()
+
+// ── Types ──────────────────────────────────────────────────────────────
+
+interface TimesheetRow {
+  project_id: number
+  project_name: string
+  color: string
+  task_id: number | null
+  task_name: string | null
+  days: number[] // 7 elements, Mon-Sun, in seconds
+}
+
+// ── Week state ─────────────────────────────────────────────────────────
+
+/** The Monday of the currently displayed week (YYYY-MM-DD) */
+const weekStart = ref('')
+
+function getMonday(d: Date): Date {
+  const date = new Date(d)
+  const day = date.getDay()
+  // getDay(): 0=Sun, 1=Mon … 6=Sat → offset to Monday
+  const diff = day === 0 ? -6 : 1 - day
+  date.setDate(date.getDate() + diff)
+  date.setHours(0, 0, 0, 0)
+  return date
+}
+
+function formatISODate(d: Date): string {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+function goToThisWeek() {
+  weekStart.value = formatISODate(getMonday(new Date()))
+}
+
+function prevWeek() {
+  const d = new Date(weekStart.value)
+  d.setDate(d.getDate() - 7)
+  weekStart.value = formatISODate(d)
+}
+
+function nextWeek() {
+  const d = new Date(weekStart.value)
+  d.setDate(d.getDate() + 7)
+  weekStart.value = formatISODate(d)
+}
+
+// ── Computed labels ────────────────────────────────────────────────────
+
+const weekDates = computed(() => {
+  const start = new Date(weekStart.value)
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(start)
+    d.setDate(start.getDate() + i)
+    return d
+  })
+})
+
+const shortDayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+const shortMonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const dayHeaders = computed(() =>
+  weekDates.value.map((d, i) => `${shortDayNames[i]} ${d.getDate()}`)
+)
+
+const weekRangeLabel = computed(() => {
+  if (weekDates.value.length === 0) return ''
+  const first = weekDates.value[0]
+  const last = weekDates.value[6]
+
+  const fMonth = shortMonthNames[first.getMonth()]
+  const lMonth = shortMonthNames[last.getMonth()]
+  const fDay = first.getDate()
+  const lDay = last.getDate()
+  const year = last.getFullYear()
+
+  if (fMonth === lMonth) {
+    return `${fMonth} ${fDay} - ${lDay}, ${year}`
+  }
+  return `${fMonth} ${fDay} - ${lMonth} ${lDay}, ${year}`
+})
+
+function isToday(dayIndex: number): boolean {
+  const d = weekDates.value[dayIndex]
+  if (!d) return false
+  const today = new Date()
+  return (
+    d.getFullYear() === today.getFullYear() &&
+    d.getMonth() === today.getMonth() &&
+    d.getDate() === today.getDate()
+  )
+}
+
+// ── Timesheet data ─────────────────────────────────────────────────────
+
+const rows = ref<TimesheetRow[]>([])
+const loading = ref(false)
+
+async function fetchTimesheetData() {
+  loading.value = true
+  try {
+    const data = await invoke<TimesheetRow[]>('get_timesheet_data', {
+      weekStart: weekStart.value,
+    })
+    rows.value = data
+  } catch (error) {
+    console.error('Failed to fetch timesheet data:', error)
+    rows.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// Re-fetch whenever weekStart changes
+watch(weekStart, () => {
+  fetchTimesheetData()
+})
+
+// ── Totals ─────────────────────────────────────────────────────────────
+
+function rowTotal(row: TimesheetRow): number {
+  return row.days.reduce((sum, s) => sum + s, 0)
+}
+
+const columnTotals = computed(() => {
+  const totals = [0, 0, 0, 0, 0, 0, 0]
+  for (const row of rows.value) {
+    for (let i = 0; i < 7; i++) {
+      totals[i] += row.days[i] ?? 0
+    }
+  }
+  return totals
+})
+
+const grandTotal = computed(() =>
+  columnTotals.value.reduce((sum, s) => sum + s, 0)
+)
+
+// ── Formatting ─────────────────────────────────────────────────────────
+
+function formatHM(seconds: number): string {
+  if (seconds === 0) return '-'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return `${h}:${String(m).padStart(2, '0')}`
+}
+
+// ── Add Row ────────────────────────────────────────────────────────────
+
+const showAddRow = ref(false)
+const newRowProjectId = ref<number | null>(null)
+const newRowTaskId = ref<number | null>(null)
+const availableTasks = ref<Task[]>([])
+
+const availableProjects = computed(() =>
+  projectsStore.projects.filter((p) => !p.archived)
+)
+
+// When selected project changes, fetch its tasks
+watch(newRowProjectId, async (projectId) => {
+  newRowTaskId.value = null
+  if (projectId) {
+    availableTasks.value = await projectsStore.fetchTasks(projectId)
+  } else {
+    availableTasks.value = []
+  }
+})
+
+function startAddRow() {
+  showAddRow.value = true
+  newRowProjectId.value = null
+  newRowTaskId.value = null
+  availableTasks.value = []
+}
+
+function cancelAddRow() {
+  showAddRow.value = false
+  newRowProjectId.value = null
+  newRowTaskId.value = null
+}
+
+function confirmAddRow() {
+  if (!newRowProjectId.value) return
+
+  const project = projectsStore.projects.find(
+    (p) => p.id === newRowProjectId.value
+  )
+  if (!project) return
+
+  // Check if this project+task combo already exists
+  const exists = rows.value.some(
+    (r) =>
+      r.project_id === newRowProjectId.value &&
+      r.task_id === (newRowTaskId.value ?? null)
+  )
+  if (exists) {
+    cancelAddRow()
+    return
+  }
+
+  const taskName =
+    newRowTaskId.value
+      ? availableTasks.value.find((t) => t.id === newRowTaskId.value)?.name ?? null
+      : null
+
+  rows.value.push({
+    project_id: project.id!,
+    project_name: project.name,
+    color: project.color,
+    task_id: newRowTaskId.value,
+    task_name: taskName,
+    days: [0, 0, 0, 0, 0, 0, 0],
+  })
+
+  cancelAddRow()
+}
+
+// ── Init ───────────────────────────────────────────────────────────────
+
+onMounted(async () => {
+  await projectsStore.fetchProjects()
+  goToThisWeek() // triggers watch → fetchTimesheetData
+})
+</script>