Environment fix for Android and UI preparations

src/screens/InspectionFormScreen.tsx

@@ -12,7 +12,10 @@ import { Alert, ScrollView, StyleSheet, Switch, Text, TouchableOpacity, View } f
 import { Template } from '../api/types';
 import { getTemplates } from '../db/repositories';
 import { createInspection } from '../sync/mutations';
+import { getDb } from '../db/database';
+import { newUuid, nextTempId } from '../sync/uuid';
 import { RootStackParamList } from '../navigation/types';
+import { MediaStrip } from '../ui/MediaStrip';
 import {
   Card,
   ChipSelect,
@@ -87,6 +90,10 @@ export function InspectionFormScreen({ route, navigation }: Props) {
   const [notes, setNotes] = useState('');
   const [saving, setSaving] = useState(false);
 
+  // We need the tempId and uuid for the inspection to associate photos with it before saving
+  const [inspectionTempId, setInspectionTempId] = useState<number | null>(null);
+  const [inspectionUuid, setInspectionUuid] = useState<string | null>(null);
+
   useEffect(() => {
     void getTemplates().then((all) => {
       // La plantilla sugerida (la de la feature) primero.
@@ -102,12 +109,17 @@ export function InspectionFormScreen({ route, navigation }: Props) {
     setTemplate(t);
     setValues({});
     setChosen(true);
+    // Generate IDs early so photos can be associated
+    setInspectionTempId(nextTempId());
+    setInspectionUuid(newUuid());
   }, []);
 
   const backToPicker = useCallback(() => {
     setChosen(false);
     setTemplate(null);
     setValues({});
+    setInspectionTempId(null);
+    setInspectionUuid(null);
   }, []);
 
   const fields: NormField[] = (template?.fields ?? []).map(normalizeField);
@@ -133,6 +145,7 @@ export function InspectionFormScreen({ route, navigation }: Props) {
     }
     setSaving(true);
     try {
+      // Create the inspection using the pre-generated IDs
       await createInspection({
         feature_id: featureId,
         template_id: template?.id ?? undefined,
@@ -140,13 +153,15 @@ export function InspectionFormScreen({ route, navigation }: Props) {
         result,
         notes: notes.trim() || undefined,
         status: 'completed',
+        uuid: inspectionUuid ?? undefined,
+        localId: inspectionTempId ?? undefined,
       });
       navigation.goBack();
     } finally {
       setSaving(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [featureId, values, result, notes, navigation, template]);
+  }, [featureId, values, result, notes, navigation, template, inspectionUuid, inspectionTempId]);
 
   const renderField = (f: NormField) => {
     const label = f.required ? `${f.label} *` : f.label;
@@ -261,6 +276,17 @@ export function InspectionFormScreen({ route, navigation }: Props) {
         />
       </Card>
 
+      {inspectionTempId && (
+        <View style={{ marginBottom: 12 }}>
+          <SectionTitle>Fotos de la inspección</SectionTitle>
+          <MediaStrip
+            parentEntity="inspection"
+            parentId={inspectionTempId}
+            canUpload={true}
+          />
+        </View>
+      )}
+
       <PrimaryButton title="Guardar inspección" onPress={() => void onSubmit()} loading={saving} />
       <View style={{ height: 8 }} />
       <PrimaryButton title="Cancelar" variant="ghost" onPress={() => navigation.goBack()} />
@@ -296,4 +322,4 @@ const styles = StyleSheet.create({
   tplCardDesc: { fontSize: 13, color: COLORS.muted, marginTop: 2 },
   tplCardMeta: { fontSize: 11, color: COLORS.muted, marginTop: 4 },
   tplChevron: { fontSize: 24, color: COLORS.muted, marginLeft: 8 },
-});
+});