983 lines
28 KiB
JavaScript
983 lines
28 KiB
JavaScript
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 { 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 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 { styles } from './styles';
|
|
|
|
const emptyTripForm = () => ({
|
|
name: '',
|
|
location: '',
|
|
startDate: todayYMD(),
|
|
endDate: todayYMD(),
|
|
copyDefaultTemplate: true,
|
|
setAsDefaultTemplate: false,
|
|
});
|
|
|
|
const emptyItemForm = () => ({
|
|
id: null,
|
|
name: '',
|
|
description: '',
|
|
category: '',
|
|
status: 'unpacked',
|
|
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);
|
|
|
|
const [selectedTripId, setSelectedTripId] = useState(null);
|
|
const [tripForm, setTripForm] = useState(emptyTripForm());
|
|
const [datePicker, setDatePicker] = useState({ visible: false, field: 'startDate' });
|
|
|
|
const [itemModalVisible, setItemModalVisible] = useState(false);
|
|
const [itemForm, setItemForm] = useState(emptyItemForm());
|
|
|
|
const [checkupSession, setCheckupSession] = useState([]);
|
|
const [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 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 [];
|
|
return data.itemsByTrip[selectedTripId] || [];
|
|
}, [data.itemsByTrip, selectedTripId]);
|
|
|
|
const selectedTripCheckups = useMemo(() => {
|
|
if (!selectedTripId) return [];
|
|
return (data.checkupsByTrip[selectedTripId] || []).slice().sort((a, b) => b.createdAt - a.createdAt);
|
|
}, [data.checkupsByTrip, selectedTripId]);
|
|
|
|
const templateTrip = useMemo(
|
|
() => data.trips.find((trip) => trip.id === data.defaultTemplateTripId) || null,
|
|
[data.trips, data.defaultTemplateTripId]
|
|
);
|
|
|
|
const checkupStats = useMemo(() => {
|
|
const total = checkupSession.length;
|
|
const correct = checkupSession.filter((entry) => entry.result === 'correct').length;
|
|
const bad = checkupSession.filter((entry) => entry.result === 'bad').length;
|
|
const pending = total - correct - bad;
|
|
return { total, correct, bad, pending };
|
|
}, [checkupSession]);
|
|
|
|
const checkupCurrentEntry = useMemo(() => {
|
|
if (!checkupFlowVisible) return null;
|
|
if (checkupFlowIndex >= checkupSession.length) return null;
|
|
return checkupSession[checkupFlowIndex] || null;
|
|
}, [checkupFlowVisible, checkupFlowIndex, checkupSession]);
|
|
|
|
function closeDialog() {
|
|
setDialogState((prev) => ({ ...prev, visible: false }));
|
|
}
|
|
|
|
function showAlert(title, message) {
|
|
setDialogState({
|
|
visible: true,
|
|
title,
|
|
message,
|
|
buttons: [{ text: 'OK', tone: 'primary', onPress: closeDialog }],
|
|
});
|
|
}
|
|
|
|
function showConfirm({ title, message, confirmText = 'Confirm', onConfirm, tone = 'danger' }) {
|
|
setDialogState({
|
|
visible: true,
|
|
title,
|
|
message,
|
|
buttons: [
|
|
{ text: 'Cancel', tone: 'neutral', onPress: closeDialog },
|
|
{
|
|
text: confirmText,
|
|
tone,
|
|
onPress: () => {
|
|
closeDialog();
|
|
if (typeof onConfirm === 'function') onConfirm();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const raw = await AsyncStorage.getItem(STORAGE_KEY);
|
|
if (raw) {
|
|
const parsed = JSON.parse(raw);
|
|
setData({ ...emptyData, ...parsed });
|
|
}
|
|
} catch {
|
|
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(() => {
|
|
showAlert('Error', 'Could not save local data.');
|
|
});
|
|
}, [data, loaded]);
|
|
|
|
useEffect(() => {
|
|
if (!loaded) return;
|
|
if (!visibleTrips.length) {
|
|
setSelectedTripId(null);
|
|
return;
|
|
}
|
|
|
|
if (selectedTripId && visibleTrips.some((trip) => trip.id === selectedTripId)) {
|
|
return;
|
|
}
|
|
|
|
const bestTripId = findBestTripId(visibleTrips);
|
|
setSelectedTripId(bestTripId || visibleTrips[0].id);
|
|
}, [visibleTrips, selectedTripId, loaded]);
|
|
|
|
useEffect(() => {
|
|
if (tab !== 'checkup') return;
|
|
createFreshCheckupSession();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedTripId, selectedTripItems.length]);
|
|
|
|
function updateTripForm(field, value) {
|
|
setTripForm((prev) => ({ ...prev, [field]: value }));
|
|
}
|
|
|
|
function updateItemForm(field, value) {
|
|
setItemForm((prev) => ({ ...prev, [field]: value }));
|
|
}
|
|
|
|
function openDatePicker(field) {
|
|
setDatePicker({ visible: true, field });
|
|
}
|
|
|
|
function onSelectDate(ymd) {
|
|
updateTripForm(datePicker.field, ymd);
|
|
setDatePicker((prev) => ({ ...prev, visible: false }));
|
|
}
|
|
|
|
async function pickImage(onPicked, options = {}) {
|
|
const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (!perm.granted) {
|
|
showAlert('Permission needed', 'Allow gallery access to select images.');
|
|
return;
|
|
}
|
|
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
|
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) {
|
|
onPicked(result.assets[0].uri);
|
|
}
|
|
}
|
|
|
|
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.');
|
|
return false;
|
|
}
|
|
|
|
const now = Date.now();
|
|
const tripId = makeId('trip');
|
|
|
|
setData((prev) => {
|
|
const next = {
|
|
...prev,
|
|
trips: [
|
|
...prev.trips,
|
|
{
|
|
id: tripId,
|
|
name: tripForm.name.trim(),
|
|
location: tripForm.location.trim(),
|
|
startDate: tripForm.startDate,
|
|
endDate: tripForm.endDate,
|
|
imageUri: '',
|
|
archived: false,
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
},
|
|
],
|
|
itemsByTrip: { ...prev.itemsByTrip, [tripId]: [] },
|
|
checkupsByTrip: { ...prev.checkupsByTrip, [tripId]: [] },
|
|
};
|
|
|
|
if (tripForm.copyDefaultTemplate && prev.defaultTemplateTripId) {
|
|
const templateItems = prev.itemsByTrip[prev.defaultTemplateTripId] || [];
|
|
next.itemsByTrip[tripId] = templateItems.map((item) => ({
|
|
...item,
|
|
id: makeId('item'),
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
}));
|
|
}
|
|
|
|
if (tripForm.setAsDefaultTemplate) {
|
|
next.defaultTemplateTripId = tripId;
|
|
}
|
|
|
|
return next;
|
|
});
|
|
|
|
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) {
|
|
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 };
|
|
const checkupsByTrip = { ...prev.checkupsByTrip };
|
|
delete itemsByTrip[tripId];
|
|
delete checkupsByTrip[tripId];
|
|
|
|
return {
|
|
...prev,
|
|
trips,
|
|
itemsByTrip,
|
|
checkupsByTrip,
|
|
defaultTemplateTripId: prev.defaultTemplateTripId === tripId ? null : prev.defaultTemplateTripId,
|
|
};
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
function openAddItemModal() {
|
|
setItemForm(emptyItemForm());
|
|
setItemModalVisible(true);
|
|
}
|
|
|
|
function openEditItemModal(item) {
|
|
setItemForm({
|
|
id: item.id,
|
|
name: item.name || '',
|
|
description: item.description || '',
|
|
category: item.category || '',
|
|
status: item.status || 'unpacked',
|
|
placement: item.placement || 'suitcase',
|
|
lentTo: item.lentTo || '',
|
|
imageUri: item.imageUri || '',
|
|
imageQuality: item.imageQuality || 'balanced',
|
|
imageAllowCrop: !!item.imageAllowCrop,
|
|
});
|
|
setItemModalVisible(true);
|
|
}
|
|
|
|
function saveItemFromModal() {
|
|
if (!selectedTripId) {
|
|
showAlert('No trip selected', 'Please select or create a trip first.');
|
|
return;
|
|
}
|
|
|
|
if (!itemForm.name.trim()) {
|
|
showAlert('Missing name', 'Item name is required.');
|
|
return;
|
|
}
|
|
|
|
const now = Date.now();
|
|
|
|
setData((prev) => {
|
|
const items = prev.itemsByTrip[selectedTripId] || [];
|
|
const existingCreatedAt = items.find((item) => item.id === itemForm.id)?.createdAt || now;
|
|
const nextItem = {
|
|
id: itemForm.id || makeId('item'),
|
|
name: itemForm.name.trim(),
|
|
description: itemForm.description.trim(),
|
|
category: itemForm.category.trim(),
|
|
status: itemForm.status,
|
|
placement: itemForm.placement,
|
|
lentTo: itemForm.status === 'lent-to' ? itemForm.lentTo.trim() : '',
|
|
imageUri: itemForm.imageUri,
|
|
imageQuality: itemForm.imageQuality,
|
|
imageAllowCrop: itemForm.imageAllowCrop,
|
|
createdAt: existingCreatedAt,
|
|
updatedAt: now,
|
|
};
|
|
|
|
const nextItems = itemForm.id
|
|
? items.map((item) => (item.id === itemForm.id ? nextItem : item))
|
|
: [...items, nextItem];
|
|
|
|
return {
|
|
...prev,
|
|
itemsByTrip: {
|
|
...prev.itemsByTrip,
|
|
[selectedTripId]: nextItems,
|
|
},
|
|
};
|
|
});
|
|
|
|
setItemModalVisible(false);
|
|
setItemForm(emptyItemForm());
|
|
}
|
|
|
|
function deleteItem(itemId) {
|
|
setData((prev) => {
|
|
const items = prev.itemsByTrip[selectedTripId] || [];
|
|
return {
|
|
...prev,
|
|
itemsByTrip: {
|
|
...prev.itemsByTrip,
|
|
[selectedTripId]: items.filter((item) => item.id !== itemId),
|
|
},
|
|
};
|
|
});
|
|
}
|
|
|
|
function quickSetItemStatus(itemId, status) {
|
|
if (!selectedTripId) return;
|
|
setData((prev) => {
|
|
const items = prev.itemsByTrip[selectedTripId] || [];
|
|
return {
|
|
...prev,
|
|
itemsByTrip: {
|
|
...prev.itemsByTrip,
|
|
[selectedTripId]: items.map((item) =>
|
|
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,
|
|
placement: patch.placement,
|
|
lentTo: patch.lentTo,
|
|
updatedAt: Date.now(),
|
|
}
|
|
: item
|
|
),
|
|
},
|
|
};
|
|
});
|
|
}
|
|
|
|
goNextInCheckup();
|
|
}
|
|
|
|
function saveCheckupSnapshot(sessionToSave) {
|
|
if (!selectedTripId) {
|
|
showAlert('No trip selected', 'Please select a trip first.');
|
|
return false;
|
|
}
|
|
|
|
if (!sessionToSave.length) {
|
|
showAlert('No items', 'Add items before creating a check-up.');
|
|
return false;
|
|
}
|
|
|
|
const pending = sessionToSave.filter((entry) => !entry.confirmed).length;
|
|
if (pending > 0) {
|
|
showAlert('Incomplete', `Please confirm all items first (${pending} remaining).`);
|
|
return false;
|
|
}
|
|
|
|
const snapshot = sessionToSave.map((entry) => ({
|
|
itemId: entry.itemId,
|
|
name: entry.name,
|
|
category: entry.category,
|
|
status: entry.current.status,
|
|
placement: entry.current.placement,
|
|
lentTo: entry.current.status === 'lent-to' ? entry.current.lentTo : '',
|
|
result: entry.result || 'pending',
|
|
}));
|
|
|
|
setData((prev) => {
|
|
const existing = prev.checkupsByTrip[selectedTripId] || [];
|
|
return {
|
|
...prev,
|
|
checkupsByTrip: {
|
|
...prev.checkupsByTrip,
|
|
[selectedTripId]: [
|
|
...existing,
|
|
{
|
|
id: makeId('checkup'),
|
|
createdAt: Date.now(),
|
|
snapshot,
|
|
stats: {
|
|
correct: snapshot.filter((entry) => entry.result === 'correct').length,
|
|
bad: snapshot.filter((entry) => entry.result === 'bad').length,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
});
|
|
|
|
return true;
|
|
}
|
|
|
|
function finishCheckupFlow() {
|
|
const ok = saveCheckupSnapshot(checkupSession);
|
|
if (!ok) return;
|
|
|
|
showAlert('Saved', 'Check-up snapshot saved.');
|
|
closeCheckupFlow();
|
|
createFreshCheckupSession();
|
|
}
|
|
|
|
function onInputFocus(event) {
|
|
const target = event?.target;
|
|
if (!target) return;
|
|
setTimeout(() => {
|
|
const scrollFn = scrollRef.current?.scrollResponderScrollNativeHandleToKeyboard;
|
|
if (typeof scrollFn === 'function') {
|
|
scrollFn(target, 90, true);
|
|
}
|
|
}, 80);
|
|
}
|
|
|
|
function openQuickAddItemFromNav() {
|
|
if (!selectedTripId) {
|
|
showAlert('No trip selected', 'Please select or create a trip first.');
|
|
return;
|
|
}
|
|
openAddItemModal();
|
|
}
|
|
|
|
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.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>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.safe, { paddingTop: topInset }]}>
|
|
<StatusBar style="light" translucent={false} />
|
|
|
|
<KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
|
|
<ScrollView
|
|
ref={scrollRef}
|
|
contentContainerStyle={styles.content}
|
|
keyboardShouldPersistTaps="handled"
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<TripPicker trips={visibleTrips} selectedTripId={selectedTripId} onChooseTrip={setSelectedTripId} />
|
|
|
|
{tab === 'trips' && (
|
|
<TripsTab
|
|
tripForm={tripForm}
|
|
updateTripForm={updateTripForm}
|
|
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}
|
|
/>
|
|
)}
|
|
|
|
{tab === 'items' && (
|
|
<ItemsTab
|
|
selectedTrip={selectedTrip}
|
|
selectedTripItems={selectedTripItems}
|
|
openAddItemModal={openAddItemModal}
|
|
openEditItemModal={openEditItemModal}
|
|
deleteItem={deleteItem}
|
|
quickSetItemStatus={quickSetItemStatus}
|
|
bulkSetItemStatus={bulkSetItemStatus}
|
|
/>
|
|
)}
|
|
|
|
{tab === 'checkup' && (
|
|
<CheckupTab
|
|
selectedTrip={selectedTrip}
|
|
selectedTripItems={selectedTripItems}
|
|
checkupStats={checkupStats}
|
|
startCheckupFlow={startCheckupFlow}
|
|
/>
|
|
)}
|
|
|
|
{tab === 'history' && (
|
|
<HistoryTab
|
|
selectedTrip={selectedTrip}
|
|
selectedTripCheckups={selectedTripCheckups}
|
|
selectedCheckupId={selectedCheckupId}
|
|
setSelectedCheckupId={setSelectedCheckupId}
|
|
onDeleteCheckup={deleteCheckup}
|
|
/>
|
|
)}
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
|
|
<BottomTab current={tab} onChange={setTab} onAddItem={openQuickAddItemFromNav} canAddItem={!!selectedTripId} />
|
|
|
|
<DatePickerModal
|
|
visible={datePicker.visible}
|
|
title={datePicker.field === 'startDate' ? 'Pick start date' : 'Pick end date'}
|
|
value={tripForm[datePicker.field]}
|
|
onClose={() => setDatePicker((prev) => ({ ...prev, visible: false }))}
|
|
onSelect={onSelectDate}
|
|
/>
|
|
|
|
<ItemModal
|
|
visible={itemModalVisible}
|
|
itemForm={itemForm}
|
|
setItemModalVisible={setItemModalVisible}
|
|
updateItemForm={updateItemForm}
|
|
pickItemImage={(options) => pickImage((uri) => updateItemForm('imageUri', uri), options)}
|
|
takeItemImage={(options) => takeImage((uri) => updateItemForm('imageUri', uri), options)}
|
|
saveItemFromModal={saveItemFromModal}
|
|
/>
|
|
|
|
<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>
|
|
);
|
|
}
|