feat: add camera capture for trip and item images

README.md

@@ -5,7 +5,7 @@ Minimal local-first luggage management app built with Expo.
 ## Current Features (V2)
 
 - No auth, no server, local storage only (AsyncStorage)
-- Trips with name, location, dates, optional image from gallery
+- Trips with name, location, calendar date picker, optional image from gallery
 - Active trip auto-select on first load, with manual trip switching anytime via global trip picker
 - Default trip template (copied into new trip, not linked)
 - Luggage items with:
@@ -14,10 +14,10 @@ Minimal local-first luggage management app built with Expo.
   - placement: suitcase, backpack, with-user, other
   - optional image from gallery
 - Item create/edit via modal
-- Check-up flow as yes/no checklist:
+- Check-up flow as yes/no checklist with live stats (correct/bad/pending):
   - “No” opens update modal
   - fixes can be check-up-only or optionally synced to trip item list
-- Check-up history per trip with saved snapshots
+- Check-up history per selected trip with saved snapshots + stats
 
 ## Notes
 

TODO.md

@@ -34,3 +34,8 @@ Improving & Fixing Bugs (V3)
 - [x] Improved keyboard focus scrolling to focused input (not scroll-to-end)
 - [x] Reworked bottom nav to real icons + labels
 - [x] Clarified history as selected-trip check-up history
+- [x] Increased safe top inset to avoid status-bar overlap
+- [x] Added check-up stats (correct/bad/pending) and persisted per snapshot
+- [x] Extra UI polish pass (spacing, cards, hierarchy)
+- [x] Centered and enlarged edit/check-up modals to fully overlay nav
+- [x] Fixed modal keyboard glitching (stable centered keyboard-aware layout)

app.json

@@ -34,6 +34,15 @@
       "eas": {
         "projectId": "1275f90e-33c6-4af1-942e-ca29a309f8c8"
       }
+    },
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "Allow Luggage List to access your photos for trip and item images.",
+          "cameraPermission": "Allow Luggage List to use your camera to take trip and item photos."
         }
+      ]
+    ]
   }
 }

src/AppRoot.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Alert, KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, Text, View } from 'react-native';
+import { Alert, KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, StatusBar as RNStatusBar, Text, View } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as ImagePicker from 'expo-image-picker';
 import { StatusBar } from 'expo-status-bar';
@@ -63,6 +63,8 @@ export default function AppRoot() {
 
   const [selectedCheckupId, setSelectedCheckupId] = useState(null);
 
+  const topInset = Platform.OS === 'android' ? (RNStatusBar.currentHeight || 0) + 10 : 0;
+
   const selectedTrip = useMemo(() => data.trips.find((trip) => trip.id === selectedTripId) || null, [data.trips, selectedTripId]);
 
   const selectedTripItems = useMemo(() => {
@@ -80,6 +82,14 @@ export default function AppRoot() {
     [data.trips, data.defaultTemplateTripId]
   );
 
+  const checkupStats = useMemo(() => {
+    const total = checkupSession.length;
+    const correct = checkupSession.filter((entry) => entry.result === 'correct').length;
+    const bad = checkupSession.filter((entry) => entry.result === 'bad').length;
+    const pending = total - correct - bad;
+    return { total, correct, bad, pending };
+  }, [checkupSession]);
+
   useEffect(() => {
     (async () => {
       try {
@@ -159,6 +169,23 @@ export default function AppRoot() {
     }
   }
 
+  async function takeImage(onPicked) {
+    const perm = await ImagePicker.requestCameraPermissionsAsync();
+    if (!perm.granted) {
+      Alert.alert('Permission needed', 'Allow camera access to take photos.');
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: false,
+      quality: 0.85,
+    });
+
+    if (!result.canceled && result.assets?.[0]?.uri) {
+      onPicked(result.assets[0].uri);
+    }
+  }
+
   function createTrip() {
     if (!tripForm.name.trim()) {
       Alert.alert('Missing name', 'Trip name is required.');
@@ -347,13 +374,16 @@ export default function AppRoot() {
         lentTo: item.lentTo || '',
       },
       confirmed: false,
+      result: 'pending',
     }));
 
     setCheckupSession(fresh);
   }
 
   function answerCheckupYes(itemId) {
-    setCheckupSession((prev) => prev.map((entry) => (entry.itemId === itemId ? { ...entry, confirmed: true } : entry)));
+    setCheckupSession((prev) =>
+      prev.map((entry) => (entry.itemId === itemId ? { ...entry, confirmed: true, result: 'correct' } : entry))
+    );
   }
 
   function openFixModal(itemId) {
@@ -387,6 +417,7 @@ export default function AppRoot() {
               ...entry,
               current: patch,
               confirmed: true,
+              result: 'bad',
             }
           : entry
       )
@@ -443,6 +474,7 @@ export default function AppRoot() {
       status: entry.current.status,
       placement: entry.current.placement,
       lentTo: entry.current.status === 'lent-to' ? entry.current.lentTo : '',
+      result: entry.result || 'pending',
     }));
 
     setData((prev) => {
@@ -457,6 +489,10 @@ export default function AppRoot() {
               id: makeId('checkup'),
               createdAt: Date.now(),
               snapshot,
+              stats: {
+                correct: snapshot.filter((entry) => entry.result === 'correct').length,
+                bad: snapshot.filter((entry) => entry.result === 'bad').length,
+              },
             },
           ],
         },
@@ -480,7 +516,7 @@ export default function AppRoot() {
 
   if (!loaded) {
     return (
-      <SafeAreaView style={styles.safe}>
+      <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
         <StatusBar style="light" translucent={false} />
         <View style={styles.center}>
           <Text style={styles.muted}>Loading local data...</Text>
@@ -490,7 +526,7 @@ export default function AppRoot() {
   }
 
   return (
-    <SafeAreaView style={styles.safe}>
+    <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
       <StatusBar style="light" translucent={false} />
 
       <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
@@ -500,7 +536,6 @@ export default function AppRoot() {
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
         >
-          <View style={styles.statusSpacer} />
           <TripPicker trips={data.trips} selectedTripId={selectedTripId} onChooseTrip={setSelectedTripId} />
 
           {tab === 'trips' && (
@@ -508,6 +543,7 @@ export default function AppRoot() {
               tripForm={tripForm}
               updateTripForm={updateTripForm}
               pickTripImage={() => pickImage((uri) => updateTripForm('imageUri', uri))}
+              takeTripImage={() => takeImage((uri) => updateTripForm('imageUri', uri))}
               templateTrip={templateTrip}
               createTrip={createTrip}
               trips={data.trips}
@@ -534,6 +570,7 @@ export default function AppRoot() {
           {tab === 'checkup' && (
             <CheckupTab
               checkupSession={checkupSession}
+              checkupStats={checkupStats}
               answerCheckupYes={answerCheckupYes}
               openFixModal={openFixModal}
               createFreshCheckupSession={createFreshCheckupSession}
@@ -568,6 +605,7 @@ export default function AppRoot() {
         setItemModalVisible={setItemModalVisible}
         updateItemForm={updateItemForm}
         pickItemImage={() => pickImage((uri) => updateItemForm('imageUri', uri))}
+        takeItemImage={() => takeImage((uri) => updateItemForm('imageUri', uri))}
         saveItemFromModal={saveItemFromModal}
       />
 

src/modals/CheckupFixModal.js

@@ -15,7 +15,7 @@ export default function CheckupFixModal({
   return (
     <Modal visible={visible} animationType="slide" transparent>
       <View style={styles.modalBackdrop}>
-        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.modalKeyboardWrap}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
           <View style={styles.modalCard}>
             <View style={styles.sectionRow}>
               <Text style={styles.sectionTitle}>Update for this Check-Up</Text>
@@ -24,7 +24,12 @@ export default function CheckupFixModal({
               </Pressable>
             </View>
 
-            <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              keyboardDismissMode="interactive"
+              contentContainerStyle={{ paddingBottom: 12 }}
+              showsVerticalScrollIndicator={false}
+            >
               <Field label="Status">
                 <ChipGroup
                   options={ITEM_STATUSES}

src/modals/ItemModal.js

@@ -11,12 +11,13 @@ export default function ItemModal({
   setItemModalVisible,
   updateItemForm,
   pickItemImage,
+  takeItemImage,
   saveItemFromModal,
 }) {
   return (
     <Modal visible={visible} animationType="slide" transparent>
       <View style={styles.modalBackdrop}>
-        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.modalKeyboardWrap}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
           <View style={styles.modalCard}>
             <View style={styles.sectionRow}>
               <Text style={styles.sectionTitle}>{itemForm.id ? 'Update Item' : 'Add Item'}</Text>
@@ -25,7 +26,12 @@ export default function ItemModal({
               </Pressable>
             </View>
 
-            <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              keyboardDismissMode="interactive"
+              contentContainerStyle={{ paddingBottom: 12 }}
+              showsVerticalScrollIndicator={false}
+            >
               <Field label="Name">
                 <TextInput
                   style={styles.input}
@@ -76,9 +82,14 @@ export default function ItemModal({
                 </Field>
               ) : null}
 
-              <Pressable style={styles.secondaryBtn} onPress={pickItemImage}>
+              <View style={styles.actionRow}>
-                <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'Change image' : 'Add image'}</Text>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeItemImage}>
+                  <Text style={styles.secondaryBtnText}>Take photo</Text>
                 </Pressable>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickItemImage}>
+                  <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+                </Pressable>
+              </View>
               {!!itemForm.imageUri && <Image source={{ uri: itemForm.imageUri }} style={styles.previewImageSmall} />}
 
               <Pressable style={styles.primaryBtn} onPress={saveItemFromModal}>

src/styles.js

@@ -10,10 +10,10 @@ export const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
-    paddingTop: 10,
+    paddingTop: 12,
-    paddingBottom: TAB_BAR_HEIGHT + 20,
+    paddingBottom: TAB_BAR_HEIGHT + 22,
-    gap: 12,
+    gap: 14,
   },
   statusSpacer: {
     height: Platform.OS === 'android' ? 8 : 0,
@@ -64,7 +64,7 @@ export const styles = StyleSheet.create({
   },
 
   section: {
-    gap: 10,
+    gap: 12,
   },
   sectionTitle: {
     color: '#f1f5f9',
@@ -80,7 +80,7 @@ export const styles = StyleSheet.create({
 
   card: {
     backgroundColor: '#111827',
-    borderRadius: 14,
+    borderRadius: 16,
     borderWidth: 1,
     borderColor: '#1f2937',
     padding: 12,
@@ -91,7 +91,7 @@ export const styles = StyleSheet.create({
   },
   cardSoft: {
     backgroundColor: '#0f172a',
-    borderRadius: 14,
+    borderRadius: 16,
     borderWidth: 1,
     borderColor: '#1e293b',
     padding: 12,
@@ -211,6 +211,11 @@ export const styles = StyleSheet.create({
     color: '#dbeafe',
     fontWeight: '700',
   },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 4,
+  },
 
   inlineToggle: {
     marginTop: 2,
@@ -241,7 +246,7 @@ export const styles = StyleSheet.create({
   },
 
   itemCard: {
-    borderRadius: 14,
+    borderRadius: 16,
     backgroundColor: '#111827',
     borderWidth: 1,
     borderColor: '#1f2937',
@@ -302,6 +307,38 @@ export const styles = StyleSheet.create({
   answerStateDotOn: {
     backgroundColor: '#22c55e',
   },
+  answerStateDotBad: {
+    backgroundColor: '#ef4444',
+  },
+
+  statsRow: {
+    flexDirection: 'row',
+    gap: 8,
+    flexWrap: 'wrap',
+  },
+  statPill: {
+    borderRadius: 999,
+    paddingVertical: 7,
+    paddingHorizontal: 11,
+    borderWidth: 1,
+  },
+  statPillCorrect: {
+    backgroundColor: '#163223',
+    borderColor: '#1f7a4e',
+  },
+  statPillBad: {
+    backgroundColor: '#3b1d22',
+    borderColor: '#7f1d1d',
+  },
+  statPillPending: {
+    backgroundColor: '#1f2937',
+    borderColor: '#334155',
+  },
+  statPillText: {
+    color: '#e2e8f0',
+    fontWeight: '700',
+    fontSize: 12,
+  },
 
   snapshotWrap: {
     marginTop: 8,
@@ -368,20 +405,23 @@ export const styles = StyleSheet.create({
   modalBackdrop: {
     flex: 1,
     backgroundColor: 'rgba(2,6,23,0.72)',
-    justifyContent: 'flex-end',
+    paddingHorizontal: 12,
   },
   modalKeyboardWrap: {
+    flex: 1,
     width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   modalCard: {
-    maxHeight: '87%',
+    width: '96%',
+    maxHeight: '90%',
     backgroundColor: '#0f172a',
-    borderTopLeftRadius: 18,
+    borderRadius: 20,
-    borderTopRightRadius: 18,
     borderWidth: 1,
     borderColor: '#1e293b',
-    padding: 14,
+    padding: 16,
-    gap: 8,
+    gap: 10,
   },
   closeText: {
     color: '#93c5fd',

src/tabs/CheckupTab.js

@@ -2,7 +2,14 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
 
-export default function CheckupTab({ checkupSession, answerCheckupYes, openFixModal, createFreshCheckupSession, saveCheckup }) {
+export default function CheckupTab({
+  checkupSession,
+  checkupStats,
+  answerCheckupYes,
+  openFixModal,
+  createFreshCheckupSession,
+  saveCheckup,
+}) {
   return (
     <View style={styles.section}>
       <View style={styles.sectionRow}>
@@ -12,6 +19,20 @@ export default function CheckupTab({ checkupSession, answerCheckupYes, openFixMo
         </Pressable>
       </View>
 
+      {!!checkupSession.length && (
+        <View style={styles.statsRow}>
+          <View style={[styles.statPill, styles.statPillCorrect]}>
+            <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
+          </View>
+          <View style={[styles.statPill, styles.statPillBad]}>
+            <Text style={styles.statPillText}>Bad: {checkupStats.bad}</Text>
+          </View>
+          <View style={[styles.statPill, styles.statPillPending]}>
+            <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
+          </View>
+        </View>
+      )}
+
       {checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
 
       {checkupSession.map((entry) => (
@@ -30,7 +51,13 @@ export default function CheckupTab({ checkupSession, answerCheckupYes, openFixMo
             <Pressable style={styles.answerNo} onPress={() => openFixModal(entry.itemId)}>
               <Text style={styles.answerText}>No</Text>
             </Pressable>
-            <View style={[styles.answerStateDot, entry.confirmed ? styles.answerStateDotOn : null]} />
+            <View
+              style={[
+                styles.answerStateDot,
+                entry.result === 'correct' ? styles.answerStateDotOn : null,
+                entry.result === 'bad' ? styles.answerStateDotBad : null,
+              ]}
+            />
           </View>
         </View>
       ))}

src/tabs/HistoryTab.js

@@ -15,7 +15,10 @@ export default function HistoryTab({ selectedTrip, selectedTripCheckups, selecte
         <View key={checkup.id} style={styles.cardSoft}>
           <Pressable onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}>
             <Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
-            <Text style={styles.cardMeta}>{checkup.snapshot.length} items</Text>
+            <Text style={styles.cardMeta}>
+              {checkup.snapshot.length} items · correct: {checkup.stats?.correct ?? checkup.snapshot.filter((x) => x.result === 'correct').length} · bad:{' '}
+              {checkup.stats?.bad ?? checkup.snapshot.filter((x) => x.result === 'bad').length}
+            </Text>
             <Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'}</Text>
           </Pressable>
 

src/tabs/TripsTab.js

@@ -17,6 +17,7 @@ export default function TripsTab({
   tripForm,
   updateTripForm,
   pickTripImage,
+  takeTripImage,
   templateTrip,
   createTrip,
   trips,
@@ -58,9 +59,14 @@ export default function TripsTab({
         <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
         <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
 
-        <Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
+        <View style={styles.actionRow}>
-          <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>
+          <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeTripImage}>
+            <Text style={styles.secondaryBtnText}>Take photo</Text>
           </Pressable>
+          <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickTripImage}>
+            <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+          </Pressable>
+        </View>
 
         {tripForm.imageUri ? <Image source={{ uri: tripForm.imageUri }} style={styles.previewImage} /> : null}