@hed-hog/operations 0.0.322 → 0.0.325

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

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