@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +1,1705 @@
+'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>
+  );
+}