@hed-hog/operations 0.0.305 → 0.0.306

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { EmptyState, Page, 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';
@@ -20,17 +21,9 @@ import {
   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 { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { CalendarRange, Plus } from 'lucide-react';
+import { CalendarRange, Clock, Plus, User } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
@@ -46,7 +39,6 @@ import {
   formatEnumLabel,
   formatWeekdayLabel,
   getStatusBadgeClass,
-  summarizeScheduleDays,
 } from '../_lib/utils/format';
 import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
 
@@ -60,6 +52,130 @@ const weekdays = [
   '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;
@@ -184,7 +300,19 @@ export default function OperationsScheduleAdjustmentsPage() {
   ];
 
   const requestedScheduleSummary = useMemo(
-    () => summarizeScheduleDays(form.days, currentLocaleCode),
+    () =>
+      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]
   );
 
@@ -283,69 +411,104 @@ export default function OperationsScheduleAdjustmentsPage() {
       <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>{t('table.requestedSchedule')}</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>
-                    {getRequestScopeLabel(requestItem.requestScope)}
-                  </TableCell>
-                  <TableCell>
-                    {formatDateRange(
-                      requestItem.effectiveStartDate,
-                      requestItem.effectiveEndDate
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {summarizeScheduleDays(
-                      requestItem.currentSchedule ?? [],
-                      currentLocaleCode
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {summarizeScheduleDays(
+        <div className="space-y-3">
+          {filteredRows.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[],
-                      currentLocaleCode
-                    )}
-                  </TableCell>
-                  <TableCell>
+                        []) 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="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')}
-                  </TableCell>
-                  <TableCell>
-                    <div className="space-y-1">
-                      <StatusBadge
-                        label={getStatusLabel(requestItem.status)}
-                        className={getStatusBadgeClass(requestItem.status)}
-                      />
-                      {getStatusDescription(requestItem.status) ? (
-                        <p className="max-w-40 text-xs text-muted-foreground">
-                          {getStatusDescription(requestItem.status)}
-                        </p>
-                      ) : null}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    {requestItem.approverNote || commonT('labels.noNotes')}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+                  </span>
+                </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>
       ) : (
         <EmptyState