@hed-hog/operations 0.0.302 → 0.0.304

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

@@ -37,12 +37,12 @@ import {
   getStatusBadgeClass,
 } from '../_lib/utils/format';
 
-type PendingDecision = {
-  approval: OperationsApproval;
-  action: 'approve' | 'reject';
-};
-
-export default function OperationsApprovalsPage() {
+type PendingDecision = {
+  approval: OperationsApproval;
+  action: 'approve' | 'reject';
+};
+
+export default function OperationsApprovalsPage() {
   const t = useTranslations('operations.ApprovalsPage');
   const commonT = useTranslations('operations.Common');
   const { request, showToastHandler, currentLocaleCode } = useApp();
@@ -50,73 +50,73 @@ export default function OperationsApprovalsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [targetFilter, setTargetFilter] = useState('all');
-  const [decisionNote, setDecisionNote] = useState('');
-  const [pendingDecision, setPendingDecision] = useState<PendingDecision | null>(
-    null
-  );
-
-  const getStatusLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.statuses.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getTargetTypeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.targetTypes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getTimeOffTypeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.timeOffTypes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getScheduleScopeLabel = (value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.scheduleScopes.${value}`;
-    return t.has(key) ? t(key) : formatEnumLabel(value);
-  };
-
-  const getTargetLabel = (approval: OperationsApproval) => {
-    switch (approval.targetType) {
-      case 'timesheet':
-        return `${getTargetTypeLabel('timesheet')} ${formatDateRange(
-          approval.timesheetWeekStartDate,
-          approval.timesheetWeekEndDate
-        )}`;
-      case 'time_off_request':
-        return `${getTimeOffTypeLabel(approval.timeOffType)} ${formatDateRange(
-          approval.timeOffStartDate,
-          approval.timeOffEndDate
-        )}`;
-      case 'schedule_adjustment_request':
-        return `${getScheduleScopeLabel(approval.scheduleRequestScope)} ${formatDateRange(
-          approval.scheduleStartDate,
-          approval.scheduleEndDate
-        )}`;
-      default:
-        return getTargetTypeLabel(approval.targetType);
-    }
-  };
+  const [decisionNote, setDecisionNote] = useState('');
+  const [pendingDecision, setPendingDecision] =
+    useState<PendingDecision | null>(null);
+
+  const getStatusLabel = (value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.statuses.${value}`;
+    return t.has(key) ? t(key) : formatEnumLabel(value);
+  };
+
+  const getTargetTypeLabel = (value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.targetTypes.${value}`;
+    return t.has(key) ? t(key) : formatEnumLabel(value);
+  };
+
+  const getTimeOffTypeLabel = (value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.timeOffTypes.${value}`;
+    return t.has(key) ? t(key) : formatEnumLabel(value);
+  };
+
+  const getScheduleScopeLabel = (value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.scheduleScopes.${value}`;
+    return t.has(key) ? t(key) : formatEnumLabel(value);
+  };
+
+  const getTargetLabel = (approval: OperationsApproval) => {
+    switch (approval.targetType) {
+      case 'timesheet':
+        return `${getTargetTypeLabel('timesheet')} ${formatDateRange(
+          approval.timesheetWeekStartDate,
+          approval.timesheetWeekEndDate
+        )}`;
+      case 'time_off_request':
+        return `${getTimeOffTypeLabel(approval.timeOffType)} ${formatDateRange(
+          approval.timeOffStartDate,
+          approval.timeOffEndDate
+        )}`;
+      case 'schedule_adjustment_request':
+        return `${getScheduleScopeLabel(approval.scheduleRequestScope)} ${formatDateRange(
+          approval.scheduleStartDate,
+          approval.scheduleEndDate
+        )}`;
+      default:
+        return getTargetTypeLabel(approval.targetType);
+    }
+  };
 
   const { data: approvals = [], refetch } = useQuery<OperationsApproval[]>({
     queryKey: ['operations-approvals', currentLocaleCode],
     enabled: access.isSupervisor,
-    queryFn: () => fetchOperations<OperationsApproval[]>(request, '/operations/approvals'),
+    queryFn: () =>
+      fetchOperations<OperationsApproval[]>(request, '/operations/approvals'),
   });
 
   const filteredRows = useMemo(
@@ -124,10 +124,17 @@ export default function OperationsApprovalsPage() {
       approvals.filter((item) => {
         const matchesSearch = !search.trim()
           ? true
-          : [item.requesterName, item.approverName, item.decisionNote, getTargetLabel(item)]
+          : [
+              item.requesterName,
+              item.approverName,
+              item.decisionNote,
+              getTargetLabel(item),
+            ]
               .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;
@@ -142,16 +149,19 @@ export default function OperationsApprovalsPage() {
     {
       key: 'pending',
       title: t('cards.pending'),
+      description: t('cards.pendingDescription'),
       value: approvals.filter((item) => item.status === 'pending').length,
     },
     {
       key: 'approved',
       title: t('cards.approved'),
+      description: t('cards.approvedDescription'),
       value: approvals.filter((item) => item.status === 'approved').length,
     },
     {
       key: 'rejected',
       title: t('cards.rejected'),
+      description: t('cards.rejectedDescription'),
       value: approvals.filter((item) => item.status === 'rejected').length,
     },
   ];
@@ -230,12 +240,12 @@ export default function OperationsApprovalsPage() {
             value: statusFilter,
             onChange: setStatusFilter,
             placeholder: commonT('labels.status'),
-            options: [
-              { value: 'all', label: commonT('filters.allStatuses') },
-              { value: 'pending', label: getStatusLabel('pending') },
-              { value: 'approved', label: getStatusLabel('approved') },
-              { value: 'rejected', label: getStatusLabel('rejected') },
-            ],
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'pending', label: getStatusLabel('pending') },
+              { value: 'approved', label: getStatusLabel('approved') },
+              { value: 'rejected', label: getStatusLabel('rejected') },
+            ],
           },
           {
             id: 'target',
@@ -243,18 +253,18 @@ export default function OperationsApprovalsPage() {
             value: targetFilter,
             onChange: setTargetFilter,
             placeholder: commonT('labels.requestType'),
-            options: [
-              { value: 'all', label: commonT('filters.allTypes') },
-              { value: 'timesheet', label: getTargetTypeLabel('timesheet') },
-              {
-                value: 'time_off_request',
-                label: getTargetTypeLabel('time_off_request'),
-              },
-              {
-                value: 'schedule_adjustment_request',
-                label: getTargetTypeLabel('schedule_adjustment_request'),
-              },
-            ],
+            options: [
+              { value: 'all', label: commonT('filters.allTypes') },
+              { value: 'timesheet', label: getTargetTypeLabel('timesheet') },
+              {
+                value: 'time_off_request',
+                label: getTargetTypeLabel('time_off_request'),
+              },
+              {
+                value: 'schedule_adjustment_request',
+                label: getTargetTypeLabel('schedule_adjustment_request'),
+              },
+            ],
           },
         ]}
       />
@@ -269,7 +279,7 @@ export default function OperationsApprovalsPage() {
                 <TableHead>{commonT('labels.submittedAt')}</TableHead>
                 <TableHead>{commonT('labels.approver')}</TableHead>
                 <TableHead>{commonT('labels.status')}</TableHead>
-                <TableHead className="w-[180px] text-right">
+                <TableHead className="w-45 text-right">
                   {commonT('labels.actions')}
                 </TableHead>
               </TableRow>
@@ -291,7 +301,9 @@ export default function OperationsApprovalsPage() {
                     </div>
                   </TableCell>
                   <TableCell>
-                    <div>{approval.approverName || commonT('labels.notAssigned')}</div>
+                    <div>
+                      {approval.approverName || commonT('labels.notAssigned')}
+                    </div>
                     <div className="text-xs text-muted-foreground">
                       {approval.targetType === 'timesheet'
                         ? [
@@ -304,14 +316,15 @@ export default function OperationsApprovalsPage() {
                             .join(' • ') || commonT('labels.notAvailable')
                         : approval.targetType === 'time_off_request'
                           ? approval.timeOffReason || commonT('labels.noNotes')
-                          : approval.scheduleReason || commonT('labels.noNotes')}
+                          : approval.scheduleReason ||
+                            commonT('labels.noNotes')}
                     </div>
                   </TableCell>
                   <TableCell>
-                    <StatusBadge
-                      label={getStatusLabel(approval.status)}
-                      className={getStatusBadgeClass(approval.status)}
-                    />
+                    <StatusBadge
+                      label={getStatusLabel(approval.status)}
+                      className={getStatusBadgeClass(approval.status)}
+                    />
                   </TableCell>
                   <TableCell>
                     {approval.status === 'pending' ? (
@@ -386,10 +399,13 @@ export default function OperationsApprovalsPage() {
           </DialogHeader>
 
           <div className="space-y-2">
-            <label className="text-sm font-medium">{commonT('labels.noteOptional')}</label>
+            <label className="text-sm font-medium">
+              {commonT('labels.noteOptional')}
+            </label>
             <Textarea
               rows={4}
               value={decisionNote}
+              placeholder={t('dialog.notePlaceholder')}
               onChange={(event) => setDecisionNote(event.target.value)}
             />
           </div>
@@ -406,7 +422,9 @@ export default function OperationsApprovalsPage() {
             </Button>
             <Button
               variant={
-                pendingDecision?.action === 'approve' ? 'default' : 'destructive'
+                pendingDecision?.action === 'approve'
+                  ? 'default'
+                  : 'destructive'
               }
               onClick={() => void decide()}
             >