Merge pull request #142 from Resgrid/develop

CU-868f1731u Working on setting the active call from detail, build fi…

Author: ucswift

app.config.ts

@@ -2,6 +2,7 @@
 import type { ConfigContext, ExpoConfig } from '@expo/config';
 
 import { ClientEnv, Env } from './env';
+const packageJSON = require('./package.json');
 
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
@@ -10,7 +11,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   owner: Env.EXPO_ACCOUNT_OWNER,
   scheme: Env.SCHEME,
   slug: 'resgrid-unit',
-  version: Env.VERSION.toString(),
+  version: packageJSON.version,
   orientation: 'default',
   icon: './assets/icon.png',
   userInterfaceStyle: 'automatic',
@@ -20,6 +21,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   },
   assetBundlePatterns: ['**/*'],
   ios: {
+    version: packageJSON.version,
+    buildNumber: packageJSON.version,
     supportsTablet: true,
     bundleIdentifier: Env.BUNDLE_ID,
     requireFullScreen: true,
@@ -32,7 +35,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     typedRoutes: true,
   },
   android: {
-    versionCode: Env.ANDROID_VERSION_CODE,
+    version: packageJSON.version,
+    versionCode: parseInt(packageJSON.versionCode),
     adaptiveIcon: {
       foregroundImage: './assets/adaptive-icon.png',
       backgroundColor: '#2a7dd5',

docs/radio-selection-fix.md

@@ -0,0 +1,64 @@
+# Radio Selection Fix for Status Bottom Sheet
+
+## Issue Description
+The radio selection indicator in the Status Bottom Sheet was not working correctly. The radio buttons were not getting filled in to show which option was currently selected.
+
+## Root Cause
+The issue was in the `handleCallSelect` function and RadioGroup value handling:
+
+1. **Value mismatch**: The RadioGroup used `selectedCall?.CallId || ''` as its value, but when no call was selected (value "0"), the empty string didn't match the "No call selected" radio option.
+
+2. **Incomplete selection handling**: The `handleCallSelect` function only handled cases where a valid call was found, but didn't handle the "No call selected" case (value "0").
+
+3. **Button disabled state**: The Next button was disabled when `selectedCall` was null, preventing users from proceeding without selecting a call.
+
+## Changes Made
+
+### 1. Fixed handleCallSelect function
+```typescript
+const handleCallSelect = (callId: string) => {
+  if (callId === '0') {
+    setSelectedCall(null);
+  } else {
+    const call = calls.find((c) => c.CallId === callId);
+    if (call) {
+      setSelectedCall(call);
+    }
+  }
+};
+```
+
+### 2. Updated RadioGroup value
+```typescript
+<RadioGroup value={selectedCall?.CallId || '0'} onChange={handleCallSelect}>
+```
+Changed from empty string `''` to `'0'` to match the "No call selected" radio option.
+
+### 3. Removed Next button disabled state
+```typescript
+<Button onPress={handleNext} className="mt-4 w-full bg-blue-600">
+  <ButtonText>{t('Next')}</ButtonText>
+</Button>
+```
+Removed `isDisabled={!selectedCall}` to allow proceeding without a selected call.
+
+### 4. Updated second step display
+```typescript
+<Text className="mb-2 font-medium">
+  {t('Selected Call')}: {selectedCall ? `${selectedCall.Number} - ${selectedCall.Name}` : t('calls.no_call_selected')}
+</Text>
+```
+Added conditional display to show "No call selected" when no call is chosen.
+
+## Result
+- Radio selection indicators now properly show the selected state
+- Users can select "No call selected" option
+- Users can proceed to the next step with or without a call selected
+- The UI correctly displays the selected call or "No call selected" in the second step
+
+## Testing
+The component should now:
+1. ✅ Show proper radio selection when a call is selected
+2. ✅ Show proper radio selection when "No call selected" is chosen
+3. ✅ Allow users to proceed with either selection
+4. ✅ Display the correct selection summary in the note step

package.json

@@ -34,7 +34,6 @@
     "build:internal:ios": "cross-env APP_ENV=internal EXPO_NO_DOTENV=1 eas build --profile internal --platform ios",
     "build:internal:android": "cross-env APP_ENV=internal EXPO_NO_DOTENV=1 eas build --profile internal --platform android",
     "app-release": "cross-env SKIP_BRANCH_PROTECTION=true np --no-publish --no-cleanup --no-release-draft",
-    "version": "yarn run prebuild && git add .",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "type-check": "tsc  --noemit",
     "lint:translations": "eslint ./src/translations/ --fix --ext .json  ",

src/app/call/[id].tsx

@@ -1,6 +1,6 @@
 import { format } from 'date-fns';
 import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
-import { ClockIcon, FileTextIcon, ImageIcon, InfoIcon, PaperclipIcon, RouteIcon, UserIcon, UsersIcon } from 'lucide-react-native';
+import { ClockIcon, FileTextIcon, ImageIcon, InfoIcon, LoaderIcon, PaperclipIcon, RouteIcon, UserIcon, UsersIcon } from 'lucide-react-native';
 import { useColorScheme } from 'nativewind';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,15 +22,18 @@ import { VStack } from '@/components/ui/vstack';
 import { useAnalytics } from '@/hooks/use-analytics';
 import { logger } from '@/lib/logging';
 import { openMapsWithDirections } from '@/lib/navigation';
+import { useCoreStore } from '@/stores/app/core-store';
 import { useLocationStore } from '@/stores/app/location-store';
 import { useCallDetailStore } from '@/stores/calls/detail-store';
+import { useStatusBottomSheetStore } from '@/stores/status/store';
 import { useToastStore } from '@/stores/toast/store';
 
 import { useCallDetailMenu } from '../../components/calls/call-detail-menu';
 import CallFilesModal from '../../components/calls/call-files-modal';
 import CallImagesModal from '../../components/calls/call-images-modal';
 import CallNotesModal from '../../components/calls/call-notes-modal';
 import { CloseCallBottomSheet } from '../../components/calls/close-call-bottom-sheet';
+import { StatusBottomSheet } from '../../components/status/status-bottom-sheet';
 
 export default function CallDetail() {
   const { id } = useLocalSearchParams();
@@ -48,10 +51,13 @@ export default function CallDetail() {
     longitude: null,
   });
   const { call, callExtraData, callPriority, isLoading, error, fetchCallDetail, reset } = useCallDetailStore();
+  const { activeCall, activeStatuses } = useCoreStore();
+  const { setIsOpen: setStatusBottomSheetOpen, setSelectedCall } = useStatusBottomSheetStore();
   const [isNotesModalOpen, setIsNotesModalOpen] = useState(false);
   const [isImagesModalOpen, setIsImagesModalOpen] = useState(false);
   const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
   const [isCloseCallModalOpen, setIsCloseCallModalOpen] = useState(false);
+  const [isSettingActive, setIsSettingActive] = useState(false);
   const showToast = useToastStore((state) => state.showToast);
 
   const { colorScheme } = useColorScheme();
@@ -88,6 +94,37 @@ export default function CallDetail() {
     setIsCloseCallModalOpen(true);
   };
 
+  const handleSetActive = async () => {
+    if (!call) return;
+
+    setIsSettingActive(true);
+
+    try {
+      // Set this call as the active call in the core store
+      await useCoreStore.getState().setActiveCall(call.CallId);
+
+      // Find a "Responding" or "En Route" status from the available statuses
+      const respondingStatus = activeStatuses?.Statuses.find(
+        (status) => status.Text.toLowerCase().includes('responding') || status.Text.toLowerCase().includes('en route') || status.Text.toLowerCase().includes('enroute')
+      );
+
+      // Pre-select the current call and open the status bottom sheet
+      setSelectedCall(call);
+      setStatusBottomSheetOpen(true, respondingStatus || activeStatuses?.Statuses[0]);
+
+      // Show success message
+      showToast('success', t('call_detail.set_active_success'));
+    } catch (error) {
+      logger.error({
+        message: 'Failed to set call as active',
+        context: { error, callId: call.CallId },
+      });
+      showToast('error', t('call_detail.set_active_error'));
+    } finally {
+      setIsSettingActive(false);
+    }
+  };
+
   // Initialize the call detail menu hook
   const { HeaderRightMenu, CallDetailActionSheet } = useCallDetailMenu({
     onEditCall: handleEditCall,
@@ -446,10 +483,17 @@ export default function CallDetail() {
       <ScrollView className={`size-full w-full flex-1 ${colorScheme === 'dark' ? 'bg-neutral-950' : 'bg-neutral-50'}`}>
         {/* Header */}
         <Box className={`p-4 shadow-sm ${colorScheme === 'dark' ? 'bg-neutral-900' : 'bg-neutral-100'}`}>
-          <HStack className="mb-2 items-center">
+          <HStack className="mb-2 items-center justify-between">
             <Heading size="md">
               {call.Name} ({call.Number})
             </Heading>
+            {/* Show "Set Active" button if this call is not the active call */}
+            {activeCall?.CallId !== call.CallId && (
+              <Button variant="solid" size="sm" onPress={handleSetActive} disabled={isSettingActive} className={`${isSettingActive ? 'bg-primary-400 opacity-80' : 'bg-primary-500'} shadow-lg`}>
+                {isSettingActive && <ButtonIcon as={LoaderIcon} className="mr-1 animate-spin text-white" />}
+                <ButtonText className="font-medium text-white">{isSettingActive ? t('call_detail.setting_active') : t('call_detail.set_active')}</ButtonText>
+              </Button>
+            )}
           </HStack>
           <VStack className="space-y-1">
             <Box style={{ height: 80 }}>
@@ -548,6 +592,9 @@ export default function CallDetail() {
       {/* Close Call Bottom Sheet */}
       <CloseCallBottomSheet isOpen={isCloseCallModalOpen} onClose={() => setIsCloseCallModalOpen(false)} callId={callId} />
 
+      {/* Status Bottom Sheet */}
+      <StatusBottomSheet />
+
       {/* Call Detail Menu ActionSheet */}
       <CallDetailActionSheet />
     </>