feat: add trip edit/archive flow and item bulk filters

TODO.md

@@ -39,3 +39,14 @@ Improving & Fixing Bugs (V3)
 - [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)
+- [x] Added trip view editing in modal (name/location/date/image)
+- [x] Added trip archive/unarchive flow with archived section
+- [x] Added item filters + bulk pack/unpack actions
+
+## Next Improvements (Requested)
+- [x] Edit trip directly in the trip view modal (name/location/dates/image)
+- [x] Add archive flow for trips (hide from active list without deleting history)
+- [ ] Enhance check-up modal UX (progress bar + back/skip controls)
+- [x] Add bulk item actions and filters (pack all/unpack all + status/category chips)
+- [ ] Add image optimization controls before save (compress/crop)
+- [ ] Add JSON export/import backup + restore flow

src/AppRoot.js

@@ -83,7 +83,9 @@ export default function AppRoot() {
 
   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 visibleTrips = useMemo(() => data.trips.filter((trip) => !trip.archived), [data.trips]);
+
+  const selectedTrip = useMemo(() => visibleTrips.find((trip) => trip.id === selectedTripId) || null, [visibleTrips, selectedTripId]);
 
   const selectedTripItems = useMemo(() => {
     if (!selectedTripId) return [];
@@ -139,18 +141,18 @@ export default function AppRoot() {
 
   useEffect(() => {
     if (!loaded) return;
-    if (!data.trips.length) {
+    if (!visibleTrips.length) {
       setSelectedTripId(null);
       return;
     }
 
-    if (selectedTripId && data.trips.some((trip) => trip.id === selectedTripId)) {
+    if (selectedTripId && visibleTrips.some((trip) => trip.id === selectedTripId)) {
       return;
     }
 
-    const bestTripId = findBestTripId(data.trips);
-    setSelectedTripId(bestTripId || data.trips[0].id);
-  }, [data.trips, selectedTripId, loaded]);
+    const bestTripId = findBestTripId(visibleTrips);
+    setSelectedTripId(bestTripId || visibleTrips[0].id);
+  }, [visibleTrips, selectedTripId, loaded]);
 
   useEffect(() => {
     if (tab !== 'checkup') return;
@@ -244,6 +246,7 @@ export default function AppRoot() {
             startDate: tripForm.startDate,
             endDate: tripForm.endDate,
             imageUri: tripForm.imageUri,
+            archived: false,
             createdAt: now,
             updatedAt: now,
           },
@@ -278,6 +281,62 @@ export default function AppRoot() {
     setData((prev) => ({ ...prev, defaultTemplateTripId: tripId }));
   }
 
+  function saveTripEdits(tripId, patch) {
+    if (!patch.name.trim()) {
+      Alert.alert('Missing name', 'Trip name is required.');
+      return false;
+    }
+
+    const start = parseYMD(patch.startDate);
+    const end = parseYMD(patch.endDate);
+
+    if (!start || !end) {
+      Alert.alert('Invalid dates', 'Please select valid trip dates.');
+      return false;
+    }
+
+    if (start > end) {
+      Alert.alert('Invalid dates', 'Start date cannot be after end date.');
+      return false;
+    }
+
+    setData((prev) => ({
+      ...prev,
+      trips: prev.trips.map((trip) =>
+        trip.id === tripId
+          ? {
+              ...trip,
+              name: patch.name.trim(),
+              location: patch.location.trim(),
+              startDate: patch.startDate,
+              endDate: patch.endDate,
+              imageUri: patch.imageUri,
+              updatedAt: Date.now(),
+            }
+          : trip
+      ),
+    }));
+
+    return true;
+  }
+
+  function setTripArchived(tripId, archived) {
+    setData((prev) => ({
+      ...prev,
+      trips: prev.trips.map((trip) =>
+        trip.id === tripId
+          ? {
+              ...trip,
+              archived,
+              archivedAt: archived ? Date.now() : null,
+              updatedAt: Date.now(),
+            }
+          : trip
+      ),
+      defaultTemplateTripId: archived && prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
+    }));
+  }
+
   function deleteTrip(tripId) {
     Alert.alert('Delete trip?', 'Trip items and check-up history will also be deleted.', [
       { text: 'Cancel', style: 'cancel' },
@@ -406,6 +465,30 @@ export default function AppRoot() {
     });
   }
 
+  function bulkSetItemStatus(itemIds, status) {
+    if (!selectedTripId || !itemIds.length) return;
+    const idSet = new Set(itemIds);
+    setData((prev) => {
+      const items = prev.itemsByTrip[selectedTripId] || [];
+      return {
+        ...prev,
+        itemsByTrip: {
+          ...prev.itemsByTrip,
+          [selectedTripId]: items.map((item) =>
+            idSet.has(item.id)
+              ? {
+                  ...item,
+                  status,
+                  lentTo: status === 'lent-to' ? item.lentTo : '',
+                  updatedAt: Date.now(),
+                }
+              : item
+          ),
+        },
+      };
+    });
+  }
+
   function deleteCheckup(checkupId) {
     if (!selectedTripId) return;
     setData((prev) => {
@@ -624,20 +707,32 @@ export default function AppRoot() {
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
         >
-          <TripPicker trips={data.trips} selectedTripId={selectedTripId} onChooseTrip={setSelectedTripId} />
+          <TripPicker trips={visibleTrips} selectedTripId={selectedTripId} onChooseTrip={setSelectedTripId} />
 
           {tab === 'trips' && (
             <TripsTab
               tripForm={tripForm}
               updateTripForm={updateTripForm}
-              pickTripImage={() => pickImage((uri) => updateTripForm('imageUri', uri))}
-              takeTripImage={() => takeImage((uri) => updateTripForm('imageUri', uri))}
+              pickTripImage={(onPicked) =>
+                pickImage((uri) => {
+                  if (typeof onPicked === 'function') onPicked(uri);
+                  else updateTripForm('imageUri', uri);
+                })
+              }
+              takeTripImage={(onPicked) =>
+                takeImage((uri) => {
+                  if (typeof onPicked === 'function') onPicked(uri);
+                  else updateTripForm('imageUri', uri);
+                })
+              }
               templateTrip={templateTrip}
               createTrip={createTrip}
               trips={data.trips}
               selectedTripId={selectedTripId}
               chooseTrip={setSelectedTripId}
               setTripAsTemplate={setTripAsTemplate}
+              saveTripEdits={saveTripEdits}
+              setTripArchived={setTripArchived}
               deleteTrip={deleteTrip}
               onInputFocus={onInputFocus}
               defaultTemplateTripId={data.defaultTemplateTripId}
@@ -655,6 +750,7 @@ export default function AppRoot() {
               openEditItemModal={openEditItemModal}
               deleteItem={deleteItem}
               quickSetItemStatus={quickSetItemStatus}
+              bulkSetItemStatus={bulkSetItemStatus}
             />
           )}
 

src/styles.js

@@ -89,6 +89,10 @@ export const styles = StyleSheet.create({
   cardActive: {
     borderColor: '#60a5fa',
   },
+  cardArchived: {
+    opacity: 0.72,
+    borderColor: '#374151',
+  },
   cardSoft: {
     backgroundColor: '#0f172a',
     borderRadius: 16,

src/tabs/ItemsTab.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import ItemCard from '../components/ItemCard';
+import { ITEM_STATUSES } from '../constants';
 import { styles } from '../styles';
 
 export default function ItemsTab({
@@ -10,7 +11,30 @@ export default function ItemsTab({
   openEditItemModal,
   deleteItem,
   quickSetItemStatus,
+  bulkSetItemStatus,
 }) {
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+
+  const categories = useMemo(
+    () => Array.from(new Set(selectedTripItems.map((item) => item.category?.trim()).filter(Boolean))).sort((a, b) => a.localeCompare(b)),
+    [selectedTripItems]
+  );
+
+  const filteredItems = useMemo(
+    () =>
+      selectedTripItems.filter((item) => {
+        const matchStatus = statusFilter === 'all' || item.status === statusFilter;
+        const itemCategory = item.category?.trim() || '';
+        const matchCategory = categoryFilter === 'all' || itemCategory === categoryFilter;
+        return matchStatus && matchCategory;
+      }),
+    [selectedTripItems, statusFilter, categoryFilter]
+  );
+
+  const filterStatusOptions = ['all', ...ITEM_STATUSES];
+  const filterCategoryOptions = ['all', ...categories];
+
   return (
     <View style={styles.section}>
       <View style={styles.sectionRow}>
@@ -23,7 +47,51 @@ export default function ItemsTab({
       {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
       {selectedTripItems.length === 0 && selectedTrip ? <Text style={styles.muted}>No items yet.</Text> : null}
 
-      {selectedTripItems.map((item) => (
+      {selectedTrip ? (
+        <View style={styles.cardSoft}>
+          <Text style={styles.cardTitle}>Quick actions</Text>
+          <View style={styles.actionRow}>
+            <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'packed')}>
+              <Text style={styles.secondaryBtnText}>Pack shown ({filteredItems.length})</Text>
+            </Pressable>
+            <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'unpacked')}>
+              <Text style={styles.secondaryBtnText}>Unpack shown ({filteredItems.length})</Text>
+            </Pressable>
+          </View>
+        </View>
+      ) : null}
+
+      {selectedTripItems.length > 0 ? (
+        <View style={styles.cardSoft}>
+          <Text style={styles.cardTitle}>Filters</Text>
+
+          <Text style={styles.cardMeta}>Status</Text>
+          <View style={styles.chipGroup}>
+            {filterStatusOptions.map((status) => {
+              const active = statusFilter === status;
+              return (
+                <Pressable key={status} style={[styles.chip, active && styles.chipActive]} onPress={() => setStatusFilter(status)}>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{status}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+
+          <Text style={styles.cardMeta}>Category</Text>
+          <View style={styles.chipGroup}>
+            {filterCategoryOptions.map((category) => {
+              const active = categoryFilter === category;
+              return (
+                <Pressable key={category} style={[styles.chip, active && styles.chipActive]} onPress={() => setCategoryFilter(category)}>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{category}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+
+      {filteredItems.map((item) => (
         <ItemCard
           key={item.id}
           item={item}
@@ -33,6 +101,8 @@ export default function ItemsTab({
           onQuickUnpack={() => quickSetItemStatus(item.id, 'unpacked')}
         />
       ))}
+
+      {selectedTripItems.length > 0 && filteredItems.length === 0 ? <Text style={styles.muted}>No items match the current filters.</Text> : null}
     </View>
   );
 }

src/tabs/TripsTab.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import DatePickerModal from '../components/DatePickerModal';
 import Field from '../components/Field';
 import { styles } from '../styles';
 
@@ -13,6 +14,14 @@ function DateField({ label, value, onPress }) {
   );
 }
 
+const emptyEditForm = {
+  name: '',
+  location: '',
+  startDate: '',
+  endDate: '',
+  imageUri: '',
+};
+
 export default function TripsTab({
   tripForm,
   updateTripForm,
@@ -24,6 +33,8 @@ export default function TripsTab({
   selectedTripId,
   chooseTrip,
   setTripAsTemplate,
+  saveTripEdits,
+  setTripArchived,
   deleteTrip,
   onInputFocus,
   defaultTemplateTripId,
@@ -33,24 +44,72 @@ export default function TripsTab({
 }) {
   const [createModalVisible, setCreateModalVisible] = useState(false);
   const [viewTripId, setViewTripId] = useState(null);
+  const [editMode, setEditMode] = useState(false);
+  const [editForm, setEditForm] = useState(emptyEditForm);
+  const [viewDatePicker, setViewDatePicker] = useState({ visible: false, field: 'startDate' });
 
   const activeTrip = useMemo(() => trips.find((trip) => trip.id === selectedTripId) || null, [trips, selectedTripId]);
   const viewingTrip = useMemo(() => trips.find((trip) => trip.id === viewTripId) || null, [trips, viewTripId]);
+  const activeTrips = useMemo(() => trips.filter((trip) => !trip.archived), [trips]);
+  const archivedTrips = useMemo(() => trips.filter((trip) => trip.archived), [trips]);
 
   function submitCreateTrip() {
     const ok = createTrip();
     if (ok) setCreateModalVisible(false);
   }
 
+  function openView(tripId) {
+    const trip = trips.find((x) => x.id === tripId);
+    if (!trip) return;
+    setViewTripId(tripId);
+    setEditMode(false);
+    setEditForm({
+      name: trip.name || '',
+      location: trip.location || '',
+      startDate: trip.startDate || '',
+      endDate: trip.endDate || '',
+      imageUri: trip.imageUri || '',
+    });
+  }
+
+  function updateEditForm(field, value) {
+    setEditForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  function saveEditFromView() {
+    if (!viewingTrip) return;
+    const ok = saveTripEdits(viewingTrip.id, editForm);
+    if (!ok) return;
+    setEditMode(false);
+  }
+
+  function pickViewTripImage() {
+    pickTripImage((uri) => updateEditForm('imageUri', uri));
+  }
+
+  function takeViewTripImage() {
+    takeTripImage((uri) => updateEditForm('imageUri', uri));
+  }
+
   function applyTemplateFromView() {
     if (!viewingTrip) return;
     setTripAsTemplate(viewingTrip.id);
   }
 
+  function toggleArchiveFromView() {
+    if (!viewingTrip) return;
+    setTripArchived(viewingTrip.id, !viewingTrip.archived);
+    if (!viewingTrip.archived) {
+      setViewTripId(null);
+      setEditMode(false);
+    }
+  }
+
   function deleteFromView() {
     if (!viewingTrip) return;
     const tripId = viewingTrip.id;
     setViewTripId(null);
+    setEditMode(false);
     deleteTrip(tripId);
   }
 
@@ -71,12 +130,12 @@ export default function TripsTab({
           <Text style={styles.cardMeta}>{activeTripItemCount} items · {activeTripCheckupCount} check-ups</Text>
         </View>
       ) : (
-        <Text style={styles.muted}>Create your first trip to get started.</Text>
+        <Text style={styles.muted}>No active trips. Unarchive or create one.</Text>
       )}
 
-      <Text style={styles.tripListTitle}>All Trips</Text>
+      <Text style={styles.tripListTitle}>Active Trips</Text>
 
-      {trips
+      {activeTrips
         .slice()
         .sort((a, b) => b.startDate.localeCompare(a.startDate))
         .map((trip) => (
@@ -91,7 +150,7 @@ export default function TripsTab({
                 <Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
                   <Text style={styles.miniBtnText}>Select</Text>
                 </Pressable>
-                <Pressable style={styles.miniBtn} onPress={() => setViewTripId(trip.id)}>
+                <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
                   <Text style={styles.miniBtnText}>View</Text>
                 </Pressable>
               </View>
@@ -100,6 +159,31 @@ export default function TripsTab({
           </View>
         ))}
 
+      {archivedTrips.length > 0 ? (
+        <>
+          <Text style={styles.tripListTitle}>Archived Trips</Text>
+          {archivedTrips
+            .slice()
+            .sort((a, b) => b.startDate.localeCompare(a.startDate))
+            .map((trip) => (
+              <View key={trip.id} style={[styles.card, styles.cardArchived]}>
+                <View style={styles.cardRow}>
+                  <View style={styles.flex}>
+                    <Text style={styles.cardTitle}>{trip.name}</Text>
+                    <Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
+                    <Text style={styles.cardMeta}>Archived</Text>
+                  </View>
+                  <View style={styles.stackButtons}>
+                    <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
+                      <Text style={styles.miniBtnText}>View</Text>
+                    </Pressable>
+                  </View>
+                </View>
+              </View>
+            ))}
+        </>
+      ) : null}
+
       <Modal visible={createModalVisible} animationType="slide" transparent>
         <View style={styles.modalBackdrop}>
           <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
@@ -180,7 +264,12 @@ export default function TripsTab({
             <View style={styles.modalCard}>
               <View style={styles.sectionRow}>
                 <Text style={styles.sectionTitle}>Trip View</Text>
-                <Pressable onPress={() => setViewTripId(null)}>
+                <Pressable
+                  onPress={() => {
+                    setViewTripId(null);
+                    setEditMode(false);
+                  }}
+                >
                   <Text style={styles.closeText}>Close</Text>
                 </Pressable>
               </View>
@@ -192,25 +281,94 @@ export default function TripsTab({
                   contentContainerStyle={{ paddingBottom: 12 }}
                   showsVerticalScrollIndicator={false}
                 >
-                  {viewingTrip.imageUri ? <Image source={{ uri: viewingTrip.imageUri }} style={styles.previewImage} /> : null}
-                  <Text style={styles.tripHeroTitle}>{viewingTrip.name}</Text>
-                  <Text style={styles.cardMeta}>{viewingTrip.location || 'No location'}</Text>
-                  <Text style={styles.cardMeta}>{viewingTrip.startDate} → {viewingTrip.endDate}</Text>
-                  <Text style={styles.cardMeta}>{defaultTemplateTripId === viewingTrip.id ? 'Default template trip' : 'Not default template'}</Text>
+                  {!editMode ? (
+                    <>
+                      {viewingTrip.imageUri ? <Image source={{ uri: viewingTrip.imageUri }} style={styles.previewImage} /> : null}
+                      <Text style={styles.tripHeroTitle}>{viewingTrip.name}</Text>
+                      <Text style={styles.cardMeta}>{viewingTrip.location || 'No location'}</Text>
+                      <Text style={styles.cardMeta}>{viewingTrip.startDate} → {viewingTrip.endDate}</Text>
+                      <Text style={styles.cardMeta}>{defaultTemplateTripId === viewingTrip.id ? 'Default template trip' : 'Not default template'}</Text>
+                      <Text style={styles.cardMeta}>{viewingTrip.archived ? 'Archived' : 'Active'}</Text>
 
-                  <Pressable style={styles.secondaryBtn} onPress={applyTemplateFromView}>
-                    <Text style={styles.secondaryBtnText}>Set as Template</Text>
-                  </Pressable>
+                      <Pressable style={styles.miniBtn} onPress={() => setEditMode(true)}>
+                        <Text style={styles.miniBtnText}>Edit Trip</Text>
+                      </Pressable>
 
-                  <Pressable style={styles.miniBtnDanger} onPress={deleteFromView}>
-                    <Text style={styles.miniBtnText}>Delete Trip</Text>
-                  </Pressable>
+                      <Pressable style={styles.secondaryBtn} onPress={applyTemplateFromView}>
+                        <Text style={styles.secondaryBtnText}>Set as Template</Text>
+                      </Pressable>
+
+                      <Pressable style={styles.secondaryBtn} onPress={toggleArchiveFromView}>
+                        <Text style={styles.secondaryBtnText}>{viewingTrip.archived ? 'Unarchive Trip' : 'Archive Trip'}</Text>
+                      </Pressable>
+
+                      <Pressable style={styles.miniBtnDanger} onPress={deleteFromView}>
+                        <Text style={styles.miniBtnText}>Delete Trip</Text>
+                      </Pressable>
+                    </>
+                  ) : (
+                    <>
+                      <Field label="Name">
+                        <TextInput
+                          style={styles.input}
+                          value={editForm.name}
+                          onChangeText={(v) => updateEditForm('name', v)}
+                          placeholder="Trip name"
+                          placeholderTextColor="#6b7280"
+                          onFocus={onInputFocus}
+                        />
+                      </Field>
+
+                      <Field label="Location">
+                        <TextInput
+                          style={styles.input}
+                          value={editForm.location}
+                          onChangeText={(v) => updateEditForm('location', v)}
+                          placeholder="Location"
+                          placeholderTextColor="#6b7280"
+                          onFocus={onInputFocus}
+                        />
+                      </Field>
+
+                      <DateField label="Start Date" value={editForm.startDate} onPress={() => setViewDatePicker({ visible: true, field: 'startDate' })} />
+                      <DateField label="End Date" value={editForm.endDate} onPress={() => setViewDatePicker({ visible: true, field: 'endDate' })} />
+
+                      <View style={styles.actionRow}>
+                        <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeViewTripImage}>
+                          <Text style={styles.secondaryBtnText}>Take photo</Text>
+                        </Pressable>
+                        <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickViewTripImage}>
+                          <Text style={styles.secondaryBtnText}>{editForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+                        </Pressable>
+                      </View>
+
+                      {editForm.imageUri ? <Image source={{ uri: editForm.imageUri }} style={styles.previewImage} /> : null}
+
+                      <Pressable style={styles.primaryBtn} onPress={saveEditFromView}>
+                        <Text style={styles.primaryBtnText}>Save Trip</Text>
+                      </Pressable>
+                      <Pressable style={styles.secondaryBtn} onPress={() => setEditMode(false)}>
+                        <Text style={styles.secondaryBtnText}>Cancel Edit</Text>
+                      </Pressable>
+                    </>
+                  )}
                 </ScrollView>
               ) : null}
             </View>
           </KeyboardAvoidingView>
         </View>
       </Modal>
+
+      <DatePickerModal
+        visible={viewDatePicker.visible}
+        title={viewDatePicker.field === 'startDate' ? 'Pick start date' : 'Pick end date'}
+        value={editForm[viewDatePicker.field]}
+        onClose={() => setViewDatePicker((prev) => ({ ...prev, visible: false }))}
+        onSelect={(ymd) => {
+          updateEditForm(viewDatePicker.field, ymd);
+          setViewDatePicker((prev) => ({ ...prev, visible: false }));
+        }}
+      />
     </View>
   );
 }