feat: add centered quick-add item button in bottom nav

feat: replace native alerts with custom dialog modals
chore: limit CI triggers and move TODOs to Gitea issues
2026-04-18 18:13:28 +02:00 · 2026-04-18 15:20:25 +02:00 · 2026-04-18 15:08:45 +02:00 · 2026-04-18 15:05:46 +02:00 · 2026-04-18 14:53:02 +02:00 · 2026-04-18 14:47:59 +02:00
19 changed files with 1578 additions and 305 deletions
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -3,6 +3,10 @@ on:
  push:
    branches:
      - main
+    paths:
+      - '**/*.js'
+      - '**/*.json'
+      - '.gitea/workflows/**'

 jobs:
  build-android:
--- a/.gitea/workflows/dev.yml
+++ b/.gitea/workflows/dev.yml
@@ -3,6 +3,10 @@ on:
  push:
    branches-ignore:
      - main
+    paths:
+      - '**/*.js'
+      - '**/*.json'
+      - '.gitea/workflows/**'

 jobs:
  validate:
--- a/README.md
+++ b/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

--- a/TODO.md
+++ b/TODO.md
@@ -1,31 +1,14 @@
 # TODO - Luggage List

-## Stage
-Improving & Fixing Bugs (V2)
+This file was intentionally nuked.

-## V2 Changes Requested
- [x] Trip can be selected from everywhere (global trip picker)
- [x] Fixed trip switching behavior for web by removing aggressive auto-reselect
- [x] Removed trip image crop (gallery pick without editing)
- [x] Item updates now happen in a modal
- [x] Redesigned item cards
- [x] Moved top nav to bottom and made it mobile-friendly
- [x] Removed top title block
- [x] Reworked check-up flow to yes/no checklist
- [x] “No” now opens update modal for check-up-only changes
- [x] Added optional toggle to also sync fix into trip item list
- [x] Removed JSON export feature
- [x] Improved keyboard behavior with KeyboardAvoidingView + scroll-safe forms
- [x] Full UI redesign (dark-first minimalist with accent colors)
- [x] Set new icon from `https://cdn.reversed.dev/pictures/yesnt.png`
-
-## Validation
- [x] `npm install`
- [x] `npx expo export --platform web`
-
-## Progress Log
- [x] V1 prototype complete and shipped
- [x] CI adjusted (no `eas init` in workflows)
- [x] V2 redesign + behavior fixes implemented
- [x] Removed legacy template src folder
- [x] Rebuilt app into modular `src/` structure (tabs/components/modals/styles/utils)
+All pending tasks now live as Gitea issues:
+- https://gitea.reversed.dev/space/luggage-list/issues/1
+- https://gitea.reversed.dev/space/luggage-list/issues/2
+- https://gitea.reversed.dev/space/luggage-list/issues/3
+- https://gitea.reversed.dev/space/luggage-list/issues/4
+- https://gitea.reversed.dev/space/luggage-list/issues/5
+- https://gitea.reversed.dev/space/luggage-list/issues/6
+- https://gitea.reversed.dev/space/luggage-list/issues/7
+- https://gitea.reversed.dev/space/luggage-list/issues/8
+- https://gitea.reversed.dev/space/luggage-list/issues/9
--- a/app.json
+++ b/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."
+        }
+      ]
+    ]
  }
 }
--- a/src/AppRoot.js
+++ b/src/AppRoot.js
@@ -1,18 +1,20 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Alert, KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, Text, View } from 'react-native';
+import { 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';
 import BottomTab from './components/BottomTab';
 import TripPicker from './components/TripPicker';
+import DatePickerModal from './components/DatePickerModal';
+import AppDialogModal from './components/AppDialogModal';
 import ItemModal from './modals/ItemModal';
-import CheckupFixModal from './modals/CheckupFixModal';
+import CheckupFlowModal from './modals/CheckupFlowModal';
 import TripsTab from './tabs/TripsTab';
 import ItemsTab from './tabs/ItemsTab';
 import CheckupTab from './tabs/CheckupTab';
 import HistoryTab from './tabs/HistoryTab';
 import { emptyData, STORAGE_KEY } from './constants';
-import { findActiveTripId, makeId, parseYMD, todayYMD } from './utils/date';
+import { findBestTripId, makeId, parseYMD, todayYMD } from './utils/date';
 import { styles } from './styles';

 const emptyTripForm = () => ({
@@ -36,6 +38,28 @@ const emptyItemForm = () => ({
  imageUri: '',
 });

+const emptyCheckupNoForm = () => ({
+  status: 'unpacked',
+  placement: 'suitcase',
+  lentTo: '',
+  updateMasterList: false,
+});
+
+function buildCheckupSession(items) {
+  return items.map((item) => ({
+    itemId: item.id,
+    name: item.name,
+    category: item.category,
+    current: {
+      status: item.status,
+      placement: item.placement,
+      lentTo: item.lentTo || '',
+    },
+    confirmed: false,
+    result: 'pending',
+  }));
+}
+
 export default function AppRoot() {
  const scrollRef = useRef(null);

@@ -45,23 +69,25 @@ export default function AppRoot() {

  const [selectedTripId, setSelectedTripId] = useState(null);
  const [tripForm, setTripForm] = useState(emptyTripForm());
+  const [datePicker, setDatePicker] = useState({ visible: false, field: 'startDate' });

  const [itemModalVisible, setItemModalVisible] = useState(false);
  const [itemForm, setItemForm] = useState(emptyItemForm());

  const [checkupSession, setCheckupSession] = useState([]);
-  const [checkupFixModalVisible, setCheckupFixModalVisible] = useState(false);
-  const [checkupFixTargetId, setCheckupFixTargetId] = useState(null);
-  const [checkupFixForm, setCheckupFixForm] = useState({
-    status: 'unpacked',
-    placement: 'suitcase',
-    lentTo: '',
-    updateMasterList: false,
-  });
+  const [checkupFlowVisible, setCheckupFlowVisible] = useState(false);
+  const [checkupFlowIndex, setCheckupFlowIndex] = useState(0);
+  const [checkupFlowMode, setCheckupFlowMode] = useState('question');
+  const [checkupNoForm, setCheckupNoForm] = useState(emptyCheckupNoForm());

  const [selectedCheckupId, setSelectedCheckupId] = useState(null);
+  const [dialogState, setDialogState] = useState({ visible: false, title: '', message: '', buttons: [] });

-  const selectedTrip = useMemo(() => data.trips.find((trip) => trip.id === selectedTripId) || null, [data.trips, selectedTripId]);
+  const topInset = Platform.OS === 'android' ? (RNStatusBar.currentHeight || 0) + 10 : 0;
+
+  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 [];
@@ -78,6 +104,52 @@ 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]);
+
+  const checkupCurrentEntry = useMemo(() => {
+    if (!checkupFlowVisible) return null;
+    if (checkupFlowIndex >= checkupSession.length) return null;
+    return checkupSession[checkupFlowIndex] || null;
+  }, [checkupFlowVisible, checkupFlowIndex, checkupSession]);
+
+  function closeDialog() {
+    setDialogState((prev) => ({ ...prev, visible: false }));
+  }
+
+  function showAlert(title, message) {
+    setDialogState({
+      visible: true,
+      title,
+      message,
+      buttons: [{ text: 'OK', tone: 'primary', onPress: closeDialog }],
+    });
+  }
+
+  function showConfirm({ title, message, confirmText = 'Confirm', onConfirm, tone = 'danger' }) {
+    setDialogState({
+      visible: true,
+      title,
+      message,
+      buttons: [
+        { text: 'Cancel', tone: 'neutral', onPress: closeDialog },
+        {
+          text: confirmText,
+          tone,
+          onPress: () => {
+            closeDialog();
+            if (typeof onConfirm === 'function') onConfirm();
+          },
+        },
+      ],
+    });
+  }
+
  useEffect(() => {
    (async () => {
      try {
@@ -87,7 +159,7 @@ export default function AppRoot() {
          setData({ ...emptyData, ...parsed });
        }
      } catch {
-        Alert.alert('Error', 'Could not load local data.');
+        showAlert('Error', 'Could not load local data.');
      } finally {
        setLoaded(true);
      }
@@ -97,24 +169,24 @@ export default function AppRoot() {
  useEffect(() => {
    if (!loaded) return;
    AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data)).catch(() => {
-      Alert.alert('Error', 'Could not save local data.');
+      showAlert('Error', 'Could not save local data.');
    });
  }, [data, loaded]);

  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 activeTripId = findActiveTripId(data.trips);
-    setSelectedTripId(activeTripId || 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;
@@ -130,10 +202,19 @@ export default function AppRoot() {
    setItemForm((prev) => ({ ...prev, [field]: value }));
  }

+  function openDatePicker(field) {
+    setDatePicker({ visible: true, field });
+  }
+
+  function onSelectDate(ymd) {
+    updateTripForm(datePicker.field, ymd);
+    setDatePicker((prev) => ({ ...prev, visible: false }));
+  }
+
  async function pickImage(onPicked) {
    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!perm.granted) {
-      Alert.alert('Permission needed', 'Allow gallery access to select images.');
+      showAlert('Permission needed', 'Allow gallery access to select images.');
      return;
    }

@@ -148,23 +229,40 @@ export default function AppRoot() {
    }
  }

+  async function takeImage(onPicked) {
+    const perm = await ImagePicker.requestCameraPermissionsAsync();
+    if (!perm.granted) {
+      showAlert('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.');
-      return;
+      showAlert('Missing name', 'Trip name is required.');
+      return false;
    }

    const start = parseYMD(tripForm.startDate);
    const end = parseYMD(tripForm.endDate);

    if (!start || !end) {
-      Alert.alert('Invalid dates', 'Use YYYY-MM-DD format.');
-      return;
+      showAlert('Invalid dates', 'Please select valid trip dates.');
+      return false;
    }

    if (start > end) {
-      Alert.alert('Invalid dates', 'Start date cannot be after end date.');
-      return;
+      showAlert('Invalid dates', 'Start date cannot be after end date.');
+      return false;
    }

    const now = Date.now();
@@ -182,6 +280,7 @@ export default function AppRoot() {
            startDate: tripForm.startDate,
            endDate: tripForm.endDate,
            imageUri: tripForm.imageUri,
+            archived: false,
            createdAt: now,
            updatedAt: now,
          },
@@ -209,19 +308,76 @@ export default function AppRoot() {

    setSelectedTripId(tripId);
    setTripForm(emptyTripForm());
+    return true;
  }

  function setTripAsTemplate(tripId) {
    setData((prev) => ({ ...prev, defaultTemplateTripId: tripId }));
  }

+  function saveTripEdits(tripId, patch) {
+    if (!patch.name.trim()) {
+      showAlert('Missing name', 'Trip name is required.');
+      return false;
+    }
+
+    const start = parseYMD(patch.startDate);
+    const end = parseYMD(patch.endDate);
+
+    if (!start || !end) {
+      showAlert('Invalid dates', 'Please select valid trip dates.');
+      return false;
+    }
+
+    if (start > end) {
+      showAlert('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' },
-      {
-        text: 'Delete',
-        style: 'destructive',
-        onPress: () => {
+    showConfirm({
+      title: 'Delete trip?',
+      message: 'Trip items and check-up history will also be deleted.',
+      confirmText: 'Delete',
+      tone: 'danger',
+      onConfirm: () => {
        setData((prev) => {
          const trips = prev.trips.filter((trip) => trip.id !== tripId);
          const itemsByTrip = { ...prev.itemsByTrip };
@@ -238,8 +394,7 @@ export default function AppRoot() {
          };
        });
      },
-      },
-    ]);
+    });
  }

  function openAddItemModal() {
@@ -263,12 +418,12 @@ export default function AppRoot() {

  function saveItemFromModal() {
    if (!selectedTripId) {
-      Alert.alert('No trip selected', 'Please select or create a trip first.');
+      showAlert('No trip selected', 'Please select or create a trip first.');
      return;
    }

    if (!itemForm.name.trim()) {
-      Alert.alert('Missing name', 'Item name is required.');
+      showAlert('Missing name', 'Item name is required.');
      return;
    }

@@ -320,68 +475,8 @@ export default function AppRoot() {
    });
  }

-  function createFreshCheckupSession() {
-    if (!selectedTripItems.length) {
-      setCheckupSession([]);
-      return;
-    }
-
-    const fresh = selectedTripItems.map((item) => ({
-      itemId: item.id,
-      name: item.name,
-      category: item.category,
-      current: {
-        status: item.status,
-        placement: item.placement,
-        lentTo: item.lentTo || '',
-      },
-      confirmed: false,
-    }));
-
-    setCheckupSession(fresh);
-  }
-
-  function answerCheckupYes(itemId) {
-    setCheckupSession((prev) => prev.map((entry) => (entry.itemId === itemId ? { ...entry, confirmed: true } : entry)));
-  }
-
-  function openFixModal(itemId) {
-    const entry = checkupSession.find((x) => x.itemId === itemId);
-    if (!entry) return;
-
-    setCheckupFixTargetId(itemId);
-    setCheckupFixForm({
-      status: entry.current.status || 'unpacked',
-      placement: entry.current.placement || 'suitcase',
-      lentTo: entry.current.lentTo || '',
-      updateMasterList: false,
-    });
-    setCheckupFixModalVisible(true);
-  }
-
-  function saveFixModal() {
-    if (!checkupFixTargetId) return;
-
-    const targetId = checkupFixTargetId;
-    const patch = {
-      status: checkupFixForm.status,
-      placement: checkupFixForm.placement,
-      lentTo: checkupFixForm.status === 'lent-to' ? checkupFixForm.lentTo.trim() : '',
-    };
-
-    setCheckupSession((prev) =>
-      prev.map((entry) =>
-        entry.itemId === targetId
-          ? {
-              ...entry,
-              current: patch,
-              confirmed: true,
-            }
-          : entry
-      )
-    );
-
-    if (checkupFixForm.updateMasterList && selectedTripId) {
+  function quickSetItemStatus(itemId, status) {
+    if (!selectedTripId) return;
    setData((prev) => {
      const items = prev.itemsByTrip[selectedTripId] || [];
      return {
@@ -389,7 +484,160 @@ export default function AppRoot() {
        itemsByTrip: {
          ...prev.itemsByTrip,
          [selectedTripId]: items.map((item) =>
-              item.id === targetId
+            item.id === itemId
+              ? {
+                  ...item,
+                  status,
+                  lentTo: status === 'lent-to' ? item.lentTo : '',
+                  updatedAt: Date.now(),
+                }
+              : item
+          ),
+        },
+      };
+    });
+  }
+
+  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;
+
+    showConfirm({
+      title: 'Delete check-up?',
+      message: 'This snapshot will be removed from history.',
+      confirmText: 'Delete',
+      tone: 'danger',
+      onConfirm: () => {
+        setData((prev) => {
+          const existing = prev.checkupsByTrip[selectedTripId] || [];
+          return {
+            ...prev,
+            checkupsByTrip: {
+              ...prev.checkupsByTrip,
+              [selectedTripId]: existing.filter((checkup) => checkup.id !== checkupId),
+            },
+          };
+        });
+        setSelectedCheckupId((prev) => (prev === checkupId ? null : prev));
+      },
+    });
+  }
+
+  function createFreshCheckupSession() {
+    if (!selectedTripItems.length) {
+      setCheckupSession([]);
+      return;
+    }
+    setCheckupSession(buildCheckupSession(selectedTripItems));
+  }
+
+  function startCheckupFlow() {
+    if (!selectedTripId) {
+      showAlert('No trip selected', 'Please select a trip first.');
+      return;
+    }
+    if (!selectedTripItems.length) {
+      showAlert('No items', 'Add items before starting a check-up.');
+      return;
+    }
+
+    const fresh = buildCheckupSession(selectedTripItems);
+    setCheckupSession(fresh);
+    setCheckupFlowIndex(0);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+    setCheckupFlowVisible(true);
+  }
+
+  function closeCheckupFlow() {
+    setCheckupFlowVisible(false);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function goNextInCheckup() {
+    setCheckupFlowIndex((prev) => prev + 1);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function answerCurrentCheckupYes() {
+    const entry = checkupCurrentEntry;
+    if (!entry) return;
+
+    setCheckupSession((prev) =>
+      prev.map((x) => (x.itemId === entry.itemId ? { ...x, confirmed: true, result: 'correct' } : x))
+    );
+    goNextInCheckup();
+  }
+
+  function openCurrentCheckupNo() {
+    const entry = checkupCurrentEntry;
+    if (!entry) return;
+    setCheckupNoForm({
+      status: entry.current.status || 'unpacked',
+      placement: entry.current.placement || 'suitcase',
+      lentTo: entry.current.lentTo || '',
+      updateMasterList: false,
+    });
+    setCheckupFlowMode('edit');
+  }
+
+  function saveCurrentCheckupNo() {
+    const entry = checkupCurrentEntry;
+    if (!entry) return;
+
+    const patch = {
+      status: checkupNoForm.status,
+      placement: checkupNoForm.placement,
+      lentTo: checkupNoForm.status === 'lent-to' ? checkupNoForm.lentTo.trim() : '',
+    };
+
+    setCheckupSession((prev) =>
+      prev.map((x) =>
+        x.itemId === entry.itemId
+          ? {
+              ...x,
+              current: patch,
+              confirmed: true,
+              result: 'bad',
+            }
+          : x
+      )
+    );
+
+    if (checkupNoForm.updateMasterList && selectedTripId) {
+      setData((prev) => {
+        const items = prev.itemsByTrip[selectedTripId] || [];
+        return {
+          ...prev,
+          itemsByTrip: {
+            ...prev.itemsByTrip,
+            [selectedTripId]: items.map((item) =>
+              item.id === entry.itemId
                ? {
                    ...item,
                    status: patch.status,
@@ -404,34 +652,34 @@ export default function AppRoot() {
      });
    }

-    setCheckupFixModalVisible(false);
-    setCheckupFixTargetId(null);
+    goNextInCheckup();
  }

-  function saveCheckup() {
+  function saveCheckupSnapshot(sessionToSave) {
    if (!selectedTripId) {
-      Alert.alert('No trip selected', 'Please select a trip first.');
-      return;
+      showAlert('No trip selected', 'Please select a trip first.');
+      return false;
    }

-    if (!checkupSession.length) {
-      Alert.alert('No items', 'Add items before creating a check-up.');
-      return;
+    if (!sessionToSave.length) {
+      showAlert('No items', 'Add items before creating a check-up.');
+      return false;
    }

-    const pending = checkupSession.filter((entry) => !entry.confirmed).length;
+    const pending = sessionToSave.filter((entry) => !entry.confirmed).length;
    if (pending > 0) {
-      Alert.alert('Incomplete', `Please confirm all items first (${pending} remaining).`);
-      return;
+      showAlert('Incomplete', `Please confirm all items first (${pending} remaining).`);
+      return false;
    }

-    const snapshot = checkupSession.map((entry) => ({
+    const snapshot = sessionToSave.map((entry) => ({
      itemId: entry.itemId,
      name: entry.name,
      category: entry.category,
      status: entry.current.status,
      placement: entry.current.placement,
      lentTo: entry.current.status === 'lent-to' ? entry.current.lentTo : '',
+      result: entry.result || 'pending',
    }));

    setData((prev) => {
@@ -446,26 +694,51 @@ 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,
+              },
            },
          ],
        },
      };
    });

-    Alert.alert('Saved', 'Check-up snapshot saved.');
+    return true;
+  }
+
+  function finishCheckupFlow() {
+    const ok = saveCheckupSnapshot(checkupSession);
+    if (!ok) return;
+
+    showAlert('Saved', 'Check-up snapshot saved.');
+    closeCheckupFlow();
    createFreshCheckupSession();
  }

-  function focusToEnd() {
+  function onInputFocus(event) {
+    const target = event?.target;
+    if (!target) return;
    setTimeout(() => {
-      scrollRef.current?.scrollToEnd?.({ animated: true });
+      const scrollFn = scrollRef.current?.scrollResponderScrollNativeHandleToKeyboard;
+      if (typeof scrollFn === 'function') {
+        scrollFn(target, 90, true);
+      }
    }, 80);
  }

+  function openQuickAddItemFromNav() {
+    if (!selectedTripId) {
+      showAlert('No trip selected', 'Please select or create a trip first.');
+      return;
+    }
+    openAddItemModal();
+  }
+
  if (!loaded) {
    return (
-      <SafeAreaView style={styles.safe}>
-        <StatusBar style="light" />
+      <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
+        <StatusBar style="light" translucent={false} />
        <View style={styles.center}>
          <Text style={styles.muted}>Loading local data...</Text>
        </View>
@@ -474,8 +747,8 @@ export default function AppRoot() {
  }

  return (
-    <SafeAreaView style={styles.safe}>
-      <StatusBar style="light" />
+    <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
+      <StatusBar style="light" translucent={false} />

      <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
        <ScrollView
@@ -484,22 +757,38 @@ 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))}
+              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}
-              focusToEnd={focusToEnd}
+              onInputFocus={onInputFocus}
              defaultTemplateTripId={data.defaultTemplateTripId}
+              openDatePicker={openDatePicker}
+              activeTripItemCount={selectedTripItems.length}
+              activeTripCheckupCount={selectedTripCheckups.length}
            />
          )}

@@ -510,30 +799,41 @@ export default function AppRoot() {
              openAddItemModal={openAddItemModal}
              openEditItemModal={openEditItemModal}
              deleteItem={deleteItem}
+              quickSetItemStatus={quickSetItemStatus}
+              bulkSetItemStatus={bulkSetItemStatus}
            />
          )}

          {tab === 'checkup' && (
            <CheckupTab
-              checkupSession={checkupSession}
-              answerCheckupYes={answerCheckupYes}
-              openFixModal={openFixModal}
-              createFreshCheckupSession={createFreshCheckupSession}
-              saveCheckup={saveCheckup}
+              selectedTrip={selectedTrip}
+              selectedTripItems={selectedTripItems}
+              checkupStats={checkupStats}
+              startCheckupFlow={startCheckupFlow}
            />
          )}

          {tab === 'history' && (
            <HistoryTab
+              selectedTrip={selectedTrip}
              selectedTripCheckups={selectedTripCheckups}
              selectedCheckupId={selectedCheckupId}
              setSelectedCheckupId={setSelectedCheckupId}
+              onDeleteCheckup={deleteCheckup}
            />
          )}
        </ScrollView>
      </KeyboardAvoidingView>

-      <BottomTab current={tab} onChange={setTab} />
+      <BottomTab current={tab} onChange={setTab} onAddItem={openQuickAddItemFromNav} canAddItem={!!selectedTripId} />
+
+      <DatePickerModal
+        visible={datePicker.visible}
+        title={datePicker.field === 'startDate' ? 'Pick start date' : 'Pick end date'}
+        value={tripForm[datePicker.field]}
+        onClose={() => setDatePicker((prev) => ({ ...prev, visible: false }))}
+        onSelect={onSelectDate}
+      />

      <ItemModal
        visible={itemModalVisible}
@@ -541,15 +841,31 @@ export default function AppRoot() {
        setItemModalVisible={setItemModalVisible}
        updateItemForm={updateItemForm}
        pickItemImage={() => pickImage((uri) => updateItemForm('imageUri', uri))}
+        takeItemImage={() => takeImage((uri) => updateItemForm('imageUri', uri))}
        saveItemFromModal={saveItemFromModal}
      />

-      <CheckupFixModal
-        visible={checkupFixModalVisible}
-        checkupFixForm={checkupFixForm}
-        setCheckupFixForm={setCheckupFixForm}
-        setCheckupFixModalVisible={setCheckupFixModalVisible}
-        saveFixModal={saveFixModal}
+      <CheckupFlowModal
+        visible={checkupFlowVisible}
+        entry={checkupCurrentEntry}
+        stepIndex={checkupFlowIndex}
+        total={checkupSession.length}
+        mode={checkupFlowMode}
+        noForm={checkupNoForm}
+        setNoForm={setCheckupNoForm}
+        onClose={closeCheckupFlow}
+        onYes={answerCurrentCheckupYes}
+        onNo={openCurrentCheckupNo}
+        onSaveNo={saveCurrentCheckupNo}
+        onFinish={finishCheckupFlow}
+      />
+
+      <AppDialogModal
+        visible={dialogState.visible}
+        title={dialogState.title}
+        message={dialogState.message}
+        buttons={dialogState.buttons}
+        onClose={closeDialog}
      />
    </SafeAreaView>
  );
--- a/src/components/AppDialogModal.js
+++ b/src/components/AppDialogModal.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Modal, Pressable, Text, View } from 'react-native';
+import { styles } from '../styles';
+
+export default function AppDialogModal({ visible, title, message, buttons = [], onClose }) {
+  if (!visible) return null;
+
+  const safeButtons = buttons.length ? buttons : [{ text: 'OK' }];
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={styles.dialogBackdrop}>
+        <View style={styles.dialogCard}>
+          <Text style={styles.dialogTitle}>{title || 'Notice'}</Text>
+          {!!message ? <Text style={styles.dialogMessage}>{message}</Text> : null}
+
+          <View style={styles.dialogButtonsRow}>
+            {safeButtons.map((button, idx) => {
+              const tone = button.tone || (button.style === 'destructive' ? 'danger' : button.style === 'cancel' ? 'neutral' : 'primary');
+              return (
+                <Pressable
+                  key={`${button.text}-${idx}`}
+                  style={[
+                    styles.dialogBtn,
+                    tone === 'primary' ? styles.dialogBtnPrimary : null,
+                    tone === 'danger' ? styles.dialogBtnDanger : null,
+                    tone === 'neutral' ? styles.dialogBtnNeutral : null,
+                  ]}
+                  onPress={button.onPress}
+                >
+                  <Text style={styles.dialogBtnText}>{button.text || 'OK'}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
--- a/src/components/BottomTab.js
+++ b/src/components/BottomTab.js
@@ -1,27 +1,51 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';

-export default function BottomTab({ current, onChange }) {
-  const tabs = [
-    { key: 'trips', label: 'Trips' },
-    { key: 'items', label: 'Items' },
-    { key: 'checkup', label: 'Check-Up' },
-    { key: 'history', label: 'History' },
+function TabBtn({ tab, current, onChange }) {
+  const active = current === tab.key;
+  return (
+    <Pressable onPress={() => onChange(tab.key)} style={styles.tabItem}>
+      <Ionicons name={active ? tab.iconActive : tab.icon} size={18} color={active ? '#dbeafe' : '#94a3b8'} />
+      <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
+    </Pressable>
+  );
+}
+
+export default function BottomTab({ current, onChange, onAddItem, canAddItem }) {
+  const leftTabs = [
+    { key: 'trips', label: 'Trips', icon: 'airplane-outline', iconActive: 'airplane' },
+    { key: 'items', label: 'Items', icon: 'briefcase-outline', iconActive: 'briefcase' },
+  ];
+
+  const rightTabs = [
+    { key: 'checkup', label: 'Check-Up', icon: 'checkmark-circle-outline', iconActive: 'checkmark-circle' },
+    { key: 'history', label: 'History', icon: 'time-outline', iconActive: 'time' },
  ];

  return (
    <View style={styles.tabBarWrap}>
      <View style={styles.tabBar}>
-        {tabs.map((tab) => {
-          const active = current === tab.key;
-          return (
-            <Pressable key={tab.key} onPress={() => onChange(tab.key)} style={styles.tabItem}>
-              <View style={[styles.tabDot, active && styles.tabDotActive]} />
-              <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
+        <View style={styles.tabGroupSide}>
+          {leftTabs.map((tab) => (
+            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
+          ))}
+        </View>
+
+        <Pressable
+          style={[styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled]}
+          onPress={onAddItem}
+          disabled={!canAddItem}
+        >
+          <Ionicons name="add" size={26} color="#fff" />
        </Pressable>
-          );
-        })}
+
+        <View style={styles.tabGroupSide}>
+          {rightTabs.map((tab) => (
+            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
+          ))}
+        </View>
      </View>
    </View>
  );
--- a/src/components/DatePickerModal.js
+++ b/src/components/DatePickerModal.js
@@ -0,0 +1,93 @@
+import React, { useMemo, useState } from 'react';
+import { Modal, Pressable, Text, View } from 'react-native';
+import { styles } from '../styles';
+import { todayYMD } from '../utils/date';
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+function toYMD(date) {
+  const y = date.getFullYear();
+  const m = `${date.getMonth() + 1}`.padStart(2, '0');
+  const d = `${date.getDate()}`.padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+function parseFromYMD(value) {
+  if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return new Date();
+  const date = new Date(`${value}T00:00:00`);
+  return Number.isNaN(date.getTime()) ? new Date() : date;
+}
+
+function monthLabel(date) {
+  return date.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+}
+
+function buildMonthGrid(viewDate) {
+  const first = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
+  const startWeekday = (first.getDay() + 6) % 7;
+  const daysInMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0).getDate();
+
+  const cells = [];
+  for (let i = 0; i < startWeekday; i += 1) cells.push(null);
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    cells.push(new Date(viewDate.getFullYear(), viewDate.getMonth(), day));
+  }
+
+  while (cells.length % 7 !== 0) cells.push(null);
+  return cells;
+}
+
+export default function DatePickerModal({ visible, value, onClose, onSelect, title = 'Pick date' }) {
+  const [viewDate, setViewDate] = useState(parseFromYMD(value || todayYMD()));
+
+  const grid = useMemo(() => buildMonthGrid(viewDate), [viewDate]);
+  const selected = value || todayYMD();
+
+  const goMonth = (diff) => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + diff, 1));
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={styles.dateModalBackdrop}>
+        <View style={styles.dateModalCard}>
+          <View style={styles.sectionRow}>
+            <Text style={styles.sectionTitle}>{title}</Text>
+            <Pressable onPress={onClose}>
+              <Text style={styles.closeText}>Close</Text>
+            </Pressable>
+          </View>
+
+          <View style={styles.calendarHeader}>
+            <Pressable style={styles.calendarNavBtn} onPress={() => goMonth(-1)}>
+              <Text style={styles.calendarNavText}>‹</Text>
+            </Pressable>
+            <Text style={styles.calendarMonthText}>{monthLabel(viewDate)}</Text>
+            <Pressable style={styles.calendarNavBtn} onPress={() => goMonth(1)}>
+              <Text style={styles.calendarNavText}>›</Text>
+            </Pressable>
+          </View>
+
+          <View style={styles.calendarWeekRow}>
+            {WEEKDAYS.map((w) => (
+              <Text key={w} style={styles.calendarWeekday}>{w}</Text>
+            ))}
+          </View>
+
+          <View style={styles.calendarGrid}>
+            {grid.map((cell, idx) => {
+              if (!cell) return <View key={`empty-${idx}`} style={styles.calendarCell} />;
+              const ymd = toYMD(cell);
+              const isSelected = ymd === selected;
+              return (
+                <Pressable key={ymd} style={[styles.calendarCell, isSelected && styles.calendarCellActive]} onPress={() => onSelect(ymd)}>
+                  <Text style={[styles.calendarCellText, isSelected && styles.calendarCellTextActive]}>{cell.getDate()}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
--- a/src/components/ItemCard.js
+++ b/src/components/ItemCard.js
@@ -7,7 +7,10 @@ function statusAccent(status) {
  return STATUS_COLORS[status] || '#64748b';
 }

-export default function ItemCard({ item, onEdit, onDelete }) {
+export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack }) {
+  const isPacked = item.status === 'packed';
+  const isUnpacked = item.status === 'unpacked';
+
  return (
    <View style={styles.itemCard}>
      <View style={[styles.itemAccent, { backgroundColor: statusAccent(item.status) }]} />
@@ -29,6 +32,16 @@ export default function ItemCard({ item, onEdit, onDelete }) {
            </Pressable>
          </View>
        </View>
+
+        <View style={styles.quickStatusRow}>
+          <Pressable style={[styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive]} onPress={onQuickPack}>
+            <Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Pack</Text>
+          </Pressable>
+          <Pressable style={[styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive]} onPress={onQuickUnpack}>
+            <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpack</Text>
+          </Pressable>
+        </View>
+
        {item.imageUri ? <Image source={{ uri: item.imageUri }} style={styles.previewImageSmall} /> : null}
      </View>
    </View>
--- a/src/modals/CheckupFixModal.js
+++ b/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}
--- a/src/modals/CheckupFlowModal.js
+++ b/src/modals/CheckupFlowModal.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
+import ChipGroup from '../components/ChipGroup';
+import Field from '../components/Field';
+import { styles } from '../styles';
+
+export default function CheckupFlowModal({
+  visible,
+  entry,
+  stepIndex,
+  total,
+  mode,
+  noForm,
+  setNoForm,
+  onClose,
+  onYes,
+  onNo,
+  onSaveNo,
+  onFinish,
+}) {
+  const finished = !entry;
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent>
+      <View style={styles.modalBackdrop}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
+          <View style={styles.modalCard}>
+            <View style={styles.sectionRow}>
+              <Text style={styles.sectionTitle}>Check-Up</Text>
+              <Pressable onPress={onClose}>
+                <Text style={styles.closeText}>Close</Text>
+              </Pressable>
+            </View>
+
+            {finished ? (
+              <View style={styles.section}>
+                <Text style={styles.cardTitle}>Done. Save this snapshot?</Text>
+                <Text style={styles.cardMeta}>All {total} items were checked.</Text>
+                <Pressable style={styles.primaryBtn} onPress={onFinish}>
+                  <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
+                </Pressable>
+              </View>
+            ) : (
+              <ScrollView
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                contentContainerStyle={{ paddingBottom: 12 }}
+                showsVerticalScrollIndicator={false}
+              >
+                <Text style={styles.tripHistoryLabel}>
+                  Item {stepIndex + 1} / {total}
+                </Text>
+                <Text style={styles.cardTitle}>{entry.name}</Text>
+                <Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
+                <Text style={styles.cardMeta}>
+                  Current: {entry.current.status} · {entry.current.placement}
+                  {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
+                </Text>
+
+                {mode === 'question' ? (
+                  <View style={styles.answerRowWide}>
+                    <Pressable style={styles.answerYesWide} onPress={onYes}>
+                      <Text style={styles.answerText}>Yes, correct</Text>
+                    </Pressable>
+                    <Pressable style={styles.answerNoWide} onPress={onNo}>
+                      <Text style={styles.answerText}>No, update</Text>
+                    </Pressable>
+                  </View>
+                ) : (
+                  <View style={styles.section}>
+                    <Field label="Status">
+                      <ChipGroup
+                        options={ITEM_STATUSES}
+                        value={noForm.status}
+                        onChange={(v) => setNoForm((prev) => ({ ...prev, status: v }))}
+                      />
+                    </Field>
+
+                    <Field label="Placement">
+                      <ChipGroup
+                        options={ITEM_PLACEMENTS}
+                        value={noForm.placement}
+                        onChange={(v) => setNoForm((prev) => ({ ...prev, placement: v }))}
+                      />
+                    </Field>
+
+                    {noForm.status === 'lent-to' ? (
+                      <Field label="Lent to">
+                        <TextInput
+                          style={styles.input}
+                          value={noForm.lentTo}
+                          onChangeText={(v) => setNoForm((prev) => ({ ...prev, lentTo: v }))}
+                          placeholder="Person name"
+                          placeholderTextColor="#6b7280"
+                        />
+                      </Field>
+                    ) : null}
+
+                    <Pressable
+                      style={styles.inlineToggle}
+                      onPress={() => setNoForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
+                    >
+                      <Text style={styles.inlineToggleText}>
+                        {noForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
+                      </Text>
+                    </Pressable>
+
+                    <Pressable style={styles.primaryBtn} onPress={onSaveNo}>
+                      <Text style={styles.primaryBtnText}>Save update + next</Text>
+                    </Pressable>
+                  </View>
+                )}
+              </ScrollView>
+            )}
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}
--- a/src/modals/ItemModal.js
+++ b/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}>
-                <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'Change image' : 'Add image'}</Text>
+              <View style={styles.actionRow}>
+                <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}>
--- a/src/styles.js
+++ b/src/styles.js
@@ -10,10 +10,13 @@ export const styles = StyleSheet.create({
    flex: 1,
  },
  content: {
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
    paddingTop: 12,
-    paddingBottom: TAB_BAR_HEIGHT + 18,
-    gap: 12,
+    paddingBottom: TAB_BAR_HEIGHT + 22,
+    gap: 14,
+  },
+  statusSpacer: {
+    height: Platform.OS === 'android' ? 8 : 0,
  },
  center: {
    flex: 1,
@@ -61,7 +64,7 @@ export const styles = StyleSheet.create({
  },

  section: {
-    gap: 10,
+    gap: 12,
  },
  sectionTitle: {
    color: '#f1f5f9',
@@ -77,7 +80,7 @@ export const styles = StyleSheet.create({

  card: {
    backgroundColor: '#111827',
-    borderRadius: 14,
+    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#1f2937',
    padding: 12,
@@ -86,9 +89,13 @@ export const styles = StyleSheet.create({
  cardActive: {
    borderColor: '#60a5fa',
  },
+  cardArchived: {
+    opacity: 0.72,
+    borderColor: '#374151',
+  },
  cardSoft: {
    backgroundColor: '#0f172a',
-    borderRadius: 14,
+    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#1e293b',
    padding: 12,
@@ -108,6 +115,38 @@ export const styles = StyleSheet.create({
    marginTop: 3,
    fontSize: 13,
  },
+  tripHistoryLabel: {
+    color: '#93c5fd',
+    fontSize: 13,
+    marginTop: -2,
+    marginBottom: 2,
+  },
+  tripHeroCard: {
+    backgroundColor: '#0f172a',
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: '#334155',
+    padding: 12,
+    gap: 8,
+  },
+  tripHeroImage: {
+    width: '100%',
+    height: 180,
+    borderRadius: 12,
+    backgroundColor: '#111827',
+  },
+  tripHeroTitle: {
+    color: '#f8fafc',
+    fontWeight: '800',
+    fontSize: 22,
+  },
+  tripListTitle: {
+    color: '#cbd5e1',
+    fontWeight: '700',
+    fontSize: 13,
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+  },

  fieldWrap: {
    gap: 6,
@@ -125,6 +164,18 @@ export const styles = StyleSheet.create({
    paddingHorizontal: 10,
    paddingVertical: 11,
  },
+  dateInput: {
+    borderWidth: 1,
+    borderColor: '#29415e',
+    borderRadius: 10,
+    backgroundColor: '#0b1220',
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+  dateInputText: {
+    color: '#dbeafe',
+    fontWeight: '600',
+  },

  chipGroup: {
    flexDirection: 'row',
@@ -190,6 +241,11 @@ export const styles = StyleSheet.create({
    color: '#dbeafe',
    fontWeight: '700',
  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 4,
+  },

  inlineToggle: {
    marginTop: 2,
@@ -220,7 +276,7 @@ export const styles = StyleSheet.create({
  },

  itemCard: {
-    borderRadius: 14,
+    borderRadius: 16,
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: '#1f2937',
@@ -245,6 +301,31 @@ export const styles = StyleSheet.create({
    marginTop: 2,
    fontSize: 13,
  },
+  quickStatusRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 2,
+  },
+  quickStatusBtn: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#334155',
+    backgroundColor: '#0b1220',
+  },
+  quickStatusBtnActive: {
+    borderColor: '#60a5fa',
+    backgroundColor: '#1d2a3a',
+  },
+  quickStatusBtnText: {
+    color: '#cbd5e1',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+  quickStatusBtnTextActive: {
+    color: '#dbeafe',
+  },

  answerRow: {
    marginTop: 8,
@@ -272,6 +353,28 @@ export const styles = StyleSheet.create({
    color: '#f8fafc',
    fontWeight: '700',
  },
+  answerRowWide: {
+    marginTop: 14,
+    gap: 10,
+  },
+  answerYesWide: {
+    backgroundColor: '#163223',
+    borderWidth: 1,
+    borderColor: '#1f7a4e',
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+    alignItems: 'center',
+  },
+  answerNoWide: {
+    backgroundColor: '#3b1d22',
+    borderWidth: 1,
+    borderColor: '#7f1d1d',
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+    alignItems: 'center',
+  },
  answerStateDot: {
    width: 10,
    height: 10,
@@ -281,6 +384,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,
@@ -327,20 +462,34 @@ export const styles = StyleSheet.create({
    borderColor: '#1f2937',
    flexDirection: 'row',
    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+  },
+  tabGroupSide: {
+    flexDirection: 'row',
+    width: '42%',
    justifyContent: 'space-around',
+    alignItems: 'center',
  },
  tabItem: {
    alignItems: 'center',
+    justifyContent: 'center',
    gap: 4,
+    minWidth: 58,
  },
-  tabDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 99,
-    backgroundColor: '#334155',
+  tabAddBtn: {
+    width: 54,
+    height: 54,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#2563eb',
+    marginTop: -24,
+    borderWidth: 2,
+    borderColor: '#0b1220',
  },
-  tabDotActive: {
-    backgroundColor: '#60a5fa',
+  tabAddBtnDisabled: {
+    opacity: 0.45,
  },
  tabLabel: {
    color: '#94a3b8',
@@ -354,23 +503,151 @@ export const styles = StyleSheet.create({
  modalBackdrop: {
    flex: 1,
    backgroundColor: 'rgba(2,6,23,0.72)',
-    justifyContent: 'flex-end',
+    paddingHorizontal: 12,
  },
-  modalKeyboardWrap: {
+  dialogBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(2,6,23,0.72)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 18,
+  },
+  dialogCard: {
    width: '100%',
-  },
-  modalCard: {
-    maxHeight: '87%',
    backgroundColor: '#0f172a',
-    borderTopLeftRadius: 18,
-    borderTopRightRadius: 18,
+    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#1e293b',
    padding: 14,
+    gap: 12,
+  },
+  dialogTitle: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 17,
+  },
+  dialogMessage: {
+    color: '#cbd5e1',
+    lineHeight: 20,
+  },
+  dialogButtonsRow: {
+    flexDirection: 'row',
    gap: 8,
+    justifyContent: 'flex-end',
+    flexWrap: 'wrap',
+  },
+  dialogBtn: {
+    borderRadius: 10,
+    paddingVertical: 9,
+    paddingHorizontal: 14,
+    borderWidth: 1,
+  },
+  dialogBtnPrimary: {
+    backgroundColor: '#2563eb',
+    borderColor: '#2563eb',
+  },
+  dialogBtnDanger: {
+    backgroundColor: '#7f1d1d',
+    borderColor: '#991b1b',
+  },
+  dialogBtnNeutral: {
+    backgroundColor: '#1e293b',
+    borderColor: '#334155',
+  },
+  dialogBtnText: {
+    color: '#f8fafc',
+    fontWeight: '700',
+  },
+  modalKeyboardWrap: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalCard: {
+    width: '96%',
+    maxHeight: '90%',
+    backgroundColor: '#0f172a',
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#1e293b',
+    padding: 16,
+    gap: 10,
  },
  closeText: {
    color: '#93c5fd',
    fontWeight: '700',
  },
+
+  dateModalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(2,6,23,0.75)',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  dateModalCard: {
+    backgroundColor: '#0f172a',
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#1e293b',
+    padding: 14,
+    gap: 10,
+  },
+  calendarHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  calendarNavBtn: {
+    width: 34,
+    height: 34,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    backgroundColor: '#1e293b',
+  },
+  calendarNavText: {
+    color: '#dbeafe',
+    fontSize: 20,
+    fontWeight: '700',
+    lineHeight: 22,
+  },
+  calendarMonthText: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 15,
+  },
+  calendarWeekRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  calendarWeekday: {
+    color: '#94a3b8',
+    width: '14.2%',
+    textAlign: 'center',
+    fontSize: 12,
+  },
+  calendarGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  calendarCell: {
+    width: '14.2%',
+    height: 38,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    marginVertical: 2,
+  },
+  calendarCellActive: {
+    backgroundColor: '#2563eb',
+  },
+  calendarCellText: {
+    color: '#cbd5e1',
+    fontWeight: '600',
+  },
+  calendarCellTextActive: {
+    color: '#fff',
+    fontWeight: '700',
+  },
 });
--- a/src/tabs/CheckupTab.js
+++ b/src/tabs/CheckupTab.js
@@ -2,44 +2,36 @@ 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({ selectedTrip, selectedTripItems, checkupStats, startCheckupFlow }) {
  return (
    <View style={styles.section}>
-      <View style={styles.sectionRow}>
      <Text style={styles.sectionTitle}>Check-Up</Text>
-        <Pressable style={styles.secondaryBtnTight} onPress={createFreshCheckupSession}>
-          <Text style={styles.secondaryBtnText}>Restart</Text>
-        </Pressable>
+
+      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
+      {selectedTrip && selectedTripItems.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
+
+      {selectedTrip && selectedTripItems.length > 0 ? (
+        <View style={styles.cardSoft}>
+          <Text style={styles.cardTitle}>Run a check-up for {selectedTrip.name}</Text>
+          <Text style={styles.cardMeta}>{selectedTripItems.length} items will be checked one by one.</Text>
+
+          <View style={styles.statsRow}>
+            <View style={[styles.statPill, styles.statPillCorrect]}>
+              <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
            </View>
-
-      {checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
-
-      {checkupSession.map((entry) => (
-        <View key={entry.itemId} style={styles.cardSoft}>
-          <Text style={styles.cardTitle}>{entry.name}</Text>
-          <Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
-          <Text style={styles.cardMeta}>
-            {entry.current.status} · {entry.current.placement}
-            {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
-          </Text>
-
-          <View style={styles.answerRow}>
-            <Pressable style={styles.answerYes} onPress={() => answerCheckupYes(entry.itemId)}>
-              <Text style={styles.answerText}>Yes</Text>
-            </Pressable>
-            <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.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 && (
-        <Pressable style={styles.primaryBtn} onPress={saveCheckup}>
-          <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
+          <Pressable style={styles.primaryBtn} onPress={startCheckupFlow}>
+            <Text style={styles.primaryBtnText}>Start Check-Up</Text>
          </Pressable>
-      )}
+        </View>
+      ) : null}
    </View>
  );
 }
--- a/src/tabs/HistoryTab.js
+++ b/src/tabs/HistoryTab.js
@@ -2,18 +2,28 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';

-export default function HistoryTab({ selectedTripCheckups, selectedCheckupId, setSelectedCheckupId }) {
+export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId, onDeleteCheckup }) {
  return (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>History</Text>
-      {selectedTripCheckups.length === 0 ? <Text style={styles.muted}>No check-ups saved yet.</Text> : null}
+
+      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
+      {selectedTrip ? <Text style={styles.tripHistoryLabel}>Check-ups for: {selectedTrip.name}</Text> : null}
+      {selectedTrip && selectedTripCheckups.length === 0 ? <Text style={styles.muted}>No check-ups saved yet.</Text> : null}

      {selectedTripCheckups.map((checkup) => (
        <View key={checkup.id} style={styles.cardSoft}>
-          <Pressable onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}>
+          <Pressable
+            onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}
+            onLongPress={() => onDeleteCheckup(checkup.id)}
+            delayLongPress={280}
+          >
            <Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
-            <Text style={styles.cardMeta}>{checkup.snapshot.length} items</Text>
-            <Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'}</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'} · long hold to delete</Text>
          </Pressable>

          {selectedCheckupId === checkup.id ? (
--- a/src/tabs/ItemsTab.js
+++ b/src/tabs/ItemsTab.js
@@ -1,9 +1,40 @@
-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({ selectedTrip, selectedTripItems, openAddItemModal, openEditItemModal, deleteItem }) {
+export default function ItemsTab({
+  selectedTrip,
+  selectedTripItems,
+  openAddItemModal,
+  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}>
@@ -16,9 +47,62 @@ export default function ItemsTab({ selectedTrip, selectedTripItems, openAddItemM
      {!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) => (
-        <ItemCard key={item.id} item={item} onEdit={openEditItemModal} onDelete={deleteItem} />
+      {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}
+          onEdit={openEditItemModal}
+          onDelete={deleteItem}
+          onQuickPack={() => quickSetItemStatus(item.id, 'packed')}
+          onQuickUnpack={() => quickSetItemStatus(item.id, 'unpacked')}
+        />
      ))}
+
+      {selectedTripItems.length > 0 && filteredItems.length === 0 ? <Text style={styles.muted}>No items match the current filters.</Text> : null}
    </View>
  );
 }
--- a/src/tabs/TripsTab.js
+++ b/src/tabs/TripsTab.js
@@ -1,27 +1,206 @@
-import React from 'react';
-import { Image, Pressable, Text, TextInput, View } from 'react-native';
+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';

+function DateField({ label, value, onPress }) {
+  return (
+    <Field label={label}>
+      <Pressable style={styles.dateInput} onPress={onPress}>
+        <Text style={styles.dateInputText}>{value}</Text>
+      </Pressable>
+    </Field>
+  );
+}
+
+const emptyEditForm = {
+  name: '',
+  location: '',
+  startDate: '',
+  endDate: '',
+  imageUri: '',
+};
+
 export default function TripsTab({
  tripForm,
  updateTripForm,
  pickTripImage,
+  takeTripImage,
  templateTrip,
  createTrip,
  trips,
  selectedTripId,
  chooseTrip,
  setTripAsTemplate,
+  saveTripEdits,
+  setTripArchived,
  deleteTrip,
-  focusToEnd,
+  onInputFocus,
  defaultTemplateTripId,
+  openDatePicker,
+  activeTripItemCount,
+  activeTripCheckupCount,
 }) {
+  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);
+  }
+
  return (
    <View style={styles.section}>
+      <View style={styles.sectionRow}>
        <Text style={styles.sectionTitle}>Trips</Text>
+        <Pressable style={styles.primaryBtnTight} onPress={() => setCreateModalVisible(true)}>
+          <Text style={styles.primaryBtnText}>+ New Trip</Text>
+        </Pressable>
+      </View>

-      <View style={styles.cardSoft}>
+      {activeTrip ? (
+        <View style={styles.tripHeroCard}>
+          {activeTrip.imageUri ? <Image source={{ uri: activeTrip.imageUri }} style={styles.tripHeroImage} /> : null}
+          <Text style={styles.tripHeroTitle}>{activeTrip.name}</Text>
+          <Text style={styles.cardMeta}>{activeTrip.location || 'No location'} · {activeTrip.startDate} → {activeTrip.endDate}</Text>
+          <Text style={styles.cardMeta}>{activeTripItemCount} items · {activeTripCheckupCount} check-ups</Text>
+        </View>
+      ) : (
+        <Text style={styles.muted}>No active trips. Unarchive or create one.</Text>
+      )}
+
+      <Text style={styles.tripListTitle}>Active Trips</Text>
+
+      {activeTrips
+        .slice()
+        .sort((a, b) => b.startDate.localeCompare(a.startDate))
+        .map((trip) => (
+          <View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
+            <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}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
+              </View>
+              <View style={styles.stackButtons}>
+                <Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
+                  <Text style={styles.miniBtnText}>Select</Text>
+                </Pressable>
+                <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
+                  <Text style={styles.miniBtnText}>View</Text>
+                </Pressable>
+              </View>
+            </View>
+            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
+          </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}>
+            <View style={styles.modalCard}>
+              <View style={styles.sectionRow}>
+                <Text style={styles.sectionTitle}>Create Trip</Text>
+                <Pressable onPress={() => setCreateModalVisible(false)}>
+                  <Text style={styles.closeText}>Close</Text>
+                </Pressable>
+              </View>
+
+              <ScrollView
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                contentContainerStyle={{ paddingBottom: 12 }}
+                showsVerticalScrollIndicator={false}
+              >
                <Field label="Name">
                  <TextInput
                    style={styles.input}
@@ -29,7 +208,7 @@ export default function TripsTab({
                    onChangeText={(v) => updateTripForm('name', v)}
                    placeholder="Summer Weekend"
                    placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
+                    onFocus={onInputFocus}
                  />
                </Field>

@@ -40,33 +219,21 @@ export default function TripsTab({
                    onChangeText={(v) => updateTripForm('location', v)}
                    placeholder="Berlin"
                    placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
+                    onFocus={onInputFocus}
                  />
                </Field>

-        <Field label="Start Date (YYYY-MM-DD)">
-          <TextInput
-            style={styles.input}
-            value={tripForm.startDate}
-            onChangeText={(v) => updateTripForm('startDate', v)}
-            placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
-          />
-        </Field>
+                <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
+                <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />

-        <Field label="End Date (YYYY-MM-DD)">
-          <TextInput
-            style={styles.input}
-            value={tripForm.endDate}
-            onChangeText={(v) => updateTripForm('endDate', v)}
-            placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
-          />
-        </Field>
-
-        <Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
-          <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>
+                <View style={styles.actionRow}>
+                  <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}

@@ -82,37 +249,126 @@ export default function TripsTab({
                  <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
                </Pressable>

-        <Pressable style={styles.primaryBtn} onPress={createTrip}>
+                <Pressable style={styles.primaryBtn} onPress={submitCreateTrip}>
                  <Text style={styles.primaryBtnText}>Create Trip</Text>
                </Pressable>
+              </ScrollView>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </Modal>
+
+      <Modal visible={!!viewingTrip} animationType="slide" transparent>
+        <View style={styles.modalBackdrop}>
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
+            <View style={styles.modalCard}>
+              <View style={styles.sectionRow}>
+                <Text style={styles.sectionTitle}>Trip View</Text>
+                <Pressable
+                  onPress={() => {
+                    setViewTripId(null);
+                    setEditMode(false);
+                  }}
+                >
+                  <Text style={styles.closeText}>Close</Text>
+                </Pressable>
              </View>

-      {trips
-        .slice()
-        .sort((a, b) => b.startDate.localeCompare(a.startDate))
-        .map((trip) => (
-          <View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
-            <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}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
-              </View>
-              <View style={styles.stackButtons}>
-                <Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
-                  <Text style={styles.miniBtnText}>Select</Text>
+              {viewingTrip ? (
+                <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  keyboardDismissMode="interactive"
+                  contentContainerStyle={{ paddingBottom: 12 }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {!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.miniBtn} onPress={() => setEditMode(true)}>
+                        <Text style={styles.miniBtnText}>Edit Trip</Text>
                      </Pressable>
-                <Pressable style={styles.miniBtn} onPress={() => setTripAsTemplate(trip.id)}>
-                  <Text style={styles.miniBtnText}>Template</Text>
+
+                      <Pressable style={styles.secondaryBtn} onPress={applyTemplateFromView}>
+                        <Text style={styles.secondaryBtnText}>Set as Template</Text>
                      </Pressable>
-                <Pressable style={styles.miniBtnDanger} onPress={() => deleteTrip(trip.id)}>
-                  <Text style={styles.miniBtnText}>Delete</Text>
+
+                      <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>
-            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
+          </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>
  );
 }
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -23,3 +23,34 @@ export function findActiveTripId(trips) {
  });
  return active?.id || null;
 }
+
+export function findNextTripId(trips) {
+  const today = parseYMD(todayYMD());
+  if (!today) return null;
+
+  const next = trips
+    .map((trip) => ({ id: trip.id, start: parseYMD(trip.startDate) }))
+    .filter((trip) => !!trip.start && trip.start >= today)
+    .sort((a, b) => a.start - b.start)[0];
+
+  return next?.id || null;
+}
+
+export function findBestTripId(trips) {
+  const activeTripId = findActiveTripId(trips);
+  if (activeTripId) return activeTripId;
+
+  const nextTripId = findNextTripId(trips);
+  if (nextTripId) return nextTripId;
+
+  const latestPast = trips
+    .map((trip) => ({ id: trip.id, end: parseYMD(trip.endDate), start: parseYMD(trip.startDate) }))
+    .filter((trip) => !!trip.end || !!trip.start)
+    .sort((a, b) => {
+      const aTime = (a.end || a.start).getTime();
+      const bTime = (b.end || b.start).getTime();
+      return bTime - aTime;
+    })[0];
+
+  return latestPast?.id || null;
+}
Author	SHA1	Message	Date
Luna	2ec877362f	feat: add centered quick-add item button in bottom nav All checks were successful Luggage List Build / build-web (push) Successful in 29s Details Luggage List Build / build-android (push) Successful in 5m59s Details Luggage List Build / release (push) Successful in 11s Details	2026-04-18 18:13:28 +02:00
Luna	fb54db0619	feat: replace native alerts with custom dialog modals All checks were successful Luggage List Build / build-web (push) Successful in 27s Details Luggage List Build / build-android (push) Successful in 9m46s Details Luggage List Build / release (push) Successful in 21s Details	2026-04-18 15:20:25 +02:00
Luna	a93fec97dc	chore: limit CI triggers and move TODOs to Gitea issues Some checks failed Luggage List Build / build-android (push) Has been cancelled Details Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-web (push) Has been cancelled Details	2026-04-18 15:08:45 +02:00
Luna	86976d5c26	docs: rewrite latest requested UI polish tasks Some checks failed Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-android (push) Has been cancelled Details Luggage List Build / build-web (push) Has been cancelled Details	2026-04-18 15:05:46 +02:00
Luna	61b0a3d1fa	feat: add trip edit/archive flow and item bulk filters All checks were successful Luggage List Build / build-web (push) Successful in 28s Details Luggage List Build / build-android (push) Successful in 6m32s Details Luggage List Build / release (push) Successful in 12s Details	2026-04-18 14:53:02 +02:00
Luna	3080c3affd	docs: add six next improvement ideas [skip ci]	2026-04-18 14:47:59 +02:00
Luna	d33fecd657	feat: add trip view modal with template and delete actions All checks were successful Luggage List Build / build-web (push) Successful in 36s Details Luggage List Build / build-android (push) Successful in 6m30s Details Luggage List Build / release (push) Successful in 12s Details	2026-04-18 14:43:13 +02:00
Luna	2417d2d597	feat: auto-select active or next trip by date Some checks failed Luggage List Build / build-web (push) Successful in 35s Details Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-android (push) Has been cancelled Details	2026-04-18 14:41:24 +02:00
Luna	f28ff010d7	feat: move trip creation and check-up into guided modals Some checks failed Luggage List Build / build-web (push) Successful in 35s Details Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-android (push) Has been cancelled Details	2026-04-18 14:39:47 +02:00
Luna	d40bd6a41c	feat: add history long-press delete and quick item status actions Some checks failed Luggage List Build / build-web (push) Successful in 29s Details Luggage List Build / release (push) Has been cancelled Details Luggage List Build / build-android (push) Has been cancelled Details	2026-04-18 14:34:05 +02:00
Luna	2e45261354	feat: add camera capture for trip and item images All checks were successful Luggage List Build / build-web (push) Successful in 31s Details Luggage List Build / build-android (push) Successful in 6m24s Details Luggage List Build / release (push) Successful in 14s Details	2026-04-18 14:19:48 +02:00
Luna	bd500674a0	fix(ui): stabilize modal keyboard behavior All checks were successful Luggage List Build / build-web (push) Successful in 55s Details Luggage List Build / build-android (push) Successful in 6m28s Details Luggage List Build / release (push) Successful in 10s Details	2026-04-18 14:12:34 +02:00
Luna	ef7e0ba7a1	style: center and enlarge modals to overlay navbar All checks were successful Luggage List Build / build-web (push) Successful in 30s Details Luggage List Build / build-android (push) Successful in 6m13s Details Luggage List Build / release (push) Successful in 15s Details	2026-04-18 13:34:42 +02:00
Luna	f34ffe39c0	feat: polish UI, fix top inset, and add check-up correctness stats All checks were successful Luggage List Build / build-web (push) Successful in 38s Details Luggage List Build / build-android (push) Successful in 6m16s Details Luggage List Build / release (push) Successful in 14s Details	2026-04-18 13:23:19 +02:00
Luna	30ee53fe75	feat: add calendar date picker, nav icons, and input-focused keyboard scrolling All checks were successful Luggage List Build / build-web (push) Successful in 28s Details Luggage List Build / build-android (push) Successful in 5m59s Details Luggage List Build / release (push) Successful in 11s Details	2026-04-18 13:12:51 +02:00