@hed-hog/operations 0.0.327 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/timesheets/page.tsx

@@ -1,1705 +0,0 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  SearchBar,
-} from '@/components/entity-list';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { FormActions } from '@/components/ui/form-actions';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  CalendarDays,
-  ClipboardList,
-  Clock3,
-  Eye,
-  LayoutGrid,
-  List,
-  Loader2,
-  Pencil,
-  Plus,
-  Send,
-  Trash2,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useForm, useWatch } from 'react-hook-form';
-import { z } from 'zod';
-
-import { AsyncOptionsCombobox } from '../_components/async-options-combobox';
-import {
-  OperationsCalendarView,
-  type OperationsCalendarItem,
-} from '../_components/operations-calendar-view';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import { TimesheetTaskCreateSheet } from '../_components/timesheet-task-create-sheet';
-import {
-  fetchOperations,
-  getOperationsErrorMessage,
-  mutateOperations,
-} from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsCollaborator,
-  OperationsProjectOption,
-  OperationsTaskOption,
-  OperationsTimesheet,
-  OperationsTimesheetEntry,
-  PaginatedResponse,
-} from '../_lib/types';
-import {
-  formatDate,
-  formatEnumLabel,
-  formatHours,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-import { trimToNull } from '../_lib/utils/forms';
-
-type QuickEntryFormValues = {
-  projectId?: number;
-  taskId?: number;
-  workDate: string;
-  duration?: number;
-  unit: 'hours' | 'minutes';
-  description: string;
-};
-
-const getTodayDate = () => {
-  const now = new Date();
-  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
-};
-
-const buildDefaultFormValues = (): QuickEntryFormValues => ({
-  projectId: undefined,
-  taskId: undefined,
-  workDate: getTodayDate(),
-  duration: undefined,
-  unit: 'hours',
-  description: '',
-});
-
-const positiveNumberField = (message: string) =>
-  z.preprocess(
-    (value) => {
-      if (value === '' || value === null || value === undefined) {
-        return undefined;
-      }
-
-      if (typeof value === 'number') {
-        return value;
-      }
-
-      const parsed = Number(value);
-      return Number.isNaN(parsed) ? value : parsed;
-    },
-    z.number({ required_error: message }).positive(message)
-  );
-
-function appendUniqueById<T extends { id: number | string }>(
-  current: T[],
-  next: T[]
-) {
-  const unique = new Map<string, T>();
-
-  [...current, ...next].forEach((item) => {
-    unique.set(String(item.id), item);
-  });
-
-  return Array.from(unique.values());
-}
-
-function formatDateLabel(value?: string | null) {
-  if (!value) {
-    return '—';
-  }
-
-  // Always extract just the YYYY-MM-DD part to avoid UTC offset shifting the date
-  const match = String(value).match(/(\d{4}-\d{2}-\d{2})/);
-  if (!match) {
-    return value;
-  }
-
-  const date = new Date(`${match[1]}T12:00:00`);
-
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
-
-  return new Intl.DateTimeFormat(undefined, {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric',
-  }).format(date);
-}
-
-function formatEntryDuration(minutes?: number | null, hours?: number | null) {
-  if (typeof minutes === 'number' && Number.isFinite(minutes) && minutes > 0) {
-    const wholeHours = Math.floor(minutes / 60);
-    const remainingMinutes = minutes % 60;
-
-    if (!wholeHours) {
-      return `${remainingMinutes}m`;
-    }
-
-    if (!remainingMinutes) {
-      return `${wholeHours}h`;
-    }
-
-    return `${wholeHours}h ${remainingMinutes}m`;
-  }
-
-  return formatHours(Number(hours ?? 0));
-}
-
-function buildFollowUpFormValues(
-  current: QuickEntryFormValues,
-  keepContextOnSave: boolean
-): QuickEntryFormValues {
-  if (!keepContextOnSave) {
-    return buildDefaultFormValues();
-  }
-
-  return {
-    projectId: current.projectId,
-    taskId: current.taskId,
-    workDate: current.workDate || getTodayDate(),
-    duration: 0,
-    unit: current.unit ?? 'hours',
-    description: '',
-  };
-}
-
-function buildEntryFormValues(
-  entry: OperationsTimesheetEntry
-): QuickEntryFormValues {
-  return {
-    projectId: entry.projectId ?? undefined,
-    taskId: entry.taskId ?? undefined,
-    workDate: String(entry.workDate).match(/(\d{4}-\d{2}-\d{2})/)?.[1] ?? '',
-    duration:
-      typeof entry.durationMinutes === 'number' && entry.durationMinutes > 0
-        ? Number((entry.durationMinutes / 60).toFixed(2))
-        : Number(entry.hours ?? 0),
-    unit: 'hours',
-    description: entry.description ?? '',
-  };
-}
-
-export default function OperationsTimesheetsPage() {
-  const t = useTranslations('operations.TimesheetsPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [dateFrom, setDateFrom] = useState('');
-  const [dateTo, setDateTo] = useState('');
-  const [calendarYear, setCalendarYear] = useState(() =>
-    new Date().getFullYear()
-  );
-  const [calendarMonth, setCalendarMonth] = useState(
-    () => new Date().getMonth() + 1
-  );
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [viewMode, setViewMode] = useState<'table' | 'cards' | 'calendar'>(
-    () => {
-      if (typeof window === 'undefined') return 'table';
-      const saved = window.localStorage.getItem(
-        'operations-timesheets-view-mode'
-      );
-      return saved === 'cards' || saved === 'calendar' ? saved : 'table';
-    }
-  );
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [isTaskCreateSheetOpen, setIsTaskCreateSheetOpen] = useState(false);
-  const [keepContextOnSave, setKeepContextOnSave] = useState(true);
-  const [editingEntry, setEditingEntry] =
-    useState<OperationsTimesheetEntry | null>(null);
-  const [entryToDelete, setEntryToDelete] =
-    useState<OperationsTimesheetEntry | null>(null);
-  const [selectedTimesheet, setSelectedTimesheet] =
-    useState<OperationsTimesheet | null>(null);
-  const [isDeletingEntry, setIsDeletingEntry] = useState(false);
-  const [projectQuery, setProjectQuery] = useState({ search: '', page: 1 });
-  const [projectOptions, setProjectOptions] = useState<
-    OperationsProjectOption[]
-  >([]);
-  const [taskQuery, setTaskQuery] = useState({ search: '', page: 1 });
-  const [taskRefreshKey, setTaskRefreshKey] = useState(0);
-  const [taskOptions, setTaskOptions] = useState<OperationsTaskOption[]>([]);
-  const previousProjectIdRef = useRef<number | undefined>(undefined);
-
-  const quickEntrySchema = useMemo(
-    () =>
-      z.object({
-        projectId: positiveNumberField(t('messages.selectProjectRequired')),
-        taskId: positiveNumberField(t('messages.selectTaskRequired')),
-        workDate: z.string().min(1, t('messages.requiredFields')),
-        duration: positiveNumberField(t('messages.entryValidation')),
-        unit: z.enum(['hours', 'minutes']),
-        description: z
-          .string()
-          .trim()
-          .max(500, t('sheet.validation.descriptionMaxLength'))
-          .optional()
-          .or(z.literal('')),
-      }),
-    [t]
-  );
-
-  const form = useForm<QuickEntryFormValues>({
-    resolver: zodResolver(quickEntrySchema),
-    defaultValues: buildDefaultFormValues(),
-  });
-
-  const selectedProjectId = useWatch({
-    control: form.control,
-    name: 'projectId',
-  });
-
-  const selectedTaskId = useWatch({
-    control: form.control,
-    name: 'taskId',
-  });
-
-  const unitValue = useWatch({
-    control: form.control,
-    name: 'unit',
-  });
-
-  const { data: timesheetsResponse, refetch } = useQuery<
-    PaginatedResponse<OperationsTimesheet>
-  >({
-    queryKey: [
-      'operations-timesheets',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      dateFrom,
-      dateTo,
-      page,
-      pageSize,
-    ],
-    queryFn: () => {
-      const params = new URLSearchParams({
-        page: String(page),
-        pageSize: String(pageSize),
-      });
-      if (search.trim()) params.set('search', search.trim());
-      if (statusFilter !== 'all') params.set('status', statusFilter);
-      if (dateFrom) params.set('dateFrom', dateFrom);
-      if (dateTo) params.set('dateTo', dateTo);
-      return fetchOperations<PaginatedResponse<OperationsTimesheet>>(
-        request,
-        `/operations/timesheets?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  const timesheets = timesheetsResponse?.data ?? [];
-
-  const calendarDateFrom = `${String(calendarYear)}-${String(calendarMonth).padStart(2, '0')}-01`;
-  const calendarDateTo = (() => {
-    const lastDay = new Date(calendarYear, calendarMonth, 0).getDate();
-    return `${String(calendarYear)}-${String(calendarMonth).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
-  })();
-
-  const { data: calendarTimesheetsResponse } = useQuery<
-    PaginatedResponse<OperationsTimesheet>
-  >({
-    queryKey: [
-      'operations-timesheets-calendar',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      calendarYear,
-      calendarMonth,
-    ],
-    enabled: viewMode === 'calendar',
-    queryFn: () => {
-      const params = new URLSearchParams({
-        sortField: 'weekStartDate',
-        sortOrder: 'desc',
-        dateFrom: calendarDateFrom,
-        dateTo: calendarDateTo,
-      });
-      if (search.trim()) params.set('search', search.trim());
-      if (statusFilter !== 'all') params.set('status', statusFilter);
-      return fetchOperations<PaginatedResponse<OperationsTimesheet>>(
-        request,
-        `/operations/timesheets?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-  const calendarTimesheets = useMemo(
-    () => calendarTimesheetsResponse?.data ?? [],
-    [calendarTimesheetsResponse]
-  );
-
-  const getTimesheetStatusLabel = useCallback(
-    (status?: string | null) => {
-      if (!status) {
-        return commonT('labels.notAvailable');
-      }
-
-      return t.has(`statuses.${status}`)
-        ? t(`statuses.${status}`)
-        : formatEnumLabel(status);
-    },
-    [commonT, t]
-  );
-
-  const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards' && value !== 'calendar') return;
-    setViewMode(value as 'table' | 'cards' | 'calendar');
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem('operations-timesheets-view-mode', value);
-    }
-  };
-
-  const { data: me } = useQuery<OperationsCollaborator>({
-    queryKey: ['operations-timesheets-me', currentLocaleCode],
-    enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchOperations<OperationsCollaborator>(
-        request,
-        '/operations/collaborators/me'
-      ),
-  });
-
-  const { refetch: refetchRecentEntries } = useQuery<
-    PaginatedResponse<OperationsTimesheetEntry>
-  >({
-    queryKey: [
-      'operations-timesheet-recent-entries',
-      currentLocaleCode,
-      search,
-      statusFilter,
-    ],
-    enabled: access.isCollaborator,
-    queryFn: () => {
-      const params = new URLSearchParams({
-        page: '1',
-        pageSize: '8',
-        sortField: 'workDate',
-        sortOrder: 'desc',
-      });
-
-      if (search.trim()) {
-        params.set('search', search.trim());
-      }
-
-      if (statusFilter !== 'all') {
-        params.set('status', statusFilter);
-      }
-
-      return fetchOperations<PaginatedResponse<OperationsTimesheetEntry>>(
-        request,
-        `/operations/timesheet-entries?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  const {
-    data: projectOptionsResponse,
-    isLoading: isProjectOptionsLoading,
-    error: projectOptionsError,
-  } = useQuery<PaginatedResponse<OperationsProjectOption>>({
-    queryKey: [
-      'operations-timesheet-project-options',
-      currentLocaleCode,
-      projectQuery.search,
-      projectQuery.page,
-    ],
-    enabled: access.isCollaborator && isSheetOpen,
-    queryFn: () => {
-      const params = new URLSearchParams({
-        page: String(projectQuery.page),
-        pageSize: '20',
-      });
-
-      if (projectQuery.search.trim()) {
-        params.set('search', projectQuery.search.trim());
-      }
-
-      return fetchOperations<PaginatedResponse<OperationsProjectOption>>(
-        request,
-        `/operations/projects/options?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  const selectedProject =
-    projectOptions.find((option) => option.id === selectedProjectId) ?? null;
-
-  const {
-    data: taskOptionsResponse,
-    isLoading: isTaskOptionsLoading,
-    error: taskOptionsError,
-  } = useQuery<PaginatedResponse<OperationsTaskOption>>({
-    queryKey: [
-      'operations-timesheet-task-options',
-      currentLocaleCode,
-      selectedProjectId,
-      taskQuery.search,
-      taskQuery.page,
-      taskRefreshKey,
-    ],
-    enabled: access.isCollaborator && isSheetOpen && Boolean(selectedProjectId),
-    queryFn: () => {
-      const params = new URLSearchParams({
-        page: String(taskQuery.page),
-        pageSize: '20',
-      });
-
-      if (taskQuery.search.trim()) {
-        params.set('search', taskQuery.search.trim());
-      }
-
-      if (selectedProjectId) {
-        params.set('projectId', String(selectedProjectId));
-      }
-
-      return fetchOperations<PaginatedResponse<OperationsTaskOption>>(
-        request,
-        `/operations/tasks?${params.toString()}`
-      );
-    },
-  });
-
-  useEffect(() => {
-    if (!projectOptionsResponse) {
-      return;
-    }
-
-    setProjectOptions((current) =>
-      projectQuery.page === 1
-        ? editingEntry
-          ? appendUniqueById(current, projectOptionsResponse.data ?? [])
-          : (projectOptionsResponse.data ?? [])
-        : appendUniqueById(current, projectOptionsResponse.data ?? [])
-    );
-  }, [editingEntry, projectOptionsResponse, projectQuery.page]);
-
-  useEffect(() => {
-    if (!selectedProjectId) {
-      setTaskOptions([]);
-      return;
-    }
-
-    if (!taskOptionsResponse) {
-      return;
-    }
-
-    setTaskOptions((current) =>
-      taskQuery.page === 1
-        ? editingEntry
-          ? appendUniqueById(
-              current,
-              (taskOptionsResponse.data ?? []).filter(
-                (option) => option.projectId === selectedProjectId
-              )
-            )
-          : (taskOptionsResponse.data ?? []).filter(
-              (option) => option.projectId === selectedProjectId
-            )
-        : appendUniqueById(
-            current,
-            (taskOptionsResponse.data ?? []).filter(
-              (option) => option.projectId === selectedProjectId
-            )
-          )
-    );
-  }, [editingEntry, selectedProjectId, taskOptionsResponse, taskQuery.page]);
-
-  useEffect(() => {
-    const previousProjectId = previousProjectIdRef.current;
-    previousProjectIdRef.current = selectedProjectId;
-
-    if (
-      previousProjectId === undefined ||
-      previousProjectId === selectedProjectId
-    ) {
-      return;
-    }
-
-    setTaskOptions([]);
-    setTaskQuery({ search: '', page: 1 });
-    form.setValue('taskId', undefined, {
-      shouldDirty: true,
-      shouldTouch: true,
-      shouldValidate: false,
-    });
-  }, [form, selectedProjectId]);
-
-  useEffect(() => {
-    if (!projectOptionsError) {
-      return;
-    }
-
-    showToastHandler?.(
-      'error',
-      getOperationsErrorMessage(
-        projectOptionsError,
-        t('messages.projectLoadError')
-      )
-    );
-  }, [projectOptionsError, showToastHandler, t]);
-
-  useEffect(() => {
-    if (!taskOptionsError) {
-      return;
-    }
-
-    showToastHandler?.(
-      'error',
-      getOperationsErrorMessage(taskOptionsError, t('messages.taskLoadError'))
-    );
-  }, [showToastHandler, t, taskOptionsError]);
-
-  const filteredTaskOptions = selectedProjectId
-    ? taskOptions.filter((option) => option.projectId === selectedProjectId)
-    : [];
-  const selectedTask =
-    filteredTaskOptions.find((option) => option.id === selectedTaskId) ?? null;
-  const isEditingEntry = Boolean(editingEntry);
-
-  const filteredRows = timesheets;
-  const calendarItems = useMemo<OperationsCalendarItem[]>(
-    () =>
-      calendarTimesheets.map((timesheet) => ({
-        id: `timesheet-${timesheet.id}`,
-        date:
-          String(timesheet.weekStartDate).match(/(\d{4}-\d{2}-\d{2})/)?.[1] ??
-          timesheet.weekStartDate,
-        kind: 'timesheet',
-        title: `${formatHours(timesheet.totalHours)} • ${timesheet.collaboratorName}`,
-        subtitle:
-          (timesheet.entries ?? [])
-            .slice(0, 2)
-            .map(
-              (entry) =>
-                [entry.projectName, entry.taskName || entry.activityLabel]
-                  .filter(Boolean)
-                  .join(' • ') || commonT('labels.unassigned')
-            )
-            .join(', ') || commonT('labels.unassigned'),
-        meta: `${timesheet.entries?.length ?? 0} ${commonT('labels.lines')}`,
-        statusLabel: getTimesheetStatusLabel(timesheet.status),
-        badgeClassName: getStatusBadgeClass(timesheet.status),
-      })),
-    [calendarTimesheets, commonT, getTimesheetStatusLabel]
-  );
-
-  const cards = [
-    {
-      key: 'all',
-      title: t('cards.visible'),
-      description: t('cards.visibleDescription'),
-      value: timesheets.length,
-    },
-    {
-      key: 'pending',
-      title: t('cards.pending'),
-      description: t('cards.pendingDescription'),
-      value: timesheets.filter((item) => item.status === 'submitted').length,
-    },
-    {
-      key: 'hours',
-      title: t('cards.hours'),
-      description: t('cards.hoursDescription'),
-      value: formatHours(
-        timesheets.reduce(
-          (total, item) => total + Number(item.totalHours ?? 0),
-          0
-        )
-      ),
-    },
-  ];
-
-  const openCreate = () => {
-    setEditingEntry(null);
-    form.reset(buildDefaultFormValues());
-    setProjectQuery({ search: '', page: 1 });
-    setTaskQuery({ search: '', page: 1 });
-    setProjectOptions([]);
-    setTaskOptions([]);
-    setIsTaskCreateSheetOpen(false);
-    setIsSheetOpen(true);
-  };
-
-  const closeCreateSheet = () => {
-    setIsSheetOpen(false);
-    setEditingEntry(null);
-    setIsTaskCreateSheetOpen(false);
-    form.reset(buildDefaultFormValues());
-    setProjectQuery({ search: '', page: 1 });
-    setTaskQuery({ search: '', page: 1 });
-    setProjectOptions([]);
-    setTaskOptions([]);
-  };
-
-  const openDetails = (timesheet: OperationsTimesheet) => {
-    setSelectedTimesheet(timesheet);
-    setIsDetailsOpen(true);
-  };
-
-  const openEditEntry = (entry: OperationsTimesheetEntry) => {
-    setEditingEntry(entry);
-    form.reset(buildEntryFormValues(entry));
-    setProjectQuery({ search: '', page: 1 });
-    setTaskQuery({ search: '', page: 1 });
-    setProjectOptions((current) =>
-      appendUniqueById(
-        current,
-        entry.projectId && entry.projectName
-          ? [
-              {
-                id: entry.projectId,
-                label:
-                  [entry.projectCode, entry.projectName]
-                    .filter(Boolean)
-                    .join(' • ') || entry.projectName,
-                name: entry.projectName,
-                code: entry.projectCode,
-                status: entry.status ?? 'submitted',
-              },
-            ]
-          : []
-      )
-    );
-    setTaskOptions((current) =>
-      appendUniqueById(
-        current,
-        entry.taskId && entry.projectId
-          ? [
-              {
-                id: entry.taskId,
-                label:
-                  entry.taskName ||
-                  entry.activityLabel ||
-                  commonT('labels.unassigned'),
-                name:
-                  entry.taskName ||
-                  entry.activityLabel ||
-                  commonT('labels.unassigned'),
-                status: entry.status ?? 'submitted',
-                projectId: entry.projectId,
-                projectAssignmentId: entry.projectAssignmentId ?? 0,
-                projectName:
-                  entry.projectName || commonT('labels.unassigned'),
-              },
-            ]
-          : []
-      )
-    );
-    setEntryToDelete(null);
-    setIsDetailsOpen(false);
-    setIsTaskCreateSheetOpen(false);
-    setIsSheetOpen(true);
-  };
-
-  const openTimesheetForDate = (date: string) => {
-    const existingTimesheet =
-      calendarTimesheets.find((item) => item.weekStartDate === date) ??
-      timesheets.find((item) => item.weekStartDate === date);
-
-    if (existingTimesheet) {
-      openDetails(existingTimesheet);
-      return;
-    }
-
-    setEditingEntry(null);
-    form.reset({
-      ...buildDefaultFormValues(),
-      workDate: date,
-    });
-    setProjectQuery({ search: '', page: 1 });
-    setTaskQuery({ search: '', page: 1 });
-    setProjectOptions([]);
-    setTaskOptions([]);
-    setIsTaskCreateSheetOpen(false);
-    setIsSheetOpen(true);
-  };
-
-  const canManageRow = (timesheet: OperationsTimesheet) => {
-    return Boolean(
-      me?.id &&
-      timesheet.collaboratorId === me.id &&
-      timesheet.status !== 'approved'
-    );
-  };
-
-  const canSubmitTimesheet = (timesheet: OperationsTimesheet) => {
-    return Boolean(
-      me?.id &&
-      timesheet.collaboratorId === me.id &&
-      ['draft', 'rejected'].includes(timesheet.status)
-    );
-  };
-
-  const handleQuickEntrySubmit = async (values: QuickEntryFormValues) => {
-    const payload = {
-      projectId: values.projectId,
-      taskId: values.taskId,
-      workDate: values.workDate,
-      duration: values.duration,
-      unit: values.unit,
-      description: trimToNull(values.description),
-    };
-
-    try {
-      if (editingEntry?.id) {
-        await mutateOperations(
-          request,
-          `/operations/timesheet-entries/${editingEntry.id}`,
-          'PATCH',
-          payload
-        );
-      } else {
-        await mutateOperations(
-          request,
-          '/operations/timesheet-entries',
-          'POST',
-          payload
-        );
-      }
-
-      showToastHandler?.(
-        'success',
-        editingEntry ? t('messages.updateSuccess') : t('messages.saveSuccess')
-      );
-
-      if (!editingEntry && keepContextOnSave) {
-        form.reset(buildFollowUpFormValues(values, true));
-        setProjectQuery({ search: '', page: 1 });
-        setTaskQuery({ search: '', page: 1 });
-        setIsTaskCreateSheetOpen(false);
-        setTimeout(() => form.setFocus('duration'), 0);
-      } else {
-        closeCreateSheet();
-      }
-
-      await Promise.all([refetch(), refetchRecentEntries()]);
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(
-          error,
-          editingEntry ? t('messages.updateError') : t('messages.saveError')
-        )
-      );
-    }
-  };
-
-  const submitTimesheet = async (timesheetId: number) => {
-    try {
-      await request({
-        url: `/operations/timesheets/${timesheetId}/submit`,
-        method: 'POST',
-      });
-      showToastHandler?.('success', t('messages.submitSuccess'));
-      await Promise.all([refetch(), refetchRecentEntries()]);
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(error, t('messages.submitError'))
-      );
-    }
-  };
-
-  const openTaskCreateSheet = () => {
-    if (!selectedProjectId || !selectedProject) {
-      showToastHandler?.('error', t('messages.selectProjectFirst'));
-      return;
-    }
-
-    setIsTaskCreateSheetOpen(true);
-  };
-
-  const handleTaskCreated = (task: OperationsTaskOption) => {
-    setTaskOptions((current) => [
-      task,
-      ...current.filter((item) => item.id !== task.id),
-    ]);
-    form.setValue('taskId', task.id, {
-      shouldDirty: true,
-      shouldTouch: true,
-      shouldValidate: true,
-    });
-    setTaskQuery({ search: '', page: 1 });
-    setTaskRefreshKey((current) => current + 1);
-  };
-
-  const handleDeleteEntry = async () => {
-    if (!entryToDelete?.id) {
-      return;
-    }
-
-    try {
-      setIsDeletingEntry(true);
-      await mutateOperations(
-        request,
-        `/operations/timesheet-entries/${entryToDelete.id}`,
-        'DELETE'
-      );
-      showToastHandler?.('success', t('messages.deleteSuccess'));
-      setEntryToDelete(null);
-      await Promise.all([refetch(), refetchRecentEntries()]);
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getOperationsErrorMessage(error, t('messages.deleteError'))
-      );
-    } finally {
-      setIsDeletingEntry(false);
-    }
-  };
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          access.isCollaborator ? (
-            <Button size="sm" onClick={openCreate}>
-              <Plus className="size-4" />
-              {commonT('actions.create')}
-            </Button>
-          ) : undefined
-        }
-      />
-
-      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="flex-1">
-          <SearchBar
-            searchQuery={search}
-            onSearchChange={(value) => {
-              setSearch(value);
-              setPage(1);
-            }}
-            showSearchButton={false}
-            debounceMs={500}
-            placeholder={t('searchPlaceholder')}
-            controls={[
-              {
-                id: 'status',
-                type: 'select',
-                value: statusFilter,
-                onChange: (value) => {
-                  setStatusFilter(value);
-                  setPage(1);
-                },
-                placeholder: commonT('labels.status'),
-                options: [
-                  { value: 'all', label: commonT('filters.allStatuses') },
-                  { value: 'draft', label: getTimesheetStatusLabel('draft') },
-                  {
-                    value: 'submitted',
-                    label: getTimesheetStatusLabel('submitted'),
-                  },
-                  {
-                    value: 'approved',
-                    label: getTimesheetStatusLabel('approved'),
-                  },
-                  {
-                    value: 'rejected',
-                    label: getTimesheetStatusLabel('rejected'),
-                  },
-                ],
-              },
-              {
-                id: 'dateFrom',
-                type: 'date',
-                value: dateFrom,
-                onChange: (value) => {
-                  setDateFrom(value);
-                  setPage(1);
-                },
-                label: commonT('filters.dateFrom'),
-              },
-              {
-                id: 'dateTo',
-                type: 'date',
-                value: dateTo,
-                onChange: (value) => {
-                  setDateTo(value);
-                  setPage(1);
-                },
-                label: commonT('filters.dateTo'),
-              },
-            ]}
-          />
-        </div>
-
-        <div className="flex items-center justify-between gap-3 xl:justify-end">
-          <span className="text-xs font-medium text-muted-foreground">
-            {t('viewMode')}
-          </span>
-          <ToggleGroup
-            type="single"
-            value={viewMode}
-            onValueChange={handleViewModeChange}
-            variant="outline"
-            size="sm"
-          >
-            <ToggleGroupItem value="table" className="gap-1.5 px-2.5">
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeTable')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeCards')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="calendar" className="gap-1.5 px-2.5">
-              <CalendarDays className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeCalendar')}</span>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
-
-      <KpiCardsGrid items={cards} columns={3} />
-
-      {(viewMode === 'calendar' ? true : timesheets.length > 0) ? (
-        viewMode === 'calendar' ? (
-          <OperationsCalendarView
-            locale={currentLocaleCode}
-            items={calendarItems}
-            emptyLabel={t('emptyDescription')}
-            actionLabel={t('actions.viewDetails')}
-            onMonthChange={(year, month) => {
-              setCalendarYear(year);
-              setCalendarMonth(month);
-            }}
-            onOpenItem={(item) => {
-              openTimesheetForDate(item.date);
-            }}
-            onDateSelect={(date, items) => {
-              if (items.some((item) => item.kind === 'timesheet')) {
-                openTimesheetForDate(date);
-              }
-            }}
-          />
-        ) : viewMode === 'cards' ? (
-          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
-            {timesheets.map((timesheet) => (
-              <div
-                key={timesheet.id}
-                className="rounded-lg border bg-card shadow-sm p-4 space-y-3"
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div className="min-w-0">
-                    <div className="truncate font-semibold">
-                      {timesheet.collaboratorName}
-                    </div>
-                    <div className="truncate text-xs text-muted-foreground">
-                      {formatDate(timesheet.weekStartDate)}
-                    </div>
-                  </div>
-                  <StatusBadge
-                    label={getTimesheetStatusLabel(timesheet.status)}
-                    className={getStatusBadgeClass(timesheet.status)}
-                  />
-                </div>
-                <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
-                  <div>
-                    <span className="font-medium text-foreground">
-                      {commonT('labels.totalHours')}:
-                    </span>{' '}
-                    {formatHours(timesheet.totalHours)}
-                  </div>
-                  <div>
-                    <span className="font-medium text-foreground">
-                      {commonT('labels.entries')}:
-                    </span>{' '}
-                    {timesheet.entries?.length ?? 0}
-                  </div>
-                </div>
-                {timesheet.approverName ? (
-                  <div className="text-sm text-muted-foreground">
-                    <span className="font-medium text-foreground">
-                      {commonT('labels.approver')}:
-                    </span>{' '}
-                    {timesheet.approverName}
-                  </div>
-                ) : null}
-                {canManageRow(timesheet) ? (
-                  <div className="flex justify-end gap-2 border-t border-border/60 pt-3">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="cursor-pointer"
-                      onClick={() => openDetails(timesheet)}
-                    >
-                      <Eye className="size-4" />
-                      {t('actions.viewDetails')}
-                    </Button>
-                    {canSubmitTimesheet(timesheet) ? (
-                      <Button
-                        size="sm"
-                        onClick={() => void submitTimesheet(timesheet.id)}
-                      >
-                        <Send className="size-4" />
-                        {commonT('actions.submit')}
-                      </Button>
-                    ) : null}
-                  </div>
-                ) : (
-                  <div className="flex justify-end border-t border-border/60 pt-3">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="cursor-pointer"
-                      onClick={() => openDetails(timesheet)}
-                    >
-                      <Eye className="size-4" />
-                      {t('actions.viewDetails')}
-                    </Button>
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{commonT('labels.collaborator')}</TableHead>
-                  <TableHead>{commonT('labels.workDate')}</TableHead>
-                  <TableHead>{commonT('labels.entries')}</TableHead>
-                  <TableHead>{commonT('labels.totalHours')}</TableHead>
-                  <TableHead>{commonT('labels.approver')}</TableHead>
-                  <TableHead>{commonT('labels.decisionNote')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead>{commonT('labels.actions')}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredRows.map((timesheet) => (
-                  <TableRow key={timesheet.id} className="hover:bg-muted/30">
-                    <TableCell>
-                      <div className="font-medium">
-                        {timesheet.collaboratorName}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {timesheet.notes || commonT('labels.noNotes')}
-                      </div>
-                    </TableCell>
-                    <TableCell>{formatDate(timesheet.weekStartDate)}</TableCell>
-                    <TableCell>
-                      <div className="font-medium">
-                        {timesheet.entries?.length ?? 0}{' '}
-                        {commonT('labels.lines')}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {(timesheet.entries ?? [])
-                          .slice(0, 2)
-                          .map(
-                            (entry) =>
-                              [
-                                entry.projectName,
-                                entry.taskName || entry.activityLabel,
-                              ]
-                                .filter(Boolean)
-                                .join(' • ') || commonT('labels.unassigned')
-                          )
-                          .join(', ') || commonT('labels.unassigned')}
-                      </div>
-                    </TableCell>
-                    <TableCell>{formatHours(timesheet.totalHours)}</TableCell>
-                    <TableCell>
-                      {timesheet.approverName || commonT('labels.notAssigned')}
-                    </TableCell>
-                    <TableCell>
-                      <div className="text-sm text-muted-foreground">
-                        {timesheet.decisionNote || commonT('labels.noNotes')}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        label={getTimesheetStatusLabel(timesheet.status)}
-                        className={getStatusBadgeClass(timesheet.status)}
-                      />
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex justify-end gap-2">
-                        {canManageRow(timesheet) ? (
-                          <>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="cursor-pointer"
-                              onClick={() => openDetails(timesheet)}
-                            >
-                              <Eye className="size-4" />
-                              {t('actions.viewDetails')}
-                            </Button>
-                            {canSubmitTimesheet(timesheet) ? (
-                              <Button
-                                size="icon"
-                                onClick={() => void submitTimesheet(timesheet.id)}
-                              >
-                                <Send className="size-4" />
-                              </Button>
-                            ) : null}
-                          </>
-                        ) : (
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="cursor-pointer"
-                            onClick={() => openDetails(timesheet)}
-                          >
-                            <Eye className="size-4" />
-                            {t('actions.viewDetails')}
-                          </Button>
-                        )}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        )
-      ) : (
-        <EmptyState
-          icon={<ClipboardList className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={
-            access.isCollaborator
-              ? commonT('actions.create')
-              : commonT('actions.refresh')
-          }
-          onAction={access.isCollaborator ? openCreate : () => void refetch()}
-        />
-      )}
-
-      <PaginationFooter
-        currentPage={page}
-        pageSize={pageSize}
-        totalItems={timesheetsResponse?.total ?? 0}
-        pageSizeOptions={[12, 24, 48]}
-        onPageChange={setPage}
-        onPageSizeChange={(size) => {
-          setPageSize(size);
-          setPage(1);
-        }}
-      />
-
-      <Sheet
-        open={isSheetOpen}
-        onOpenChange={(open) => {
-          if (form.formState.isSubmitting && !open) {
-            return;
-          }
-
-          if (!open) {
-            closeCreateSheet();
-            return;
-          }
-
-          setIsSheetOpen(true);
-        }}
-      >
-        <SheetContent className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl">
-          <SheetHeader className="border-b px-4 py-4 text-left">
-            <div className="flex items-start gap-3">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-                <Clock3 className="size-5" />
-              </div>
-
-              <div className="space-y-1">
-                <SheetTitle>
-                  {isEditingEntry
-                    ? t('sheet.editTitle')
-                    : t('sheet.createTitle')}
-                </SheetTitle>
-                <SheetDescription>{t('sheet.description')}</SheetDescription>
-              </div>
-            </div>
-          </SheetHeader>
-
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(handleQuickEntrySubmit)}
-              className="flex min-h-0 flex-1 flex-col"
-            >
-              <div className="flex-1 space-y-5 overflow-y-auto px-4 py-4">
-                <div className="grid gap-4 lg:grid-cols-2">
-                  <FormField
-                    control={form.control}
-                    name="projectId"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('sheet.fields.project')}</FormLabel>
-                        <FormControl>
-                          <AsyncOptionsCombobox
-                            value={field.value}
-                            selectedOption={selectedProject}
-                            options={projectOptions}
-                            onSelect={(option) => {
-                              field.onChange(option?.id);
-                              form.setValue('taskId', undefined, {
-                                shouldDirty: true,
-                                shouldTouch: true,
-                              });
-                              setTaskQuery({ search: '', page: 1 });
-                              setTaskOptions([]);
-                            }}
-                            searchValue={projectQuery.search}
-                            onSearchValueChange={(value) =>
-                              setProjectQuery({ search: value, page: 1 })
-                            }
-                            placeholder={t('sheet.placeholders.project')}
-                            searchPlaceholder={t(
-                              'sheet.placeholders.projectSearch'
-                            )}
-                            emptyLabel={t('entries.projectHint')}
-                            loadMoreLabel={commonT('actions.loadMore')}
-                            clearLabel={commonT('actions.clearSelection')}
-                            isLoading={isProjectOptionsLoading}
-                            hasMore={Boolean(projectOptionsResponse?.next)}
-                            onLoadMore={() =>
-                              setProjectQuery((current) => ({
-                                ...current,
-                                page: current.page + 1,
-                              }))
-                            }
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="taskId"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('sheet.fields.task')}</FormLabel>
-                        <FormControl>
-                          <AsyncOptionsCombobox
-                            value={field.value}
-                            selectedOption={selectedTask}
-                            options={filteredTaskOptions}
-                            onSelect={(option) => field.onChange(option?.id)}
-                            searchValue={taskQuery.search}
-                            onSearchValueChange={(value) =>
-                              setTaskQuery({ search: value, page: 1 })
-                            }
-                            placeholder={t('sheet.placeholders.task')}
-                            searchPlaceholder={t(
-                              'sheet.placeholders.taskSearch'
-                            )}
-                            emptyLabel={
-                              selectedProjectId
-                                ? t('sheet.helper.task')
-                                : t('sheet.helper.selectProjectFirst')
-                            }
-                            loadMoreLabel={commonT('actions.loadMore')}
-                            clearLabel={commonT('actions.clearSelection')}
-                            createLabel={t('sheet.task.createAction')}
-                            onCreateClick={openTaskCreateSheet}
-                            isLoading={isTaskOptionsLoading}
-                            hasMore={Boolean(taskOptionsResponse?.next)}
-                            onLoadMore={() =>
-                              setTaskQuery((current) => ({
-                                ...current,
-                                page: current.page + 1,
-                              }))
-                            }
-                            disabled={!selectedProjectId}
-                          />
-                        </FormControl>
-
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-
-                <div className="grid gap-4 md:grid-cols-[1fr_1fr_220px]">
-                  <FormField
-                    control={form.control}
-                    name="workDate"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{commonT('labels.workDate')}</FormLabel>
-                        <FormControl>
-                          <Input type="date" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="duration"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('sheet.fields.duration')}</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="number"
-                            min="0"
-                            step={unitValue === 'minutes' ? '5' : '0.25'}
-                            placeholder={t('sheet.placeholders.duration')}
-                            value={field.value ?? ''}
-                            onChange={(event) => {
-                              const nextValue = event.target.value;
-                              field.onChange(
-                                nextValue === '' ? undefined : Number(nextValue)
-                              );
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="unit"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('sheet.fields.unit')}</FormLabel>
-                        <FormControl>
-                          <ToggleGroup
-                            type="single"
-                            value={field.value}
-                            className="w-full"
-                            onValueChange={(value) => {
-                              if (value === 'hours' || value === 'minutes') {
-                                field.onChange(value);
-                              }
-                            }}
-                          >
-                            <ToggleGroupItem value="hours" className="flex-1">
-                              {t('sheet.fields.hours')}
-                            </ToggleGroupItem>
-                            <ToggleGroupItem value="minutes" className="flex-1">
-                              {t('sheet.fields.minutes')}
-                            </ToggleGroupItem>
-                          </ToggleGroup>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-
-                <FormField
-                  control={form.control}
-                  name="description"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{commonT('labels.description')}</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          {...field}
-                          rows={4}
-                          placeholder={t('sheet.placeholders.description')}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <div className="flex items-center justify-between rounded-lg border bg-background p-3">
-                  <div className="space-y-1 pr-3">
-                    <p className="text-sm font-medium text-foreground">
-                      {t('sheet.helper.keepContext')}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('sheet.helper.keepContextDescription')}
-                    </p>
-                  </div>
-
-                  <Switch
-                    checked={keepContextOnSave}
-                    onCheckedChange={setKeepContextOnSave}
-                    aria-label={t('sheet.helper.keepContext')}
-                  />
-                </div>
-              </div>
-
-              <FormActions
-                sheet
-                onCancel={closeCreateSheet}
-                cancelLabel={commonT('actions.cancel')}
-                submitType="submit"
-                submitLabel={
-                  isEditingEntry
-                    ? commonT('actions.save')
-                    : commonT('actions.submit')
-                }
-                submitDisabled={form.formState.isSubmitting}
-              />
-            </form>
-          </Form>
-        </SheetContent>
-      </Sheet>
-
-      <TimesheetTaskCreateSheet
-        open={isTaskCreateSheetOpen}
-        onOpenChange={setIsTaskCreateSheetOpen}
-        project={selectedProject}
-        onCreated={handleTaskCreated}
-      />
-
-      <Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
-          <SheetHeader>
-            <SheetTitle>{t('details.title')}</SheetTitle>
-            <SheetDescription>{t('details.description')}</SheetDescription>
-          </SheetHeader>
-
-          {selectedTimesheet ? (
-            <div className="mt-6 space-y-5 px-4 pb-8">
-              <div className="rounded-lg border bg-muted/20 p-4">
-                <div className="flex flex-wrap items-start justify-between gap-3">
-                  <div>
-                    <div className="text-lg font-semibold">
-                      {selectedTimesheet.collaboratorName}
-                    </div>
-                    <div className="mt-1 text-sm text-muted-foreground">
-                      {formatDate(selectedTimesheet.weekStartDate)}
-                    </div>
-                  </div>
-                  <StatusBadge
-                    label={
-                      t.has(`statuses.${selectedTimesheet.status}`)
-                        ? t(`statuses.${selectedTimesheet.status}`)
-                        : formatEnumLabel(selectedTimesheet.status)
-                    }
-                    className={getStatusBadgeClass(selectedTimesheet.status)}
-                  />
-                </div>
-              </div>
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.totalHours')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {formatHours(selectedTimesheet.totalHours)}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.entries')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {selectedTimesheet.entries?.length ?? 0}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.approver')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {selectedTimesheet.approverName ||
-                      commonT('labels.notAssigned')}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {t('details.period')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {formatDateLabel(selectedTimesheet.weekStartDate)}
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                <div className="text-xs font-medium uppercase text-muted-foreground">
-                  {commonT('labels.notes')}
-                </div>
-                <div className="mt-1 rounded-lg border p-3 text-sm">
-                  {selectedTimesheet.notes || commonT('labels.noNotes')}
-                </div>
-              </div>
-
-              <div>
-                <div className="text-xs font-medium uppercase text-muted-foreground">
-                  {commonT('labels.decisionNote')}
-                </div>
-                <div className="mt-1 rounded-lg border p-3 text-sm">
-                  {selectedTimesheet.decisionNote || commonT('labels.noNotes')}
-                </div>
-              </div>
-
-              <div>
-                <div className="text-xs font-medium uppercase text-muted-foreground">
-                  {t('details.entriesTitle')}
-                </div>
-                <div className="mt-2 space-y-3">
-                  {(selectedTimesheet.entries ?? []).length ? (
-                    (selectedTimesheet.entries ?? []).map((entry) => (
-                      <div key={entry.id} className="rounded-lg border p-3">
-                        <div className="flex flex-wrap items-start justify-between gap-3">
-                          <div>
-                            <div className="font-medium">
-                              {entry.taskName ||
-                                entry.activityLabel ||
-                                commonT('labels.unassigned')}
-                            </div>
-                            <div className="text-xs text-muted-foreground">
-                              {[entry.projectName, entry.roleLabel]
-                                .filter(Boolean)
-                                .join(' • ') || commonT('labels.unassigned')}
-                            </div>
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {formatEntryDuration(
-                              entry.durationMinutes,
-                              entry.hours
-                            )}
-                          </div>
-                        </div>
-                        <div className="mt-2 text-xs text-muted-foreground">
-                          {formatDateLabel(entry.workDate)}
-                        </div>
-                        <div className="mt-2 text-sm">
-                          {entry.description || commonT('labels.noNotes')}
-                        </div>
-                        {canManageRow(selectedTimesheet) ? (
-                          <div className="mt-3 flex justify-end gap-2 border-t border-border/60 pt-3">
-                            <Button
-                              type="button"
-                              variant="outline"
-                              size="sm"
-                              className="cursor-pointer"
-                              onClick={() => openEditEntry(entry)}
-                            >
-                              <Pencil className="size-4" />
-                              {commonT('actions.edit')}
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="outline"
-                              size="sm"
-                              className="cursor-pointer text-destructive hover:bg-destructive/10"
-                              onClick={() => setEntryToDelete(entry)}
-                            >
-                              <Trash2 className="size-4" />
-                              {commonT('actions.delete')}
-                            </Button>
-                          </div>
-                        ) : null}
-                      </div>
-                    ))
-                  ) : (
-                    <div className="rounded-lg border p-3 text-sm text-muted-foreground">
-                      {t('details.noEntries')}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          ) : null}
-        </SheetContent>
-      </Sheet>
-
-      <AlertDialog
-        open={Boolean(entryToDelete)}
-        onOpenChange={(open) => {
-          if (!open && !isDeletingEntry) {
-            setEntryToDelete(null);
-          }
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t('messages.confirmDeleteTitle')}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('messages.confirmDeleteDescription', {
-                name:
-                  entryToDelete?.taskName ||
-                  entryToDelete?.activityLabel ||
-                  entryToDelete?.projectName ||
-                  `#${entryToDelete?.id ?? ''}`,
-              })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeletingEntry}>
-              {commonT('actions.cancel')}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => void handleDeleteEntry()}
-              disabled={isDeletingEntry}
-            >
-              {isDeletingEntry ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : null}
-              {commonT('actions.delete')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Page>
-  );
-}