Add credits and AI disclaimer to README

.gitea/workflows/ci.yml

@@ -9,6 +9,28 @@ on:
       - '.gitea/workflows/**'
 
 jobs:
+  vitests:
+    runs-on: ubuntu-latest
+    steps:
+    - name: 🏗 Setup repo
+      uses: actions/checkout@v2
+
+    - name: 🏗 Setup Node
+      uses: actions/setup-node@v2
+      with:
+        node-version: 22
+
+    - name: 🏗 Setup pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: latest
+
+    - name: 📦 Install dependencies
+      run: pnpm install
+
+    - name: 🧪 Run vitests
+      run: pnpm test
+    
   build-android:
     runs-on: ubuntu-latest
     steps:
@@ -103,7 +125,7 @@ jobs:
 
   release:
     runs-on: ubuntu-latest
-    needs: [build-android, build-web]
+    needs: [build-android, build-web, vitests]
     steps:
     - name: 🏗 Setup repo
       uses: actions/checkout@v2

.gitea/workflows/dev.yml

@@ -1,32 +0,0 @@
-name: Luggage List Dev Branch Check
-on:
-  push:
-    branches-ignore:
-      - main
-    paths:
-      - '**/*.js'
-      - '**/*.json'
-      - '.gitea/workflows/**'
-
-jobs:
-  validate:
-    runs-on: ubuntu-latest
-    steps:
-    - name: 🏗 Setup repo
-      uses: actions/checkout@v2
-
-    - name: 🏗 Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: 22
-
-    - name: 🏗 Setup pnpm
-      uses: pnpm/action-setup@v4
-      with:
-        version: latest
-
-    - name: 📦 Install dependencies
-      run: pnpm install
-
-    - name: 🧪 Web export smoke check
-      run: npx expo export --platform web

.gitea/workflows/manual-build.yml

@@ -1,57 +0,0 @@
-name: Luggage List Manual APK Build
-on:
-  workflow_dispatch:
-
-jobs:
-  build-android:
-    runs-on: ubuntu-latest
-    steps:
-    - name: 🏗 Setup repo
-      uses: actions/checkout@v2
-
-    - name: 🏗 Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: 22
-
-    - name: 🏗 Setup pnpm
-      uses: pnpm/action-setup@v4
-      with:
-        version: latest
-
-    - name: 🏗 Setup Java
-      uses: actions/setup-java@v4
-      with:
-        distribution: temurin
-        java-version: 17
-
-    - name: 🏗 Setup Android SDK
-      uses: android-actions/setup-android@v3
-
-    - name: 🏗 Setup Expo and EAS
-      uses: expo/expo-github-action@v8
-      with:
-        token: ${{ secrets.EXPO_TOKEN }}
-        eas-version: latest
-        packager: pnpm
-
-    - name: 📦 Install dependencies
-      run: pnpm install
-
-    - name: 👷 Build app
-      run: |
-        eas build --local \
-          --non-interactive \
-          --output=./app-build \
-          --platform=android \
-          --profile=preview
-
-    - name: 📝 Rename build to APK
-      run: mv app-build luggage-list-manual.apk
-
-    - name: 📤 Upload build artifact
-      uses: actions/upload-artifact@v3
-      with:
-        name: luggage-list-manual-apk-build
-        path: luggage-list-manual.apk
-        if-no-files-found: error

.github/copilot-instructions.md

@@ -1,45 +0,0 @@
-# Project Guidelines
-
-## Code Style
-- Keep components as functional React components and use hooks-based state.
-- Follow existing naming and structure in `src/screens` and `src/components`:
-  - Screen files: `*Screen.js`
-  - Shared UI pieces: `src/components/*.js`
-- Keep styling centralized in `src/styles.js` via `createStyles()` and use theme-driven inline color overrides in screens/components.
-- Reuse `getTheme(darkMode, pinkMode)` from `src/theme.js` for color values; do not hardcode alternate palettes in individual screens.
-
-## Architecture
-- Root orchestration lives in `App.js`:
-  - App-level state includes current screen, focus mode, theme toggles, and timer/countdown state.
-  - Screen switching is controlled by the `screen` state (`home`, `timeuntil`, `timer`).
-- Screen responsibilities:
-  - `HomeScreen`: mode selection and top controls.
-  - `TimeUntilScreen`: target clock-time countdown flow.
-  - `TimerScreen`: duration countdown flow.
-  - `FocusScreen`: minimal fullscreen countdown UI.
-- Shared presentational components:
-  - `TopControls`: dark/pink/fullscreen/focus controls.
-  - `CountdownRow`: reusable HH:MM:SS display.
-
-## Build And Run
-- Install dependencies: `npm install`
-- Start dev server: `npm start`
-- Run on Android: `npm run android`
-- Run on iOS: `npm run ios`
-- Run on web: `npm run web`
-- EAS builds use `eas.json` profiles (`development`, `preview`, `production`).
-
-## Conventions
-- Keep timer/countdown behavior in `App.js` unless intentionally refactoring architecture.
-- Preserve current time behavior:
-  - `now` updates every second with `setInterval`.
-  - Time-until target is based on local device time and rolls to next day when target time has passed.
-- Maintain platform guards:
-  - Web-only fullscreen uses `document.fullscreenElement` APIs.
-  - Android hardware back behavior is handled in `App.js` and should keep focus/screen fallback behavior.
-- For countdown display, continue using `CountdownRow` and 2-digit padded units for consistency.
-
-## Pitfalls
-- This project has no test scripts configured; do not claim tests were run unless you add and run them.
-- Be careful with web-only globals (`document`) and keep `Platform.OS` guards.
-- Avoid introducing timezone assumptions without explicit product requirements; current logic is local-time based.

App.js

@@ -1,3 +1,4 @@
+import './global.css';
 import AppRoot from './src/AppRoot';
 
 export default AppRoot;

README.md

@@ -1,40 +1,109 @@
 # Luggage List
 
-Minimal local-first luggage management app built with Expo.
+[![Expo](https://img.shields.io/badge/Expo-54.0.33-000020?logo=expo&logoColor=white)](https://expo.dev/)
+[![React Native](https://img.shields.io/badge/React%20Native-0.81-61dafb?logo=react&logoColor=white)](https://reactnative.dev/)
+[![Local-first](https://img.shields.io/badge/Storage-Local--first-22c55e)](#data-and-backup)
+[![Backup](https://img.shields.io/badge/Backup-JSON-8b5cf6)](#data-and-backup)
 
-## Current Features (V2)
+Luggage List is a local-first Expo app for keeping trips, luggage, and check-ups organized without a server, login, or cloud sync.
 
-- No auth, no server, local storage only (AsyncStorage)
-- 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:
-  - name, description, category
-  - status: packed, unpacked, lost, left-behind, lent-to (+ person name)
-  - placement: suitcase, backpack, with-user, other
-  - optional image from gallery
-- Item create/edit via modal
-- 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 selected trip with saved snapshots + stats
+## Highlights
 
-## Notes
+- Trip planning with names, locations, dates, images, and archive support
+- Global trip switching with sensible auto-selection on first launch
+- Default trip template that gets copied into new trips
+- Luggage items with quantity, description, category, status, placement, and optional photos
+- Quick status edits plus full item editing in a modal
+- Guided check-up flow with live stats and editable mismatches
+- Check-up history per trip with saved snapshots
+- JSON backup and restore, including file import/export and pasted JSON
 
-- JSON export is removed for now.
-- Dark-mode-first minimalist UI.
+## Tech Stack
 
-## Run
+- Expo
+- React Native
+- AsyncStorage for local persistence
+- expo-image-picker, expo-document-picker, expo-file-system, expo-sharing
+- Vitest for tests
+
+## Getting Started
 
 ```bash
 npm install
 npm run start
 ```
 
-## Build / CI
+### Run on a platform
 
-Gitea workflows are in `.gitea/workflows`:
+```bash
+npm run android
+npm run ios
+npm run web
+```
 
-- `dev.yml`: smoke check via `expo export --platform web` on non-main branches
-- `ci.yml`: Android APK build via `eas build --local`, web bundle export, release tag/artifacts on `main`
-- `manual-build.yml`: manual Android APK build via `eas build --local`
+## Scripts
+
+- `npm run start` , start the Expo dev server
+- `npm run android` , open on Android
+- `npm run ios` , open on iOS
+- `npm run web` , run in the browser
+- `npm run test` , run tests once
+- `npm run test:watch` , run tests in watch mode
+
+## Data and Backup
+
+All data stays on-device in AsyncStorage.
+
+Backup and restore is done through JSON, either by:
+
+- exporting to a file
+- importing a saved file
+- pasting JSON directly into the app
+
+## What You Can Track
+
+### Trips
+
+- Trip name
+- Location
+- Start and end dates
+- Optional trip image
+- Archive state
+
+### Items
+
+- Name and quantity
+- Description and category
+- Status: packed, unpacked, lost, left-behind, lent-to
+- Placement: suitcase, backpack, with-user, other
+- Optional item image
+
+### Check-ups
+
+- Yes / no checklist flow
+- Live correct, bad, and pending counters
+- Optional sync back into the trip item list
+- Saved history per trip
+
+## Notes
+
+- Dark-mode-first UI
+- No auth
+- No backend
+- No cloud sync
+
+## Development
+
+```bash
+npm run test
+```
+
+## Credits
+
+<a href="https://www.flaticon.com/free-icons/travelling" title="travelling icons">Travelling icons created by Freepik - Flaticon</a>
+
+
+## Ai Disclaimer
+This project was mainly developed by my AI Agent [Luna](https://luna.reversed.dev). The only changes, i, [Space](https://spaceistyping.com) have made were with Copilot or manually in the Readme and in the CI/CD Pipeline. All other code was generated by Luna. A Human was always in the loop to review the code and to make sure it was working before pushing it to the repository.
+
+(FYI: Luna runs on gpt-5.3-codex and 5.4-mini; Copilot was used with gpt-5.3-codex and gemini-3.1-pro)

TODO.md

@@ -1,14 +0,0 @@
-# TODO - Luggage List
-
-This file was intentionally nuked.
-
-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

app.json

@@ -2,12 +2,12 @@
   "expo": {
     "name": "Luggage List",
     "slug": "luggage-list",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "orientation": "default",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/image.png",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./assets/splash-icon.png",
+      "image": "./assets/image.png",
       "resizeMode": "contain",
       "backgroundColor": "#f5f5f7"
     },
@@ -19,12 +19,12 @@
     "android": {
       "package": "dev.reversed.luggagelist",
       "adaptiveIcon": {
-        "foregroundImage": "./assets/icon.png",
+        "foregroundImage": "./assets/image.png",
         "backgroundColor": "#f5f5f7"
       }
     },
     "web": {
-      "favicon": "./assets/icon.png",
+      "favicon": "./assets/image.png",
       "name": "Luggage List",
       "themeColor": "#f5f5f7",
       "backgroundColor": "#f5f5f7"

global.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import 'uniwind';

metro.config.js

@@ -0,0 +1,9 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const { withUniwindConfig } = require('uniwind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withUniwindConfig(config, {
+  cssEntryFile: './global.css',
+  dtsFile: './src/uniwind-types.d.ts',
+});

package.json

@@ -6,17 +6,27 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
     "expo": "~54.0.33",
+    "expo-document-picker": "~14.0.7",
+    "expo-file-system": "~19.0.11",
     "expo-image-picker": "~17.0.8",
+    "expo-sharing": "~14.0.7",
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-web": "^0.21.0"
+    "react-native-web": "^0.21.0",
+    "tailwindcss": "^4.0.0",
+    "uniwind": "latest"
   },
-  "private": true
+  "private": true,
+  "devDependencies": {
+    "vitest": "^1.6.1"
+  }
 }

src/AppRoot.js

@@ -2,6 +2,9 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 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 * as DocumentPicker from 'expo-document-picker';
+import * as FileSystem from 'expo-file-system';
+import * as Sharing from 'expo-sharing';
 import { StatusBar } from 'expo-status-bar';
 import BottomTab from './components/BottomTab';
 import TripPicker from './components/TripPicker';
@@ -9,12 +12,17 @@ import DatePickerModal from './components/DatePickerModal';
 import AppDialogModal from './components/AppDialogModal';
 import ItemModal from './modals/ItemModal';
 import CheckupFlowModal from './modals/CheckupFlowModal';
+import BackupModal from './modals/BackupModal';
 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 { findBestTripId, makeId, parseYMD, todayYMD } from './utils/date';
+import { emptyData, ITEM_PLACEMENTS, STORAGE_KEY } from './constants';
+import { findBestTripId, makeId, todayYMD } from './utils/date';
+import { normalizeItemRecord, normalizePayloadShape, parseBackupText, stringifyBackupData } from './utils/backup';
+import { resolvePlacementValue, toPlacementFormState, withPlacementCustomFallback } from './utils/items';
+import { extractLegacyQuantityFromName, normalizeNameAndQuantity, normalizeQuantity } from './utils/labels';
+import { validateTripDraft } from './utils/trips';
 import { styles } from './styles';
 
 const emptyTripForm = () => ({
@@ -22,7 +30,6 @@ const emptyTripForm = () => ({
   location: '',
   startDate: todayYMD(),
   endDate: todayYMD(),
-  imageUri: '',
   copyDefaultTemplate: true,
   setAsDefaultTemplate: false,
 });
@@ -30,25 +37,33 @@ const emptyTripForm = () => ({
 const emptyItemForm = () => ({
   id: null,
   name: '',
+  quantity: 1,
   description: '',
   category: '',
   status: 'unpacked',
   placement: 'suitcase',
+  placementCustom: '',
   lentTo: '',
   imageUri: '',
+  imageQuality: 'balanced',
+  imageAllowCrop: false,
 });
 
 const emptyCheckupNoForm = () => ({
   status: 'unpacked',
   placement: 'suitcase',
+  placementCustom: '',
   lentTo: '',
   updateMasterList: false,
 });
 
 function buildCheckupSession(items) {
-  return items.map((item) => ({
+  return items.map((item) => {
+    const normalized = normalizeNameAndQuantity(item.name, item.quantity);
+    return {
       itemId: item.id,
-    name: item.name,
+      name: normalized.name,
+      quantity: normalized.quantity,
       category: item.category,
       current: {
         status: item.status,
@@ -57,13 +72,16 @@ function buildCheckupSession(items) {
       },
       confirmed: false,
       result: 'pending',
-  }));
+    };
+  });
 }
 
 export default function AppRoot() {
   const scrollRef = useRef(null);
 
   const [loaded, setLoaded] = useState(false);
+  const [fakeLoadDone, setFakeLoadDone] = useState(false);
+  const [fakeLoadProgress, setFakeLoadProgress] = useState(0);
   const [tab, setTab] = useState('trips');
   const [data, setData] = useState(emptyData);
 
@@ -82,8 +100,12 @@ export default function AppRoot() {
 
   const [selectedCheckupId, setSelectedCheckupId] = useState(null);
   const [dialogState, setDialogState] = useState({ visible: false, title: '', message: '', buttons: [] });
+  const [backupModalVisible, setBackupModalVisible] = useState(false);
+  const [backupImportText, setBackupImportText] = useState('');
 
   const topInset = Platform.OS === 'android' ? (RNStatusBar.currentHeight || 0) + 10 : 0;
+  const fakeLoadTotalMs = useMemo(() => 700 + Math.floor(Math.random() * 701), []);
+  const appReady = loaded && fakeLoadDone;
 
   const visibleTrips = useMemo(() => data.trips.filter((trip) => !trip.archived), [data.trips]);
 
@@ -94,11 +116,90 @@ export default function AppRoot() {
     return data.itemsByTrip[selectedTripId] || [];
   }, [data.itemsByTrip, selectedTripId]);
 
+  const selectedTripPackedCount = useMemo(
+    () => selectedTripItems.filter((item) => item.status === 'packed').length,
+    [selectedTripItems]
+  );
+
   const selectedTripCheckups = useMemo(() => {
     if (!selectedTripId) return [];
     return (data.checkupsByTrip[selectedTripId] || []).slice().sort((a, b) => b.createdAt - a.createdAt);
   }, [data.checkupsByTrip, selectedTripId]);
 
+  const previousCustomPlacements = useMemo(() => {
+    const seen = new Set();
+
+    function takeFrom(items = [], bucket = []) {
+      items
+        .slice()
+        .sort((a, b) => (b.updatedAt || b.createdAt || 0) - (a.updatedAt || a.createdAt || 0))
+        .forEach((item) => {
+          const location = item.placement?.trim();
+          if (!location || ITEM_PLACEMENTS.includes(location) || seen.has(location)) return;
+          seen.add(location);
+          bucket.push(location);
+        });
+      return bucket;
+    }
+
+    const collected = [];
+    if (selectedTripId) {
+      takeFrom(data.itemsByTrip[selectedTripId] || [], collected);
+    }
+
+    Object.entries(data.itemsByTrip).forEach(([tripId, items]) => {
+      if (tripId === selectedTripId) return;
+      takeFrom(items || [], collected);
+    });
+
+    return collected;
+  }, [data.itemsByTrip, selectedTripId]);
+
+  const lastUsedItemDefaults = useMemo(() => {
+    const buckets = [];
+    if (selectedTripId) {
+      buckets.push(data.itemsByTrip[selectedTripId] || []);
+    }
+
+    Object.entries(data.itemsByTrip).forEach(([tripId, items]) => {
+      if (tripId === selectedTripId) return;
+      buckets.push(items || []);
+    });
+
+    for (const bucket of buckets) {
+      const recent = bucket
+        .slice()
+        .sort((a, b) => (b.updatedAt || b.createdAt || 0) - (a.updatedAt || a.createdAt || 0))
+        .find((item) => item?.category?.trim() || item?.placement?.trim());
+
+      if (!recent) continue;
+
+      const category = recent.category?.trim() || '';
+      const rawPlacement = recent.placement?.trim() || '';
+
+      if (!rawPlacement) {
+        return {
+          category,
+          placement: 'suitcase',
+          placementCustom: '',
+        };
+      }
+
+      const hasPresetPlacement = ITEM_PLACEMENTS.includes(rawPlacement);
+      return {
+        category,
+        placement: hasPresetPlacement ? rawPlacement : 'other',
+        placementCustom: hasPresetPlacement ? '' : rawPlacement,
+      };
+    }
+
+    return {
+      category: '',
+      placement: 'suitcase',
+      placementCustom: '',
+    };
+  }, [data.itemsByTrip, selectedTripId]);
+
   const templateTrip = useMemo(
     () => data.trips.find((trip) => trip.id === data.defaultTemplateTripId) || null,
     [data.trips, data.defaultTemplateTripId]
@@ -156,7 +257,7 @@ export default function AppRoot() {
         const raw = await AsyncStorage.getItem(STORAGE_KEY);
         if (raw) {
           const parsed = JSON.parse(raw);
-          setData({ ...emptyData, ...parsed });
+          setData(normalizePayloadShape({ ...emptyData, ...parsed }));
         }
       } catch {
         showAlert('Error', 'Could not load local data.');
@@ -166,6 +267,30 @@ export default function AppRoot() {
     })();
   }, []);
 
+  useEffect(() => {
+    const startedAt = Date.now();
+    let rafId = null;
+
+    const tick = () => {
+      const elapsed = Date.now() - startedAt;
+      const linear = Math.min(1, elapsed / fakeLoadTotalMs);
+      const eased = 1 - Math.pow(1 - linear, 2.2);
+      setFakeLoadProgress(eased);
+
+      if (linear < 1) {
+        rafId = requestAnimationFrame(tick);
+      } else {
+        setFakeLoadDone(true);
+      }
+    };
+
+    rafId = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [fakeLoadTotalMs]);
+
   useEffect(() => {
     if (!loaded) return;
     AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data)).catch(() => {
@@ -173,6 +298,11 @@ export default function AppRoot() {
     });
   }, [data, loaded]);
 
+  useEffect(() => {
+    if (!loaded) return;
+    setData((prev) => normalizePayloadShape(prev));
+  }, [loaded]);
+
   useEffect(() => {
     if (!loaded) return;
     if (!visibleTrips.length) {
@@ -199,7 +329,18 @@ export default function AppRoot() {
   }
 
   function updateItemForm(field, value) {
-    setItemForm((prev) => ({ ...prev, [field]: value }));
+    setItemForm((prev) => {
+      if (field === 'placement' && value === 'other') {
+        const fallbackLocation = previousCustomPlacements[0] || '';
+        return {
+          ...prev,
+          placement: value,
+          placementCustom: withPlacementCustomFallback(prev.placementCustom, fallbackLocation),
+        };
+      }
+
+      return { ...prev, [field]: value };
+    });
   }
 
   function openDatePicker(field) {
@@ -211,7 +352,7 @@ export default function AppRoot() {
     setDatePicker((prev) => ({ ...prev, visible: false }));
   }
 
-  async function pickImage(onPicked) {
+  async function pickImage(onPicked, options = {}) {
     const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!perm.granted) {
       showAlert('Permission needed', 'Allow gallery access to select images.');
@@ -220,8 +361,8 @@ export default function AppRoot() {
 
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: false,
-      quality: 0.85,
+      allowsEditing: !!options.allowCrop,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
     });
 
     if (!result.canceled && result.assets?.[0]?.uri) {
@@ -229,7 +370,7 @@ export default function AppRoot() {
     }
   }
 
-  async function takeImage(onPicked) {
+  async function takeImage(onPicked, options = {}) {
     const perm = await ImagePicker.requestCameraPermissionsAsync();
     if (!perm.granted) {
       showAlert('Permission needed', 'Allow camera access to take photos.');
@@ -237,8 +378,8 @@ export default function AppRoot() {
     }
 
     const result = await ImagePicker.launchCameraAsync({
-      allowsEditing: false,
-      quality: 0.85,
+      allowsEditing: !!options.allowCrop,
+      quality: typeof options.quality === 'number' ? options.quality : 0.85,
     });
 
     if (!result.canceled && result.assets?.[0]?.uri) {
@@ -247,21 +388,9 @@ export default function AppRoot() {
   }
 
   function createTrip() {
-    if (!tripForm.name.trim()) {
-      showAlert('Missing name', 'Trip name is required.');
-      return false;
-    }
-
-    const start = parseYMD(tripForm.startDate);
-    const end = parseYMD(tripForm.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.');
+    const tripValidation = validateTripDraft(tripForm);
+    if (!tripValidation.valid) {
+      showAlert(tripValidation.title, tripValidation.message);
       return false;
     }
 
@@ -279,7 +408,7 @@ export default function AppRoot() {
             location: tripForm.location.trim(),
             startDate: tripForm.startDate,
             endDate: tripForm.endDate,
-            imageUri: tripForm.imageUri,
+            imageUri: '',
             archived: false,
             createdAt: now,
             updatedAt: now,
@@ -292,7 +421,7 @@ export default function AppRoot() {
       if (tripForm.copyDefaultTemplate && prev.defaultTemplateTripId) {
         const templateItems = prev.itemsByTrip[prev.defaultTemplateTripId] || [];
         next.itemsByTrip[tripId] = templateItems.map((item) => ({
-          ...item,
+          ...normalizeItemRecord(item),
           id: makeId('item'),
           createdAt: now,
           updatedAt: now,
@@ -316,21 +445,9 @@ export default function AppRoot() {
   }
 
   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.');
+    const tripValidation = validateTripDraft(patch);
+    if (!tripValidation.valid) {
+      showAlert(tripValidation.title, tripValidation.message);
       return false;
     }
 
@@ -344,7 +461,6 @@ export default function AppRoot() {
               location: patch.location.trim(),
               startDate: patch.startDate,
               endDate: patch.endDate,
-              imageUri: patch.imageUri,
               updatedAt: Date.now(),
             }
           : trip
@@ -398,20 +514,32 @@ export default function AppRoot() {
   }
 
   function openAddItemModal() {
-    setItemForm(emptyItemForm());
+    setItemForm({
+      ...emptyItemForm(),
+      category: lastUsedItemDefaults.category,
+      placement: lastUsedItemDefaults.placement,
+      placementCustom: lastUsedItemDefaults.placementCustom,
+    });
     setItemModalVisible(true);
   }
 
   function openEditItemModal(item) {
+    const normalized = normalizeNameAndQuantity(item.name || '', item.quantity);
+    const placementState = toPlacementFormState(item.placement || 'suitcase');
+
     setItemForm({
       id: item.id,
-      name: item.name || '',
+      name: normalized.name,
+      quantity: normalized.quantity,
       description: item.description || '',
       category: item.category || '',
       status: item.status || 'unpacked',
-      placement: item.placement || 'suitcase',
+      placement: placementState.placement,
+      placementCustom: placementState.placementCustom,
       lentTo: item.lentTo || '',
       imageUri: item.imageUri || '',
+      imageQuality: item.imageQuality || 'balanced',
+      imageAllowCrop: !!item.imageAllowCrop,
     });
     setItemModalVisible(true);
   }
@@ -422,11 +550,22 @@ export default function AppRoot() {
       return;
     }
 
-    if (!itemForm.name.trim()) {
+    const legacyQuantity = extractLegacyQuantityFromName(itemForm.name.trim());
+    const requestedQuantity = normalizeQuantity(itemForm.quantity, 1);
+    const resolvedQuantity = legacyQuantity.matched && requestedQuantity === 1 ? legacyQuantity.quantity : requestedQuantity;
+    const resolvedName = legacyQuantity.matched ? legacyQuantity.name : itemForm.name.trim();
+
+    if (!resolvedName) {
       showAlert('Missing name', 'Item name is required.');
       return;
     }
 
+    const resolvedPlacement = resolvePlacementValue(itemForm.placement, itemForm.placementCustom);
+    if (!resolvedPlacement) {
+      showAlert('Missing location', 'Please enter a custom location for "other".');
+      return;
+    }
+
     const now = Date.now();
 
     setData((prev) => {
@@ -434,13 +573,16 @@ export default function AppRoot() {
       const existingCreatedAt = items.find((item) => item.id === itemForm.id)?.createdAt || now;
       const nextItem = {
         id: itemForm.id || makeId('item'),
-        name: itemForm.name.trim(),
+        name: resolvedName,
+        quantity: resolvedQuantity,
         description: itemForm.description.trim(),
         category: itemForm.category.trim(),
         status: itemForm.status,
-        placement: itemForm.placement,
+        placement: resolvedPlacement,
         lentTo: itemForm.status === 'lent-to' ? itemForm.lentTo.trim() : '',
         imageUri: itemForm.imageUri,
+        imageQuality: itemForm.imageQuality,
+        imageAllowCrop: itemForm.imageAllowCrop,
         createdAt: existingCreatedAt,
         updatedAt: now,
       };
@@ -584,6 +726,28 @@ export default function AppRoot() {
     setCheckupNoForm(emptyCheckupNoForm());
   }
 
+  function goBackInCheckup() {
+    setCheckupFlowIndex((prev) => Math.max(0, prev - 1));
+    setCheckupFlowMode('question');
+    setCheckupNoForm(emptyCheckupNoForm());
+  }
+
+  function skipCurrentCheckupItem() {
+    if (!checkupCurrentEntry) return;
+    setCheckupSession((prev) =>
+      prev.map((x) =>
+        x.itemId === checkupCurrentEntry.itemId
+          ? {
+              ...x,
+              confirmed: false,
+              result: 'pending',
+            }
+          : x
+      )
+    );
+    goNextInCheckup();
+  }
+
   function answerCurrentCheckupYes() {
     const entry = checkupCurrentEntry;
     if (!entry) return;
@@ -597,9 +761,13 @@ export default function AppRoot() {
   function openCurrentCheckupNo() {
     const entry = checkupCurrentEntry;
     if (!entry) return;
+
+    const placementState = toPlacementFormState(entry.current.placement || 'suitcase');
+
     setCheckupNoForm({
       status: entry.current.status || 'unpacked',
-      placement: entry.current.placement || 'suitcase',
+      placement: placementState.placement,
+      placementCustom: placementState.placementCustom,
       lentTo: entry.current.lentTo || '',
       updateMasterList: false,
     });
@@ -610,9 +778,15 @@ export default function AppRoot() {
     const entry = checkupCurrentEntry;
     if (!entry) return;
 
+    const resolvedPlacement = resolvePlacementValue(checkupNoForm.placement, checkupNoForm.placementCustom);
+    if (!resolvedPlacement) {
+      showAlert('Missing location', 'Please enter a custom location for "other".');
+      return;
+    }
+
     const patch = {
       status: checkupNoForm.status,
-      placement: checkupNoForm.placement,
+      placement: resolvedPlacement,
       lentTo: checkupNoForm.status === 'lent-to' ? checkupNoForm.lentTo.trim() : '',
     };
 
@@ -675,6 +849,7 @@ export default function AppRoot() {
     const snapshot = sessionToSave.map((entry) => ({
       itemId: entry.itemId,
       name: entry.name,
+      quantity: normalizeQuantity(entry.quantity, 1),
       category: entry.category,
       status: entry.current.status,
       placement: entry.current.placement,
@@ -735,22 +910,158 @@ export default function AppRoot() {
     openAddItemModal();
   }
 
-  if (!loaded) {
+  function buildBackupJson() {
+    return stringifyBackupData(data);
+  }
+
+  async function exportBackupFile() {
+    const backupJson = buildBackupJson();
+    const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const fileName = `luggage-list-backup-${stamp}.json`;
+
+    if (Platform.OS === 'web' && typeof document !== 'undefined') {
+      try {
+        const blob = new Blob([backupJson], { type: 'application/json' });
+        const objectUrl = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = objectUrl;
+        anchor.download = fileName;
+        anchor.click();
+        URL.revokeObjectURL(objectUrl);
+      } catch {
+        showAlert('Export failed', 'Could not download backup file on web.');
+      }
+      return;
+    }
+
+    try {
+      const baseDir = FileSystem.cacheDirectory || FileSystem.documentDirectory;
+      if (!baseDir) {
+        showAlert('Export failed', 'No writable folder is available on this device.');
+        return;
+      }
+
+      const fileUri = `${baseDir}${fileName}`;
+      await FileSystem.writeAsStringAsync(fileUri, backupJson, { encoding: FileSystem.EncodingType.UTF8 });
+
+      if (await Sharing.isAvailableAsync()) {
+        await Sharing.shareAsync(fileUri, {
+          mimeType: 'application/json',
+          dialogTitle: 'Export backup file',
+          UTI: 'public.json',
+        });
+        return;
+      }
+
+      showAlert('Exported', 'Backup file saved to app storage.');
+    } catch {
+      showAlert('Export failed', 'Could not create backup file.');
+    }
+  }
+
+  async function pickBackupImportFile() {
+    try {
+      const picked = await DocumentPicker.getDocumentAsync({
+        type: ['application/json', 'text/json', 'text/plain'],
+        copyToCacheDirectory: true,
+        multiple: false,
+      });
+
+      if (picked.canceled) return;
+
+      const asset = picked.assets?.[0];
+      if (!asset?.uri) {
+        showAlert('Import failed', 'Selected file could not be read.');
+        return;
+      }
+
+      let content = '';
+      try {
+        content = await FileSystem.readAsStringAsync(asset.uri, { encoding: FileSystem.EncodingType.UTF8 });
+      } catch {
+        if (Platform.OS === 'web' && asset.file) {
+          content = await asset.file.text();
+        } else {
+          throw new Error('read-failed');
+        }
+      }
+
+      if (!content.trim()) {
+        showAlert('Empty file', 'Selected backup file has no content.');
+        return;
+      }
+
+      setBackupImportText(content);
+      showAlert('Loaded', `${asset.name || 'Backup file'} loaded. Review and tap Import & Replace.`);
+    } catch {
+      showAlert('Import failed', 'Could not open backup file.');
+    }
+  }
+
+  function openBackupModal() {
+    setBackupImportText('');
+    setBackupModalVisible(true);
+  }
+
+  function applyBackupImport() {
+    const parsedBackup = parseBackupText(backupImportText);
+    if (!parsedBackup.ok) {
+      if (parsedBackup.error === 'missing-backup') {
+        showAlert('Missing backup', 'Paste backup JSON first.');
+        return;
+      }
+
+      if (parsedBackup.error === 'invalid-json') {
+        showAlert('Invalid JSON', 'Backup JSON could not be parsed.');
+        return;
+      }
+
+      if (parsedBackup.error === 'invalid-backup') {
+        showAlert('Invalid backup', 'Backup format is not supported.');
+        return;
+      }
+
+      showAlert('Invalid backup', 'Backup format is not supported.');
+      return;
+    }
+
+    const payload = parsedBackup.payload;
+
+    showConfirm({
+      title: 'Import backup?',
+      message: 'This will replace all current local data.',
+      confirmText: 'Import',
+      tone: 'danger',
+      onConfirm: () => {
+        setData(normalizePayloadShape({ ...emptyData, ...payload }));
+        setBackupModalVisible(false);
+        setBackupImportText('');
+        showAlert('Imported', 'Backup data was restored.');
+      },
+    });
+  }
+
+  if (!appReady) {
     return (
-      <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
+      <SafeAreaView className={styles.safe} style={{ paddingTop: topInset }}>
         <StatusBar style="light" translucent={false} />
-        <View style={styles.center}>
-          <Text style={styles.muted}>Loading local data...</Text>
+        <View className={styles.center}>
+          <Text className={styles.loadingEmoji}>🧳</Text>
+          <Text className={styles.loadingTitle}>Packing your list...</Text>
+          <View className={styles.loadingBarTrack}>
+            <View className={styles.loadingBarFill} style={{ width: `${(fakeLoadProgress * 100).toFixed(2)}%` }} />
+          </View>
+          <Text className={styles.loadingPercent}>{Math.round(fakeLoadProgress * 100)}%</Text>
         </View>
       </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
+    <SafeAreaView className={styles.safe} style={{ paddingTop: topInset }}>
       <StatusBar style="light" translucent={false} />
 
-      <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <KeyboardAvoidingView className={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
         <ScrollView
           ref={scrollRef}
           contentContainerStyle={styles.content}
@@ -763,23 +1074,10 @@ export default function AppRoot() {
             <TripsTab
               tripForm={tripForm}
               updateTripForm={updateTripForm}
-              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}
@@ -788,7 +1086,9 @@ export default function AppRoot() {
               defaultTemplateTripId={data.defaultTemplateTripId}
               openDatePicker={openDatePicker}
               activeTripItemCount={selectedTripItems.length}
+              activeTripPackedCount={selectedTripPackedCount}
               activeTripCheckupCount={selectedTripCheckups.length}
+              openBackupModal={openBackupModal}
             />
           )}
 
@@ -838,10 +1138,11 @@ export default function AppRoot() {
       <ItemModal
         visible={itemModalVisible}
         itemForm={itemForm}
+        previousCustomPlacements={previousCustomPlacements}
         setItemModalVisible={setItemModalVisible}
         updateItemForm={updateItemForm}
-        pickItemImage={() => pickImage((uri) => updateItemForm('imageUri', uri))}
-        takeItemImage={() => takeImage((uri) => updateItemForm('imageUri', uri))}
+        pickItemImage={(options) => pickImage((uri) => updateItemForm('imageUri', uri), options)}
+        takeItemImage={(options) => takeImage((uri) => updateItemForm('imageUri', uri), options)}
         saveItemFromModal={saveItemFromModal}
       />
 
@@ -857,9 +1158,22 @@ export default function AppRoot() {
         onYes={answerCurrentCheckupYes}
         onNo={openCurrentCheckupNo}
         onSaveNo={saveCurrentCheckupNo}
+        onSkip={skipCurrentCheckupItem}
+        onBack={goBackInCheckup}
         onFinish={finishCheckupFlow}
       />
 
+      <BackupModal
+        visible={backupModalVisible}
+        onClose={() => setBackupModalVisible(false)}
+        exportJson={buildBackupJson()}
+        importJson={backupImportText}
+        setImportJson={setBackupImportText}
+        exportFile={exportBackupFile}
+        importFile={pickBackupImportFile}
+        applyImport={applyBackupImport}
+      />
+
       <AppDialogModal
         visible={dialogState.visible}
         title={dialogState.title}

src/components/AppDialogModal.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Modal, Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 
 export default function AppDialogModal({ visible, title, message, buttons = [], onClose }) {
   if (!visible) return null;
@@ -8,27 +10,34 @@ export default function AppDialogModal({ visible, title, message, buttons = [],
   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}
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
+      <View className={styles.dialogBackdrop}>
+        <View className={styles.dialogCard}>
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="information-circle-outline" size={18} color="#d4d4d8" />
+            <Text className={styles.dialogTitle}>{title || 'Notice'}</Text>
+          </View>
+          {!!message ? <Text className={styles.dialogMessage}>{message}</Text> : null}
 
-          <View style={styles.dialogButtonsRow}>
+          <View className={styles.dialogButtonsRow}>
             {safeButtons.map((button, idx) => {
               const tone = button.tone || (button.style === 'destructive' ? 'danger' : button.style === 'cancel' ? 'neutral' : 'primary');
+              const icon = tone === 'danger' ? 'warning-outline' : tone === 'neutral' ? 'close-outline' : 'checkmark-outline';
               return (
                 <Pressable
                   key={`${button.text}-${idx}`}
-                  style={[
+                  className={cn(
                     styles.dialogBtn,
-                    tone === 'primary' ? styles.dialogBtnPrimary : null,
-                    tone === 'danger' ? styles.dialogBtnDanger : null,
-                    tone === 'neutral' ? styles.dialogBtnNeutral : null,
-                  ]}
+                    tone === 'primary' && styles.dialogBtnPrimary,
+                    tone === 'danger' && styles.dialogBtnDanger,
+                    tone === 'neutral' && styles.dialogBtnNeutral
+                  )}
                   onPress={button.onPress}
                 >
-                  <Text style={styles.dialogBtnText}>{button.text || 'OK'}</Text>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name={icon} size={14} color="#f8fafc" />
+                    <Text className={styles.dialogBtnText}>{button.text || 'OK'}</Text>
+                  </View>
                 </Pressable>
               );
             })}

src/components/BottomTab.js

@@ -2,13 +2,14 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 
 function TabBtn({ tab, current, onChange }) {
   const active = current === tab.key;
   return (
-    <Pressable onPress={() => onChange(tab.key)} style={styles.tabItem}>
+    <Pressable onPress={() => onChange(tab.key)} className={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>
+      <Text className={cn(styles.tabLabel, active && styles.tabLabelActive)}>{tab.label}</Text>
     </Pressable>
   );
 }
@@ -25,23 +26,23 @@ export default function BottomTab({ current, onChange, onAddItem, canAddItem })
   ];
 
   return (
-    <View style={styles.tabBarWrap}>
-      <View style={styles.tabBar}>
-        <View style={styles.tabGroupSide}>
+    <View className={styles.tabBarWrap}>
+      <View className={styles.tabBar}>
+        <View className={styles.tabGroupSide}>
           {leftTabs.map((tab) => (
             <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
           ))}
         </View>
 
         <Pressable
-          style={[styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled]}
+          className={cn(styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled)}
           onPress={onAddItem}
           disabled={!canAddItem}
         >
           <Ionicons name="add" size={26} color="#fff" />
         </Pressable>
 
-        <View style={styles.tabGroupSide}>
+        <View className={styles.tabGroupSide}>
           {rightTabs.map((tab) => (
             <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
           ))}

src/components/ChipGroup.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 
 export default function ChipGroup({ options, value, onChange }) {
   return (
-    <View style={styles.chipGroup}>
+    <View className={styles.chipGroup}>
       {options.map((option) => {
         const active = value === option;
         return (
-          <Pressable key={option} style={[styles.chip, active && styles.chipActive]} onPress={() => onChange(option)}>
-            <Text style={[styles.chipText, active && styles.chipTextActive]}>{option}</Text>
+          <Pressable key={option} className={cn(styles.chip, active && styles.chipActive)} onPress={() => onChange(option)}>
+            <Text className={cn(styles.chipText, active && styles.chipTextActive)}>{option}</Text>
           </Pressable>
         );
       })}

src/components/DatePickerModal.js

@@ -1,6 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import { Modal, Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 import { todayYMD } from '../utils/date';
 
 const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
@@ -48,40 +50,48 @@ export default function DatePickerModal({ visible, value, onClose, onSelect, tit
   };
 
   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>
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
+      <View className={styles.dateModalBackdrop}>
+        <View className={styles.dateModalCard}>
+          <View className={styles.sectionHeader}>
+            <View className={styles.sectionHeaderLeft}>
+              <View className={styles.sectionHeaderIconWrap}>
+                <Ionicons name="calendar-outline" size={16} color="#d4d4d8" />
+              </View>
+              <Text className={styles.cardTitle}>{title}</Text>
+            </View>
+            <Pressable className={styles.secondaryBtnTight} onPress={onClose}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="close" size={14} color="#f4f4f5" />
+                <Text className={styles.secondaryBtnText}>Close</Text>
+              </View>
             </Pressable>
           </View>
 
-          <View style={styles.calendarHeader}>
-            <Pressable style={styles.calendarNavBtn} onPress={() => goMonth(-1)}>
-              <Text style={styles.calendarNavText}>‹</Text>
+          <View className={styles.calendarHeader}>
+            <Pressable className={styles.calendarNavBtn} onPress={() => goMonth(-1)}>
+              <Ionicons name="chevron-back" size={18} color="#e4e4e7" />
             </Pressable>
-            <Text style={styles.calendarMonthText}>{monthLabel(viewDate)}</Text>
-            <Pressable style={styles.calendarNavBtn} onPress={() => goMonth(1)}>
-              <Text style={styles.calendarNavText}>›</Text>
+            <Text className={styles.calendarMonthText}>{monthLabel(viewDate)}</Text>
+            <Pressable className={styles.calendarNavBtn} onPress={() => goMonth(1)}>
+              <Ionicons name="chevron-forward" size={18} color="#e4e4e7" />
             </Pressable>
           </View>
 
-          <View style={styles.calendarWeekRow}>
+          <View className={styles.calendarWeekRow}>
             {WEEKDAYS.map((w) => (
-              <Text key={w} style={styles.calendarWeekday}>{w}</Text>
+              <Text key={w} className={styles.calendarWeekday}>{w}</Text>
             ))}
           </View>
 
-          <View style={styles.calendarGrid}>
+          <View className={styles.calendarGrid}>
             {grid.map((cell, idx) => {
-              if (!cell) return <View key={`empty-${idx}`} style={styles.calendarCell} />;
+              if (!cell) return <View key={`empty-${idx}`} className={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 key={ymd} className={cn(styles.calendarCell, isSelected && styles.calendarCellActive)} onPress={() => onSelect(ymd)}>
+                  <Text className={cn(styles.calendarCellText, isSelected && styles.calendarCellTextActive)}>{cell.getDate()}</Text>
                 </Pressable>
               );
             })}

src/components/Field.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
 
-export default function Field({ label, children }) {
+export default function Field({ label, icon, children }) {
   return (
-    <View style={styles.fieldWrap}>
-      <Text style={styles.label}>{label}</Text>
+    <View className={styles.fieldWrap}>
+      <View className={styles.labelRow}>
+        {icon ? <Ionicons name={icon} size={14} color="#d4d4d8" /> : null}
+        <Text className={styles.label}>{label}</Text>
+      </View>
       {children}
     </View>
   );

src/components/ItemCard.js

@@ -1,48 +1,95 @@
 import React from 'react';
 import { Image, Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { STATUS_COLORS } from '../constants';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
+import { formatStatusLabel, normalizeQuantity } from '../utils/labels';
 
 function statusAccent(status) {
   return STATUS_COLORS[status] || '#64748b';
 }
 
-export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack }) {
+export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack, onOpenImage }) {
   const isPacked = item.status === 'packed';
   const isUnpacked = item.status === 'unpacked';
+  const quantity = normalizeQuantity(item.quantity, 1);
 
   return (
-    <View style={styles.itemCard}>
-      <View style={[styles.itemAccent, { backgroundColor: statusAccent(item.status) }]} />
-      <View style={styles.itemMain}>
-        <View style={styles.cardRow}>
-          <View style={styles.flex}>
-            <Text style={styles.itemTitle}>{item.name}</Text>
-            <Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {item.status}</Text>
-            <Text style={styles.itemMeta}>Location: {item.placement}</Text>
-            {item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta}>Lent to: {item.lentTo}</Text> : null}
-            {!!item.description ? <Text style={styles.itemMeta}>{item.description}</Text> : null}
-          </View>
-          <View style={styles.stackButtons}>
-            <Pressable style={styles.miniBtn} onPress={() => onEdit(item)}>
-              <Text style={styles.miniBtnText}>Edit</Text>
+    <View className={styles.itemCard}>
+      <View className={styles.itemAccent} style={{ backgroundColor: statusAccent(item.status) }} />
+
+      <View className={styles.itemThumbWrap}>
+        {item.imageUri ? (
+          <Pressable onPress={() => onOpenImage?.(item.imageUri)}>
+            <Image source={{ uri: item.imageUri }} className={styles.itemThumbSmall} />
           </Pressable>
-            <Pressable style={styles.miniBtnDanger} onPress={() => onDelete(item.id)}>
-              <Text style={styles.miniBtnText}>Delete</Text>
+        ) : (
+          <View className={styles.itemThumbPlaceholder}>
+            <Ionicons name="briefcase-outline" size={20} color="#a1a1aa" />
+          </View>
+        )}
+      </View>
+
+      <View className={styles.itemMain}>
+        <View className={styles.cardRow}>
+          <View className={styles.flex}>
+            <Text className={styles.itemTitle} numberOfLines={1}>{item.name}</Text>
+            <View className={styles.sectionHeaderLeft}>
+              <Ionicons name="albums-outline" size={12} color="#a1a1aa" />
+              <Text className={styles.itemMeta}>Qty: {quantity}</Text>
+            </View>
+            <View className={styles.sectionHeaderLeft}>
+              <Ionicons name="layers-outline" size={12} color="#a1a1aa" />
+              <Text className={styles.itemMeta} numberOfLines={1}>{item.category || 'uncategorized'} · {formatStatusLabel(item.status, item.lentTo)}</Text>
+            </View>
+            <View className={styles.sectionHeaderLeft}>
+              <Ionicons name="pin-outline" size={12} color="#a1a1aa" />
+              <Text className={styles.itemMeta}>Location: {item.placement}</Text>
+            </View>
+            {item.status === 'lent-to' && !!item.lentTo ? (
+              <View className={styles.sectionHeaderLeft}>
+                <Ionicons name="person-outline" size={12} color="#a1a1aa" />
+                <Text className={styles.itemMeta} numberOfLines={1}>Borrower: {item.lentTo}</Text>
+              </View>
+            ) : null}
+            {!!item.description ? (
+              <View className={styles.sectionHeaderLeft}>
+                <Ionicons name="document-text-outline" size={12} color="#a1a1aa" />
+                <Text className={styles.itemMeta} numberOfLines={2}>{item.description}</Text>
+              </View>
+            ) : null}
+          </View>
+          <View className={styles.stackButtons}>
+            <Pressable className={styles.miniBtn} onPress={() => onEdit(item)}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="create-outline" size={12} color="#f4f4f5" />
+                <Text className={styles.miniBtnText}>Edit</Text>
+              </View>
+            </Pressable>
+            <Pressable className={styles.miniBtnDanger} onPress={() => onDelete(item.id)}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="trash-outline" size={12} color="#f4f4f5" />
+                <Text className={styles.miniBtnText}>Delete</Text>
+              </View>
             </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>
+        <View className={styles.quickStatusRow}>
+          <Pressable className={cn(styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive)} onPress={onQuickPack}>
+            <View className={styles.buttonContent}>
+              <Ionicons name="checkmark-circle-outline" size={12} color={isPacked ? '#e0f2fe' : '#d4d4d8'} />
+              <Text className={cn(styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive)}>Packed</Text>
+            </View>
           </Pressable>
-          <Pressable style={[styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive]} onPress={onQuickUnpack}>
-            <Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpack</Text>
+          <Pressable className={cn(styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive)} onPress={onQuickUnpack}>
+            <View className={styles.buttonContent}>
+              <Ionicons name="remove-circle-outline" size={12} color={isUnpacked ? '#e0f2fe' : '#d4d4d8'} />
+              <Text className={cn(styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive)}>Unpacked</Text>
+            </View>
           </Pressable>
         </View>
-
-        {item.imageUri ? <Image source={{ uri: item.imageUri }} style={styles.previewImageSmall} /> : null}
       </View>
     </View>
   );

src/components/TripPicker.js

@@ -1,28 +1,91 @@
 import React from 'react';
-import { Pressable, ScrollView, Text, View } from 'react-native';
+import { Pressable, ScrollView, Text, View, useWindowDimensions } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 
 export default function TripPicker({ trips, selectedTripId, onChooseTrip }) {
+  const { width } = useWindowDimensions();
+  const sortedTrips = trips.slice().sort((a, b) => b.startDate.localeCompare(a.startDate));
+  const useHorizontalScroll = sortedTrips.length > 2;
+  const extraTripCount = Math.max(0, sortedTrips.length - 2);
+  const scrollCardWidth = Math.max(152, Math.floor((width - 32) * 0.46));
+
   return (
-    <View style={styles.tripPickerWrap}>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tripChipScroll}>
+    <View className={styles.tripPickerWrap}>
+      <View className={styles.sectionHeader}>
+        <View className={styles.sectionHeaderLeft}>
+          <Ionicons name="map-outline" size={14} color="#d4d4d8" />
+          <Text className={styles.tripPickerTitle}>Choose Trip</Text>
+        </View>
+        {useHorizontalScroll ? <Text className={styles.tripPickerMoreBadge}>+{extraTripCount} more</Text> : null}
+      </View>
+
       {trips.length ? (
-          trips
-            .slice()
-            .sort((a, b) => b.startDate.localeCompare(a.startDate))
-            .map((trip) => {
+        useHorizontalScroll ? (
+          <>
+            <ScrollView
+              horizontal
+              nestedScrollEnabled
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.tripPickerScrollRow}
+            >
+              {sortedTrips.map((trip) => {
                 const active = selectedTripId === trip.id;
                 return (
-                <Pressable key={trip.id} style={[styles.tripChip, active && styles.tripChipActive]} onPress={() => onChooseTrip(trip.id)}>
-                  <Text style={[styles.tripChipText, active && styles.tripChipTextActive]}>{trip.name}</Text>
-                  <Text style={[styles.tripChipSub, active && styles.tripChipSubActive]}>{trip.startDate}</Text>
+                  <Pressable
+                    key={trip.id}
+                    className={cn(styles.tripChip, active && styles.tripChipActive)}
+                    style={{ width: scrollCardWidth }}
+                    onPress={() => onChooseTrip(trip.id)}
+                  >
+                    <View className={styles.sectionHeader}>
+                      <View className={cn(styles.sectionHeaderLeft, styles.flex)}>
+                        <Ionicons name="airplane-outline" size={14} color={active ? '#dbeafe' : '#d4d4d8'} />
+                        <Text className={cn(styles.tripChipText, active && styles.tripChipTextActive)} numberOfLines={1}>{trip.name}</Text>
+                      </View>
+                      {active ? <Ionicons name="checkmark-circle" size={16} color="#bfdbfe" /> : null}
+                    </View>
+                    <Text className={cn(styles.tripChipSub, active && styles.tripChipSubActive)}>{trip.startDate}</Text>
                   </Pressable>
                 );
-            })
-        ) : (
-          <Text style={styles.muted}>Create your first trip to start.</Text>
-        )}
+              })}
             </ScrollView>
+
+            <View className={styles.tripPickerMoreHintRow}>
+              <Ionicons name="arrow-forward-circle-outline" size={13} color="#94a3b8" />
+              <Text className={styles.tripPickerMoreHintText}>Swipe to see {extraTripCount} more</Text>
+            </View>
+          </>
+        ) : (
+          <View style={styles.tripPickerGrid}>
+            {sortedTrips.map((trip) => {
+              const active = selectedTripId === trip.id;
+              return (
+                <Pressable
+                  key={trip.id}
+                  className={cn(styles.tripChip, active && styles.tripChipActive)}
+                  style={sortedTrips.length === 1 ? styles.tripChipSingle : styles.tripChipGridItem}
+                  onPress={() => onChooseTrip(trip.id)}
+                >
+                  <View className={styles.sectionHeader}>
+                    <View className={cn(styles.sectionHeaderLeft, styles.flex)}>
+                      <Ionicons name="airplane-outline" size={14} color={active ? '#dbeafe' : '#d4d4d8'} />
+                      <Text className={cn(styles.tripChipText, active && styles.tripChipTextActive)} numberOfLines={1}>{trip.name}</Text>
+                    </View>
+                    {active ? <Ionicons name="checkmark-circle" size={16} color="#bfdbfe" /> : null}
+                  </View>
+                  <Text className={cn(styles.tripChipSub, active && styles.tripChipSubActive)}>{trip.startDate}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        )
+      ) : (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>Create your first trip to start.</Text>
+        </View>
+      )}
     </View>
   );
 }

src/modals/BackupModal.js

@@ -0,0 +1,163 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { styles } from '../styles';
+import { cn } from '../utils/cn';
+
+export default function BackupModal({
+  visible,
+  onClose,
+  exportJson,
+  importJson,
+  setImportJson,
+  exportFile,
+  importFile,
+  applyImport,
+}) {
+  const exportInputRef = useRef(null);
+  const [showExportJson, setShowExportJson] = useState(false);
+  const [copyState, setCopyState] = useState('idle');
+
+  useEffect(() => {
+    if (!visible) return;
+    setShowExportJson(false);
+    setCopyState('idle');
+  }, [visible]);
+
+  useEffect(() => {
+    if (copyState !== 'copied') return undefined;
+    const timeout = setTimeout(() => setCopyState('idle'), 1400);
+    return () => clearTimeout(timeout);
+  }, [copyState]);
+
+  async function handleCopyData() {
+    if (Platform.OS === 'web' && typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(exportJson);
+        setCopyState('copied');
+        return;
+      } catch {
+        // fall through to manual copy fallback
+      }
+    }
+
+    setShowExportJson(true);
+    setCopyState('manual');
+
+    if (Platform.OS === 'android') {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      exportInputRef.current?.focus?.();
+      if (exportInputRef.current?.setNativeProps) {
+        exportInputRef.current.setNativeProps({
+          selection: { start: 0, end: exportJson.length },
+        });
+      }
+    });
+  }
+
+  return (
+    <Modal visible={visible} animationType="none" transparent>
+      <View className={styles.modalBackdrop}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} className={styles.modalKeyboardWrap}>
+          <View className={styles.modalCard}>
+            <View className={styles.sectionHeader}>
+              <View className={styles.sectionHeaderLeft}>
+                <View className={styles.sectionHeaderIconWrap}>
+                  <Ionicons name="cloud-upload-outline" size={16} color="#d4d4d8" />
+                </View>
+                <Text className={styles.cardTitle}>Backup & Restore</Text>
+              </View>
+              <Pressable className={styles.secondaryBtnTight} onPress={onClose}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="close" size={14} color="#f4f4f5" />
+                  <Text className={styles.secondaryBtnText}>Close</Text>
+                </View>
+              </Pressable>
+            </View>
+
+            <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={styles.modalScrollContent} showsVerticalScrollIndicator={false}>
+              <View className={styles.sectionHeaderLeft}>
+                <Ionicons name="download-outline" size={14} color="#d4d4d8" />
+                <Text className={styles.cardTitle}>Export JSON</Text>
+              </View>
+              <Text className={styles.cardMeta}>Use Show JSON or Copy Data.</Text>
+
+              <View className={styles.actionRow}>
+                <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={() => setShowExportJson((prev) => !prev)}>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name={showExportJson ? 'eye-off-outline' : 'eye-outline'} size={14} color="#f4f4f5" />
+                    <Text className={styles.secondaryBtnText}>{showExportJson ? 'Hide JSON' : 'Show JSON'}</Text>
+                  </View>
+                </Pressable>
+
+                <Pressable className={cn(styles.primaryBtnTight, styles.flex)} onPress={handleCopyData}>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name={copyState === 'copied' ? 'checkmark-circle-outline' : 'copy-outline'} size={14} color="#ffffff" />
+                    <Text className={styles.primaryBtnText}>{copyState === 'copied' ? 'Copied' : 'Copy Data'}</Text>
+                  </View>
+                </Pressable>
+              </View>
+
+              <Pressable className={styles.secondaryBtn} onPress={exportFile}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="share-social-outline" size={15} color="#f4f4f5" />
+                  <Text className={styles.secondaryBtnText}>Export File</Text>
+                </View>
+              </Pressable>
+
+              {copyState === 'manual' ? (
+                <Text className={styles.cardMeta}>Direct clipboard is unavailable here. JSON is shown for manual copy.</Text>
+              ) : null}
+
+              {showExportJson ? (
+                Platform.OS === 'android' ? (
+                  <View style={styles.exportJsonBlock}>
+                    <Text style={styles.exportJsonText} selectable>{exportJson}</Text>
+                  </View>
+                ) : (
+                  <TextInput
+                    ref={exportInputRef}
+                    style={styles.inputMultiline}
+                    multiline
+                    value={exportJson}
+                    editable={false}
+                    selectTextOnFocus
+                  />
+                )
+              ) : null}
+
+              <View className={styles.sectionHeaderLeft}>
+                <Ionicons name="cloud-upload-outline" size={14} color="#d4d4d8" />
+                <Text className={styles.cardTitle}>Import JSON</Text>
+              </View>
+              <Text className={styles.cardMeta}>Paste a previous backup. This will replace current data.</Text>
+              <Pressable className={styles.secondaryBtn} onPress={importFile}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="document-outline" size={15} color="#f4f4f5" />
+                  <Text className={styles.secondaryBtnText}>Pick Backup File</Text>
+                </View>
+              </Pressable>
+              <TextInput
+                style={styles.inputMultiline}
+                multiline
+                value={importJson}
+                onChangeText={setImportJson}
+                placeholder="Paste backup JSON here"
+                placeholderTextColor="#71717a"
+              />
+              <Pressable className={styles.primaryBtn} onPress={applyImport}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="sync-outline" size={15} color="#ffffff" />
+                  <Text className={styles.primaryBtnText}>Import & Replace</Text>
+                </View>
+              </Pressable>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}

src/modals/CheckupFixModal.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
 import ChipGroup from '../components/ChipGroup';
 import Field from '../components/Field';
@@ -14,23 +15,31 @@ export default function CheckupFixModal({
 }) {
   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}>Update for this Check-Up</Text>
-              <Pressable onPress={() => setCheckupFixModalVisible(false)}>
-                <Text style={styles.closeText}>Close</Text>
+      <View className={styles.modalBackdrop}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} className={styles.modalKeyboardWrap}>
+          <View className={styles.modalCard}>
+            <View className={styles.sectionHeader}>
+              <View className={styles.sectionHeaderLeft}>
+                <View className={styles.sectionHeaderIconWrap}>
+                  <Ionicons name="build-outline" size={16} color="#d4d4d8" />
+                </View>
+                <Text className={styles.cardTitle}>Update for this Check-Up</Text>
+              </View>
+              <Pressable className={styles.secondaryBtnTight} onPress={() => setCheckupFixModalVisible(false)}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="close" size={14} color="#f4f4f5" />
+                  <Text className={styles.secondaryBtnText}>Close</Text>
+                </View>
               </Pressable>
             </View>
 
             <ScrollView
               keyboardShouldPersistTaps="handled"
               keyboardDismissMode="interactive"
-              contentContainerStyle={{ paddingBottom: 12 }}
+              contentContainerStyle={styles.modalScrollContent}
               showsVerticalScrollIndicator={false}
             >
-              <Field label="Status">
+              <Field label="Status" icon="radio-button-on-outline">
                 <ChipGroup
                   options={ITEM_STATUSES}
                   value={checkupFixForm.status}
@@ -38,7 +47,7 @@ export default function CheckupFixModal({
                 />
               </Field>
 
-              <Field label="Placement">
+              <Field label="Placement" icon="pin-outline">
                 <ChipGroup
                   options={ITEM_PLACEMENTS}
                   value={checkupFixForm.placement}
@@ -47,28 +56,32 @@ export default function CheckupFixModal({
               </Field>
 
               {checkupFixForm.status === 'lent-to' ? (
-                <Field label="Lent to">
+                <Field label="Lent to" icon="person-outline">
                   <TextInput
-                    style={styles.input}
+                    className={styles.input}
                     value={checkupFixForm.lentTo}
                     onChangeText={(v) => setCheckupFixForm((prev) => ({ ...prev, lentTo: v }))}
                     placeholder="Person name"
-                    placeholderTextColor="#6b7280"
+                    placeholderTextColor="#71717a"
                   />
                 </Field>
               ) : null}
 
               <Pressable
-                style={styles.inlineToggle}
+                className={styles.inlineToggle}
                 onPress={() => setCheckupFixForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
               >
-                <Text style={styles.inlineToggleText}>
-                  {checkupFixForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
-                </Text>
+                <View className={styles.sectionHeaderLeft}>
+                  <Ionicons name={checkupFixForm.updateMasterList ? 'checkbox-outline' : 'square-outline'} size={16} color="#d4d4d8" />
+                  <Text className={styles.inlineToggleText}>Also update item in trip list</Text>
+                </View>
               </Pressable>
 
-              <Pressable style={styles.primaryBtn} onPress={saveFixModal}>
-                <Text style={styles.primaryBtnText}>Save</Text>
+              <Pressable className={styles.primaryBtn} onPress={saveFixModal}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="checkmark-circle-outline" size={15} color="#ffffff" />
+                  <Text className={styles.primaryBtnText}>Save</Text>
+                </View>
               </Pressable>
             </ScrollView>
           </View>

src/modals/CheckupFlowModal.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
 import ChipGroup from '../components/ChipGroup';
 import Field from '../components/Field';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
+import { formatItemLabel, formatStatusLabel } from '../utils/labels';
 
 export default function CheckupFlowModal({
   visible,
@@ -17,59 +20,108 @@ export default function CheckupFlowModal({
   onYes,
   onNo,
   onSaveNo,
+  onSkip,
+  onBack,
   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>
+      <View className={styles.modalBackdrop}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} className={styles.modalKeyboardWrap}>
+          <View className={styles.modalCard}>
+            <View className={styles.sectionHeader}>
+              <View className={styles.sectionHeaderLeft}>
+                <View className={styles.sectionHeaderIconWrap}>
+                  <Ionicons name="checkmark-circle-outline" size={16} color="#d4d4d8" />
+                </View>
+                <Text className={styles.cardTitle}>Check-Up</Text>
+              </View>
+              <Pressable className={styles.secondaryBtnTight} onPress={onClose}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="close" size={14} color="#f4f4f5" />
+                  <Text className={styles.secondaryBtnText}>Close</Text>
+                </View>
               </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>
+              <View className={styles.section}>
+                <Text className={styles.cardTitle}>Done. Save this snapshot?</Text>
+                <Text className={styles.cardMeta}>All {total} items were checked.</Text>
+                <View className={styles.actionRow}>
+                  <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={onBack}>
+                    <View className={styles.buttonContent}>
+                      <Ionicons name="arrow-back-outline" size={14} color="#f4f4f5" />
+                      <Text className={styles.secondaryBtnText}>Back</Text>
+                    </View>
                   </Pressable>
+                  <Pressable className={cn(styles.primaryBtnTight, styles.flex)} onPress={onFinish}>
+                    <View className={styles.buttonContent}>
+                      <Ionicons name="save-outline" size={14} color="#ffffff" />
+                      <Text className={styles.primaryBtnText}>Save Snapshot</Text>
+                    </View>
+                  </Pressable>
+                </View>
               </View>
             ) : (
               <ScrollView
                 keyboardShouldPersistTaps="handled"
                 keyboardDismissMode="interactive"
-                contentContainerStyle={{ paddingBottom: 12 }}
+                contentContainerStyle={styles.modalScrollContent}
                 showsVerticalScrollIndicator={false}
               >
-                <Text style={styles.tripHistoryLabel}>
+                <Text className={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}` : ''}
+                <View className={styles.checkupProgressTrack}>
+                  <View className={styles.checkupProgressFill} style={{ width: `${Math.round(((stepIndex + 1) / total) * 100)}%` }} />
+                </View>
+                <Text className={styles.cardTitle}>{formatItemLabel(entry.name, entry.quantity)}</Text>
+                <View className={styles.sectionHeaderLeft}>
+                  <Ionicons name="layers-outline" size={12} color="#a1a1aa" />
+                  <Text className={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
+                </View>
+                <View className={styles.sectionHeaderLeft}>
+                  <Ionicons name="pin-outline" size={12} color="#a1a1aa" />
+                  <Text className={styles.cardMeta}>
+                    Current: {formatStatusLabel(entry.current.status, entry.current.lentTo)} · {entry.current.placement}
                   </Text>
+                </View>
 
                 {mode === 'question' ? (
-                  <View style={styles.answerRowWide}>
-                    <Pressable style={styles.answerYesWide} onPress={onYes}>
-                      <Text style={styles.answerText}>Yes, correct</Text>
+                  <View className={styles.answerRowWide}>
+                    <View className={styles.actionRow}>
+                      <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={onBack}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="arrow-back-outline" size={14} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>Back</Text>
+                        </View>
                       </Pressable>
-                    <Pressable style={styles.answerNoWide} onPress={onNo}>
-                      <Text style={styles.answerText}>No, update</Text>
+                      <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={onSkip}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="play-forward-outline" size={14} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>Skip</Text>
+                        </View>
+                      </Pressable>
+                    </View>
+                    <Pressable className={styles.answerYesWide} onPress={onYes}>
+                      <View className={styles.buttonContent}>
+                        <Ionicons name="checkmark-circle-outline" size={14} color="#f8fafc" />
+                        <Text className={styles.answerText}>Yes, correct</Text>
+                      </View>
+                    </Pressable>
+                    <Pressable className={styles.answerNoWide} onPress={onNo}>
+                      <View className={styles.buttonContent}>
+                        <Ionicons name="create-outline" size={14} color="#f8fafc" />
+                        <Text className={styles.answerText}>No, update</Text>
+                      </View>
                     </Pressable>
                   </View>
                 ) : (
-                  <View style={styles.section}>
-                    <Field label="Status">
+                  <View className={styles.section}>
+                    <Field label="Status" icon="radio-button-on-outline">
                       <ChipGroup
                         options={ITEM_STATUSES}
                         value={noForm.status}
@@ -77,7 +129,7 @@ export default function CheckupFlowModal({
                       />
                     </Field>
 
-                    <Field label="Placement">
+                    <Field label="Placement" icon="pin-outline">
                       <ChipGroup
                         options={ITEM_PLACEMENTS}
                         value={noForm.placement}
@@ -85,30 +137,54 @@ export default function CheckupFlowModal({
                       />
                     </Field>
 
-                    {noForm.status === 'lent-to' ? (
-                      <Field label="Lent to">
+                    {noForm.placement === 'other' ? (
+                      <Field label="Custom location" icon="navigate-outline">
                         <TextInput
-                          style={styles.input}
+                          className={styles.input}
+                          value={noForm.placementCustom}
+                          onChangeText={(v) => setNoForm((prev) => ({ ...prev, placementCustom: v }))}
+                          placeholder="bath-kit"
+                          placeholderTextColor="#71717a"
+                        />
+                      </Field>
+                    ) : null}
+
+                    {noForm.status === 'lent-to' ? (
+                      <Field label="Lent to" icon="person-outline">
+                        <TextInput
+                          className={styles.input}
                           value={noForm.lentTo}
                           onChangeText={(v) => setNoForm((prev) => ({ ...prev, lentTo: v }))}
                           placeholder="Person name"
-                          placeholderTextColor="#6b7280"
+                          placeholderTextColor="#71717a"
                         />
                       </Field>
                     ) : null}
 
                     <Pressable
-                      style={styles.inlineToggle}
+                      className={styles.inlineToggle}
                       onPress={() => setNoForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
                     >
-                      <Text style={styles.inlineToggleText}>
-                        {noForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
-                      </Text>
+                      <View className={styles.sectionHeaderLeft}>
+                        <Ionicons name={noForm.updateMasterList ? 'checkbox-outline' : 'square-outline'} size={16} color="#d4d4d8" />
+                        <Text className={styles.inlineToggleText}>Also update item in trip list</Text>
+                      </View>
                     </Pressable>
 
-                    <Pressable style={styles.primaryBtn} onPress={onSaveNo}>
-                      <Text style={styles.primaryBtnText}>Save update + next</Text>
+                    <View className={styles.actionRow}>
+                      <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={onBack}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="arrow-back-outline" size={14} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>Back</Text>
+                        </View>
                       </Pressable>
+                      <Pressable className={cn(styles.primaryBtnTight, styles.flex)} onPress={onSaveNo}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="arrow-forward-circle-outline" size={14} color="#ffffff" />
+                          <Text className={styles.primaryBtnText}>Save + Next</Text>
+                        </View>
+                      </Pressable>
+                    </View>
                   </View>
                 )}
               </ScrollView>

src/modals/ItemModal.js

@@ -1,101 +1,426 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
-import ChipGroup from '../components/ChipGroup';
 import Field from '../components/Field';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
+
+const CATEGORY_OPTIONS = ['toiletries', 'electronics', 'documents', 'outfits', 'accessories', 'other'];
+const PRESET_CATEGORIES = CATEGORY_OPTIONS.filter((option) => option !== 'other');
+const IMAGE_QUALITY_OPTIONS = ['low', 'balanced', 'high'];
+
+function normalizeValue(value) {
+  return (value || '').trim().toLowerCase();
+}
+
+function optionLabel(value) {
+  return (value || '').replace(/-/g, ' ');
+}
+
+function SelectField({ value, placeholder, onPress }) {
+  return (
+    <Pressable className={styles.selectTrigger} onPress={onPress}>
+      <Text className={cn(styles.selectTriggerText, !value && styles.selectTriggerPlaceholder)}>{value ? optionLabel(value) : placeholder}</Text>
+      <Ionicons name="chevron-down" size={16} color="#a1a1aa" />
+    </Pressable>
+  );
+}
+
+function SelectPopupModal({ visible, title, options, value, onSelect, onClose }) {
+  if (!visible) return null;
+
+  return (
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
+      <View className={styles.selectModalBackdrop}>
+        <Pressable className={styles.selectModalBackdropHit} onPress={onClose} />
+
+        <View className={styles.selectModalCard}>
+          <View className={styles.sectionHeader}>
+            <Text className={styles.cardTitle}>{title}</Text>
+            <Pressable className={styles.secondaryBtnTight} onPress={onClose}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="close" size={14} color="#f4f4f5" />
+                <Text className={styles.secondaryBtnText}>Close</Text>
+              </View>
+            </Pressable>
+          </View>
+
+          <View className={styles.selectMenu}>
+            {options.map((option, index) => {
+              const active = value === option;
+              const isLast = index === options.length - 1;
+              return (
+                <Pressable
+                  key={option}
+                  className={cn(styles.selectMenuItem, active && styles.selectMenuItemActive, isLast && styles.selectMenuItemLast)}
+                  onPress={() => onSelect(option)}
+                >
+                  <Text className={cn(styles.selectMenuItemText, active && styles.selectMenuItemTextActive)}>{optionLabel(option)}</Text>
+                  <Ionicons name={active ? 'checkmark-circle' : 'ellipse-outline'} size={16} color={active ? '#93c5fd' : '#71717a'} />
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function qualityValue(level) {
+  if (level === 'high') return 0.95;
+  if (level === 'low') return 0.45;
+  return 0.75;
+}
 
 export default function ItemModal({
   visible,
   itemForm,
+  previousCustomPlacements,
   setItemModalVisible,
   updateItemForm,
   pickItemImage,
   takeItemImage,
   saveItemFromModal,
 }) {
+  const [categoryCustomMode, setCategoryCustomMode] = useState(false);
+  const [placementCustomMode, setPlacementCustomMode] = useState(false);
+  const [openPicker, setOpenPicker] = useState(null);
+  const nameInputRef = useRef(null);
+  const quantityInputRef = useRef(null);
+  const descriptionInputRef = useRef(null);
+  const lentToInputRef = useRef(null);
+
+  useEffect(() => {
+    if (!visible) {
+      setOpenPicker(null);
+      return;
+    }
+
+    const normalizedCategory = normalizeValue(itemForm.category);
+    const customCategory = !!normalizedCategory && !PRESET_CATEGORIES.includes(normalizedCategory);
+    setCategoryCustomMode(customCategory);
+    setPlacementCustomMode(itemForm.placement === 'other');
+    setOpenPicker(null);
+  }, [visible, itemForm.id]);
+
+  useEffect(() => {
+    if (!visible || itemForm.id) return undefined;
+
+    const timeout = setTimeout(() => {
+      nameInputRef.current?.focus?.();
+    }, 80);
+
+    return () => clearTimeout(timeout);
+  }, [visible, itemForm.id]);
+
+  const mediaOptions = {
+    quality: qualityValue(itemForm.imageQuality),
+    allowCrop: !!itemForm.imageAllowCrop,
+  };
+
+  const normalizedCategory = normalizeValue(itemForm.category);
+  const categorySelectValue = PRESET_CATEGORIES.includes(normalizedCategory) ? normalizedCategory : '';
+  const savedPlacementOptions = (previousCustomPlacements || []).slice(0, 6);
+  const savedPlacementValue = savedPlacementOptions.includes(itemForm.placementCustom) ? itemForm.placementCustom : '';
+
+  const pickerConfig = {
+    category: {
+      title: 'Select category',
+      options: CATEGORY_OPTIONS,
+      value: categorySelectValue,
+      onSelect: chooseCategory,
+    },
+    status: {
+      title: 'Select status',
+      options: ITEM_STATUSES,
+      value: itemForm.status,
+      onSelect: chooseStatus,
+    },
+    placement: {
+      title: 'Select placement',
+      options: ITEM_PLACEMENTS,
+      value: itemForm.placement,
+      onSelect: choosePlacement,
+    },
+    savedPlacement: {
+      title: 'Saved custom locations',
+      options: savedPlacementOptions,
+      value: savedPlacementValue,
+      onSelect: chooseSavedPlacement,
+    },
+    imageQuality: {
+      title: 'Image quality',
+      options: IMAGE_QUALITY_OPTIONS,
+      value: itemForm.imageQuality,
+      onSelect: chooseImageQuality,
+    },
+  };
+
+  const activePicker = openPicker ? pickerConfig[openPicker] : null;
+
+  function chooseCategory(value) {
+    if (value === 'other') {
+      setCategoryCustomMode(true);
+      if (PRESET_CATEGORIES.includes(normalizedCategory)) {
+        updateItemForm('category', '');
+      }
+      setOpenPicker(null);
+      return;
+    }
+
+    setCategoryCustomMode(false);
+    updateItemForm('category', value);
+    setOpenPicker(null);
+  }
+
+  function chooseStatus(value) {
+    updateItemForm('status', value);
+    setOpenPicker(null);
+  }
+
+  function choosePlacement(value) {
+    if (value === 'other') {
+      setPlacementCustomMode(true);
+      updateItemForm('placement', 'other');
+      setOpenPicker(null);
+      return;
+    }
+
+    setPlacementCustomMode(false);
+    updateItemForm('placement', value);
+    setOpenPicker(null);
+  }
+
+  function chooseSavedPlacement(value) {
+    updateItemForm('placementCustom', value);
+    setOpenPicker(null);
+  }
+
+  function chooseImageQuality(value) {
+    updateItemForm('imageQuality', value);
+    setOpenPicker(null);
+  }
+
+  function resetCategorySelector() {
+    setCategoryCustomMode(false);
+    updateItemForm('category', '');
+    setOpenPicker(null);
+  }
+
+  function resetPlacementSelector() {
+    setPlacementCustomMode(false);
+    updateItemForm('placement', ITEM_PLACEMENTS[0] || 'suitcase');
+    setOpenPicker(null);
+  }
+
   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}>{itemForm.id ? 'Update Item' : 'Add Item'}</Text>
-              <Pressable onPress={() => setItemModalVisible(false)}>
-                <Text style={styles.closeText}>Close</Text>
+    <Modal visible={visible} animationType="none" transparent>
+      <View className={styles.modalBackdrop}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} className={styles.modalKeyboardWrap}>
+          <View className={styles.modalCard}>
+            <View className={styles.sectionHeader}>
+              <View className={styles.sectionHeaderLeft}>
+                <View className={styles.sectionHeaderIconWrap}>
+                  <Ionicons name={itemForm.id ? 'create-outline' : 'add-circle-outline'} size={16} color="#d4d4d8" />
+                </View>
+                <Text className={styles.cardTitle}>{itemForm.id ? 'Update Item' : 'Add Item'}</Text>
+              </View>
+              <Pressable className={styles.secondaryBtnTight} onPress={() => setItemModalVisible(false)}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="close" size={14} color="#f4f4f5" />
+                  <Text className={styles.secondaryBtnText}>Close</Text>
+                </View>
               </Pressable>
             </View>
 
             <ScrollView
               keyboardShouldPersistTaps="handled"
               keyboardDismissMode="interactive"
-              contentContainerStyle={{ paddingBottom: 12 }}
+              contentContainerStyle={styles.modalScrollContent}
               showsVerticalScrollIndicator={false}
             >
-              <Field label="Name">
+              <Field label="Name" icon="text-outline">
                 <TextInput
-                  style={styles.input}
+                  ref={nameInputRef}
+                  className={styles.input}
                   value={itemForm.name}
                   onChangeText={(v) => updateItemForm('name', v)}
                   placeholder="Toothbrush"
-                  placeholderTextColor="#6b7280"
+                  placeholderTextColor="#71717a"
+                  returnKeyType="next"
+                  blurOnSubmit={false}
+                  onSubmitEditing={() => quantityInputRef.current?.focus?.()}
                 />
               </Field>
 
-              <Field label="Description">
+              <Field label="Quantity" icon="albums-outline">
                 <TextInput
-                  style={styles.input}
+                  ref={quantityInputRef}
+                  className={styles.input}
+                  value={`${itemForm.quantity || 1}`}
+                  onChangeText={(v) => {
+                    const numeric = (v || '').replace(/[^0-9]/g, '');
+                    updateItemForm('quantity', numeric ? Math.max(1, Number.parseInt(numeric, 10)) : 1);
+                  }}
+                  placeholder="1"
+                  placeholderTextColor="#71717a"
+                  keyboardType="number-pad"
+                  returnKeyType="next"
+                  blurOnSubmit={false}
+                  onSubmitEditing={() => descriptionInputRef.current?.focus?.()}
+                />
+              </Field>
+
+              <Field label="Description" icon="document-text-outline">
+                <TextInput
+                  ref={descriptionInputRef}
+                  className={styles.input}
                   value={itemForm.description}
                   onChangeText={(v) => updateItemForm('description', v)}
                   placeholder="Optional"
-                  placeholderTextColor="#6b7280"
+                  placeholderTextColor="#71717a"
+                  returnKeyType={itemForm.status === 'lent-to' ? 'next' : 'done'}
+                  onSubmitEditing={() => {
+                    if (itemForm.status === 'lent-to') {
+                      lentToInputRef.current?.focus?.();
+                    }
+                  }}
                 />
               </Field>
 
-              <Field label="Category">
+              <Field label="Category" icon="layers-outline">
+                {categoryCustomMode ? (
+                  <View className={styles.selectCustomRow}>
                     <TextInput
-                  style={styles.input}
+                      className={cn(styles.input, styles.flex)}
                       value={itemForm.category}
                       onChangeText={(v) => updateItemForm('category', v)}
-                  placeholder="toiletries"
-                  placeholderTextColor="#6b7280"
+                      placeholder="Custom category"
+                      placeholderTextColor="#71717a"
+                    />
+                    <Pressable className={styles.selectCustomResetBtn} onPress={resetCategorySelector}>
+                      <Ionicons name="refresh-outline" size={16} color="#d4d4d8" />
+                    </Pressable>
+                  </View>
+                ) : (
+                  <SelectField
+                    value={categorySelectValue}
+                    placeholder="Select category"
+                    onPress={() => setOpenPicker('category')}
+                  />
+                )}
+              </Field>
+
+              <Field label="Status" icon="radio-button-on-outline">
+                <SelectField
+                  value={itemForm.status}
+                  placeholder="Select status"
+                  onPress={() => setOpenPicker('status')}
                 />
               </Field>
 
-              <Field label="Status">
-                <ChipGroup options={ITEM_STATUSES} value={itemForm.status} onChange={(v) => updateItemForm('status', v)} />
-              </Field>
+              <Field label="Placement" icon="pin-outline">
+                {placementCustomMode ? (
+                  <View className={styles.fieldWrap}>
+                    <View className={styles.selectCustomRow}>
+                      <TextInput
+                        className={cn(styles.input, styles.flex)}
+                        value={itemForm.placementCustom}
+                        onChangeText={(v) => updateItemForm('placementCustom', v)}
+                        placeholder="bath-kit"
+                        placeholderTextColor="#71717a"
+                      />
+                      <Pressable className={styles.selectCustomResetBtn} onPress={resetPlacementSelector}>
+                        <Ionicons name="refresh-outline" size={16} color="#d4d4d8" />
+                      </Pressable>
+                    </View>
+                    <Text className={styles.cardMeta}>Custom location</Text>
 
-              <Field label="Placement">
-                <ChipGroup options={ITEM_PLACEMENTS} value={itemForm.placement} onChange={(v) => updateItemForm('placement', v)} />
+                    {savedPlacementOptions.length ? (
+                      <SelectField
+                        value={savedPlacementValue}
+                        placeholder="Use saved custom location"
+                        onPress={() => setOpenPicker('savedPlacement')}
+                      />
+                    ) : null}
+                  </View>
+                ) : (
+                  <SelectField
+                    value={itemForm.placement}
+                    placeholder="Select placement"
+                    onPress={() => setOpenPicker('placement')}
+                  />
+                )}
               </Field>
 
               {itemForm.status === 'lent-to' ? (
-                <Field label="Lent to">
+                <Field label="Lent to" icon="person-outline">
                   <TextInput
-                    style={styles.input}
+                    ref={lentToInputRef}
+                    className={styles.input}
                     value={itemForm.lentTo}
                     onChangeText={(v) => updateItemForm('lentTo', v)}
                     placeholder="Person name"
-                    placeholderTextColor="#6b7280"
+                    placeholderTextColor="#71717a"
+                    returnKeyType="done"
                   />
                 </Field>
               ) : null}
 
-              <View style={styles.actionRow}>
-                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeItemImage}>
-                  <Text style={styles.secondaryBtnText}>Take photo</Text>
+              <View className={styles.actionRow}>
+                <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={() => takeItemImage(mediaOptions)}>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name="camera-outline" size={14} color="#f4f4f5" />
+                    <Text className={styles.secondaryBtnText}>Take photo</Text>
+                  </View>
                 </Pressable>
-                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickItemImage}>
-                  <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+                <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={() => pickItemImage(mediaOptions)}>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name="images-outline" size={14} color="#f4f4f5" />
+                    <Text className={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+                  </View>
                 </Pressable>
               </View>
-              {!!itemForm.imageUri && <Image source={{ uri: itemForm.imageUri }} style={styles.previewImageSmall} />}
 
-              <Pressable style={styles.primaryBtn} onPress={saveItemFromModal}>
-                <Text style={styles.primaryBtnText}>{itemForm.id ? 'Save Changes' : 'Add Item'}</Text>
+              {!!itemForm.imageUri ? (
+                <>
+                  <Image source={{ uri: itemForm.imageUri }} className={styles.previewImageSmall} />
+
+                  <Field label="Image optimization" icon="image-outline">
+                    <SelectField
+                      value={itemForm.imageQuality}
+                      placeholder="Select quality"
+                      onPress={() => setOpenPicker('imageQuality')}
+                    />
+                  </Field>
+
+                  <Pressable className={styles.inlineToggle} onPress={() => updateItemForm('imageAllowCrop', !itemForm.imageAllowCrop)}>
+                    <View className={styles.sectionHeaderLeft}>
+                      <Ionicons name={itemForm.imageAllowCrop ? 'checkbox-outline' : 'square-outline'} size={16} color="#d4d4d8" />
+                      <Text className={styles.inlineToggleText}>Enable optional crop before save</Text>
+                    </View>
+                  </Pressable>
+                </>
+              ) : null}
+
+              <Pressable className={styles.primaryBtn} onPress={saveItemFromModal}>
+                <View className={styles.buttonContent}>
+                  <Ionicons name="checkmark-circle-outline" size={15} color="#ffffff" />
+                  <Text className={styles.primaryBtnText}>{itemForm.id ? 'Save Changes' : 'Add Item'}</Text>
+                </View>
               </Pressable>
             </ScrollView>
+
+            <SelectPopupModal
+              visible={!!activePicker}
+              title={activePicker?.title || 'Select option'}
+              options={activePicker?.options || []}
+              value={activePicker?.value || ''}
+              onSelect={(value) => activePicker?.onSelect?.(value)}
+              onClose={() => setOpenPicker(null)}
+            />
           </View>
         </KeyboardAvoidingView>
       </View>

src/styles.js

@@ -1,653 +1,244 @@
-import { Platform, StyleSheet } from 'react-native';
+import { Platform } from 'react-native';
 import { TAB_BAR_HEIGHT } from './constants';
 
-export const styles = StyleSheet.create({
-  safe: {
-    flex: 1,
-    backgroundColor: '#090d12',
-  },
-  flex: {
-    flex: 1,
-  },
+export const styles = {
+  safe: 'flex-1 bg-[#09090b]',
+  flex: 'flex-1',
   content: {
     paddingHorizontal: 16,
-    paddingTop: 12,
-    paddingBottom: TAB_BAR_HEIGHT + 22,
-    gap: 14,
-  },
-  statusSpacer: {
-    height: Platform.OS === 'android' ? 8 : 0,
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  muted: {
-    color: '#8793a5',
+    paddingTop: 14,
+    paddingBottom: TAB_BAR_HEIGHT + 24,
+    gap: 18,
   },
+  statusSpacer: Platform.OS === 'android' ? 'h-2' : 'h-0',
+  center: 'flex-1 items-center justify-center',
+  muted: 'text-[#a1a1aa] text-sm leading-5',
+  loadingEmoji: 'text-[56px] mb-3',
+  loadingTitle: 'text-[#fafafa] font-black text-[22px] mb-3',
+  loadingBarTrack: 'w-[178px] h-[8px] rounded-full bg-[#1f1f23] border border-[#2f2f35] overflow-hidden mb-2',
+  loadingBarFill: 'h-full rounded-full bg-[#3b82f6]',
+  loadingPercent: 'text-[#a1a1aa] text-xs font-semibold tracking-[0.4px]',
 
-  tripPickerWrap: {
-    marginBottom: 6,
+  screenHero: 'rounded-xl bg-[#18181b] border border-[#27272a] p-5 gap-2 shadow-md',
+  screenHeroTop: 'flex-row items-center justify-between gap-3',
+  screenHeroTitle: 'text-[#fafafa] text-[26px] leading-[30px] font-black tracking-tight',
+  screenHeroSubtitle: 'text-[#a1a1aa] text-[13px] leading-[18px]',
+  screenHeroBadge: 'px-3 py-1.5 rounded-lg bg-[#27272a]',
+  screenHeroBadgeText: 'text-[#d4d4d8] text-xs font-semibold',
+
+  sectionHeader: 'flex-row items-center justify-between gap-3',
+  sectionHeaderLeft: 'flex-row items-center gap-2',
+  sectionHeaderIconWrap: 'w-7 h-7 rounded-lg bg-[#27272a] items-center justify-center',
+  sectionSubtle: 'text-[#a1a1aa] text-sm leading-5',
+
+  tripPickerWrap: 'gap-2',
+  tripPickerTitle: 'text-[#d4d4d8] text-sm font-semibold',
+  tripPickerMoreBadge: 'text-[#93c5fd] text-xs font-semibold px-2 py-1 rounded-lg bg-[#172338] border border-[#1e3a5f]',
+  tripPickerGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
   },
-  tripChipScroll: {
-    gap: 8,
-    paddingRight: 12,
+  tripPickerScrollRow: {
+    gap: 10,
+    paddingRight: 4,
   },
-  tripChip: {
-    paddingHorizontal: 12,
-    paddingVertical: 9,
-    borderRadius: 12,
-    backgroundColor: '#121923',
+  tripPickerMoreHintRow: 'flex-row items-center gap-1.5 px-1',
+  tripPickerMoreHintText: 'text-[#94a3b8] text-xs font-medium',
+  tripChipGridItem: {
+    width: '48.5%',
+  },
+  tripChipSingle: {
+    width: '100%',
+  },
+  tripChip: 'px-3.5 py-3.5 rounded-xl bg-[#18181b] border border-[#27272a] gap-1 shadow-md',
+  tripChipActive: 'bg-[#1e293b] border-[#60a5fa]',
+  tripChipText: 'text-[#f4f4f5] font-semibold text-base',
+  tripChipTextActive: 'text-[#f8fafc]',
+  tripChipSub: 'text-[#a1a1aa] text-xs',
+  tripChipSubActive: 'text-[#cbd5e1]',
+
+  section: 'gap-5',
+  sectionTitle: 'text-[#f4f4f5] text-[22px] leading-7 font-black tracking-tight',
+  sectionRow: 'flex-row justify-between items-center gap-3',
+
+  card: 'bg-[#18181b] rounded-xl border border-[#27272a] p-4 gap-3 shadow-md',
+  cardActive: 'border-[#60a5fa]',
+  cardArchived: 'opacity-[0.7] border-[#3f3f46]',
+  cardSoft: 'bg-[#111114] rounded-xl border border-[#27272a] p-4 gap-3 shadow-md',
+  cardRow: 'flex-row gap-3 items-start',
+  cardTitle: 'text-[#fafafa] font-bold text-[17px] leading-6',
+  cardMeta: 'text-[#a1a1aa] text-[13px] leading-[18px]',
+  tripHistoryLabel: 'text-[#93c5fd] text-sm font-medium',
+  tripHeroCard: 'bg-[#18181b] rounded-xl border border-[#27272a] p-5 gap-2 shadow-md',
+  tripHeroImage: 'w-full h-[180px] rounded-xl bg-[#111114]',
+  tripHeroTitle: 'text-[#fafafa] font-black text-[22px] leading-7',
+  tripListTitle: 'text-[#d4d4d8] font-semibold text-sm tracking-[0.5px] uppercase',
+
+  fieldWrap: 'gap-1.5',
+  labelRow: 'flex-row items-center gap-2',
+  label: 'text-[#d4d4d8] font-medium text-sm',
+  input: 'border border-[#3f3f46] rounded-xl bg-[#111114] text-[#f4f4f5] px-3.5 py-3',
+  selectCustomRow: 'flex-row items-center gap-2',
+  selectCustomResetBtn: 'w-11 h-11 rounded-xl bg-[#27272a] border border-[#3f3f46] items-center justify-center',
+  inputMultiline: {
     borderWidth: 1,
-    borderColor: '#1f2937',
-    minWidth: 120,
+    borderColor: '#3f3f46',
+    borderRadius: 12,
+    backgroundColor: '#111114',
+    color: '#f4f4f5',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minHeight: 150,
+    textAlignVertical: 'top',
+    fontSize: 13,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
   },
-  tripChipActive: {
-    backgroundColor: '#1d2a3a',
-    borderColor: '#60a5fa',
+  exportJsonBlock: {
+    borderWidth: 1,
+    borderColor: '#3f3f46',
+    borderRadius: 12,
+    backgroundColor: '#111114',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minHeight: 150,
   },
-  tripChipText: {
-    color: '#e2e8f0',
-    fontWeight: '700',
-  },
-  tripChipTextActive: {
-    color: '#bfdbfe',
-  },
-  tripChipSub: {
-    color: '#64748b',
-    fontSize: 12,
-    marginTop: 2,
-  },
-  tripChipSubActive: {
-    color: '#93c5fd',
+  exportJsonText: {
+    color: '#f4f4f5',
+    fontSize: 13,
+    lineHeight: 18,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
   },
+  dateInput: 'border border-[#3f3f46] rounded-xl bg-[#111114] px-3.5 py-3',
+  dateInputText: 'text-[#e4e4e7] font-medium',
 
-  section: {
+  chipGroup: 'flex-row flex-wrap gap-2',
+  chip: 'rounded-xl px-3 py-2 border border-[#3f3f46] bg-[#111114]',
+  chipActive: 'border-[#60a5fa] bg-[#172338]',
+  chipText: 'text-[#d4d4d8] font-medium text-xs',
+  chipTextActive: 'text-[#e0f2fe]',
+  selectTrigger: 'rounded-xl border border-[#3f3f46] bg-[#111114] px-3.5 py-3 flex-row items-center justify-between',
+  selectTriggerText: 'text-[#e4e4e7] text-sm font-medium',
+  selectTriggerPlaceholder: 'text-[#71717a] font-normal',
+  selectModalBackdrop: 'absolute inset-0 justify-center px-5',
+  selectModalBackdropHit: 'absolute inset-0 bg-[rgba(9,9,11,0.76)]',
+  selectModalCard: 'bg-[#18181b] rounded-xl border border-[#27272a] p-4 gap-3 shadow-md',
+  selectMenu: 'rounded-xl border border-[#3f3f46] bg-[#111114] overflow-hidden',
+  selectMenuItem: 'px-3.5 py-3 flex-row items-center justify-between border-b border-[#27272a]',
+  selectMenuItemLast: 'border-b-0',
+  selectMenuItemActive: 'bg-[#172338]',
+  selectMenuItemText: 'text-[#d4d4d8] text-sm font-medium',
+  selectMenuItemTextActive: 'text-[#e0f2fe]',
+
+  primaryBtn: 'mt-2 rounded-xl bg-[#2563eb] items-center justify-center py-3 px-3.5 w-full',
+  primaryBtnTight: 'rounded-xl bg-[#2563eb] items-center justify-center py-2.5 px-3.5',
+  primaryBtnText: 'text-white font-semibold text-sm',
+  secondaryBtn: 'mt-2 rounded-xl bg-[#27272a] border border-[#3f3f46] items-center justify-center py-3 px-3.5 w-full',
+  secondaryBtnTight: 'rounded-xl bg-[#27272a] border border-[#3f3f46] items-center justify-center py-2.5 px-3.5',
+  secondaryBtnText: 'text-[#f4f4f5] font-semibold text-sm',
+  actionRow: 'flex-row gap-2 mt-2',
+  actionRowInline: 'flex-row gap-2',
+  buttonContent: 'flex-row items-center justify-center gap-2',
+
+  inlineToggle: 'mt-1 rounded-xl bg-[#111114] border border-[#3f3f46] px-3.5 py-2.5',
+  inlineToggleText: 'text-[#d4d4d8] text-sm',
+
+  stackButtons: 'gap-2',
+  miniBtn: 'bg-[#27272a] border border-[#3f3f46] rounded-xl py-2 px-2.5',
+  miniBtnDanger: 'bg-[#3f1d1d] border border-[#7f1d1d] rounded-xl py-2 px-2.5',
+  miniBtnText: 'text-[#f4f4f5] font-semibold text-xs',
+
+  itemCard: 'rounded-xl bg-[#18181b] border border-[#27272a] overflow-hidden flex-row items-start shadow-md',
+  itemAccent: 'w-[4px] self-stretch',
+  itemThumbWrap: 'pt-4 pl-3.5',
+  itemThumbSmall: 'w-[46px] h-[46px] rounded-xl bg-[#111114]',
+  itemThumbPlaceholder: 'w-[46px] h-[46px] rounded-xl bg-[#111114] items-center justify-center border border-[#3f3f46]',
+  itemThumbPlaceholderText: 'text-xl',
+  itemMain: 'flex-1 p-4 gap-2',
+  itemTitle: 'text-[#fafafa] font-semibold text-base',
+  itemMeta: 'text-[#a1a1aa] text-[13px] leading-[18px]',
+  quickStatusRow: 'flex-row gap-2 mt-1',
+  quickStatusBtn: 'py-1.5 px-2.5 rounded-xl border border-[#3f3f46] bg-[#111114]',
+  quickStatusBtnActive: 'border-[#60a5fa] bg-[#1e293b]',
+  quickStatusBtnText: 'text-[#d4d4d8] font-semibold text-xs',
+  quickStatusBtnTextActive: 'text-[#e0f2fe]',
+
+  answerRow: 'mt-3 flex-row items-center gap-3',
+  answerYes: 'bg-[#14532d] border border-[#166534] rounded-xl px-4 py-3',
+  answerNo: 'bg-[#3f1d1d] border border-[#7f1d1d] rounded-xl px-4 py-3',
+  answerText: 'text-[#f8fafc] font-semibold',
+  answerRowWide: 'mt-4 gap-3',
+  checkupProgressTrack: 'w-full h-2 rounded-full bg-[#27272a] overflow-hidden mt-2 mb-3',
+  checkupProgressFill: 'h-full bg-[#2563eb]',
+  answerYesWide: 'bg-[#14532d] border border-[#166534] rounded-xl px-4 py-3.5 items-center',
+  answerNoWide: 'bg-[#3f1d1d] border border-[#7f1d1d] rounded-xl px-4 py-3.5 items-center',
+  answerStateDot: 'w-[10px] h-[10px] rounded-full bg-[#475569]',
+  answerStateDotOn: 'bg-[#22c55e]',
+  answerStateDotBad: 'bg-[#ef4444]',
+
+  statsRow: 'flex-row gap-2 flex-wrap mt-1',
+  statPill: 'rounded-xl py-1.5 px-2.5 border',
+  statPillCorrect: 'bg-[#14532d] border-[#166534]',
+  statPillBad: 'bg-[#3f1d1d] border-[#7f1d1d]',
+  statPillPending: 'bg-[#27272a] border-[#3f3f46]',
+  statPillText: 'text-[#f4f4f5] font-semibold text-xs',
+  packProgressLabel: 'text-[#d4d4d8] text-sm font-medium',
+  packProgressMeta: 'text-[#a1a1aa] text-xs font-semibold',
+  packProgressTrack: 'w-full h-2 rounded-full bg-[#27272a] overflow-hidden',
+  packProgressFill: 'h-full bg-[#22c55e]',
+
+  snapshotWrap: 'mt-3 border-t border-t-[#27272a] pt-3 gap-2',
+  snapshotRow: 'py-1.5',
+  snapshotTitle: 'text-[#f4f4f5] font-medium text-sm',
+
+  previewImage: 'w-full h-[160px] rounded-xl bg-[#111114]',
+  previewImageSmall: 'w-full h-[132px] rounded-xl bg-[#111114]',
+  imagePreviewBackdrop: 'flex-1 bg-[rgba(9,9,11,0.88)] items-center justify-center px-5',
+  imagePreviewCard: 'w-full max-w-[460px] rounded-xl border border-[#3f3f46] bg-[#18181b] p-5 gap-3 shadow-md',
+  imagePreviewImage: 'w-full h-[360px] rounded-xl bg-[#111114]',
+  imagePreviewHint: 'text-[#a1a1aa] text-center text-xs font-medium',
+
+  tabBarWrap: Platform.OS === 'ios'
+    ? 'absolute bottom-[6px] left-0 right-0 px-[10px] pb-[14px]'
+    : 'absolute bottom-[6px] left-0 right-0 px-[10px] pb-2',
+  tabBar: 'h-[72px] rounded-2xl bg-[#0b1220] border border-[#1f2937] flex-row items-center justify-between px-2',
+  tabGroupSide: 'flex-row w-[42%] justify-around items-center',
+  tabItem: 'items-center justify-center gap-[3px] min-w-[56px]',
+  tabAddBtn: 'w-[54px] h-[54px] rounded-full items-center justify-center bg-[#2563eb] -mt-6 border-2 border-[#0b1220]',
+  tabAddBtnDisabled: 'opacity-[0.45]',
+  tabLabel: 'text-[#94a3b8] text-[11px] font-semibold',
+  tabLabelActive: 'text-[#dbeafe]',
+
+  modalBackdrop: 'flex-1 bg-[rgba(9,9,11,0.8)] px-5',
+  dialogBackdrop: 'flex-1 bg-[rgba(9,9,11,0.8)] items-center justify-center px-6',
+  dialogCard: 'w-full bg-[#18181b] rounded-xl border border-[#27272a] p-6 gap-5 shadow-md',
+  dialogTitle: 'text-[#fafafa] font-bold text-lg',
+  dialogMessage: 'text-[#d4d4d8] leading-6 text-sm',
+  dialogButtonsRow: 'flex-row gap-3 justify-end flex-wrap',
+  dialogBtn: 'rounded-xl py-2.5 px-3.5 border min-w-[92px] items-center',
+  dialogBtnPrimary: 'bg-[#2563eb] border-[#2563eb]',
+  dialogBtnDanger: 'bg-[#7f1d1d] border-[#991b1b]',
+  dialogBtnNeutral: 'bg-[#27272a] border-[#3f3f46]',
+  dialogBtnText: 'text-[#f8fafc] font-semibold text-sm',
+  modalKeyboardWrap: 'flex-1 w-full items-center justify-center',
+  modalCard: 'w-[96%] max-h-[92%] bg-[#18181b] rounded-xl border border-[#27272a] p-6 gap-4 shadow-md',
+  modalScrollContent: {
+    paddingBottom: 20,
     gap: 12,
   },
-  sectionTitle: {
-    color: '#f1f5f9',
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  sectionRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: 10,
-  },
+  closeText: 'text-[#d4d4d8] font-semibold text-sm',
 
-  card: {
-    backgroundColor: '#111827',
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: '#1f2937',
-    padding: 12,
-    gap: 8,
-  },
-  cardActive: {
-    borderColor: '#60a5fa',
-  },
-  cardArchived: {
-    opacity: 0.72,
-    borderColor: '#374151',
-  },
-  cardSoft: {
-    backgroundColor: '#0f172a',
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: '#1e293b',
-    padding: 12,
-    gap: 10,
-  },
-  cardRow: {
-    flexDirection: 'row',
-    gap: 10,
-  },
-  cardTitle: {
-    color: '#f8fafc',
-    fontWeight: '700',
-    fontSize: 15,
-  },
-  cardMeta: {
-    color: '#94a3b8',
-    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,
-  },
-  label: {
-    color: '#cbd5e1',
-    fontWeight: '600',
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: '#243244',
-    borderRadius: 10,
-    backgroundColor: '#0b1220',
-    color: '#e5e7eb',
-    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',
-    flexWrap: 'wrap',
-    gap: 7,
-  },
-  chip: {
-    borderRadius: 999,
-    paddingHorizontal: 11,
-    paddingVertical: 7,
-    borderWidth: 1,
-    borderColor: '#273449',
-    backgroundColor: '#0b1220',
-  },
-  chipActive: {
-    borderColor: '#60a5fa',
-    backgroundColor: '#172338',
-  },
-  chipText: {
-    color: '#cbd5e1',
-    fontWeight: '600',
-    fontSize: 12,
-  },
-  chipTextActive: {
-    color: '#bfdbfe',
-  },
-
-  primaryBtn: {
-    marginTop: 4,
-    borderRadius: 10,
-    backgroundColor: '#2563eb',
-    alignItems: 'center',
-    paddingVertical: 11,
-    paddingHorizontal: 12,
-  },
-  primaryBtnTight: {
-    borderRadius: 10,
-    backgroundColor: '#2563eb',
-    alignItems: 'center',
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  primaryBtnText: {
-    color: '#fff',
-    fontWeight: '700',
-  },
-  secondaryBtn: {
-    marginTop: 4,
-    borderRadius: 10,
-    backgroundColor: '#1f2937',
-    alignItems: 'center',
-    paddingVertical: 11,
-    paddingHorizontal: 12,
-  },
-  secondaryBtnTight: {
-    borderRadius: 10,
-    backgroundColor: '#1f2937',
-    alignItems: 'center',
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  secondaryBtnText: {
-    color: '#dbeafe',
-    fontWeight: '700',
-  },
-  actionRow: {
-    flexDirection: 'row',
-    gap: 8,
-    marginTop: 4,
-  },
-
-  inlineToggle: {
-    marginTop: 2,
-  },
-  inlineToggleText: {
-    color: '#cbd5e1',
-  },
-
-  stackButtons: {
-    gap: 7,
-  },
-  miniBtn: {
-    backgroundColor: '#1e293b',
-    borderRadius: 8,
-    paddingVertical: 7,
-    paddingHorizontal: 10,
-  },
-  miniBtnDanger: {
-    backgroundColor: '#3b1d22',
-    borderRadius: 8,
-    paddingVertical: 7,
-    paddingHorizontal: 10,
-  },
-  miniBtnText: {
-    color: '#e2e8f0',
-    fontWeight: '700',
-    fontSize: 12,
-  },
-
-  itemCard: {
-    borderRadius: 16,
-    backgroundColor: '#111827',
-    borderWidth: 1,
-    borderColor: '#1f2937',
-    overflow: 'hidden',
-    flexDirection: 'row',
-  },
-  itemAccent: {
-    width: 5,
-  },
-  itemMain: {
-    flex: 1,
-    padding: 12,
-    gap: 8,
-  },
-  itemTitle: {
-    color: '#f8fafc',
-    fontWeight: '700',
-    fontSize: 15,
-  },
-  itemMeta: {
-    color: '#94a3b8',
-    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,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  answerYes: {
-    backgroundColor: '#163223',
-    borderWidth: 1,
-    borderColor: '#1f7a4e',
-    borderRadius: 9,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  answerNo: {
-    backgroundColor: '#3b1d22',
-    borderWidth: 1,
-    borderColor: '#7f1d1d',
-    borderRadius: 9,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  answerText: {
-    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,
-    borderRadius: 99,
-    backgroundColor: '#475569',
-  },
-  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,
-    borderTopWidth: 1,
-    borderTopColor: '#1e293b',
-    paddingTop: 8,
-    gap: 7,
-  },
-  snapshotRow: {
-    paddingVertical: 3,
-  },
-  snapshotTitle: {
-    color: '#e2e8f0',
-    fontWeight: '600',
-  },
-
-  previewImage: {
-    width: '100%',
-    height: 150,
-    borderRadius: 10,
-    backgroundColor: '#111827',
-  },
-  previewImageSmall: {
-    width: '100%',
-    height: 120,
-    borderRadius: 10,
-    backgroundColor: '#111827',
-  },
-
-  tabBarWrap: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    paddingHorizontal: 10,
-    paddingBottom: Platform.OS === 'ios' ? 14 : 8,
-    backgroundColor: 'transparent',
-  },
-  tabBar: {
-    height: TAB_BAR_HEIGHT,
-    borderRadius: 16,
-    backgroundColor: '#0b1220',
-    borderWidth: 1,
-    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,
-  },
-  tabAddBtn: {
-    width: 54,
-    height: 54,
-    borderRadius: 999,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#2563eb',
-    marginTop: -24,
-    borderWidth: 2,
-    borderColor: '#0b1220',
-  },
-  tabAddBtnDisabled: {
-    opacity: 0.45,
-  },
-  tabLabel: {
-    color: '#94a3b8',
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  tabLabelActive: {
-    color: '#dbeafe',
-  },
-
-  modalBackdrop: {
-    flex: 1,
-    backgroundColor: 'rgba(2,6,23,0.72)',
-    paddingHorizontal: 12,
-  },
-  dialogBackdrop: {
-    flex: 1,
-    backgroundColor: 'rgba(2,6,23,0.72)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 18,
-  },
-  dialogCard: {
-    width: '100%',
-    backgroundColor: '#0f172a',
-    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',
-  },
-});
+  dateModalBackdrop: 'flex-1 bg-[rgba(9,9,11,0.82)] justify-center px-5',
+  dateModalCard: 'bg-[#18181b] rounded-xl border border-[#27272a] p-6 gap-4 shadow-md',
+  calendarHeader: 'flex-row items-center justify-between',
+  calendarNavBtn: 'w-9 h-9 items-center justify-center rounded-xl bg-[#27272a]',
+  calendarNavText: 'text-[#e4e4e7] text-[20px] font-bold leading-[22px]',
+  calendarMonthText: 'text-[#fafafa] font-bold text-base',
+  calendarWeekRow: 'flex-row justify-between',
+  calendarWeekday: 'text-[#a1a1aa] w-[14.2%] text-center text-xs',
+  calendarGrid: 'flex-row flex-wrap',
+  calendarCell: 'w-[14.2%] h-[38px] items-center justify-center rounded-xl my-0.5',
+  calendarCellActive: 'bg-[#2563eb]',
+  calendarCellText: 'text-[#d4d4d8] font-medium',
+  calendarCellTextActive: 'text-white font-semibold',
+};

src/tabs/CheckupTab.js

@@ -1,34 +1,61 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 
 export default function CheckupTab({ selectedTrip, selectedTripItems, checkupStats, startCheckupFlow }) {
   return (
-    <View style={styles.section}>
-      <Text style={styles.sectionTitle}>Check-Up</Text>
+    <View className={styles.section}>
+      <View className={styles.sectionHeaderLeft}>
+        <View className={styles.sectionHeaderIconWrap}>
+          <Ionicons name="checkmark-circle-outline" size={16} color="#d4d4d8" />
+        </View>
+        <Text className={styles.sectionTitle}>Check-Up Session</Text>
+      </View>
 
-      {!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 ? (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>Select a trip first.</Text>
+        </View>
+      ) : null}
+      {selectedTrip && selectedTripItems.length === 0 ? (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>No items for this trip yet.</Text>
+        </View>
+      ) : 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 className={styles.cardSoft}>
+          <Text className={styles.cardTitle}>Run a check-up for {selectedTrip.name}</Text>
+          <Text className={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 className={styles.statsRow}>
+            <View className={cn(styles.statPill, styles.statPillCorrect)}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="checkmark-circle-outline" size={12} color="#f4f4f5" />
+                <Text className={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 className={cn(styles.statPill, styles.statPillBad)}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="close-circle-outline" size={12} color="#f4f4f5" />
+                <Text className={styles.statPillText}>Bad: {checkupStats.bad}</Text>
+              </View>
+            </View>
+            <View className={cn(styles.statPill, styles.statPillPending)}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="pause-circle-outline" size={12} color="#f4f4f5" />
+                <Text className={styles.statPillText}>Pending: {checkupStats.pending}</Text>
+              </View>
             </View>
           </View>
 
-          <Pressable style={styles.primaryBtn} onPress={startCheckupFlow}>
-            <Text style={styles.primaryBtnText}>Start Check-Up</Text>
+          <Pressable className={styles.primaryBtn} onPress={startCheckupFlow}>
+            <View className={styles.buttonContent}>
+              <Ionicons name="play-circle-outline" size={15} color="#ffffff" />
+              <Text className={styles.primaryBtnText}>Start Check-Up</Text>
+            </View>
           </Pressable>
         </View>
       ) : null}

src/tabs/HistoryTab.js

@@ -1,41 +1,75 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { styles } from '../styles';
+import { formatItemLabel, formatStatusLabel } from '../utils/labels';
 
 export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId, onDeleteCheckup }) {
   return (
-    <View style={styles.section}>
-      <Text style={styles.sectionTitle}>History</Text>
+    <View className={styles.section}>
+      <View className={styles.sectionHeaderLeft}>
+        <View className={styles.sectionHeaderIconWrap}>
+          <Ionicons name="time-outline" size={16} color="#d4d4d8" />
+        </View>
+        <Text className={styles.sectionTitle}>Check-Up History</Text>
+      </View>
 
-      {!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}
+      {!selectedTrip ? (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>Select a trip first.</Text>
+        </View>
+      ) : null}
+      {selectedTrip ? (
+        <View className={styles.sectionHeaderLeft}>
+          <Ionicons name="briefcase-outline" size={13} color="#93c5fd" />
+          <Text className={styles.tripHistoryLabel}>Check-ups for: {selectedTrip.name}</Text>
+        </View>
+      ) : null}
+      {selectedTrip && selectedTripCheckups.length === 0 ? (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>No check-ups saved yet.</Text>
+        </View>
+      ) : null}
 
       {selectedTripCheckups.map((checkup) => (
-        <View key={checkup.id} style={styles.cardSoft}>
+        <View key={checkup.id} className={styles.cardSoft}>
           <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}>
+            <View className={styles.sectionHeader}>
+              <View className={styles.sectionHeaderLeft}>
+                <Ionicons name="calendar-outline" size={14} color="#a1a1aa" />
+                <Text className={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
+              </View>
+              <Ionicons name={selectedCheckupId === checkup.id ? 'chevron-up' : 'chevron-down'} size={16} color="#a1a1aa" />
+            </View>
+            <View className={styles.sectionHeaderLeft}>
+              <Ionicons name="analytics-outline" size={13} color="#a1a1aa" />
+              <Text className={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>
+            </View>
+            <Text className={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'} · long hold to delete</Text>
           </Pressable>
 
           {selectedCheckupId === checkup.id ? (
-            <View style={styles.snapshotWrap}>
+            <View className={styles.snapshotWrap}>
               {checkup.snapshot.map((entry) => (
-                <View key={entry.itemId} style={styles.snapshotRow}>
-                  <Text style={styles.snapshotTitle}>{entry.name}</Text>
-                  <Text style={styles.cardMeta}>
-                    {entry.status} · {entry.placement}
-                    {entry.status === 'lent-to' && entry.lentTo ? ` · ${entry.lentTo}` : ''}
+                <View key={entry.itemId} className={styles.snapshotRow}>
+                  <View className={styles.sectionHeaderLeft}>
+                    <Ionicons name="cube-outline" size={12} color="#a1a1aa" />
+                    <Text className={styles.snapshotTitle}>{formatItemLabel(entry.name, entry.quantity)}</Text>
+                  </View>
+                  <View className={styles.sectionHeaderLeft}>
+                    <Ionicons name="pin-outline" size={12} color="#a1a1aa" />
+                    <Text className={styles.cardMeta}>
+                      {formatStatusLabel(entry.status, entry.lentTo)} · {entry.placement}
                     </Text>
                   </View>
+                </View>
               ))}
             </View>
           ) : null}

src/tabs/ItemsTab.js

@@ -1,8 +1,11 @@
 import React, { useMemo, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Image, Modal, Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import ItemCard from '../components/ItemCard';
 import { ITEM_STATUSES } from '../constants';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
+import { formatFilterLabel, formatStatusLabel } from '../utils/labels';
 
 export default function ItemsTab({
   selectedTrip,
@@ -15,75 +18,156 @@ export default function ItemsTab({
 }) {
   const [statusFilter, setStatusFilter] = useState('all');
   const [categoryFilter, setCategoryFilter] = useState('all');
+  const [locationFilter, setLocationFilter] = useState('all');
+  const [imagePreviewUri, setImagePreviewUri] = useState('');
 
   const categories = useMemo(
     () => Array.from(new Set(selectedTripItems.map((item) => item.category?.trim()).filter(Boolean))).sort((a, b) => a.localeCompare(b)),
     [selectedTripItems]
   );
 
+  const locations = useMemo(
+    () => Array.from(new Set(selectedTripItems.map((item) => item.placement?.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 itemLocation = item.placement?.trim() || '';
         const matchCategory = categoryFilter === 'all' || itemCategory === categoryFilter;
-        return matchStatus && matchCategory;
+        const matchLocation = locationFilter === 'all' || itemLocation === locationFilter;
+        return matchStatus && matchCategory && matchLocation;
       }),
-    [selectedTripItems, statusFilter, categoryFilter]
+    [selectedTripItems, statusFilter, categoryFilter, locationFilter]
   );
 
+  const packedItemCount = useMemo(
+    () => selectedTripItems.filter((item) => item.status === 'packed').length,
+    [selectedTripItems]
+  );
+  const packProgress = selectedTripItems.length ? packedItemCount / selectedTripItems.length : 0;
+
   const filterStatusOptions = ['all', ...ITEM_STATUSES];
   const filterCategoryOptions = ['all', ...categories];
+  const filterLocationOptions = ['all', ...locations];
 
   return (
-    <View style={styles.section}>
-      <View style={styles.sectionRow}>
-        <Text style={styles.sectionTitle}>Luggage Items</Text>
-        <Pressable style={styles.primaryBtnTight} onPress={openAddItemModal}>
-          <Text style={styles.primaryBtnText}>+ Add</Text>
+    <View className={styles.section}>
+      <View className={styles.sectionHeader}>
+        <View className={styles.sectionHeaderLeft}>
+          <View className={styles.sectionHeaderIconWrap}>
+            <Ionicons name="briefcase-outline" size={16} color="#d4d4d8" />
+          </View>
+          <Text className={styles.sectionTitle}>Packing List</Text>
+        </View>
+        <Pressable className={styles.primaryBtnTight} onPress={openAddItemModal}>
+          <View className={styles.buttonContent}>
+            <Ionicons name="add-circle-outline" size={14} color="#ffffff" />
+            <Text className={styles.primaryBtnText}>Add</Text>
+          </View>
         </Pressable>
       </View>
 
-      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
-      {selectedTripItems.length === 0 && selectedTrip ? <Text style={styles.muted}>No items yet.</Text> : null}
+      {!selectedTrip ? (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>Select a trip first.</Text>
+        </View>
+      ) : null}
+      {selectedTripItems.length === 0 && selectedTrip ? (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>No items yet.</Text>
+        </View>
+      ) : null}
+
+      {selectedTrip && selectedTripItems.length > 0 ? (
+        <View className={styles.cardSoft}>
+          <View className={styles.sectionHeader}>
+            <View className={styles.sectionHeaderLeft}>
+              <Ionicons name="checkmark-done-outline" size={16} color="#86efac" />
+              <Text className={styles.cardTitle}>Progress</Text>
+            </View>
+            <Text className={styles.packProgressMeta}>{Math.round(packProgress * 100)}%</Text>
+          </View>
+          <Text className={styles.packProgressLabel}>{packedItemCount}/{selectedTripItems.length} items packed</Text>
+          <View className={styles.packProgressTrack}>
+            <View className={styles.packProgressFill} style={{ width: `${Math.round(packProgress * 100)}%` }} />
+          </View>
+        </View>
+      ) : null}
 
       {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>
+        <View className={styles.cardSoft}>
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="flash-outline" size={16} color="#d4d4d8" />
+            <Text className={styles.cardTitle}>Quick Actions</Text>
+          </View>
+          <View className={styles.actionRow}>
+            <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'packed')}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="checkmark-circle-outline" size={14} color="#f4f4f5" />
+                <Text className={styles.secondaryBtnText}>Pack All ({filteredItems.length})</Text>
+              </View>
             </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 className={cn(styles.secondaryBtnTight, styles.flex)} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'unpacked')}>
+              <View className={styles.buttonContent}>
+                <Ionicons name="remove-circle-outline" size={14} color="#f4f4f5" />
+                <Text className={styles.secondaryBtnText}>Unpack All ({filteredItems.length})</Text>
+              </View>
             </Pressable>
           </View>
         </View>
       ) : null}
 
       {selectedTripItems.length > 0 ? (
-        <View style={styles.cardSoft}>
-          <Text style={styles.cardTitle}>Filters</Text>
+        <View className={styles.cardSoft}>
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="funnel-outline" size={16} color="#d4d4d8" />
+            <Text className={styles.cardTitle}>Filters</Text>
+          </View>
 
-          <Text style={styles.cardMeta}>Status</Text>
-          <View style={styles.chipGroup}>
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="radio-button-on-outline" size={12} color="#a1a1aa" />
+            <Text className={styles.cardMeta}>Status</Text>
+          </View>
+          <View className={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 key={status} className={cn(styles.chip, active && styles.chipActive)} onPress={() => setStatusFilter(status)}>
+                  <Text className={cn(styles.chipText, active && styles.chipTextActive)}>{status === 'all' ? formatFilterLabel(status) : formatStatusLabel(status)}</Text>
                 </Pressable>
               );
             })}
           </View>
 
-          <Text style={styles.cardMeta}>Category</Text>
-          <View style={styles.chipGroup}>
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="layers-outline" size={12} color="#a1a1aa" />
+            <Text className={styles.cardMeta}>Category</Text>
+          </View>
+          <View className={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 key={category} className={cn(styles.chip, active && styles.chipActive)} onPress={() => setCategoryFilter(category)}>
+                  <Text className={cn(styles.chipText, active && styles.chipTextActive)}>{formatFilterLabel(category)}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="pin-outline" size={12} color="#a1a1aa" />
+            <Text className={styles.cardMeta}>Location</Text>
+          </View>
+          <View className={styles.chipGroup}>
+            {filterLocationOptions.map((location) => {
+              const active = locationFilter === location;
+              return (
+                <Pressable key={location} className={cn(styles.chip, active && styles.chipActive)} onPress={() => setLocationFilter(location)}>
+                  <Text className={cn(styles.chipText, active && styles.chipTextActive)}>{formatFilterLabel(location)}</Text>
                 </Pressable>
               );
             })}
@@ -99,10 +183,24 @@ export default function ItemsTab({
           onDelete={deleteItem}
           onQuickPack={() => quickSetItemStatus(item.id, 'packed')}
           onQuickUnpack={() => quickSetItemStatus(item.id, 'unpacked')}
+          onOpenImage={(uri) => setImagePreviewUri(uri)}
         />
       ))}
 
-      {selectedTripItems.length > 0 && filteredItems.length === 0 ? <Text style={styles.muted}>No items match the current filters.</Text> : null}
+      {selectedTripItems.length > 0 && filteredItems.length === 0 ? (
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>No items match the current filters.</Text>
+        </View>
+      ) : null}
+
+      <Modal visible={!!imagePreviewUri} transparent animationType="fade">
+        <Pressable className={styles.imagePreviewBackdrop} onPress={() => setImagePreviewUri('')}>
+          <Pressable className={styles.imagePreviewCard} onPress={() => {}}>
+            {imagePreviewUri ? <Image source={{ uri: imagePreviewUri }} className={styles.imagePreviewImage} resizeMode="contain" /> : null}
+            <Text className={styles.imagePreviewHint}>Tap outside to close</Text>
+          </Pressable>
+        </Pressable>
+      </Modal>
     </View>
   );
 }

src/tabs/TripsTab.js

@@ -1,14 +1,19 @@
 import React, { useMemo, useState } from 'react';
-import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import DatePickerModal from '../components/DatePickerModal';
 import Field from '../components/Field';
 import { styles } from '../styles';
+import { cn } from '../utils/cn';
 
 function DateField({ label, value, onPress }) {
   return (
-    <Field label={label}>
-      <Pressable style={styles.dateInput} onPress={onPress}>
-        <Text style={styles.dateInputText}>{value}</Text>
+    <Field label={label} icon="calendar-outline">
+      <Pressable className={styles.dateInput} onPress={onPress}>
+        <View className={styles.sectionHeader}>
+          <Text className={styles.dateInputText}>{value}</Text>
+          <Ionicons name="chevron-forward" size={14} color="#a1a1aa" />
+        </View>
       </Pressable>
     </Field>
   );
@@ -19,19 +24,15 @@ const emptyEditForm = {
   location: '',
   startDate: '',
   endDate: '',
-  imageUri: '',
 };
 
 export default function TripsTab({
   tripForm,
   updateTripForm,
-  pickTripImage,
-  takeTripImage,
   templateTrip,
   createTrip,
   trips,
   selectedTripId,
-  chooseTrip,
   setTripAsTemplate,
   saveTripEdits,
   setTripArchived,
@@ -40,7 +41,9 @@ export default function TripsTab({
   defaultTemplateTripId,
   openDatePicker,
   activeTripItemCount,
+  activeTripPackedCount,
   activeTripCheckupCount,
+  openBackupModal,
 }) {
   const [createModalVisible, setCreateModalVisible] = useState(false);
   const [viewTripId, setViewTripId] = useState(null);
@@ -68,7 +71,6 @@ export default function TripsTab({
       location: trip.location || '',
       startDate: trip.startDate || '',
       endDate: trip.endDate || '',
-      imageUri: trip.imageUri || '',
     });
   }
 
@@ -83,14 +85,6 @@ export default function TripsTab({
     setEditMode(false);
   }
 
-  function pickViewTripImage() {
-    pickTripImage((uri) => updateEditForm('imageUri', uri));
-  }
-
-  function takeViewTripImage() {
-    takeTripImage((uri) => updateEditForm('imageUri', uri));
-  }
-
   function applyTemplateFromView() {
     if (!viewingTrip) return;
     setTripAsTemplate(viewingTrip.id);
@@ -114,68 +108,113 @@ export default function TripsTab({
   }
 
   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>
+    <View className={styles.section}>
+      <View className={styles.sectionHeaderLeft}>
+        <View className={styles.sectionHeaderIconWrap}>
+          <Ionicons name="airplane-outline" size={16} color="#d4d4d8" />
+        </View>
+        <Text className={styles.sectionTitle}>Trip Planner</Text>
+      </View>
+
+      <View className={styles.actionRow}>
+        <Pressable className={cn(styles.secondaryBtnTight, styles.flex)} onPress={openBackupModal}>
+          <View className={styles.buttonContent}>
+            <Ionicons name="save-outline" size={14} color="#f4f4f5" />
+            <Text className={styles.secondaryBtnText}>Backup</Text>
+          </View>
+        </Pressable>
+        <Pressable className={cn(styles.primaryBtnTight, styles.flex)} onPress={() => setCreateModalVisible(true)}>
+          <View className={styles.buttonContent}>
+            <Ionicons name="add-circle-outline" size={14} color="#ffffff" />
+            <Text className={styles.primaryBtnText}>New Trip</Text>
+          </View>
         </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 className={styles.tripHeroCard}>
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="location-outline" size={16} color="#d4d4d8" />
+            <Text className={styles.tripHeroTitle}>{activeTrip.name}</Text>
+          </View>
+          <Text className={styles.cardMeta}>{activeTrip.location || 'No location'} · {activeTrip.startDate} → {activeTrip.endDate}</Text>
+          <View className={styles.sectionHeaderLeft}>
+            <Ionicons name="layers-outline" size={13} color="#a1a1aa" />
+            <Text className={styles.cardMeta}>{activeTripItemCount} items · {activeTripCheckupCount} check-ups</Text>
+          </View>
+          <View className={styles.sectionHeader}>
+            <View className={styles.sectionHeaderLeft}>
+              <Ionicons name="checkmark-done-outline" size={13} color="#86efac" />
+              <Text className={styles.packProgressLabel}>{activeTripPackedCount}/{activeTripItemCount} items packed</Text>
+            </View>
+            <Text className={styles.packProgressMeta}>{activeTripItemCount ? Math.round((activeTripPackedCount / activeTripItemCount) * 100) : 0}%</Text>
+          </View>
+          <View className={styles.packProgressTrack}>
+            <View
+              className={styles.packProgressFill}
+              style={{ width: `${activeTripItemCount ? (activeTripPackedCount / activeTripItemCount) * 100 : 0}%` }}
+            />
+          </View>
         </View>
       ) : (
-        <Text style={styles.muted}>No active trips. Unarchive or create one.</Text>
+        <View className={styles.cardSoft}>
+          <Text className={styles.muted}>No active trips. Unarchive one or create a new trip.</Text>
+        </View>
       )}
 
-      <Text style={styles.tripListTitle}>Active Trips</Text>
+      <Text className={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 key={trip.id} className={cn(styles.card, selectedTripId === trip.id && styles.cardActive)}>
+            <View className={styles.cardRow}>
+              <View className={styles.flex}>
+                <Text className={styles.cardTitle}>{trip.name}</Text>
+                <Text className={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
+                {defaultTemplateTripId === trip.id ? (
+                  <View className={styles.sectionHeaderLeft}>
+                    <Ionicons name="bookmark-outline" size={12} color="#a1a1aa" />
+                    <Text className={styles.cardMeta}>Default template</Text>
+                  </View>
+                ) : null}
+              </View>
+              <View className={styles.stackButtons}>
+                <Pressable className={styles.miniBtn} onPress={() => openView(trip.id)}>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name="eye-outline" size={12} color="#f4f4f5" />
+                    <Text className={styles.miniBtnText}>View</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>
+          <Text className={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 key={trip.id} className={cn(styles.card, styles.cardArchived)}>
+                <View className={styles.cardRow}>
+                  <View className={styles.flex}>
+                    <Text className={styles.cardTitle}>{trip.name}</Text>
+                    <Text className={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
+                    <View className={styles.sectionHeaderLeft}>
+                      <Ionicons name="archive-outline" size={12} color="#a1a1aa" />
+                      <Text className={styles.cardMeta}>Archived</Text>
+                    </View>
+                  </View>
+                  <View className={styles.stackButtons}>
+                    <Pressable className={styles.miniBtn} onPress={() => openView(trip.id)}>
+                      <View className={styles.buttonContent}>
+                        <Ionicons name="eye-outline" size={12} color="#f4f4f5" />
+                        <Text className={styles.miniBtnText}>View</Text>
                       </View>
-                  <View style={styles.stackButtons}>
-                    <Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
-                      <Text style={styles.miniBtnText}>View</Text>
                     </Pressable>
                   </View>
                 </View>
@@ -185,40 +224,48 @@ export default function TripsTab({
       ) : 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>
+        <View className={styles.modalBackdrop}>
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} className={styles.modalKeyboardWrap}>
+            <View className={styles.modalCard}>
+              <View className={styles.sectionHeader}>
+                <View className={styles.sectionHeaderLeft}>
+                  <View className={styles.sectionHeaderIconWrap}>
+                    <Ionicons name="add-circle-outline" size={16} color="#d4d4d8" />
+                  </View>
+                  <Text className={styles.cardTitle}>Create Trip</Text>
+                </View>
+                <Pressable className={styles.secondaryBtnTight} onPress={() => setCreateModalVisible(false)}>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name="close" size={14} color="#f4f4f5" />
+                    <Text className={styles.secondaryBtnText}>Close</Text>
+                  </View>
                 </Pressable>
               </View>
 
               <ScrollView
                 keyboardShouldPersistTaps="handled"
                 keyboardDismissMode="interactive"
-                contentContainerStyle={{ paddingBottom: 12 }}
+                contentContainerStyle={styles.modalScrollContent}
                 showsVerticalScrollIndicator={false}
               >
-                <Field label="Name">
+                <Field label="Name" icon="text-outline">
                   <TextInput
-                    style={styles.input}
+                    className={styles.input}
                     value={tripForm.name}
                     onChangeText={(v) => updateTripForm('name', v)}
                     placeholder="Summer Weekend"
-                    placeholderTextColor="#6b7280"
+                    placeholderTextColor="#71717a"
                     onFocus={onInputFocus}
                   />
                 </Field>
 
-                <Field label="Location">
+                <Field label="Location" icon="location-outline">
                   <TextInput
-                    style={styles.input}
+                    className={styles.input}
                     value={tripForm.location}
                     onChangeText={(v) => updateTripForm('location', v)}
                     placeholder="Berlin"
-                    placeholderTextColor="#6b7280"
+                    placeholderTextColor="#71717a"
                     onFocus={onInputFocus}
                   />
                 </Field>
@@ -226,31 +273,27 @@ export default function TripsTab({
                 <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 className={styles.inlineToggle} onPress={() => updateTripForm('copyDefaultTemplate', !tripForm.copyDefaultTemplate)}>
+                    <View className={styles.sectionHeaderLeft}>
+                      <Ionicons name={tripForm.copyDefaultTemplate ? 'checkbox-outline' : 'square-outline'} size={16} color="#d4d4d8" />
+                      <Text className={styles.inlineToggleText}>Copy items from template ({templateTrip.name})</Text>
+                    </View>
                   </Pressable>
                 ) : null}
 
-                <Pressable style={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
-                  <Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
+                <Pressable className={styles.inlineToggle} onPress={() => updateTripForm('setAsDefaultTemplate', !tripForm.setAsDefaultTemplate)}>
+                  <View className={styles.sectionHeaderLeft}>
+                    <Ionicons name={tripForm.setAsDefaultTemplate ? 'checkbox-outline' : 'square-outline'} size={16} color="#d4d4d8" />
+                    <Text className={styles.inlineToggleText}>Set as default template</Text>
+                  </View>
                 </Pressable>
 
-                <Pressable style={styles.primaryBtn} onPress={submitCreateTrip}>
-                  <Text style={styles.primaryBtnText}>Create Trip</Text>
+                <Pressable className={styles.primaryBtn} onPress={submitCreateTrip}>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name="checkmark-circle-outline" size={15} color="#ffffff" />
+                    <Text className={styles.primaryBtnText}>Create Trip</Text>
+                  </View>
                 </Pressable>
               </ScrollView>
             </View>
@@ -259,18 +302,27 @@ export default function TripsTab({
       </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>
+        <View className={styles.modalBackdrop}>
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} className={styles.modalKeyboardWrap}>
+            <View className={styles.modalCard}>
+              <View className={styles.sectionHeader}>
+                <View className={styles.sectionHeaderLeft}>
+                  <View className={styles.sectionHeaderIconWrap}>
+                    <Ionicons name="compass-outline" size={16} color="#d4d4d8" />
+                  </View>
+                  <Text className={styles.cardTitle}>Trip Details</Text>
+                </View>
                 <Pressable
+                  className={styles.secondaryBtnTight}
                   onPress={() => {
                     setViewTripId(null);
                     setEditMode(false);
                   }}
                 >
-                  <Text style={styles.closeText}>Close</Text>
+                  <View className={styles.buttonContent}>
+                    <Ionicons name="close" size={14} color="#f4f4f5" />
+                    <Text className={styles.secondaryBtnText}>Close</Text>
+                  </View>
                 </Pressable>
               </View>
 
@@ -278,54 +330,77 @@ export default function TripsTab({
                 <ScrollView
                   keyboardShouldPersistTaps="handled"
                   keyboardDismissMode="interactive"
-                  contentContainerStyle={{ paddingBottom: 12 }}
+                  contentContainerStyle={styles.modalScrollContent}
                   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>
+                      <Text className={styles.tripHeroTitle}>{viewingTrip.name}</Text>
+                      <View className={styles.sectionHeaderLeft}>
+                        <Ionicons name="location-outline" size={13} color="#a1a1aa" />
+                        <Text className={styles.cardMeta}>{viewingTrip.location || 'No location'}</Text>
+                      </View>
+                      <View className={styles.sectionHeaderLeft}>
+                        <Ionicons name="calendar-outline" size={13} color="#a1a1aa" />
+                        <Text className={styles.cardMeta}>{viewingTrip.startDate} → {viewingTrip.endDate}</Text>
+                      </View>
+                      <View className={styles.sectionHeaderLeft}>
+                        <Ionicons name="bookmark-outline" size={13} color="#a1a1aa" />
+                        <Text className={styles.cardMeta}>{defaultTemplateTripId === viewingTrip.id ? 'Default template trip' : 'Not default template'}</Text>
+                      </View>
+                      <View className={styles.sectionHeaderLeft}>
+                        <Ionicons name="archive-outline" size={13} color="#a1a1aa" />
+                        <Text className={styles.cardMeta}>{viewingTrip.archived ? 'Archived' : 'Active'}</Text>
+                      </View>
 
-                      <Pressable style={styles.miniBtn} onPress={() => setEditMode(true)}>
-                        <Text style={styles.miniBtnText}>Edit Trip</Text>
+                      <Pressable className={styles.secondaryBtn} onPress={() => setEditMode(true)}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="create-outline" size={14} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>Edit Trip</Text>
+                        </View>
                       </Pressable>
 
-                      <Pressable style={styles.secondaryBtn} onPress={applyTemplateFromView}>
-                        <Text style={styles.secondaryBtnText}>Set as Template</Text>
+                      <Pressable className={styles.secondaryBtn} onPress={applyTemplateFromView}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="bookmark-outline" size={14} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>Set as Template</Text>
+                        </View>
                       </Pressable>
 
-                      <Pressable style={styles.secondaryBtn} onPress={toggleArchiveFromView}>
-                        <Text style={styles.secondaryBtnText}>{viewingTrip.archived ? 'Unarchive Trip' : 'Archive Trip'}</Text>
+                      <Pressable className={styles.secondaryBtn} onPress={toggleArchiveFromView}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name={viewingTrip.archived ? 'refresh-outline' : 'archive-outline'} size={14} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>{viewingTrip.archived ? 'Unarchive Trip' : 'Archive Trip'}</Text>
+                        </View>
                       </Pressable>
 
-                      <Pressable style={styles.miniBtnDanger} onPress={deleteFromView}>
-                        <Text style={styles.miniBtnText}>Delete Trip</Text>
+                      <Pressable className={styles.secondaryBtn} onPress={deleteFromView}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="trash-outline" size={14} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>Delete Trip</Text>
+                        </View>
                       </Pressable>
                     </>
                   ) : (
                     <>
-                      <Field label="Name">
+                      <Field label="Name" icon="text-outline">
                         <TextInput
-                          style={styles.input}
+                          className={styles.input}
                           value={editForm.name}
                           onChangeText={(v) => updateEditForm('name', v)}
                           placeholder="Trip name"
-                          placeholderTextColor="#6b7280"
+                          placeholderTextColor="#71717a"
                           onFocus={onInputFocus}
                         />
                       </Field>
 
-                      <Field label="Location">
+                      <Field label="Location" icon="location-outline">
                         <TextInput
-                          style={styles.input}
+                          className={styles.input}
                           value={editForm.location}
                           onChangeText={(v) => updateEditForm('location', v)}
                           placeholder="Location"
-                          placeholderTextColor="#6b7280"
+                          placeholderTextColor="#71717a"
                           onFocus={onInputFocus}
                         />
                       </Field>
@@ -333,22 +408,17 @@ export default function TripsTab({
                       <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>
+                      <Pressable className={styles.primaryBtn} onPress={saveEditFromView}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="checkmark-circle-outline" size={15} color="#ffffff" />
+                          <Text className={styles.primaryBtnText}>Save Trip</Text>
                         </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 className={styles.secondaryBtn} onPress={() => setEditMode(false)}>
+                        <View className={styles.buttonContent}>
+                          <Ionicons name="close-circle-outline" size={15} color="#f4f4f5" />
+                          <Text className={styles.secondaryBtnText}>Cancel Edit</Text>
+                        </View>
                       </Pressable>
                     </>
                   )}

src/uniwind-types.d.ts

@@ -0,0 +1,10 @@
+// NOTE: This file is generated by uniwind and it should not be edited manually.
+/// <reference types="uniwind/types" />
+
+declare module 'uniwind' {
+    export interface UniwindConfig {
+        themes: readonly ['light', 'dark']
+    }
+}
+
+export {}

src/utils/backup.js

@@ -0,0 +1,76 @@
+import { normalizeNameAndQuantity } from './labels';
+
+export function normalizeItemRecord(item = {}) {
+  const normalized = normalizeNameAndQuantity(item.name, item.quantity);
+  return {
+    ...item,
+    name: normalized.name,
+    quantity: normalized.quantity,
+  };
+}
+
+export function normalizeSnapshotRecord(entry = {}) {
+  const normalized = normalizeNameAndQuantity(entry.name, entry.quantity);
+  return {
+    ...entry,
+    name: normalized.name,
+    quantity: normalized.quantity,
+  };
+}
+
+export function normalizePayloadShape(payload = {}) {
+  const itemsByTrip = {};
+  Object.entries(payload.itemsByTrip || {}).forEach(([tripId, items]) => {
+    itemsByTrip[tripId] = (Array.isArray(items) ? items : []).map(normalizeItemRecord);
+  });
+
+  const checkupsByTrip = {};
+  Object.entries(payload.checkupsByTrip || {}).forEach(([tripId, checkups]) => {
+    checkupsByTrip[tripId] = (Array.isArray(checkups) ? checkups : []).map((checkup) => ({
+      ...checkup,
+      snapshot: (Array.isArray(checkup?.snapshot) ? checkup.snapshot : []).map(normalizeSnapshotRecord),
+    }));
+  });
+
+  return {
+    ...payload,
+    itemsByTrip,
+    checkupsByTrip,
+  };
+}
+
+export function stringifyBackupData(data) {
+  return JSON.stringify(
+    {
+      version: 2,
+      exportedAt: new Date().toISOString(),
+      data,
+    },
+    null,
+    2
+  );
+}
+
+export function parseBackupText(rawText = '') {
+  if (!`${rawText || ''}`.trim()) {
+    return { ok: false, error: 'missing-backup' };
+  }
+
+  let parsed;
+  try {
+    parsed = JSON.parse(rawText);
+  } catch {
+    return { ok: false, error: 'invalid-json' };
+  }
+
+  const payload = parsed?.data && typeof parsed.data === 'object' ? parsed.data : parsed;
+
+  if (!payload || typeof payload !== 'object' || !Array.isArray(payload.trips) || !payload.itemsByTrip || !payload.checkupsByTrip) {
+    return { ok: false, error: 'invalid-backup' };
+  }
+
+  return {
+    ok: true,
+    payload: normalizePayloadShape(payload),
+  };
+}

src/utils/backup.test.js

@@ -0,0 +1,90 @@
+import {
+  normalizeItemRecord,
+  normalizePayloadShape,
+  parseBackupText,
+  stringifyBackupData,
+} from './backup';
+
+describe('backup helpers', () => {
+  test('normalizeItemRecord migrates legacy quantity from item name', () => {
+    expect(
+      normalizeItemRecord({
+        id: 'item_1',
+        name: '3x socks',
+        quantity: 1,
+      })
+    ).toEqual({
+      id: 'item_1',
+      name: 'socks',
+      quantity: 3,
+    });
+  });
+
+  test('normalizePayloadShape normalizes nested items and snapshots', () => {
+    const normalized = normalizePayloadShape({
+      trips: [],
+      itemsByTrip: {
+        trip_1: [{ id: 'item_1', name: '2x cables', quantity: 1 }],
+      },
+      checkupsByTrip: {
+        trip_1: [
+          {
+            id: 'checkup_1',
+            snapshot: [{ itemId: 'item_1', name: '4x batteries', quantity: 1 }],
+          },
+        ],
+      },
+    });
+
+    expect(normalized.itemsByTrip.trip_1[0]).toEqual({
+      id: 'item_1',
+      name: 'cables',
+      quantity: 2,
+    });
+
+    expect(normalized.checkupsByTrip.trip_1[0].snapshot[0]).toEqual({
+      itemId: 'item_1',
+      name: 'batteries',
+      quantity: 4,
+    });
+  });
+
+  test('stringifyBackupData returns versioned backup payload', () => {
+    const json = stringifyBackupData({ trips: [] });
+    const parsed = JSON.parse(json);
+
+    expect(parsed.version).toBe(2);
+    expect(parsed.data).toEqual({ trips: [] });
+    expect(typeof parsed.exportedAt).toBe('string');
+  });
+
+  test('parseBackupText rejects missing and malformed payloads', () => {
+    expect(parseBackupText('')).toEqual({ ok: false, error: 'missing-backup' });
+    expect(parseBackupText('{bad')).toEqual({ ok: false, error: 'invalid-json' });
+    expect(parseBackupText('{"foo":1}')).toEqual({ ok: false, error: 'invalid-backup' });
+  });
+
+  test('parseBackupText accepts wrapped backup payloads and normalizes data', () => {
+    const wrapped = JSON.stringify({
+      version: 2,
+      data: {
+        trips: [{ id: 'trip_1' }],
+        itemsByTrip: {
+          trip_1: [{ id: 'item_1', name: '2x socks', quantity: 1 }],
+        },
+        checkupsByTrip: {
+          trip_1: [],
+        },
+      },
+    });
+
+    const result = parseBackupText(wrapped);
+
+    expect(result.ok).toBe(true);
+    expect(result.payload.itemsByTrip.trip_1[0]).toEqual({
+      id: 'item_1',
+      name: 'socks',
+      quantity: 2,
+    });
+  });
+});

src/utils/cn.js

@@ -0,0 +1,3 @@
+export function cn(...parts) {
+  return parts.filter(Boolean).join(' ');
+}

src/utils/cn.test.js

@@ -0,0 +1,15 @@
+import { cn } from './cn';
+
+describe('cn', () => {
+  test('joins truthy class parts', () => {
+    expect(cn('a', 'b', 'c')).toBe('a b c');
+  });
+
+  test('skips falsy parts', () => {
+    expect(cn('a', '', null, undefined, false, 'b')).toBe('a b');
+  });
+
+  test('returns empty string when nothing is provided', () => {
+    expect(cn()).toBe('');
+  });
+});

src/utils/date.test.js

@@ -0,0 +1,78 @@
+import { findActiveTripId, findBestTripId, findNextTripId, makeId, parseYMD, todayYMD } from './date';
+import { vi } from 'vitest';
+
+describe('date helpers', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 3, 18, 12, 0, 0));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  test('makeId returns a prefixed id with timestamp and random suffix', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.123456);
+    const id = makeId('item');
+
+    expect(id).toMatch(/^item_\d+_[a-z0-9]{6}$/);
+  });
+
+  test('todayYMD returns yyyy-mm-dd', () => {
+    expect(todayYMD()).toBe('2026-04-18');
+  });
+
+  test('parseYMD returns null for invalid format', () => {
+    expect(parseYMD('2026/04/18')).toBeNull();
+    expect(parseYMD('')).toBeNull();
+    expect(parseYMD(null)).toBeNull();
+  });
+
+  test('parseYMD returns date for valid format', () => {
+    const parsed = parseYMD('2026-04-18');
+
+    expect(parsed).toBeInstanceOf(Date);
+    expect(parsed?.getFullYear()).toBe(2026);
+  });
+
+  test('findActiveTripId picks a currently active trip', () => {
+    const trips = [
+      { id: 'past', startDate: '2026-04-01', endDate: '2026-04-10' },
+      { id: 'active', startDate: '2026-04-15', endDate: '2026-04-20' },
+      { id: 'future', startDate: '2026-05-01', endDate: '2026-05-05' },
+    ];
+
+    expect(findActiveTripId(trips)).toBe('active');
+  });
+
+  test('findNextTripId picks nearest upcoming trip', () => {
+    const trips = [
+      { id: 'next-later', startDate: '2026-05-10', endDate: '2026-05-12' },
+      { id: 'next-soon', startDate: '2026-04-20', endDate: '2026-04-22' },
+      { id: 'past', startDate: '2026-03-01', endDate: '2026-03-02' },
+    ];
+
+    expect(findNextTripId(trips)).toBe('next-soon');
+  });
+
+  test('findBestTripId prefers active trip, then next trip, then latest past trip', () => {
+    const activeTrips = [
+      { id: 'active', startDate: '2026-04-10', endDate: '2026-04-20' },
+      { id: 'future', startDate: '2026-04-25', endDate: '2026-04-27' },
+    ];
+    expect(findBestTripId(activeTrips)).toBe('active');
+
+    const nextTrips = [
+      { id: 'future-1', startDate: '2026-04-30', endDate: '2026-05-02' },
+      { id: 'future-2', startDate: '2026-04-22', endDate: '2026-04-23' },
+    ];
+    expect(findBestTripId(nextTrips)).toBe('future-2');
+
+    const pastTrips = [
+      { id: 'old', startDate: '2026-02-01', endDate: '2026-02-05' },
+      { id: 'recent', startDate: '2026-04-01', endDate: '2026-04-10' },
+    ];
+    expect(findBestTripId(pastTrips)).toBe('recent');
+  });
+});

src/utils/items.js

@@ -0,0 +1,27 @@
+import { ITEM_PLACEMENTS } from '../constants';
+
+export function toPlacementFormState(rawPlacement = 'suitcase') {
+  const placement = `${rawPlacement || ''}`.trim() || 'suitcase';
+  const hasPresetPlacement = ITEM_PLACEMENTS.includes(placement);
+
+  return {
+    placement: hasPresetPlacement ? placement : 'other',
+    placementCustom: hasPresetPlacement || placement === 'other' ? '' : placement,
+  };
+}
+
+export function resolvePlacementValue(placement = '', placementCustom = '') {
+  const normalizedPlacement = `${placement || ''}`.trim();
+  if (!normalizedPlacement) return '';
+
+  if (normalizedPlacement === 'other') {
+    return `${placementCustom || ''}`.trim();
+  }
+
+  return normalizedPlacement;
+}
+
+export function withPlacementCustomFallback(currentCustom = '', fallback = '') {
+  const custom = `${currentCustom || ''}`.trim();
+  return custom || `${fallback || ''}`.trim();
+}

src/utils/items.test.js

@@ -0,0 +1,33 @@
+import { resolvePlacementValue, toPlacementFormState, withPlacementCustomFallback } from './items';
+
+describe('items helpers', () => {
+  test('toPlacementFormState keeps known placements as-is', () => {
+    expect(toPlacementFormState('suitcase')).toEqual({
+      placement: 'suitcase',
+      placementCustom: '',
+    });
+  });
+
+  test('toPlacementFormState converts custom placements to other with value', () => {
+    expect(toPlacementFormState('hotel safe')).toEqual({
+      placement: 'other',
+      placementCustom: 'hotel safe',
+    });
+  });
+
+  test('resolvePlacementValue returns custom value when placement is other', () => {
+    expect(resolvePlacementValue('other', '  hotel safe  ')).toBe('hotel safe');
+  });
+
+  test('resolvePlacementValue returns direct placement when not other', () => {
+    expect(resolvePlacementValue('backpack', 'ignored')).toBe('backpack');
+  });
+
+  test('withPlacementCustomFallback prefers existing custom value', () => {
+    expect(withPlacementCustomFallback('closet shelf', 'hotel safe')).toBe('closet shelf');
+  });
+
+  test('withPlacementCustomFallback uses fallback when custom is empty', () => {
+    expect(withPlacementCustomFallback('  ', 'hotel safe')).toBe('hotel safe');
+  });
+});

src/utils/labels.js

@@ -0,0 +1,83 @@
+export function toTitleWords(value) {
+  if (!value) return '';
+  return value
+    .toString()
+    .split('-')
+    .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
+    .join(' ');
+}
+
+export function formatStatusLabel(status, lentTo = '') {
+  if (!status) return '';
+  if (status === 'lent-to') {
+    const name = lentTo?.trim();
+    return name ? `Lent To ${name}` : 'Lent To';
+  }
+  return toTitleWords(status);
+}
+
+export function formatFilterLabel(value) {
+  if (!value) return '';
+  if (value === 'all') return 'All';
+  return toTitleWords(value);
+}
+
+export function normalizeQuantity(value, fallback = 1) {
+  const parsed = Number.parseInt(`${value ?? ''}`, 10);
+  if (Number.isFinite(parsed) && parsed > 0) return parsed;
+  return fallback;
+}
+
+export function extractLegacyQuantityFromName(rawName = '') {
+  const name = `${rawName || ''}`.trim();
+  if (!name) {
+    return { matched: false, name: '', quantity: 1 };
+  }
+
+  let matched = name.match(/^(\d+)\s*[xX×]\s*(.+)$/);
+  if (matched) {
+    const quantity = normalizeQuantity(matched[1], 1);
+    const cleanName = (matched[2] || '').trim() || name;
+    return { matched: true, name: cleanName, quantity };
+  }
+
+  matched = name.match(/^(.+?)\s+(\d+)\s*[xX×]$/);
+  if (matched) {
+    const quantity = normalizeQuantity(matched[2], 1);
+    const cleanName = (matched[1] || '').trim() || name;
+    return { matched: true, name: cleanName, quantity };
+  }
+
+  return { matched: false, name, quantity: 1 };
+}
+
+export function normalizeNameAndQuantity(rawName = '', rawQuantity = null) {
+  const explicitQuantity = normalizeQuantity(rawQuantity, 0);
+  const legacy = extractLegacyQuantityFromName(rawName);
+
+  if (legacy.matched && explicitQuantity <= 1) {
+    return {
+      name: legacy.name,
+      quantity: normalizeQuantity(legacy.quantity, 1),
+    };
+  }
+
+  const quantity = explicitQuantity > 0 ? explicitQuantity : legacy.quantity;
+  const cleanName = `${rawName || ''}`.trim() || legacy.name;
+
+  return {
+    name: cleanName,
+    quantity: normalizeQuantity(quantity, 1),
+  };
+}
+
+export function formatItemLabel(name = '', quantity = 1) {
+  const cleanName = `${name || ''}`.trim();
+  const normalizedQuantity = normalizeQuantity(quantity, 1);
+
+  if (!cleanName) {
+    return normalizedQuantity > 1 ? `${normalizedQuantity}x item` : 'item';
+  }
+
+  return normalizedQuantity > 1 ? `${normalizedQuantity}x ${cleanName}` : cleanName;
+}

src/utils/labels.test.js

@@ -0,0 +1,72 @@
+import {
+  extractLegacyQuantityFromName,
+  formatFilterLabel,
+  formatItemLabel,
+  formatStatusLabel,
+  normalizeNameAndQuantity,
+  normalizeQuantity,
+  toTitleWords,
+} from './labels';
+
+describe('labels helpers', () => {
+  test('toTitleWords title-cases dashed words', () => {
+    expect(toTitleWords('left-behind')).toBe('Left Behind');
+  });
+
+  test('formatStatusLabel formats lent-to with optional person', () => {
+    expect(formatStatusLabel('lent-to', 'Alex')).toBe('Lent To Alex');
+    expect(formatStatusLabel('lent-to', '   ')).toBe('Lent To');
+    expect(formatStatusLabel('packed')).toBe('Packed');
+  });
+
+  test('formatFilterLabel handles all and regular values', () => {
+    expect(formatFilterLabel('all')).toBe('All');
+    expect(formatFilterLabel('with-user')).toBe('With User');
+  });
+
+  test('normalizeQuantity uses positive integers and fallback for invalid values', () => {
+    expect(normalizeQuantity(3)).toBe(3);
+    expect(normalizeQuantity('7')).toBe(7);
+    expect(normalizeQuantity('0')).toBe(1);
+    expect(normalizeQuantity('', 5)).toBe(5);
+  });
+
+  test('extractLegacyQuantityFromName parses leading and trailing quantity formats', () => {
+    expect(extractLegacyQuantityFromName('3x socks')).toEqual({
+      matched: true,
+      name: 'socks',
+      quantity: 3,
+    });
+
+    expect(extractLegacyQuantityFromName('socks 4x')).toEqual({
+      matched: true,
+      name: 'socks',
+      quantity: 4,
+    });
+
+    expect(extractLegacyQuantityFromName('2× chargers')).toEqual({
+      matched: true,
+      name: 'chargers',
+      quantity: 2,
+    });
+
+    expect(extractLegacyQuantityFromName('passport')).toEqual({
+      matched: false,
+      name: 'passport',
+      quantity: 1,
+    });
+  });
+
+  test('normalizeNameAndQuantity prioritizes explicit quantity but migrates legacy names', () => {
+    expect(normalizeNameAndQuantity('3x socks', null)).toEqual({ name: 'socks', quantity: 3 });
+    expect(normalizeNameAndQuantity('3x socks', 1)).toEqual({ name: 'socks', quantity: 3 });
+    expect(normalizeNameAndQuantity('3x socks', 5)).toEqual({ name: '3x socks', quantity: 5 });
+    expect(normalizeNameAndQuantity('socks', 2)).toEqual({ name: 'socks', quantity: 2 });
+  });
+
+  test('formatItemLabel includes quantity prefix when quantity > 1', () => {
+    expect(formatItemLabel('socks', 3)).toBe('3x socks');
+    expect(formatItemLabel('passport', 1)).toBe('passport');
+    expect(formatItemLabel('', 2)).toBe('2x item');
+  });
+});

src/utils/trips.js

@@ -0,0 +1,34 @@
+import { parseYMD } from './date';
+
+export function validateTripDraft({ name = '', startDate = '', endDate = '' }) {
+  if (!`${name || ''}`.trim()) {
+    return {
+      valid: false,
+      title: 'Missing name',
+      message: 'Trip name is required.',
+    };
+  }
+
+  const start = parseYMD(startDate);
+  const end = parseYMD(endDate);
+
+  if (!start || !end) {
+    return {
+      valid: false,
+      title: 'Invalid dates',
+      message: 'Please select valid trip dates.',
+    };
+  }
+
+  if (start > end) {
+    return {
+      valid: false,
+      title: 'Invalid dates',
+      message: 'Start date cannot be after end date.',
+    };
+  }
+
+  return {
+    valid: true,
+  };
+}

src/utils/trips.test.js

@@ -0,0 +1,57 @@
+import { validateTripDraft } from './trips';
+
+describe('trips helpers', () => {
+  test('returns missing-name validation error', () => {
+    expect(
+      validateTripDraft({
+        name: '  ',
+        startDate: '2026-04-20',
+        endDate: '2026-04-22',
+      })
+    ).toEqual({
+      valid: false,
+      title: 'Missing name',
+      message: 'Trip name is required.',
+    });
+  });
+
+  test('returns invalid-dates validation error for malformed dates', () => {
+    expect(
+      validateTripDraft({
+        name: 'Paris',
+        startDate: '2026/04/20',
+        endDate: '2026-04-22',
+      })
+    ).toEqual({
+      valid: false,
+      title: 'Invalid dates',
+      message: 'Please select valid trip dates.',
+    });
+  });
+
+  test('returns invalid-dates validation error when start is after end', () => {
+    expect(
+      validateTripDraft({
+        name: 'Paris',
+        startDate: '2026-05-01',
+        endDate: '2026-04-22',
+      })
+    ).toEqual({
+      valid: false,
+      title: 'Invalid dates',
+      message: 'Start date cannot be after end date.',
+    });
+  });
+
+  test('returns valid for a good trip draft', () => {
+    expect(
+      validateTripDraft({
+        name: 'Paris',
+        startDate: '2026-04-20',
+        endDate: '2026-04-22',
+      })
+    ).toEqual({
+      valid: true,
+    });
+  });
+});

vitest.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('vitest/config');
+
+module.exports = defineConfig({
+  test: {
+    environment: 'node',
+    globals: true,
+    include: ['src/utils/**/*.test.js'],
+  },
+});