@hed-hog/operations 0.0.297 → 0.0.298

package/hedhog/frontend/app/schedule-adjustments/page.tsx.ejs

@@ -1,418 +1,418 @@
-'use client';
-
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-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 { Switch } from '@/components/ui/switch';
-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 { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { CalendarRange, Plus } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import { useTranslations } from 'next-intl';
-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,
-} from '../_lib/types';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-import {
-  formatDateRange,
-  formatEnumLabel,
-  getStatusBadgeClass,
-  summarizeScheduleDays,
-} from '../_lib/utils/format';
-
-const weekdays = [
-  'monday',
-  'tuesday',
-  'wednesday',
-  'thursday',
-  'friday',
-  'saturday',
-  'sunday',
-] as const;
-
-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 [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [form, setForm] = useState<ScheduleFormState>(emptyForm);
-
-  const { data: requests = [], refetch } = useQuery<
-    OperationsScheduleAdjustmentRequest[]
-  >({
-    queryKey: ['operations-schedule-adjustments', currentLocaleCode],
-    enabled: access.isCollaborator,
-    queryFn: () =>
-      fetchOperations<OperationsScheduleAdjustmentRequest[]>(
-        request,
-        '/operations/schedule-adjustments'
-      ),
-  });
-
-  const filteredRows = useMemo(
-    () =>
-      requests.filter((item) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              item.collaboratorName,
-              item.approverName,
-              item.reason,
-              item.requestScope,
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value).toLowerCase().includes(search.trim().toLowerCase())
-              );
-        const matchesStatus =
-          statusFilter === 'all' ? true : item.status === statusFilter;
-        return matchesSearch && matchesStatus;
-      }),
-    [requests, search, statusFilter]
-  );
-
-  const cards = [
-    {
-      key: 'submitted',
-      title: t('cards.submitted'),
-      value: requests.filter((item) => item.status === 'submitted').length,
-    },
-    {
-      key: 'approved',
-      title: t('cards.approved'),
-      value: requests.filter((item) => item.status === 'approved').length,
-    },
-    {
-      key: 'permanent',
-      title: t('cards.permanent'),
-      value: requests.filter((item) => item.requestScope === 'permanent').length,
-    },
-  ];
-
-  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'));
-    }
-  };
-
-  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
-        }
-      />
-
-      <SearchBar
-        searchQuery={search}
-        onSearchChange={setSearch}
-        onSearch={() => undefined}
-        placeholder={t('searchPlaceholder')}
-        controls={[
-          {
-            id: 'status',
-            type: 'select',
-            value: statusFilter,
-            onChange: setStatusFilter,
-            placeholder: commonT('labels.status'),
-            options: [
-              { value: 'all', label: commonT('filters.allStatuses') },
-              { value: 'submitted', label: formatEnumLabel('submitted') },
-              { value: 'approved', label: formatEnumLabel('approved') },
-              { value: 'rejected', label: formatEnumLabel('rejected') },
-            ],
-          },
-        ]}
-      />
-
-      <KpiCardsGrid items={cards} columns={3} />
-
-      {filteredRows.length > 0 ? (
-        <div className="overflow-x-auto rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{commonT('labels.collaborator')}</TableHead>
-                <TableHead>{commonT('labels.requestScope')}</TableHead>
-                <TableHead>{commonT('labels.timeline')}</TableHead>
-                <TableHead>{t('table.currentSchedule')}</TableHead>
-                <TableHead>{commonT('labels.schedule')}</TableHead>
-                <TableHead>{commonT('labels.approver')}</TableHead>
-                <TableHead>{commonT('labels.status')}</TableHead>
-                <TableHead>{commonT('labels.notes')}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredRows.map((requestItem) => (
-                <TableRow key={requestItem.id}>
-                  <TableCell>{requestItem.collaboratorName}</TableCell>
-                  <TableCell>{formatEnumLabel(requestItem.requestScope)}</TableCell>
-                  <TableCell>
-                    {formatDateRange(
-                      requestItem.effectiveStartDate,
-                      requestItem.effectiveEndDate
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {summarizeScheduleDays(requestItem.currentSchedule ?? [])}
-                  </TableCell>
-                  <TableCell>
-                    {summarizeScheduleDays(
-                      (requestItem.days ?? []) as OperationsScheduleAdjustmentDay[]
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {requestItem.approverName || commonT('labels.notAssigned')}
-                  </TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={formatEnumLabel(requestItem.status)}
-                      className={getStatusBadgeClass(requestItem.status)}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    {requestItem.approverNote || commonT('labels.noNotes')}
-                  </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()}
-        />
-      )}
-
-      <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">
-            <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>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="temporary">Temporary</SelectItem>
-                    <SelectItem value="permanent">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}
-                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="space-y-3">
-                {form.days.map((day) => (
-                  <div
-                    key={day.weekday}
-                    className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[1fr_auto_1fr_1fr_1fr]"
-                  >
-                    <div>
-                      <div className="font-medium">{formatEnumLabel(day.weekday)}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {day.isWorkingDay
-                          ? commonT('labels.workingDay')
-                          : commonT('labels.dayOff')}
-                      </div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Switch
-                        checked={day.isWorkingDay}
-                        onCheckedChange={(checked) =>
-                          updateDay(day.weekday, { isWorkingDay: checked })
-                        }
-                      />
-                    </div>
-                    <Input
-                      type="time"
-                      value={day.startTime}
-                      disabled={!day.isWorkingDay}
-                      onChange={(event) =>
-                        updateDay(day.weekday, { startTime: event.target.value })
-                      }
-                    />
-                    <Input
-                      type="time"
-                      value={day.endTime}
-                      disabled={!day.isWorkingDay}
-                      onChange={(event) =>
-                        updateDay(day.weekday, { endTime: event.target.value })
-                      }
-                    />
-                    <Input
-                      type="number"
-                      value={day.breakMinutes}
-                      disabled={!day.isWorkingDay}
-                      onChange={(event) =>
-                        updateDay(day.weekday, { breakMinutes: event.target.value })
-                      }
-                    />
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <Button onClick={() => void onSubmit()}>{commonT('actions.save')}</Button>
-          </div>
-        </SheetContent>
-      </Sheet>
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+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 { Switch } from '@/components/ui/switch';
+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 { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { CalendarRange, Plus } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+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,
+} from '../_lib/types';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import {
+  formatDateRange,
+  formatEnumLabel,
+  getStatusBadgeClass,
+  summarizeScheduleDays,
+} from '../_lib/utils/format';
+
+const weekdays = [
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday',
+] as const;
+
+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 [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [form, setForm] = useState<ScheduleFormState>(emptyForm);
+
+  const { data: requests = [], refetch } = useQuery<
+    OperationsScheduleAdjustmentRequest[]
+  >({
+    queryKey: ['operations-schedule-adjustments', currentLocaleCode],
+    enabled: access.isCollaborator,
+    queryFn: () =>
+      fetchOperations<OperationsScheduleAdjustmentRequest[]>(
+        request,
+        '/operations/schedule-adjustments'
+      ),
+  });
+
+  const filteredRows = useMemo(
+    () =>
+      requests.filter((item) => {
+        const matchesSearch = !search.trim()
+          ? true
+          : [
+              item.collaboratorName,
+              item.approverName,
+              item.reason,
+              item.requestScope,
+            ]
+              .filter(Boolean)
+              .some((value) =>
+                String(value).toLowerCase().includes(search.trim().toLowerCase())
+              );
+        const matchesStatus =
+          statusFilter === 'all' ? true : item.status === statusFilter;
+        return matchesSearch && matchesStatus;
+      }),
+    [requests, search, statusFilter]
+  );
+
+  const cards = [
+    {
+      key: 'submitted',
+      title: t('cards.submitted'),
+      value: requests.filter((item) => item.status === 'submitted').length,
+    },
+    {
+      key: 'approved',
+      title: t('cards.approved'),
+      value: requests.filter((item) => item.status === 'approved').length,
+    },
+    {
+      key: 'permanent',
+      title: t('cards.permanent'),
+      value: requests.filter((item) => item.requestScope === 'permanent').length,
+    },
+  ];
+
+  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'));
+    }
+  };
+
+  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
+        }
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => undefined}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'status',
+            type: 'select',
+            value: statusFilter,
+            onChange: setStatusFilter,
+            placeholder: commonT('labels.status'),
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'submitted', label: formatEnumLabel('submitted') },
+              { value: 'approved', label: formatEnumLabel('approved') },
+              { value: 'rejected', label: formatEnumLabel('rejected') },
+            ],
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={cards} columns={3} />
+
+      {filteredRows.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{commonT('labels.collaborator')}</TableHead>
+                <TableHead>{commonT('labels.requestScope')}</TableHead>
+                <TableHead>{commonT('labels.timeline')}</TableHead>
+                <TableHead>{t('table.currentSchedule')}</TableHead>
+                <TableHead>{commonT('labels.schedule')}</TableHead>
+                <TableHead>{commonT('labels.approver')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead>{commonT('labels.notes')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRows.map((requestItem) => (
+                <TableRow key={requestItem.id}>
+                  <TableCell>{requestItem.collaboratorName}</TableCell>
+                  <TableCell>{formatEnumLabel(requestItem.requestScope)}</TableCell>
+                  <TableCell>
+                    {formatDateRange(
+                      requestItem.effectiveStartDate,
+                      requestItem.effectiveEndDate
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {summarizeScheduleDays(requestItem.currentSchedule ?? [])}
+                  </TableCell>
+                  <TableCell>
+                    {summarizeScheduleDays(
+                      (requestItem.days ?? []) as OperationsScheduleAdjustmentDay[]
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {requestItem.approverName || commonT('labels.notAssigned')}
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={formatEnumLabel(requestItem.status)}
+                      className={getStatusBadgeClass(requestItem.status)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    {requestItem.approverNote || commonT('labels.noNotes')}
+                  </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()}
+        />
+      )}
+
+      <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">
+            <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>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="temporary">Temporary</SelectItem>
+                    <SelectItem value="permanent">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}
+                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="space-y-3">
+                {form.days.map((day) => (
+                  <div
+                    key={day.weekday}
+                    className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[1fr_auto_1fr_1fr_1fr]"
+                  >
+                    <div>
+                      <div className="font-medium">{formatEnumLabel(day.weekday)}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {day.isWorkingDay
+                          ? commonT('labels.workingDay')
+                          : commonT('labels.dayOff')}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        checked={day.isWorkingDay}
+                        onCheckedChange={(checked) =>
+                          updateDay(day.weekday, { isWorkingDay: checked })
+                        }
+                      />
+                    </div>
+                    <Input
+                      type="time"
+                      value={day.startTime}
+                      disabled={!day.isWorkingDay}
+                      onChange={(event) =>
+                        updateDay(day.weekday, { startTime: event.target.value })
+                      }
+                    />
+                    <Input
+                      type="time"
+                      value={day.endTime}
+                      disabled={!day.isWorkingDay}
+                      onChange={(event) =>
+                        updateDay(day.weekday, { endTime: event.target.value })
+                      }
+                    />
+                    <Input
+                      type="number"
+                      value={day.breakMinutes}
+                      disabled={!day.isWorkingDay}
+                      onChange={(event) =>
+                        updateDay(day.weekday, { breakMinutes: event.target.value })
+                      }
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <Button onClick={() => void onSubmit()}>{commonT('actions.save')}</Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}