@hed-hog/operations 0.0.322 → 0.0.325

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

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