@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +1,660 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = OperationsScheduleAdjustmentsPage;
+const entity_list_1 = require("@/components/entity-list");
+const badge_1 = require("@/components/ui/badge");
+const button_1 = require("@/components/ui/button");
+const form_actions_1 = require("@/components/ui/form-actions");
+const input_1 = require("@/components/ui/input");
+const kpi_cards_grid_1 = require("@/components/ui/kpi-cards-grid");
+const select_1 = require("@/components/ui/select");
+const sheet_1 = require("@/components/ui/sheet");
+const switch_1 = require("@/components/ui/switch");
+const table_1 = require("@/components/ui/table");
+const textarea_1 = require("@/components/ui/textarea");
+const toggle_group_1 = require("@/components/ui/toggle-group");
+const next_app_provider_1 = require("@hed-hog/next-app-provider");
+const lucide_react_1 = require("lucide-react");
+const next_intl_1 = require("next-intl");
+const react_1 = require("react");
+const operations_header_1 = require("../_components/operations-header");
+const status_badge_1 = require("../_components/status-badge");
+const api_1 = require("../_lib/api");
+const use_operations_access_1 = require("../_lib/hooks/use-operations-access");
+const format_1 = require("../_lib/utils/format");
+const forms_1 = require("../_lib/utils/forms");
+const weekdays = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday',
+];
+const WEEKDAY_ORDER = [
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+    'sunday',
+];
+function formatTimeValue(t) {
+    var _a, _b;
+    // Handle full ISO datetime (e.g. "1970-01-01T09:00:00.000Z") returned by pg driver
+    if (t.includes('T')) {
+        return (_b = (_a = t.split('T')[1]) === null || _a === void 0 ? void 0 : _a.slice(0, 5)) !== null && _b !== void 0 ? _b : '--:--';
+    }
+    return t.slice(0, 5);
+}
+function groupScheduleLines(days, locale) {
+    var _a;
+    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) => {
+        const full = (0, format_1.formatWeekdayLabel)(weekday, locale);
+        return full.slice(0, 3);
+    };
+    const groups = [];
+    for (const day of sorted) {
+        const time = day.isWorkingDay && day.startTime && day.endTime
+            ? `${formatTimeValue(day.startTime)}–${formatTimeValue(day.endTime)}`
+            : null;
+        const breakMin = day.isWorkingDay ? ((_a = day.breakMinutes) !== null && _a !== void 0 ? _a : 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, }) {
+    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>);
+}
+const emptyForm = {
+    requestScope: 'temporary',
+    effectiveStartDate: '',
+    effectiveEndDate: '',
+    reason: '',
+    days: weekdays.map((weekday) => ({
+        weekday,
+        isWorkingDay: !['saturday', 'sunday'].includes(weekday),
+        startTime: '09:00',
+        endTime: '18:00',
+        breakMinutes: '60',
+    })),
+};
+function OperationsScheduleAdjustmentsPage() {
+    var _a, _b, _c, _d;
+    const t = (0, next_intl_1.useTranslations)('operations.ScheduleAdjustmentsPage');
+    const commonT = (0, next_intl_1.useTranslations)('operations.Common');
+    const { request, showToastHandler, currentLocaleCode } = (0, next_app_provider_1.useApp)();
+    const access = (0, use_operations_access_1.useOperationsAccess)();
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [statusFilter, setStatusFilter] = (0, react_1.useState)('all');
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [pageSize, setPageSize] = (0, react_1.useState)(12);
+    const [viewMode, setViewMode] = (0, react_1.useState)(() => {
+        if (typeof window === 'undefined')
+            return 'cards';
+        const saved = window.localStorage.getItem('operations-schedule-adjustments-view-mode');
+        return saved === 'table' ? 'table' : 'cards';
+    });
+    const [isSheetOpen, setIsSheetOpen] = (0, react_1.useState)(false);
+    const [isDetailsOpen, setIsDetailsOpen] = (0, react_1.useState)(false);
+    const [selectedRequest, setSelectedRequest] = (0, react_1.useState)(null);
+    const [form, setForm] = (0, react_1.useState)(emptyForm);
+    const getRequestScopeLabel = (value) => {
+        if (!value) {
+            return '-';
+        }
+        const key = `options.requestScopes.${value}`;
+        return t.has(key) ? t(key) : (0, format_1.formatEnumLabel)(value);
+    };
+    const getStatusLabel = (value) => {
+        if (!value) {
+            return '-';
+        }
+        const key = `options.statuses.${value}`;
+        return t.has(key) ? t(key) : (0, format_1.formatEnumLabel)(value);
+    };
+    const getStatusDescription = (value) => {
+        if (!value) {
+            return null;
+        }
+        const key = `statusHelp.${value}`;
+        return t.has(key) ? t(key) : null;
+    };
+    const { data: requestsResponse, refetch } = (0, next_app_provider_1.useQuery)({
+        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 (0, api_1.fetchOperations)(request, `/operations/schedule-adjustments?${params.toString()}`);
+        },
+        placeholderData: (previous) => previous,
+    });
+    const requests = (_a = requestsResponse === null || requestsResponse === void 0 ? void 0 : requestsResponse.data) !== null && _a !== void 0 ? _a : [];
+    const handleViewModeChange = (value) => {
+        if (value !== 'table' && value !== 'cards')
+            return;
+        setViewMode(value);
+        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 = (0, react_1.useMemo)(() => groupScheduleLines(form.days.map((day) => (Object.assign(Object.assign({}, day), { breakMinutes: day.isWorkingDay
+            ? (0, forms_1.parseNumberInput)(day.breakMinutes)
+            : null }))), currentLocaleCode)
+        .filter((line) => !line.isOff)
+        .map((line) => `${line.dayLabel}: ${line.time}`)
+        .join(', ') || '-', [form.days, currentLocaleCode]);
+    const workingDaysCount = (0, react_1.useMemo)(() => form.days.filter((day) => day.isWorkingDay).length, [form.days]);
+    const updateDay = (weekday, patch) => {
+        setForm((current) => (Object.assign(Object.assign({}, current), { days: current.days.map((day) => day.weekday === weekday ? Object.assign(Object.assign({}, day), patch) : day) })));
+    };
+    const onSubmit = async () => {
+        if (!form.effectiveStartDate) {
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', t('messages.requiredFields'));
+            return;
+        }
+        try {
+            await (0, api_1.mutateOperations)(request, '/operations/schedule-adjustments', 'POST', {
+                requestScope: form.requestScope,
+                effectiveStartDate: form.effectiveStartDate,
+                effectiveEndDate: (0, forms_1.trimToNull)(form.effectiveEndDate),
+                reason: (0, forms_1.trimToNull)(form.reason),
+                days: form.days.map((day) => ({
+                    weekday: day.weekday,
+                    isWorkingDay: day.isWorkingDay,
+                    startTime: day.isWorkingDay ? (0, forms_1.trimToNull)(day.startTime) : null,
+                    endTime: day.isWorkingDay ? (0, forms_1.trimToNull)(day.endTime) : null,
+                    breakMinutes: day.isWorkingDay
+                        ? (0, forms_1.parseNumberInput)(day.breakMinutes)
+                        : 0,
+                })),
+            });
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('success', t('messages.saveSuccess'));
+            setIsSheetOpen(false);
+            setForm(emptyForm);
+            await refetch();
+        }
+        catch (_a) {
+            showToastHandler === null || showToastHandler === void 0 ? void 0 : showToastHandler('error', t('messages.saveError'));
+        }
+    };
+    const openDetails = (requestItem) => {
+        setSelectedRequest(requestItem);
+        setIsDetailsOpen(true);
+    };
+    return (<entity_list_1.Page>
+      <operations_header_1.OperationsHeader title={t('title')} description={t('description')} current={t('breadcrumb')} actions={access.isCollaborator ? (<button_1.Button size="sm" onClick={() => setIsSheetOpen(true)}>
+              <lucide_react_1.Plus className="size-4"/>
+              {commonT('actions.create')}
+            </button_1.Button>) : undefined}/>
+
+      <kpi_cards_grid_1.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">
+          <entity_list_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>
+          <toggle_group_1.ToggleGroup type="single" value={viewMode} onValueChange={handleViewModeChange} variant="outline" size="sm">
+            <toggle_group_1.ToggleGroupItem value="table" className="gap-1.5 px-2.5">
+              <lucide_react_1.List className="h-4 w-4"/>
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </toggle_group_1.ToggleGroupItem>
+            <toggle_group_1.ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
+              <lucide_react_1.LayoutGrid className="h-4 w-4"/>
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </toggle_group_1.ToggleGroupItem>
+          </toggle_group_1.ToggleGroup>
+        </div>
+      </div>
+
+      {requests.length > 0 ? (viewMode === 'cards' ? (<div className="space-y-3">
+            {requests.map((requestItem) => {
+                var _a, _b;
+                return (<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">
+                      <lucide_react_1.User className="size-4 shrink-0 text-muted-foreground"/>
+                      <span className="font-semibold">
+                        {requestItem.collaboratorName}
+                      </span>
+                      <badge_1.Badge variant="outline" className="text-xs">
+                        {getRequestScopeLabel(requestItem.requestScope)}
+                      </badge_1.Badge>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                      <lucide_react_1.CalendarRange className="size-3.5 shrink-0"/>
+                      <span>
+                        {(0, format_1.formatDateRange)(requestItem.effectiveStartDate, requestItem.effectiveEndDate)}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex flex-col items-end gap-1">
+                    <status_badge_1.StatusBadge label={getStatusLabel(requestItem.status)} className={(0, format_1.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={(_a = requestItem.currentSchedule) !== null && _a !== void 0 ? _a : []} 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={((_b = requestItem.days) !== null && _b !== void 0 ? _b : [])} 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">
+                      <lucide_react_1.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_1.Button variant="outline" size="sm" className="cursor-pointer" onClick={() => openDetails(requestItem)}>
+                        <lucide_react_1.Eye className="size-4"/>
+                        {t('actions.viewDetails')}
+                      </button_1.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_1.Table>
+              <table_1.TableHeader>
+                <table_1.TableRow>
+                  <table_1.TableHead>{commonT('labels.collaborator')}</table_1.TableHead>
+                  <table_1.TableHead>{t('table.scope')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.timeline')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.approver')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.status')}</table_1.TableHead>
+                  <table_1.TableHead className="text-right">
+                    {commonT('labels.actions')}
+                  </table_1.TableHead>
+                </table_1.TableRow>
+              </table_1.TableHeader>
+              <table_1.TableBody>
+                {requests.map((requestItem) => (<table_1.TableRow key={requestItem.id} className="hover:bg-muted/30">
+                    <table_1.TableCell className="font-medium">
+                      {requestItem.collaboratorName}
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <badge_1.Badge variant="outline" className="text-xs">
+                        {getRequestScopeLabel(requestItem.requestScope)}
+                      </badge_1.Badge>
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      {(0, format_1.formatDateRange)(requestItem.effectiveStartDate, requestItem.effectiveEndDate)}
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      {requestItem.approverName ||
+                    commonT('labels.notAssigned')}
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <status_badge_1.StatusBadge label={getStatusLabel(requestItem.status)} className={(0, format_1.getStatusBadgeClass)(requestItem.status)}/>
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <div className="flex justify-end">
+                        <button_1.Button variant="outline" size="sm" className="cursor-pointer" onClick={() => openDetails(requestItem)}>
+                          <lucide_react_1.Eye className="size-4"/>
+                          {t('actions.viewDetails')}
+                        </button_1.Button>
+                      </div>
+                    </table_1.TableCell>
+                  </table_1.TableRow>))}
+              </table_1.TableBody>
+            </table_1.Table>
+          </div>)) : (<entity_list_1.EmptyState icon={<lucide_react_1.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()}/>)}
+
+      <entity_list_1.PaginationFooter currentPage={page} pageSize={pageSize} totalItems={(_b = requestsResponse === null || requestsResponse === void 0 ? void 0 : requestsResponse.total) !== null && _b !== void 0 ? _b : 0} pageSizeOptions={[12, 24, 48]} onPageChange={setPage} onPageSizeChange={(size) => {
+            setPageSize(size);
+            setPage(1);
+        }}/>
+
+      <sheet_1.Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <sheet_1.SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
+          <sheet_1.SheetHeader>
+            <sheet_1.SheetTitle>{t('sheet.title')}</sheet_1.SheetTitle>
+            <sheet_1.SheetDescription>{t('sheet.description')}</sheet_1.SheetDescription>
+          </sheet_1.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_1.Select value={form.requestScope} onValueChange={(value) => setForm((current) => (Object.assign(Object.assign({}, current), { requestScope: value })))}>
+                  <select_1.SelectTrigger className="w-full">
+                    <select_1.SelectValue />
+                  </select_1.SelectTrigger>
+                  <select_1.SelectContent>
+                    <select_1.SelectItem value="temporary">
+                      {getRequestScopeLabel('temporary')}
+                    </select_1.SelectItem>
+                    <select_1.SelectItem value="permanent">
+                      {getRequestScopeLabel('permanent')}
+                    </select_1.SelectItem>
+                  </select_1.SelectContent>
+                </select_1.Select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  {commonT('labels.startDate')}
+                </label>
+                <input_1.Input type="date" value={form.effectiveStartDate} onChange={(event) => setForm((current) => (Object.assign(Object.assign({}, current), { effectiveStartDate: event.target.value })))}/>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  {commonT('labels.endDate')}
+                </label>
+                <input_1.Input type="date" value={form.effectiveEndDate} onChange={(event) => setForm((current) => (Object.assign(Object.assign({}, current), { effectiveEndDate: event.target.value })))}/>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {commonT('labels.reason')}
+              </label>
+              <textarea_1.Textarea rows={3} placeholder={t('sheet.reasonPlaceholder')} value={form.reason} onChange={(event) => setForm((current) => (Object.assign(Object.assign({}, 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">
+                          {(0, format_1.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_1.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_1.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_1.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_1.Input type="number" value={day.breakMinutes} disabled={!day.isWorkingDay} onChange={(event) => updateDay(day.weekday, {
+                breakMinutes: event.target.value,
+            })}/>
+                      </div>
+                    </div>
+                  </div>))}
+              </div>
+            </div>
+          </div>
+
+          <form_actions_1.FormActions sheet cancelLabel={commonT('actions.cancel')} onCancel={() => setIsSheetOpen(false)} onSubmit={() => void onSubmit()} submitLabel={commonT('actions.save')}/>
+        </sheet_1.SheetContent>
+      </sheet_1.Sheet>
+
+      <sheet_1.Sheet open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
+        <sheet_1.SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
+          <sheet_1.SheetHeader>
+            <sheet_1.SheetTitle>{t('details.title')}</sheet_1.SheetTitle>
+            <sheet_1.SheetDescription>{t('details.description')}</sheet_1.SheetDescription>
+          </sheet_1.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>
+                  <status_badge_1.StatusBadge label={getStatusLabel(selectedRequest.status)} className={(0, format_1.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">
+                    {(0, format_1.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={(_c = selectedRequest.currentSchedule) !== null && _c !== void 0 ? _c : []} 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={((_d = selectedRequest.days) !== null && _d !== void 0 ? _d : [])} 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}
+        </sheet_1.SheetContent>
+      </sheet_1.Sheet>
+    </entity_list_1.Page>);
+}
+//# sourceMappingURL=page.js.map