@hed-hog/operations 0.0.303 → 0.0.304

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

@@ -2,6 +2,7 @@
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
 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 {
@@ -11,7 +12,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
 import {
   Sheet,
   SheetContent,
@@ -19,6 +19,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
 import {
   Table,
   TableBody,
@@ -30,8 +31,8 @@ import {
 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 { useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
@@ -40,13 +41,14 @@ import type {
   OperationsScheduleAdjustmentDay,
   OperationsScheduleAdjustmentRequest,
 } from '../_lib/types';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
 import {
   formatDateRange,
   formatEnumLabel,
+  formatWeekdayLabel,
   getStatusBadgeClass,
   summarizeScheduleDays,
 } from '../_lib/utils/format';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
 
 const weekdays = [
   'monday',
@@ -86,33 +88,42 @@ const emptyForm: ScheduleFormState = {
   })),
 };
 
-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 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);
-  };
+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 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: requests = [], refetch } = useQuery<
     OperationsScheduleAdjustmentRequest[]
@@ -139,7 +150,9 @@ export default function OperationsScheduleAdjustmentsPage() {
             ]
               .filter(Boolean)
               .some((value) =>
-                String(value).toLowerCase().includes(search.trim().toLowerCase())
+                String(value)
+                  .toLowerCase()
+                  .includes(search.trim().toLowerCase())
               );
         const matchesStatus =
           statusFilter === 'all' ? true : item.status === statusFilter;
@@ -152,20 +165,34 @@ export default function OperationsScheduleAdjustmentsPage() {
     {
       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'),
-      value: requests.filter((item) => item.requestScope === 'permanent').length,
+      description: t('cards.permanentDescription'),
+      value: requests.filter((item) => item.requestScope === 'permanent')
+        .length,
     },
   ];
 
+  const requestedScheduleSummary = useMemo(
+    () => summarizeScheduleDays(form.days, currentLocaleCode),
+    [form.days, currentLocaleCode]
+  );
+
+  const workingDaysCount = useMemo(
+    () => form.days.filter((day) => day.isWorkingDay).length,
+    [form.days]
+  );
+
   const updateDay = (
     weekday: string,
     patch: Partial<ScheduleFormState['days'][number]>
@@ -185,19 +212,26 @@ export default function OperationsScheduleAdjustmentsPage() {
     }
 
     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,
-        })),
-      });
+      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);
@@ -236,12 +270,12 @@ export default function OperationsScheduleAdjustmentsPage() {
             value: statusFilter,
             onChange: setStatusFilter,
             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') },
-            ],
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'submitted', label: getStatusLabel('submitted') },
+              { value: 'approved', label: getStatusLabel('approved') },
+              { value: 'rejected', label: getStatusLabel('rejected') },
+            ],
           },
         ]}
       />
@@ -257,7 +291,7 @@ export default function OperationsScheduleAdjustmentsPage() {
                 <TableHead>{commonT('labels.requestScope')}</TableHead>
                 <TableHead>{commonT('labels.timeline')}</TableHead>
                 <TableHead>{t('table.currentSchedule')}</TableHead>
-                <TableHead>{commonT('labels.schedule')}</TableHead>
+                <TableHead>{t('table.requestedSchedule')}</TableHead>
                 <TableHead>{commonT('labels.approver')}</TableHead>
                 <TableHead>{commonT('labels.status')}</TableHead>
                 <TableHead>{commonT('labels.notes')}</TableHead>
@@ -267,7 +301,9 @@ export default function OperationsScheduleAdjustmentsPage() {
               {filteredRows.map((requestItem) => (
                 <TableRow key={requestItem.id}>
                   <TableCell>{requestItem.collaboratorName}</TableCell>
-                  <TableCell>{getRequestScopeLabel(requestItem.requestScope)}</TableCell>
+                  <TableCell>
+                    {getRequestScopeLabel(requestItem.requestScope)}
+                  </TableCell>
                   <TableCell>
                     {formatDateRange(
                       requestItem.effectiveStartDate,
@@ -275,21 +311,33 @@ export default function OperationsScheduleAdjustmentsPage() {
                     )}
                   </TableCell>
                   <TableCell>
-                    {summarizeScheduleDays(requestItem.currentSchedule ?? [])}
+                    {summarizeScheduleDays(
+                      requestItem.currentSchedule ?? [],
+                      currentLocaleCode
+                    )}
                   </TableCell>
                   <TableCell>
                     {summarizeScheduleDays(
-                      (requestItem.days ?? []) as OperationsScheduleAdjustmentDay[]
+                      (requestItem.days ??
+                        []) as OperationsScheduleAdjustmentDay[],
+                      currentLocaleCode
                     )}
                   </TableCell>
                   <TableCell>
                     {requestItem.approverName || commonT('labels.notAssigned')}
                   </TableCell>
                   <TableCell>
-                    <StatusBadge
-                      label={getStatusLabel(requestItem.status)}
-                      className={getStatusBadgeClass(requestItem.status)}
-                    />
+                    <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')}
@@ -304,8 +352,16 @@ export default function OperationsScheduleAdjustmentsPage() {
           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()}
+          actionLabel={
+            access.isCollaborator
+              ? commonT('actions.create')
+              : commonT('actions.refresh')
+          }
+          onAction={
+            access.isCollaborator
+              ? () => setIsSheetOpen(true)
+              : () => void refetch()
+          }
         />
       )}
 
@@ -316,31 +372,35 @@ export default function OperationsScheduleAdjustmentsPage() {
             <SheetDescription>{t('sheet.description')}</SheetDescription>
           </SheetHeader>
 
-          <div className="mt-6 grid gap-4">
+          <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>
+                <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">
-                      {getRequestScopeLabel('temporary')}
-                    </SelectItem>
-                    <SelectItem value="permanent">
-                      {getRequestScopeLabel('permanent')}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
+                  <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>
+                <label className="text-sm font-medium">
+                  {commonT('labels.startDate')}
+                </label>
                 <Input
                   type="date"
                   value={form.effectiveStartDate}
@@ -353,7 +413,9 @@ export default function OperationsScheduleAdjustmentsPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{commonT('labels.endDate')}</label>
+                <label className="text-sm font-medium">
+                  {commonT('labels.endDate')}
+                </label>
                 <Input
                   type="date"
                   value={form.effectiveEndDate}
@@ -368,71 +430,133 @@ export default function OperationsScheduleAdjustmentsPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.reason')}</label>
+              <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 }))
+                  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="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-[1fr_auto_1fr_1fr_1fr]"
+                    className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]"
                   >
-                    <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 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="flex items-center gap-2">
-                      <Switch
-                        checked={day.isWorkingDay}
-                        onCheckedChange={(checked) =>
-                          updateDay(day.weekday, { isWorkingDay: checked })
-                        }
-                      />
+                    <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>
-                    <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>
+
+          <FormActions
+            sheet
+            cancelLabel={commonT('actions.cancel')}
+            onCancel={() => setIsSheetOpen(false)}
+            onSubmit={() => void onSubmit()}
+            submitLabel={commonT('actions.save')}
+          />
         </SheetContent>
       </Sheet>
     </Page>

package/hedhog/frontend/app/team/page.tsx.ejs

@@ -1,8 +1,8 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Table,
   TableBody,
@@ -61,31 +61,37 @@ export default function OperationsTeamPage() {
     {
       key: 'members',
       title: t('cards.members'),
+      description: t('cards.membersDescription'),
       value: team?.teamMembers.length ?? 0,
     },
     {
       key: 'projects',
       title: t('cards.projects'),
+      description: t('cards.projectsDescription'),
       value: team?.projectCount ?? 0,
     },
     {
       key: 'approvals',
       title: t('cards.pendingApprovals'),
+      description: t('cards.pendingApprovalsDescription'),
       value: team?.pendingApprovals ?? 0,
     },
     {
       key: 'timeOff',
       title: t('cards.timeOff'),
+      description: t('cards.timeOffDescription'),
       value: team?.pendingItems?.timeOffRequests ?? 0,
     },
     {
       key: 'schedule',
       title: t('cards.scheduleAdjustments'),
+      description: t('cards.scheduleAdjustmentsDescription'),
       value: team?.pendingItems?.scheduleAdjustmentRequests ?? 0,
     },
     {
       key: 'timesheets',
       title: t('cards.timesheets'),
+      description: t('cards.timesheetsDescription'),
       value: team?.pendingItems?.timesheets ?? 0,
     },
   ];
@@ -120,7 +126,14 @@ export default function OperationsTeamPage() {
                     <TableCell>
                       <div className="font-medium">{member.displayName}</div>
                       <div className="text-xs text-muted-foreground">
-                        {[member.code, formatEnumLabel(member.collaboratorType)]
+                        {[
+                          member.code,
+                          member.collaboratorType ||
+                            formatEnumLabel(
+                              member.collaboratorTypeSlug ??
+                                member.collaboratorType
+                            ),
+                        ]
                           .filter(Boolean)
                           .join(' • ')}
                       </div>