@hed-hog/operations 0.0.322 → 0.0.325

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

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