@hed-hog/operations 0.0.327 → 0.0.329

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

@@ -1,1277 +0,0 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  SearchBar,
-} from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  CalendarDays,
-  CalendarOff,
-  Check,
-  ClipboardCheck,
-  Clock,
-  Eye,
-  LayoutGrid,
-  List,
-  Loader2,
-  SlidersHorizontal,
-  X,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import {
-  OperationsCalendarView,
-  type OperationsCalendarItem,
-} from '../_components/operations-calendar-view';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import { fetchOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type { OperationsApproval, PaginatedResponse } from '../_lib/types';
-import {
-  formatDate,
-  formatDateTime,
-  formatEnumLabel,
-  formatHours,
-  formatWeekdayLabel,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-
-const WEEKDAY_ORDER = [
-  'monday',
-  'tuesday',
-  'wednesday',
-  'thursday',
-  'friday',
-  'saturday',
-  'sunday',
-];
-
-type ScheduleDay = {
-  weekday: string;
-  isWorkingDay: boolean;
-  startTime?: string | null;
-  endTime?: string | null;
-  breakMinutes?: number | null;
-};
-
-function formatTimeValue(t: string) {
-  if (t.includes('T')) return t.split('T')[1]?.slice(0, 5) ?? '--:--';
-  return t.slice(0, 5);
-}
-
-function groupScheduleLines(days: ScheduleDay[], locale: string) {
-  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: string) =>
-    formatWeekdayLabel(weekday, locale).slice(0, 3);
-  type Group = {
-    days: string[];
-    time: string | null;
-    break: number | null;
-    isOff: boolean;
-  };
-  const groups: Group[] = [];
-  for (const day of sorted) {
-    const time =
-      day.isWorkingDay && day.startTime && day.endTime
-        ? `${formatTimeValue(day.startTime)}–${formatTimeValue(day.endTime)}`
-        : null;
-    const breakMin = day.isWorkingDay ? (day.breakMinutes ?? 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,
-}: {
-  days: ScheduleDay[];
-  locale: string;
-  emptyLabel: string;
-}) {
-  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?: string | null) {
-  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?: number | null, hours?: number | null) {
-  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 formatHours(Number(hours ?? 0));
-}
-
-type PendingDecision = {
-  approval: OperationsApproval;
-  action: 'approve' | 'reject';
-};
-
-export default function OperationsApprovalsPage() {
-  const t = useTranslations('operations.ApprovalsPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [targetFilter, setTargetFilter] = useState('all');
-  const [dateFrom, setDateFrom] = useState('');
-  const [dateTo, setDateTo] = useState('');
-  const [calendarYear, setCalendarYear] = useState(() =>
-    new Date().getFullYear()
-  );
-  const [calendarMonth, setCalendarMonth] = useState(
-    () => new Date().getMonth() + 1
-  );
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [viewMode, setViewMode] = useState<'table' | 'cards' | 'calendar'>(
-    () => {
-      if (typeof window === 'undefined') return 'table';
-      const saved = window.localStorage.getItem(
-        'operations-approvals-view-mode'
-      );
-      return saved === 'cards' || saved === 'calendar' ? saved : 'table';
-    }
-  );
-  const [decisionNote, setDecisionNote] = useState('');
-  const [pendingDecision, setPendingDecision] =
-    useState<PendingDecision | null>(null);
-  const [selectedApproval, setSelectedApproval] =
-    useState<OperationsApproval | null>(null);
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [isDetailLoading, setIsDetailLoading] = useState(false);
-
-  const getStatusLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.statuses.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getTargetTypeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.targetTypes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getTimeOffTypeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.timeOffTypes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getScheduleScopeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.scheduleScopes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getTypeColorClass = (targetType: string) => {
-    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: string) => {
-    switch (targetType) {
-      case 'timesheet':
-        return <Clock className="size-3" />;
-      case 'time_off_request':
-        return <CalendarOff className="size-3" />;
-      case 'schedule_adjustment_request':
-        return <SlidersHorizontal className="size-3" />;
-      default:
-        return null;
-    }
-  };
-
-  const getTargetLabel = (approval: OperationsApproval) => {
-    switch (approval.targetType) {
-      case 'timesheet':
-        return `${getTargetTypeLabel('timesheet')} ${formatDate(
-          approval.timesheetWeekStartDate
-        )}`;
-      case 'time_off_request':
-        return `${getTimeOffTypeLabel(approval.timeOffType)} ${formatDate(
-          approval.timeOffStartDate
-        )}`;
-      case 'schedule_adjustment_request':
-        return `${getScheduleScopeLabel(approval.scheduleRequestScope)} ${formatDate(
-          approval.scheduleStartDate
-        )}`;
-      default:
-        return getTargetTypeLabel(approval.targetType);
-    }
-  };
-
-  const { data: approvalsResponse, refetch } = useQuery<
-    PaginatedResponse<OperationsApproval>
-  >({
-    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 fetchOperations<PaginatedResponse<OperationsApproval>>(
-        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 } = useQuery<
-    PaginatedResponse<OperationsApproval>
-  >({
-    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 fetchOperations<PaginatedResponse<OperationsApproval>>(
-        request,
-        `/operations/approvals?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  const approvals = approvalsResponse?.data ?? [];
-  const calendarApprovals = calendarApprovalsResponse?.data ?? [];
-
-  const buildCalendarItem = (approval: OperationsApproval) => ({
-    id: `approval-${approval.id}`,
-    date:
-      approval.targetType === 'timesheet'
-        ? String(approval.timesheetWeekStartDate ?? '').match(
-            /(\d{4}-\d{2}-\d{2})/
-          )?.[1] ||
-          approval.submittedAt?.slice(0, 10) ||
-          ''
-        : approval.targetType === 'time_off_request'
-          ? String(approval.timeOffStartDate ?? '').match(
-              /(\d{4}-\d{2}-\d{2})/
-            )?.[1] ||
-            approval.submittedAt?.slice(0, 10) ||
-            ''
-          : String(approval.scheduleStartDate ?? '').match(
-              /(\d{4}-\d{2}-\d{2})/
-            )?.[1] ||
-            approval.submittedAt?.slice(0, 10) ||
-            '',
-    title: approval.requesterName,
-    subtitle: getTargetLabel(approval),
-    kind: approval.targetType,
-    meta:
-      approval.status === 'pending'
-        ? formatDateTime(approval.submittedAt)
-        : formatDateTime(approval.decidedAt),
-    statusLabel: getStatusLabel(approval.status),
-    badgeClassName: getStatusBadgeClass(approval.status),
-  });
-
-  const calendarItems = useMemo<OperationsCalendarItem[]>(
-    () =>
-      (viewMode === 'calendar' ? calendarApprovals : approvals).map(
-        buildCalendarItem
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [approvals, calendarApprovals, viewMode]
-  );
-
-  const calendarApprovalById = useMemo(
-    () => new Map(calendarApprovals.map((a) => [`approval-${a.id}`, a])),
-    [calendarApprovals]
-  );
-
-  const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards' && value !== 'calendar') return;
-    setViewMode(value as 'table' | 'cards' | 'calendar');
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem('operations-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?.(
-        'success',
-        pendingDecision.action === 'approve'
-          ? t('messages.approveSuccess')
-          : t('messages.rejectSuccess')
-      );
-      setPendingDecision(null);
-      setDecisionNote('');
-      await refetch();
-    } catch {
-      showToastHandler?.(
-        'error',
-        pendingDecision.action === 'approve'
-          ? t('messages.approveError')
-          : t('messages.rejectError')
-      );
-    }
-  };
-
-  const openDetails = async (approval: OperationsApproval) => {
-    setSelectedApproval(approval);
-    setIsDetailsOpen(true);
-    if (
-      approval.targetType === 'timesheet' ||
-      approval.targetType === 'schedule_adjustment_request'
-    ) {
-      setIsDetailLoading(true);
-      try {
-        const detail = await fetchOperations<OperationsApproval>(
-          request,
-          `/operations/approvals/${approval.id}`
-        );
-        setSelectedApproval(detail);
-      } catch {
-        // keep base data if detail fetch fails
-      } finally {
-        setIsDetailLoading(false);
-      }
-    }
-  };
-
-  if (!access.isSupervisor && !access.isLoading) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-        />
-        <EmptyState
-          icon={<ClipboardCheck className="size-12" />}
-          title={commonT('states.noAccessTitle')}
-          description={t('noAccessDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => void refetch()}
-        />
-      </Page>
-    );
-  }
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <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">
-          <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>
-          <ToggleGroup
-            type="single"
-            value={viewMode}
-            onValueChange={handleViewModeChange}
-            variant="outline"
-            size="sm"
-          >
-            <ToggleGroupItem value="table" className="gap-1.5 px-2.5">
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeTable')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeCards')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="calendar" className="gap-1.5 px-2.5">
-              <CalendarDays className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeCalendar')}</span>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
-
-      {(viewMode === 'calendar' ? true : approvals.length > 0) ? (
-        viewMode === 'calendar' ? (
-          <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) => {
-              const approval = calendarApprovalById.get(String(items[0]?.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
-                key={approval.id}
-                className="overflow-hidden border-border/60 py-0 shadow-sm"
-              >
-                <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>
-                    <StatusBadge
-                      label={getStatusLabel(approval.status)}
-                      className={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 />
-                      {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
-                        size="sm"
-                        variant="outline"
-                        className="cursor-pointer"
-                        onClick={() => void openDetails(approval)}
-                      >
-                        <Eye className="size-4" />
-                        {t('actions.viewDetails')}
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() => {
-                          setPendingDecision({ approval, action: 'reject' });
-                          setDecisionNote('');
-                        }}
-                      >
-                        <X className="size-4" />
-                        {commonT('actions.reject')}
-                      </Button>
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          setPendingDecision({ approval, action: 'approve' });
-                          setDecisionNote('');
-                        }}
-                      >
-                        <Check className="size-4" />
-                        {commonT('actions.approve')}
-                      </Button>
-                    </div>
-                  ) : (
-                    <div className="flex items-center justify-between gap-2 border-t border-border/60 pt-3">
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="cursor-pointer"
-                        onClick={() => void openDetails(approval)}
-                      >
-                        <Eye className="size-4" />
-                        {t('actions.viewDetails')}
-                      </Button>
-                      <div className="text-right text-xs text-muted-foreground">
-                        {formatDateTime(approval.decidedAt)}
-                      </div>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{commonT('labels.requester')}</TableHead>
-                  <TableHead>{commonT('labels.requestType')}</TableHead>
-                  <TableHead>{commonT('labels.submittedAt')}</TableHead>
-                  <TableHead>{commonT('labels.approver')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead className="w-45 text-right">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {approvals.map((approval) => (
-                  <TableRow key={approval.id}>
-                    <TableCell>
-                      <div className="font-medium">
-                        {approval.requesterName}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {approval.decisionNote || commonT('labels.noNotes')}
-                      </div>
-                    </TableCell>
-                    <TableCell>{getTargetLabel(approval)}</TableCell>
-                    <TableCell>
-                      <div>{formatDateTime(approval.submittedAt)}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {formatDate(approval.decidedAt)}
-                      </div>
-                    </TableCell>
-                    <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>
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        label={getStatusLabel(approval.status)}
-                        className={getStatusBadgeClass(approval.status)}
-                      />
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex flex-wrap justify-end gap-2">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="cursor-pointer"
-                          onClick={() => void openDetails(approval)}
-                        >
-                          <Eye className="size-4" />
-                          {t('actions.viewDetails')}
-                        </Button>
-                        {approval.status === 'pending' ? (
-                          <>
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              onClick={() => {
-                                setPendingDecision({
-                                  approval,
-                                  action: 'reject',
-                                });
-                                setDecisionNote('');
-                              }}
-                            >
-                              <X className="size-4" />
-                              {commonT('actions.reject')}
-                            </Button>
-                            <Button
-                              size="sm"
-                              onClick={() => {
-                                setPendingDecision({
-                                  approval,
-                                  action: 'approve',
-                                });
-                                setDecisionNote('');
-                              }}
-                            >
-                              <Check className="size-4" />
-                              {commonT('actions.approve')}
-                            </Button>
-                          </>
-                        ) : (
-                          <div className="flex items-center text-right text-xs text-muted-foreground">
-                            {formatDateTime(approval.decidedAt)}
-                          </div>
-                        )}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        )
-      ) : (
-        <EmptyState
-          icon={<ClipboardCheck className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => void refetch()}
-        />
-      )}
-
-      <PaginationFooter
-        currentPage={page}
-        pageSize={pageSize}
-        totalItems={approvalsResponse?.total ?? 0}
-        pageSizeOptions={[12, 24, 48]}
-        onPageChange={setPage}
-        onPageSizeChange={(size) => {
-          setPageSize(size);
-          setPage(1);
-        }}
-      />
-
-      <Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
-          <SheetHeader>
-            <SheetTitle>{t('details.title')}</SheetTitle>
-            <SheetDescription>{t('details.description')}</SheetDescription>
-          </SheetHeader>
-
-          {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'
-                          ? formatDate(selectedApproval.timesheetWeekStartDate)
-                          : selectedApproval.targetType === 'time_off_request'
-                            ? [
-                                formatDate(selectedApproval.timeOffStartDate),
-                                formatDate(selectedApproval.timeOffEndDate),
-                              ]
-                                .filter(Boolean)
-                                .join(' – ')
-                            : [
-                                formatDate(selectedApproval.scheduleStartDate),
-                                formatDate(selectedApproval.scheduleEndDate),
-                              ]
-                                .filter(Boolean)
-                                .join(' – ')}
-                      </span>
-                    </div>
-                  </div>
-                  <StatusBadge
-                    label={getStatusLabel(selectedApproval.status)}
-                    className={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">
-                    {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">
-                    {formatDateTime(selectedApproval.decidedAt) ?? '-'}
-                  </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">
-                        {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">
-                        <Loader2 className="size-4 animate-spin" />
-                        {t('details.loadingEntries')}
-                      </div>
-                    ) : (
-                      <div className="mt-2 space-y-3">
-                        {(selectedApproval.entries ?? []).length ? (
-                          (selectedApproval.entries ?? []).map((entry) => (
-                            <div
-                              key={entry.id}
-                              className="rounded-lg border p-3"
-                            >
-                              <div className="flex flex-wrap items-start justify-between gap-3">
-                                <div>
-                                  <div className="font-medium">
-                                    {entry.taskName ||
-                                      entry.activityLabel ||
-                                      commonT('labels.unassigned')}
-                                  </div>
-                                  <div className="text-xs text-muted-foreground">
-                                    {[entry.projectName, entry.roleLabel]
-                                      .filter(Boolean)
-                                      .join(' • ') ||
-                                      commonT('labels.unassigned')}
-                                  </div>
-                                </div>
-                                <div className="text-sm text-muted-foreground">
-                                  {formatEntryDuration(
-                                    entry.durationMinutes,
-                                    entry.hours
-                                  )}
-                                </div>
-                              </div>
-                              <div className="mt-2 text-xs text-muted-foreground">
-                                {formatDateLabel(entry.workDate)}
-                              </div>
-                              <div className="mt-2 text-sm">
-                                {entry.description || commonT('labels.noNotes')}
-                              </div>
-                            </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">
-                      {[
-                        formatDate(selectedApproval.timeOffStartDate),
-                        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">
-                        {[
-                          formatDate(selectedApproval.scheduleStartDate),
-                          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">
-                      <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={selectedApproval.currentSchedule ?? []}
-                            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={selectedApproval.days ?? []}
-                            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}
-        </SheetContent>
-      </Sheet>
-
-      <Dialog
-        open={Boolean(pendingDecision)}
-        onOpenChange={(open) => {
-          if (!open) {
-            setPendingDecision(null);
-            setDecisionNote('');
-          }
-        }}
-      >
-        <DialogContent className="max-w-150">
-          <DialogHeader>
-            <DialogTitle>
-              {pendingDecision?.action === 'approve'
-                ? t('dialog.approveTitle')
-                : t('dialog.rejectTitle')}
-            </DialogTitle>
-            <DialogDescription>
-              {pendingDecision
-                ? t('dialog.description', {
-                    target: getTargetLabel(pendingDecision.approval),
-                    requester: pendingDecision.approval.requesterName,
-                  })
-                : ''}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium">
-              {commonT('labels.noteOptional')}
-            </label>
-            <Textarea
-              rows={4}
-              value={decisionNote}
-              placeholder={t('dialog.notePlaceholder')}
-              onChange={(event) => setDecisionNote(event.target.value)}
-            />
-          </div>
-
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setPendingDecision(null);
-                setDecisionNote('');
-              }}
-            >
-              {commonT('actions.cancel')}
-            </Button>
-            <Button
-              variant={
-                pendingDecision?.action === 'approve'
-                  ? 'default'
-                  : 'destructive'
-              }
-              onClick={() => void decide()}
-            >
-              {pendingDecision?.action === 'approve'
-                ? commonT('actions.approve')
-                : commonT('actions.reject')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Page>
-  );
-}