feat(#3,#4,#7): add backup/restore, polish labels, and rename bulk actions

2026-04-18 19:30:03 +02:00
parent 0e0ab4a059
commit a9ee91daf3
9 changed files with 176 additions and 13 deletions
--- a/src/AppRoot.js
+++ b/src/AppRoot.js
@@ -9,6 +9,7 @@ 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';
@@ -85,6 +86,8 @@ export default function AppRoot() {

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

  const topInset = Platform.OS === 'android' ? (RNStatusBar.currentHeight || 0) + 10 : 0;
  const fakeLoadTotalMs = useMemo(() => 1200 + Math.floor(Math.random() * 2801), []);
@@ -785,6 +788,58 @@ export default function AppRoot() {
    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 }]}>
@@ -832,6 +887,7 @@ export default function AppRoot() {
              openDatePicker={openDatePicker}
              activeTripItemCount={selectedTripItems.length}
              activeTripCheckupCount={selectedTripCheckups.length}
+              openBackupModal={openBackupModal}
            />
          )}

@@ -905,6 +961,15 @@ export default function AppRoot() {
        onFinish={finishCheckupFlow}
      />

+      <BackupModal
+        visible={backupModalVisible}
+        onClose={() => setBackupModalVisible(false)}
+        exportJson={buildBackupJson()}
+        importJson={backupImportText}
+        setImportJson={setBackupImportText}
+        applyImport={applyBackupImport}
+      />
+
      <AppDialogModal
        visible={dialogState.visible}
        title={dialogState.title}
--- a/src/components/ItemCard.js
+++ b/src/components/ItemCard.js
@@ -2,6 +2,7 @@ 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';
@@ -29,9 +30,9 @@ export default function ItemCard({ item, onEdit, onDelete, onQuickPack, onQuickU
        <View style={styles.cardRow}>
          <View style={styles.flex}>
            <Text style={styles.itemTitle}>{item.name}</Text>
-            <Text style={styles.itemMeta}>{item.category || 'uncategorized'} · {item.status}</Text>
+            <Text style={styles.itemMeta}>{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.status === 'lent-to' && !!item.lentTo ? <Text style={styles.itemMeta}>Borrower: {item.lentTo}</Text> : null}
            {!!item.description ? <Text style={styles.itemMeta}>{item.description}</Text> : null}
          </View>
          <View style={styles.stackButtons}>
--- a/src/modals/BackupModal.js
+++ b/src/modals/BackupModal.js
@@ -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>
+  );
+}
--- a/src/modals/CheckupFlowModal.js
+++ b/src/modals/CheckupFlowModal.js
@@ -4,6 +4,7 @@ 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,
@@ -64,8 +65,7 @@ export default function CheckupFlowModal({
                <Text style={styles.cardTitle}>{entry.name}</Text>
                <Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
                <Text style={styles.cardMeta}>
-                  Current: {entry.current.status} · {entry.current.placement}
-                  {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
+                  Current: {formatStatusLabel(entry.current.status, entry.current.lentTo)} · {entry.current.placement}
                </Text>

                {mode === 'question' ? (
--- a/src/styles.js
+++ b/src/styles.js
@@ -186,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',
--- a/src/tabs/HistoryTab.js
+++ b/src/tabs/HistoryTab.js
@@ -1,6 +1,7 @@
 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, onDeleteCheckup }) {
  return (
@@ -32,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>
              ))}
--- a/src/tabs/ItemsTab.js
+++ b/src/tabs/ItemsTab.js
@@ -3,6 +3,7 @@ import { 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,
@@ -52,10 +53,10 @@ export default function ItemsTab({
          <Text style={styles.cardTitle}>Quick actions</Text>
          <View style={styles.actionRow}>
            <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => bulkSetItemStatus(filteredItems.map((x) => x.id), 'packed')}>
-              <Text style={styles.secondaryBtnText}>Pack shown ({filteredItems.length})</Text>
+              <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 shown ({filteredItems.length})</Text>
+              <Text style={styles.secondaryBtnText}>Unpack All ({filteredItems.length})</Text>
            </Pressable>
          </View>
        </View>
@@ -71,7 +72,7 @@ export default function ItemsTab({
              const active = statusFilter === status;
              return (
                <Pressable key={status} style={[styles.chip, active && styles.chipActive]} onPress={() => setStatusFilter(status)}>
-                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{status}</Text>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{status === 'all' ? formatFilterLabel(status) : formatStatusLabel(status)}</Text>
                </Pressable>
              );
            })}
@@ -83,7 +84,7 @@ export default function ItemsTab({
              const active = categoryFilter === category;
              return (
                <Pressable key={category} style={[styles.chip, active && styles.chipActive]} onPress={() => setCategoryFilter(category)}>
-                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{category}</Text>
+                  <Text style={[styles.chipText, active && styles.chipTextActive]}>{formatFilterLabel(category)}</Text>
                </Pressable>
              );
            })}
--- a/src/tabs/TripsTab.js
+++ b/src/tabs/TripsTab.js
@@ -38,6 +38,7 @@ export default function TripsTab({
  openDatePicker,
  activeTripItemCount,
  activeTripCheckupCount,
+  openBackupModal,
 }) {
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [viewTripId, setViewTripId] = useState(null);
@@ -105,9 +106,14 @@ export default function TripsTab({
    <View style={styles.section}>
      <View style={styles.sectionRow}>
        <Text style={styles.sectionTitle}>Trips</Text>
-        <Pressable style={styles.primaryBtnTight} onPress={() => setCreateModalVisible(true)}>
-          <Text style={styles.primaryBtnText}>+ New Trip</Text>
-        </Pressable>
+        <View 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>

      {activeTrip ? (
--- a/src/utils/labels.js
+++ b/src/utils/labels.js
@@ -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);
+}