Compare commits
19 Commits
luggage-li
...
luggage-li
| Author | SHA1 | Date | |
|---|---|---|---|
| 354a13e9a9 | |||
| 4018e97476 | |||
| 1e0eb7aee9 | |||
| a9ee91daf3 | |||
| 0e0ab4a059 | |||
| 89fd4c2f44 | |||
| fbdae66c9b | |||
| e8ffab355e | |||
| 2ec877362f | |||
| fb54db0619 | |||
| a93fec97dc | |||
| 86976d5c26 | |||
| 61b0a3d1fa | |||
| 3080c3affd | |||
| d33fecd657 | |||
| 2417d2d597 | |||
| f28ff010d7 | |||
| d40bd6a41c | |||
| 2e45261354 |
@@ -3,6 +3,10 @@ on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
paths:
|
||||
- '**/*.js'
|
||||
- '**/*.json'
|
||||
- '.gitea/workflows/**'
|
||||
|
||||
jobs:
|
||||
build-android:
|
||||
|
||||
@@ -3,6 +3,10 @@ on:
|
||||
push:
|
||||
branches-ignore:
|
||||
- main
|
||||
paths:
|
||||
- '**/*.js'
|
||||
- '**/*.json'
|
||||
- '.gitea/workflows/**'
|
||||
|
||||
jobs:
|
||||
validate:
|
||||
|
||||
49
TODO.md
49
TODO.md
@@ -1,41 +1,14 @@
|
||||
# TODO - Luggage List
|
||||
|
||||
## Stage
|
||||
Improving & Fixing Bugs (V3)
|
||||
This file was intentionally nuked.
|
||||
|
||||
## V2 Changes Requested
|
||||
- [x] Trip can be selected from everywhere (global trip picker)
|
||||
- [x] Fixed trip switching behavior for web by removing aggressive auto-reselect
|
||||
- [x] Removed trip image crop (gallery pick without editing)
|
||||
- [x] Item updates now happen in a modal
|
||||
- [x] Redesigned item cards
|
||||
- [x] Moved top nav to bottom and made it mobile-friendly
|
||||
- [x] Removed top title block
|
||||
- [x] Reworked check-up flow to yes/no checklist
|
||||
- [x] “No” now opens update modal for check-up-only changes
|
||||
- [x] Added optional toggle to also sync fix into trip item list
|
||||
- [x] Removed JSON export feature
|
||||
- [x] Improved keyboard behavior with KeyboardAvoidingView + scroll-safe forms
|
||||
- [x] Full UI redesign (dark-first minimalist with accent colors)
|
||||
- [x] Set new icon from `https://cdn.reversed.dev/pictures/yesnt.png`
|
||||
|
||||
## Validation
|
||||
- [x] `npm install`
|
||||
- [x] `npx expo export --platform web`
|
||||
|
||||
## Progress Log
|
||||
- [x] V1 prototype complete and shipped
|
||||
- [x] CI adjusted (no `eas init` in workflows)
|
||||
- [x] V2 redesign + behavior fixes implemented
|
||||
- [x] Removed legacy template src folder
|
||||
- [x] Rebuilt app into modular `src/` structure (tabs/components/modals/styles/utils)
|
||||
- [x] Fixed status-bar overlap with top spacing
|
||||
- [x] Replaced trip date text inputs with calendar modal picker
|
||||
- [x] Improved keyboard focus scrolling to focused input (not scroll-to-end)
|
||||
- [x] Reworked bottom nav to real icons + labels
|
||||
- [x] Clarified history as selected-trip check-up history
|
||||
- [x] Increased safe top inset to avoid status-bar overlap
|
||||
- [x] Added check-up stats (correct/bad/pending) and persisted per snapshot
|
||||
- [x] Extra UI polish pass (spacing, cards, hierarchy)
|
||||
- [x] Centered and enlarged edit/check-up modals to fully overlay nav
|
||||
- [x] Fixed modal keyboard glitching (stable centered keyboard-aware layout)
|
||||
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
|
||||
|
||||
11
app.json
11
app.json
@@ -34,6 +34,15 @@
|
||||
"eas": {
|
||||
"projectId": "1275f90e-33c6-4af1-942e-ca29a309f8c8"
|
||||
}
|
||||
}
|
||||
},
|
||||
"plugins": [
|
||||
[
|
||||
"expo-image-picker",
|
||||
{
|
||||
"photosPermission": "Allow Luggage List to access your photos for trip and item images.",
|
||||
"cameraPermission": "Allow Luggage List to use your camera to take trip and item photos."
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
657
src/AppRoot.js
657
src/AppRoot.js
@@ -1,19 +1,21 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Alert, KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, StatusBar as RNStatusBar, Text, View } from 'react-native';
|
||||
import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, StatusBar as RNStatusBar, Text, View } from 'react-native';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import BottomTab from './components/BottomTab';
|
||||
import TripPicker from './components/TripPicker';
|
||||
import DatePickerModal from './components/DatePickerModal';
|
||||
import AppDialogModal from './components/AppDialogModal';
|
||||
import ItemModal from './modals/ItemModal';
|
||||
import CheckupFixModal from './modals/CheckupFixModal';
|
||||
import CheckupFlowModal from './modals/CheckupFlowModal';
|
||||
import 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 { findActiveTripId, makeId, parseYMD, todayYMD } from './utils/date';
|
||||
import { findBestTripId, makeId, parseYMD, todayYMD } from './utils/date';
|
||||
import { styles } from './styles';
|
||||
|
||||
const emptyTripForm = () => ({
|
||||
@@ -21,7 +23,6 @@ const emptyTripForm = () => ({
|
||||
location: '',
|
||||
startDate: todayYMD(),
|
||||
endDate: todayYMD(),
|
||||
imageUri: '',
|
||||
copyDefaultTemplate: true,
|
||||
setAsDefaultTemplate: false,
|
||||
});
|
||||
@@ -35,12 +36,38 @@ const emptyItemForm = () => ({
|
||||
placement: 'suitcase',
|
||||
lentTo: '',
|
||||
imageUri: '',
|
||||
imageQuality: 'balanced',
|
||||
imageAllowCrop: false,
|
||||
});
|
||||
|
||||
const emptyCheckupNoForm = () => ({
|
||||
status: 'unpacked',
|
||||
placement: 'suitcase',
|
||||
lentTo: '',
|
||||
updateMasterList: false,
|
||||
});
|
||||
|
||||
function buildCheckupSession(items) {
|
||||
return items.map((item) => ({
|
||||
itemId: item.id,
|
||||
name: item.name,
|
||||
category: item.category,
|
||||
current: {
|
||||
status: item.status,
|
||||
placement: item.placement,
|
||||
lentTo: item.lentTo || '',
|
||||
},
|
||||
confirmed: false,
|
||||
result: 'pending',
|
||||
}));
|
||||
}
|
||||
|
||||
export default function AppRoot() {
|
||||
const scrollRef = useRef(null);
|
||||
|
||||
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);
|
||||
|
||||
@@ -52,20 +79,23 @@ export default function AppRoot() {
|
||||
const [itemForm, setItemForm] = useState(emptyItemForm());
|
||||
|
||||
const [checkupSession, setCheckupSession] = useState([]);
|
||||
const [checkupFixModalVisible, setCheckupFixModalVisible] = useState(false);
|
||||
const [checkupFixTargetId, setCheckupFixTargetId] = useState(null);
|
||||
const [checkupFixForm, setCheckupFixForm] = useState({
|
||||
status: 'unpacked',
|
||||
placement: 'suitcase',
|
||||
lentTo: '',
|
||||
updateMasterList: false,
|
||||
});
|
||||
const [checkupFlowVisible, setCheckupFlowVisible] = useState(false);
|
||||
const [checkupFlowIndex, setCheckupFlowIndex] = useState(0);
|
||||
const [checkupFlowMode, setCheckupFlowMode] = useState('question');
|
||||
const [checkupNoForm, setCheckupNoForm] = useState(emptyCheckupNoForm());
|
||||
|
||||
const [selectedCheckupId, setSelectedCheckupId] = useState(null);
|
||||
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(() => 1200 + Math.floor(Math.random() * 2801), []);
|
||||
const appReady = loaded && fakeLoadDone;
|
||||
|
||||
const selectedTrip = useMemo(() => data.trips.find((trip) => trip.id === selectedTripId) || null, [data.trips, selectedTripId]);
|
||||
const visibleTrips = useMemo(() => data.trips.filter((trip) => !trip.archived), [data.trips]);
|
||||
|
||||
const selectedTrip = useMemo(() => visibleTrips.find((trip) => trip.id === selectedTripId) || null, [visibleTrips, selectedTripId]);
|
||||
|
||||
const selectedTripItems = useMemo(() => {
|
||||
if (!selectedTripId) return [];
|
||||
@@ -90,6 +120,44 @@ export default function AppRoot() {
|
||||
return { total, correct, bad, pending };
|
||||
}, [checkupSession]);
|
||||
|
||||
const checkupCurrentEntry = useMemo(() => {
|
||||
if (!checkupFlowVisible) return null;
|
||||
if (checkupFlowIndex >= checkupSession.length) return null;
|
||||
return checkupSession[checkupFlowIndex] || null;
|
||||
}, [checkupFlowVisible, checkupFlowIndex, checkupSession]);
|
||||
|
||||
function closeDialog() {
|
||||
setDialogState((prev) => ({ ...prev, visible: false }));
|
||||
}
|
||||
|
||||
function showAlert(title, message) {
|
||||
setDialogState({
|
||||
visible: true,
|
||||
title,
|
||||
message,
|
||||
buttons: [{ text: 'OK', tone: 'primary', onPress: closeDialog }],
|
||||
});
|
||||
}
|
||||
|
||||
function showConfirm({ title, message, confirmText = 'Confirm', onConfirm, tone = 'danger' }) {
|
||||
setDialogState({
|
||||
visible: true,
|
||||
title,
|
||||
message,
|
||||
buttons: [
|
||||
{ text: 'Cancel', tone: 'neutral', onPress: closeDialog },
|
||||
{
|
||||
text: confirmText,
|
||||
tone,
|
||||
onPress: () => {
|
||||
closeDialog();
|
||||
if (typeof onConfirm === 'function') onConfirm();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
@@ -99,34 +167,54 @@ export default function AppRoot() {
|
||||
setData({ ...emptyData, ...parsed });
|
||||
}
|
||||
} catch {
|
||||
Alert.alert('Error', 'Could not load local data.');
|
||||
showAlert('Error', 'Could not load local data.');
|
||||
} finally {
|
||||
setLoaded(true);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const startedAt = Date.now();
|
||||
|
||||
const interval = setInterval(() => {
|
||||
const elapsed = Date.now() - startedAt;
|
||||
setFakeLoadProgress(Math.min(1, elapsed / fakeLoadTotalMs));
|
||||
}, 60);
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
setFakeLoadProgress(1);
|
||||
setFakeLoadDone(true);
|
||||
clearInterval(interval);
|
||||
}, fakeLoadTotalMs);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [fakeLoadTotalMs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loaded) return;
|
||||
AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data)).catch(() => {
|
||||
Alert.alert('Error', 'Could not save local data.');
|
||||
showAlert('Error', 'Could not save local data.');
|
||||
});
|
||||
}, [data, loaded]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loaded) return;
|
||||
if (!data.trips.length) {
|
||||
if (!visibleTrips.length) {
|
||||
setSelectedTripId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedTripId && data.trips.some((trip) => trip.id === selectedTripId)) {
|
||||
if (selectedTripId && visibleTrips.some((trip) => trip.id === selectedTripId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activeTripId = findActiveTripId(data.trips);
|
||||
setSelectedTripId(activeTripId || data.trips[0].id);
|
||||
}, [data.trips, selectedTripId, loaded]);
|
||||
const bestTripId = findBestTripId(visibleTrips);
|
||||
setSelectedTripId(bestTripId || visibleTrips[0].id);
|
||||
}, [visibleTrips, selectedTripId, loaded]);
|
||||
|
||||
useEffect(() => {
|
||||
if (tab !== 'checkup') return;
|
||||
@@ -151,17 +239,34 @@ 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) {
|
||||
Alert.alert('Permission needed', 'Allow gallery access to select images.');
|
||||
showAlert('Permission needed', 'Allow gallery access to select images.');
|
||||
return;
|
||||
}
|
||||
|
||||
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) {
|
||||
onPicked(result.assets[0].uri);
|
||||
}
|
||||
}
|
||||
|
||||
async function takeImage(onPicked, options = {}) {
|
||||
const perm = await ImagePicker.requestCameraPermissionsAsync();
|
||||
if (!perm.granted) {
|
||||
showAlert('Permission needed', 'Allow camera access to take photos.');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await ImagePicker.launchCameraAsync({
|
||||
allowsEditing: !!options.allowCrop,
|
||||
quality: typeof options.quality === 'number' ? options.quality : 0.85,
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets?.[0]?.uri) {
|
||||
@@ -171,21 +276,21 @@ export default function AppRoot() {
|
||||
|
||||
function createTrip() {
|
||||
if (!tripForm.name.trim()) {
|
||||
Alert.alert('Missing name', 'Trip name is required.');
|
||||
return;
|
||||
showAlert('Missing name', 'Trip name is required.');
|
||||
return false;
|
||||
}
|
||||
|
||||
const start = parseYMD(tripForm.startDate);
|
||||
const end = parseYMD(tripForm.endDate);
|
||||
|
||||
if (!start || !end) {
|
||||
Alert.alert('Invalid dates', 'Please select valid trip dates.');
|
||||
return;
|
||||
showAlert('Invalid dates', 'Please select valid trip dates.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (start > end) {
|
||||
Alert.alert('Invalid dates', 'Start date cannot be after end date.');
|
||||
return;
|
||||
showAlert('Invalid dates', 'Start date cannot be after end date.');
|
||||
return false;
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
@@ -202,7 +307,8 @@ export default function AppRoot() {
|
||||
location: tripForm.location.trim(),
|
||||
startDate: tripForm.startDate,
|
||||
endDate: tripForm.endDate,
|
||||
imageUri: tripForm.imageUri,
|
||||
imageUri: '',
|
||||
archived: false,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
},
|
||||
@@ -230,19 +336,75 @@ export default function AppRoot() {
|
||||
|
||||
setSelectedTripId(tripId);
|
||||
setTripForm(emptyTripForm());
|
||||
return true;
|
||||
}
|
||||
|
||||
function setTripAsTemplate(tripId) {
|
||||
setData((prev) => ({ ...prev, defaultTemplateTripId: tripId }));
|
||||
}
|
||||
|
||||
function saveTripEdits(tripId, patch) {
|
||||
if (!patch.name.trim()) {
|
||||
showAlert('Missing name', 'Trip name is required.');
|
||||
return false;
|
||||
}
|
||||
|
||||
const start = parseYMD(patch.startDate);
|
||||
const end = parseYMD(patch.endDate);
|
||||
|
||||
if (!start || !end) {
|
||||
showAlert('Invalid dates', 'Please select valid trip dates.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (start > end) {
|
||||
showAlert('Invalid dates', 'Start date cannot be after end date.');
|
||||
return false;
|
||||
}
|
||||
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
trips: prev.trips.map((trip) =>
|
||||
trip.id === tripId
|
||||
? {
|
||||
...trip,
|
||||
name: patch.name.trim(),
|
||||
location: patch.location.trim(),
|
||||
startDate: patch.startDate,
|
||||
endDate: patch.endDate,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: trip
|
||||
),
|
||||
}));
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function setTripArchived(tripId, archived) {
|
||||
setData((prev) => ({
|
||||
...prev,
|
||||
trips: prev.trips.map((trip) =>
|
||||
trip.id === tripId
|
||||
? {
|
||||
...trip,
|
||||
archived,
|
||||
archivedAt: archived ? Date.now() : null,
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: trip
|
||||
),
|
||||
defaultTemplateTripId: archived && prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
|
||||
}));
|
||||
}
|
||||
|
||||
function deleteTrip(tripId) {
|
||||
Alert.alert('Delete trip?', 'Trip items and check-up history will also be deleted.', [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
showConfirm({
|
||||
title: 'Delete trip?',
|
||||
message: 'Trip items and check-up history will also be deleted.',
|
||||
confirmText: 'Delete',
|
||||
tone: 'danger',
|
||||
onConfirm: () => {
|
||||
setData((prev) => {
|
||||
const trips = prev.trips.filter((trip) => trip.id !== tripId);
|
||||
const itemsByTrip = { ...prev.itemsByTrip };
|
||||
@@ -259,8 +421,7 @@ export default function AppRoot() {
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
]);
|
||||
});
|
||||
}
|
||||
|
||||
function openAddItemModal() {
|
||||
@@ -278,18 +439,20 @@ export default function AppRoot() {
|
||||
placement: item.placement || 'suitcase',
|
||||
lentTo: item.lentTo || '',
|
||||
imageUri: item.imageUri || '',
|
||||
imageQuality: item.imageQuality || 'balanced',
|
||||
imageAllowCrop: !!item.imageAllowCrop,
|
||||
});
|
||||
setItemModalVisible(true);
|
||||
}
|
||||
|
||||
function saveItemFromModal() {
|
||||
if (!selectedTripId) {
|
||||
Alert.alert('No trip selected', 'Please select or create a trip first.');
|
||||
showAlert('No trip selected', 'Please select or create a trip first.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!itemForm.name.trim()) {
|
||||
Alert.alert('Missing name', 'Item name is required.');
|
||||
showAlert('Missing name', 'Item name is required.');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -307,6 +470,8 @@ export default function AppRoot() {
|
||||
placement: itemForm.placement,
|
||||
lentTo: itemForm.status === 'lent-to' ? itemForm.lentTo.trim() : '',
|
||||
imageUri: itemForm.imageUri,
|
||||
imageQuality: itemForm.imageQuality,
|
||||
imageAllowCrop: itemForm.imageAllowCrop,
|
||||
createdAt: existingCreatedAt,
|
||||
updatedAt: now,
|
||||
};
|
||||
@@ -341,72 +506,8 @@ export default function AppRoot() {
|
||||
});
|
||||
}
|
||||
|
||||
function createFreshCheckupSession() {
|
||||
if (!selectedTripItems.length) {
|
||||
setCheckupSession([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const fresh = selectedTripItems.map((item) => ({
|
||||
itemId: item.id,
|
||||
name: item.name,
|
||||
category: item.category,
|
||||
current: {
|
||||
status: item.status,
|
||||
placement: item.placement,
|
||||
lentTo: item.lentTo || '',
|
||||
},
|
||||
confirmed: false,
|
||||
result: 'pending',
|
||||
}));
|
||||
|
||||
setCheckupSession(fresh);
|
||||
}
|
||||
|
||||
function answerCheckupYes(itemId) {
|
||||
setCheckupSession((prev) =>
|
||||
prev.map((entry) => (entry.itemId === itemId ? { ...entry, confirmed: true, result: 'correct' } : entry))
|
||||
);
|
||||
}
|
||||
|
||||
function openFixModal(itemId) {
|
||||
const entry = checkupSession.find((x) => x.itemId === itemId);
|
||||
if (!entry) return;
|
||||
|
||||
setCheckupFixTargetId(itemId);
|
||||
setCheckupFixForm({
|
||||
status: entry.current.status || 'unpacked',
|
||||
placement: entry.current.placement || 'suitcase',
|
||||
lentTo: entry.current.lentTo || '',
|
||||
updateMasterList: false,
|
||||
});
|
||||
setCheckupFixModalVisible(true);
|
||||
}
|
||||
|
||||
function saveFixModal() {
|
||||
if (!checkupFixTargetId) return;
|
||||
|
||||
const targetId = checkupFixTargetId;
|
||||
const patch = {
|
||||
status: checkupFixForm.status,
|
||||
placement: checkupFixForm.placement,
|
||||
lentTo: checkupFixForm.status === 'lent-to' ? checkupFixForm.lentTo.trim() : '',
|
||||
};
|
||||
|
||||
setCheckupSession((prev) =>
|
||||
prev.map((entry) =>
|
||||
entry.itemId === targetId
|
||||
? {
|
||||
...entry,
|
||||
current: patch,
|
||||
confirmed: true,
|
||||
result: 'bad',
|
||||
}
|
||||
: entry
|
||||
)
|
||||
);
|
||||
|
||||
if (checkupFixForm.updateMasterList && selectedTripId) {
|
||||
function quickSetItemStatus(itemId, status) {
|
||||
if (!selectedTripId) return;
|
||||
setData((prev) => {
|
||||
const items = prev.itemsByTrip[selectedTripId] || [];
|
||||
return {
|
||||
@@ -414,7 +515,182 @@ export default function AppRoot() {
|
||||
itemsByTrip: {
|
||||
...prev.itemsByTrip,
|
||||
[selectedTripId]: items.map((item) =>
|
||||
item.id === targetId
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
status,
|
||||
lentTo: status === 'lent-to' ? item.lentTo : '',
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function bulkSetItemStatus(itemIds, status) {
|
||||
if (!selectedTripId || !itemIds.length) return;
|
||||
const idSet = new Set(itemIds);
|
||||
setData((prev) => {
|
||||
const items = prev.itemsByTrip[selectedTripId] || [];
|
||||
return {
|
||||
...prev,
|
||||
itemsByTrip: {
|
||||
...prev.itemsByTrip,
|
||||
[selectedTripId]: items.map((item) =>
|
||||
idSet.has(item.id)
|
||||
? {
|
||||
...item,
|
||||
status,
|
||||
lentTo: status === 'lent-to' ? item.lentTo : '',
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function deleteCheckup(checkupId) {
|
||||
if (!selectedTripId) return;
|
||||
|
||||
showConfirm({
|
||||
title: 'Delete check-up?',
|
||||
message: 'This snapshot will be removed from history.',
|
||||
confirmText: 'Delete',
|
||||
tone: 'danger',
|
||||
onConfirm: () => {
|
||||
setData((prev) => {
|
||||
const existing = prev.checkupsByTrip[selectedTripId] || [];
|
||||
return {
|
||||
...prev,
|
||||
checkupsByTrip: {
|
||||
...prev.checkupsByTrip,
|
||||
[selectedTripId]: existing.filter((checkup) => checkup.id !== checkupId),
|
||||
},
|
||||
};
|
||||
});
|
||||
setSelectedCheckupId((prev) => (prev === checkupId ? null : prev));
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function createFreshCheckupSession() {
|
||||
if (!selectedTripItems.length) {
|
||||
setCheckupSession([]);
|
||||
return;
|
||||
}
|
||||
setCheckupSession(buildCheckupSession(selectedTripItems));
|
||||
}
|
||||
|
||||
function startCheckupFlow() {
|
||||
if (!selectedTripId) {
|
||||
showAlert('No trip selected', 'Please select a trip first.');
|
||||
return;
|
||||
}
|
||||
if (!selectedTripItems.length) {
|
||||
showAlert('No items', 'Add items before starting a check-up.');
|
||||
return;
|
||||
}
|
||||
|
||||
const fresh = buildCheckupSession(selectedTripItems);
|
||||
setCheckupSession(fresh);
|
||||
setCheckupFlowIndex(0);
|
||||
setCheckupFlowMode('question');
|
||||
setCheckupNoForm(emptyCheckupNoForm());
|
||||
setCheckupFlowVisible(true);
|
||||
}
|
||||
|
||||
function closeCheckupFlow() {
|
||||
setCheckupFlowVisible(false);
|
||||
setCheckupFlowMode('question');
|
||||
setCheckupNoForm(emptyCheckupNoForm());
|
||||
}
|
||||
|
||||
function goNextInCheckup() {
|
||||
setCheckupFlowIndex((prev) => prev + 1);
|
||||
setCheckupFlowMode('question');
|
||||
setCheckupNoForm(emptyCheckupNoForm());
|
||||
}
|
||||
|
||||
function 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;
|
||||
|
||||
setCheckupSession((prev) =>
|
||||
prev.map((x) => (x.itemId === entry.itemId ? { ...x, confirmed: true, result: 'correct' } : x))
|
||||
);
|
||||
goNextInCheckup();
|
||||
}
|
||||
|
||||
function openCurrentCheckupNo() {
|
||||
const entry = checkupCurrentEntry;
|
||||
if (!entry) return;
|
||||
setCheckupNoForm({
|
||||
status: entry.current.status || 'unpacked',
|
||||
placement: entry.current.placement || 'suitcase',
|
||||
lentTo: entry.current.lentTo || '',
|
||||
updateMasterList: false,
|
||||
});
|
||||
setCheckupFlowMode('edit');
|
||||
}
|
||||
|
||||
function saveCurrentCheckupNo() {
|
||||
const entry = checkupCurrentEntry;
|
||||
if (!entry) return;
|
||||
|
||||
const patch = {
|
||||
status: checkupNoForm.status,
|
||||
placement: checkupNoForm.placement,
|
||||
lentTo: checkupNoForm.status === 'lent-to' ? checkupNoForm.lentTo.trim() : '',
|
||||
};
|
||||
|
||||
setCheckupSession((prev) =>
|
||||
prev.map((x) =>
|
||||
x.itemId === entry.itemId
|
||||
? {
|
||||
...x,
|
||||
current: patch,
|
||||
confirmed: true,
|
||||
result: 'bad',
|
||||
}
|
||||
: x
|
||||
)
|
||||
);
|
||||
|
||||
if (checkupNoForm.updateMasterList && selectedTripId) {
|
||||
setData((prev) => {
|
||||
const items = prev.itemsByTrip[selectedTripId] || [];
|
||||
return {
|
||||
...prev,
|
||||
itemsByTrip: {
|
||||
...prev.itemsByTrip,
|
||||
[selectedTripId]: items.map((item) =>
|
||||
item.id === entry.itemId
|
||||
? {
|
||||
...item,
|
||||
status: patch.status,
|
||||
@@ -429,28 +705,27 @@ export default function AppRoot() {
|
||||
});
|
||||
}
|
||||
|
||||
setCheckupFixModalVisible(false);
|
||||
setCheckupFixTargetId(null);
|
||||
goNextInCheckup();
|
||||
}
|
||||
|
||||
function saveCheckup() {
|
||||
function saveCheckupSnapshot(sessionToSave) {
|
||||
if (!selectedTripId) {
|
||||
Alert.alert('No trip selected', 'Please select a trip first.');
|
||||
return;
|
||||
showAlert('No trip selected', 'Please select a trip first.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!checkupSession.length) {
|
||||
Alert.alert('No items', 'Add items before creating a check-up.');
|
||||
return;
|
||||
if (!sessionToSave.length) {
|
||||
showAlert('No items', 'Add items before creating a check-up.');
|
||||
return false;
|
||||
}
|
||||
|
||||
const pending = checkupSession.filter((entry) => !entry.confirmed).length;
|
||||
const pending = sessionToSave.filter((entry) => !entry.confirmed).length;
|
||||
if (pending > 0) {
|
||||
Alert.alert('Incomplete', `Please confirm all items first (${pending} remaining).`);
|
||||
return;
|
||||
showAlert('Incomplete', `Please confirm all items first (${pending} remaining).`);
|
||||
return false;
|
||||
}
|
||||
|
||||
const snapshot = checkupSession.map((entry) => ({
|
||||
const snapshot = sessionToSave.map((entry) => ({
|
||||
itemId: entry.itemId,
|
||||
name: entry.name,
|
||||
category: entry.category,
|
||||
@@ -482,7 +757,15 @@ export default function AppRoot() {
|
||||
};
|
||||
});
|
||||
|
||||
Alert.alert('Saved', 'Check-up snapshot saved.');
|
||||
return true;
|
||||
}
|
||||
|
||||
function finishCheckupFlow() {
|
||||
const ok = saveCheckupSnapshot(checkupSession);
|
||||
if (!ok) return;
|
||||
|
||||
showAlert('Saved', 'Check-up snapshot saved.');
|
||||
closeCheckupFlow();
|
||||
createFreshCheckupSession();
|
||||
}
|
||||
|
||||
@@ -497,12 +780,77 @@ export default function AppRoot() {
|
||||
}, 80);
|
||||
}
|
||||
|
||||
if (!loaded) {
|
||||
function openQuickAddItemFromNav() {
|
||||
if (!selectedTripId) {
|
||||
showAlert('No trip selected', 'Please select or create a trip first.');
|
||||
return;
|
||||
}
|
||||
openAddItemModal();
|
||||
}
|
||||
|
||||
function buildBackupJson() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
version: 2,
|
||||
exportedAt: new Date().toISOString(),
|
||||
data,
|
||||
},
|
||||
null,
|
||||
2
|
||||
);
|
||||
}
|
||||
|
||||
function openBackupModal() {
|
||||
setBackupImportText('');
|
||||
setBackupModalVisible(true);
|
||||
}
|
||||
|
||||
function applyBackupImport() {
|
||||
if (!backupImportText.trim()) {
|
||||
showAlert('Missing backup', 'Paste backup JSON first.');
|
||||
return;
|
||||
}
|
||||
|
||||
let parsed;
|
||||
try {
|
||||
parsed = JSON.parse(backupImportText);
|
||||
} catch {
|
||||
showAlert('Invalid JSON', 'Backup JSON could not be parsed.');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = parsed?.data && typeof parsed.data === 'object' ? parsed.data : parsed;
|
||||
|
||||
if (!payload || typeof payload !== 'object' || !Array.isArray(payload.trips) || !payload.itemsByTrip || !payload.checkupsByTrip) {
|
||||
showAlert('Invalid backup', 'Backup format is not supported.');
|
||||
return;
|
||||
}
|
||||
|
||||
showConfirm({
|
||||
title: 'Import backup?',
|
||||
message: 'This will replace all current local data.',
|
||||
confirmText: 'Import',
|
||||
tone: 'danger',
|
||||
onConfirm: () => {
|
||||
setData({ ...emptyData, ...payload });
|
||||
setBackupModalVisible(false);
|
||||
setBackupImportText('');
|
||||
showAlert('Imported', 'Backup data was restored.');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!appReady) {
|
||||
return (
|
||||
<SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
|
||||
<StatusBar style="light" translucent={false} />
|
||||
<View style={styles.center}>
|
||||
<Text style={styles.muted}>Loading local data...</Text>
|
||||
<Text style={styles.loadingEmoji}>🧳</Text>
|
||||
<Text style={styles.loadingTitle}>Packing your list...</Text>
|
||||
<View style={styles.loadingBarTrack}>
|
||||
<View style={[styles.loadingBarFill, { width: `${Math.round(fakeLoadProgress * 100)}%` }]} />
|
||||
</View>
|
||||
<Text style={styles.muted}>{Math.round(fakeLoadProgress * 100)}%</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
@@ -519,23 +867,26 @@ export default function AppRoot() {
|
||||
keyboardShouldPersistTaps="handled"
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<TripPicker trips={data.trips} selectedTripId={selectedTripId} onChooseTrip={setSelectedTripId} />
|
||||
<TripPicker trips={visibleTrips} selectedTripId={selectedTripId} onChooseTrip={setSelectedTripId} />
|
||||
|
||||
{tab === 'trips' && (
|
||||
<TripsTab
|
||||
tripForm={tripForm}
|
||||
updateTripForm={updateTripForm}
|
||||
pickTripImage={() => pickImage((uri) => updateTripForm('imageUri', uri))}
|
||||
templateTrip={templateTrip}
|
||||
createTrip={createTrip}
|
||||
trips={data.trips}
|
||||
selectedTripId={selectedTripId}
|
||||
chooseTrip={setSelectedTripId}
|
||||
setTripAsTemplate={setTripAsTemplate}
|
||||
saveTripEdits={saveTripEdits}
|
||||
setTripArchived={setTripArchived}
|
||||
deleteTrip={deleteTrip}
|
||||
onInputFocus={onInputFocus}
|
||||
defaultTemplateTripId={data.defaultTemplateTripId}
|
||||
openDatePicker={openDatePicker}
|
||||
activeTripItemCount={selectedTripItems.length}
|
||||
activeTripCheckupCount={selectedTripCheckups.length}
|
||||
openBackupModal={openBackupModal}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -546,17 +897,17 @@ export default function AppRoot() {
|
||||
openAddItemModal={openAddItemModal}
|
||||
openEditItemModal={openEditItemModal}
|
||||
deleteItem={deleteItem}
|
||||
quickSetItemStatus={quickSetItemStatus}
|
||||
bulkSetItemStatus={bulkSetItemStatus}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tab === 'checkup' && (
|
||||
<CheckupTab
|
||||
checkupSession={checkupSession}
|
||||
selectedTrip={selectedTrip}
|
||||
selectedTripItems={selectedTripItems}
|
||||
checkupStats={checkupStats}
|
||||
answerCheckupYes={answerCheckupYes}
|
||||
openFixModal={openFixModal}
|
||||
createFreshCheckupSession={createFreshCheckupSession}
|
||||
saveCheckup={saveCheckup}
|
||||
startCheckupFlow={startCheckupFlow}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -566,12 +917,13 @@ export default function AppRoot() {
|
||||
selectedTripCheckups={selectedTripCheckups}
|
||||
selectedCheckupId={selectedCheckupId}
|
||||
setSelectedCheckupId={setSelectedCheckupId}
|
||||
onDeleteCheckup={deleteCheckup}
|
||||
/>
|
||||
)}
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
<BottomTab current={tab} onChange={setTab} />
|
||||
<BottomTab current={tab} onChange={setTab} onAddItem={openQuickAddItemFromNav} canAddItem={!!selectedTripId} />
|
||||
|
||||
<DatePickerModal
|
||||
visible={datePicker.visible}
|
||||
@@ -586,16 +938,43 @@ export default function AppRoot() {
|
||||
itemForm={itemForm}
|
||||
setItemModalVisible={setItemModalVisible}
|
||||
updateItemForm={updateItemForm}
|
||||
pickItemImage={() => pickImage((uri) => updateItemForm('imageUri', uri))}
|
||||
pickItemImage={(options) => pickImage((uri) => updateItemForm('imageUri', uri), options)}
|
||||
takeItemImage={(options) => takeImage((uri) => updateItemForm('imageUri', uri), options)}
|
||||
saveItemFromModal={saveItemFromModal}
|
||||
/>
|
||||
|
||||
<CheckupFixModal
|
||||
visible={checkupFixModalVisible}
|
||||
checkupFixForm={checkupFixForm}
|
||||
setCheckupFixForm={setCheckupFixForm}
|
||||
setCheckupFixModalVisible={setCheckupFixModalVisible}
|
||||
saveFixModal={saveFixModal}
|
||||
<CheckupFlowModal
|
||||
visible={checkupFlowVisible}
|
||||
entry={checkupCurrentEntry}
|
||||
stepIndex={checkupFlowIndex}
|
||||
total={checkupSession.length}
|
||||
mode={checkupFlowMode}
|
||||
noForm={checkupNoForm}
|
||||
setNoForm={setCheckupNoForm}
|
||||
onClose={closeCheckupFlow}
|
||||
onYes={answerCurrentCheckupYes}
|
||||
onNo={openCurrentCheckupNo}
|
||||
onSaveNo={saveCurrentCheckupNo}
|
||||
onSkip={skipCurrentCheckupItem}
|
||||
onBack={goBackInCheckup}
|
||||
onFinish={finishCheckupFlow}
|
||||
/>
|
||||
|
||||
<BackupModal
|
||||
visible={backupModalVisible}
|
||||
onClose={() => setBackupModalVisible(false)}
|
||||
exportJson={buildBackupJson()}
|
||||
importJson={backupImportText}
|
||||
setImportJson={setBackupImportText}
|
||||
applyImport={applyBackupImport}
|
||||
/>
|
||||
|
||||
<AppDialogModal
|
||||
visible={dialogState.visible}
|
||||
title={dialogState.title}
|
||||
message={dialogState.message}
|
||||
buttons={dialogState.buttons}
|
||||
onClose={closeDialog}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
40
src/components/AppDialogModal.js
Normal file
40
src/components/AppDialogModal.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { Modal, Pressable, Text, View } from 'react-native';
|
||||
import { styles } from '../styles';
|
||||
|
||||
export default function AppDialogModal({ visible, title, message, buttons = [], onClose }) {
|
||||
if (!visible) return null;
|
||||
|
||||
const safeButtons = buttons.length ? buttons : [{ text: 'OK' }];
|
||||
|
||||
return (
|
||||
<Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
|
||||
<View style={styles.dialogBackdrop}>
|
||||
<View style={styles.dialogCard}>
|
||||
<Text style={styles.dialogTitle}>{title || 'Notice'}</Text>
|
||||
{!!message ? <Text style={styles.dialogMessage}>{message}</Text> : null}
|
||||
|
||||
<View style={styles.dialogButtonsRow}>
|
||||
{safeButtons.map((button, idx) => {
|
||||
const tone = button.tone || (button.style === 'destructive' ? 'danger' : button.style === 'cancel' ? 'neutral' : 'primary');
|
||||
return (
|
||||
<Pressable
|
||||
key={`${button.text}-${idx}`}
|
||||
style={[
|
||||
styles.dialogBtn,
|
||||
tone === 'primary' ? styles.dialogBtnPrimary : null,
|
||||
tone === 'danger' ? styles.dialogBtnDanger : null,
|
||||
tone === 'neutral' ? styles.dialogBtnNeutral : null,
|
||||
]}
|
||||
onPress={button.onPress}
|
||||
>
|
||||
<Text style={styles.dialogBtnText}>{button.text || 'OK'}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -3,10 +3,23 @@ import { Pressable, Text, View } from 'react-native';
|
||||
import Ionicons from '@expo/vector-icons/Ionicons';
|
||||
import { styles } from '../styles';
|
||||
|
||||
export default function BottomTab({ current, onChange }) {
|
||||
const tabs = [
|
||||
function TabBtn({ tab, current, onChange }) {
|
||||
const active = current === tab.key;
|
||||
return (
|
||||
<Pressable onPress={() => onChange(tab.key)} style={styles.tabItem}>
|
||||
<Ionicons name={active ? tab.iconActive : tab.icon} size={18} color={active ? '#dbeafe' : '#94a3b8'} />
|
||||
<Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BottomTab({ current, onChange, onAddItem, canAddItem }) {
|
||||
const leftTabs = [
|
||||
{ key: 'trips', label: 'Trips', icon: 'airplane-outline', iconActive: 'airplane' },
|
||||
{ key: 'items', label: 'Items', icon: 'briefcase-outline', iconActive: 'briefcase' },
|
||||
];
|
||||
|
||||
const rightTabs = [
|
||||
{ key: 'checkup', label: 'Check-Up', icon: 'checkmark-circle-outline', iconActive: 'checkmark-circle' },
|
||||
{ key: 'history', label: 'History', icon: 'time-outline', iconActive: 'time' },
|
||||
];
|
||||
@@ -14,19 +27,25 @@ export default function BottomTab({ current, onChange }) {
|
||||
return (
|
||||
<View style={styles.tabBarWrap}>
|
||||
<View style={styles.tabBar}>
|
||||
{tabs.map((tab) => {
|
||||
const active = current === tab.key;
|
||||
return (
|
||||
<Pressable key={tab.key} onPress={() => onChange(tab.key)} style={styles.tabItem}>
|
||||
<Ionicons
|
||||
name={active ? tab.iconActive : tab.icon}
|
||||
size={18}
|
||||
color={active ? '#dbeafe' : '#94a3b8'}
|
||||
/>
|
||||
<Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
|
||||
<View style={styles.tabGroupSide}>
|
||||
{leftTabs.map((tab) => (
|
||||
<TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
style={[styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled]}
|
||||
onPress={onAddItem}
|
||||
disabled={!canAddItem}
|
||||
>
|
||||
<Ionicons name="add" size={26} color="#fff" />
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
|
||||
<View style={styles.tabGroupSide}>
|
||||
{rightTabs.map((tab) => (
|
||||
<TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
@@ -2,23 +2,40 @@ import React from 'react';
|
||||
import { Image, Pressable, Text, View } from 'react-native';
|
||||
import { STATUS_COLORS } from '../constants';
|
||||
import { styles } from '../styles';
|
||||
import { formatStatusLabel } from '../utils/labels';
|
||||
|
||||
function statusAccent(status) {
|
||||
return STATUS_COLORS[status] || '#64748b';
|
||||
}
|
||||
|
||||
export default function ItemCard({ item, onEdit, onDelete }) {
|
||||
export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickUnpack, onOpenImage }) {
|
||||
const isPacked = item.status === 'packed';
|
||||
const isUnpacked = item.status === 'unpacked';
|
||||
|
||||
return (
|
||||
<View style={styles.itemCard}>
|
||||
<View style={[styles.itemAccent, { backgroundColor: statusAccent(item.status) }]} />
|
||||
|
||||
<View style={styles.itemThumbWrap}>
|
||||
{item.imageUri ? (
|
||||
<Pressable onPress={() => onOpenImage?.(item.imageUri)}>
|
||||
<Image source={{ uri: item.imageUri }} style={styles.itemThumbSmall} />
|
||||
</Pressable>
|
||||
) : (
|
||||
<View style={styles.itemThumbPlaceholder}>
|
||||
<Text style={styles.itemThumbPlaceholderText}>🧳</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<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.itemTitle} numberOfLines={1}>{item.name}</Text>
|
||||
<Text style={styles.itemMeta} numberOfLines={1}>{item.category || 'uncategorized'} · {formatStatusLabel(item.status, item.lentTo)}</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}
|
||||
{item.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta} numberOfLines={1}>Borrower: {item.lentTo}</Text> : null}
|
||||
{!!item.description ? <Text style={styles.itemMeta} numberOfLines={2}>{item.description}</Text> : null}
|
||||
</View>
|
||||
<View style={styles.stackButtons}>
|
||||
<Pressable style={styles.miniBtn} onPress={() => onEdit(item)}>
|
||||
@@ -29,7 +46,15 @@ export default function ItemCard({ item, onEdit, onDelete }) {
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
{item.imageUri ? <Image source={{ uri: item.imageUri }} style={styles.previewImageSmall} /> : null}
|
||||
|
||||
<View style={styles.quickStatusRow}>
|
||||
<Pressable style={[styles.quickStatusBtn, isPacked && styles.quickStatusBtnActive]} onPress={onQuickPack}>
|
||||
<Text style={[styles.quickStatusBtnText, isPacked && styles.quickStatusBtnTextActive]}>Packed</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.quickStatusBtn, isUnpacked && styles.quickStatusBtnActive]} onPress={onQuickUnpack}>
|
||||
<Text style={[styles.quickStatusBtnText, isUnpacked && styles.quickStatusBtnTextActive]}>Unpacked</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
54
src/modals/BackupModal.js
Normal file
54
src/modals/BackupModal.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
|
||||
import { styles } from '../styles';
|
||||
|
||||
export default function BackupModal({
|
||||
visible,
|
||||
onClose,
|
||||
exportJson,
|
||||
importJson,
|
||||
setImportJson,
|
||||
applyImport,
|
||||
}) {
|
||||
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}>Backup & Restore</Text>
|
||||
<Pressable onPress={onClose}>
|
||||
<Text style={styles.closeText}>Close</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingBottom: 12 }} showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.cardTitle}>Export JSON</Text>
|
||||
<Text style={styles.cardMeta}>Copy this JSON and store it safely.</Text>
|
||||
<TextInput
|
||||
style={styles.inputMultiline}
|
||||
multiline
|
||||
value={exportJson}
|
||||
editable={false}
|
||||
selectTextOnFocus
|
||||
/>
|
||||
<Text style={styles.cardTitle}>Import JSON</Text>
|
||||
<Text style={styles.cardMeta}>Paste a previous backup. This will replace current data.</Text>
|
||||
<TextInput
|
||||
style={styles.inputMultiline}
|
||||
multiline
|
||||
value={importJson}
|
||||
onChangeText={setImportJson}
|
||||
placeholder="Paste backup JSON here"
|
||||
placeholderTextColor="#6b7280"
|
||||
/>
|
||||
<Pressable style={styles.primaryBtn} onPress={applyImport}>
|
||||
<Text style={styles.primaryBtnText}>Import & Replace</Text>
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
144
src/modals/CheckupFlowModal.js
Normal file
144
src/modals/CheckupFlowModal.js
Normal file
@@ -0,0 +1,144 @@
|
||||
import React from 'react';
|
||||
import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
|
||||
import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
|
||||
import ChipGroup from '../components/ChipGroup';
|
||||
import Field from '../components/Field';
|
||||
import { styles } from '../styles';
|
||||
import { formatStatusLabel } from '../utils/labels';
|
||||
|
||||
export default function CheckupFlowModal({
|
||||
visible,
|
||||
entry,
|
||||
stepIndex,
|
||||
total,
|
||||
mode,
|
||||
noForm,
|
||||
setNoForm,
|
||||
onClose,
|
||||
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>
|
||||
</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>
|
||||
<View style={styles.actionRow}>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onBack}>
|
||||
<Text style={styles.secondaryBtnText}>Back</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.primaryBtnTight, styles.flex]} onPress={onFinish}>
|
||||
<Text style={styles.primaryBtnText}>Save Snapshot</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView
|
||||
keyboardShouldPersistTaps="handled"
|
||||
keyboardDismissMode="interactive"
|
||||
contentContainerStyle={{ paddingBottom: 12 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<Text style={styles.tripHistoryLabel}>
|
||||
Item {stepIndex + 1} / {total}
|
||||
</Text>
|
||||
<View style={styles.checkupProgressTrack}>
|
||||
<View style={[styles.checkupProgressFill, { width: `${Math.round(((stepIndex + 1) / total) * 100)}%` }]} />
|
||||
</View>
|
||||
<Text style={styles.cardTitle}>{entry.name}</Text>
|
||||
<Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
|
||||
<Text style={styles.cardMeta}>
|
||||
Current: {formatStatusLabel(entry.current.status, entry.current.lentTo)} · {entry.current.placement}
|
||||
</Text>
|
||||
|
||||
{mode === 'question' ? (
|
||||
<View style={styles.answerRowWide}>
|
||||
<View style={styles.actionRow}>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onBack}>
|
||||
<Text style={styles.secondaryBtnText}>Back</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onSkip}>
|
||||
<Text style={styles.secondaryBtnText}>Skip</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
<Pressable style={styles.answerYesWide} onPress={onYes}>
|
||||
<Text style={styles.answerText}>Yes, correct</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.answerNoWide} onPress={onNo}>
|
||||
<Text style={styles.answerText}>No, update</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.section}>
|
||||
<Field label="Status">
|
||||
<ChipGroup
|
||||
options={ITEM_STATUSES}
|
||||
value={noForm.status}
|
||||
onChange={(v) => setNoForm((prev) => ({ ...prev, status: v }))}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Placement">
|
||||
<ChipGroup
|
||||
options={ITEM_PLACEMENTS}
|
||||
value={noForm.placement}
|
||||
onChange={(v) => setNoForm((prev) => ({ ...prev, placement: v }))}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{noForm.status === 'lent-to' ? (
|
||||
<Field label="Lent to">
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={noForm.lentTo}
|
||||
onChangeText={(v) => setNoForm((prev) => ({ ...prev, lentTo: v }))}
|
||||
placeholder="Person name"
|
||||
placeholderTextColor="#6b7280"
|
||||
/>
|
||||
</Field>
|
||||
) : null}
|
||||
|
||||
<Pressable
|
||||
style={styles.inlineToggle}
|
||||
onPress={() => setNoForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
|
||||
>
|
||||
<Text style={styles.inlineToggleText}>
|
||||
{noForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<View style={styles.actionRow}>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={onBack}>
|
||||
<Text style={styles.secondaryBtnText}>Back</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.primaryBtnTight, styles.flex]} onPress={onSaveNo}>
|
||||
<Text style={styles.primaryBtnText}>Save + Next</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -5,14 +5,26 @@ import ChipGroup from '../components/ChipGroup';
|
||||
import Field from '../components/Field';
|
||||
import { styles } from '../styles';
|
||||
|
||||
function qualityValue(level) {
|
||||
if (level === 'high') return 0.95;
|
||||
if (level === 'low') return 0.45;
|
||||
return 0.75;
|
||||
}
|
||||
|
||||
export default function ItemModal({
|
||||
visible,
|
||||
itemForm,
|
||||
setItemModalVisible,
|
||||
updateItemForm,
|
||||
pickItemImage,
|
||||
takeItemImage,
|
||||
saveItemFromModal,
|
||||
}) {
|
||||
const mediaOptions = {
|
||||
quality: qualityValue(itemForm.imageQuality),
|
||||
allowCrop: !!itemForm.imageAllowCrop,
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal visible={visible} animationType="slide" transparent>
|
||||
<View style={styles.modalBackdrop}>
|
||||
@@ -81,9 +93,31 @@ export default function ItemModal({
|
||||
</Field>
|
||||
) : null}
|
||||
|
||||
<Pressable style={styles.secondaryBtn} onPress={pickItemImage}>
|
||||
<Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'Change image' : 'Add image'}</Text>
|
||||
<Field label="Image optimization">
|
||||
<View style={styles.chipGroup}>
|
||||
{['low', 'balanced', 'high'].map((level) => {
|
||||
const active = itemForm.imageQuality === level;
|
||||
return (
|
||||
<Pressable key={level} style={[styles.chip, active && styles.chipActive]} onPress={() => updateItemForm('imageQuality', level)}>
|
||||
<Text style={[styles.chipText, active && styles.chipTextActive]}>{level}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</Field>
|
||||
|
||||
<Pressable style={styles.inlineToggle} onPress={() => updateItemForm('imageAllowCrop', !itemForm.imageAllowCrop)}>
|
||||
<Text style={styles.inlineToggleText}>{itemForm.imageAllowCrop ? '☑' : '☐'} Enable optional crop before save</Text>
|
||||
</Pressable>
|
||||
|
||||
<View style={styles.actionRow}>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => takeItemImage(mediaOptions)}>
|
||||
<Text style={styles.secondaryBtnText}>Take photo</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => pickItemImage(mediaOptions)}>
|
||||
<Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
{!!itemForm.imageUri && <Image source={{ uri: itemForm.imageUri }} style={styles.previewImageSmall} />}
|
||||
|
||||
<Pressable style={styles.primaryBtn} onPress={saveItemFromModal}>
|
||||
|
||||
312
src/styles.js
312
src/styles.js
@@ -10,10 +10,10 @@ export const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 12,
|
||||
paddingBottom: TAB_BAR_HEIGHT + 22,
|
||||
gap: 14,
|
||||
paddingHorizontal: 14,
|
||||
paddingTop: 10,
|
||||
paddingBottom: TAB_BAR_HEIGHT + 20,
|
||||
gap: 10,
|
||||
},
|
||||
statusSpacer: {
|
||||
height: Platform.OS === 'android' ? 8 : 0,
|
||||
@@ -26,6 +26,28 @@ export const styles = StyleSheet.create({
|
||||
muted: {
|
||||
color: '#8793a5',
|
||||
},
|
||||
loadingEmoji: {
|
||||
fontSize: 52,
|
||||
marginBottom: 8,
|
||||
},
|
||||
loadingTitle: {
|
||||
color: '#f8fafc',
|
||||
fontWeight: '700',
|
||||
fontSize: 17,
|
||||
marginBottom: 10,
|
||||
},
|
||||
loadingBarTrack: {
|
||||
width: 220,
|
||||
height: 10,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#1e293b',
|
||||
overflow: 'hidden',
|
||||
marginBottom: 8,
|
||||
},
|
||||
loadingBarFill: {
|
||||
height: '100%',
|
||||
backgroundColor: '#2563eb',
|
||||
},
|
||||
|
||||
tripPickerWrap: {
|
||||
marginBottom: 6,
|
||||
@@ -64,7 +86,7 @@ export const styles = StyleSheet.create({
|
||||
},
|
||||
|
||||
section: {
|
||||
gap: 12,
|
||||
gap: 10,
|
||||
},
|
||||
sectionTitle: {
|
||||
color: '#f1f5f9',
|
||||
@@ -83,23 +105,27 @@ export const styles = StyleSheet.create({
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f2937',
|
||||
padding: 12,
|
||||
gap: 8,
|
||||
padding: 10,
|
||||
gap: 6,
|
||||
},
|
||||
cardActive: {
|
||||
borderColor: '#60a5fa',
|
||||
},
|
||||
cardArchived: {
|
||||
opacity: 0.72,
|
||||
borderColor: '#374151',
|
||||
},
|
||||
cardSoft: {
|
||||
backgroundColor: '#0f172a',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1e293b',
|
||||
padding: 12,
|
||||
gap: 10,
|
||||
padding: 10,
|
||||
gap: 8,
|
||||
},
|
||||
cardRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
gap: 8,
|
||||
},
|
||||
cardTitle: {
|
||||
color: '#f8fafc',
|
||||
@@ -108,8 +134,8 @@ export const styles = StyleSheet.create({
|
||||
},
|
||||
cardMeta: {
|
||||
color: '#94a3b8',
|
||||
marginTop: 3,
|
||||
fontSize: 13,
|
||||
marginTop: 2,
|
||||
fontSize: 12,
|
||||
},
|
||||
tripHistoryLabel: {
|
||||
color: '#93c5fd',
|
||||
@@ -117,6 +143,32 @@ export const styles = StyleSheet.create({
|
||||
marginTop: -2,
|
||||
marginBottom: 2,
|
||||
},
|
||||
tripHeroCard: {
|
||||
backgroundColor: '#0f172a',
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
padding: 10,
|
||||
gap: 6,
|
||||
},
|
||||
tripHeroImage: {
|
||||
width: '100%',
|
||||
height: 180,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#111827',
|
||||
},
|
||||
tripHeroTitle: {
|
||||
color: '#f8fafc',
|
||||
fontWeight: '800',
|
||||
fontSize: 20,
|
||||
},
|
||||
tripListTitle: {
|
||||
color: '#cbd5e1',
|
||||
fontWeight: '700',
|
||||
fontSize: 13,
|
||||
letterSpacing: 0.4,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
|
||||
fieldWrap: {
|
||||
gap: 6,
|
||||
@@ -134,6 +186,19 @@ export const styles = StyleSheet.create({
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 11,
|
||||
},
|
||||
inputMultiline: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#243244',
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#0b1220',
|
||||
color: '#e5e7eb',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 10,
|
||||
minHeight: 150,
|
||||
textAlignVertical: 'top',
|
||||
fontSize: 12,
|
||||
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
|
||||
},
|
||||
dateInput: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#29415e',
|
||||
@@ -211,6 +276,11 @@ export const styles = StyleSheet.create({
|
||||
color: '#dbeafe',
|
||||
fontWeight: '700',
|
||||
},
|
||||
actionRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
marginTop: 4,
|
||||
},
|
||||
|
||||
inlineToggle: {
|
||||
marginTop: 2,
|
||||
@@ -220,19 +290,19 @@ export const styles = StyleSheet.create({
|
||||
},
|
||||
|
||||
stackButtons: {
|
||||
gap: 7,
|
||||
gap: 6,
|
||||
},
|
||||
miniBtn: {
|
||||
backgroundColor: '#1e293b',
|
||||
borderRadius: 8,
|
||||
paddingVertical: 7,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 9,
|
||||
},
|
||||
miniBtnDanger: {
|
||||
backgroundColor: '#3b1d22',
|
||||
borderRadius: 8,
|
||||
paddingVertical: 7,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 9,
|
||||
},
|
||||
miniBtnText: {
|
||||
color: '#e2e8f0',
|
||||
@@ -247,14 +317,39 @@ export const styles = StyleSheet.create({
|
||||
borderColor: '#1f2937',
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
itemAccent: {
|
||||
width: 5,
|
||||
alignSelf: 'stretch',
|
||||
},
|
||||
itemThumbWrap: {
|
||||
paddingTop: 8,
|
||||
paddingLeft: 8,
|
||||
},
|
||||
itemThumbSmall: {
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#0b1220',
|
||||
},
|
||||
itemThumbPlaceholder: {
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#0b1220',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#243244',
|
||||
},
|
||||
itemThumbPlaceholderText: {
|
||||
fontSize: 16,
|
||||
},
|
||||
itemMain: {
|
||||
flex: 1,
|
||||
padding: 12,
|
||||
gap: 8,
|
||||
padding: 8,
|
||||
gap: 6,
|
||||
},
|
||||
itemTitle: {
|
||||
color: '#f8fafc',
|
||||
@@ -263,8 +358,33 @@ export const styles = StyleSheet.create({
|
||||
},
|
||||
itemMeta: {
|
||||
color: '#94a3b8',
|
||||
marginTop: 2,
|
||||
fontSize: 13,
|
||||
marginTop: 1,
|
||||
fontSize: 12,
|
||||
},
|
||||
quickStatusRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 6,
|
||||
marginTop: 1,
|
||||
},
|
||||
quickStatusBtn: {
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: 999,
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
backgroundColor: '#0b1220',
|
||||
},
|
||||
quickStatusBtnActive: {
|
||||
borderColor: '#60a5fa',
|
||||
backgroundColor: '#1d2a3a',
|
||||
},
|
||||
quickStatusBtnText: {
|
||||
color: '#cbd5e1',
|
||||
fontWeight: '700',
|
||||
fontSize: 11,
|
||||
},
|
||||
quickStatusBtnTextActive: {
|
||||
color: '#dbeafe',
|
||||
},
|
||||
|
||||
answerRow: {
|
||||
@@ -293,6 +413,41 @@ export const styles = StyleSheet.create({
|
||||
color: '#f8fafc',
|
||||
fontWeight: '700',
|
||||
},
|
||||
answerRowWide: {
|
||||
marginTop: 14,
|
||||
gap: 10,
|
||||
},
|
||||
checkupProgressTrack: {
|
||||
width: '100%',
|
||||
height: 8,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#1e293b',
|
||||
overflow: 'hidden',
|
||||
marginTop: 4,
|
||||
marginBottom: 8,
|
||||
},
|
||||
checkupProgressFill: {
|
||||
height: '100%',
|
||||
backgroundColor: '#2563eb',
|
||||
},
|
||||
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,
|
||||
@@ -362,10 +517,39 @@ export const styles = StyleSheet.create({
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#111827',
|
||||
},
|
||||
imagePreviewBackdrop: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(2,6,23,0.88)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
imagePreviewCard: {
|
||||
width: '100%',
|
||||
maxWidth: 460,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
backgroundColor: '#0f172a',
|
||||
padding: 10,
|
||||
gap: 8,
|
||||
},
|
||||
imagePreviewImage: {
|
||||
width: '100%',
|
||||
height: 360,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#0b1220',
|
||||
},
|
||||
imagePreviewHint: {
|
||||
color: '#93c5fd',
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
|
||||
tabBarWrap: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
bottom: 6,
|
||||
left: 0,
|
||||
right: 0,
|
||||
paddingHorizontal: 10,
|
||||
@@ -380,17 +564,38 @@ export const styles = StyleSheet.create({
|
||||
borderColor: '#1f2937',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
tabGroupSide: {
|
||||
flexDirection: 'row',
|
||||
width: '42%',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
},
|
||||
tabItem: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 4,
|
||||
minWidth: 62,
|
||||
gap: 3,
|
||||
minWidth: 56,
|
||||
},
|
||||
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,
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
},
|
||||
tabLabelActive: {
|
||||
@@ -402,6 +607,59 @@ export const styles = StyleSheet.create({
|
||||
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%',
|
||||
@@ -415,8 +673,8 @@ export const styles = StyleSheet.create({
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1e293b',
|
||||
padding: 16,
|
||||
gap: 10,
|
||||
padding: 14,
|
||||
gap: 8,
|
||||
},
|
||||
closeText: {
|
||||
color: '#93c5fd',
|
||||
|
||||
@@ -2,24 +2,19 @@ import React from 'react';
|
||||
import { Pressable, Text, View } from 'react-native';
|
||||
import { styles } from '../styles';
|
||||
|
||||
export default function CheckupTab({
|
||||
checkupSession,
|
||||
checkupStats,
|
||||
answerCheckupYes,
|
||||
openFixModal,
|
||||
createFreshCheckupSession,
|
||||
saveCheckup,
|
||||
}) {
|
||||
export default function CheckupTab({ selectedTrip, selectedTripItems, checkupStats, startCheckupFlow }) {
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionRow}>
|
||||
<Text style={styles.sectionTitle}>Check-Up</Text>
|
||||
<Pressable style={styles.secondaryBtnTight} onPress={createFreshCheckupSession}>
|
||||
<Text style={styles.secondaryBtnText}>Restart</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{!!checkupSession.length && (
|
||||
{!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
|
||||
{selectedTrip && selectedTripItems.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
|
||||
|
||||
{selectedTrip && selectedTripItems.length > 0 ? (
|
||||
<View style={styles.cardSoft}>
|
||||
<Text style={styles.cardTitle}>Run a check-up for {selectedTrip.name}</Text>
|
||||
<Text style={styles.cardMeta}>{selectedTripItems.length} items will be checked one by one.</Text>
|
||||
|
||||
<View style={styles.statsRow}>
|
||||
<View style={[styles.statPill, styles.statPillCorrect]}>
|
||||
<Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
|
||||
@@ -31,42 +26,12 @@ export default function CheckupTab({
|
||||
<Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
|
||||
|
||||
{checkupSession.map((entry) => (
|
||||
<View key={entry.itemId} style={styles.cardSoft}>
|
||||
<Text style={styles.cardTitle}>{entry.name}</Text>
|
||||
<Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
|
||||
<Text style={styles.cardMeta}>
|
||||
{entry.current.status} · {entry.current.placement}
|
||||
{entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
|
||||
</Text>
|
||||
|
||||
<View style={styles.answerRow}>
|
||||
<Pressable style={styles.answerYes} onPress={() => answerCheckupYes(entry.itemId)}>
|
||||
<Text style={styles.answerText}>Yes</Text>
|
||||
<Pressable style={styles.primaryBtn} onPress={startCheckupFlow}>
|
||||
<Text style={styles.primaryBtnText}>Start Check-Up</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.answerNo} onPress={() => openFixModal(entry.itemId)}>
|
||||
<Text style={styles.answerText}>No</Text>
|
||||
</Pressable>
|
||||
<View
|
||||
style={[
|
||||
styles.answerStateDot,
|
||||
entry.result === 'correct' ? styles.answerStateDotOn : null,
|
||||
entry.result === 'bad' ? styles.answerStateDotBad : null,
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{!!checkupSession.length && (
|
||||
<Pressable style={styles.primaryBtn} onPress={saveCheckup}>
|
||||
<Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Pressable, Text, View } from 'react-native';
|
||||
import { styles } from '../styles';
|
||||
import { formatStatusLabel } from '../utils/labels';
|
||||
|
||||
export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId }) {
|
||||
export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId, onDeleteCheckup }) {
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>History</Text>
|
||||
@@ -13,13 +14,17 @@ export default function HistoryTab({ selectedTrip, selectedTripCheckups, selecte
|
||||
|
||||
{selectedTripCheckups.map((checkup) => (
|
||||
<View key={checkup.id} style={styles.cardSoft}>
|
||||
<Pressable onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}>
|
||||
<Pressable
|
||||
onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}
|
||||
onLongPress={() => onDeleteCheckup(checkup.id)}
|
||||
delayLongPress={280}
|
||||
>
|
||||
<Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
|
||||
<Text style={styles.cardMeta}>
|
||||
{checkup.snapshot.length} items · correct: {checkup.stats?.correct ?? checkup.snapshot.filter((x) => x.result === 'correct').length} · bad:{' '}
|
||||
{checkup.stats?.bad ?? checkup.snapshot.filter((x) => x.result === 'bad').length}
|
||||
</Text>
|
||||
<Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'}</Text>
|
||||
<Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'} · long hold to delete</Text>
|
||||
</Pressable>
|
||||
|
||||
{selectedCheckupId === checkup.id ? (
|
||||
@@ -28,8 +33,7 @@ export default function HistoryTab({ selectedTrip, selectedTripCheckups, selecte
|
||||
<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}` : ''}
|
||||
{formatStatusLabel(entry.status, entry.lentTo)} · {entry.placement}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
|
||||
@@ -1,9 +1,42 @@
|
||||
import React from 'react';
|
||||
import { Pressable, Text, View } from 'react-native';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Image, Modal, Pressable, Text, View } from 'react-native';
|
||||
import ItemCard from '../components/ItemCard';
|
||||
import { ITEM_STATUSES } from '../constants';
|
||||
import { styles } from '../styles';
|
||||
import { formatFilterLabel, formatStatusLabel } from '../utils/labels';
|
||||
|
||||
export default function ItemsTab({
|
||||
selectedTrip,
|
||||
selectedTripItems,
|
||||
openAddItemModal,
|
||||
openEditItemModal,
|
||||
deleteItem,
|
||||
quickSetItemStatus,
|
||||
bulkSetItemStatus,
|
||||
}) {
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
const [categoryFilter, setCategoryFilter] = 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 filteredItems = useMemo(
|
||||
() =>
|
||||
selectedTripItems.filter((item) => {
|
||||
const matchStatus = statusFilter === 'all' || item.status === statusFilter;
|
||||
const itemCategory = item.category?.trim() || '';
|
||||
const matchCategory = categoryFilter === 'all' || itemCategory === categoryFilter;
|
||||
return matchStatus && matchCategory;
|
||||
}),
|
||||
[selectedTripItems, statusFilter, categoryFilter]
|
||||
);
|
||||
|
||||
const filterStatusOptions = ['all', ...ITEM_STATUSES];
|
||||
const filterCategoryOptions = ['all', ...categories];
|
||||
|
||||
export default function ItemsTab({ selectedTrip, selectedTripItems, openAddItemModal, openEditItemModal, deleteItem }) {
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionRow}>
|
||||
@@ -16,9 +49,72 @@ export default function ItemsTab({ selectedTrip, selectedTripItems, openAddItemM
|
||||
{!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
|
||||
{selectedTripItems.length === 0 && selectedTrip ? <Text style={styles.muted}>No items yet.</Text> : null}
|
||||
|
||||
{selectedTripItems.map((item) => (
|
||||
<ItemCard key={item.id} item={item} onEdit={openEditItemModal} onDelete={deleteItem} />
|
||||
{selectedTrip ? (
|
||||
<View style={styles.cardSoft}>
|
||||
<Text style={styles.cardTitle}>Quick actions</Text>
|
||||
<View style={styles.actionRow}>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'packed')}>
|
||||
<Text style={styles.secondaryBtnText}>Pack All ({filteredItems.length})</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'unpacked')}>
|
||||
<Text style={styles.secondaryBtnText}>Unpack All ({filteredItems.length})</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{selectedTripItems.length > 0 ? (
|
||||
<View style={styles.cardSoft}>
|
||||
<Text style={styles.cardTitle}>Filters</Text>
|
||||
|
||||
<Text style={styles.cardMeta}>Status</Text>
|
||||
<View style={styles.chipGroup}>
|
||||
{filterStatusOptions.map((status) => {
|
||||
const active = statusFilter === status;
|
||||
return (
|
||||
<Pressable key={status} style={[styles.chip, active && styles.chipActive]} onPress={() => setStatusFilter(status)}>
|
||||
<Text style={[styles.chipText, active && styles.chipTextActive]}>{status === 'all' ? formatFilterLabel(status) : formatStatusLabel(status)}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Text style={styles.cardMeta}>Category</Text>
|
||||
<View style={styles.chipGroup}>
|
||||
{filterCategoryOptions.map((category) => {
|
||||
const active = categoryFilter === category;
|
||||
return (
|
||||
<Pressable key={category} style={[styles.chip, active && styles.chipActive]} onPress={() => setCategoryFilter(category)}>
|
||||
<Text style={[styles.chipText, active && styles.chipTextActive]}>{formatFilterLabel(category)}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{filteredItems.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
onEdit={openEditItemModal}
|
||||
onDelete={deleteItem}
|
||||
onQuickPack={() => quickSetItemStatus(item.id, 'packed')}
|
||||
onQuickUnpack={() => quickSetItemStatus(item.id, 'unpacked')}
|
||||
onOpenImage={(uri) => setImagePreviewUri(uri)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{selectedTripItems.length > 0 && filteredItems.length === 0 ? <Text style={styles.muted}>No items match the current filters.</Text> : null}
|
||||
|
||||
<Modal visible={!!imagePreviewUri} transparent animationType="fade">
|
||||
<Pressable style={styles.imagePreviewBackdrop} onPress={() => setImagePreviewUri('')}>
|
||||
<Pressable style={styles.imagePreviewCard} onPress={() => {}}>
|
||||
{imagePreviewUri ? <Image source={{ uri: imagePreviewUri }} style={styles.imagePreviewImage} resizeMode="contain" /> : null}
|
||||
<Text style={styles.imagePreviewHint}>Tap outside to close</Text>
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Image, Pressable, Text, TextInput, View } from 'react-native';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
|
||||
import DatePickerModal from '../components/DatePickerModal';
|
||||
import Field from '../components/Field';
|
||||
import { styles } from '../styles';
|
||||
|
||||
@@ -13,26 +14,181 @@ function DateField({ label, value, onPress }) {
|
||||
);
|
||||
}
|
||||
|
||||
const emptyEditForm = {
|
||||
name: '',
|
||||
location: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
};
|
||||
|
||||
export default function TripsTab({
|
||||
tripForm,
|
||||
updateTripForm,
|
||||
pickTripImage,
|
||||
templateTrip,
|
||||
createTrip,
|
||||
trips,
|
||||
selectedTripId,
|
||||
chooseTrip,
|
||||
setTripAsTemplate,
|
||||
saveTripEdits,
|
||||
setTripArchived,
|
||||
deleteTrip,
|
||||
onInputFocus,
|
||||
defaultTemplateTripId,
|
||||
openDatePicker,
|
||||
activeTripItemCount,
|
||||
activeTripCheckupCount,
|
||||
openBackupModal,
|
||||
}) {
|
||||
const [createModalVisible, setCreateModalVisible] = useState(false);
|
||||
const [viewTripId, setViewTripId] = useState(null);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [editForm, setEditForm] = useState(emptyEditForm);
|
||||
const [viewDatePicker, setViewDatePicker] = useState({ visible: false, field: 'startDate' });
|
||||
|
||||
const activeTrip = useMemo(() => trips.find((trip) => trip.id === selectedTripId) || null, [trips, selectedTripId]);
|
||||
const viewingTrip = useMemo(() => trips.find((trip) => trip.id === viewTripId) || null, [trips, viewTripId]);
|
||||
const activeTrips = useMemo(() => trips.filter((trip) => !trip.archived), [trips]);
|
||||
const archivedTrips = useMemo(() => trips.filter((trip) => trip.archived), [trips]);
|
||||
|
||||
function submitCreateTrip() {
|
||||
const ok = createTrip();
|
||||
if (ok) setCreateModalVisible(false);
|
||||
}
|
||||
|
||||
function openView(tripId) {
|
||||
const trip = trips.find((x) => x.id === tripId);
|
||||
if (!trip) return;
|
||||
setViewTripId(tripId);
|
||||
setEditMode(false);
|
||||
setEditForm({
|
||||
name: trip.name || '',
|
||||
location: trip.location || '',
|
||||
startDate: trip.startDate || '',
|
||||
endDate: trip.endDate || '',
|
||||
});
|
||||
}
|
||||
|
||||
function updateEditForm(field, value) {
|
||||
setEditForm((prev) => ({ ...prev, [field]: value }));
|
||||
}
|
||||
|
||||
function saveEditFromView() {
|
||||
if (!viewingTrip) return;
|
||||
const ok = saveTripEdits(viewingTrip.id, editForm);
|
||||
if (!ok) return;
|
||||
setEditMode(false);
|
||||
}
|
||||
|
||||
function applyTemplateFromView() {
|
||||
if (!viewingTrip) return;
|
||||
setTripAsTemplate(viewingTrip.id);
|
||||
}
|
||||
|
||||
function toggleArchiveFromView() {
|
||||
if (!viewingTrip) return;
|
||||
setTripArchived(viewingTrip.id, !viewingTrip.archived);
|
||||
if (!viewingTrip.archived) {
|
||||
setViewTripId(null);
|
||||
setEditMode(false);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteFromView() {
|
||||
if (!viewingTrip) return;
|
||||
const tripId = viewingTrip.id;
|
||||
setViewTripId(null);
|
||||
setEditMode(false);
|
||||
deleteTrip(tripId);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionRow}>
|
||||
<Text style={styles.sectionTitle}>Trips</Text>
|
||||
<View style={styles.actionRow}>
|
||||
<Pressable style={styles.secondaryBtnTight} onPress={openBackupModal}>
|
||||
<Text style={styles.secondaryBtnText}>Backup</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.primaryBtnTight} onPress={() => setCreateModalVisible(true)}>
|
||||
<Text style={styles.primaryBtnText}>+ New Trip</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.cardSoft}>
|
||||
{activeTrip ? (
|
||||
<View style={styles.tripHeroCard}>
|
||||
<Text style={styles.tripHeroTitle}>{activeTrip.name}</Text>
|
||||
<Text style={styles.cardMeta}>{activeTrip.location || 'No location'} · {activeTrip.startDate} → {activeTrip.endDate}</Text>
|
||||
<Text style={styles.cardMeta}>{activeTripItemCount} items · {activeTripCheckupCount} check-ups</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text style={styles.muted}>No active trips. Unarchive or create one.</Text>
|
||||
)}
|
||||
|
||||
<Text style={styles.tripListTitle}>Active Trips</Text>
|
||||
|
||||
{activeTrips
|
||||
.slice()
|
||||
.sort((a, b) => b.startDate.localeCompare(a.startDate))
|
||||
.map((trip) => (
|
||||
<View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
|
||||
<View style={styles.cardRow}>
|
||||
<View style={styles.flex}>
|
||||
<Text style={styles.cardTitle}>{trip.name}</Text>
|
||||
<Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
|
||||
{defaultTemplateTripId === trip.id ? <Text style={styles.cardMeta}>Default template</Text> : null}
|
||||
</View>
|
||||
<View style={styles.stackButtons}>
|
||||
<Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
|
||||
<Text style={styles.miniBtnText}>View</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{archivedTrips.length > 0 ? (
|
||||
<>
|
||||
<Text style={styles.tripListTitle}>Archived Trips</Text>
|
||||
{archivedTrips
|
||||
.slice()
|
||||
.sort((a, b) => b.startDate.localeCompare(a.startDate))
|
||||
.map((trip) => (
|
||||
<View key={trip.id} style={[styles.card, styles.cardArchived]}>
|
||||
<View style={styles.cardRow}>
|
||||
<View style={styles.flex}>
|
||||
<Text style={styles.cardTitle}>{trip.name}</Text>
|
||||
<Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
|
||||
<Text style={styles.cardMeta}>Archived</Text>
|
||||
</View>
|
||||
<View style={styles.stackButtons}>
|
||||
<Pressable style={styles.miniBtn} onPress={() => openView(trip.id)}>
|
||||
<Text style={styles.miniBtnText}>View</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<Modal visible={createModalVisible} animationType="slide" transparent>
|
||||
<View style={styles.modalBackdrop}>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
|
||||
<View style={styles.modalCard}>
|
||||
<View style={styles.sectionRow}>
|
||||
<Text style={styles.sectionTitle}>Create Trip</Text>
|
||||
<Pressable onPress={() => setCreateModalVisible(false)}>
|
||||
<Text style={styles.closeText}>Close</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
keyboardShouldPersistTaps="handled"
|
||||
keyboardDismissMode="interactive"
|
||||
contentContainerStyle={{ paddingBottom: 12 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<Field label="Name">
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
@@ -58,12 +214,6 @@ export default function TripsTab({
|
||||
<DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
|
||||
<DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
|
||||
|
||||
<Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
|
||||
<Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>
|
||||
</Pressable>
|
||||
|
||||
{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}>
|
||||
@@ -76,37 +226,114 @@ export default function TripsTab({
|
||||
<Text style={styles.inlineToggleText}>{tripForm.setAsDefaultTemplate ? '☑' : '☐'} Set as default template</Text>
|
||||
</Pressable>
|
||||
|
||||
<Pressable style={styles.primaryBtn} onPress={createTrip}>
|
||||
<Pressable style={styles.primaryBtn} onPress={submitCreateTrip}>
|
||||
<Text style={styles.primaryBtnText}>Create Trip</Text>
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
<Modal visible={!!viewingTrip} animationType="slide" transparent>
|
||||
<View style={styles.modalBackdrop}>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
|
||||
<View style={styles.modalCard}>
|
||||
<View style={styles.sectionRow}>
|
||||
<Text style={styles.sectionTitle}>Trip View</Text>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setViewTripId(null);
|
||||
setEditMode(false);
|
||||
}}
|
||||
>
|
||||
<Text style={styles.closeText}>Close</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{trips
|
||||
.slice()
|
||||
.sort((a, b) => b.startDate.localeCompare(a.startDate))
|
||||
.map((trip) => (
|
||||
<View key={trip.id} style={[styles.card, selectedTripId === trip.id && styles.cardActive]}>
|
||||
<View style={styles.cardRow}>
|
||||
<View style={styles.flex}>
|
||||
<Text style={styles.cardTitle}>{trip.name}</Text>
|
||||
<Text style={styles.cardMeta}>{trip.location || 'No location'} · {trip.startDate} → {trip.endDate}</Text>
|
||||
<Text style={styles.cardMeta}>{defaultTemplateTripId === trip.id ? 'Default template' : ' '}</Text>
|
||||
</View>
|
||||
<View style={styles.stackButtons}>
|
||||
<Pressable style={styles.miniBtn} onPress={() => chooseTrip(trip.id)}>
|
||||
<Text style={styles.miniBtnText}>Select</Text>
|
||||
{viewingTrip ? (
|
||||
<ScrollView
|
||||
keyboardShouldPersistTaps="handled"
|
||||
keyboardDismissMode="interactive"
|
||||
contentContainerStyle={{ paddingBottom: 12 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{!editMode ? (
|
||||
<>
|
||||
<Text style={styles.tripHeroTitle}>{viewingTrip.name}</Text>
|
||||
<Text style={styles.cardMeta}>{viewingTrip.location || 'No location'}</Text>
|
||||
<Text style={styles.cardMeta}>{viewingTrip.startDate} → {viewingTrip.endDate}</Text>
|
||||
<Text style={styles.cardMeta}>{defaultTemplateTripId === viewingTrip.id ? 'Default template trip' : 'Not default template'}</Text>
|
||||
<Text style={styles.cardMeta}>{viewingTrip.archived ? 'Archived' : 'Active'}</Text>
|
||||
|
||||
<Pressable style={styles.miniBtn} onPress={() => setEditMode(true)}>
|
||||
<Text style={styles.miniBtnText}>Edit Trip</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.miniBtn} onPress={() => setTripAsTemplate(trip.id)}>
|
||||
<Text style={styles.miniBtnText}>Template</Text>
|
||||
|
||||
<Pressable style={styles.secondaryBtn} onPress={applyTemplateFromView}>
|
||||
<Text style={styles.secondaryBtnText}>Set as Template</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.miniBtnDanger} onPress={() => deleteTrip(trip.id)}>
|
||||
<Text style={styles.miniBtnText}>Delete</Text>
|
||||
|
||||
<Pressable style={styles.secondaryBtn} onPress={toggleArchiveFromView}>
|
||||
<Text style={styles.secondaryBtnText}>{viewingTrip.archived ? 'Unarchive Trip' : 'Archive Trip'}</Text>
|
||||
</Pressable>
|
||||
|
||||
<Pressable style={styles.miniBtnDanger} onPress={deleteFromView}>
|
||||
<Text style={styles.miniBtnText}>Delete Trip</Text>
|
||||
</Pressable>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Field label="Name">
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={editForm.name}
|
||||
onChangeText={(v) => updateEditForm('name', v)}
|
||||
placeholder="Trip name"
|
||||
placeholderTextColor="#6b7280"
|
||||
onFocus={onInputFocus}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Location">
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={editForm.location}
|
||||
onChangeText={(v) => updateEditForm('location', v)}
|
||||
placeholder="Location"
|
||||
placeholderTextColor="#6b7280"
|
||||
onFocus={onInputFocus}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<DateField label="Start Date" value={editForm.startDate} onPress={() => setViewDatePicker({ visible: true, field: 'startDate' })} />
|
||||
<DateField label="End Date" value={editForm.endDate} onPress={() => setViewDatePicker({ visible: true, field: 'endDate' })} />
|
||||
|
||||
<Pressable style={styles.primaryBtn} onPress={saveEditFromView}>
|
||||
<Text style={styles.primaryBtnText}>Save Trip</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.secondaryBtn} onPress={() => setEditMode(false)}>
|
||||
<Text style={styles.secondaryBtnText}>Cancel Edit</Text>
|
||||
</Pressable>
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
) : null}
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
{trip.imageUri ? <Image source={{ uri: trip.imageUri }} style={styles.previewImageSmall} /> : null}
|
||||
</View>
|
||||
))}
|
||||
</Modal>
|
||||
|
||||
<DatePickerModal
|
||||
visible={viewDatePicker.visible}
|
||||
title={viewDatePicker.field === 'startDate' ? 'Pick start date' : 'Pick end date'}
|
||||
value={editForm[viewDatePicker.field]}
|
||||
onClose={() => setViewDatePicker((prev) => ({ ...prev, visible: false }))}
|
||||
onSelect={(ymd) => {
|
||||
updateEditForm(viewDatePicker.field, ymd);
|
||||
setViewDatePicker((prev) => ({ ...prev, visible: false }));
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -23,3 +23,34 @@ export function findActiveTripId(trips) {
|
||||
});
|
||||
return active?.id || null;
|
||||
}
|
||||
|
||||
export function findNextTripId(trips) {
|
||||
const today = parseYMD(todayYMD());
|
||||
if (!today) return null;
|
||||
|
||||
const next = trips
|
||||
.map((trip) => ({ id: trip.id, start: parseYMD(trip.startDate) }))
|
||||
.filter((trip) => !!trip.start && trip.start >= today)
|
||||
.sort((a, b) => a.start - b.start)[0];
|
||||
|
||||
return next?.id || null;
|
||||
}
|
||||
|
||||
export function findBestTripId(trips) {
|
||||
const activeTripId = findActiveTripId(trips);
|
||||
if (activeTripId) return activeTripId;
|
||||
|
||||
const nextTripId = findNextTripId(trips);
|
||||
if (nextTripId) return nextTripId;
|
||||
|
||||
const latestPast = trips
|
||||
.map((trip) => ({ id: trip.id, end: parseYMD(trip.endDate), start: parseYMD(trip.startDate) }))
|
||||
.filter((trip) => !!trip.end || !!trip.start)
|
||||
.sort((a, b) => {
|
||||
const aTime = (a.end || a.start).getTime();
|
||||
const bTime = (b.end || b.start).getTime();
|
||||
return bTime - aTime;
|
||||
})[0];
|
||||
|
||||
return latestPast?.id || null;
|
||||
}
|
||||
|
||||
23
src/utils/labels.js
Normal file
23
src/utils/labels.js
Normal file
@@ -0,0 +1,23 @@
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user