feat: move trip creation and check-up into guided modals

2026-04-18 14:39:47 +02:00
parent d40bd6a41c
commit f28ff010d7
5 changed files with 420 additions and 180 deletions
--- a/src/AppRoot.js
+++ b/src/AppRoot.js
@@ -7,7 +7,7 @@ import BottomTab from './components/BottomTab';
 import TripPicker from './components/TripPicker';
 import DatePickerModal from './components/DatePickerModal';
 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';
@@ -37,6 +37,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);

@@ -52,14 +74,10 @@ export default function AppRoot() {
  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);

@@ -90,6 +108,12 @@ export default function AppRoot() {
    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]);
+
  useEffect(() => {
    (async () => {
      try {
@@ -189,7 +213,7 @@ export default function AppRoot() {
  function createTrip() {
    if (!tripForm.name.trim()) {
      Alert.alert('Missing name', 'Trip name is required.');
-      return;
+      return false;
    }

    const start = parseYMD(tripForm.startDate);
@@ -197,12 +221,12 @@ export default function AppRoot() {

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

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

    const now = Date.now();
@@ -247,6 +271,7 @@ export default function AppRoot() {

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

  function setTripAsTemplate(tripId) {
@@ -401,67 +426,85 @@ export default function AppRoot() {
      setCheckupSession([]);
      return;
    }
+    setCheckupSession(buildCheckupSession(selectedTripItems));
+  }

-    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,
-      result: 'pending',
-    }));
+  function startCheckupFlow() {
+    if (!selectedTripId) {
+      Alert.alert('No trip selected', 'Please select a trip first.');
+      return;
+    }
+    if (!selectedTripItems.length) {
+      Alert.alert('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 answerCheckupYes(itemId) {
-    setCheckupSession((prev) =>
-      prev.map((entry) => (entry.itemId === itemId ? { ...entry, confirmed: true, result: 'correct' } : entry))
-    );
+  function closeCheckupFlow() {
+    setCheckupFlowVisible(false);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
  }

-  function openFixModal(itemId) {
-    const entry = checkupSession.find((x) => x.itemId === itemId);
+  function goNextInCheckup() {
+    setCheckupFlowIndex((prev) => prev + 1);
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function answerCurrentCheckupYes() {
+    const entry = checkupCurrentEntry;
    if (!entry) return;

-    setCheckupFixTargetId(itemId);
-    setCheckupFixForm({
+    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,
    });
-    setCheckupFixModalVisible(true);
+    setCheckupFlowMode('edit');
  }

-  function saveFixModal() {
-    if (!checkupFixTargetId) return;
+  function saveCurrentCheckupNo() {
+    const entry = checkupCurrentEntry;
+    if (!entry) return;

-    const targetId = checkupFixTargetId;
    const patch = {
-      status: checkupFixForm.status,
-      placement: checkupFixForm.placement,
-      lentTo: checkupFixForm.status === 'lent-to' ? checkupFixForm.lentTo.trim() : '',
+      status: checkupNoForm.status,
+      placement: checkupNoForm.placement,
+      lentTo: checkupNoForm.status === 'lent-to' ? checkupNoForm.lentTo.trim() : '',
    };

    setCheckupSession((prev) =>
-      prev.map((entry) =>
-        entry.itemId === targetId
+      prev.map((x) =>
+        x.itemId === entry.itemId
          ? {
-              ...entry,
+              ...x,
              current: patch,
              confirmed: true,
              result: 'bad',
            }
-          : entry
+          : x
      )
    );

-    if (checkupFixForm.updateMasterList && selectedTripId) {
+    if (checkupNoForm.updateMasterList && selectedTripId) {
      setData((prev) => {
        const items = prev.itemsByTrip[selectedTripId] || [];
        return {
@@ -469,7 +512,7 @@ export default function AppRoot() {
          itemsByTrip: {
            ...prev.itemsByTrip,
            [selectedTripId]: items.map((item) =>
-              item.id === targetId
+              item.id === entry.itemId
                ? {
                    ...item,
                    status: patch.status,
@@ -484,28 +527,27 @@ 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;
+      return false;
    }

-    if (!checkupSession.length) {
+    if (!sessionToSave.length) {
      Alert.alert('No items', 'Add items before creating a check-up.');
-      return;
+      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;
+      return false;
    }

-    const snapshot = checkupSession.map((entry) => ({
+    const snapshot = sessionToSave.map((entry) => ({
      itemId: entry.itemId,
      name: entry.name,
      category: entry.category,
@@ -537,7 +579,15 @@ export default function AppRoot() {
      };
    });

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

@@ -592,6 +642,8 @@ export default function AppRoot() {
              onInputFocus={onInputFocus}
              defaultTemplateTripId={data.defaultTemplateTripId}
              openDatePicker={openDatePicker}
+              activeTripItemCount={selectedTripItems.length}
+              activeTripCheckupCount={selectedTripCheckups.length}
            />
          )}

@@ -608,12 +660,10 @@ export default function AppRoot() {

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

@@ -649,12 +699,19 @@ export default function AppRoot() {
        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}
      />
    </SafeAreaView>
  );
--- 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/styles.js
+++ b/src/styles.js
@@ -117,6 +117,32 @@ export const styles = StyleSheet.create({
    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,
@@ -323,6 +349,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,
--- a/src/tabs/CheckupTab.js
+++ b/src/tabs/CheckupTab.js
@@ -2,71 +2,36 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';

-export default function CheckupTab({
-  checkupSession,
-  checkupStats,
-  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}>Check-up</Text>
-        </Pressable>
-      </View>
+      <Text style={styles.sectionTitle}>Check-Up</Text>

-      {!!checkupSession.length && (
-        <View style={styles.statsRow}>
-          <View style={[styles.statPill, styles.statPillCorrect]}>
-            <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
-          </View>
-          <View style={[styles.statPill, styles.statPillBad]}>
-            <Text style={styles.statPillText}>Bad: {checkupStats.bad}</Text>
-          </View>
-          <View style={[styles.statPill, styles.statPillPending]}>
-            <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
+      {!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>
+            <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>
+
+          <Pressable style={styles.primaryBtn} onPress={startCheckupFlow}>
+            <Text style={styles.primaryBtnText}>Start Check-Up</Text>
+          </Pressable>
        </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.result === 'correct' ? styles.answerStateDotOn : null,
-                entry.result === 'bad' ? styles.answerStateDotBad : null,
-              ]}
-            />
-          </View>
-        </View>
-      ))}
-
-      {!!checkupSession.length && (
-        <Pressable style={styles.primaryBtn} onPress={saveCheckup}>
-          <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
-        </Pressable>
-      )}
+      ) : null}
    </View>
  );
 }
--- a/src/tabs/TripsTab.js
+++ b/src/tabs/TripsTab.js
@@ -1,5 +1,5 @@
-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 Field from '../components/Field';
 import { styles } from '../styles';

@@ -28,65 +28,40 @@ export default function TripsTab({
  onInputFocus,
  defaultTemplateTripId,
  openDatePicker,
+  activeTripItemCount,
+  activeTripCheckupCount,
 }) {
+  const [createModalVisible, setCreateModalVisible] = useState(false);
+
+  const activeTrip = useMemo(() => trips.find((trip) => trip.id === selectedTripId) || null, [trips, selectedTripId]);
+
+  function submitCreateTrip() {
+    const ok = createTrip();
+    if (ok) setCreateModalVisible(false);
+  }
+
  return (
    <View style={styles.section}>
-      <Text style={styles.sectionTitle}>Trips</Text>
-
-      <View style={styles.cardSoft}>
-        <Field label="Name">
-          <TextInput
-            style={styles.input}
-            value={tripForm.name}
-            onChangeText={(v) => updateTripForm('name', v)}
-            placeholder="Summer Weekend"
-            placeholderTextColor="#6b7280"
-            onFocus={onInputFocus}
-          />
-        </Field>
-
-        <Field label="Location">
-          <TextInput
-            style={styles.input}
-            value={tripForm.location}
-            onChangeText={(v) => updateTripForm('location', v)}
-            placeholder="Berlin"
-            placeholderTextColor="#6b7280"
-            onFocus={onInputFocus}
-          />
-        </Field>
-
-        <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
-        <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
-
-        <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}
-
-        {templateTrip ? (
-          <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
-            <Text style={styles.inlineToggleText}>
-              {tripForm.copyDefaultTemplate ? '☑' : '☐'} Copy items from template ({templateTrip.name})
-            </Text>
-          </Pressable>
-        ) : null}
-
-        <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
-          <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
-        </Pressable>
-
-        <Pressable style={styles.primaryBtn} onPress={createTrip}>
-          <Text style={styles.primaryBtnText}>Create Trip</Text>
+      <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>

+      {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}>Create your first trip to get started.</Text>
+      )}
+
+      <Text style={styles.tripListTitle}>All Trips</Text>
+
      {trips
        .slice()
        .sort((a, b) => b.startDate.localeCompare(a.startDate))
@@ -113,6 +88,80 @@ export default function TripsTab({
            {trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
          </View>
        ))}
+
+      <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}
+                    value={tripForm.name}
+                    onChangeText={(v) => updateTripForm('name', v)}
+                    placeholder="Summer Weekend"
+                    placeholderTextColor="#6b7280"
+                    onFocus={onInputFocus}
+                  />
+                </Field>
+
+                <Field label="Location">
+                  <TextInput
+                    style={styles.input}
+                    value={tripForm.location}
+                    onChangeText={(v) => updateTripForm('location', v)}
+                    placeholder="Berlin"
+                    placeholderTextColor="#6b7280"
+                    onFocus={onInputFocus}
+                  />
+                </Field>
+
+                <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
+                <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
+
+                <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}
+
+                {templateTrip ? (
+                  <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
+                    <Text style={styles.inlineToggleText}>
+                      {tripForm.copyDefaultTemplate ? '☑' : '☐'} Copy items from template ({templateTrip.name})
+                    </Text>
+                  </Pressable>
+                ) : null}
+
+                <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
+                  <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
+                </Pressable>
+
+                <Pressable style={styles.primaryBtn} onPress={submitCreateTrip}>
+                  <Text style={styles.primaryBtnText}>Create Trip</Text>
+                </Pressable>
+              </ScrollView>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </Modal>
    </View>
  );
 }