@hed-hog/operations 0.0.327 → 0.0.329

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

@@ -1,954 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = OperationsApprovalsPage;
-const entity_list_1 = require("@/components/entity-list");
-const button_1 = require("@/components/ui/button");
-const card_1 = require("@/components/ui/card");
-const dialog_1 = require("@/components/ui/dialog");
-const kpi_cards_grid_1 = require("@/components/ui/kpi-cards-grid");
-const sheet_1 = require("@/components/ui/sheet");
-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 lucide_react_1 = require("lucide-react");
-const next_intl_1 = require("next-intl");
-const react_1 = require("react");
-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 api_1 = require("../_lib/api");
-const use_operations_access_1 = require("../_lib/hooks/use-operations-access");
-const format_1 = require("../_lib/utils/format");
-const WEEKDAY_ORDER = [
-    'monday',
-    'tuesday',
-    'wednesday',
-    'thursday',
-    'friday',
-    'saturday',
-    'sunday',
-];
-function formatTimeValue(t) {
-    var _a, _b;
-    if (t.includes('T'))
-        return (_b = (_a = t.split('T')[1]) === null || _a === void 0 ? void 0 : _a.slice(0, 5)) !== null && _b !== void 0 ? _b : '--:--';
-    return t.slice(0, 5);
-}
-function groupScheduleLines(days, locale) {
-    var _a;
-    if (!days.length)
-        return [];
-    const sorted = [...days].sort((a, b) => WEEKDAY_ORDER.indexOf(a.weekday.toLowerCase()) -
-        WEEKDAY_ORDER.indexOf(b.weekday.toLowerCase()));
-    const dayAbbr = (weekday) => (0, format_1.formatWeekdayLabel)(weekday, locale).slice(0, 3);
-    const groups = [];
-    for (const day of sorted) {
-        const time = day.isWorkingDay && day.startTime && day.endTime
-            ? `${formatTimeValue(day.startTime)}–${formatTimeValue(day.endTime)}`
-            : null;
-        const breakMin = day.isWorkingDay ? ((_a = day.breakMinutes) !== null && _a !== void 0 ? _a : null) : null;
-        const isOff = !day.isWorkingDay;
-        const last = groups[groups.length - 1];
-        if (last &&
-            last.isOff === isOff &&
-            last.time === time &&
-            last.break === breakMin) {
-            last.days.push(dayAbbr(day.weekday));
-        }
-        else {
-            groups.push({
-                days: [dayAbbr(day.weekday)],
-                time,
-                break: breakMin,
-                isOff,
-            });
-        }
-    }
-    return groups.map((g) => ({
-        dayLabel: g.days.length > 1
-            ? `${g.days[0]}–${g.days[g.days.length - 1]}`
-            : g.days[0],
-        time: g.time,
-        break: g.break,
-        isOff: g.isOff,
-    }));
-}
-function SchedulePanel({ days, locale, emptyLabel, }) {
-    const lines = groupScheduleLines(days, locale);
-    if (!lines.length)
-        return <p className="text-xs text-muted-foreground">{emptyLabel}</p>;
-    return (<div className="space-y-1">
-      {lines.map((line, i) => (<div key={i} className="flex items-center gap-2 text-xs">
-          <span className={`inline-block size-2 shrink-0 rounded-full ${line.isOff ? 'bg-muted-foreground/30' : 'bg-emerald-500'}`}/>
-          <span className="w-16 shrink-0 font-medium text-foreground">
-            {line.dayLabel}
-          </span>
-          {line.isOff ? (<span className="text-muted-foreground">Folga</span>) : (<span className="text-foreground">
-              {line.time}
-              {line.break ? (<span className="ml-1 text-muted-foreground">
-                  ({line.break}min int.)
-                </span>) : null}
-            </span>)}
-        </div>))}
-    </div>);
-}
-function formatDateLabel(value) {
-    if (!value)
-        return '—';
-    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 h = Math.floor(minutes / 60);
-        const m = minutes % 60;
-        if (!h)
-            return `${m}m`;
-        if (!m)
-            return `${h}h`;
-        return `${h}h ${m}m`;
-    }
-    return (0, format_1.formatHours)(Number(hours !== null && hours !== void 0 ? hours : 0));
-}
-function OperationsApprovalsPage() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const t = (0, next_intl_1.useTranslations)('operations.ApprovalsPage');
-    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 [targetFilter, setTargetFilter] = (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-approvals-view-mode');
-        return saved === 'cards' || saved === 'calendar' ? saved : 'table';
-    });
-    const [decisionNote, setDecisionNote] = (0, react_1.useState)('');
-    const [pendingDecision, setPendingDecision] = (0, react_1.useState)(null);
-    const [selectedApproval, setSelectedApproval] = (0, react_1.useState)(null);
-    const [isDetailsOpen, setIsDetailsOpen] = (0, react_1.useState)(false);
-    const [isDetailLoading, setIsDetailLoading] = (0, react_1.useState)(false);
-    const getStatusLabel = (value) => {
-        if (!value) {
-            return '-';
-        }
-        const key = `options.statuses.${value}`;
-        return t.has(key) ? t(key) : (0, format_1.formatEnumLabel)(value);
-    };
-    const getTargetTypeLabel = (value) => {
-        if (!value) {
-            return '-';
-        }
-        const key = `options.targetTypes.${value}`;
-        return t.has(key) ? t(key) : (0, format_1.formatEnumLabel)(value);
-    };
-    const getTimeOffTypeLabel = (value) => {
-        if (!value) {
-            return '-';
-        }
-        const key = `options.timeOffTypes.${value}`;
-        return t.has(key) ? t(key) : (0, format_1.formatEnumLabel)(value);
-    };
-    const getScheduleScopeLabel = (value) => {
-        if (!value) {
-            return '-';
-        }
-        const key = `options.scheduleScopes.${value}`;
-        return t.has(key) ? t(key) : (0, format_1.formatEnumLabel)(value);
-    };
-    const getTypeColorClass = (targetType) => {
-        switch (targetType) {
-            case 'timesheet':
-                return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400';
-            case 'time_off_request':
-                return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400';
-            case 'schedule_adjustment_request':
-                return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400';
-            default:
-                return 'bg-muted text-muted-foreground';
-        }
-    };
-    const getTypeIcon = (targetType) => {
-        switch (targetType) {
-            case 'timesheet':
-                return <lucide_react_1.Clock className="size-3"/>;
-            case 'time_off_request':
-                return <lucide_react_1.CalendarOff className="size-3"/>;
-            case 'schedule_adjustment_request':
-                return <lucide_react_1.SlidersHorizontal className="size-3"/>;
-            default:
-                return null;
-        }
-    };
-    const getTargetLabel = (approval) => {
-        switch (approval.targetType) {
-            case 'timesheet':
-                return `${getTargetTypeLabel('timesheet')} ${(0, format_1.formatDate)(approval.timesheetWeekStartDate)}`;
-            case 'time_off_request':
-                return `${getTimeOffTypeLabel(approval.timeOffType)} ${(0, format_1.formatDate)(approval.timeOffStartDate)}`;
-            case 'schedule_adjustment_request':
-                return `${getScheduleScopeLabel(approval.scheduleRequestScope)} ${(0, format_1.formatDate)(approval.scheduleStartDate)}`;
-            default:
-                return getTargetTypeLabel(approval.targetType);
-        }
-    };
-    const { data: approvalsResponse, refetch } = (0, next_app_provider_1.useQuery)({
-        queryKey: [
-            'operations-approvals',
-            currentLocaleCode,
-            search,
-            statusFilter,
-            targetFilter,
-            dateFrom,
-            dateTo,
-            page,
-            pageSize,
-        ],
-        enabled: access.isSupervisor,
-        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 (targetFilter !== 'all')
-                params.set('targetType', targetFilter);
-            if (dateFrom)
-                params.set('dateFrom', dateFrom);
-            if (dateTo)
-                params.set('dateTo', dateTo);
-            return (0, api_1.fetchOperations)(request, `/operations/approvals?${params.toString()}`);
-        },
-        placeholderData: (previous) => previous,
-    });
-    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: calendarApprovalsResponse } = (0, next_app_provider_1.useQuery)({
-        queryKey: [
-            'operations-approvals-calendar',
-            currentLocaleCode,
-            search,
-            statusFilter,
-            calendarYear,
-            calendarMonth,
-        ],
-        enabled: access.isSupervisor && viewMode === 'calendar',
-        queryFn: () => {
-            const params = new URLSearchParams({
-                sortField: 'submittedAt',
-                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/approvals?${params.toString()}`);
-        },
-        placeholderData: (previous) => previous,
-    });
-    const approvals = (_a = approvalsResponse === null || approvalsResponse === void 0 ? void 0 : approvalsResponse.data) !== null && _a !== void 0 ? _a : [];
-    const calendarApprovals = (_b = calendarApprovalsResponse === null || calendarApprovalsResponse === void 0 ? void 0 : calendarApprovalsResponse.data) !== null && _b !== void 0 ? _b : [];
-    const buildCalendarItem = (approval) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return ({
-            id: `approval-${approval.id}`,
-            date: approval.targetType === 'timesheet'
-                ? ((_b = String((_a = approval.timesheetWeekStartDate) !== null && _a !== void 0 ? _a : '').match(/(\d{4}-\d{2}-\d{2})/)) === null || _b === void 0 ? void 0 : _b[1]) ||
-                    ((_c = approval.submittedAt) === null || _c === void 0 ? void 0 : _c.slice(0, 10)) ||
-                    ''
-                : approval.targetType === 'time_off_request'
-                    ? ((_e = String((_d = approval.timeOffStartDate) !== null && _d !== void 0 ? _d : '').match(/(\d{4}-\d{2}-\d{2})/)) === null || _e === void 0 ? void 0 : _e[1]) ||
-                        ((_f = approval.submittedAt) === null || _f === void 0 ? void 0 : _f.slice(0, 10)) ||
-                        ''
-                    : ((_h = String((_g = approval.scheduleStartDate) !== null && _g !== void 0 ? _g : '').match(/(\d{4}-\d{2}-\d{2})/)) === null || _h === void 0 ? void 0 : _h[1]) ||
-                        ((_j = approval.submittedAt) === null || _j === void 0 ? void 0 : _j.slice(0, 10)) ||
-                        '',
-            title: approval.requesterName,
-            subtitle: getTargetLabel(approval),
-            kind: approval.targetType,
-            meta: approval.status === 'pending'
-                ? (0, format_1.formatDateTime)(approval.submittedAt)
-                : (0, format_1.formatDateTime)(approval.decidedAt),
-            statusLabel: getStatusLabel(approval.status),
-            badgeClassName: (0, format_1.getStatusBadgeClass)(approval.status),
-        });
-    };
-    const calendarItems = (0, react_1.useMemo)(() => (viewMode === 'calendar' ? calendarApprovals : approvals).map(buildCalendarItem), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [approvals, calendarApprovals, viewMode]);
-    const calendarApprovalById = (0, react_1.useMemo)(() => new Map(calendarApprovals.map((a) => [`approval-${a.id}`, a])), [calendarApprovals]);
-    const handleViewModeChange = (value) => {
-        if (value !== 'table' && value !== 'cards' && value !== 'calendar')
-            return;
-        setViewMode(value);
-        if (typeof window !== 'undefined') {
-            window.localStorage.setItem('operations-approvals-view-mode', value);
-        }
-    };
-    const cards = [
-        {
-            key: 'pending',
-            title: t('cards.pending'),
-            description: t('cards.pendingDescription'),
-            value: approvals.filter((item) => item.status === 'pending').length,
-        },
-        {
-            key: 'approved',
-            title: t('cards.approved'),
-            description: t('cards.approvedDescription'),
-            value: approvals.filter((item) => item.status === 'approved').length,
-        },
-        {
-            key: 'rejected',
-            title: t('cards.rejected'),
-            description: t('cards.rejectedDescription'),
-            value: approvals.filter((item) => item.status === 'rejected').length,
-        },
-    ];
-    const decide = async () => {
-        if (!pendingDecision) {
-            return;
-        }
-        try {
-            await request({
-                url: `/operations/approvals/${pendingDecision.approval.id}/${pendingDecision.action}`,
-                method: 'POST',
-                data: {
-                    note: decisionNote.trim() || undefined,
-                },
-            });
-            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('success', pendingDecision.action === 'approve'
-                ? t('messages.approveSuccess')
-                : t('messages.rejectSuccess'));
-            setPendingDecision(null);
-            setDecisionNote('');
-            await refetch();
-        }
-        catch (_a) {
-            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', pendingDecision.action === 'approve'
-                ? t('messages.approveError')
-                : t('messages.rejectError'));
-        }
-    };
-    const openDetails = async (approval) => {
-        setSelectedApproval(approval);
-        setIsDetailsOpen(true);
-        if (approval.targetType === 'timesheet' ||
-            approval.targetType === 'schedule_adjustment_request') {
-            setIsDetailLoading(true);
-            try {
-                const detail = await (0, api_1.fetchOperations)(request, `/operations/approvals/${approval.id}`);
-                setSelectedApproval(detail);
-            }
-            catch (_a) {
-                // keep base data if detail fetch fails
-            }
-            finally {
-                setIsDetailLoading(false);
-            }
-        }
-    };
-    if (!access.isSupervisor && !access.isLoading) {
-        return (<entity_list_1.Page>
-        <operations_header_1.OperationsHeader title={t('title')} description={t('description')} current={t('breadcrumb')}/>
-        <entity_list_1.EmptyState icon={<lucide_react_1.ClipboardCheck className="size-12"/>} title={commonT('states.noAccessTitle')} description={t('noAccessDescription')} actionLabel={commonT('actions.refresh')} onAction={() => void refetch()}/>
-      </entity_list_1.Page>);
-    }
-    return (<entity_list_1.Page>
-      <operations_header_1.OperationsHeader title={t('title')} description={t('description')} current={t('breadcrumb')}/>
-
-      <kpi_cards_grid_1.KpiCardsGrid items={cards} columns={3}/>
-
-      <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: 'pending', label: getStatusLabel('pending') },
-                    { value: 'approved', label: getStatusLabel('approved') },
-                    { value: 'rejected', label: getStatusLabel('rejected') },
-                ],
-            },
-            {
-                id: 'target',
-                type: 'select',
-                value: targetFilter,
-                onChange: (value) => {
-                    setTargetFilter(value);
-                    setPage(1);
-                },
-                placeholder: commonT('labels.requestType'),
-                options: [
-                    { value: 'all', label: commonT('filters.allTypes') },
-                    {
-                        value: 'timesheet',
-                        label: getTargetTypeLabel('timesheet'),
-                    },
-                    {
-                        value: 'time_off_request',
-                        label: getTargetTypeLabel('time_off_request'),
-                    },
-                    {
-                        value: 'schedule_adjustment_request',
-                        label: getTargetTypeLabel('schedule_adjustment_request'),
-                    },
-                ],
-            },
-            {
-                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>
-
-      {(viewMode === 'calendar' ? true : approvals.length > 0) ? (viewMode === 'calendar' ? (<operations_calendar_view_1.OperationsCalendarView locale={currentLocaleCode} items={calendarItems.filter((item) => item.date)} emptyLabel={t('emptyDescription')} actionLabel={t('actions.viewDetails')} onMonthChange={(year, month) => {
-                setCalendarYear(year);
-                setCalendarMonth(month);
-            }} onDateSelect={(_date, items) => {
-                var _a;
-                const approval = calendarApprovalById.get(String((_a = items[0]) === null || _a === void 0 ? void 0 : _a.id));
-                if (approval)
-                    void openDetails(approval);
-            }} onOpenItem={(item) => {
-                const approval = calendarApprovalById.get(String(item.id));
-                if (approval) {
-                    void openDetails(approval);
-                }
-            }}/>) : viewMode === 'cards' ? (<div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
-            {approvals.map((approval) => (<card_1.Card key={approval.id} className="overflow-hidden border-border/60 py-0 shadow-sm">
-                <card_1.CardContent className="space-y-3 p-4">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="truncate font-semibold">
-                        {approval.requesterName}
-                      </div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {getTargetLabel(approval)}
-                      </div>
-                    </div>
-                    <status_badge_1.StatusBadge label={getStatusLabel(approval.status)} className={(0, format_1.getStatusBadgeClass)(approval.status)}/>
-                  </div>
-                  <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
-                    <div>
-                      <span className="font-medium text-foreground">
-                        {commonT('labels.submittedAt')}:
-                      </span>
-                      <br />
-                      {(0, format_1.formatDateTime)(approval.submittedAt)}
-                    </div>
-                    <div>
-                      <span className="font-medium text-foreground">
-                        {commonT('labels.approver')}:
-                      </span>
-                      <br />
-                      {approval.approverName || commonT('labels.notAssigned')}
-                    </div>
-                  </div>
-                  {approval.status === 'pending' ? (<div className="flex flex-wrap justify-end gap-2 border-t border-border/60 pt-3">
-                      <button_1.Button size="sm" variant="outline" className="cursor-pointer" onClick={() => void openDetails(approval)}>
-                        <lucide_react_1.Eye className="size-4"/>
-                        {t('actions.viewDetails')}
-                      </button_1.Button>
-                      <button_1.Button size="sm" variant="outline" onClick={() => {
-                        setPendingDecision({ approval, action: 'reject' });
-                        setDecisionNote('');
-                    }}>
-                        <lucide_react_1.X className="size-4"/>
-                        {commonT('actions.reject')}
-                      </button_1.Button>
-                      <button_1.Button size="sm" onClick={() => {
-                        setPendingDecision({ approval, action: 'approve' });
-                        setDecisionNote('');
-                    }}>
-                        <lucide_react_1.Check className="size-4"/>
-                        {commonT('actions.approve')}
-                      </button_1.Button>
-                    </div>) : (<div className="flex items-center justify-between gap-2 border-t border-border/60 pt-3">
-                      <button_1.Button size="sm" variant="outline" className="cursor-pointer" onClick={() => void openDetails(approval)}>
-                        <lucide_react_1.Eye className="size-4"/>
-                        {t('actions.viewDetails')}
-                      </button_1.Button>
-                      <div className="text-right text-xs text-muted-foreground">
-                        {(0, format_1.formatDateTime)(approval.decidedAt)}
-                      </div>
-                    </div>)}
-                </card_1.CardContent>
-              </card_1.Card>))}
-          </div>) : (<div className="overflow-x-auto rounded-md border">
-            <table_1.Table>
-              <table_1.TableHeader>
-                <table_1.TableRow>
-                  <table_1.TableHead>{commonT('labels.requester')}</table_1.TableHead>
-                  <table_1.TableHead>{commonT('labels.requestType')}</table_1.TableHead>
-                  <table_1.TableHead>{commonT('labels.submittedAt')}</table_1.TableHead>
-                  <table_1.TableHead>{commonT('labels.approver')}</table_1.TableHead>
-                  <table_1.TableHead>{commonT('labels.status')}</table_1.TableHead>
-                  <table_1.TableHead className="w-45 text-right">
-                    {commonT('labels.actions')}
-                  </table_1.TableHead>
-                </table_1.TableRow>
-              </table_1.TableHeader>
-              <table_1.TableBody>
-                {approvals.map((approval) => (<table_1.TableRow key={approval.id}>
-                    <table_1.TableCell>
-                      <div className="font-medium">
-                        {approval.requesterName}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {approval.decisionNote || commonT('labels.noNotes')}
-                      </div>
-                    </table_1.TableCell>
-                    <table_1.TableCell>{getTargetLabel(approval)}</table_1.TableCell>
-                    <table_1.TableCell>
-                      <div>{(0, format_1.formatDateTime)(approval.submittedAt)}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {(0, format_1.formatDate)(approval.decidedAt)}
-                      </div>
-                    </table_1.TableCell>
-                    <table_1.TableCell>
-                      <div>
-                        {approval.approverName || commonT('labels.notAssigned')}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {approval.targetType === 'timesheet'
-                    ? [
-                        approval.timesheetProjectNames,
-                        approval.timesheetTotalHours
-                            ? `${approval.timesheetTotalHours}h`
-                            : null,
-                    ]
-                        .filter(Boolean)
-                        .join(' • ') || commonT('labels.notAvailable')
-                    : approval.targetType === 'time_off_request'
-                        ? approval.timeOffReason ||
-                            commonT('labels.noNotes')
-                        : approval.scheduleReason ||
-                            commonT('labels.noNotes')}
-                      </div>
-                    </table_1.TableCell>
-                    <table_1.TableCell>
-                      <status_badge_1.StatusBadge label={getStatusLabel(approval.status)} className={(0, format_1.getStatusBadgeClass)(approval.status)}/>
-                    </table_1.TableCell>
-                    <table_1.TableCell>
-                      <div className="flex flex-wrap justify-end gap-2">
-                        <button_1.Button size="sm" variant="outline" className="cursor-pointer" onClick={() => void openDetails(approval)}>
-                          <lucide_react_1.Eye className="size-4"/>
-                          {t('actions.viewDetails')}
-                        </button_1.Button>
-                        {approval.status === 'pending' ? (<>
-                            <button_1.Button size="sm" variant="outline" onClick={() => {
-                        setPendingDecision({
-                            approval,
-                            action: 'reject',
-                        });
-                        setDecisionNote('');
-                    }}>
-                              <lucide_react_1.X className="size-4"/>
-                              {commonT('actions.reject')}
-                            </button_1.Button>
-                            <button_1.Button size="sm" onClick={() => {
-                        setPendingDecision({
-                            approval,
-                            action: 'approve',
-                        });
-                        setDecisionNote('');
-                    }}>
-                              <lucide_react_1.Check className="size-4"/>
-                              {commonT('actions.approve')}
-                            </button_1.Button>
-                          </>) : (<div className="flex items-center text-right text-xs text-muted-foreground">
-                            {(0, format_1.formatDateTime)(approval.decidedAt)}
-                          </div>)}
-                      </div>
-                    </table_1.TableCell>
-                  </table_1.TableRow>))}
-              </table_1.TableBody>
-            </table_1.Table>
-          </div>)) : (<entity_list_1.EmptyState icon={<lucide_react_1.ClipboardCheck className="size-12"/>} title={commonT('states.emptyTitle')} description={t('emptyDescription')} actionLabel={commonT('actions.refresh')} onAction={() => void refetch()}/>)}
-
-      <entity_list_1.PaginationFooter currentPage={page} pageSize={pageSize} totalItems={(_c = approvalsResponse === null || approvalsResponse === void 0 ? void 0 : approvalsResponse.total) !== null && _c !== void 0 ? _c : 0} pageSizeOptions={[12, 24, 48]} onPageChange={setPage} onPageSizeChange={(size) => {
-            setPageSize(size);
-            setPage(1);
-        }}/>
-
-      <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>
-
-          {selectedApproval ? (<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">
-                      {selectedApproval.requesterName}
-                    </div>
-                    <div className="mt-2 flex flex-wrap items-center gap-2">
-                      <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${getTypeColorClass(selectedApproval.targetType)}`}>
-                        {getTypeIcon(selectedApproval.targetType)}
-                        {getTargetTypeLabel(selectedApproval.targetType)}
-                      </span>
-                      <span className="text-sm text-muted-foreground">
-                        {selectedApproval.targetType === 'timesheet'
-                ? (0, format_1.formatDate)(selectedApproval.timesheetWeekStartDate)
-                : selectedApproval.targetType === 'time_off_request'
-                    ? [
-                        (0, format_1.formatDate)(selectedApproval.timeOffStartDate),
-                        (0, format_1.formatDate)(selectedApproval.timeOffEndDate),
-                    ]
-                        .filter(Boolean)
-                        .join(' – ')
-                    : [
-                        (0, format_1.formatDate)(selectedApproval.scheduleStartDate),
-                        (0, format_1.formatDate)(selectedApproval.scheduleEndDate),
-                    ]
-                        .filter(Boolean)
-                        .join(' – ')}
-                      </span>
-                    </div>
-                  </div>
-                  <status_badge_1.StatusBadge label={getStatusLabel(selectedApproval.status)} className={(0, format_1.getStatusBadgeClass)(selectedApproval.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.approver')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {selectedApproval.approverName ||
-                commonT('labels.notAssigned')}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.submittedAt')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {(0, format_1.formatDateTime)(selectedApproval.submittedAt)}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {t('details.decidedAt')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {(_d = (0, format_1.formatDateTime)(selectedApproval.decidedAt)) !== null && _d !== void 0 ? _d : '-'}
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-3">
-                <div className="flex-1 border-t"/>
-                <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  {selectedApproval.targetType === 'timesheet'
-                ? t('details.timesheetSection')
-                : selectedApproval.targetType === 'time_off_request'
-                    ? t('details.timeOffSection')
-                    : t('details.scheduleSection')}
-                </span>
-                <div className="flex-1 border-t"/>
-              </div>
-
-              {selectedApproval.targetType === 'timesheet' ? (<>
-                  <div className="grid gap-4 sm:grid-cols-2">
-                    <div>
-                      <div className="text-xs font-medium uppercase text-muted-foreground">
-                        {t('details.period')}
-                      </div>
-                      <div className="mt-1 text-sm">
-                        {(0, format_1.formatDate)(selectedApproval.timesheetWeekStartDate)}
-                      </div>
-                    </div>
-                    <div>
-                      <div className="text-xs font-medium uppercase text-muted-foreground">
-                        {commonT('labels.totalHours')}
-                      </div>
-                      <div className="mt-1 text-sm">
-                        {selectedApproval.timesheetTotalHours != null
-                    ? `${selectedApproval.timesheetTotalHours}h`
-                    : commonT('labels.notAvailable')}
-                      </div>
-                    </div>
-                    <div className="sm:col-span-2">
-                      <div className="text-xs font-medium uppercase text-muted-foreground">
-                        {t('details.projects')}
-                      </div>
-                      <div className="mt-1 rounded-lg border p-3 text-sm">
-                        {selectedApproval.timesheetProjectNames ||
-                    commonT('labels.notAvailable')}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div>
-                    <div className="text-xs font-medium uppercase text-muted-foreground">
-                      {t('details.entriesTitle')}
-                    </div>
-                    {isDetailLoading ? (<div className="mt-3 flex items-center gap-2 text-sm text-muted-foreground">
-                        <lucide_react_1.Loader2 className="size-4 animate-spin"/>
-                        {t('details.loadingEntries')}
-                      </div>) : (<div className="mt-2 space-y-3">
-                        {((_e = selectedApproval.entries) !== null && _e !== void 0 ? _e : []).length ? (((_f = selectedApproval.entries) !== null && _f !== void 0 ? _f : []).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>
-                            </div>))) : (<div className="rounded-lg border p-3 text-sm text-muted-foreground">
-                            {t('details.noEntries')}
-                          </div>)}
-                      </div>)}
-                  </div>
-                </>) : null}
-
-              {selectedApproval.targetType === 'time_off_request' ? (<div className="grid gap-4 sm:grid-cols-2">
-                  <div className="sm:col-span-2">
-                    <div className="text-xs font-medium uppercase text-muted-foreground">
-                      {t('details.period')}
-                    </div>
-                    <div className="mt-1 text-sm">
-                      {[
-                    (0, format_1.formatDate)(selectedApproval.timeOffStartDate),
-                    (0, format_1.formatDate)(selectedApproval.timeOffEndDate),
-                ]
-                    .filter(Boolean)
-                    .join(' – ') || '—'}
-                    </div>
-                  </div>
-                  <div>
-                    <div className="text-xs font-medium uppercase text-muted-foreground">
-                      {commonT('labels.requestType')}
-                    </div>
-                    <div className="mt-1 text-sm">
-                      {getTimeOffTypeLabel(selectedApproval.timeOffType)}
-                    </div>
-                  </div>
-                  <div className="sm:col-span-2">
-                    <div className="text-xs font-medium uppercase text-muted-foreground">
-                      {commonT('labels.reason')}
-                    </div>
-                    <div className="mt-1 rounded-lg border p-3 text-sm">
-                      {selectedApproval.timeOffReason ||
-                    commonT('labels.noNotes')}
-                    </div>
-                  </div>
-                </div>) : null}
-
-              {selectedApproval.targetType === 'schedule_adjustment_request' ? (<>
-                  <div className="grid gap-4 sm:grid-cols-2">
-                    <div className="sm:col-span-2">
-                      <div className="text-xs font-medium uppercase text-muted-foreground">
-                        {t('details.period')}
-                      </div>
-                      <div className="mt-1 text-sm">
-                        {[
-                    (0, format_1.formatDate)(selectedApproval.scheduleStartDate),
-                    (0, format_1.formatDate)(selectedApproval.scheduleEndDate),
-                ]
-                    .filter(Boolean)
-                    .join(' – ') || '—'}
-                      </div>
-                    </div>
-                    <div>
-                      <div className="text-xs font-medium uppercase text-muted-foreground">
-                        {commonT('labels.requestScope')}
-                      </div>
-                      <div className="mt-1 text-sm">
-                        {getScheduleScopeLabel(selectedApproval.scheduleRequestScope)}
-                      </div>
-                    </div>
-                    <div className="sm:col-span-2">
-                      <div className="text-xs font-medium uppercase text-muted-foreground">
-                        {commonT('labels.reason')}
-                      </div>
-                      <div className="mt-1 rounded-lg border p-3 text-sm">
-                        {selectedApproval.scheduleReason ||
-                    commonT('labels.noNotes')}
-                      </div>
-                    </div>
-                  </div>
-
-                  {isDetailLoading ? (<div className="flex items-center gap-2 text-sm text-muted-foreground">
-                      <lucide_react_1.Loader2 className="size-4 animate-spin"/>
-                      {t('details.loadingSchedule')}
-                    </div>) : (<div className="grid gap-4 sm:grid-cols-2">
-                      <div>
-                        <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                          {t('details.currentSchedule')}
-                        </div>
-                        <div className="rounded-lg border p-3">
-                          <SchedulePanel days={(_g = selectedApproval.currentSchedule) !== null && _g !== void 0 ? _g : []} locale={currentLocaleCode} emptyLabel={commonT('labels.notAssigned')}/>
-                        </div>
-                      </div>
-                      <div>
-                        <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                          {t('details.requestedSchedule')}
-                        </div>
-                        <div className="rounded-lg border p-3">
-                          <SchedulePanel days={(_h = selectedApproval.days) !== null && _h !== void 0 ? _h : []} locale={currentLocaleCode} emptyLabel={commonT('labels.notAssigned')}/>
-                        </div>
-                      </div>
-                    </div>)}
-                </>) : null}
-
-              <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">
-                  {selectedApproval.decisionNote || commonT('labels.noNotes')}
-                </div>
-              </div>
-            </div>) : null}
-        </sheet_1.SheetContent>
-      </sheet_1.Sheet>
-
-      <dialog_1.Dialog open={Boolean(pendingDecision)} onOpenChange={(open) => {
-            if (!open) {
-                setPendingDecision(null);
-                setDecisionNote('');
-            }
-        }}>
-        <dialog_1.DialogContent className="max-w-150">
-          <dialog_1.DialogHeader>
-            <dialog_1.DialogTitle>
-              {(pendingDecision === null || pendingDecision === void 0 ? void 0 : pendingDecision.action) === 'approve'
-            ? t('dialog.approveTitle')
-            : t('dialog.rejectTitle')}
-            </dialog_1.DialogTitle>
-            <dialog_1.DialogDescription>
-              {pendingDecision
-            ? t('dialog.description', {
-                target: getTargetLabel(pendingDecision.approval),
-                requester: pendingDecision.approval.requesterName,
-            })
-            : ''}
-            </dialog_1.DialogDescription>
-          </dialog_1.DialogHeader>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium">
-              {commonT('labels.noteOptional')}
-            </label>
-            <textarea_1.Textarea rows={4} value={decisionNote} placeholder={t('dialog.notePlaceholder')} onChange={(event) => setDecisionNote(event.target.value)}/>
-          </div>
-
-          <dialog_1.DialogFooter>
-            <button_1.Button variant="outline" onClick={() => {
-            setPendingDecision(null);
-            setDecisionNote('');
-        }}>
-              {commonT('actions.cancel')}
-            </button_1.Button>
-            <button_1.Button variant={(pendingDecision === null || pendingDecision === void 0 ? void 0 : pendingDecision.action) === 'approve'
-            ? 'default'
-            : 'destructive'} onClick={() => void decide()}>
-              {(pendingDecision === null || pendingDecision === void 0 ? void 0 : pendingDecision.action) === 'approve'
-            ? commonT('actions.approve')
-            : commonT('actions.reject')}
-            </button_1.Button>
-          </dialog_1.DialogFooter>
-        </dialog_1.DialogContent>
-      </dialog_1.Dialog>
-    </entity_list_1.Page>);
-}
-//# sourceMappingURL=page.js.map