add timesheets page

resources/js/Components/Timesheet/RemoveRowDialog.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/Components/ui/alert-dialog';
+
+defineProps<{
+    open: boolean;
+    entryCount: number;
+    projectName: string;
+}>();
+
+defineEmits<{
+    (e: 'update:open', value: boolean): void;
+    (e: 'confirm'): void;
+}>();
+</script>
+
+<template>
+    <AlertDialog :open="open" @update:open="$emit('update:open', $event)">
+        <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>Remove timesheet row?</AlertDialogTitle>
+                <AlertDialogDescription>
+                    This will delete {{ entryCount }} time
+                    {{ entryCount === 1 ? 'entry' : 'entries' }}
+                    for "{{ projectName }}". This action cannot be undone.
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                    class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    @click="$emit('confirm')">
+                    Delete
+                </AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>

resources/js/Components/Timesheet/TimesheetCell.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import DurationSecondsInput from '@/packages/ui/src/Input/DurationSecondsInput.vue';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from '@/packages/ui/src/tooltip';
+import type { TimesheetCell } from '@/utils/useTimesheetGrid';
+
+defineProps<{
+    cell?: TimesheetCell;
+    dayIndex: number;
+    date: string;
+    isToday: boolean;
+    hasRunningEntry: boolean;
+}>();
+
+const emit = defineEmits<{
+    update: [newSeconds: number];
+}>();
+</script>
+
+<template>
+    <div
+        data-testid="timesheet_cell"
+        class="flex items-center justify-center border-t border-default-background-separator"
+        :class="{ 'bg-default-background': isToday }">
+        <TooltipProvider v-if="hasRunningEntry" :delay-duration="100">
+            <Tooltip>
+                <TooltipTrigger as-child>
+                    <span class="inline-block cursor-not-allowed">
+                        <DurationSecondsInput
+                            :model-value="cell?.totalSeconds ?? 0"
+                            disabled
+                            default-unit="hours"
+                            placeholder="-"
+                            size="sm"
+                            input-class="w-[80px] mx-auto text-center font-medium
+                                bg-transparent text-text-primary placeholder:text-text-quaternary
+                                rounded-lg border border-input-border shadow-none
+                                pointer-events-none
+                                disabled:opacity-50 disabled:cursor-not-allowed" />
+                    </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                    Stop the running time entry to edit the timesheet
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        <DurationSecondsInput
+            v-else
+            :model-value="cell?.totalSeconds ?? 0"
+            default-unit="hours"
+            placeholder="-"
+            size="sm"
+            input-class="w-[80px] mx-auto text-center font-medium
+                bg-transparent text-text-primary placeholder:text-text-quaternary
+                rounded-lg border border-input-border shadow-none
+                hover:bg-card-background
+                focus-visible:bg-tertiary focus-visible:border-transparent
+                focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+            @commit="(seconds) => emit('update', seconds ?? 0)" />
+    </div>
+</template>

resources/js/Components/Timesheet/TimesheetFooterActions.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Button } from '@/packages/ui/src/Buttons';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/packages/ui/src/dropdown-menu';
+import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
+import { ChevronDownIcon, ClockIcon, ListBulletIcon } from '@heroicons/vue/20/solid';
+
+defineProps<{
+    busy: boolean;
+}>();
+
+defineEmits<{
+    (e: 'copy-rows'): void;
+    (e: 'copy-with-time'): void;
+}>();
+</script>
+
+<template>
+    <div class="mt-2 flex items-center pl-4 pr-4">
+        <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="sm" :disabled="busy">
+                    <LoadingSpinner v-if="busy" class="h-3.5 w-3.5 m-0" />
+                    Copy last week
+                    <ChevronDownIcon
+                        v-if="!busy"
+                        class="h-3.5 w-3.5 ml-1 text-icon-default" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" class="min-w-[220px]">
+                <DropdownMenuItem
+                    class="flex items-center space-x-3 cursor-pointer"
+                    @click="$emit('copy-rows')">
+                    <ListBulletIcon class="w-5 text-icon-default" />
+                    <span>Copy rows only</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                    class="flex items-center space-x-3 cursor-pointer"
+                    @click="$emit('copy-with-time')">
+                    <ClockIcon class="w-5 text-icon-default" />
+                    <span>Copy rows and time entries</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    </div>
+</template>

resources/js/Components/Timesheet/TimesheetGrid.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { inject, type ComputedRef } from 'vue';
+import { Button } from '@/packages/ui/src/Buttons';
+import { PlusIcon } from '@heroicons/vue/20/solid';
+import TimesheetRow from '@/Components/Timesheet/TimesheetRow.vue';
+import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import { getDayJsInstance } from '@/packages/ui/src/utils/time';
+import type {
+    Client,
+    CreateClientBody,
+    CreateProjectBody,
+    Organization,
+    Project,
+    Tag,
+    Task,
+} from '@/packages/api/src';
+import type { TimesheetRow as TimesheetRowType, TimesheetRowKey } from '@/utils/useTimesheetGrid';
+
+const organization = inject<ComputedRef<Organization>>('organization');
+const dayjs = getDayJsInstance();
+
+defineProps<{
+    rows: TimesheetRowType[];
+    weekDays: string[];
+    todayDate: string;
+    dayTotals: number[];
+    weekTotalFormatted: string;
+    projects: Project[];
+    tasks: Task[];
+    clients: Client[];
+    tags: Tag[];
+    currency: string;
+    canCreateProject: boolean;
+    enableEstimatedTime: boolean;
+    createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
+    createClient: (client: CreateClientBody) => Promise<Client | undefined>;
+    createTag: (name: string) => Promise<Tag | undefined>;
+    formatDuration: (seconds: number) => string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'remove-row', key: TimesheetRowKey): void;
+    (e: 'cell-update', row: TimesheetRowType, dayIndex: number, seconds: number): void;
+    (
+        e: 'project-task-change',
+        row: TimesheetRowType,
+        projectId: string | null,
+        taskId: string | null
+    ): void;
+    (e: 'billable-change', row: TimesheetRowType, billable: boolean): void;
+    (e: 'tags-change', row: TimesheetRowType, tags: string[]): void;
+    (e: 'add-row', projectId: string | null, taskId: string | null): void;
+}>();
+</script>
+
+<template>
+    <div class="flow-root max-w-[100vw] overflow-x-auto">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                class="grid min-w-full w-max border-y border-default-background-separator"
+                style="grid-template-columns: minmax(420px, 1fr) repeat(7, minmax(96px, 120px)) minmax(100px, auto) 40px;">
+                <!-- Header row -->
+                <div
+                    class="bg-background dark:bg-secondary pl-7 pr-3 py-1 text-xs text-text-tertiary md:sticky md:left-0 md:z-10">
+                    Project
+                </div>
+                <div
+                    v-for="day in weekDays"
+                    :key="day"
+                    class="bg-background dark:bg-secondary px-2 py-1 text-center">
+                    <div class="text-xs font-medium text-text-secondary">
+                        {{ dayjs(day).format('ddd D') }}
+                    </div>
+                </div>
+                <div
+                    class="bg-background dark:bg-secondary pl-3 pr-3 py-1 text-right text-xs text-text-tertiary">
+                    Total
+                </div>
+                <div class="bg-background dark:bg-secondary"></div>
+
+                <!-- Data rows -->
+                <TimesheetRow
+                    v-for="row in rows"
+                    :key="row.key"
+                    :row="row"
+                    :week-days="weekDays"
+                    :today-date="todayDate"
+                    :projects="projects"
+                    :tasks="tasks"
+                    :clients="clients"
+                    :tags="tags"
+                    :currency="currency"
+                    :can-create-project="canCreateProject"
+                    :enable-estimated-time="enableEstimatedTime"
+                    :create-project="createProject"
+                    :create-client="createClient"
+                    :create-tag="createTag"
+                    :format-duration="formatDuration"
+                    @remove-row="$emit('remove-row', $event)"
+                    @cell-update="
+                        (dayIndex, seconds) => $emit('cell-update', row, dayIndex, seconds)
+                    "
+                    @project-task-change="(pId, tId) => $emit('project-task-change', row, pId, tId)"
+                    @billable-change="(billable) => $emit('billable-change', row, billable)"
+                    @tags-change="(t) => $emit('tags-change', row, t)" />
+
+                <!-- Add row -->
+                <div
+                    class="col-span-full flex items-center gap-2 border-t border-default-background-separator pl-4 pr-4 py-2">
+                    <TimeTrackerProjectTaskDropdown
+                        :project="null"
+                        :task="null"
+                        :projects="projects"
+                        :tasks="tasks"
+                        :clients="clients"
+                        :currency="currency"
+                        :can-create-project="canCreateProject"
+                        :enable-estimated-time="enableEstimatedTime"
+                        :create-project="createProject"
+                        :create-client="createClient"
+                        :organization-billable-rate="organization?.billable_rate ?? null"
+                        @changed="(p, t) => emit('add-row', p, t)">
+                        <template #trigger>
+                            <Button variant="ghost" size="sm" class="text-text-secondary">
+                                <PlusIcon class="h-4 w-4 mr-1 text-icon-default" />
+                                Add row
+                            </Button>
+                        </template>
+                    </TimeTrackerProjectTaskDropdown>
+                </div>
+
+                <!-- Totals row -->
+                <div
+                    class="border-t border-default-background-separator bg-background dark:bg-secondary pl-7 pr-3 py-1 text-xs text-text-tertiary md:sticky md:left-0 md:z-10">
+                    Total
+                </div>
+                <div
+                    v-for="(total, dayIndex) in dayTotals"
+                    :key="dayIndex"
+                    data-testid="timesheet_day_total"
+                    :class="[
+                        'flex items-center justify-center border-t border-default-background-separator bg-secondary px-2 py-1 text-xs font-medium',
+                        weekDays[dayIndex] === todayDate
+                            ? 'text-text-primary'
+                            : 'text-text-secondary',
+                    ]">
+                    <span class="w-[80px] text-center">
+                        {{ total > 0 ? formatDuration(total) : '-' }}
+                    </span>
+                </div>
+                <div
+                    class="flex items-center justify-end border-t border-default-background-separator bg-secondary pl-3 pr-3 py-1 text-xs font-semibold text-text-primary">
+                    {{ weekTotalFormatted }}
+                </div>
+                <div class="border-t border-default-background-separator bg-secondary"></div>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Components/Timesheet/TimesheetHeader.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Button } from '@/packages/ui/src/Buttons';
+import { ChevronLeftIcon, ChevronRightIcon, CalendarIcon } from '@heroicons/vue/20/solid';
+
+defineProps<{
+    isCurrentWeek: boolean;
+    weekNumber: number;
+    weekRangeDisplay: string;
+    weekTotalFormatted: string;
+}>();
+
+defineEmits<{
+    (e: 'previous'): void;
+    (e: 'next'): void;
+    (e: 'current'): void;
+}>();
+</script>
+
+<template>
+    <div class="flex flex-wrap items-center justify-between gap-4 mb-4 px-2 sm:px-4 lg:px-6">
+        <!-- Left: Week navigation -->
+        <div class="flex items-center gap-2">
+            <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8"
+                data-testid="timesheet_prev_week"
+                @click="$emit('previous')">
+                <ChevronLeftIcon class="h-4 w-4" />
+            </Button>
+            <button
+                data-testid="timesheet_week_display"
+                class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-card-background rounded-md transition"
+                @click="$emit('current')">
+                <CalendarIcon class="h-4 w-4 text-icon-default" />
+                <span v-if="isCurrentWeek">This week</span>
+                <span v-else>{{ weekRangeDisplay }}</span>
+                <span class="text-text-tertiary">&middot; W{{ weekNumber }}</span>
+            </button>
+            <Button
+                variant="outline"
+                size="icon"
+                class="h-8 w-8"
+                data-testid="timesheet_next_week"
+                @click="$emit('next')">
+                <ChevronRightIcon class="h-4 w-4" />
+            </Button>
+        </div>
+
+        <!-- Right: Week total -->
+        <div class="flex items-center gap-2.5">
+            <span class="text-xs text-text-tertiary uppercase tracking-wider">Week Total</span>
+            <span
+                data-testid="timesheet_grand_total"
+                class="text-sm font-semibold text-text-primary">
+                {{ weekTotalFormatted }}
+            </span>
+        </div>
+    </div>
+</template>

resources/js/Components/Timesheet/TimesheetRow.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, inject, type ComputedRef } from 'vue';
+import { XMarkIcon } from '@heroicons/vue/16/solid';
+import TimesheetCell from './TimesheetCell.vue';
+import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import TimeEntryRowTagDropdown from '@/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue';
+import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
+import type {
+    CreateClientBody,
+    CreateProjectBody,
+    Project,
+    Task,
+    Client,
+    Tag,
+    Organization,
+} from '@/packages/api/src';
+import type { TimesheetRow, TimesheetRowKey } from '@/utils/useTimesheetGrid';
+import { Button } from '@/packages/ui/src/Buttons';
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
+const props = defineProps<{
+    row: TimesheetRow;
+    weekDays: string[];
+    todayDate: string;
+    projects: Project[];
+    tasks: Task[];
+    clients: Client[];
+    tags: Tag[];
+    currency: string;
+    canCreateProject: boolean;
+    enableEstimatedTime: boolean;
+    createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
+    createClient: (client: CreateClientBody) => Promise<Client | undefined>;
+    createTag: (name: string) => Promise<Tag | undefined>;
+    formatDuration: (seconds: number) => string;
+}>();
+
+const emit = defineEmits<{
+    removeRow: [key: TimesheetRowKey];
+    cellUpdate: [dayIndex: number, newSeconds: number];
+    projectTaskChange: [projectId: string | null, taskId: string | null];
+    billableChange: [billable: boolean];
+    tagsChange: [tags: string[]];
+}>();
+
+const selectedProject = computed({
+    get: () => props.row.projectId,
+    set: (val) => emit('projectTaskChange', val, selectedTask.value),
+});
+
+const selectedTask = computed({
+    get: () => props.row.taskId,
+    set: (val) => emit('projectTaskChange', selectedProject.value, val),
+});
+
+const rowTotalFormatted = computed(() => props.formatDuration(props.row.totalSeconds));
+
+function hasRunningEntry(dayIndex: number): boolean {
+    const cell = props.row.cells.get(dayIndex);
+    if (!cell) return false;
+    return cell.entries.some((e) => e.end === null);
+}
+</script>
+
+<template>
+    <div data-testid="timesheet_row" class="contents group">
+        <!-- Project/Task column -->
+        <div
+            class="flex items-center gap-1 border-t border-default-background-separator bg-default-background pl-4 pr-3 py-2 md:sticky md:left-0 md:z-10">
+            <div class="flex-1 min-w-0">
+                <TimeTrackerProjectTaskDropdown
+                    v-model:project="selectedProject"
+                    v-model:task="selectedTask"
+                    :projects="projects"
+                    :tasks="tasks"
+                    :clients="clients"
+                    :currency="currency"
+                    :can-create-project="canCreateProject"
+                    :enable-estimated-time="enableEstimatedTime"
+                    :create-project="createProject"
+                    :create-client="createClient"
+                    :organization-billable-rate="organization?.billable_rate ?? null"
+                    variant="ghost"
+                    size="sm"
+                    class="w-full" />
+            </div>
+            <div class="flex items-center gap-1 flex-shrink-0 ml-auto">
+                <TimeEntryRowTagDropdown
+                    :create-tag="createTag"
+                    :tags="tags"
+                    :model-value="row.tags"
+                    @changed="emit('tagsChange', $event)" />
+                <BillableToggleButton
+                    :model-value="row.billable"
+                    size="small"
+                    faded
+                    @changed="emit('billableChange', $event)" />
+            </div>
+        </div>
+
+        <!-- Day cells -->
+        <TimesheetCell
+            v-for="(day, dayIndex) in weekDays"
+            :key="day"
+            :cell="row.cells.get(dayIndex)"
+            :day-index="dayIndex"
+            :date="day"
+            :is-today="day === todayDate"
+            :has-running-entry="hasRunningEntry(dayIndex)"
+            @update="(seconds) => emit('cellUpdate', dayIndex, seconds)" />
+
+        <!-- Row total -->
+        <div
+            data-testid="timesheet_row_total"
+            class="flex items-center justify-end border-t border-default-background-separator pl-3 pr-3 py-3 text-sm font-medium text-text-primary">
+            {{ rowTotalFormatted }}
+        </div>
+
+        <!-- Remove action -->
+        <div
+            class="flex items-center justify-center border-t border-default-background-separator pr-4 py-3">
+            <Button
+                variant="ghost"
+                size="icon"
+                class="h-6 w-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                @click="emit('removeRow', row.key)">
+                <XMarkIcon class="h-3.5 w-3.5 text-icon-default" />
+            </Button>
+        </div>
+    </div>
+</template>