From 2a918cf60a7bc774dfe8b22fb52e83973543dc1e Mon Sep 17 00:00:00 2001
From: Shawn Jackson <shawn@resgrid.com>
Date: Thu, 22 Jan 2026 22:18:23 -0800
Subject: [PATCH] RR-T40 testing fixes

---
 .../audio-stream-bottom-sheet.tsx             |   2 +-
 .../calendar/calendar-item-details-sheet.tsx  |   4 +-
 src/components/calls/call-images-modal.tsx    | 218 ++++++++++++++----
 .../__tests__/shift-details-sheet.test.tsx    |  59 +++--
 src/components/shifts/shift-calendar-view.tsx |   4 +-
 .../shifts/shift-day-details-sheet.tsx        |   4 +-
 src/components/shifts/shift-details-sheet.tsx |  31 ++-
 src/components/units/unit-card.tsx            |   8 +-
 .../__tests__/personnel-status-store.test.ts  |  11 +-
 src/stores/status/personnel-status-store.ts   |   4 +-
 src/translations/ar.json                      |   6 +
 src/translations/en.json                      |   6 +
 src/translations/es.json                      |  10 +-
 13 files changed, 286 insertions(+), 81 deletions(-)

diff --git a/src/components/audio-stream/audio-stream-bottom-sheet.tsx b/src/components/audio-stream/audio-stream-bottom-sheet.tsx
index 99b5174..c4295bf 100644
--- a/src/components/audio-stream/audio-stream-bottom-sheet.tsx
+++ b/src/components/audio-stream/audio-stream-bottom-sheet.tsx
@@ -140,7 +140,7 @@ export const AudioStreamBottomSheet = () => {
             ) : (
               <Select selectedValue={getCurrentStreamValue()} onValueChange={handleStreamSelection} isDisabled={isLoading || isBuffering}>
                 <SelectTrigger>
-                  <SelectInput placeholder={t('audio_streams.select_placeholder')} />
+                  <SelectInput placeholder={t('audio_streams.select_placeholder')} value={currentStream ? currentStream.Name : t('audio_streams.none')} />
                   <SelectIcon />
                 </SelectTrigger>
                 <SelectPortal>
diff --git a/src/components/calendar/calendar-item-details-sheet.tsx b/src/components/calendar/calendar-item-details-sheet.tsx
index c88f121..bd9d569 100644
--- a/src/components/calendar/calendar-item-details-sheet.tsx
+++ b/src/components/calendar/calendar-item-details-sheet.tsx
@@ -234,8 +234,8 @@ export const CalendarItemDetailsSheet: React.FC<CalendarItemDetailsSheetProps> =
 
   return (
     <CustomBottomSheet isOpen={isOpen} onClose={onClose}>
-      <VStack style={{ height: '80%' }}>
-        <ScrollView showsVerticalScrollIndicator={true} contentContainerStyle={{ padding: 24 }}>
+      <VStack style={{ flex: 1 }}>
+        <ScrollView showsVerticalScrollIndicator={true} contentContainerStyle={{ padding: 24, flexGrow: 1 }}>
           {/* Header */}
           <VStack className="mb-6">
             <HStack className="mb-2 items-start justify-between">
diff --git a/src/components/calls/call-images-modal.tsx b/src/components/calls/call-images-modal.tsx
index 4ea86c4..c7432d8 100644
--- a/src/components/calls/call-images-modal.tsx
+++ b/src/components/calls/call-images-modal.tsx
@@ -137,59 +137,199 @@ const CallImagesModal: React.FC<CallImagesModalProps> = ({ isOpen, onClose, call
   }, [validImages.length, activeIndex]);
 
   const handleImageSelect = async () => {
-    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (permissionResult.granted === false) {
-      showToast('error', t('common.permission_denied'));
-      return;
-    }
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: true,
-      quality: 0.8,
-    });
-    if (!result.canceled) {
-      const asset = result.assets[0];
-      const filename = asset.fileName || `image_${Date.now()}.png`;
-      setSelectedImageInfo({ uri: asset.uri, filename });
+    try {
+      // On Web, permissions are handled by the browser, so we skip the permission check
+      // On iOS/Android, we need to request permissions first
+      if (Platform.OS !== 'web') {
+        const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (permissionResult.granted === false) {
+          // Check if user can be asked again or needs to go to settings
+          if (!permissionResult.canAskAgain) {
+            showToast('error', t('callImages.permission_denied_settings'));
+          } else {
+            showToast('error', t('common.permission_denied'));
+          }
+          return;
+        }
+      }
+
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ['images'],
+        // allowsEditing is only supported on iOS and Android, not on Web
+        allowsEditing: Platform.OS !== 'web',
+        quality: 0.8,
+      });
+
+      // Handle Android MainActivity destruction - check for pending results
+      if (Platform.OS === 'android' && result.canceled) {
+        const pendingResult = await ImagePicker.getPendingResultAsync();
+        if (pendingResult && 'assets' in pendingResult && pendingResult.assets && pendingResult.assets.length > 0) {
+          const asset = pendingResult.assets[0];
+          if (asset?.uri) {
+            const filename = asset.fileName || `image_${Date.now()}.png`;
+            setSelectedImageInfo({ uri: asset.uri, filename });
+            return;
+          }
+        }
+      }
+
+      if (!result.canceled && result.assets && result.assets.length > 0) {
+        const asset = result.assets[0];
+        if (asset?.uri) {
+          const filename = asset.fileName || `image_${Date.now()}.png`;
+          setSelectedImageInfo({ uri: asset.uri, filename });
+        } else {
+          console.error('Image picker returned asset without URI');
+          showToast('error', t('callImages.select_error'));
+        }
+      }
+    } catch (error) {
+      console.error('Error selecting image from library:', error);
+      showToast('error', t('callImages.select_error'));
     }
   };
 
   const handleCameraCapture = async () => {
-    const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
-    if (permissionResult.granted === false) {
-      showToast('error', t('common.permission_denied'));
-      return;
-    }
-    const result = await ImagePicker.launchCameraAsync({
-      allowsEditing: true,
-      quality: 0.8,
-    });
-    if (!result.canceled) {
-      const asset = result.assets[0];
-      const filename = `camera_${Date.now()}.png`;
-      setSelectedImageInfo({ uri: asset.uri, filename });
+    try {
+      // On Web, camera permissions are handled by the browser when launching the camera
+      // On iOS/Android, we need to request camera permissions first
+      if (Platform.OS !== 'web') {
+        const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
+        if (permissionResult.granted === false) {
+          // Check if user can be asked again or needs to go to settings
+          if (!permissionResult.canAskAgain) {
+            showToast('error', t('callImages.permission_denied_settings'));
+          } else {
+            showToast('error', t('common.permission_denied'));
+          }
+          return;
+        }
+      }
+
+      const result = await ImagePicker.launchCameraAsync({
+        mediaTypes: ['images'],
+        // allowsEditing is only supported on iOS and Android, not on Web
+        allowsEditing: Platform.OS !== 'web',
+        quality: 0.8,
+      });
+
+      // Handle Android MainActivity destruction - check for pending results
+      if (Platform.OS === 'android' && result.canceled) {
+        const pendingResult = await ImagePicker.getPendingResultAsync();
+        if (pendingResult && 'assets' in pendingResult && pendingResult.assets && pendingResult.assets.length > 0) {
+          const asset = pendingResult.assets[0];
+          if (asset?.uri) {
+            const filename = `camera_${Date.now()}.png`;
+            setSelectedImageInfo({ uri: asset.uri, filename });
+            return;
+          }
+        }
+      }
+
+      if (!result.canceled && result.assets && result.assets.length > 0) {
+        const asset = result.assets[0];
+        if (asset?.uri) {
+          const filename = `camera_${Date.now()}.png`;
+          setSelectedImageInfo({ uri: asset.uri, filename });
+        } else {
+          console.error('Camera returned asset without URI');
+          showToast('error', t('callImages.capture_error'));
+        }
+      }
+    } catch (error) {
+      console.error('Error capturing image from camera:', error);
+      showToast('error', t('callImages.capture_error'));
     }
   };
 
   const handleUploadImage = async () => {
     if (!selectedImageInfo) return;
 
+    // Validate URI before processing
+    if (!selectedImageInfo.uri || typeof selectedImageInfo.uri !== 'string') {
+      console.error('Invalid image URI:', selectedImageInfo.uri);
+      showToast('error', t('callImages.upload_error'));
+      return;
+    }
+
     setIsUploading(true);
     try {
-      // Manipulate image to ensure PNG format and proper compression
-      const manipulatedImage = await ImageManipulator.manipulateAsync(
-        selectedImageInfo.uri,
-        [{ resize: { width: 1024 } }], // Resize to max width of 1024px while maintaining aspect ratio
-        {
-          compress: 0.8,
-          format: ImageManipulator.SaveFormat.PNG, // Ensure PNG format
+      let base64Image: string;
+
+      // On Web, we can skip image manipulation if there are issues
+      // On native platforms, manipulate the image for consistency
+      if (Platform.OS === 'web') {
+        // On Web, try to manipulate but have a fallback
+        try {
+          const manipulatedImage = await ImageManipulator.manipulateAsync(
+            selectedImageInfo.uri,
+            [{ resize: { width: 1024 } }],
+            {
+              compress: 0.8,
+              format: ImageManipulator.SaveFormat.JPEG,
+              base64: true, // Get base64 directly to avoid FileSystem issues on web
+            }
+          );
+
+          if (manipulatedImage?.base64) {
+            base64Image = manipulatedImage.base64;
+          } else {
+            // Fallback: try to read from data URI if manipulation didn't return base64
+            throw new Error('No base64 returned from manipulation');
+          }
+        } catch (webError) {
+          console.error('Web image manipulation error:', webError);
+          // On web, the URI might already be a data URI or blob URL
+          // Try to extract base64 from data URI
+          if (selectedImageInfo.uri.startsWith('data:')) {
+            const base64Match = selectedImageInfo.uri.match(/base64,(.*)$/);
+            if (base64Match && base64Match[1]) {
+              base64Image = base64Match[1];
+            } else {
+              throw new Error('Could not extract base64 from data URI');
+            }
+          } else {
+            throw webError;
+          }
+        }
+      } else {
+        // Native platforms (iOS/Android)
+        let manipulatedImage;
+        try {
+          manipulatedImage = await ImageManipulator.manipulateAsync(
+            selectedImageInfo.uri,
+            [{ resize: { width: 1024 } }],
+            {
+              compress: 0.8,
+              format: ImageManipulator.SaveFormat.PNG,
+              base64: true, // Get base64 directly
+            }
+          );
+        } catch (manipulateError) {
+          console.error('Error manipulating image:', manipulateError);
+          // Try without resize as fallback for problematic images
+          manipulatedImage = await ImageManipulator.manipulateAsync(
+            selectedImageInfo.uri,
+            [], // No transformations
+            {
+              compress: 0.8,
+              format: ImageManipulator.SaveFormat.JPEG,
+              base64: true,
+            }
+          );
         }
-      );
 
-      // Read the manipulated image as base64
-      const base64Image = await FileSystem.readAsStringAsync(manipulatedImage.uri, {
-        encoding: FileSystem.EncodingType.Base64,
-      });
+        if (manipulatedImage?.base64) {
+          base64Image = manipulatedImage.base64;
+        } else if (manipulatedImage?.uri) {
+          // Fallback to FileSystem if base64 wasn't returned
+          base64Image = await FileSystem.readAsStringAsync(manipulatedImage.uri, {
+            encoding: FileSystem.EncodingType.Base64,
+          });
+        } else {
+          throw new Error('Image manipulation failed - no output');
+        }
+      }
 
       // Get current location if available
       const currentLatitude = latitude;
diff --git a/src/components/shifts/__tests__/shift-details-sheet.test.tsx b/src/components/shifts/__tests__/shift-details-sheet.test.tsx
index b2268d2..e441e36 100644
--- a/src/components/shifts/__tests__/shift-details-sheet.test.tsx
+++ b/src/components/shifts/__tests__/shift-details-sheet.test.tsx
@@ -41,6 +41,7 @@ jest.mock('react-i18next', () => ({
         'shifts.calendar': 'Calendar',
         'shifts.loading': 'Loading...',
         'shifts.no_shifts': 'No shifts available',
+        'shifts.upcoming_shift_days': 'Upcoming Shift Days',
       };
       return translations[key] || key;
     },
@@ -67,6 +68,13 @@ jest.mock('date-fns', () => ({
   }),
   startOfMonth: jest.fn(() => new Date('2024-01-01')),
   endOfMonth: jest.fn(() => new Date('2024-01-31')),
+  startOfDay: jest.fn((date) => {
+    // Return the date as-is for filtering comparison (future dates will pass the filter)
+    if (date instanceof Date) {
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    return new Date();
+  }),
 }));
 
 // Mock lucide-react-native
@@ -222,7 +230,7 @@ describe('ShiftDetailsSheet', () => {
     InShift: true,
     PersonnelCount: 10,
     GroupCount: 3,
-    NextDay: '2024-01-15T10:00:00Z',
+    NextDay: '2027-01-15T10:00:00Z',
     NextDayId: 'next-day-1',
     ScheduleType: 1, // Automatic
     AssignmentType: 0, // Optional
@@ -232,7 +240,7 @@ describe('ShiftDetailsSheet', () => {
         ShiftDayId: 'day-1',
         ShiftId: 'shift-1',
         ShiftName: 'Test Shift',
-        ShiftDay: '2024-01-15',
+        ShiftDay: '2027-01-15',
         Start: '08:00:00',
         End: '16:00:00',
         SignedUp: false,
@@ -244,7 +252,7 @@ describe('ShiftDetailsSheet', () => {
         ShiftDayId: 'day-2',
         ShiftId: 'shift-1',
         ShiftName: 'Test Shift',
-        ShiftDay: '2024-01-16',
+        ShiftDay: '2027-01-16',
         Start: '08:00:00',
         End: '16:00:00',
         SignedUp: false,
@@ -476,15 +484,15 @@ describe('ShiftDetailsSheet', () => {
     });
   });
 
-  describe('Recent Shift Days', () => {
+  describe('Upcoming Shift Days', () => {
     it('should display all shift days when available', () => {
       const component = render(<ShiftDetailsSheet isOpen={true} onClose={jest.fn()} />);
       const { root } = component;
 
-      // Check for "Recent Shift Days" text
+      // Check for "Upcoming Shift Days" text
       const textElements = root.findAllByType('text');
-      const hasRecentShiftDaysText = textElements.some((el: any) => el.props.children === 'Recent Shift Days');
-      expect(hasRecentShiftDaysText).toBe(true);
+      const hasUpcomingShiftDaysText = textElements.some((el: any) => el.props.children === 'Upcoming Shift Days');
+      expect(hasUpcomingShiftDaysText).toBe(true);
 
       // Check for shift day cards - should display all available days
       const shiftDayCards = root.findAllByType('shift-day-card');
@@ -493,7 +501,7 @@ describe('ShiftDetailsSheet', () => {
       expect(shiftDayCards[1].props.children).toBe('Shift Day day-2');
     });
 
-    it('should not display recent shift days section when no days available', () => {
+    it('should not display upcoming shift days section when no days available', () => {
       mockUseShiftsStore.mockReturnValue({
         ...defaultStoreState,
         selectedShift: { ...mockShift, Days: [] },
@@ -502,19 +510,19 @@ describe('ShiftDetailsSheet', () => {
       const component = render(<ShiftDetailsSheet isOpen={true} onClose={jest.fn()} />);
       const { root } = component;
 
-      // Should not find "Recent Shift Days" text
+      // Should not find "Upcoming Shift Days" text
       const textElements = root.findAllByType('text');
-      const hasRecentShiftDaysText = textElements.some((el: any) => el.props.children === 'Recent Shift Days');
-      expect(hasRecentShiftDaysText).toBe(false);
+      const hasUpcomingShiftDaysText = textElements.some((el: any) => el.props.children === 'Upcoming Shift Days');
+      expect(hasUpcomingShiftDaysText).toBe(false);
     });
 
     it('should display all shift days when scrolling is enabled', () => {
-      // Create a shift with many days to test scrolling
+      // Create a shift with many days to test scrolling (using future dates)
       const manyDays = Array.from({ length: 10 }, (_, i) => ({
         ShiftDayId: `day-${i + 1}`,
         ShiftId: 'shift-1',
         ShiftName: 'Test Shift',
-        ShiftDay: `2024-01-${i + 15}`,
+        ShiftDay: `2027-01-${String(i + 15).padStart(2, '0')}`,
         Start: '08:00:00',
         End: '16:00:00',
         SignedUp: false,
@@ -550,8 +558,8 @@ describe('ShiftDetailsSheet', () => {
 
       // ScrollView should have proper props for mobile optimization
       const scrollView = scrollViews[0];
-      expect(scrollView.props.showsVerticalScrollIndicator).toBe(false);
-      expect(scrollView.props.contentContainerStyle).toEqual({ paddingBottom: 20 });
+      expect(scrollView.props.showsVerticalScrollIndicator).toBe(true);
+      expect(scrollView.props.contentContainerStyle).toEqual({ paddingBottom: 40, flexGrow: 1 });
     });
   });
 
@@ -663,8 +671,27 @@ describe('ShiftDetailsSheet', () => {
 
     it('should call selectShiftDay when shift day card is pressed', () => {
       const selectShiftDayMock = jest.fn();
+      // Create mock shift with future dates to ensure days are displayed
+      const futureMockShift = {
+        ...mockShift,
+        Days: [
+          {
+            ShiftDayId: 'day-1',
+            ShiftId: 'shift-1',
+            ShiftName: 'Test Shift',
+            ShiftDay: '2027-01-15',
+            Start: '08:00:00',
+            End: '16:00:00',
+            SignedUp: false,
+            ShiftType: 0,
+            Signups: [],
+            Needs: [],
+          },
+        ],
+      };
       mockUseShiftsStore.mockReturnValue({
         ...defaultStoreState,
+        selectedShift: futureMockShift,
         selectShiftDay: selectShiftDayMock,
       });
 
@@ -680,7 +707,7 @@ describe('ShiftDetailsSheet', () => {
         firstCard.props.onPress();
       }
 
-      expect(selectShiftDayMock).toHaveBeenCalledWith(mockShift.Days[0]);
+      expect(selectShiftDayMock).toHaveBeenCalledWith(futureMockShift.Days[0]);
     });
   });
 
diff --git a/src/components/shifts/shift-calendar-view.tsx b/src/components/shifts/shift-calendar-view.tsx
index aecbca1..63d643b 100644
--- a/src/components/shifts/shift-calendar-view.tsx
+++ b/src/components/shifts/shift-calendar-view.tsx
@@ -206,7 +206,7 @@ export const ShiftCalendarView: React.FC<ShiftCalendarViewProps> = ({ shift, shi
 
         {/* Legend */}
         <VStack className="space-y-2 rounded-lg bg-gray-50 p-3 dark:bg-gray-800">
-          <Text className="text-sm font-medium text-gray-900 dark:text-white">Legend</Text>
+          <Text className="text-sm font-medium text-gray-900 dark:text-white">{t('shifts.legend')}</Text>
           <HStack className="space-x-4">
             <HStack className="items-center space-x-2">
               <View className="size-3 rounded-full bg-green-500" />
@@ -215,7 +215,7 @@ export const ShiftCalendarView: React.FC<ShiftCalendarViewProps> = ({ shift, shi
 
             <HStack className="items-center space-x-2">
               <View className="size-3 rounded-full bg-orange-500" />
-              <Text className="text-xs text-gray-600 dark:text-gray-400">Available</Text>
+              <Text className="text-xs text-gray-600 dark:text-gray-400">{t('shifts.available')}</Text>
             </HStack>
           </HStack>
         </VStack>
diff --git a/src/components/shifts/shift-day-details-sheet.tsx b/src/components/shifts/shift-day-details-sheet.tsx
index 4698003..b2a1aa3 100644
--- a/src/components/shifts/shift-day-details-sheet.tsx
+++ b/src/components/shifts/shift-day-details-sheet.tsx
@@ -278,8 +278,8 @@ export const ShiftDayDetailsSheet: React.FC<ShiftDayDetailsSheetProps> = ({ isOp
   };
 
   return (
-    <CustomBottomSheet isOpen={isOpen} onClose={handleClose} isLoading={isShiftDayLoading} loadingText={t('shifts.loading_details')}>
-      <ScrollView className="flex-1">
+    <CustomBottomSheet isOpen={isOpen} onClose={handleClose} isLoading={isShiftDayLoading} loadingText={t('shifts.loading_details')} snapPoints={[90]} minHeight="min-h-[600px]">
+      <ScrollView className="flex-1" showsVerticalScrollIndicator={true} contentContainerStyle={{ paddingBottom: 40, flexGrow: 1 }}>
         <VStack space="lg" className="p-4">
           {/* Header */}
           <VStack space="sm">
diff --git a/src/components/shifts/shift-details-sheet.tsx b/src/components/shifts/shift-details-sheet.tsx
index 377a6f7..675c0c0 100644
--- a/src/components/shifts/shift-details-sheet.tsx
+++ b/src/components/shifts/shift-details-sheet.tsx
@@ -1,4 +1,4 @@
-import { endOfMonth, format, parseISO, startOfMonth } from 'date-fns';
+import { endOfMonth, format, parseISO, startOfDay, startOfMonth } from 'date-fns';
 import { Calendar, Clock, Info, Users } from 'lucide-react-native';
 import { useColorScheme } from 'nativewind';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -176,7 +176,7 @@ const ShiftDetailsSheetComponent: React.FC<ShiftDetailsSheetProps> = ({ isOpen,
     }
 
     return (
-      <ScrollView className="flex-1" showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 20 }}>
+      <ScrollView className="flex-1" showsVerticalScrollIndicator={true} contentContainerStyle={{ paddingBottom: 40, flexGrow: 1 }}>
         <VStack space="lg" className="p-4">
           {/* Header */}
           <VStack space="sm">
@@ -257,16 +257,27 @@ const ShiftDetailsSheetComponent: React.FC<ShiftDetailsSheetProps> = ({ isOpen,
             </HStack>
           </VStack>
 
-          {/* Recent Days */}
+          {/* Upcoming Days */}
           {selectedShift?.Days && selectedShift.Days.length > 0 && (
             <VStack space="md">
               <Text size="lg" className="font-semibold text-gray-900 dark:text-white">
-                Recent Shift Days
+                {t('shifts.upcoming_shift_days')}
               </Text>
               <VStack space="sm">
-                {selectedShift.Days.slice(0, 7).map((day) => (
-                  <ShiftDayCard key={day.ShiftDayId} shiftDay={day} onPress={() => selectShiftDay(day)} />
-                ))}
+                {selectedShift.Days.filter((day) => {
+                  if (!day.ShiftDay) return false;
+                  try {
+                    const shiftDate = startOfDay(parseISO(day.ShiftDay));
+                    const today = startOfDay(new Date());
+                    return shiftDate >= today;
+                  } catch {
+                    return false;
+                  }
+                })
+                  .slice(0, 7)
+                  .map((day) => (
+                    <ShiftDayCard key={day.ShiftDayId} shiftDay={day} onPress={() => selectShiftDay(day)} />
+                  ))}
               </VStack>
             </VStack>
           )}
@@ -306,8 +317,8 @@ const ShiftDetailsSheetComponent: React.FC<ShiftDetailsSheetProps> = ({ isOpen,
   if (!selectedShift) return null;
 
   return (
-    <CustomBottomSheet isOpen={isOpen} onClose={handleClose} testID="shift-details-sheet" snapPoints={[80]} minHeight="min-h-[600px]">
-      <VStack space="md" className="h-full">
+    <CustomBottomSheet isOpen={isOpen} onClose={handleClose} testID="shift-details-sheet" snapPoints={[90]} minHeight="min-h-[600px]">
+      <VStack space="md" className="flex-1 h-full">
         {/* Header */}
         <Box className="border-b border-gray-200 pb-4 dark:border-gray-700">
           <Text size="xl" className="text-center font-semibold text-gray-900 dark:text-white">
@@ -324,7 +335,7 @@ const ShiftDetailsSheetComponent: React.FC<ShiftDetailsSheetProps> = ({ isOpen,
         </Box>
 
         {/* Content */}
-        <Box className="flex-1">{activeTab === 'info' ? renderShiftInfo() : renderCalendar()}</Box>
+        <Box className="flex-1 overflow-hidden">{activeTab === 'info' ? renderShiftInfo() : renderCalendar()}</Box>
       </VStack>
     </CustomBottomSheet>
   );
diff --git a/src/components/units/unit-card.tsx b/src/components/units/unit-card.tsx
index 874ce28..312d668 100644
--- a/src/components/units/unit-card.tsx
+++ b/src/components/units/unit-card.tsx
@@ -89,12 +89,12 @@ export const UnitCard: React.FC<UnitCardProps> = ({ unit, unitTypeStatuses, onPr
   // Find the status data from unit type statuses (custom statuses)
   const customStatusData = statusId ? findUnitStatus(unitType, statusId, unitTypeStatuses) : null;
 
-  // Fall back to default status if custom status not found
+  // Fall back to default status if custom status not found (used for colors only)
   const defaultStatus = statusId && !customStatusData ? getDefaultStatus(statusId) : null;
 
-  // Get status text and colors - prioritize custom, then default, then API response
-  const statusText = customStatusData?.Text || (defaultStatus?.text ? t(defaultStatus.text) : null) || ('CurrentStatus' in unit ? unit.CurrentStatus : null);
-  const buttonColor = customStatusData?.BColor || defaultStatus?.color || ('CurrentStatusColor' in unit ? unit.CurrentStatusColor : null);
+  // Get status text - prioritize custom status, then API response (CurrentStatus from unit)
+  const statusText = customStatusData?.Text || ('CurrentStatus' in unit ? unit.CurrentStatus : null);
+  const buttonColor = customStatusData?.BColor || ('CurrentStatusColor' in unit ? unit.CurrentStatusColor : null) || defaultStatus?.color;
   const textColor = buttonColor ? getContrastTextColor(buttonColor) : '#FFFFFF';
 
   return (
diff --git a/src/stores/status/__tests__/personnel-status-store.test.ts b/src/stores/status/__tests__/personnel-status-store.test.ts
index b1db167..c69d499 100644
--- a/src/stores/status/__tests__/personnel-status-store.test.ts
+++ b/src/stores/status/__tests__/personnel-status-store.test.ts
@@ -442,10 +442,12 @@ describe('usePersonnelStatusBottomSheetStore', () => {
 	});
 
 	describe('fetchGroups', () => {
-		it('should fetch groups successfully', async () => {
+		it('should fetch groups successfully and filter to only station groups', async () => {
 			const mockGroups = [
 				{ GroupId: '1', Name: 'Station 1', Address: '100 Fire Station Rd', GroupType: 'Fire Station', TypeId: 1 },
 				{ GroupId: '2', Name: 'Station 2', Address: '200 Fire Station Ave', GroupType: 'Fire Station', TypeId: 1 },
+				{ GroupId: '3', Name: 'Response Group', Address: '', GroupType: 'Response', TypeId: 2 },
+				{ GroupId: '4', Name: 'Admin Group', Address: '', GroupType: 'Admin', TypeId: 3 },
 			];
 			mockGetAllGroups.mockResolvedValue({ Data: mockGroups } as any);
 
@@ -456,7 +458,12 @@ describe('usePersonnelStatusBottomSheetStore', () => {
 			});
 
 			expect(mockGetAllGroups).toHaveBeenCalled();
-			expect(result.current.groups).toEqual(mockGroups);
+			// Should only contain station groups (TypeId: 1)
+			expect(result.current.groups).toHaveLength(2);
+			expect(result.current.groups).toEqual([
+				{ GroupId: '1', Name: 'Station 1', Address: '100 Fire Station Rd', GroupType: 'Fire Station', TypeId: 1 },
+				{ GroupId: '2', Name: 'Station 2', Address: '200 Fire Station Ave', GroupType: 'Fire Station', TypeId: 1 },
+			]);
 			expect(result.current.isLoadingGroups).toBe(false);
 		});
 
diff --git a/src/stores/status/personnel-status-store.ts b/src/stores/status/personnel-status-store.ts
index 6a84386..1f73710 100644
--- a/src/stores/status/personnel-status-store.ts
+++ b/src/stores/status/personnel-status-store.ts
@@ -110,7 +110,9 @@ export const usePersonnelStatusBottomSheetStore = create<PersonnelStatusBottomSh
     set({ isLoadingGroups: true });
     try {
       const groupsResult = await getAllGroups();
-      set({ groups: groupsResult.Data || [], isLoadingGroups: false });
+      // Filter to only include Station groups (TypeId === 1)
+      const stationGroups = (groupsResult.Data || []).filter((group) => group.TypeId === 1);
+      set({ groups: stationGroups, isLoadingGroups: false });
     } catch (error) {
       set({ groups: [], isLoadingGroups: false });
     }
diff --git a/src/translations/ar.json b/src/translations/ar.json
index 2932931..87eada5 100644
--- a/src/translations/ar.json
+++ b/src/translations/ar.json
@@ -127,6 +127,7 @@
   "callImages": {
     "add": "إضافة صورة",
     "add_new": "إضافة صورة جديدة",
+    "capture_error": "خطأ في التقاط الصورة. يرجى المحاولة مرة أخرى.",
     "default_name": "صورة بدون عنوان",
     "error": "خطأ في الحصول على الصور",
     "failed_to_load": "فشل في تحميل الصورة",
@@ -135,6 +136,8 @@
     "loading": "جاري التحميل...",
     "no_images": "لا توجد صور متاحة",
     "no_images_description": "أضف صورًا إلى مكالمتك للمساعدة في التوثيق والتواصل",
+    "permission_denied_settings": "تم رفض الإذن. يرجى تمكين الوصول في إعدادات جهازك.",
+    "select_error": "خطأ في اختيار الصورة. يرجى المحاولة مرة أخرى.",
     "select_from_gallery": "اختر من المعرض",
     "take_photo": "التقط صورة",
     "title": "صور المكالمة",
@@ -803,6 +806,7 @@
   "shifts": {
     "all_shifts": "كل النوبات",
     "already_signed_up": "مسجل بالفعل",
+    "assigned": "مُعيَّن",
     "automatic": "تلقائي",
     "available": "متاح",
     "calendar": "التقويم",
@@ -812,6 +816,7 @@
     "end_time": "وقت الانتهاء",
     "groups": "المجموعات",
     "in_shift": "في النوبة",
+    "legend": "دليل",
     "loading": "جاري تحميل النوبات...",
     "loading_details": "جاري تحميل تفاصيل النوبة...",
     "loading_signup": "جاري المعالجة...",
@@ -856,6 +861,7 @@
     "type_training": "تدريب",
     "type_unknown": "غير معروف",
     "unknown": "غير معروف",
+    "upcoming_shift_days": "أيام النوبات القادمة",
     "withdraw": "الانسحاب",
     "withdraw_error": "فشل في الانسحاب من النوبة",
     "withdraw_success": "تم الانسحاب بنجاح من النوبة",
diff --git a/src/translations/en.json b/src/translations/en.json
index 5e2e3a1..eb4c7f1 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -127,6 +127,7 @@
   "callImages": {
     "add": "Add Image",
     "add_new": "Add New Image",
+    "capture_error": "Error capturing photo. Please try again.",
     "default_name": "Untitled Image",
     "error": "Error getting images",
     "failed_to_load": "Failed to load image",
@@ -135,6 +136,8 @@
     "loading": "Loading...",
     "no_images": "No images available",
     "no_images_description": "Add images to your call to help with documentation and communication",
+    "permission_denied_settings": "Permission denied. Please enable access in your device settings.",
+    "select_error": "Error selecting image. Please try again.",
     "select_from_gallery": "Select from Gallery",
     "take_photo": "Take Photo",
     "title": "Call Images",
@@ -805,6 +808,7 @@
   "shifts": {
     "all_shifts": "All Shifts",
     "already_signed_up": "Already Signed Up",
+    "assigned": "Assigned",
     "automatic": "Automatic",
     "available": "Available",
     "calendar": "Calendar",
@@ -814,6 +818,7 @@
     "end_time": "End Time",
     "groups": "Groups",
     "in_shift": "In Shift",
+    "legend": "Legend",
     "loading": "Loading shifts...",
     "loading_details": "Loading shift details...",
     "loading_signup": "Processing...",
@@ -858,6 +863,7 @@
     "type_training": "Training",
     "type_unknown": "Unknown",
     "unknown": "Unknown",
+    "upcoming_shift_days": "Upcoming Shift Days",
     "withdraw": "Withdraw",
     "withdraw_error": "Failed to withdraw from shift",
     "withdraw_success": "Successfully withdrew from shift",
diff --git a/src/translations/es.json b/src/translations/es.json
index e5ff02c..5f54ec7 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -127,14 +127,17 @@
   "callImages": {
     "add": "Añadir imagen",
     "add_new": "Añadir nueva imagen",
+    "capture_error": "Error al capturar la foto. Por favor, inténtalo de nuevo.",
     "default_name": "Imagen sin título",
     "error": "Error al obtener imágenes",
     "failed_to_load": "Error al cargar la imagen",
     "image_name": "Nombre de la imagen",
-    "image_note": "Nota de imagen",
+    "image_note": "Nota de la imagen",
     "loading": "Cargando...",
     "no_images": "No hay imágenes disponibles",
-    "no_images_description": "Añade imágenes a tu llamada para ayudar con la documentación y comunicación",
+    "no_images_description": "Agregue imágenes a su llamada para ayudar con la documentación y la comunicación",
+    "permission_denied_settings": "Permiso denegado. Por favor, habilita el acceso en la configuración de tu dispositivo.",
+    "select_error": "Error al seleccionar la imagen. Por favor, inténtalo de nuevo.",
     "select_from_gallery": "Seleccionar de la galería",
     "take_photo": "Tomar foto",
     "title": "Imágenes de la llamada",
@@ -805,6 +808,7 @@
   "shifts": {
     "all_shifts": "Todos los Turnos",
     "already_signed_up": "Ya Registrado",
+    "assigned": "Asignado",
     "automatic": "Automático",
     "available": "Disponible",
     "calendar": "Calendario",
@@ -814,6 +818,7 @@
     "end_time": "Hora de Fin",
     "groups": "Grupos",
     "in_shift": "En Turno",
+    "legend": "Leyenda",
     "loading": "Cargando turnos...",
     "loading_details": "Cargando detalles del turno...",
     "loading_signup": "Procesando...",
@@ -858,6 +863,7 @@
     "type_training": "Entrenamiento",
     "type_unknown": "Desconocido",
     "unknown": "Desconocido",
+    "upcoming_shift_days": "Próximos Días de Turno",
     "withdraw": "Retirarse",
     "withdraw_error": "Error al retirarse del turno",
     "withdraw_success": "Se retiró exitosamente del turno",