Kibin
6fe6ebef13
- lib/pinService.ts: PIN storage/verification via expo-secure-store - lib/syncService.ts: sync abstraction with full merge logic (mDNS/TCP stubbed) - app/lock.tsx: full-screen PIN lock with biometric support - components/ui/PinPad.tsx: reusable 6-digit PIN pad component - components/sync/QRScanner.tsx: QR code scanner via expo-camera - app/(tabs)/sync.tsx: Sync tab with QR display, partner input, history - app/sync-progress.tsx: animated sync progress screen with summary - app/(tabs)/settings.tsx: full settings with PIN setup, security, data sections - app/(tabs)/_layout.tsx: added Sync tab (RefreshCw icon) - app/_layout.tsx: AppState listener locks app after 60s background - package.json: added expo-secure-store, react-native-qrcode-svg
600 lines
15 KiB
TypeScript
600 lines
15 KiB
TypeScript
// app/(tabs)/sync.tsx — Sync Tab
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
TextInput,
|
|
Alert,
|
|
Modal,
|
|
SafeAreaView,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import { router } from 'expo-router';
|
|
import {
|
|
RefreshCw,
|
|
QrCode,
|
|
Camera,
|
|
Wifi,
|
|
Clock,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Share2,
|
|
AlertCircle,
|
|
} from 'lucide-react-native';
|
|
import { useUserStore } from '@/store/useUserStore';
|
|
import { getSyncHistory, SyncLogEntry } from '@/lib/syncService';
|
|
import QRScanner from '@/components/sync/QRScanner';
|
|
|
|
// Lazy-load QRCode to handle missing package gracefully
|
|
let QRCode: any = null;
|
|
try {
|
|
QRCode = require('react-native-qrcode-svg').default;
|
|
} catch {
|
|
QRCode = null;
|
|
}
|
|
|
|
function formatDate(ts: number): string {
|
|
return new Date(ts * 1000).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
}
|
|
|
|
export default function SyncScreen() {
|
|
const user = useUserStore((s) => s.user);
|
|
const shareId = user?.shareId ?? 'TL-????????';
|
|
|
|
const [syncHistory, setSyncHistory] = useState<SyncLogEntry[]>([]);
|
|
const [loadingHistory, setLoadingHistory] = useState(true);
|
|
const [partnerShareId, setPartnerShareId] = useState('');
|
|
const [showScanner, setShowScanner] = useState(false);
|
|
const [showHowTo, setShowHowTo] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadHistory();
|
|
}, []);
|
|
|
|
const loadHistory = async () => {
|
|
try {
|
|
const history = await getSyncHistory();
|
|
setSyncHistory(history);
|
|
} catch (e) {
|
|
console.error('Failed to load sync history:', e);
|
|
} finally {
|
|
setLoadingHistory(false);
|
|
}
|
|
};
|
|
|
|
const handleScanned = useCallback((scannedId: string) => {
|
|
setShowScanner(false);
|
|
setPartnerShareId(scannedId);
|
|
}, []);
|
|
|
|
const handleStartSync = () => {
|
|
const trimmed = partnerShareId.trim().toUpperCase();
|
|
if (!trimmed.match(/^TL-[A-Z0-9]{8}$/)) {
|
|
Alert.alert(
|
|
'Invalid Share ID',
|
|
'Please enter a valid Share ID in the format TL-XXXXXXXX'
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (trimmed === shareId) {
|
|
Alert.alert('Same Device', 'You cannot sync with yourself.');
|
|
return;
|
|
}
|
|
|
|
// Navigate to sync-progress (actual sync requires bare workflow)
|
|
Alert.alert(
|
|
'WiFi Sync Not Available',
|
|
'Direct WiFi sync requires expo-dev-client and bare workflow.\n\nShare IDs can be exchanged manually. Network sync will be available in a future release.',
|
|
[
|
|
{ text: 'OK' },
|
|
{
|
|
text: 'View Progress Demo',
|
|
onPress: () =>
|
|
router.push({
|
|
pathname: '/sync-progress',
|
|
params: {
|
|
partnerName: trimmed,
|
|
sentCount: '0',
|
|
receivedCount: '0',
|
|
conflictCount: '0',
|
|
},
|
|
}),
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safe}>
|
|
<ScrollView
|
|
style={styles.container}
|
|
contentContainerStyle={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<RefreshCw size={24} color="#1A6B72" />
|
|
<Text style={styles.headerTitle}>Sync</Text>
|
|
</View>
|
|
|
|
{/* ── Your Share ID ── */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Your Share ID</Text>
|
|
<View style={styles.qrCard}>
|
|
{QRCode ? (
|
|
<View style={styles.qrCodeWrapper}>
|
|
<QRCode
|
|
value={shareId}
|
|
size={180}
|
|
color="#111827"
|
|
backgroundColor="#FFFFFF"
|
|
/>
|
|
</View>
|
|
) : (
|
|
<View style={styles.qrPlaceholder}>
|
|
<QrCode size={64} color="#9CA3AF" />
|
|
<Text style={styles.qrPlaceholderText}>QR Code</Text>
|
|
<Text style={styles.qrPlaceholderSub}>
|
|
Install react-native-qrcode-svg to display
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.shareIdRow}>
|
|
<Text style={styles.shareIdLabel}>Share ID</Text>
|
|
<View style={styles.shareIdBadge}>
|
|
<Share2 size={14} color="#1A6B72" />
|
|
<Text style={styles.shareIdText}>{shareId}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.shareIdHint}>
|
|
Show this QR code to your partner so they can connect to you.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* ── Connect to Partner ── */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Connect to Partner</Text>
|
|
<View style={styles.card}>
|
|
{/* Scan QR button */}
|
|
<TouchableOpacity
|
|
style={styles.scanBtn}
|
|
onPress={() => setShowScanner(true)}
|
|
>
|
|
<Camera size={20} color="#fff" />
|
|
<Text style={styles.scanBtnText}>Scan Partner QR Code</Text>
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.orRow}>
|
|
<View style={styles.orLine} />
|
|
<Text style={styles.orText}>or enter manually</Text>
|
|
<View style={styles.orLine} />
|
|
</View>
|
|
|
|
{/* Manual input */}
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="TL-XXXXXXXX"
|
|
placeholderTextColor="#9CA3AF"
|
|
value={partnerShareId}
|
|
onChangeText={setPartnerShareId}
|
|
autoCapitalize="characters"
|
|
maxLength={11}
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.connectBtn,
|
|
!partnerShareId && styles.connectBtnDisabled,
|
|
]}
|
|
onPress={handleStartSync}
|
|
disabled={!partnerShareId}
|
|
>
|
|
<RefreshCw size={18} color="#fff" />
|
|
<Text style={styles.connectBtnText}>Start Sync</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
{/* ── Discovered Devices ── */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Discovered Devices</Text>
|
|
<View style={[styles.card, styles.wifiNotice]}>
|
|
<AlertCircle size={20} color="#F59E0B" />
|
|
<View style={{ flex: 1, gap: 4 }}>
|
|
<Text style={styles.wifiNoticeTitle}>WiFi Sync Requires Setup</Text>
|
|
<Text style={styles.wifiNoticeText}>
|
|
Automatic device discovery (mDNS) requires expo-dev-client and
|
|
bare workflow. Exchange Share IDs manually for now.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* ── Sync History ── */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Sync History</Text>
|
|
<View style={styles.card}>
|
|
{loadingHistory ? (
|
|
<ActivityIndicator color="#1A6B72" style={{ padding: 16 }} />
|
|
) : syncHistory.length === 0 ? (
|
|
<View style={styles.emptyHistory}>
|
|
<Clock size={32} color="#D1D5DB" />
|
|
<Text style={styles.emptyHistoryText}>No syncs yet</Text>
|
|
</View>
|
|
) : (
|
|
syncHistory.map((entry) => (
|
|
<View key={entry.id} style={styles.historyItem}>
|
|
<View style={styles.historyLeft}>
|
|
<Text style={styles.historyPartner}>
|
|
{entry.partner_name ?? entry.partner_id}
|
|
</Text>
|
|
<Text style={styles.historyDate}>
|
|
{formatDate(entry.synced_at)}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.historyRight}>
|
|
<Text style={styles.historySent}>↑ {entry.sent_count}</Text>
|
|
<Text style={styles.historyReceived}>↓ {entry.received_count}</Text>
|
|
</View>
|
|
</View>
|
|
))
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
{/* ── How to Sync ── */}
|
|
<View style={styles.section}>
|
|
<TouchableOpacity
|
|
style={styles.howToToggle}
|
|
onPress={() => setShowHowTo(!showHowTo)}
|
|
>
|
|
<Text style={styles.sectionTitle}>How to Sync</Text>
|
|
{showHowTo ? (
|
|
<ChevronUp size={18} color="#6B7280" />
|
|
) : (
|
|
<ChevronDown size={18} color="#6B7280" />
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
{showHowTo && (
|
|
<View style={styles.card}>
|
|
{HOW_TO_STEPS.map((step, i) => (
|
|
<View key={i} style={styles.howToStep}>
|
|
<View style={styles.howToNumber}>
|
|
<Text style={styles.howToNumberText}>{i + 1}</Text>
|
|
</View>
|
|
<View style={{ flex: 1, gap: 2 }}>
|
|
<Text style={styles.howToStepTitle}>{step.title}</Text>
|
|
<Text style={styles.howToStepBody}>{step.body}</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{/* QR Scanner Modal */}
|
|
<Modal
|
|
visible={showScanner}
|
|
animationType="slide"
|
|
onRequestClose={() => setShowScanner(false)}
|
|
>
|
|
<QRScanner
|
|
onScanned={handleScanned}
|
|
onCancel={() => setShowScanner(false)}
|
|
/>
|
|
</Modal>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const HOW_TO_STEPS = [
|
|
{
|
|
title: 'Open TerritoryLog on both devices',
|
|
body: 'Both devices must have TerritoryLog installed and be on the same WiFi network.',
|
|
},
|
|
{
|
|
title: 'Share your QR code or Share ID',
|
|
body: 'Show the QR code above to your partner, or tell them your Share ID (TL-XXXXXXXX).',
|
|
},
|
|
{
|
|
title: 'Scan or enter their Share ID',
|
|
body: "Use the scanner or type their Share ID into the input field on one device.",
|
|
},
|
|
{
|
|
title: 'Start sync',
|
|
body: 'Tap "Start Sync". Records are merged intelligently — the most recently updated version of each record wins.',
|
|
},
|
|
{
|
|
title: 'Done!',
|
|
body: 'Both devices will have the same up-to-date data. No cloud required.',
|
|
},
|
|
];
|
|
|
|
const styles = StyleSheet.create({
|
|
safe: {
|
|
flex: 1,
|
|
backgroundColor: '#F8F4EF',
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
paddingBottom: 32,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
paddingHorizontal: 20,
|
|
paddingTop: 20,
|
|
paddingBottom: 8,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 26,
|
|
fontWeight: '700',
|
|
color: '#111827',
|
|
},
|
|
section: {
|
|
marginTop: 20,
|
|
paddingHorizontal: 16,
|
|
gap: 8,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: '#6B7280',
|
|
letterSpacing: 0.6,
|
|
textTransform: 'uppercase',
|
|
},
|
|
card: {
|
|
backgroundColor: '#fff',
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
gap: 12,
|
|
},
|
|
qrCard: {
|
|
backgroundColor: '#fff',
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
qrCodeWrapper: {
|
|
padding: 12,
|
|
backgroundColor: '#fff',
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: '#E5E7EB',
|
|
},
|
|
qrPlaceholder: {
|
|
width: 180,
|
|
height: 180,
|
|
backgroundColor: '#F3F4F6',
|
|
borderRadius: 12,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
borderWidth: 2,
|
|
borderColor: '#E5E7EB',
|
|
borderStyle: 'dashed',
|
|
},
|
|
qrPlaceholderText: {
|
|
color: '#6B7280',
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
qrPlaceholderSub: {
|
|
color: '#9CA3AF',
|
|
fontSize: 11,
|
|
textAlign: 'center',
|
|
paddingHorizontal: 12,
|
|
},
|
|
shareIdRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
},
|
|
shareIdLabel: {
|
|
color: '#6B7280',
|
|
fontSize: 13,
|
|
},
|
|
shareIdBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
backgroundColor: '#EFF9F9',
|
|
paddingVertical: 6,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
borderColor: '#B2DFDF',
|
|
},
|
|
shareIdText: {
|
|
color: '#1A6B72',
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
letterSpacing: 1,
|
|
fontFamily: 'monospace',
|
|
},
|
|
shareIdHint: {
|
|
color: '#9CA3AF',
|
|
fontSize: 12,
|
|
textAlign: 'center',
|
|
},
|
|
scanBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 8,
|
|
backgroundColor: '#1A6B72',
|
|
borderRadius: 12,
|
|
paddingVertical: 13,
|
|
},
|
|
scanBtnText: {
|
|
color: '#fff',
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
},
|
|
orRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
},
|
|
orLine: {
|
|
flex: 1,
|
|
height: 1,
|
|
backgroundColor: '#E5E7EB',
|
|
},
|
|
orText: {
|
|
color: '#9CA3AF',
|
|
fontSize: 12,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: '#E5E7EB',
|
|
borderRadius: 12,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 16,
|
|
fontSize: 16,
|
|
color: '#111827',
|
|
letterSpacing: 1,
|
|
fontFamily: 'monospace',
|
|
},
|
|
connectBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 8,
|
|
backgroundColor: '#115E67',
|
|
borderRadius: 12,
|
|
paddingVertical: 13,
|
|
},
|
|
connectBtnDisabled: {
|
|
backgroundColor: '#D1D5DB',
|
|
},
|
|
connectBtnText: {
|
|
color: '#fff',
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
},
|
|
wifiNotice: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
gap: 12,
|
|
backgroundColor: '#FFFBEB',
|
|
borderWidth: 1,
|
|
borderColor: '#FDE68A',
|
|
},
|
|
wifiNoticeTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#92400E',
|
|
},
|
|
wifiNoticeText: {
|
|
fontSize: 12,
|
|
color: '#92400E',
|
|
lineHeight: 18,
|
|
},
|
|
emptyHistory: {
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingVertical: 16,
|
|
},
|
|
emptyHistoryText: {
|
|
color: '#9CA3AF',
|
|
fontSize: 14,
|
|
},
|
|
historyItem: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#F3F4F6',
|
|
},
|
|
historyLeft: {
|
|
gap: 2,
|
|
},
|
|
historyPartner: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#111827',
|
|
},
|
|
historyDate: {
|
|
fontSize: 12,
|
|
color: '#9CA3AF',
|
|
},
|
|
historyRight: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
},
|
|
historySent: {
|
|
fontSize: 13,
|
|
color: '#1A6B72',
|
|
fontWeight: '600',
|
|
},
|
|
historyReceived: {
|
|
fontSize: 13,
|
|
color: '#10B981',
|
|
fontWeight: '600',
|
|
},
|
|
howToToggle: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
howToStep: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
alignItems: 'flex-start',
|
|
},
|
|
howToNumber: {
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 12,
|
|
backgroundColor: '#1A6B72',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flexShrink: 0,
|
|
marginTop: 1,
|
|
},
|
|
howToNumberText: {
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
fontWeight: '700',
|
|
},
|
|
howToStepTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#111827',
|
|
},
|
|
howToStepBody: {
|
|
fontSize: 13,
|
|
color: '#6B7280',
|
|
lineHeight: 18,
|
|
},
|
|
});
|