@hed-hog/operations 0.0.299 → 0.0.301

package/hedhog/frontend/app/time-off/page.tsx.ejs

@@ -59,15 +59,33 @@ const emptyForm: TimeOffFormState = {
   reason: '',
 };
 
-export default function OperationsTimeOffPage() {
-  const t = useTranslations('operations.TimeOffPage');
-  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<TimeOffFormState>(emptyForm);
+export default function OperationsTimeOffPage() {
+  const t = useTranslations('operations.TimeOffPage');
+  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<TimeOffFormState>(emptyForm);
+
+  const getRequestTypeLabel = (value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.requestTypes.${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 { data: requests = [], refetch } = useQuery<OperationsTimeOffRequest[]>({
     queryKey: ['operations-time-off', currentLocaleCode],
@@ -166,12 +184,12 @@ export default function OperationsTimeOffPage() {
             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') },
-            ],
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'submitted', label: getStatusLabel('submitted') },
+              { value: 'approved', label: getStatusLabel('approved') },
+              { value: 'rejected', label: getStatusLabel('rejected') },
+            ],
           },
         ]}
       />
@@ -196,7 +214,7 @@ export default function OperationsTimeOffPage() {
               {filteredRows.map((requestItem) => (
                 <TableRow key={requestItem.id}>
                   <TableCell>{requestItem.collaboratorName}</TableCell>
-                  <TableCell>{formatEnumLabel(requestItem.requestType)}</TableCell>
+                  <TableCell>{getRequestTypeLabel(requestItem.requestType)}</TableCell>
                   <TableCell>
                     <div>
                       {formatDateRange(requestItem.startDate, requestItem.endDate)}
@@ -209,10 +227,10 @@ export default function OperationsTimeOffPage() {
                     {requestItem.approverName || commonT('labels.notAssigned')}
                   </TableCell>
                   <TableCell>
-                    <StatusBadge
-                      label={formatEnumLabel(requestItem.status)}
-                      className={getStatusBadgeClass(requestItem.status)}
-                    />
+                    <StatusBadge
+                      label={getStatusLabel(requestItem.status)}
+                      className={getStatusBadgeClass(requestItem.status)}
+                    />
                   </TableCell>
                   <TableCell>
                     {requestItem.reason || commonT('labels.noNotes')}
@@ -251,17 +269,25 @@ export default function OperationsTimeOffPage() {
                   setForm((current) => ({ ...current, requestType: value }))
                 }
               >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="vacation">Vacation</SelectItem>
-                  <SelectItem value="personal_time">Personal Time</SelectItem>
-                  <SelectItem value="sick_leave">Sick Leave</SelectItem>
-                  <SelectItem value="unpaid_leave">Unpaid Leave</SelectItem>
-                  <SelectItem value="other">Other</SelectItem>
-                </SelectContent>
-              </Select>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="vacation">
+                    {getRequestTypeLabel('vacation')}
+                  </SelectItem>
+                  <SelectItem value="personal_time">
+                    {getRequestTypeLabel('personal_time')}
+                  </SelectItem>
+                  <SelectItem value="sick_leave">
+                    {getRequestTypeLabel('sick_leave')}
+                  </SelectItem>
+                  <SelectItem value="unpaid_leave">
+                    {getRequestTypeLabel('unpaid_leave')}
+                  </SelectItem>
+                  <SelectItem value="other">{getRequestTypeLabel('other')}</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
 
             <div className="grid gap-4 md:grid-cols-2">

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

@@ -78,7 +78,9 @@ const emptyForm: TimesheetFormState = {
   entries: [createEmptyEntry()],
 };
 
-function toFormState(timesheet?: OperationsTimesheet | null): TimesheetFormState {
+function toFormState(
+  timesheet?: OperationsTimesheet | null
+): TimesheetFormState {
   if (!timesheet) {
     return emptyForm;
   }
@@ -87,21 +89,20 @@ function toFormState(timesheet?: OperationsTimesheet | null): TimesheetFormState
     weekStartDate: timesheet.weekStartDate ?? '',
     weekEndDate: timesheet.weekEndDate ?? '',
     notes: timesheet.notes ?? '',
-    entries:
-      timesheet.entries?.length
-        ? timesheet.entries.map((entry) => ({
-            projectAssignmentId: entry.projectAssignmentId
-              ? String(entry.projectAssignmentId)
-              : 'none',
-            activityLabel: entry.activityLabel ?? '',
-            workDate: entry.workDate ?? '',
-            hours:
-              entry.hours !== null && entry.hours !== undefined
-                ? String(entry.hours)
-                : '',
-            description: entry.description ?? '',
-          }))
-        : [createEmptyEntry()],
+    entries: timesheet.entries?.length
+      ? timesheet.entries.map((entry) => ({
+          projectAssignmentId: entry.projectAssignmentId
+            ? String(entry.projectAssignmentId)
+            : 'none',
+          activityLabel: entry.activityLabel ?? '',
+          workDate: entry.workDate ?? '',
+          hours:
+            entry.hours !== null && entry.hours !== undefined
+              ? String(entry.hours)
+              : '',
+          description: entry.description ?? '',
+        }))
+      : [createEmptyEntry()],
   };
 }
 
@@ -113,9 +114,8 @@ export default function OperationsTimesheetsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [editingTimesheet, setEditingTimesheet] = useState<OperationsTimesheet | null>(
-    null
-  );
+  const [editingTimesheet, setEditingTimesheet] =
+    useState<OperationsTimesheet | null>(null);
   const [form, setForm] = useState<TimesheetFormState>(emptyForm);
 
   const { data: timesheets = [], refetch } = useQuery<OperationsTimesheet[]>({
@@ -128,13 +128,17 @@ export default function OperationsTimesheetsPage() {
     queryKey: ['operations-timesheets-me', currentLocaleCode],
     enabled: access.isCollaborator,
     queryFn: () =>
-      fetchOperations<OperationsCollaborator>(request, '/operations/collaborators/me'),
+      fetchOperations<OperationsCollaborator>(
+        request,
+        '/operations/collaborators/me'
+      ),
   });
 
   const { data: projects = [] } = useQuery<OperationsProject[]>({
     queryKey: ['operations-timesheet-project-options', currentLocaleCode],
     enabled: access.isCollaborator,
-    queryFn: () => fetchOperations<OperationsProject[]>(request, '/operations/projects'),
+    queryFn: () =>
+      fetchOperations<OperationsProject[]>(request, '/operations/projects'),
   });
 
   const projectOptions = useMemo(
@@ -143,7 +147,9 @@ export default function OperationsTimesheetsPage() {
         .filter((project) => project.myAssignmentId)
         .map((project) => ({
           value: String(project.myAssignmentId),
-          label: [project.name, project.myRoleLabel].filter(Boolean).join(' • '),
+          label: [project.name, project.myRoleLabel]
+            .filter(Boolean)
+            .join(' • '),
         })),
     [projects]
   );
@@ -164,7 +170,9 @@ export default function OperationsTimesheetsPage() {
             ]
               .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;
@@ -211,8 +219,8 @@ export default function OperationsTimesheetsPage() {
   const canManageRow = (timesheet: OperationsTimesheet) => {
     return Boolean(
       me?.id &&
-        timesheet.collaboratorId === me.id &&
-        ['draft', 'rejected'].includes(timesheet.status)
+      timesheet.collaboratorId === me.id &&
+      ['draft', 'rejected'].includes(timesheet.status)
     );
   };
 
@@ -283,7 +291,12 @@ export default function OperationsTimesheetsPage() {
           payload
         );
       } else {
-        await mutateOperations(request, '/operations/timesheets', 'POST', payload);
+        await mutateOperations(
+          request,
+          '/operations/timesheets',
+          'POST',
+          payload
+        );
       }
 
       showToastHandler?.('success', t('messages.saveSuccess'));
@@ -369,7 +382,9 @@ export default function OperationsTimesheetsPage() {
               {filteredRows.map((timesheet) => (
                 <TableRow key={timesheet.id}>
                   <TableCell>
-                    <div className="font-medium">{timesheet.collaboratorName}</div>
+                    <div className="font-medium">
+                      {timesheet.collaboratorName}
+                    </div>
                     <div className="text-xs text-muted-foreground">
                       {timesheet.notes || commonT('labels.noNotes')}
                     </div>
@@ -387,10 +402,11 @@ export default function OperationsTimesheetsPage() {
                     <div className="text-xs text-muted-foreground">
                       {(timesheet.entries ?? [])
                         .slice(0, 2)
-                        .map((entry) =>
-                          [entry.projectName, entry.activityLabel]
-                            .filter(Boolean)
-                            .join(' • ') || commonT('labels.unassigned')
+                        .map(
+                          (entry) =>
+                            [entry.projectName, entry.activityLabel]
+                              .filter(Boolean)
+                              .join(' • ') || commonT('labels.unassigned')
                         )
                         .join(', ') || commonT('labels.unassigned')}
                     </div>
@@ -400,7 +416,12 @@ export default function OperationsTimesheetsPage() {
                     {timesheet.approverName || commonT('labels.notAssigned')}
                   </TableCell>
                   <TableCell>
-                    <div>{formatDateRange(timesheet.weekStartDate, timesheet.weekEndDate)}</div>
+                    <div>
+                      {formatDateRange(
+                        timesheet.weekStartDate,
+                        timesheet.weekEndDate
+                      )}
+                    </div>
                     <div className="text-xs text-muted-foreground">
                       {timesheet.decisionNote || commonT('labels.noNotes')}
                     </div>
@@ -446,7 +467,11 @@ export default function OperationsTimesheetsPage() {
           icon={<ClipboardList className="size-12" />}
           title={commonT('states.emptyTitle')}
           description={t('emptyDescription')}
-          actionLabel={access.isCollaborator ? commonT('actions.create') : commonT('actions.refresh')}
+          actionLabel={
+            access.isCollaborator
+              ? commonT('actions.create')
+              : commonT('actions.refresh')
+          }
           onAction={access.isCollaborator ? openCreate : () => void refetch()}
         />
       )}
@@ -469,10 +494,12 @@ export default function OperationsTimesheetsPage() {
             <SheetDescription>{t('sheet.description')}</SheetDescription>
           </SheetHeader>
 
-          <div className="mt-6 grid gap-4">
+          <div className="mt-6 grid gap-4 px-4">
             <div className="grid gap-4 md:grid-cols-2">
               <div className="space-y-2">
-                <label className="text-sm font-medium">{commonT('labels.weekStart')}</label>
+                <label className="text-sm font-medium">
+                  {commonT('labels.weekStart')}
+                </label>
                 <Input
                   type="date"
                   value={form.weekStartDate}
@@ -485,7 +512,9 @@ export default function OperationsTimesheetsPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{commonT('labels.weekEnd')}</label>
+                <label className="text-sm font-medium">
+                  {commonT('labels.weekEnd')}
+                </label>
                 <Input
                   type="date"
                   value={form.weekEndDate}
@@ -500,12 +529,17 @@ export default function OperationsTimesheetsPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">{commonT('labels.notes')}</label>
+              <label className="text-sm font-medium">
+                {commonT('labels.notes')}
+              </label>
               <Textarea
                 rows={3}
                 value={form.notes}
                 onChange={(event) =>
-                  setForm((current) => ({ ...current, notes: event.target.value }))
+                  setForm((current) => ({
+                    ...current,
+                    notes: event.target.value,
+                  }))
                 }
               />
             </div>
@@ -513,7 +547,9 @@ export default function OperationsTimesheetsPage() {
             <div className="space-y-3">
               <div className="flex items-center justify-between">
                 <div>
-                  <div className="text-sm font-medium">{t('entries.title')}</div>
+                  <div className="text-sm font-medium">
+                    {t('entries.title')}
+                  </div>
                   <div className="text-xs text-muted-foreground">
                     {projectOptions.length > 0
                       ? t('entries.description')
@@ -551,7 +587,10 @@ export default function OperationsTimesheetsPage() {
                               {commonT('labels.unassigned')}
                             </SelectItem>
                             {projectOptions.map((option) => (
-                              <SelectItem key={option.value} value={option.value}>
+                              <SelectItem
+                                key={option.value}
+                                value={option.value}
+                              >
                                 {option.label}
                               </SelectItem>
                             ))}
@@ -566,7 +605,9 @@ export default function OperationsTimesheetsPage() {
                         <Input
                           value={entry.activityLabel}
                           onChange={(event) =>
-                            updateEntry(index, { activityLabel: event.target.value })
+                            updateEntry(index, {
+                              activityLabel: event.target.value,
+                            })
                           }
                           placeholder={t('entries.activityPlaceholder')}
                         />
@@ -580,7 +621,9 @@ export default function OperationsTimesheetsPage() {
                           rows={2}
                           value={entry.description}
                           onChange={(event) =>
-                            updateEntry(index, { description: event.target.value })
+                            updateEntry(index, {
+                              description: event.target.value,
+                            })
                           }
                         />
                       </div>