Compare commits

..

3 Commits

Author SHA1 Message Date
Gregor Vostrak
f7663b1c8b Clarify out of scope items for vulnerability reports
Added out of scope section for vulnerability reporting.
2026-05-18 19:21:32 +02:00
Gregor Vostrak
793bd11dcf remove member, invitation, and owner email disclosure from Teams/Show inertia props
The Teams/Show Inertia page serialized members, pending invitations, and the
owner email into props using only a belongsToTeam authorization gate, while
the corresponding API endpoints correctly enforced members:view and
invitations:view. The serialized data was unused by the live UI (the
TeamMemberManager partial that referenced it was orphaned), so dropping the
fields removes the disclosure surface without functional impact. The owner
card retains name and photo.
2026-05-18 19:04:57 +02:00
Gregor Vostrak
77a62afd69 add alphabetic sorting to multiselect dropdowns 2026-04-29 18:32:05 +02:00
42 changed files with 236 additions and 2974 deletions

1
.npmrc
View File

@@ -1 +0,0 @@
min-release-age=7

View File

@@ -3,3 +3,18 @@
## Reporting a Vulnerability ## Reporting a Vulnerability
If you discover a security vulnerability regarding this project, please e-mail me to [security@solidtime.io](mailto:security@solidtime.io)! If you discover a security vulnerability regarding this project, please e-mail me to [security@solidtime.io](mailto:security@solidtime.io)!
## Out of scope
Reports we typically won't issue an advisory for:
* Theoretical findings without a working PoC
* Raw scanner output without manual validation
* Missing/weak security headers in isolation (CSP, X-Frame-Options, HSTS, etc.)
* SPF/DKIM/DMARC on non-mail-sending domains; missing DNSSEC/CAA; TLS cipher preferences
* Self-XSS; CSRF on non-state-changing endpoints (logout, theme)
* CSV / spreadsheet formula injection in exports — treated as a spreadsheet-application issue
* Org owners or admins acting destructively within their own organization
* Anything requiring direct DB, shell, or filesystem access on a self-hosted instance
* Missing OAuth Scope enforcement (this is not implemented yet, but AI scanners flag it which is why it is included in this list until we actually support it)

View File

@@ -304,28 +304,8 @@ class JetstreamServiceProvider extends ServiceProvider
'owner' => [ 'owner' => [
'id' => $owner->getKey(), 'id' => $owner->getKey(),
'name' => $owner->name, 'name' => $owner->name,
'email' => $owner->email,
'profile_photo_url' => $owner->profile_photo_url, 'profile_photo_url' => $owner->profile_photo_url,
], ],
'users' => $teamModel->users->map(function (User $user): array {
return [
'id' => $user->getKey(),
'name' => $user->name,
'email' => $user->email,
'profile_photo_url' => $user->profile_photo_url,
'membership' => [
'id' => $user->membership->id,
'role' => $user->membership->role,
],
];
}),
'team_invitations' => $teamModel->teamInvitations->map(function (OrganizationInvitation $invitation): array {
return [
'id' => $invitation->getKey(),
'email' => $invitation->email,
'role' => $invitation->role,
];
}),
], ],
'currencies' => array_map(function (Currency $currency): string { 'currencies' => array_map(function (Currency $currency): string {
return $currency->getName(); return $currency->getName();

View File

@@ -62,7 +62,7 @@ class TimeEntryFilter
if ($start === null) { if ($start === null) {
return $this; return $this;
} }
$this->builder->where('start', '>=', $start); $this->builder->where('start', '>', $start);
return $this; return $this;
} }

View File

@@ -907,7 +907,7 @@ test.describe('Employee Sidebar Navigation', () => {
// Visible links // Visible links
await expect(employee.page.getByRole('link', { name: 'Dashboard' })).toBeVisible(); await expect(employee.page.getByRole('link', { name: 'Dashboard' })).toBeVisible();
await expect(employee.page.getByRole('link', { name: 'Time', exact: true })).toBeVisible(); await expect(employee.page.getByRole('link', { name: 'Time' })).toBeVisible();
await expect(employee.page.getByRole('link', { name: 'Calendar' })).toBeVisible(); await expect(employee.page.getByRole('link', { name: 'Calendar' })).toBeVisible();
await expect(employee.page.getByRole('link', { name: 'Projects' })).toBeVisible(); await expect(employee.page.getByRole('link', { name: 'Projects' })).toBeVisible();
await expect(employee.page.getByRole('link', { name: 'Clients' })).toBeVisible(); await expect(employee.page.getByRole('link', { name: 'Clients' })).toBeVisible();

View File

@@ -640,7 +640,7 @@ test('test that creating a project with estimated time in human-readable format
await page.getByLabel('Project Name').fill(newProjectName); await page.getByLabel('Project Name').fill(newProjectName);
// Fill in estimated time using human-readable format // Fill in estimated time using human-readable format
const estimatedTimeInput = page.getByLabel('Time Estimated'); const estimatedTimeInput = page.getByPlaceholder('e.g. 2h 30m or 1.5');
await estimatedTimeInput.fill('2h 30m'); await estimatedTimeInput.fill('2h 30m');
await estimatedTimeInput.press('Tab'); await estimatedTimeInput.press('Tab');
@@ -668,7 +668,7 @@ test('test that creating a project with estimated time using decimal notation wo
await page.getByLabel('Project Name').fill(newProjectName); await page.getByLabel('Project Name').fill(newProjectName);
// Fill in estimated time using decimal notation (1.5 hours = 1h 30m) // Fill in estimated time using decimal notation (1.5 hours = 1h 30m)
const estimatedTimeInput = page.getByLabel('Time Estimated'); const estimatedTimeInput = page.getByPlaceholder('e.g. 2h 30m or 1.5');
await estimatedTimeInput.fill('1.5'); await estimatedTimeInput.fill('1.5');
await estimatedTimeInput.press('Tab'); await estimatedTimeInput.press('Tab');
@@ -696,7 +696,7 @@ test('test that creating a project with estimated time using comma decimal notat
await page.getByLabel('Project Name').fill(newProjectName); await page.getByLabel('Project Name').fill(newProjectName);
// Fill in estimated time using comma decimal notation (2,5 hours = 2h 30m) // Fill in estimated time using comma decimal notation (2,5 hours = 2h 30m)
const estimatedTimeInput = page.getByLabel('Time Estimated'); const estimatedTimeInput = page.getByPlaceholder('e.g. 2h 30m or 1.5');
await estimatedTimeInput.fill('2,5'); await estimatedTimeInput.fill('2,5');
await estimatedTimeInput.press('Tab'); await estimatedTimeInput.press('Tab');
@@ -727,7 +727,7 @@ test('test that updating estimated time on existing project works', async ({ pag
await page.getByRole('menuitem').getByText('Edit').first().click(); await page.getByRole('menuitem').getByText('Edit').first().click();
// Fill in estimated time // Fill in estimated time
const estimatedTimeInput = page.getByLabel('Time Estimated'); const estimatedTimeInput = page.getByPlaceholder('e.g. 2h 30m or 1.5');
await estimatedTimeInput.fill('4h 15m'); await estimatedTimeInput.fill('4h 15m');
await estimatedTimeInput.press('Tab'); await estimatedTimeInput.press('Tab');
@@ -748,7 +748,7 @@ test('test that estimated time input displays formatted value after blur', async
await goToProjectsOverview(page); await goToProjectsOverview(page);
await page.getByRole('button', { name: 'Create Project' }).click(); await page.getByRole('button', { name: 'Create Project' }).click();
const estimatedTimeInput = page.getByLabel('Time Estimated'); const estimatedTimeInput = page.getByPlaceholder('e.g. 2h 30m or 1.5');
// Enter time in various formats and check the displayed value // Enter time in various formats and check the displayed value
await estimatedTimeInput.fill('90'); await estimatedTimeInput.fill('90');

View File

@@ -1,46 +0,0 @@
<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>

View File

@@ -1,63 +0,0 @@
<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>

View File

@@ -1,48 +0,0 @@
<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>

View File

@@ -1,164 +0,0 @@
<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"
:no-project-value="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>

View File

@@ -1,60 +0,0 @@
<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>

View File

@@ -1,133 +0,0 @@
<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"
:no-project-value="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>

View File

@@ -17,7 +17,6 @@ import {
UserGroupIcon, UserGroupIcon,
XMarkIcon, XMarkIcon,
DocumentTextIcon, DocumentTextIcon,
TableCellsIcon,
} from '@heroicons/vue/20/solid'; } from '@heroicons/vue/20/solid';
import { PanelLeft } from 'lucide-vue-next'; import { PanelLeft } from 'lucide-vue-next';
import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue'; import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
@@ -136,7 +135,7 @@ const page = usePage<{
? 'max-lg:translate-x-0 max-lg:shadow-xl' ? 'max-lg:translate-x-0 max-lg:shadow-xl'
: 'max-lg:-translate-x-full', : 'max-lg:-translate-x-full',
]" ]"
class="flex-shrink-0 h-screen fixed w-[280px] px-2.5 py-4 hidden lg:flex flex-col justify-between bg-background border-r border-default-background-separator max-lg:z-50 max-lg:transition-transform max-lg:duration-200 max-lg:ease-in-out lg:w-[230px] lg:border-r-0" class="flex-shrink-0 h-screen fixed w-[280px] px-2.5 py-4 hidden lg:flex flex-col justify-between bg-background border-r border-default-background-separator max-lg:z-50 max-lg:transition-transform max-lg:duration-200 max-lg:ease-in-out lg:w-[230px] 2xl:w-[250px] 2xl:px-3 lg:border-r-0"
:style="showSidebarMenu ? { display: 'flex' } : undefined"> :style="showSidebarMenu ? { display: 'flex' } : undefined">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<div <div
@@ -186,11 +185,6 @@ const page = usePage<{
:icon="CalendarIcon" :icon="CalendarIcon"
:current="route().current('calendar')" :current="route().current('calendar')"
:href="route('calendar')"></NavigationSidebarItem> :href="route('calendar')"></NavigationSidebarItem>
<NavigationSidebarItem
title="Timesheet"
:icon="TableCellsIcon"
:current="route().current('timesheet')"
:href="route('timesheet')"></NavigationSidebarItem>
<NavigationSidebarItem <NavigationSidebarItem
title="Reporting" title="Reporting"
:icon="ChartBarIcon" :icon="ChartBarIcon"
@@ -314,7 +308,7 @@ const page = usePage<{
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 lg:ml-[230px] min-w-0"> <div class="flex-1 lg:ml-[230px] 2xl:ml-[250px] min-w-0">
<div <div
class="h-screen overflow-y-auto flex flex-col bg-default-background border-l border-default-background-separator"> class="h-screen overflow-y-auto flex flex-col bg-default-background border-l border-default-background-separator">
<div <div

View File

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

View File

@@ -1,448 +0,0 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { router, useForm, usePage } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import ActionSection from '@/Components/ActionSection.vue';
import ConfirmationModal from '@/Components/ConfirmationModal.vue';
import DangerButton from '@/packages/ui/src/Buttons/DangerButton.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import FormSection from '@/Components/FormSection.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import SectionBorder from '@/Components/SectionBorder.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
import type { Organization, OrganizationInvitation, User } from '@/types/models';
import type { Membership, Permissions, Role } from '@/types/jetstream';
import { filterRoles } from '@/utils/roles';
type UserWithMembership = User & { membership: Membership };
const props = defineProps<{
team: Organization;
availableRoles: Role[];
userPermissions: Permissions;
}>();
const users = computed(() => {
return props.team.users as Array<UserWithMembership>;
});
const page = usePage<{
auth: {
user: User;
};
}>();
const addTeamMemberForm = useForm({
email: '',
role: null as string | null,
});
const updateRoleForm = useForm({
role: null as string | null,
});
const leaveTeamForm = useForm({});
const removeTeamMemberForm = useForm({});
const currentlyManagingRole = ref(false);
const managingRoleFor = ref<User | null>(null);
const confirmingLeavingTeam = ref(false);
const teamMemberBeingRemoved = ref<User | null>(null);
const addTeamMember = () => {
addTeamMemberForm.post(route('team-members.store', props.team.id), {
errorBag: 'addTeamMember',
preserveScroll: true,
onSuccess: () => addTeamMemberForm.reset(),
});
};
const cancelTeamInvitation = (invitation: OrganizationInvitation) => {
router.delete(route('team-invitations.destroy', invitation.id), {
preserveScroll: true,
});
};
const manageRole = (teamMember: User & { membership: Membership }) => {
managingRoleFor.value = teamMember;
updateRoleForm.role = teamMember.membership.role;
currentlyManagingRole.value = true;
};
const updateRole = () => {
updateRoleForm.put(
route('team-members.update', {
team: props.team.id,
user: managingRoleFor.value?.id,
}),
{
preserveScroll: true,
onSuccess: () => (currentlyManagingRole.value = false),
}
);
};
const confirmLeavingTeam = () => {
confirmingLeavingTeam.value = true;
};
const leaveTeam = () => {
leaveTeamForm.delete(route('team-members.destroy', [props.team.id, page.props.auth.user.id]));
};
const confirmTeamMemberRemoval = (teamMember: User) => {
teamMemberBeingRemoved.value = teamMember;
};
const removeTeamMember = () => {
removeTeamMemberForm.delete(
route('team-members.destroy', {
team: props.team.id,
user: teamMemberBeingRemoved.value?.id,
}),
{
errorBag: 'removeTeamMember',
preserveScroll: true,
preserveState: true,
onSuccess: () => (teamMemberBeingRemoved.value = null),
}
);
};
const displayableRole = (role: string) => {
return props.availableRoles.find((r) => r.key === role)?.name;
};
</script>
<template>
<div>
<div v-if="userPermissions.canAddTeamMembers">
<SectionBorder />
<!-- Add Organization Member -->
<FormSection @submitted="addTeamMember">
<template #title> Add Organization Member</template>
<template #description>
Add a new member to your organization, allowing them to collaborate with you.
</template>
<template #form>
<div class="col-span-6">
<div class="max-w-xl text-sm text-muted">
Please provide the email address of the person you would like to add to
this organization.
</div>
</div>
<!-- Member Email -->
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="email">Email</FieldLabel>
<TextInput
id="email"
v-model="addTeamMemberForm.email"
type="email"
class="block w-full" />
<FieldError v-if="addTeamMemberForm.errors.email">{{
addTeamMemberForm.errors.email
}}</FieldError>
</Field>
<!-- Role -->
<div v-if="availableRoles.length > 0" class="col-span-6 lg:col-span-4">
<FieldLabel for="roles">Role</FieldLabel>
<FieldError v-if="addTeamMemberForm.errors.role">{{
addTeamMemberForm.errors.role
}}</FieldError>
<div
class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
<button
v-for="(role, i) in filterRoles(availableRoles)"
:key="role.key"
type="button"
class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
:class="{
'border-t border-card-border focus:border-none rounded-t-none':
i > 0,
'rounded-b-none': i != Object.keys(availableRoles).length - 1,
}"
@click="addTeamMemberForm.role = role.key">
<div
:class="{
'opacity-50':
addTeamMemberForm.role &&
addTeamMemberForm.role != role.key,
}">
<!-- Role Name -->
<div class="flex items-center">
<div
class="text-sm text-text-primary"
:class="{
'font-semibold': addTeamMemberForm.role == role.key,
}">
{{ role.name }}
</div>
<svg
v-if="addTeamMemberForm.role == role.key"
class="ms-2 h-5 w-5 text-green-400"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Role Description -->
<div class="mt-2 text-xs text-muted text-start">
{{ role.description }}
</div>
</div>
</button>
</div>
</div>
</template>
<template #actions>
<ActionMessage :on="addTeamMemberForm.recentlySuccessful" class="me-3">
Added.
</ActionMessage>
<PrimaryButton
:class="{ 'opacity-25': addTeamMemberForm.processing }"
:disabled="addTeamMemberForm.processing">
Add
</PrimaryButton>
</template>
</FormSection>
</div>
<div v-if="team.team_invitations.length > 0 && userPermissions.canAddTeamMembers">
<SectionBorder />
<!-- Organization Member Invitations -->
<ActionSection class="mt-10 sm:mt-0">
<template #title> Pending Organization Invitations</template>
<template #description>
These people have been invited to your organization and have been sent an
invitation email. They may join the organization by accepting the email
invitation.
</template>
<!-- Pending Organization Member Invitation List -->
<template #content>
<div class="space-y-6">
<div
v-for="invitation in team.team_invitations"
:key="invitation.id"
class="flex items-center justify-between">
<div class="text-muted">
{{ invitation.email }}
</div>
<div class="flex items-center">
<!-- Cancel Organization Invitation -->
<button
v-if="userPermissions.canRemoveTeamMembers"
class="cursor-pointer ms-6 text-sm text-red-500 focus:outline-none"
@click="cancelTeamInvitation(invitation)">
Cancel
</button>
</div>
</div>
</div>
</template>
</ActionSection>
</div>
<div v-if="users.length > 0">
<SectionBorder />
<!-- Manage Organization Members -->
<ActionSection class="mt-10 sm:mt-0">
<template #title> Organization Members</template>
<template #description>
All of the people that are part of this organization.
</template>
<!-- Organization Member List -->
<template #content>
<div class="space-y-6">
<div
v-for="user in users"
:key="user.id"
class="flex items-center justify-between">
<div class="flex items-center">
<img
class="w-8 h-8 rounded-full object-cover"
:src="user.profile_photo_url"
:alt="user.name" />
<div class="ms-4 text-text-primary">
{{ user.name }}
</div>
</div>
<div class="flex items-center">
<!-- Manage Organization Member Role -->
<button
v-if="
userPermissions.canUpdateTeamMembers &&
availableRoles.length
"
class="ms-2 text-sm text-gray-400 underline"
@click="manageRole(user)">
{{ displayableRole(user.membership.role) }}
</button>
<div
v-else-if="availableRoles.length"
class="ms-2 text-sm text-gray-400">
{{ displayableRole(user.membership.role) }}
</div>
<!-- Leave Organization -->
<button
v-if="page.props.auth.user.id === user.id"
class="cursor-pointer ms-6 text-sm text-red-500"
@click="confirmLeavingTeam">
Leave
</button>
<!-- Remove Organization Member -->
<button
v-else-if="userPermissions.canRemoveTeamMembers"
class="cursor-pointer ms-6 text-sm text-red-500"
@click="confirmTeamMemberRemoval(user)">
Remove
</button>
</div>
</div>
</div>
</template>
</ActionSection>
</div>
<!-- Role Management Modal -->
<DialogModal :show="currentlyManagingRole" @close="currentlyManagingRole = false">
<template #title> Manage Role</template>
<template #content>
<div v-if="managingRoleFor">
<div
class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
<button
v-for="(role, i) in availableRoles"
:key="role.key"
type="button"
class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
:class="{
'border-t border-card-border focus:border-none rounded-t-none':
i > 0,
'rounded-b-none': i !== Object.keys(availableRoles).length - 1,
}"
@click="updateRoleForm.role = role.key">
<div
:class="{
'opacity-50':
updateRoleForm.role && updateRoleForm.role !== role.key,
}">
<!-- Role Name -->
<div class="flex items-center">
<div
class="text-sm text-muted"
:class="{
'font-semibold': updateRoleForm.role === role.key,
}">
{{ role.name }}
</div>
<svg
v-if="updateRoleForm.role == role.key"
class="ms-2 h-5 w-5 text-green-400"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Role Description -->
<div class="mt-2 text-xs text-muted">
{{ role.description }}
</div>
</div>
</button>
</div>
</div>
</template>
<template #footer>
<SecondaryButton @click="currentlyManagingRole = false"> Cancel </SecondaryButton>
<PrimaryButton
class="ms-3"
:class="{ 'opacity-25': updateRoleForm.processing }"
:disabled="updateRoleForm.processing"
@click="updateRole">
Save
</PrimaryButton>
</template>
</DialogModal>
<!-- Leave Organization Confirmation Modal -->
<ConfirmationModal :show="confirmingLeavingTeam" @close="confirmingLeavingTeam = false">
<template #title> Leave Organization</template>
<template #content> Are you sure you would like to leave this organization? </template>
<template #footer>
<SecondaryButton @click="confirmingLeavingTeam = false"> Cancel </SecondaryButton>
<DangerButton
class="ms-3"
:class="{ 'opacity-25': leaveTeamForm.processing }"
:disabled="leaveTeamForm.processing"
@click="leaveTeam">
Leave
</DangerButton>
</template>
</ConfirmationModal>
<!-- Remove Organization Member Confirmation Modal -->
<ConfirmationModal :show="!!teamMemberBeingRemoved" @close="teamMemberBeingRemoved = null">
<template #title> Remove Organization Member</template>
<template #content>
Are you sure you would like to remove this person from the organization?
</template>
<template #footer>
<SecondaryButton @click="teamMemberBeingRemoved = null"> Cancel </SecondaryButton>
<DangerButton
class="ms-3"
:class="{ 'opacity-25': removeTeamMemberForm.processing }"
:disabled="removeTeamMemberForm.processing"
@click="removeTeamMember">
Remove
</DangerButton>
</template>
</ConfirmationModal>
</div>
</template>

View File

@@ -51,9 +51,6 @@ const updateTeamName = () => {
<div class="text-text-primary"> <div class="text-text-primary">
{{ team.owner.name }} {{ team.owner.name }}
</div> </div>
<div class="text-text-secondary text-sm">
{{ team.owner.email }}
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -1,196 +0,0 @@
<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>

View File

@@ -57,7 +57,7 @@ import type {
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'dates-change', payload: { start: Dayjs; end: Dayjs }): void; (e: 'dates-change', payload: { start: Date; end: Date }): void;
(e: 'refresh'): void; (e: 'refresh'): void;
}>(); }>();

View File

@@ -265,9 +265,9 @@ export function useCalendarEvents(params: {
'seconds' 'seconds'
); );
} else { } else {
durationSeconds = Math.max( durationSeconds = params.currentTime.value.diff(
0, getDayJsInstance()(entry.start),
params.currentTime.value.diff(getDayJsInstance()(entry.start), 'seconds') 'seconds'
); );
} }

View File

@@ -1,17 +1,27 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
import { getLocalizedDayJs } from '../utils/time'; import { getLocalizedDayJs } from '../utils/time';
import { getWeekStartDayNumber } from '../utils/settings'; import { getWeekStart } from '../utils/settings';
export function useCalendarNavigation(callbacks: { export function useCalendarNavigation(callbacks: {
onDatesChange: (payload: { start: Dayjs; end: Dayjs }) => void; onDatesChange: (payload: { start: Date; end: Date }) => void;
scrollToCurrentTime: () => void; scrollToCurrentTime: () => void;
}) { }) {
const activeView = ref('timeGridWeek'); const activeView = ref('timeGridWeek');
const currentDate = ref(getLocalizedDayJs()); const currentDate = ref(getLocalizedDayJs());
function getFirstDay(): number { function getFirstDay(): number {
return getWeekStartDayNumber(); const weekStart = getWeekStart();
const weekStartMap: Record<string, number> = {
sunday: 0,
monday: 1,
tuesday: 2,
wednesday: 3,
thursday: 4,
friday: 5,
saturday: 6,
};
return weekStartMap[weekStart] ?? 1;
} }
const viewDays = computed<Dayjs[]>(() => { const viewDays = computed<Dayjs[]>(() => {
@@ -57,8 +67,8 @@ export function useCalendarNavigation(callbacks: {
const days = viewDays.value; const days = viewDays.value;
if (days.length === 0) return; if (days.length === 0) return;
const start = days[0]!; const start = days[0]!.toDate();
const end = days[days.length - 1]!.add(1, 'day'); const end = days[days.length - 1]!.add(1, 'day').toDate();
callbacks.onDatesChange({ start, end }); callbacks.onDatesChange({ start, end });
} }

View File

@@ -1,145 +0,0 @@
<script setup lang="ts">
import { computed, inject, ref, type ComputedRef } from 'vue';
import { formatHumanReadableDuration, parseTimeInput } from '@/packages/ui/src/utils/time';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
import type { Organization } from '@/packages/api/src';
const organization = inject<ComputedRef<Organization>>('organization');
const organizationSettings = computed(() => ({
intervalFormat: organization?.value?.interval_format ?? 'hours-minutes',
numberFormat: organization?.value?.number_format ?? 'point',
}));
const props = withDefaults(
defineProps<{
modelValue?: number | null;
placeholder?: string;
disabled?: boolean;
inputClass?: string;
size?: 'sm' | 'base';
defaultUnit?: 'auto' | 'hours' | 'minutes';
}>(),
{
modelValue: null,
placeholder: '-',
disabled: false,
inputClass: '',
size: 'base',
defaultUnit: 'auto',
}
);
const emit = defineEmits<{
'update:modelValue': [value: number | null];
commit: [value: number | null];
submit: [];
}>();
const temporaryValue = ref('');
const isEditing = ref(false);
const hasPendingEdit = ref(false);
const skipNextCommit = ref(false);
function formatModelValue(value: number | null | undefined): string {
if (!value || value === 0) {
return '';
}
return formatHumanReadableDuration(
value,
organizationSettings.value.intervalFormat,
organizationSettings.value.numberFormat
);
}
const displayValue = computed({
get() {
if (isEditing.value) {
return temporaryValue.value;
}
return formatModelValue(props.modelValue);
},
set(newValue: string) {
temporaryValue.value = newValue;
hasPendingEdit.value = true;
},
});
function selectInput(event: Event) {
isEditing.value = true;
hasPendingEdit.value = false;
skipNextCommit.value = false;
temporaryValue.value = formatModelValue(props.modelValue);
const target = event.target as HTMLInputElement;
target.select();
}
function resetEditingState() {
temporaryValue.value = '';
isEditing.value = false;
hasPendingEdit.value = false;
}
function commitValue() {
if (skipNextCommit.value) {
skipNextCommit.value = false;
return;
}
const input = temporaryValue.value.trim();
const shouldCommit = hasPendingEdit.value;
resetEditingState();
if (!shouldCommit) {
return;
}
// Blank or literal "0" → null. Consumers decide what null means
// (clear estimate, delete cell, etc.) by reading their own emit.
if (input === '' || input === '0') {
emit('update:modelValue', null);
emit('commit', null);
return;
}
const defaultUnit =
props.defaultUnit === 'auto'
? organizationSettings.value.intervalFormat === 'decimal'
? 'hours'
: 'minutes'
: props.defaultUnit;
const seconds = parseTimeInput(input, organizationSettings.value.numberFormat, defaultUnit);
if (seconds !== null && seconds >= 0) {
emit('update:modelValue', seconds);
emit('commit', seconds);
}
}
function cancelEdit(event: Event) {
skipNextCommit.value = true;
resetEditingState();
(event.target as HTMLInputElement).blur();
}
function commitAndSubmit() {
commitValue();
emit('submit');
}
</script>
<template>
<TextInput
v-model="displayValue"
data-testid="duration_seconds_input"
name="Duration"
:size="size"
:disabled="disabled"
:placeholder="isEditing ? '0' : placeholder"
:class="inputClass"
@focus="selectInput"
@blur="commitValue"
@keydown.enter.prevent="commitAndSubmit"
@keydown.escape="cancelEdit" />
</template>

View File

@@ -1,6 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import DurationSecondsInput from '@/packages/ui/src/Input/DurationSecondsInput.vue'; import { onMounted, ref, watch, inject } from 'vue';
import { formatHumanReadableDuration, parseTimeInput } from '@/packages/ui/src/utils/time';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import { TextInput } from '@/packages/ui/src';
import type { Organization } from '@/packages/api/src';
import { type ComputedRef } from 'vue';
const temporaryInput = ref<string>('');
const model = defineModel<number | null>({ const model = defineModel<number | null>({
default: null, default: null,
@@ -10,16 +16,64 @@ const emit = defineEmits<{
submit: []; submit: [];
}>(); }>();
const organization = inject<ComputedRef<Organization>>('organization');
function updateDuration() {
const input = temporaryInput.value.trim();
if (input === '') {
model.value = null;
return;
}
const seconds = parseTimeInput(input, organization?.value?.number_format, 'hours');
if (seconds !== null && seconds > 0) {
model.value = seconds;
}
updateInputDisplay();
}
const props = defineProps<{ const props = defineProps<{
class?: string; class?: string;
}>(); }>();
watch(model, updateInputDisplay);
onMounted(() => updateInputDisplay());
function updateInputDisplay() {
if (model.value !== null && model.value > 0) {
temporaryInput.value = formatHumanReadableDuration(
model.value,
organization?.value?.interval_format,
organization?.value?.number_format
);
} else {
temporaryInput.value = '';
}
}
function selectInput(event: Event) {
const target = event.target as HTMLInputElement;
target.select();
}
function updateAndSubmit() {
updateDuration();
emit('submit');
}
</script> </script>
<template> <template>
<DurationSecondsInput <TextInput
v-model="model" ref="inputField"
:input-class="twMerge('placeholder:text-text-tertiary', props.class)" v-model="temporaryInput"
:class="twMerge('text-text-secondary', props.class)"
type="text"
placeholder="e.g. 2h 30m or 1.5" placeholder="e.g. 2h 30m or 1.5"
default-unit="hours" @focus="selectInput"
@submit="emit('submit')" /> @blur="updateDuration"
@keydown.enter="updateAndSubmit" />
</template> </template>
<style scoped></style>

View File

@@ -35,7 +35,8 @@ watch(open, (isOpen) => {
sortedItems.value = [...props.items].sort((a, b) => { sortedItems.value = [...props.items].sort((a, b) => {
const aSelected = model.value.includes(props.getKeyFromItem(a)) ? 0 : 1; const aSelected = model.value.includes(props.getKeyFromItem(a)) ? 0 : 1;
const bSelected = model.value.includes(props.getKeyFromItem(b)) ? 0 : 1; const bSelected = model.value.includes(props.getKeyFromItem(b)) ? 0 : 1;
return aSelected - bSelected; if (aSelected !== bSelected) return aSelected - bSelected;
return props.getNameForItem(a).localeCompare(props.getNameForItem(b));
}); });
} }
}); });

View File

@@ -1,15 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
const props = withDefaults( const props = defineProps<{
defineProps<{
name?: string; name?: string;
class?: string; class?: string;
size?: 'sm' | 'base'; }>();
}>(),
{ size: 'base' }
);
const input = ref<HTMLInputElement | null>(null); const input = ref<HTMLInputElement | null>(null);
@@ -21,10 +17,6 @@ onMounted(() => {
defineExpose({ focus: () => input.value?.focus() }); defineExpose({ focus: () => input.value?.focus() });
const model = defineModel(); const model = defineModel();
const sizeClasses = computed(() =>
props.size === 'sm' ? 'h-7 px-2 py-0.5 text-xs' : 'h-9 px-3 py-1 text-base sm:text-sm'
);
</script> </script>
<template> <template>
@@ -33,8 +25,7 @@ const sizeClasses = computed(() =>
v-model="model" v-model="model"
:class=" :class="
twMerge( twMerge(
'border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm', 'h-9 px-3 py-1 text-base sm:text-sm border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
sizeClasses,
props.class props.class
) )
" "

View File

@@ -11,13 +11,11 @@ import type {
Client, Client,
} from '@/packages/api/src'; } from '@/packages/api/src';
import { PlusCircleIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/16/solid'; import { PlusIcon, PlusCircleIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/16/solid';
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue'; import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import { Button } from '@/packages/ui/src/Buttons'; import { Button } from '@/packages/ui/src/Buttons';
const NO_PROJECT_ID = '';
const task = defineModel<string | null>('task', { const task = defineModel<string | null>('task', {
default: null, default: null,
}); });
@@ -59,7 +57,6 @@ const props = withDefaults(
currency: string; currency: string;
emptyPlaceholder?: string; emptyPlaceholder?: string;
allowReset?: boolean; allowReset?: boolean;
noProjectValue?: string | null;
enableEstimatedTime: boolean; enableEstimatedTime: boolean;
organizationBillableRate: number | null; organizationBillableRate: number | null;
canCreateProject: boolean; canCreateProject: boolean;
@@ -71,7 +68,6 @@ const props = withDefaults(
{ {
emptyPlaceholder: 'No Project', emptyPlaceholder: 'No Project',
allowReset: false, allowReset: false,
noProjectValue: NO_PROJECT_ID,
variant: 'ghost', variant: 'ghost',
align: 'center', align: 'center',
size: 'sm', size: 'sm',
@@ -168,10 +164,10 @@ function updateFilteredResults() {
is_archived: false, is_archived: false,
projects: [ projects: [
{ {
id: NO_PROJECT_ID, id: '',
name: 'No Project', name: 'No Project',
color: 'var(--theme-color-icon-default)', color: 'var(--theme-color-icon-default)',
value: NO_PROJECT_ID, value: '',
client_id: null, client_id: null,
billable_rate: null, billable_rate: null,
is_archived: false, is_archived: false,
@@ -494,7 +490,7 @@ function selectTask(taskId: string) {
} }
function selectProject(projectId: string) { function selectProject(projectId: string) {
project.value = projectId === NO_PROJECT_ID ? props.noProjectValue : projectId; project.value = projectId;
task.value = null; task.value = null;
open.value = false; open.value = false;
searchValue.value = ''; searchValue.value = '';
@@ -511,9 +507,18 @@ const showCreateProject = ref(false);
</script> </script>
<template> <template>
<Dropdown v-model="open" :close-on-content-click="false" :align="props.align"> <template v-if="projects.length === 0 && canCreateProject">
<Button
:variant="props.variant"
:size="props.size"
:class="twMerge('w-full justify-start', props.class)"
@click="showCreateProject = true">
<PlusIcon class="w-4" />
<span class="truncate">Add new project</span>
</Button>
</template>
<Dropdown v-else v-model="open" :close-on-content-click="false" :align="props.align">
<template #trigger> <template #trigger>
<slot name="trigger">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<Button <Button
:variant="props.variant" :variant="props.variant"
@@ -522,9 +527,7 @@ const showCreateProject = ref(false);
<div <div
class="w-3 h-3 rounded-full shrink-0" class="w-3 h-3 rounded-full shrink-0"
:style="{ backgroundColor: selectedProjectColor }"></div> :style="{ backgroundColor: selectedProjectColor }"></div>
<span class="truncate shrink-[1] text-text-primary pr-1">{{ <span class="truncate shrink-[1] pr-1">{{ selectedProjectName }}</span>
selectedProjectName
}}</span>
<template v-if="currentTask"> <template v-if="currentTask">
<ChevronRightIcon class="w-4 h-4 text-text-tertiary shrink-0" /> <ChevronRightIcon class="w-4 h-4 text-text-tertiary shrink-0" />
<span class="truncate shrink-[100]">{{ currentTask.name }}</span> <span class="truncate shrink-[100]">{{ currentTask.name }}</span>
@@ -539,7 +542,6 @@ const showCreateProject = ref(false);
<XMarkIcon class="w-4 h-4" /> <XMarkIcon class="w-4 h-4" />
</button> </button>
</div> </div>
</slot>
</template> </template>
<template #content> <template #content>
<UseFocusTrap v-if="open" :options="{ immediate: true, allowOutsideClick: true }"> <UseFocusTrap v-if="open" :options="{ immediate: true, allowOutsideClick: true }">

View File

@@ -8,20 +8,6 @@ export function getWeekStart() {
} }
return weekStart; return weekStart;
} }
const weekStartMap: Record<string, number> = {
sunday: 0,
monday: 1,
tuesday: 2,
wednesday: 3,
thursday: 4,
friday: 5,
saturday: 6,
};
export function getWeekStartDayNumber(): number {
return weekStartMap[getWeekStart()] ?? 1;
}
export function getUserTimezone() { export function getUserTimezone() {
const timezone = window?.getTimezoneSetting() as string; const timezone = window?.getTimezoneSetting() as string;
if (!timezone) { if (!timezone) {

View File

@@ -3,8 +3,6 @@ import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import isToday from 'dayjs/plugin/isToday'; import isToday from 'dayjs/plugin/isToday';
import isYesterday from 'dayjs/plugin/isYesterday'; import isYesterday from 'dayjs/plugin/isYesterday';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import utc from 'dayjs/plugin/utc'; import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone'; import timezone from 'dayjs/plugin/timezone';
import weekOfYear from 'dayjs/plugin/weekOfYear'; import weekOfYear from 'dayjs/plugin/weekOfYear';
@@ -70,8 +68,6 @@ function configureParseLocale(numberFormat?: string) {
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
dayjs.extend(isToday); dayjs.extend(isToday);
dayjs.extend(isYesterday); dayjs.extend(isYesterday);
dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);
dayjs.extend(duration); dayjs.extend(duration);
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
@@ -192,15 +188,6 @@ export function getLocalizedDateFromTimestamp(timestamp: string) {
return getLocalizedDayJs(timestamp).format('YYYY-MM-DD'); return getLocalizedDayJs(timestamp).format('YYYY-MM-DD');
} }
/**
* Converts a local Date to a UTC-formatted ISO string.
* Treats the Date as being in the user's timezone and converts to UTC.
* This is the inverse of getLocalizedDayJs (which goes UTC → local).
*/
export function localDateToUtc(date: dayjs.Dayjs): string {
return date.tz(getUserTimezone(), true).utc().format();
}
/* /*
* Returns a formatted date. * Returns a formatted date.
* @param date - date in the format of 'YYYY-MM-DD' * @param date - date in the format of 'YYYY-MM-DD'

View File

@@ -104,7 +104,7 @@ export const solidtimeTheme = {
border: 'var(--popover-border)', border: 'var(--popover-border)',
}, },
destructive: { destructive: {
DEFAULT: 'hsl(var(--destructive))', DEFAULT: 'var(--destructive)',
foreground: 'var(--destructive-foreground)', foreground: 'var(--destructive-foreground)',
}, },
border: 'var(--border)', border: 'var(--border)',

View File

@@ -22,9 +22,7 @@ export interface Organization {
currency: string; currency: string;
created_at: string | null; created_at: string | null;
updated_at: string | null; updated_at: string | null;
owner: User; owner: Pick<User, 'id' | 'name' | 'profile_photo_url'>;
users: User[];
team_invitations: OrganizationInvitation[];
} }
export interface OrganizationInvitation { export interface OrganizationInvitation {
id: string; id: string;

View File

@@ -29,9 +29,7 @@ export interface Organization {
created_at: string | null; created_at: string | null;
updated_at: string | null; updated_at: string | null;
// relations // relations
owner: User; owner: Pick<User, 'id' | 'name' | 'profile_photo_url'>;
users: User[];
team_invitations: OrganizationInvitation[];
} }
export interface OrganizationInvitation { export interface OrganizationInvitation {

View File

@@ -57,13 +57,6 @@ export const useNotificationsStore = defineStore('notifications', () => {
'organization_has_no_subscription_but_multiple_members' 'organization_has_no_subscription_but_multiple_members'
) { ) {
showActionBlockedModal.value = true; showActionBlockedModal.value = true;
} else if (error?.response?.data?.key === 'overlapping_time_entry') {
addNotification(
'error',
'Overlapping time entries are not allowed',
error.response?.data?.message ??
'This change would overlap with an existing time entry.'
);
} else { } else {
addNotification( addNotification(
'error', 'error',

View File

@@ -1,208 +0,0 @@
import { type Dayjs } from 'dayjs';
import type { TimeEntry } from '@/packages/api/src';
import { getDayJsInstance } from '@/packages/ui/src/utils/time';
// `getDayJsInstance()` reads window-injected settings (week-start), which
// aren't available at module load. Each function calls it lazily at use
// time. The cost is a per-call locale update; cellMath doesn't use any
// week-start-aware APIs so it's a no-op functionally.
/**
* UTC ISO of 09:00 local on `date` — the preferred placement for new
* work when an empty day needs a default start time.
*/
export function workDayStartOn(date: string, tz: string): string {
const dayjs = getDayJsInstance();
return dayjs.tz(`${date} 09:00:00`, tz).utc().format();
}
export interface FreeWindow {
start: string;
end: string;
}
interface Interval {
start: Dayjs;
end: Dayjs;
}
function localDayBounds(date: string, tz: string): { dayStart: Dayjs; dayEnd: Dayjs } {
const dayjs = getDayJsInstance();
const localDayStart = dayjs.tz(`${date} 00:00:00`, tz);
return {
dayStart: localDayStart.utc(),
dayEnd: localDayStart.add(1, 'day').utc(),
};
}
/**
* Collect entries that intersect the day `[dayStart, dayEnd)`, clipped
* to those bounds. Running entries use `nowDayjs` as their end.
*/
function collectDayObstacles(
entries: TimeEntry[],
dayStart: Dayjs,
dayEnd: Dayjs,
nowDayjs: Dayjs
): Interval[] {
const dayjs = getDayJsInstance();
const obstacles: Interval[] = [];
for (const entry of entries) {
const entryStart = dayjs.utc(entry.start);
const entryEnd = entry.end ? dayjs.utc(entry.end) : nowDayjs;
if (entryEnd.isSameOrBefore(dayStart)) continue;
if (entryStart.isSameOrAfter(dayEnd)) continue;
const clippedStart = entryStart.isBefore(dayStart) ? dayStart : entryStart;
const clippedEnd = entryEnd.isAfter(dayEnd) ? dayEnd : entryEnd;
obstacles.push({ start: clippedStart, end: clippedEnd });
}
return obstacles;
}
/**
* First free window on the local calendar day that fits `requiredSeconds`
* without colliding with any existing entry. Returns `null` if nothing fits
* — never crosses midnight.
*
* Obstacles include same-day entries, spillovers from adjacent days, and
* running entries (treated as `end = now`). All are clipped to the day's
* `[00:00, 24:00)` boundaries.
*
* `preferredStart` (UTC ISO) is a hard floor — windows with `start` before
* it are rejected. Use it to place "after some cursor."
*/
export function findFreeWindowOnDay(
entries: TimeEntry[],
date: string,
requiredSeconds: number,
tz: string,
preferredStart?: string | null,
now?: string | Dayjs
): FreeWindow | null {
if (requiredSeconds <= 0) return null;
const dayjs = getDayJsInstance();
const { dayStart, dayEnd } = localDayBounds(date, tz);
if (requiredSeconds > dayEnd.diff(dayStart, 'second')) return null;
const nowDayjs = now ? dayjs.utc(now) : dayjs.utc();
const obstacles = collectDayObstacles(entries, dayStart, dayEnd, nowDayjs);
// Sort + merge so we can walk a clean [gap, obstacle, gap, ...] sequence.
obstacles.sort((a, b) => a.start.diff(b.start));
// merge overlaps
const merged: Interval[] = [];
for (const obs of obstacles) {
const last = merged[merged.length - 1];
if (last && obs.start.isSameOrBefore(last.end)) {
if (obs.end.isAfter(last.end)) {
last.end = obs.end;
}
} else {
merged.push({ start: obs.start, end: obs.end });
}
}
let cursor: Dayjs = dayStart;
if (preferredStart) {
const pref = dayjs.utc(preferredStart);
if (pref.isAfter(cursor)) cursor = pref;
}
if (cursor.isSameOrAfter(dayEnd)) return null;
for (const obs of merged) {
if (obs.end.isSameOrBefore(cursor)) continue;
if (obs.start.isAfter(cursor)) {
const gapSeconds = obs.start.diff(cursor, 'second');
if (gapSeconds >= requiredSeconds) {
return {
start: cursor.format(),
end: cursor.add(requiredSeconds, 'second').format(),
};
}
}
if (obs.end.isAfter(cursor)) cursor = obs.end;
if (cursor.isSameOrAfter(dayEnd)) return null;
}
const trailingSeconds = dayEnd.diff(cursor, 'second');
if (trailingSeconds >= requiredSeconds) {
return {
start: cursor.format(),
end: cursor.add(requiredSeconds, 'second').format(),
};
}
return null;
}
/**
* Seconds of free space starting at `cursor` until the next obstacle
* (or end of day). Returns 0 if the cursor is inside an obstacle or past
* midnight. Used by the extend path: "how far can I push this end forward?"
*/
export function freeGapSecondsAfter(
entries: TimeEntry[],
date: string,
tz: string,
cursor: string,
now?: string | Dayjs
): number {
const dayjs = getDayJsInstance();
const { dayStart, dayEnd } = localDayBounds(date, tz);
const cursorDjs = dayjs.utc(cursor);
if (cursorDjs.isSameOrAfter(dayEnd)) return 0;
if (cursorDjs.isBefore(dayStart)) return 0;
const nowDayjs = now ? dayjs.utc(now) : dayjs.utc();
// Drop obstacles ending at/before the cursor — they're behind us.
const obstacles = collectDayObstacles(entries, dayStart, dayEnd, nowDayjs).filter((obs) =>
obs.end.isAfter(cursorDjs)
);
obstacles.sort((a, b) => a.start.diff(b.start));
// Cursor inside an obstacle → no gap.
for (const obs of obstacles) {
if (obs.start.isSameOrBefore(cursorDjs) && obs.end.isAfter(cursorDjs)) {
return 0;
}
}
// Distance to first obstacle strictly after cursor, or to end of day.
for (const obs of obstacles) {
if (obs.start.isAfter(cursorDjs)) {
return Math.max(0, obs.start.diff(cursorDjs, 'second'));
}
}
return Math.max(0, dayEnd.diff(cursorDjs, 'second'));
}
/**
* Thrown when a required duration cannot fit on the target day without
* introducing an overlap. Callers reformat the message for end users.
*/
export class NoFreeWindowError extends Error {
public readonly code = 'no_free_window' as const;
public readonly date: string;
public readonly requiredSeconds: number;
constructor(date: string, requiredSeconds: number) {
super(
`Cannot fit ${requiredSeconds} seconds on ${date} without overlapping existing time entries.`
);
this.name = 'NoFreeWindowError';
this.date = date;
this.requiredSeconds = requiredSeconds;
}
}

View File

@@ -1,242 +0,0 @@
import { ref, type Ref } from 'vue';
import type { Dayjs } from 'dayjs';
import axios from 'axios';
import { useQueryClient } from '@tanstack/vue-query';
import {
api,
type CreateTimeEntryBody,
type TimeEntry,
type TimeEntryResponse,
} from '@/packages/api/src';
import {
getDayJsInstance,
getLocalizedDateFromTimestamp,
localDateToUtc,
} from '@/packages/ui/src/utils/time';
import { getUserTimezone } from '@/packages/ui/src/utils/settings';
import { fetchTimesheetEntries } from '@/utils/useTimesheetQuery';
import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
import { makeRowKey, type TimesheetRow } from '@/utils/useTimesheetGrid';
import { useNotificationsStore } from '@/utils/notification';
import { findFreeWindowOnDay, workDayStartOn } from './cellMath';
/**
* Implements both variants of "Copy last week":
*
* - `copyLastWeekRows()` — only add rows for each distinct
* (project, task) pair from last week
* that doesn't already exist
* - `copyLastWeekWithTime()` — same, but also duplicates each
* previous-week entry into the same
* day-of-week in the current week,
* stacking copies after any existing
* work on that day
*/
export function useCopyLastWeek(
weekStart: Ref<Dayjs>,
weekDays: Ref<string[]>,
rows: Ref<TimesheetRow[]>,
timeEntries: Ref<TimeEntry[]>,
addSlot: (
projectId: string | null,
taskId: string | null,
billable: boolean,
tags: string[]
) => string
) {
const dayjs = getDayJsInstance();
const queryClient = useQueryClient();
const { addNotification } = useNotificationsStore();
const isCopyingLastWeek = ref(false);
async function fetchLastWeekEntries(): Promise<TimeEntryResponse | null> {
const prevStart = weekStart.value.subtract(7, 'day');
const prevEnd = weekStart.value;
const orgId = getCurrentOrganizationId();
const memberId = getCurrentMembershipId();
if (!orgId) return null;
return await fetchTimesheetEntries(
orgId,
memberId,
localDateToUtc(prevStart),
localDateToUtc(prevEnd)
);
}
/**
* For every entry in `prevEntries`, if the current week doesn't
* already have a row for that (project, task) combination, add one.
* Deduplicates so each combination is added at most once.
*/
function addMissingRowsFromPreviousWeek(prevEntries: TimeEntry[]): void {
const existingIdentities = new Set(
rows.value.map((r) => makeRowKey(r.projectId, r.taskId, r.billable, r.tags))
);
const addedIdentities = new Set<string>();
for (const entry of prevEntries) {
const tags = entry.tags ?? [];
const identity = makeRowKey(entry.project_id, entry.task_id, entry.billable, tags);
if (!existingIdentities.has(identity) && !addedIdentities.has(identity)) {
addedIdentities.add(identity);
addSlot(entry.project_id, entry.task_id, entry.billable, tags);
}
}
}
async function copyLastWeekRows(): Promise<void> {
isCopyingLastWeek.value = true;
try {
const prev = await fetchLastWeekEntries();
if (!prev) return;
addMissingRowsFromPreviousWeek(prev.data);
} finally {
isCopyingLastWeek.value = false;
}
}
async function copyLastWeekWithTime(): Promise<void> {
isCopyingLastWeek.value = true;
try {
const prev = await fetchLastWeekEntries();
if (!prev) return;
const orgId = getCurrentOrganizationId();
const memberId = getCurrentMembershipId();
if (!orgId || !memberId) return;
const tz = getUserTimezone();
addMissingRowsFromPreviousWeek(prev.data);
const prevWeekStart = weekStart.value.subtract(7, 'day');
// Working copy of the current week's entries; placed copies
// are appended so subsequent placement queries see them as
// obstacles (timeEntries.value isn't refreshed until the
// queryClient.invalidate at the end of the loop).
const workingEntries: TimeEntry[] = [...timeEntries.value];
let attempted = 0;
let succeeded = 0;
let overlapFailures = 0;
let otherFailures = 0;
for (const entry of prev.data) {
if (!entry.end || !entry.duration) continue;
// Map previous-week date → same day-of-week in current week.
const entryDate = getLocalizedDateFromTimestamp(entry.start);
const dayOffset = dayjs(entryDate).diff(prevWeekStart, 'day');
const newDate = weekDays.value[dayOffset];
if (!newDate) continue;
// Try the source's wall-clock time on the target day first
// (preserves "Monday 14:00 meeting" → "Monday 14:00 meeting"
// when the slot is free); fall back to 09:00, then to
// anywhere on the day.
const sourceTimeOfDay = dayjs.utc(entry.start).tz(tz).format('HH:mm:ss');
const sourceStartOnTarget = dayjs
.tz(`${newDate} ${sourceTimeOfDay}`, tz)
.utc()
.format();
const window =
findFreeWindowOnDay(
workingEntries,
newDate,
entry.duration,
tz,
sourceStartOnTarget
) ??
findFreeWindowOnDay(
workingEntries,
newDate,
entry.duration,
tz,
workDayStartOn(newDate, tz)
) ??
findFreeWindowOnDay(workingEntries, newDate, entry.duration, tz);
if (!window) {
attempted++;
otherFailures++;
continue;
}
const body: CreateTimeEntryBody = {
member_id: memberId,
project_id: entry.project_id,
task_id: entry.task_id,
start: window.start,
end: window.end,
billable: entry.billable,
description: entry.description ?? null,
tags: entry.tags ?? [],
};
attempted++;
try {
await api.createTimeEntry(body, { params: { organization: orgId } });
succeeded++;
workingEntries.push({
start: window.start,
end: window.end,
} as TimeEntry);
} catch (error) {
if (
axios.isAxiosError(error) &&
error.response?.data?.key === 'overlapping_time_entry'
) {
overlapFailures++;
} else {
otherFailures++;
}
}
}
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
if (attempted === 0) return;
if (succeeded === attempted) {
addNotification(
'success',
`Copied ${succeeded} ${succeeded === 1 ? 'entry' : 'entries'} from last week`
);
} else if (succeeded > 0) {
const skipped = overlapFailures + otherFailures;
const detail =
overlapFailures > 0 && otherFailures === 0
? `${overlapFailures} overlapping`
: otherFailures > 0 && overlapFailures === 0
? `${otherFailures} failed`
: `${skipped} skipped`;
addNotification(
'error',
`Copied ${succeeded} of ${attempted} entries from last week`,
`${detail}.`
);
} else {
addNotification(
'error',
'Failed to copy entries from last week',
overlapFailures > 0 && otherFailures === 0
? 'All entries would overlap with existing time entries.'
: 'Please try again later.'
);
}
} finally {
isCopyingLastWeek.value = false;
}
}
return {
isCopyingLastWeek,
copyLastWeekRows,
copyLastWeekWithTime,
};
}

View File

@@ -1,320 +0,0 @@
import type { Ref } from 'vue';
import { useQueryClient } from '@tanstack/vue-query';
import { api, type CreateTimeEntryBody, type TimeEntry } from '@/packages/api/src';
import { formatHumanReadableDuration, getDayJsInstance } from '@/packages/ui/src/utils/time';
import { getUserTimezone } from '@/packages/ui/src/utils/settings';
import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
import {
makeRowKey,
type TimesheetCell,
type TimesheetRow,
type TimesheetRowKey,
} from '@/utils/useTimesheetGrid';
import { useNotificationsStore } from '@/utils/notification';
import {
findFreeWindowOnDay,
freeGapSecondsAfter,
NoFreeWindowError,
workDayStartOn,
type FreeWindow,
} from './cellMath';
/**
* Cell-level edit dispatcher. Picks one of four strategies based on
* the diff between current and requested totals:
*
* - deleteCell — new total is 0
* - createCell — empty cell, place in first free window
* - extendCell — diff > 0, push the latest-ending entry forward,
* splitting the remainder into a new entry if a
* collision blocks the path
* - shrinkFromEnd — diff < 0, shorten / delete entries from most-
* recent backwards
*
* Running entries (end === null) are treated as immutable. Both create
* and extend can throw NoFreeWindowError when the day is too full.
*
* Calls the API directly (not via useTimeEntriesMutations) so a single
* cell edit fanning into multiple mutations produces exactly one toast
* and one cache invalidation.
*/
export function useTimesheetCellMutations(
weekDays: Ref<string[]>,
timeEntries: Ref<TimeEntry[]>,
rows: Ref<TimesheetRow[]>,
removeSlot: (key: TimesheetRowKey) => void
) {
const dayjs = getDayJsInstance();
const queryClient = useQueryClient();
const notifications = useNotificationsStore();
async function handleCellUpdate(
row: TimesheetRow,
dayIndex: number,
newTotalSeconds: number
): Promise<void> {
const cell = row.cells.get(dayIndex);
const existingSeconds = cell?.totalSeconds ?? 0;
if (newTotalSeconds === existingSeconds) return;
// Capture row state before the mutation: a row that was empty
// and shares identity with another slot collapses after the
// first entry lands, so the entry naturally identity-routes to
// the surviving slot.
const wasEmpty = row.totalSeconds === 0;
try {
await dispatchCellUpdate(row, dayIndex, newTotalSeconds);
if (wasEmpty && newTotalSeconds > 0 && hasDuplicateIdentitySlot(row)) {
removeSlot(row.key);
notifications.addNotification(
'success',
'Merged into matching row',
'Another row with the same project, task, billable status and tags already exists.'
);
}
} catch (err) {
if (err instanceof NoFreeWindowError) {
const friendlyDuration = formatHumanReadableDuration(
err.requiredSeconds,
'hours-minutes',
'point'
);
notifications.addNotification(
'error',
"This day can't fit any more work",
`Couldn't fit ${friendlyDuration} on ${err.date} without overlapping existing entries.`
);
return;
}
notifications.addNotification(
'error',
'Failed to update timesheet',
'Please try again later.'
);
throw err;
} finally {
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
}
}
function hasDuplicateIdentitySlot(row: TimesheetRow): boolean {
const target = makeRowKey(row.projectId, row.taskId, row.billable, row.tags);
return rows.value.some(
(r) =>
r.key !== row.key &&
makeRowKey(r.projectId, r.taskId, r.billable, r.tags) === target
);
}
async function dispatchCellUpdate(
row: TimesheetRow,
dayIndex: number,
newTotalSeconds: number
): Promise<void> {
const cell = row.cells.get(dayIndex);
const existingSeconds = cell?.totalSeconds ?? 0;
const diff = newTotalSeconds - existingSeconds;
if (newTotalSeconds === 0 && cell) {
await deleteCell(cell);
return;
}
if (!cell || existingSeconds === 0) {
await createCell(row, dayIndex, newTotalSeconds);
return;
}
if (diff > 0) {
await extendCell(row, dayIndex, cell, diff);
return;
}
await shrinkFromEnd(cell, -diff);
}
async function deleteCell(cell: TimesheetCell): Promise<void> {
const orgId = requireOrgId();
await api.deleteTimeEntries(undefined, {
queries: { ids: cell.entries.map((e) => e.id) },
params: { organization: orgId },
});
}
/**
* Place a new entry on the cell's day. Without `afterCursor`, prefers
* 09:00 local with a fall-back to start-of-day. With `afterCursor`,
* places strictly at-or-after that timestamp (used by extendCell to
* skip past a just-written extension that timeEntries.value doesn't
* yet reflect). Throws NoFreeWindowError if nothing fits.
*/
async function createCell(
row: TimesheetRow,
dayIndex: number,
totalSeconds: number,
afterCursor?: string
): Promise<void> {
const date = weekDays.value[dayIndex]!;
const tz = getUserTimezone();
let window: FreeWindow | null;
if (afterCursor) {
window = findFreeWindowOnDay(timeEntries.value, date, totalSeconds, tz, afterCursor);
} else {
window =
findFreeWindowOnDay(
timeEntries.value,
date,
totalSeconds,
tz,
workDayStartOn(date, tz)
) ?? findFreeWindowOnDay(timeEntries.value, date, totalSeconds, tz);
}
if (!window) throw new NoFreeWindowError(date, totalSeconds);
const orgId = requireOrgId();
const memberId = getCurrentMembershipId();
if (!memberId) throw new Error('No member context');
const body: CreateTimeEntryBody = {
member_id: memberId,
project_id: row.projectId,
task_id: row.taskId,
start: window.start,
end: window.end,
billable: row.billable,
description: null,
tags: row.tags,
};
await api.createTimeEntry(body, { params: { organization: orgId } });
}
/**
* Push the latest-ending entry's end forward by `addSeconds`, and if
* a collision blocks the path before that's exhausted, place the
* remainder as a fresh entry in the next free window on the day.
*/
async function extendCell(
row: TimesheetRow,
dayIndex: number,
cell: TimesheetCell,
addSeconds: number
): Promise<void> {
const date = weekDays.value[dayIndex]!;
const tz = getUserTimezone();
// Latest END (not latest start) — extending a nested inner entry
// would leave the outer one as the true tail.
const candidate = pickLatestEndedEntry(cell);
// Running timer (or no ended entry): can't extend, place it all
// as a new entry instead.
if (!candidate || !candidate.end) {
await createCell(row, dayIndex, addSeconds);
return;
}
const gap = freeGapSecondsAfter(timeEntries.value, date, tz, candidate.end);
const extendBy = Math.min(addSeconds, gap);
const remainder = addSeconds - extendBy;
const projectedNewEnd = dayjs.utc(candidate.end).add(extendBy, 'second').format();
// Pre-flight: if there's a remainder, make sure it'll fit in a
// window after `projectedNewEnd` BEFORE we issue the extend PATCH.
// Otherwise a successful extend followed by a no-fit createCell
// would leave the entry persistently lengthened on the server
// while the user sees a "can't fit" error.
if (remainder > 0) {
const fit = findFreeWindowOnDay(
timeEntries.value,
date,
remainder,
tz,
projectedNewEnd
);
if (!fit) throw new NoFreeWindowError(date, addSeconds);
}
if (extendBy > 0) {
await updateEntry({ ...candidate, end: projectedNewEnd });
}
if (remainder <= 0) return;
// timeEntries.value is stale here (still shows candidate's old
// end). Force the placement search past projectedNewEnd so it
// can't propose a window that overlaps the just-extended candidate.
await createCell(row, dayIndex, remainder, projectedNewEnd);
}
async function shrinkFromEnd(cell: TimesheetCell, removeSeconds: number): Promise<void> {
let toRemove = removeSeconds;
// Shrink doesn't introduce overlaps, so latest-START is fine here.
const sortedEntries = [...cell.entries].sort((a, b) => b.start.localeCompare(a.start));
for (const entry of sortedEntries) {
if (toRemove <= 0) break;
if (!entry.end) continue; // running entries are immutable
const entryDuration = entry.duration ?? 0;
if (entryDuration <= toRemove) {
await deleteEntry(entry.id);
toRemove -= entryDuration;
} else {
const newEnd = dayjs
.utc(entry.start)
.add(entryDuration - toRemove, 'second')
.format();
await updateEntry({ ...entry, end: newEnd });
toRemove = 0;
}
}
}
// ── api helpers ───────────────────────────────────────────────
function requireOrgId(): string {
const id = getCurrentOrganizationId();
if (!id) throw new Error('No organization context');
return id;
}
async function updateEntry(entry: TimeEntry) {
const orgId = requireOrgId();
await api.updateTimeEntry(entry, {
params: { organization: orgId, timeEntry: entry.id },
});
}
async function deleteEntry(id: string) {
const orgId = requireOrgId();
await api.deleteTimeEntry(undefined, {
params: { organization: orgId, timeEntry: id },
});
}
function pickLatestEndedEntry(cell: TimesheetCell): TimeEntry | null {
let best: TimeEntry | null = null;
for (const entry of cell.entries) {
if (!best) {
best = entry;
continue;
}
// Running entries are treated as "infinite" — they win.
if (!entry.end) {
best = entry;
continue;
}
if (best.end && entry.end > best.end) {
best = entry;
}
}
return best;
}
return { handleCellUpdate };
}

View File

@@ -1,70 +0,0 @@
import { computed, ref, type Ref } from 'vue';
import type { Project, TimeEntry } from '@/packages/api/src';
import type { TimesheetRow, TimesheetRowKey } from '@/utils/useTimesheetGrid';
import type { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
type Mutations = ReturnType<typeof useTimeEntriesMutations>;
/**
* Holds the state and handlers for the "remove row" confirmation flow.
*
* Empty rows (no entries) are removed immediately without confirmation;
* rows with entries open a confirmation dialog, and on confirm we bulk
* delete every entry in the row before dropping the row from the grid.
*/
export function useTimesheetRowDeletion(
projects: Ref<Project[]>,
mutations: Pick<Mutations, 'deleteTimeEntries'>,
removeSlot: (key: TimesheetRowKey) => void
) {
const showDeleteDialog = ref(false);
const rowToDelete = ref<TimesheetRow | null>(null);
const deleteRowEntryCount = computed(() => {
if (!rowToDelete.value) return 0;
let count = 0;
for (const cell of rowToDelete.value.cells.values()) {
count += cell.entries.length;
}
return count;
});
const deleteRowProjectName = computed(() => {
if (!rowToDelete.value?.projectId) return 'No Project';
return projects.value.find((p) => p.id === rowToDelete.value?.projectId)?.name ?? 'Unknown';
});
function requestRemoveRow(row: TimesheetRow): void {
if (row.totalSeconds === 0) {
removeSlot(row.key);
return;
}
rowToDelete.value = row;
showDeleteDialog.value = true;
}
async function confirmDeleteRow(): Promise<void> {
if (!rowToDelete.value) return;
const allEntries: TimeEntry[] = [];
for (const cell of rowToDelete.value.cells.values()) {
allEntries.push(...cell.entries);
}
if (allEntries.length > 0) {
await mutations.deleteTimeEntries(allEntries);
}
removeSlot(rowToDelete.value.key);
showDeleteDialog.value = false;
rowToDelete.value = null;
}
return {
showDeleteDialog,
rowToDelete,
deleteRowEntryCount,
deleteRowProjectName,
requestRemoveRow,
confirmDeleteRow,
};
}

View File

@@ -1,150 +0,0 @@
import type { Ref } from 'vue';
import type { Project, UpdateMultipleTimeEntriesChangeset } from '@/packages/api/src';
import {
makeRowKey,
type TimesheetRow,
type TimesheetRowIdentity,
type TimesheetRowKey,
} from '@/utils/useTimesheetGrid';
import type { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
import { useNotificationsStore } from '@/utils/notification';
function identityPartialToApiChanges(
partial: Partial<TimesheetRowIdentity>
): UpdateMultipleTimeEntriesChangeset {
const changes: UpdateMultipleTimeEntriesChangeset = {};
if ('projectId' in partial) changes.project_id = partial.projectId;
if ('taskId' in partial) changes.task_id = partial.taskId;
if ('billable' in partial) changes.billable = partial.billable;
if ('tags' in partial) changes.tags = partial.tags;
return changes;
}
type Mutations = ReturnType<typeof useTimeEntriesMutations>;
/**
* Row-level mutations that don't involve confirmation.
*
* Rows are keyed by slot id (not identity), so any partial change to
* a row's identity is handled the same way: push the change to the
* server for any entries in the row, then migrate the slot's identity
* in place so the row stays at its existing position.
*/
export function useTimesheetRowMutations(
mutations: Pick<Mutations, 'updateTimeEntries'>,
projects: Ref<Project[]>,
rows: Ref<TimesheetRow[]>,
addSlot: (
projectId: string | null,
taskId: string | null,
billable: boolean,
tags: string[]
) => TimesheetRowKey,
updateSlot: (key: TimesheetRowKey, identity: TimesheetRowIdentity) => void,
removeSlot: (key: TimesheetRowKey) => void
) {
const notifications = useNotificationsStore();
function collectEntryIds(row: TimesheetRow): string[] {
const ids: string[] = [];
for (const cell of row.cells.values()) {
for (const entry of cell.entries) ids.push(entry.id);
}
return ids;
}
function hasDuplicateIdentityRow(
rowKey: TimesheetRowKey,
identity: TimesheetRowIdentity
): boolean {
const target = makeRowKey(
identity.projectId,
identity.taskId,
identity.billable,
identity.tags
);
return rows.value.some(
(candidate) =>
candidate.key !== rowKey &&
makeRowKey(
candidate.projectId,
candidate.taskId,
candidate.billable,
candidate.tags
) === target
);
}
async function handleRowIdentityChange(
row: TimesheetRow,
partial: Partial<TimesheetRowIdentity>
): Promise<void> {
const entryIds = collectEntryIds(row);
const currentIdentity = makeRowKey(row.projectId, row.taskId, row.billable, row.tags);
let merged: TimesheetRowIdentity = {
projectId: row.projectId,
taskId: row.taskId,
billable: row.billable,
tags: row.tags,
...partial,
};
// Auto-default billable on the first project pick for an empty
// row (project provides the default; user can override after).
if (
entryIds.length === 0 &&
partial.projectId !== undefined &&
partial.projectId !== row.projectId &&
partial.projectId &&
partial.billable === undefined
) {
const projectBillable = projects.value.find(
(p) => p.id === partial.projectId
)?.is_billable;
if (projectBillable !== undefined) {
merged = { ...merged, billable: projectBillable };
}
}
const mergedIdentity = makeRowKey(
merged.projectId,
merged.taskId,
merged.billable,
merged.tags
);
const shouldMergeIntoExistingRow =
entryIds.length > 0 &&
currentIdentity !== mergedIdentity &&
hasDuplicateIdentityRow(row.key, merged);
if (entryIds.length > 0) {
await mutations.updateTimeEntries({
ids: entryIds,
changes: identityPartialToApiChanges(partial),
});
}
if (shouldMergeIntoExistingRow) {
removeSlot(row.key);
notifications.addNotification(
'success',
'Merged into matching row',
'Another row with the same project, task, billable status and tags already exists.'
);
return;
}
updateSlot(row.key, merged);
}
function handleAddRow(projectId: string | null = null, taskId: string | null = null): void {
const project = projectId ? projects.value.find((p) => p.id === projectId) : null;
addSlot(projectId, taskId, project?.is_billable ?? false, []);
}
return {
handleRowIdentityChange,
handleAddRow,
};
}

View File

@@ -1,82 +0,0 @@
import { computed, ref, watch } from 'vue';
import type { Dayjs } from 'dayjs';
import { useQueryClient } from '@tanstack/vue-query';
import { getDayJsInstance } from '@/packages/ui/src/utils/time';
import { getUserTimezone } from '@/packages/ui/src/utils/settings';
import { prefetchTimesheetWeek } from '@/utils/useTimesheetQuery';
import { getInitialWeekRange } from '@/utils/useTimeEntriesCalendarQuery';
/**
* Owns week-navigation state for the timesheet page.
*
* Exposes the current week start/end, the list of day strings, derived
* display helpers (week number, today's date, whether this is the
* current week), and navigation functions.
*
* Also prefetches the adjacent weeks whenever `weekStart` changes so
* that clicking prev/next feels instant.
*/
export function useTimesheetWeek() {
const dayjs = getDayJsInstance();
const queryClient = useQueryClient();
const weekStart = ref<Dayjs>(getInitialWeekRange().start);
const weekEnd = computed(() => weekStart.value.add(7, 'day'));
const weekDays = computed(() => {
const days: string[] = [];
for (let i = 0; i < 7; i++) {
days.push(weekStart.value.add(i, 'day').format('YYYY-MM-DD'));
}
return days;
});
const weekNumber = computed(() => weekStart.value.week());
const isCurrentWeek = computed(() =>
weekStart.value.isSame(getInitialWeekRange().start, 'day')
);
const todayDate = computed(() => {
const tz = getUserTimezone();
return dayjs().tz(tz).format('YYYY-MM-DD');
});
// Prefetch adjacent weeks so prev/next feels instant.
watch(
weekStart,
() => {
const prevStart = weekStart.value.subtract(7, 'day');
const prevEnd = weekStart.value;
const nextStart = weekStart.value.add(7, 'day');
const nextEnd = weekStart.value.add(14, 'day');
prefetchTimesheetWeek(queryClient, prevStart, prevEnd);
prefetchTimesheetWeek(queryClient, nextStart, nextEnd);
},
{ immediate: true }
);
function goToPreviousWeek() {
weekStart.value = weekStart.value.subtract(7, 'day');
}
function goToNextWeek() {
weekStart.value = weekStart.value.add(7, 'day');
}
function goToCurrentWeek() {
weekStart.value = getInitialWeekRange().start;
}
return {
weekStart,
weekEnd,
weekDays,
weekNumber,
isCurrentWeek,
todayDate,
goToPreviousWeek,
goToNextWeek,
goToCurrentWeek,
};
}

View File

@@ -2,28 +2,43 @@ import { useQuery } from '@tanstack/vue-query';
import { api, type TimeEntryResponse, type TimeEntry } from '@/packages/api/src'; import { api, type TimeEntryResponse, type TimeEntry } from '@/packages/api/src';
import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser'; import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
import { computed, type Ref } from 'vue'; import { computed, type Ref } from 'vue';
import type { Dayjs } from 'dayjs'; import { getDayJsInstance } from '@/packages/ui/src/utils/time';
import { getDayJsInstance, localDateToUtc } from '@/packages/ui/src/utils/time'; import { getUserTimezone, getWeekStart } from '@/packages/ui/src/utils/settings';
import { getWeekStartDayNumber } from '@/packages/ui/src/utils/settings';
const weekStartMap: Record<string, number> = {
sunday: 0,
monday: 1,
tuesday: 2,
wednesday: 3,
thursday: 4,
friday: 5,
saturday: 6,
};
/** /**
* Calculate expanded date range to include previous and next periods with timezone transformations. * Calculate expanded date range to include previous and next periods with timezone transformations.
* This allows smooth navigation between calendar views without loading delays. * This allows smooth navigation between calendar views without loading delays.
*/ */
export function getExpandedCalendarDateRange( export function getExpandedCalendarDateRange(
calendarStart: Dayjs, calendarStart: Date,
calendarEnd: Dayjs calendarEnd: Date
): { start: string; end: string } { ): { start: string; end: string } {
const duration = calendarEnd.diff(calendarStart, 'milliseconds'); const dayjs = getDayJsInstance();
const duration = dayjs(calendarEnd).diff(dayjs(calendarStart), 'milliseconds');
// Calculate previous period // Calculate previous period
const previousStart = calendarStart.subtract(duration, 'milliseconds'); const previousStart = dayjs(calendarStart).subtract(duration, 'milliseconds');
// Calculate next period // Calculate next period
const nextEnd = calendarEnd.add(duration, 'milliseconds'); const nextEnd = dayjs(calendarEnd).add(duration, 'milliseconds');
// Apply timezone transformations
const timezone = getUserTimezone();
const formattedStart = previousStart.utc().tz(timezone, true).utc().format();
const formattedEnd = nextEnd.utc().tz(timezone, true).utc().format();
return { return {
start: localDateToUtc(previousStart), start: formattedStart,
end: localDateToUtc(nextEnd), end: formattedEnd,
}; };
} }
@@ -31,17 +46,21 @@ export function getExpandedCalendarDateRange(
* Get the initial week view date range based on user's week start preference. * Get the initial week view date range based on user's week start preference.
* Matches FullCalendar's timeGridWeek initial view. * Matches FullCalendar's timeGridWeek initial view.
*/ */
export function getInitialWeekRange(): { start: Dayjs; end: Dayjs } { export function getInitialWeekRange(): { start: Date; end: Date } {
const dayjs = getDayJsInstance(); const dayjs = getDayJsInstance();
const firstDay = getWeekStartDayNumber(); const weekStart = getWeekStart();
const firstDay = weekStartMap[weekStart] ?? 1;
const now = dayjs(); const now = dayjs();
const currentDayOfWeek = now.day(); const currentDayOfWeek = now.day();
const daysFromWeekStart = (currentDayOfWeek - firstDay + 7) % 7; const daysFromWeekStart = (currentDayOfWeek - firstDay + 7) % 7;
const start = now.subtract(daysFromWeekStart, 'day').startOf('day'); const calendarStart = now.subtract(daysFromWeekStart, 'day').startOf('day');
const end = start.add(7, 'day'); const calendarEnd = calendarStart.add(7, 'day');
return { start, end }; return {
start: calendarStart.toDate(),
end: calendarEnd.toDate(),
};
} }
/** /**
@@ -96,8 +115,8 @@ export async function fetchAllCalendarEntries(
} }
export function useTimeEntriesCalendarQuery( export function useTimeEntriesCalendarQuery(
calendarStart: Ref<Dayjs | undefined>, calendarStart: Ref<Date | undefined>,
calendarEnd: Ref<Dayjs | undefined> calendarEnd: Ref<Date | undefined>
) { ) {
const enableCalendarQuery = computed(() => { const enableCalendarQuery = computed(() => {
return !!getCurrentOrganizationId() && !!calendarStart.value && !!calendarEnd.value; return !!getCurrentOrganizationId() && !!calendarStart.value && !!calendarEnd.value;

View File

@@ -1,284 +0,0 @@
import type { TimeEntry, Project, Task } from '@/packages/api/src';
import { getDayJsInstance, getLocalizedDateFromTimestamp } from '@/packages/ui/src/utils/time';
import type { Dayjs } from 'dayjs';
import { computed, ref, watch, type Ref } from 'vue';
export type TimesheetRowKey = string;
export interface TimesheetCell {
dayIndex: number;
date: string;
entries: TimeEntry[];
totalSeconds: number;
}
export interface TimesheetRow {
key: TimesheetRowKey;
projectId: string | null;
taskId: string | null;
billable: boolean;
tags: string[];
cells: Map<number, TimesheetCell>;
totalSeconds: number;
}
export interface TimesheetRowIdentity {
projectId: string | null;
taskId: string | null;
billable: boolean;
tags: string[];
}
interface Slot extends TimesheetRowIdentity {
id: string;
// 'seeded' slots are derived from the entries query and re-sort
// alphabetically whenever project/task lists change. 'user' slots
// were created via Add Row / project-change interactions and keep
// their insertion order (always below the seeded block).
origin: 'seeded' | 'user';
}
function sortTags(tags: string[] | null | undefined): string[] {
return [...(tags ?? [])].sort();
}
export function makeRowKey(
projectId: string | null,
taskId: string | null,
billable: boolean,
tags: string[]
): TimesheetRowKey {
return JSON.stringify([projectId, taskId, billable, sortTags(tags)]);
}
function slotIdentityKey(slot: Slot): TimesheetRowKey {
return makeRowKey(slot.projectId, slot.taskId, slot.billable, slot.tags);
}
let slotCounter = 0;
function newSlotId(): string {
return `s${++slotCounter}`;
}
/**
* Slot-first row model.
*
* The timesheet renders one row per slot, in insertion order. Slots
* carry a stable id — the row's Vue key never changes across mutations,
* so rows don't jump positions as entries load or get edited.
*
* Entries hydrate slots: `rows` is computed by grouping entries by
* identity (projectId, taskId, billable, tags) and attaching the
* matching group to the first slot with that identity. Duplicate
* slots with the same identity render empty (the first one claims
* the entries) — callers are expected to collapse duplicates after a
* cell-create rather than letting them linger.
*
* Seeding: a watcher scans `timeEntries` and appends a slot for every
* identity that doesn't already have one. Initial loads come in as a
* batch and are sorted by project name so the first render is stable;
* slots added later (via `addSlot` or post-mutation refetches) append
* at the end.
*
* Mutations:
* - `addSlot` push a blank or pre-populated slot at the end
* - `removeSlot` drop a slot by id (the row's `key`)
* - `updateSlot` migrate a slot's identity in place — used by
* project/billable/tags changes so the row
* stays put while the server roundtrips
* - `clearSlots` wipe everything (used on week navigation)
*/
export function useTimesheetGrid(
timeEntries: Ref<TimeEntry[]>,
weekDays: Ref<string[]>,
projects: Ref<Project[]>,
tasks: Ref<Task[]>,
currentTime: Ref<Dayjs | null>
) {
const dayjs = getDayJsInstance();
const slots = ref<Slot[]>([]);
// Seed / re-sort the seeded portion of slots whenever entries,
// projects or tasks change. Seeded slots sort alphabetically by
// project name → task name → billable → tags so reloads are
// deterministic. User-added slots keep their insertion order and
// stay after the seeded block.
watch(
[() => timeEntries.value, () => projects.value, () => tasks.value],
([entries, projectList, taskList]) => {
const present = new Set(slots.value.map(slotIdentityKey));
for (const entry of entries) {
const key = makeRowKey(
entry.project_id,
entry.task_id,
entry.billable,
sortTags(entry.tags)
);
if (present.has(key)) continue;
present.add(key);
slots.value.push({
id: newSlotId(),
origin: 'seeded',
projectId: entry.project_id,
taskId: entry.task_id,
billable: entry.billable,
tags: sortTags(entry.tags),
});
}
const projectNameMap = new Map<string, string>();
for (const p of projectList) projectNameMap.set(p.id, p.name);
const taskNameMap = new Map<string, string>();
for (const t of taskList) taskNameMap.set(t.id, t.name);
const sortKey = (s: Slot): string => {
const projectName = s.projectId ? (projectNameMap.get(s.projectId) ?? '') : '';
const taskName = s.taskId ? (taskNameMap.get(s.taskId) ?? '') : '';
return `${projectName}\x00${taskName}\x00${s.billable ? '1' : '0'}\x00${s.tags.join(',')}`;
};
const seeded = slots.value.filter((s) => s.origin === 'seeded');
const userAdded = slots.value.filter((s) => s.origin === 'user');
seeded.sort((a, b) => sortKey(a).localeCompare(sortKey(b)));
slots.value = [...seeded, ...userAdded];
},
{ immediate: true }
);
const rows = computed<TimesheetRow[]>(() => {
const dayIndexMap = new Map<string, number>();
weekDays.value.forEach((date, index) => dayIndexMap.set(date, index));
// Group entries by identity. The first slot (in render order) with
// a given identity claims that group; later duplicate-identity
// slots render empty.
const entriesByIdentity = new Map<TimesheetRowKey, TimeEntry[]>();
for (const entry of timeEntries.value) {
const identityKey = makeRowKey(
entry.project_id,
entry.task_id,
entry.billable,
sortTags(entry.tags)
);
if (!entriesByIdentity.has(identityKey)) entriesByIdentity.set(identityKey, []);
entriesByIdentity.get(identityKey)!.push(entry);
}
const claimed = new Set<TimesheetRowKey>();
function buildCellsFromEntries(entries: TimeEntry[]) {
const cells = new Map<number, TimesheetCell>();
let totalSeconds = 0;
function getEntryDurationSeconds(entry: TimeEntry): number {
if (entry.end !== null) {
return entry.duration ?? 0;
}
const liveNow = currentTime.value ?? dayjs.utc();
return Math.max(0, liveNow.diff(dayjs.utc(entry.start), 'second'));
}
for (const entry of entries) {
const entryDate = getLocalizedDateFromTimestamp(entry.start);
const dayIndex = dayIndexMap.get(entryDate);
if (dayIndex === undefined) continue;
const existing = cells.get(dayIndex);
const duration = getEntryDurationSeconds(entry);
if (existing) {
existing.entries.push(entry);
existing.totalSeconds += duration;
} else {
cells.set(dayIndex, {
dayIndex,
date: weekDays.value[dayIndex]!,
entries: [entry],
totalSeconds: duration,
});
}
totalSeconds += duration;
}
return { cells, totalSeconds };
}
return slots.value.map((slot) => {
const identityKey = slotIdentityKey(slot);
let collected: TimeEntry[] = [];
if (!claimed.has(identityKey)) {
const byIdentity = entriesByIdentity.get(identityKey);
if (byIdentity) {
claimed.add(identityKey);
collected = byIdentity;
}
}
const { cells, totalSeconds } = buildCellsFromEntries(collected);
return {
key: slot.id,
projectId: slot.projectId,
taskId: slot.taskId,
billable: slot.billable,
tags: slot.tags,
cells,
totalSeconds,
};
});
});
const dayTotals = computed<number[]>(() =>
weekDays.value.map((_, dayIndex) =>
rows.value.reduce((sum, row) => sum + (row.cells.get(dayIndex)?.totalSeconds ?? 0), 0)
)
);
const grandTotal = computed(() => dayTotals.value.reduce((a, b) => a + b, 0));
function addSlot(
projectId: string | null,
taskId: string | null,
billable: boolean,
tags: string[]
): TimesheetRowKey {
const id = newSlotId();
slots.value.push({
id,
origin: 'user',
projectId,
taskId,
billable,
tags: sortTags(tags),
});
return id;
}
function removeSlot(key: TimesheetRowKey) {
slots.value = slots.value.filter((s) => s.id !== key);
}
function updateSlot(key: TimesheetRowKey, identity: TimesheetRowIdentity) {
const slot = slots.value.find((s) => s.id === key);
if (!slot) return;
slot.projectId = identity.projectId;
slot.taskId = identity.taskId;
slot.billable = identity.billable;
slot.tags = sortTags(identity.tags);
}
function clearSlots() {
slots.value = [];
}
return {
rows,
dayTotals,
grandTotal,
slots,
addSlot,
removeSlot,
updateSlot,
clearSlots,
};
}

View File

@@ -1,102 +0,0 @@
import { useQuery, type QueryClient } from '@tanstack/vue-query';
import { api, type TimeEntry, type TimeEntryResponse } from '@/packages/api/src';
import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
import { computed, type Ref } from 'vue';
import type { Dayjs } from 'dayjs';
import { localDateToUtc } from '@/packages/ui/src/utils/time';
function createTimesheetQueryKey(
start: string | null,
end: string | null,
organizationId: string | null
) {
return ['timeEntries', 'timesheet', { start, end, organization: organizationId }] as const;
}
async function fetchTimesheetEntries(
organizationId: string,
memberId: string | undefined,
start: string,
end: string
): Promise<TimeEntryResponse> {
const allEntries: TimeEntry[] = [];
while (true) {
const response = await api.getTimeEntries({
params: { organization: organizationId },
queries: {
start,
end,
member_id: memberId,
offset: allEntries.length || undefined,
},
});
if (response.data.length === 0) {
return { data: allEntries, meta: response.meta };
}
allEntries.push(...response.data);
if (allEntries.length >= response.meta.total) {
return { data: allEntries, meta: response.meta };
}
}
}
export function useTimesheetQuery(
weekStart: Ref<Dayjs | undefined>,
weekEnd: Ref<Dayjs | undefined>
) {
const enabled = computed(() => {
return !!getCurrentOrganizationId() && !!weekStart.value && !!weekEnd.value;
});
const dateRange = computed(() => {
if (!weekStart.value || !weekEnd.value) return { start: null, end: null };
return {
start: localDateToUtc(weekStart.value),
end: localDateToUtc(weekEnd.value),
};
});
return useQuery<TimeEntryResponse>({
queryKey: computed(() =>
createTimesheetQueryKey(
dateRange.value.start,
dateRange.value.end,
getCurrentOrganizationId()
)
),
enabled,
queryFn: async () => {
return fetchTimesheetEntries(
getCurrentOrganizationId() || '',
getCurrentMembershipId(),
dateRange.value.start!,
dateRange.value.end!
);
},
staleTime: 1000 * 30,
placeholderData: (previousData) => previousData,
});
}
export function prefetchTimesheetWeek(queryClient: QueryClient, weekStart: Dayjs, weekEnd: Dayjs) {
const start = localDateToUtc(weekStart);
const end = localDateToUtc(weekEnd);
const organizationId = getCurrentOrganizationId();
const memberId = getCurrentMembershipId();
if (!organizationId) return;
const queryKey = createTimesheetQueryKey(start, end, organizationId);
queryClient.prefetchQuery({
queryKey,
queryFn: () => fetchTimesheetEntries(organizationId, memberId, start, end),
staleTime: 1000 * 30,
});
}
export { fetchTimesheetEntries };

View File

@@ -0,0 +1,45 @@
<?php
declare(strict_types=1);
namespace Tests\Unit\Endpoint\Web;
use App\Models\OrganizationInvitation;
use App\Providers\JetstreamServiceProvider;
use Inertia\Testing\AssertableInertia as Assert;
use Laravel\Jetstream\Jetstream;
use PHPUnit\Framework\Attributes\CoversClass;
#[CoversClass(JetstreamServiceProvider::class)]
class TeamShowEndpointTest extends EndpointTestAbstract
{
protected function setUp(): void
{
Jetstream::$inertiaManager = null;
parent::setUp();
}
public function test_team_show_does_not_expose_member_roster_invitations_or_owner_email(): void
{
// Arrange
$data = $this->createUserWithPermission([]);
OrganizationInvitation::factory()->forOrganization($data->organization)->create([
'email' => 'pending@example.com',
]);
$this->actingAs($data->user);
// Act
$response = $this->get('/teams/'.$data->organization->getKey());
// Assert
$response->assertOk();
$response->assertInertia(fn (Assert $page) => $page
->missing('team.users')
->missing('team.team_invitations')
->missing('team.owner.email')
->has('team.owner.id')
->has('team.owner.name')
->has('team.owner.profile_photo_url')
);
}
}

View File

@@ -10,57 +10,12 @@ use App\Models\Tag;
use App\Models\Task; use App\Models\Task;
use App\Models\TimeEntry; use App\Models\TimeEntry;
use App\Service\TimeEntryFilter; use App\Service\TimeEntryFilter;
use Illuminate\Support\Carbon;
use PHPUnit\Framework\Attributes\CoversClass; use PHPUnit\Framework\Attributes\CoversClass;
use Tests\TestCaseWithDatabase; use Tests\TestCaseWithDatabase;
#[CoversClass(TimeEntryFilter::class)] #[CoversClass(TimeEntryFilter::class)]
class TimeEntryFilterTest extends TestCaseWithDatabase class TimeEntryFilterTest extends TestCaseWithDatabase
{ {
public function test_add_start_is_inclusive_of_boundary(): void
{
// Arrange
$boundary = Carbon::parse('2024-01-01 12:00:00', 'UTC');
$entryAtBoundary = TimeEntry::factory()->start($boundary)->create();
$entryAfterBoundary = TimeEntry::factory()->start($boundary->copy()->addSecond())->create();
$entryBeforeBoundary = TimeEntry::factory()->start($boundary->copy()->subSecond())->create();
$builder = TimeEntry::query();
$filter = new TimeEntryFilter($builder);
// Act
$filter->addStart($boundary);
// Assert
$timeEntries = $builder->get();
$this->assertCount(2, $timeEntries);
$this->assertTrue($timeEntries->contains($entryAtBoundary));
$this->assertTrue($timeEntries->contains($entryAfterBoundary));
$this->assertFalse($timeEntries->contains($entryBeforeBoundary));
}
public function test_add_end_is_exclusive_of_boundary(): void
{
// Arrange
$boundary = Carbon::parse('2024-01-01 12:00:00', 'UTC');
$entryAtBoundary = TimeEntry::factory()->start($boundary)->create();
$entryAfterBoundary = TimeEntry::factory()->start($boundary->copy()->addSecond())->create();
$entryBeforeBoundary = TimeEntry::factory()->start($boundary->copy()->subSecond())->create();
$builder = TimeEntry::query();
$filter = new TimeEntryFilter($builder);
// Act
$filter->addEnd($boundary);
// Assert
$timeEntries = $builder->get();
$this->assertCount(1, $timeEntries);
$this->assertTrue($timeEntries->contains($entryBeforeBoundary));
$this->assertFalse($timeEntries->contains($entryAtBoundary));
$this->assertFalse($timeEntries->contains($entryAfterBoundary));
}
public function test_add_tag_ids_filter_is_or(): void public function test_add_tag_ids_filter_is_or(): void
{ {
// Arrange // Arrange