@hed-hog/operations 0.0.322 → 0.0.325

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

@@ -0,0 +1,1141 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = OperationsTimesheetsPage;
+const entity_list_1 = require("@/components/entity-list");
+const alert_dialog_1 = require("@/components/ui/alert-dialog");
+const button_1 = require("@/components/ui/button");
+const form_1 = require("@/components/ui/form");
+const form_actions_1 = require("@/components/ui/form-actions");
+const input_1 = require("@/components/ui/input");
+const kpi_cards_grid_1 = require("@/components/ui/kpi-cards-grid");
+const sheet_1 = require("@/components/ui/sheet");
+const switch_1 = require("@/components/ui/switch");
+const table_1 = require("@/components/ui/table");
+const textarea_1 = require("@/components/ui/textarea");
+const toggle_group_1 = require("@/components/ui/toggle-group");
+const next_app_provider_1 = require("@hed-hog/next-app-provider");
+const zod_1 = require("@hookform/resolvers/zod");
+const lucide_react_1 = require("lucide-react");
+const next_intl_1 = require("next-intl");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const zod_2 = require("zod");
+const async_options_combobox_1 = require("../_components/async-options-combobox");
+const operations_calendar_view_1 = require("../_components/operations-calendar-view");
+const operations_header_1 = require("../_components/operations-header");
+const status_badge_1 = require("../_components/status-badge");
+const timesheet_task_create_sheet_1 = require("../_components/timesheet-task-create-sheet");
+const api_1 = require("../_lib/api");
+const use_operations_access_1 = require("../_lib/hooks/use-operations-access");
+const format_1 = require("../_lib/utils/format");
+const forms_1 = require("../_lib/utils/forms");
+const getTodayDate = () => {
+    const now = new Date();
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+};
+const buildDefaultFormValues = () => ({
+    projectId: undefined,
+    taskId: undefined,
+    workDate: getTodayDate(),
+    duration: undefined,
+    unit: 'hours',
+    description: '',
+});
+const positiveNumberField = (message) => zod_2.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;
+}, zod_2.z.number({ required_error: message }).positive(message));
+function appendUniqueById(current, next) {
+    const unique = new Map();
+    [...current, ...next].forEach((item) => {
+        unique.set(String(item.id), item);
+    });
+    return Array.from(unique.values());
+}
+function formatDateLabel(value) {
+    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, hours) {
+    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 (0, format_1.formatHours)(Number(hours !== null && hours !== void 0 ? hours : 0));
+}
+function buildFollowUpFormValues(current, keepContextOnSave) {
+    var _a;
+    if (!keepContextOnSave) {
+        return buildDefaultFormValues();
+    }
+    return {
+        projectId: current.projectId,
+        taskId: current.taskId,
+        workDate: current.workDate || getTodayDate(),
+        duration: 0,
+        unit: (_a = current.unit) !== null && _a !== void 0 ? _a : 'hours',
+        description: '',
+    };
+}
+function buildEntryFormValues(entry) {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+        projectId: (_a = entry.projectId) !== null && _a !== void 0 ? _a : undefined,
+        taskId: (_b = entry.taskId) !== null && _b !== void 0 ? _b : undefined,
+        workDate: (_d = (_c = String(entry.workDate).match(/(\d{4}-\d{2}-\d{2})/)) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '',
+        duration: typeof entry.durationMinutes === 'number' && entry.durationMinutes > 0
+            ? Number((entry.durationMinutes / 60).toFixed(2))
+            : Number((_e = entry.hours) !== null && _e !== void 0 ? _e : 0),
+        unit: 'hours',
+        description: (_f = entry.description) !== null && _f !== void 0 ? _f : '',
+    };
+}
+function OperationsTimesheetsPage() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const t = (0, next_intl_1.useTranslations)('operations.TimesheetsPage');
+    const commonT = (0, next_intl_1.useTranslations)('operations.Common');
+    const { request, showToastHandler, currentLocaleCode } = (0, next_app_provider_1.useApp)();
+    const access = (0, use_operations_access_1.useOperationsAccess)();
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [statusFilter, setStatusFilter] = (0, react_1.useState)('all');
+    const [dateFrom, setDateFrom] = (0, react_1.useState)('');
+    const [dateTo, setDateTo] = (0, react_1.useState)('');
+    const [calendarYear, setCalendarYear] = (0, react_1.useState)(() => new Date().getFullYear());
+    const [calendarMonth, setCalendarMonth] = (0, react_1.useState)(() => new Date().getMonth() + 1);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [pageSize, setPageSize] = (0, react_1.useState)(12);
+    const [viewMode, setViewMode] = (0, react_1.useState)(() => {
+        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] = (0, react_1.useState)(false);
+    const [isDetailsOpen, setIsDetailsOpen] = (0, react_1.useState)(false);
+    const [isTaskCreateSheetOpen, setIsTaskCreateSheetOpen] = (0, react_1.useState)(false);
+    const [keepContextOnSave, setKeepContextOnSave] = (0, react_1.useState)(true);
+    const [editingEntry, setEditingEntry] = (0, react_1.useState)(null);
+    const [entryToDelete, setEntryToDelete] = (0, react_1.useState)(null);
+    const [selectedTimesheet, setSelectedTimesheet] = (0, react_1.useState)(null);
+    const [isDeletingEntry, setIsDeletingEntry] = (0, react_1.useState)(false);
+    const [projectQuery, setProjectQuery] = (0, react_1.useState)({ search: '', page: 1 });
+    const [projectOptions, setProjectOptions] = (0, react_1.useState)([]);
+    const [taskQuery, setTaskQuery] = (0, react_1.useState)({ search: '', page: 1 });
+    const [taskRefreshKey, setTaskRefreshKey] = (0, react_1.useState)(0);
+    const [taskOptions, setTaskOptions] = (0, react_1.useState)([]);
+    const previousProjectIdRef = (0, react_1.useRef)(undefined);
+    const quickEntrySchema = (0, react_1.useMemo)(() => zod_2.z.object({
+        projectId: positiveNumberField(t('messages.selectProjectRequired')),
+        taskId: positiveNumberField(t('messages.selectTaskRequired')),
+        workDate: zod_2.z.string().min(1, t('messages.requiredFields')),
+        duration: positiveNumberField(t('messages.entryValidation')),
+        unit: zod_2.z.enum(['hours', 'minutes']),
+        description: zod_2.z
+            .string()
+            .trim()
+            .max(500, t('sheet.validation.descriptionMaxLength'))
+            .optional()
+            .or(zod_2.z.literal('')),
+    }), [t]);
+    const form = (0, react_hook_form_1.useForm)({
+        resolver: (0, zod_1.zodResolver)(quickEntrySchema),
+        defaultValues: buildDefaultFormValues(),
+    });
+    const selectedProjectId = (0, react_hook_form_1.useWatch)({
+        control: form.control,
+        name: 'projectId',
+    });
+    const selectedTaskId = (0, react_hook_form_1.useWatch)({
+        control: form.control,
+        name: 'taskId',
+    });
+    const unitValue = (0, react_hook_form_1.useWatch)({
+        control: form.control,
+        name: 'unit',
+    });
+    const { data: timesheetsResponse, refetch } = (0, next_app_provider_1.useQuery)({
+        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 (0, api_1.fetchOperations)(request, `/operations/timesheets?${params.toString()}`);
+        },
+        placeholderData: (previous) => previous,
+    });
+    const timesheets = (_a = timesheetsResponse === null || timesheetsResponse === void 0 ? void 0 : timesheetsResponse.data) !== null && _a !== void 0 ? _a : [];
+    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 } = (0, next_app_provider_1.useQuery)({
+        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 (0, api_1.fetchOperations)(request, `/operations/timesheets?${params.toString()}`);
+        },
+        placeholderData: (previous) => previous,
+    });
+    const calendarTimesheets = (0, react_1.useMemo)(() => { var _a; return (_a = calendarTimesheetsResponse === null || calendarTimesheetsResponse === void 0 ? void 0 : calendarTimesheetsResponse.data) !== null && _a !== void 0 ? _a : []; }, [calendarTimesheetsResponse]);
+    const getTimesheetStatusLabel = (0, react_1.useCallback)((status) => {
+        if (!status) {
+            return commonT('labels.notAvailable');
+        }
+        return t.has(`statuses.${status}`)
+            ? t(`statuses.${status}`)
+            : (0, format_1.formatEnumLabel)(status);
+    }, [commonT, t]);
+    const handleViewModeChange = (value) => {
+        if (value !== 'table' && value !== 'cards' && value !== 'calendar')
+            return;
+        setViewMode(value);
+        if (typeof window !== 'undefined') {
+            window.localStorage.setItem('operations-timesheets-view-mode', value);
+        }
+    };
+    const { data: me } = (0, next_app_provider_1.useQuery)({
+        queryKey: ['operations-timesheets-me', currentLocaleCode],
+        enabled: access.isCollaborator,
+        queryFn: () => (0, api_1.fetchOperations)(request, '/operations/collaborators/me'),
+    });
+    const { refetch: refetchRecentEntries } = (0, next_app_provider_1.useQuery)({
+        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 (0, api_1.fetchOperations)(request, `/operations/timesheet-entries?${params.toString()}`);
+        },
+        placeholderData: (previous) => previous,
+    });
+    const { data: projectOptionsResponse, isLoading: isProjectOptionsLoading, error: projectOptionsError, } = (0, next_app_provider_1.useQuery)({
+        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 (0, api_1.fetchOperations)(request, `/operations/projects/options?${params.toString()}`);
+        },
+        placeholderData: (previous) => previous,
+    });
+    const selectedProject = (_b = projectOptions.find((option) => option.id === selectedProjectId)) !== null && _b !== void 0 ? _b : null;
+    const { data: taskOptionsResponse, isLoading: isTaskOptionsLoading, error: taskOptionsError, } = (0, next_app_provider_1.useQuery)({
+        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 (0, api_1.fetchOperations)(request, `/operations/tasks?${params.toString()}`);
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        if (!projectOptionsResponse) {
+            return;
+        }
+        setProjectOptions((current) => {
+            var _a, _b, _c;
+            return projectQuery.page === 1
+                ? editingEntry
+                    ? appendUniqueById(current, (_a = projectOptionsResponse.data) !== null && _a !== void 0 ? _a : [])
+                    : ((_b = projectOptionsResponse.data) !== null && _b !== void 0 ? _b : [])
+                : appendUniqueById(current, (_c = projectOptionsResponse.data) !== null && _c !== void 0 ? _c : []);
+        });
+    }, [editingEntry, projectOptionsResponse, projectQuery.page]);
+    (0, react_1.useEffect)(() => {
+        if (!selectedProjectId) {
+            setTaskOptions([]);
+            return;
+        }
+        if (!taskOptionsResponse) {
+            return;
+        }
+        setTaskOptions((current) => {
+            var _a, _b, _c;
+            return taskQuery.page === 1
+                ? editingEntry
+                    ? appendUniqueById(current, ((_a = taskOptionsResponse.data) !== null && _a !== void 0 ? _a : []).filter((option) => option.projectId === selectedProjectId))
+                    : ((_b = taskOptionsResponse.data) !== null && _b !== void 0 ? _b : []).filter((option) => option.projectId === selectedProjectId)
+                : appendUniqueById(current, ((_c = taskOptionsResponse.data) !== null && _c !== void 0 ? _c : []).filter((option) => option.projectId === selectedProjectId));
+        });
+    }, [editingEntry, selectedProjectId, taskOptionsResponse, taskQuery.page]);
+    (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        if (!projectOptionsError) {
+            return;
+        }
+        showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', (0, api_1.getOperationsErrorMessage)(projectOptionsError, t('messages.projectLoadError')));
+    }, [projectOptionsError, showToastHandler, t]);
+    (0, react_1.useEffect)(() => {
+        if (!taskOptionsError) {
+            return;
+        }
+        showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', (0, api_1.getOperationsErrorMessage)(taskOptionsError, t('messages.taskLoadError')));
+    }, [showToastHandler, t, taskOptionsError]);
+    const filteredTaskOptions = selectedProjectId
+        ? taskOptions.filter((option) => option.projectId === selectedProjectId)
+        : [];
+    const selectedTask = (_c = filteredTaskOptions.find((option) => option.id === selectedTaskId)) !== null && _c !== void 0 ? _c : null;
+    const isEditingEntry = Boolean(editingEntry);
+    const filteredRows = timesheets;
+    const calendarItems = (0, react_1.useMemo)(() => calendarTimesheets.map((timesheet) => {
+        var _a, _b, _c, _d, _e;
+        return ({
+            id: `timesheet-${timesheet.id}`,
+            date: (_b = (_a = String(timesheet.weekStartDate).match(/(\d{4}-\d{2}-\d{2})/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : timesheet.weekStartDate,
+            kind: 'timesheet',
+            title: `${(0, format_1.formatHours)(timesheet.totalHours)} • ${timesheet.collaboratorName}`,
+            subtitle: ((_c = timesheet.entries) !== null && _c !== void 0 ? _c : [])
+                .slice(0, 2)
+                .map((entry) => [entry.projectName, entry.taskName || entry.activityLabel]
+                .filter(Boolean)
+                .join(' • ') || commonT('labels.unassigned'))
+                .join(', ') || commonT('labels.unassigned'),
+            meta: `${(_e = (_d = timesheet.entries) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0} ${commonT('labels.lines')}`,
+            statusLabel: getTimesheetStatusLabel(timesheet.status),
+            badgeClassName: (0, format_1.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: (0, format_1.formatHours)(timesheets.reduce((total, item) => { var _a; return total + Number((_a = item.totalHours) !== null && _a !== void 0 ? _a : 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) => {
+        setSelectedTimesheet(timesheet);
+        setIsDetailsOpen(true);
+    };
+    const openEditEntry = (entry) => {
+        setEditingEntry(entry);
+        form.reset(buildEntryFormValues(entry));
+        setProjectQuery({ search: '', page: 1 });
+        setTaskQuery({ search: '', page: 1 });
+        setProjectOptions((current) => {
+            var _a;
+            return 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: (_a = entry.status) !== null && _a !== void 0 ? _a : 'submitted',
+                    },
+                ]
+                : []);
+        });
+        setTaskOptions((current) => {
+            var _a, _b;
+            return 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: (_a = entry.status) !== null && _a !== void 0 ? _a : 'submitted',
+                        projectId: entry.projectId,
+                        projectAssignmentId: (_b = entry.projectAssignmentId) !== null && _b !== void 0 ? _b : 0,
+                        projectName: entry.projectName || commonT('labels.unassigned'),
+                    },
+                ]
+                : []);
+        });
+        setEntryToDelete(null);
+        setIsDetailsOpen(false);
+        setIsTaskCreateSheetOpen(false);
+        setIsSheetOpen(true);
+    };
+    const openTimesheetForDate = (date) => {
+        var _a;
+        const existingTimesheet = (_a = calendarTimesheets.find((item) => item.weekStartDate === date)) !== null && _a !== void 0 ? _a : timesheets.find((item) => item.weekStartDate === date);
+        if (existingTimesheet) {
+            openDetails(existingTimesheet);
+            return;
+        }
+        setEditingEntry(null);
+        form.reset(Object.assign(Object.assign({}, buildDefaultFormValues()), { workDate: date }));
+        setProjectQuery({ search: '', page: 1 });
+        setTaskQuery({ search: '', page: 1 });
+        setProjectOptions([]);
+        setTaskOptions([]);
+        setIsTaskCreateSheetOpen(false);
+        setIsSheetOpen(true);
+    };
+    const canManageRow = (timesheet) => {
+        return Boolean((me === null || me === void 0 ? void 0 : me.id) &&
+            timesheet.collaboratorId === me.id &&
+            timesheet.status !== 'approved');
+    };
+    const canSubmitTimesheet = (timesheet) => {
+        return Boolean((me === null || me === void 0 ? void 0 : me.id) &&
+            timesheet.collaboratorId === me.id &&
+            ['draft', 'rejected'].includes(timesheet.status));
+    };
+    const handleQuickEntrySubmit = async (values) => {
+        const payload = {
+            projectId: values.projectId,
+            taskId: values.taskId,
+            workDate: values.workDate,
+            duration: values.duration,
+            unit: values.unit,
+            description: (0, forms_1.trimToNull)(values.description),
+        };
+        try {
+            if (editingEntry === null || editingEntry === void 0 ? void 0 : editingEntry.id) {
+                await (0, api_1.mutateOperations)(request, `/operations/timesheet-entries/${editingEntry.id}`, 'PATCH', payload);
+            }
+            else {
+                await (0, api_1.mutateOperations)(request, '/operations/timesheet-entries', 'POST', payload);
+            }
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : 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 === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', (0, api_1.getOperationsErrorMessage)(error, editingEntry ? t('messages.updateError') : t('messages.saveError')));
+        }
+    };
+    const submitTimesheet = async (timesheetId) => {
+        try {
+            await request({
+                url: `/operations/timesheets/${timesheetId}/submit`,
+                method: 'POST',
+            });
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('success', t('messages.submitSuccess'));
+            await Promise.all([refetch(), refetchRecentEntries()]);
+        }
+        catch (error) {
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', (0, api_1.getOperationsErrorMessage)(error, t('messages.submitError')));
+        }
+    };
+    const openTaskCreateSheet = () => {
+        if (!selectedProjectId || !selectedProject) {
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', t('messages.selectProjectFirst'));
+            return;
+        }
+        setIsTaskCreateSheetOpen(true);
+    };
+    const handleTaskCreated = (task) => {
+        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 === null || entryToDelete === void 0 ? void 0 : entryToDelete.id)) {
+            return;
+        }
+        try {
+            setIsDeletingEntry(true);
+            await (0, api_1.mutateOperations)(request, `/operations/timesheet-entries/${entryToDelete.id}`, 'DELETE');
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('success', t('messages.deleteSuccess'));
+            setEntryToDelete(null);
+            await Promise.all([refetch(), refetchRecentEntries()]);
+        }
+        catch (error) {
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', (0, api_1.getOperationsErrorMessage)(error, t('messages.deleteError')));
+        }
+        finally {
+            setIsDeletingEntry(false);
+        }
+    };
+    return (<entity_list_1.Page>
+      <operations_header_1.OperationsHeader title={t('title')} description={t('description')} current={t('breadcrumb')} actions={access.isCollaborator ? (<button_1.Button size="sm" onClick={openCreate}>
+              <lucide_react_1.Plus className="size-4"/>
+              {commonT('actions.create')}
+            </button_1.Button>) : undefined}/>
+
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <entity_list_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>
+          <toggle_group_1.ToggleGroup type="single" value={viewMode} onValueChange={handleViewModeChange} variant="outline" size="sm">
+            <toggle_group_1.ToggleGroupItem value="table" className="gap-1.5 px-2.5">
+              <lucide_react_1.List className="h-4 w-4"/>
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </toggle_group_1.ToggleGroupItem>
+            <toggle_group_1.ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
+              <lucide_react_1.LayoutGrid className="h-4 w-4"/>
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </toggle_group_1.ToggleGroupItem>
+            <toggle_group_1.ToggleGroupItem value="calendar" className="gap-1.5 px-2.5">
+              <lucide_react_1.CalendarDays className="h-4 w-4"/>
+              <span className="hidden sm:inline">{t('viewModeCalendar')}</span>
+            </toggle_group_1.ToggleGroupItem>
+          </toggle_group_1.ToggleGroup>
+        </div>
+      </div>
+
+      <kpi_cards_grid_1.KpiCardsGrid items={cards} columns={3}/>
+
+      {(viewMode === 'calendar' ? true : timesheets.length > 0) ? (viewMode === 'calendar' ? (<operations_calendar_view_1.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) => {
+                var _a, _b;
+                return (<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">
+                      {(0, format_1.formatDate)(timesheet.weekStartDate)}
+                    </div>
+                  </div>
+                  <status_badge_1.StatusBadge label={getTimesheetStatusLabel(timesheet.status)} className={(0, format_1.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>{' '}
+                    {(0, format_1.formatHours)(timesheet.totalHours)}
+                  </div>
+                  <div>
+                    <span className="font-medium text-foreground">
+                      {commonT('labels.entries')}:
+                    </span>{' '}
+                    {(_b = (_a = timesheet.entries) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 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_1.Button variant="outline" size="sm" className="cursor-pointer" onClick={() => openDetails(timesheet)}>
+                      <lucide_react_1.Eye className="size-4"/>
+                      {t('actions.viewDetails')}
+                    </button_1.Button>
+                    {canSubmitTimesheet(timesheet) ? (<button_1.Button size="sm" onClick={() => void submitTimesheet(timesheet.id)}>
+                        <lucide_react_1.Send className="size-4"/>
+                        {commonT('actions.submit')}
+                      </button_1.Button>) : null}
+                  </div>) : (<div className="flex justify-end border-t border-border/60 pt-3">
+                    <button_1.Button variant="outline" size="sm" className="cursor-pointer" onClick={() => openDetails(timesheet)}>
+                      <lucide_react_1.Eye className="size-4"/>
+                      {t('actions.viewDetails')}
+                    </button_1.Button>
+                  </div>)}
+              </div>);
+            })}
+          </div>) : (<div className="overflow-x-auto rounded-md border">
+            <table_1.Table>
+              <table_1.TableHeader>
+                <table_1.TableRow>
+                  <table_1.TableHead>{commonT('labels.collaborator')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.workDate')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.entries')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.totalHours')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.approver')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.decisionNote')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.status')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.actions')}</table_1.TableHead>
+                </table_1.TableRow>
+              </table_1.TableHeader>
+              <table_1.TableBody>
+                {filteredRows.map((timesheet) => {
+                var _a, _b, _c;
+                return (<table_1.TableRow key={timesheet.id} className="hover:bg-muted/30">
+                    <table_1.TableCell>
+                      <div className="font-medium">
+                        {timesheet.collaboratorName}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {timesheet.notes || commonT('labels.noNotes')}
+                      </div>
+                    </table_1.TableCell>
+                    <table_1.TableCell>{(0, format_1.formatDate)(timesheet.weekStartDate)}</table_1.TableCell>
+                    <table_1.TableCell>
+                      <div className="font-medium">
+                        {(_b = (_a = timesheet.entries) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0}{' '}
+                        {commonT('labels.lines')}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {((_c = timesheet.entries) !== null && _c !== void 0 ? _c : [])
+                        .slice(0, 2)
+                        .map((entry) => [
+                        entry.projectName,
+                        entry.taskName || entry.activityLabel,
+                    ]
+                        .filter(Boolean)
+                        .join(' • ') || commonT('labels.unassigned'))
+                        .join(', ') || commonT('labels.unassigned')}
+                      </div>
+                    </table_1.TableCell>
+                    <table_1.TableCell>{(0, format_1.formatHours)(timesheet.totalHours)}</table_1.TableCell>
+                    <table_1.TableCell>
+                      {timesheet.approverName || commonT('labels.notAssigned')}
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <div className="text-sm text-muted-foreground">
+                        {timesheet.decisionNote || commonT('labels.noNotes')}
+                      </div>
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <status_badge_1.StatusBadge label={getTimesheetStatusLabel(timesheet.status)} className={(0, format_1.getStatusBadgeClass)(timesheet.status)}/>
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <div className="flex justify-end gap-2">
+                        {canManageRow(timesheet) ? (<>
+                            <button_1.Button variant="outline" size="sm" className="cursor-pointer" onClick={() => openDetails(timesheet)}>
+                              <lucide_react_1.Eye className="size-4"/>
+                              {t('actions.viewDetails')}
+                            </button_1.Button>
+                            {canSubmitTimesheet(timesheet) ? (<button_1.Button size="icon" onClick={() => void submitTimesheet(timesheet.id)}>
+                                <lucide_react_1.Send className="size-4"/>
+                              </button_1.Button>) : null}
+                          </>) : (<button_1.Button variant="outline" size="sm" className="cursor-pointer" onClick={() => openDetails(timesheet)}>
+                            <lucide_react_1.Eye className="size-4"/>
+                            {t('actions.viewDetails')}
+                          </button_1.Button>)}
+                      </div>
+                    </table_1.TableCell>
+                  </table_1.TableRow>);
+            })}
+              </table_1.TableBody>
+            </table_1.Table>
+          </div>)) : (<entity_list_1.EmptyState icon={<lucide_react_1.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()}/>)}
+
+      <entity_list_1.PaginationFooter currentPage={page} pageSize={pageSize} totalItems={(_d = timesheetsResponse === null || timesheetsResponse === void 0 ? void 0 : timesheetsResponse.total) !== null && _d !== void 0 ? _d : 0} pageSizeOptions={[12, 24, 48]} onPageChange={setPage} onPageSizeChange={(size) => {
+            setPageSize(size);
+            setPage(1);
+        }}/>
+
+      <sheet_1.Sheet open={isSheetOpen} onOpenChange={(open) => {
+            if (form.formState.isSubmitting && !open) {
+                return;
+            }
+            if (!open) {
+                closeCreateSheet();
+                return;
+            }
+            setIsSheetOpen(true);
+        }}>
+        <sheet_1.SheetContent className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl">
+          <sheet_1.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">
+                <lucide_react_1.Clock3 className="size-5"/>
+              </div>
+
+              <div className="space-y-1">
+                <sheet_1.SheetTitle>
+                  {isEditingEntry
+            ? t('sheet.editTitle')
+            : t('sheet.createTitle')}
+                </sheet_1.SheetTitle>
+                <sheet_1.SheetDescription>{t('sheet.description')}</sheet_1.SheetDescription>
+              </div>
+            </div>
+          </sheet_1.SheetHeader>
+
+          <form_1.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">
+                  <form_1.FormField control={form.control} name="projectId" render={({ field }) => (<form_1.FormItem>
+                        <form_1.FormLabel>{t('sheet.fields.project')}</form_1.FormLabel>
+                        <form_1.FormControl>
+                          <async_options_combobox_1.AsyncOptionsCombobox value={field.value} selectedOption={selectedProject} options={projectOptions} onSelect={(option) => {
+                field.onChange(option === null || option === void 0 ? void 0 : 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 === null || projectOptionsResponse === void 0 ? void 0 : projectOptionsResponse.next)} onLoadMore={() => setProjectQuery((current) => (Object.assign(Object.assign({}, current), { page: current.page + 1 })))}/>
+                        </form_1.FormControl>
+                        <form_1.FormMessage />
+                      </form_1.FormItem>)}/>
+
+                  <form_1.FormField control={form.control} name="taskId" render={({ field }) => (<form_1.FormItem>
+                        <form_1.FormLabel>{t('sheet.fields.task')}</form_1.FormLabel>
+                        <form_1.FormControl>
+                          <async_options_combobox_1.AsyncOptionsCombobox value={field.value} selectedOption={selectedTask} options={filteredTaskOptions} onSelect={(option) => field.onChange(option === null || option === void 0 ? void 0 : 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 === null || taskOptionsResponse === void 0 ? void 0 : taskOptionsResponse.next)} onLoadMore={() => setTaskQuery((current) => (Object.assign(Object.assign({}, current), { page: current.page + 1 })))} disabled={!selectedProjectId}/>
+                        </form_1.FormControl>
+
+                        <form_1.FormMessage />
+                      </form_1.FormItem>)}/>
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-[1fr_1fr_220px]">
+                  <form_1.FormField control={form.control} name="workDate" render={({ field }) => (<form_1.FormItem>
+                        <form_1.FormLabel>{commonT('labels.workDate')}</form_1.FormLabel>
+                        <form_1.FormControl>
+                          <input_1.Input type="date" {...field}/>
+                        </form_1.FormControl>
+                        <form_1.FormMessage />
+                      </form_1.FormItem>)}/>
+
+                  <form_1.FormField control={form.control} name="duration" render={({ field }) => {
+            var _a;
+            return (<form_1.FormItem>
+                        <form_1.FormLabel>{t('sheet.fields.duration')}</form_1.FormLabel>
+                        <form_1.FormControl>
+                          <input_1.Input type="number" min="0" step={unitValue === 'minutes' ? '5' : '0.25'} placeholder={t('sheet.placeholders.duration')} value={(_a = field.value) !== null && _a !== void 0 ? _a : ''} onChange={(event) => {
+                    const nextValue = event.target.value;
+                    field.onChange(nextValue === '' ? undefined : Number(nextValue));
+                }}/>
+                        </form_1.FormControl>
+                        <form_1.FormMessage />
+                      </form_1.FormItem>);
+        }}/>
+
+                  <form_1.FormField control={form.control} name="unit" render={({ field }) => (<form_1.FormItem>
+                        <form_1.FormLabel>{t('sheet.fields.unit')}</form_1.FormLabel>
+                        <form_1.FormControl>
+                          <toggle_group_1.ToggleGroup type="single" value={field.value} className="w-full" onValueChange={(value) => {
+                if (value === 'hours' || value === 'minutes') {
+                    field.onChange(value);
+                }
+            }}>
+                            <toggle_group_1.ToggleGroupItem value="hours" className="flex-1">
+                              {t('sheet.fields.hours')}
+                            </toggle_group_1.ToggleGroupItem>
+                            <toggle_group_1.ToggleGroupItem value="minutes" className="flex-1">
+                              {t('sheet.fields.minutes')}
+                            </toggle_group_1.ToggleGroupItem>
+                          </toggle_group_1.ToggleGroup>
+                        </form_1.FormControl>
+                        <form_1.FormMessage />
+                      </form_1.FormItem>)}/>
+                </div>
+
+                <form_1.FormField control={form.control} name="description" render={({ field }) => (<form_1.FormItem>
+                      <form_1.FormLabel>{commonT('labels.description')}</form_1.FormLabel>
+                      <form_1.FormControl>
+                        <textarea_1.Textarea {...field} rows={4} placeholder={t('sheet.placeholders.description')}/>
+                      </form_1.FormControl>
+                      <form_1.FormMessage />
+                    </form_1.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_1.Switch checked={keepContextOnSave} onCheckedChange={setKeepContextOnSave} aria-label={t('sheet.helper.keepContext')}/>
+                </div>
+              </div>
+
+              <form_actions_1.FormActions sheet onCancel={closeCreateSheet} cancelLabel={commonT('actions.cancel')} submitType="submit" submitLabel={isEditingEntry
+            ? commonT('actions.save')
+            : commonT('actions.submit')} submitDisabled={form.formState.isSubmitting}/>
+            </form>
+          </form_1.Form>
+        </sheet_1.SheetContent>
+      </sheet_1.Sheet>
+
+      <timesheet_task_create_sheet_1.TimesheetTaskCreateSheet open={isTaskCreateSheetOpen} onOpenChange={setIsTaskCreateSheetOpen} project={selectedProject} onCreated={handleTaskCreated}/>
+
+      <sheet_1.Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
+        <sheet_1.SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+          <sheet_1.SheetHeader>
+            <sheet_1.SheetTitle>{t('details.title')}</sheet_1.SheetTitle>
+            <sheet_1.SheetDescription>{t('details.description')}</sheet_1.SheetDescription>
+          </sheet_1.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">
+                      {(0, format_1.formatDate)(selectedTimesheet.weekStartDate)}
+                    </div>
+                  </div>
+                  <status_badge_1.StatusBadge label={t.has(`statuses.${selectedTimesheet.status}`)
+                ? t(`statuses.${selectedTimesheet.status}`)
+                : (0, format_1.formatEnumLabel)(selectedTimesheet.status)} className={(0, format_1.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">
+                    {(0, format_1.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">
+                    {(_f = (_e = selectedTimesheet.entries) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 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">
+                  {((_g = selectedTimesheet.entries) !== null && _g !== void 0 ? _g : []).length ? (((_h = selectedTimesheet.entries) !== null && _h !== void 0 ? _h : []).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_1.Button type="button" variant="outline" size="sm" className="cursor-pointer" onClick={() => openEditEntry(entry)}>
+                              <lucide_react_1.Pencil className="size-4"/>
+                              {commonT('actions.edit')}
+                            </button_1.Button>
+                            <button_1.Button type="button" variant="outline" size="sm" className="cursor-pointer text-destructive hover:bg-destructive/10" onClick={() => setEntryToDelete(entry)}>
+                              <lucide_react_1.Trash2 className="size-4"/>
+                              {commonT('actions.delete')}
+                            </button_1.Button>
+                          </div>) : null}
+                      </div>))) : (<div className="rounded-lg border p-3 text-sm text-muted-foreground">
+                      {t('details.noEntries')}
+                    </div>)}
+                </div>
+              </div>
+            </div>) : null}
+        </sheet_1.SheetContent>
+      </sheet_1.Sheet>
+
+      <alert_dialog_1.AlertDialog open={Boolean(entryToDelete)} onOpenChange={(open) => {
+            if (!open && !isDeletingEntry) {
+                setEntryToDelete(null);
+            }
+        }}>
+        <alert_dialog_1.AlertDialogContent>
+          <alert_dialog_1.AlertDialogHeader>
+            <alert_dialog_1.AlertDialogTitle>
+              {t('messages.confirmDeleteTitle')}
+            </alert_dialog_1.AlertDialogTitle>
+            <alert_dialog_1.AlertDialogDescription>
+              {t('messages.confirmDeleteDescription', {
+            name: (entryToDelete === null || entryToDelete === void 0 ? void 0 : entryToDelete.taskName) ||
+                (entryToDelete === null || entryToDelete === void 0 ? void 0 : entryToDelete.activityLabel) ||
+                (entryToDelete === null || entryToDelete === void 0 ? void 0 : entryToDelete.projectName) ||
+                `#${(_j = entryToDelete === null || entryToDelete === void 0 ? void 0 : entryToDelete.id) !== null && _j !== void 0 ? _j : ''}`,
+        })}
+            </alert_dialog_1.AlertDialogDescription>
+          </alert_dialog_1.AlertDialogHeader>
+
+          <alert_dialog_1.AlertDialogFooter>
+            <alert_dialog_1.AlertDialogCancel disabled={isDeletingEntry}>
+              {commonT('actions.cancel')}
+            </alert_dialog_1.AlertDialogCancel>
+            <alert_dialog_1.AlertDialogAction onClick={() => void handleDeleteEntry()} disabled={isDeletingEntry}>
+              {isDeletingEntry ? (<lucide_react_1.Loader2 className="size-4 animate-spin"/>) : null}
+              {commonT('actions.delete')}
+            </alert_dialog_1.AlertDialogAction>
+          </alert_dialog_1.AlertDialogFooter>
+        </alert_dialog_1.AlertDialogContent>
+      </alert_dialog_1.AlertDialog>
+    </entity_list_1.Page>);
+}
+//# sourceMappingURL=page.js.map