feat: add Calendar, Timesheet, and MiniTimer views
Calendar shows weekly time-block layout with hour rows, entry positioning, current time indicator, and week navigation. Timesheet provides a weekly grid with project/task rows, day columns, totals, and add-row functionality. MiniTimer is a minimal always-on-top timer display for the floating window.
This commit is contained in:
Your Name
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
364
src/views/CalendarView.vue
Normal file
364
src/views/CalendarView.vue
Normal file
@@ -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>
|
||||
27
src/views/MiniTimer.vue
Normal file
27
src/views/MiniTimer.vue
Normal file
@@ -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>
|
||||
407
src/views/TimesheetView.vue
Normal file
407
src/views/TimesheetView.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user