@hed-hog/operations 0.0.327 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/schedule-adjustments/page.tsx

@@ -1,992 +0,0 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  SearchBar,
-} from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { FormActions } from '@/components/ui/form-actions';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
-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 {
-  CalendarRange,
-  Clock,
-  Eye,
-  LayoutGrid,
-  List,
-  Plus,
-  User,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsScheduleAdjustmentDay,
-  OperationsScheduleAdjustmentRequest,
-  PaginatedResponse,
-} from '../_lib/types';
-import {
-  formatDateRange,
-  formatEnumLabel,
-  formatWeekdayLabel,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-
-const weekdays = [
-  'monday',
-  'tuesday',
-  'wednesday',
-  'thursday',
-  'friday',
-  'saturday',
-  'sunday',
-] as const;
-
-type ScheduleDay = {
-  weekday: string;
-  isWorkingDay: boolean;
-  startTime?: string | null;
-  endTime?: string | null;
-  breakMinutes?: number | null;
-};
-
-const WEEKDAY_ORDER = [
-  'monday',
-  'tuesday',
-  'wednesday',
-  'thursday',
-  'friday',
-  'saturday',
-  'sunday',
-];
-
-function formatTimeValue(t: string) {
-  // Handle full ISO datetime (e.g. "1970-01-01T09:00:00.000Z") returned by pg driver
-  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 [];
-
-  // Sort by canonical weekday order before grouping
-  const sorted = [...days].sort(
-    (a, b) =>
-      WEEKDAY_ORDER.indexOf(a.weekday.toLowerCase()) -
-      WEEKDAY_ORDER.indexOf(b.weekday.toLowerCase())
-  );
-
-  const dayAbbr = (weekday: string) => {
-    const full = formatWeekdayLabel(weekday, locale);
-    return full.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) => {
-    const dayLabel =
-      g.days.length > 1
-        ? `${g.days[0]}–${g.days[g.days.length - 1]}`
-        : g.days[0];
-    return { dayLabel, 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>
-  );
-}
-
-type ScheduleFormState = {
-  requestScope: string;
-  effectiveStartDate: string;
-  effectiveEndDate: string;
-  reason: string;
-  days: Array<{
-    weekday: string;
-    isWorkingDay: boolean;
-    startTime: string;
-    endTime: string;
-    breakMinutes: string;
-  }>;
-};
-
-const emptyForm: ScheduleFormState = {
-  requestScope: 'temporary',
-  effectiveStartDate: '',
-  effectiveEndDate: '',
-  reason: '',
-  days: weekdays.map((weekday) => ({
-    weekday,
-    isWorkingDay: !['saturday', 'sunday'].includes(weekday),
-    startTime: '09:00',
-    endTime: '18:00',
-    breakMinutes: '60',
-  })),
-};
-
-export default function OperationsScheduleAdjustmentsPage() {
-  const t = useTranslations('operations.ScheduleAdjustmentsPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
-    if (typeof window === 'undefined') return 'cards';
-    const saved = window.localStorage.getItem(
-      'operations-schedule-adjustments-view-mode'
-    );
-    return saved === 'table' ? 'table' : 'cards';
-  });
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [selectedRequest, setSelectedRequest] =
-    useState<OperationsScheduleAdjustmentRequest | null>(null);
-  const [form, setForm] = useState<ScheduleFormState>(emptyForm);
-
-  const getRequestScopeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.requestScopes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getStatusLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.statuses.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getStatusDescription = (value?: string | null) => {
-    if (!value) {
-      return null;
-    }
-
-    const key = `statusHelp.${value}`;
-    return t.has(key) ? t(key) : null;
-  };
-
-  const { data: requestsResponse, refetch } = useQuery<
-    PaginatedResponse<OperationsScheduleAdjustmentRequest>
-  >({
-    queryKey: [
-      'operations-schedule-adjustments',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      page,
-      pageSize,
-    ],
-    enabled: access.isCollaborator,
-    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);
-      return fetchOperations<
-        PaginatedResponse<OperationsScheduleAdjustmentRequest>
-      >(request, `/operations/schedule-adjustments?${params.toString()}`);
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  const requests = requestsResponse?.data ?? [];
-
-  const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards') return;
-    setViewMode(value as 'table' | 'cards');
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(
-        'operations-schedule-adjustments-view-mode',
-        value
-      );
-    }
-  };
-
-  const cards = [
-    {
-      key: 'submitted',
-      title: t('cards.submitted'),
-      description: t('cards.submittedDescription'),
-      value: requests.filter((item) => item.status === 'submitted').length,
-    },
-    {
-      key: 'approved',
-      title: t('cards.approved'),
-      description: t('cards.approvedDescription'),
-      value: requests.filter((item) => item.status === 'approved').length,
-    },
-    {
-      key: 'permanent',
-      title: t('cards.permanent'),
-      description: t('cards.permanentDescription'),
-      value: requests.filter((item) => item.requestScope === 'permanent')
-        .length,
-    },
-  ];
-
-  const requestedScheduleSummary = useMemo(
-    () =>
-      groupScheduleLines(
-        form.days.map((day) => ({
-          ...day,
-          breakMinutes: day.isWorkingDay
-            ? parseNumberInput(day.breakMinutes)
-            : null,
-        })),
-        currentLocaleCode
-      )
-        .filter((line) => !line.isOff)
-        .map((line) => `${line.dayLabel}: ${line.time}`)
-        .join(', ') || '-',
-    [form.days, currentLocaleCode]
-  );
-
-  const workingDaysCount = useMemo(
-    () => form.days.filter((day) => day.isWorkingDay).length,
-    [form.days]
-  );
-
-  const updateDay = (
-    weekday: string,
-    patch: Partial<ScheduleFormState['days'][number]>
-  ) => {
-    setForm((current) => ({
-      ...current,
-      days: current.days.map((day) =>
-        day.weekday === weekday ? { ...day, ...patch } : day
-      ),
-    }));
-  };
-
-  const onSubmit = async () => {
-    if (!form.effectiveStartDate) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
-
-    try {
-      await mutateOperations(
-        request,
-        '/operations/schedule-adjustments',
-        'POST',
-        {
-          requestScope: form.requestScope,
-          effectiveStartDate: form.effectiveStartDate,
-          effectiveEndDate: trimToNull(form.effectiveEndDate),
-          reason: trimToNull(form.reason),
-          days: form.days.map((day) => ({
-            weekday: day.weekday,
-            isWorkingDay: day.isWorkingDay,
-            startTime: day.isWorkingDay ? trimToNull(day.startTime) : null,
-            endTime: day.isWorkingDay ? trimToNull(day.endTime) : null,
-            breakMinutes: day.isWorkingDay
-              ? parseNumberInput(day.breakMinutes)
-              : 0,
-          })),
-        }
-      );
-
-      showToastHandler?.('success', t('messages.saveSuccess'));
-      setIsSheetOpen(false);
-      setForm(emptyForm);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.saveError'));
-    }
-  };
-
-  const openDetails = (requestItem: OperationsScheduleAdjustmentRequest) => {
-    setSelectedRequest(requestItem);
-    setIsDetailsOpen(true);
-  };
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          access.isCollaborator ? (
-            <Button size="sm" onClick={() => setIsSheetOpen(true)}>
-              <Plus className="size-4" />
-              {commonT('actions.create')}
-            </Button>
-          ) : undefined
-        }
-      />
-
-      <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: 'submitted', label: getStatusLabel('submitted') },
-                  { value: 'approved', label: getStatusLabel('approved') },
-                  { value: 'rejected', label: getStatusLabel('rejected') },
-                ],
-              },
-            ]}
-          />
-        </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>
-          </ToggleGroup>
-        </div>
-      </div>
-
-      {requests.length > 0 ? (
-        viewMode === 'cards' ? (
-          <div className="space-y-3">
-            {requests.map((requestItem) => (
-              <div
-                key={requestItem.id}
-                className="rounded-lg border bg-card shadow-sm"
-              >
-                {/* Card header */}
-                <div className="flex flex-wrap items-start justify-between gap-3 border-b px-4 py-3">
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-2">
-                      <User className="size-4 shrink-0 text-muted-foreground" />
-                      <span className="font-semibold">
-                        {requestItem.collaboratorName}
-                      </span>
-                      <Badge variant="outline" className="text-xs">
-                        {getRequestScopeLabel(requestItem.requestScope)}
-                      </Badge>
-                    </div>
-                    <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                      <CalendarRange className="size-3.5 shrink-0" />
-                      <span>
-                        {formatDateRange(
-                          requestItem.effectiveStartDate,
-                          requestItem.effectiveEndDate
-                        )}
-                      </span>
-                    </div>
-                  </div>
-                  <div className="flex flex-col items-end gap-1">
-                    <StatusBadge
-                      label={getStatusLabel(requestItem.status)}
-                      className={getStatusBadgeClass(requestItem.status)}
-                    />
-                    {getStatusDescription(requestItem.status) ? (
-                      <p className="text-xs text-muted-foreground">
-                        {getStatusDescription(requestItem.status)}
-                      </p>
-                    ) : null}
-                  </div>
-                </div>
-
-                {/* Schedule comparison */}
-                <div className="grid gap-px bg-border sm:grid-cols-2">
-                  <div className="bg-card px-4 py-3">
-                    <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                      {t('table.currentSchedule')}
-                    </p>
-                    <SchedulePanel
-                      days={requestItem.currentSchedule ?? []}
-                      locale={currentLocaleCode}
-                      emptyLabel={commonT('labels.notAssigned')}
-                    />
-                  </div>
-                  <div className="bg-card px-4 py-3">
-                    <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                      {t('table.requestedSchedule')}
-                    </p>
-                    <SchedulePanel
-                      days={
-                        (requestItem.days ??
-                          []) as OperationsScheduleAdjustmentDay[]
-                      }
-                      locale={currentLocaleCode}
-                      emptyLabel={commonT('labels.notAssigned')}
-                    />
-                  </div>
-                </div>
-
-                {/* Card footer */}
-                <div className="flex flex-wrap items-start justify-between gap-3 border-t bg-muted/20 px-4 py-2.5 text-sm">
-                  <div className="space-y-2">
-                    <div className="flex items-center gap-1.5 text-muted-foreground">
-                      <Clock className="size-3.5 shrink-0" />
-                      <span className="font-medium">
-                        {commonT('labels.approver')}:
-                      </span>
-                      <span>
-                        {requestItem.approverName ||
-                          commonT('labels.notAssigned')}
-                      </span>
-                    </div>
-                    <div>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="cursor-pointer"
-                        onClick={() => openDetails(requestItem)}
-                      >
-                        <Eye className="size-4" />
-                        {t('actions.viewDetails')}
-                      </Button>
-                    </div>
-                  </div>
-                  {requestItem.approverNote ? (
-                    <div className="text-xs text-muted-foreground">
-                      <span className="font-medium">
-                        {commonT('labels.notes')}:
-                      </span>{' '}
-                      {requestItem.approverNote}
-                    </div>
-                  ) : null}
-                  {requestItem.reason ? (
-                    <div className="text-xs text-muted-foreground">
-                      <span className="font-medium">
-                        {commonT('labels.reason')}:
-                      </span>{' '}
-                      {requestItem.reason}
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{commonT('labels.collaborator')}</TableHead>
-                  <TableHead>{t('table.scope')}</TableHead>
-                  <TableHead>{commonT('labels.timeline')}</TableHead>
-                  <TableHead>{commonT('labels.approver')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead className="text-right">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {requests.map((requestItem) => (
-                  <TableRow key={requestItem.id} className="hover:bg-muted/30">
-                    <TableCell className="font-medium">
-                      {requestItem.collaboratorName}
-                    </TableCell>
-                    <TableCell>
-                      <Badge variant="outline" className="text-xs">
-                        {getRequestScopeLabel(requestItem.requestScope)}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      {formatDateRange(
-                        requestItem.effectiveStartDate,
-                        requestItem.effectiveEndDate
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      {requestItem.approverName ||
-                        commonT('labels.notAssigned')}
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        label={getStatusLabel(requestItem.status)}
-                        className={getStatusBadgeClass(requestItem.status)}
-                      />
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex justify-end">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="cursor-pointer"
-                          onClick={() => openDetails(requestItem)}
-                        >
-                          <Eye className="size-4" />
-                          {t('actions.viewDetails')}
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        )
-      ) : (
-        <EmptyState
-          icon={<CalendarRange className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={
-            access.isCollaborator
-              ? commonT('actions.create')
-              : commonT('actions.refresh')
-          }
-          onAction={
-            access.isCollaborator
-              ? () => setIsSheetOpen(true)
-              : () => void refetch()
-          }
-        />
-      )}
-
-      <PaginationFooter
-        currentPage={page}
-        pageSize={pageSize}
-        totalItems={requestsResponse?.total ?? 0}
-        pageSizeOptions={[12, 24, 48]}
-        onPageChange={setPage}
-        onPageSizeChange={(size) => {
-          setPageSize(size);
-          setPage(1);
-        }}
-      />
-
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
-          <SheetHeader>
-            <SheetTitle>{t('sheet.title')}</SheetTitle>
-            <SheetDescription>{t('sheet.description')}</SheetDescription>
-          </SheetHeader>
-
-          <div className="mt-6 grid gap-4 px-4 pb-20">
-            <div className="grid gap-4 md:grid-cols-3">
-              <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  {commonT('labels.requestScope')}
-                </label>
-                <Select
-                  value={form.requestScope}
-                  onValueChange={(value) =>
-                    setForm((current) => ({ ...current, requestScope: value }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="temporary">
-                      {getRequestScopeLabel('temporary')}
-                    </SelectItem>
-                    <SelectItem value="permanent">
-                      {getRequestScopeLabel('permanent')}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  {commonT('labels.startDate')}
-                </label>
-                <Input
-                  type="date"
-                  value={form.effectiveStartDate}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      effectiveStartDate: event.target.value,
-                    }))
-                  }
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="text-sm font-medium">
-                  {commonT('labels.endDate')}
-                </label>
-                <Input
-                  type="date"
-                  value={form.effectiveEndDate}
-                  onChange={(event) =>
-                    setForm((current) => ({
-                      ...current,
-                      effectiveEndDate: event.target.value,
-                    }))
-                  }
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <label className="text-sm font-medium">
-                {commonT('labels.reason')}
-              </label>
-              <Textarea
-                rows={3}
-                placeholder={t('sheet.reasonPlaceholder')}
-                value={form.reason}
-                onChange={(event) =>
-                  setForm((current) => ({
-                    ...current,
-                    reason: event.target.value,
-                  }))
-                }
-              />
-            </div>
-
-            <div className="space-y-3">
-              <div className="text-sm font-medium">
-                {commonT('labels.weeklySchedule')}
-              </div>
-              <div className="rounded-lg border bg-muted/30 p-3 text-sm">
-                <div className="font-medium text-foreground">
-                  {t('scheduleEditor.summaryLabel')}
-                </div>
-                <p className="mt-1 text-muted-foreground">
-                  {requestedScheduleSummary}
-                </p>
-                <p className="mt-2 text-xs text-muted-foreground">
-                  {t('scheduleEditor.daysPerWeek', {
-                    count: workingDaysCount,
-                  })}
-                </p>
-              </div>
-              <p className="text-sm text-muted-foreground">
-                {t('scheduleEditor.helper')}
-              </p>
-              <div className="space-y-3">
-                {form.days.map((day) => (
-                  <div
-                    key={day.weekday}
-                    className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]"
-                  >
-                    <div className="space-y-2">
-                      <div>
-                        <div className="font-medium">
-                          {formatWeekdayLabel(day.weekday, currentLocaleCode)}
-                        </div>
-                        <div className="text-xs text-muted-foreground">
-                          {day.isWorkingDay
-                            ? `${commonT('labels.workingDay')} • ${day.startTime || '--:--'}-${day.endTime || '--:--'}`
-                            : commonT('labels.dayOff')}
-                        </div>
-                      </div>
-                      <label className="flex items-center gap-2 text-sm text-muted-foreground">
-                        <Switch
-                          checked={day.isWorkingDay}
-                          onCheckedChange={(checked) =>
-                            updateDay(day.weekday, { isWorkingDay: checked })
-                          }
-                        />
-                        <span>
-                          {day.isWorkingDay
-                            ? commonT('labels.workingDay')
-                            : commonT('labels.dayOff')}
-                        </span>
-                      </label>
-                    </div>
-                    <div className="grid gap-3 sm:grid-cols-3">
-                      <div className="space-y-1">
-                        <div className="text-xs text-muted-foreground">
-                          {t('scheduleEditor.startTime')}
-                        </div>
-                        <Input
-                          type="time"
-                          value={day.startTime}
-                          disabled={!day.isWorkingDay}
-                          onChange={(event) =>
-                            updateDay(day.weekday, {
-                              startTime: event.target.value,
-                            })
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <div className="text-xs text-muted-foreground">
-                          {t('scheduleEditor.endTime')}
-                        </div>
-                        <Input
-                          type="time"
-                          value={day.endTime}
-                          disabled={!day.isWorkingDay}
-                          onChange={(event) =>
-                            updateDay(day.weekday, {
-                              endTime: event.target.value,
-                            })
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <div className="text-xs text-muted-foreground">
-                          {t('scheduleEditor.breakMinutes')}
-                        </div>
-                        <Input
-                          type="number"
-                          value={day.breakMinutes}
-                          disabled={!day.isWorkingDay}
-                          onChange={(event) =>
-                            updateDay(day.weekday, {
-                              breakMinutes: event.target.value,
-                            })
-                          }
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          <FormActions
-            sheet
-            cancelLabel={commonT('actions.cancel')}
-            onCancel={() => setIsSheetOpen(false)}
-            onSubmit={() => void onSubmit()}
-            submitLabel={commonT('actions.save')}
-          />
-        </SheetContent>
-      </Sheet>
-
-      <Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
-          <SheetHeader>
-            <SheetTitle>{t('details.title')}</SheetTitle>
-            <SheetDescription>{t('details.description')}</SheetDescription>
-          </SheetHeader>
-
-          {selectedRequest ? (
-            <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">
-                      {selectedRequest.collaboratorName}
-                    </div>
-                    <div className="mt-1 text-sm text-muted-foreground">
-                      {getRequestScopeLabel(selectedRequest.requestScope)}
-                    </div>
-                  </div>
-                  <StatusBadge
-                    label={getStatusLabel(selectedRequest.status)}
-                    className={getStatusBadgeClass(selectedRequest.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.timeline')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {formatDateRange(
-                      selectedRequest.effectiveStartDate,
-                      selectedRequest.effectiveEndDate
-                    )}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium uppercase text-muted-foreground">
-                    {commonT('labels.approver')}
-                  </div>
-                  <div className="mt-1 text-sm">
-                    {selectedRequest.approverName ||
-                      commonT('labels.notAssigned')}
-                  </div>
-                </div>
-              </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('table.currentSchedule')}
-                  </div>
-                  <div className="rounded-lg border p-3">
-                    <SchedulePanel
-                      days={selectedRequest.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('table.requestedSchedule')}
-                  </div>
-                  <div className="rounded-lg border p-3">
-                    <SchedulePanel
-                      days={
-                        (selectedRequest.days ??
-                          []) as OperationsScheduleAdjustmentDay[]
-                      }
-                      locale={currentLocaleCode}
-                      emptyLabel={commonT('labels.notAssigned')}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                <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">
-                  {selectedRequest.reason || commonT('labels.noNotes')}
-                </div>
-              </div>
-
-              <div>
-                <div className="text-xs font-medium uppercase text-muted-foreground">
-                  {commonT('labels.notes')}
-                </div>
-                <div className="mt-1 rounded-lg border p-3 text-sm">
-                  {selectedRequest.approverNote || commonT('labels.noNotes')}
-                </div>
-              </div>
-            </div>
-          ) : null}
-        </SheetContent>
-      </Sheet>
-    </Page>
-  );
-}