Merge pull request #468 from Gopher-Industries/AbhishekGhimires225777323/fix/timesheet-shift-label

Timesheet shift label

Author: Krisha190235

guard_app/src/screen/TimeSheetsScreen.tsx

@@ -14,14 +14,10 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
+import { myShifts, type ShiftDto } from '../api/shifts';
 import { getAllMyTimesheets, type Timesheet } from '../api/timesheets';
 import { useAppTheme } from '../theme';
-import {
-  formatHours,
-  formatShiftDate,
-  formatTimesheetDateTime,
-  sumHours,
-} from '../utils/timesheet';
+import { fmtShiftLabel, formatHours, formatTimesheetDateTime, sumHours } from '../utils/timesheet';
 
 import type { RootStackParamList } from '../navigation/AppNavigator';
 import type { AppColors } from '../theme/colors';
@@ -37,13 +33,18 @@ export default function TimesheetsScreen() {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [items, setItems] = useState<Timesheet[]>([]);
+  const [shiftsById, setShiftsById] = useState<Record<string, ShiftDto>>({});
   const [error, setError] = useState<string | null>(null);
 
   const load = async () => {
     try {
       setError(null);
-      const rows = await getAllMyTimesheets();
+      const [rows, shifts] = await Promise.all([
+        getAllMyTimesheets(),
+        myShifts().catch(() => [] as ShiftDto[]),
+      ]);
       setItems(rows);
+      setShiftsById(Object.fromEntries(shifts.map((shift) => [shift._id, shift])));
     } catch (e: unknown) {
       let msg = t('timesheet.error');
 
@@ -82,7 +83,7 @@ export default function TimesheetsScreen() {
       style={s.card}
       onPress={() => navigation.navigate('TimesheetDetails', { timesheetId: item.id })}
     >
-      <Text style={s.title}>{formatShiftDate(item.shiftDate)}</Text>
+      <Text style={s.title}>{fmtShiftLabel(shiftsById[item.shiftId], item.shiftId)}</Text>
 
       <View style={s.row}>
         <Text style={s.label}>{t('timesheet.checkIn')}</Text>

guard_app/src/utils/timesheet.ts

@@ -1,3 +1,5 @@
+import type { ShiftDto } from '../api/shifts';
+
 export function formatTimesheetDateTime(value?: string | null) {
   if (!value) return '—';
   const dt = new Date(value);
@@ -16,6 +18,39 @@ export function formatShiftDate(value?: string | null) {
   });
 }
 
+// same as formatShiftDate but with a weekday, for the "Title • Date • Time" row label
+function formatShiftLabelDate(value?: string | null) {
+  if (!value) return '';
+  const dt = new Date(value);
+  if (Number.isNaN(dt.getTime())) return '';
+  return dt.toLocaleDateString(undefined, {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+}
+
+function formatShiftTimeRange(startTime?: string | null, endTime?: string | null) {
+  if (startTime && endTime) return `${startTime} – ${endTime}`;
+  return startTime || endTime || '';
+}
+
+// builds "Title • Date • Time" from a shift, falling back to the raw id when the
+// shift can't be resolved (e.g. the guard's shift list hasn't loaded it)
+export function fmtShiftLabel(shift: ShiftDto | undefined, shiftId: string) {
+  if (!shift) return `Shift ID: ${shiftId}`;
+
+  const parts = [
+    shift.title?.trim(),
+    formatShiftLabelDate(shift.date),
+    formatShiftTimeRange(shift.startTime, shift.endTime),
+  ].filter((part): part is string => Boolean(part));
+
+  return parts.length > 0 ? parts.join(' • ') : `Shift ID: ${shiftId}`;
+}
+
 export function formatHours(value?: number | null) {
   return typeof value === 'number' && Number.isFinite(value) ? String(value) : '—';
 }