add timesheets page

resources/js/Pages/Calendar.vue

@@ -3,6 +3,7 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import { useTimeEntriesCalendarQuery } from '@/utils/useTimeEntriesCalendarQuery';
 import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
 import { computed, ref, onMounted } from 'vue';
+import type { Dayjs } from 'dayjs';
 import { useQueryClient } from '@tanstack/vue-query';
 import {
     type Client,
@@ -27,8 +28,8 @@ import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 
 const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
-const calendarStart = ref<Date | undefined>(undefined);
-const calendarEnd = ref<Date | undefined>(undefined);
+const calendarStart = ref<Dayjs | undefined>(undefined);
+const calendarEnd = ref<Dayjs | undefined>(undefined);
 
 // Test-injectable activity periods (for E2E testing).
 // These hooks are no-ops in production — they only take effect when test code
@@ -99,7 +100,7 @@ const { tags } = useTagsQuery();
 
 const queryClient = useQueryClient();
 
-function onDatesChange({ start, end }: { start: Date; end: Date }) {
+function onDatesChange({ start, end }: { start: Dayjs; end: Dayjs }) {
     calendarStart.value = start;
     calendarEnd.value = end;
 }

resources/js/Pages/Timesheet.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import AppLayout from '@/Layouts/AppLayout.vue';
+import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
+import TimesheetHeader from '@/Components/Timesheet/TimesheetHeader.vue';
+import TimesheetGrid from '@/Components/Timesheet/TimesheetGrid.vue';
+import TimesheetFooterActions from '@/Components/Timesheet/TimesheetFooterActions.vue';
+import RemoveRowDialog from '@/Components/Timesheet/RemoveRowDialog.vue';
+import { useTimesheetQuery } from '@/utils/useTimesheetQuery';
+import { useTimesheetGrid } from '@/utils/useTimesheetGrid';
+import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
+import { useProjectsQuery } from '@/utils/useProjectsQuery';
+import { useTasksQuery } from '@/utils/useTasksQuery';
+import { useClientsQuery } from '@/utils/useClientsQuery';
+import { useTagsQuery } from '@/utils/useTagsQuery';
+import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useClientsStore } from '@/utils/useClients';
+import { useTagsStore } from '@/utils/useTags';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import { canCreateProjects } from '@/utils/permissions';
+import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import { useTimesheetWeek } from '@/utils/timesheet/useTimesheetWeek';
+import { useTimesheetCellMutations } from '@/utils/timesheet/useTimesheetCellMutations';
+import { useTimesheetRowMutations } from '@/utils/timesheet/useTimesheetRowMutations';
+import { useTimesheetRowDeletion } from '@/utils/timesheet/useTimesheetRowDeletion';
+import { useCopyLastWeek } from '@/utils/timesheet/useCopyLastWeek';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import type { CreateClientBody, CreateProjectBody, Project, Client, Tag } from '@/packages/api/src';
+
+// ── Week state ────────────────────────────────────────────────────
+const {
+    weekStart,
+    weekEnd,
+    weekDays,
+    weekNumber,
+    isCurrentWeek,
+    todayDate,
+    goToPreviousWeek,
+    goToNextWeek,
+    goToCurrentWeek,
+} = useTimesheetWeek();
+
+// ── Data fetching ─────────────────────────────────────────────────
+const { data, isPending } = useTimesheetQuery(weekStart, weekEnd);
+const timeEntries = computed(() => data.value?.data ?? []);
+
+const { projects } = useProjectsQuery();
+const { tasks } = useTasksQuery();
+const { clients } = useClientsQuery();
+const { tags } = useTagsQuery();
+const { now: currentTimerNow } = storeToRefs(useCurrentTimeEntryStore());
+
+const mutations = useTimeEntriesMutations();
+
+// ── Grid computation ──────────────────────────────────────────────
+const { rows, dayTotals, grandTotal, addSlot, removeSlot, updateSlot, clearSlots } =
+    useTimesheetGrid(timeEntries, weekDays, projects, tasks, currentTimerNow);
+
+// Wipe slots on week navigation so the new week starts fresh — the
+// grid's watcher will reseed from the newly fetched entries.
+watch(weekStart, () => clearSlots());
+
+// ── Formatters ────────────────────────────────────────────────────
+// Pull number/interval format off the org via its query rather than
+// inject('organization'), which is undefined during the page's setup
+// (AppLayout provides it later in the lifecycle).
+const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
+const intervalFormat = computed(() => organization.value?.interval_format ?? 'hours-minutes');
+const numberFormat = computed(() => organization.value?.number_format ?? 'point');
+
+function formatDuration(seconds: number): string {
+    if (seconds === 0) return '-';
+    return formatHumanReadableDuration(seconds, intervalFormat.value, numberFormat.value);
+}
+
+const weekTotalFormatted = computed(() =>
+    formatHumanReadableDuration(grandTotal.value, intervalFormat.value, numberFormat.value)
+);
+
+const weekRangeDisplay = computed(() => {
+    const start = weekStart.value;
+    const end = start.add(6, 'day');
+    return start.month() === end.month()
+        ? `${start.format('MMM D')} - ${end.format('D')}`
+        : `${start.format('MMM D')} - ${end.format('MMM D')}`;
+});
+
+// ── Cell / row mutation handlers ──────────────────────────────────
+const { handleCellUpdate } = useTimesheetCellMutations(weekDays, timeEntries, rows, removeSlot);
+
+const { handleRowIdentityChange, handleAddRow } = useTimesheetRowMutations(
+    mutations,
+    projects,
+    rows,
+    addSlot,
+    updateSlot,
+    removeSlot
+);
+
+const {
+    showDeleteDialog,
+    deleteRowEntryCount,
+    deleteRowProjectName,
+    requestRemoveRow,
+    confirmDeleteRow,
+} = useTimesheetRowDeletion(projects, mutations, removeSlot);
+
+function handleRemoveRow(key: string) {
+    const row = rows.value.find((r) => r.key === key);
+    if (row) requestRemoveRow(row);
+}
+
+// ── Copy last week ────────────────────────────────────────────────
+const { isCopyingLastWeek, copyLastWeekRows, copyLastWeekWithTime } = useCopyLastWeek(
+    weekStart,
+    weekDays,
+    rows,
+    timeEntries,
+    addSlot
+);
+
+// ── Inline creation helpers (passed to TimesheetRow) ──────────────
+async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
+    return await useProjectsStore().createProject(project);
+}
+
+async function createClient(body: CreateClientBody): Promise<Client | undefined> {
+    return await useClientsStore().createClient(body);
+}
+
+async function createTag(name: string): Promise<Tag | undefined> {
+    return await useTagsStore().createTag(name);
+}
+</script>
+
+<template>
+    <AppLayout title="Timesheet" data-testid="timesheet_view">
+        <div class="pt-5 lg:pt-8 pb-4 lg:pb-6">
+            <TimesheetHeader
+                :is-current-week="isCurrentWeek"
+                :week-number="weekNumber"
+                :week-range-display="weekRangeDisplay"
+                :week-total-formatted="weekTotalFormatted"
+                @previous="goToPreviousWeek"
+                @next="goToNextWeek"
+                @current="goToCurrentWeek" />
+
+            <TimesheetGrid
+                v-if="!isPending"
+                :rows="rows"
+                :week-days="weekDays"
+                :today-date="todayDate"
+                :day-totals="dayTotals"
+                :week-total-formatted="weekTotalFormatted"
+                :projects="projects"
+                :tasks="tasks"
+                :clients="clients"
+                :tags="tags"
+                :currency="getOrganizationCurrencyString()"
+                :can-create-project="canCreateProjects()"
+                :enable-estimated-time="isAllowedToPerformPremiumAction()"
+                :create-project="createProject"
+                :create-client="createClient"
+                :create-tag="createTag"
+                :format-duration="formatDuration"
+                @remove-row="handleRemoveRow"
+                @cell-update="handleCellUpdate"
+                @project-task-change="
+                    (row, projectId, taskId) =>
+                        handleRowIdentityChange(row, { projectId, taskId })
+                "
+                @billable-change="
+                    (row, billable) => handleRowIdentityChange(row, { billable })
+                "
+                @tags-change="(row, tags) => handleRowIdentityChange(row, { tags })"
+                @add-row="handleAddRow" />
+
+            <TimesheetFooterActions
+                v-if="!isPending"
+                :busy="isCopyingLastWeek"
+                @copy-rows="copyLastWeekRows"
+                @copy-with-time="copyLastWeekWithTime" />
+
+            <div v-else class="flex justify-center items-center py-12">
+                <LoadingSpinner />
+            </div>
+        </div>
+
+        <RemoveRowDialog
+            v-model:open="showDeleteDialog"
+            :entry-count="deleteRowEntryCount"
+            :project-name="deleteRowProjectName"
+            @confirm="confirmDeleteRow" />
+    </AppLayout>
+</template>