KI-AGENT: Mobile Kundenerfassung und Logbücher erweitern
This commit is contained in:
246
mobile/components/history-section.tsx
Normal file
246
mobile/components/history-section.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
Modal,
|
||||
Platform,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import {
|
||||
createResourceHistoryItem,
|
||||
fetchResourceHistory,
|
||||
HistoryItem,
|
||||
} from '@/src/lib/api';
|
||||
import { useAuth } from '@/src/providers/auth-provider';
|
||||
|
||||
const PRIMARY = '#69c350';
|
||||
|
||||
type HistorySectionProps = {
|
||||
resource: string;
|
||||
resourceId: number | string;
|
||||
};
|
||||
|
||||
function formatDateTime(value: unknown): string {
|
||||
if (!value) return '-';
|
||||
const date = new Date(String(value));
|
||||
if (Number.isNaN(date.getTime())) return String(value);
|
||||
return date.toLocaleString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
function getAuthor(item: HistoryItem): string {
|
||||
if (!item.created_by && !item.createdBy) return 'FEDEO Bot';
|
||||
return String(
|
||||
item.created_by_profile?.full_name ||
|
||||
item.created_by_profile?.fullName ||
|
||||
item.created_by_profile?.email ||
|
||||
'Benutzer'
|
||||
);
|
||||
}
|
||||
|
||||
export function HistorySection({ resource, resourceId }: HistorySectionProps) {
|
||||
const { token } = useAuth();
|
||||
const [items, setItems] = useState<HistoryItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [text, setText] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!token || !resource || !resourceId) return;
|
||||
setLoading(true);
|
||||
setLoadError(null);
|
||||
try {
|
||||
const rows = await fetchResourceHistory(token, resource, resourceId);
|
||||
setItems((rows || []).slice().reverse());
|
||||
} catch (err) {
|
||||
setLoadError(err instanceof Error ? err.message : 'Das Logbuch konnte nicht geladen werden.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [resource, resourceId, token]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
function closeModal() {
|
||||
if (saving) return;
|
||||
setModalOpen(false);
|
||||
setText('');
|
||||
setFormError(null);
|
||||
}
|
||||
|
||||
async function addItem() {
|
||||
if (!token || saving) return;
|
||||
const value = text.trim();
|
||||
if (!value) {
|
||||
setFormError('Bitte einen Text für den Logbucheintrag eingeben.');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setFormError(null);
|
||||
try {
|
||||
await createResourceHistoryItem(token, resource, resourceId, value);
|
||||
setModalOpen(false);
|
||||
setText('');
|
||||
await load();
|
||||
} catch (err) {
|
||||
setFormError(err instanceof Error ? err.message : 'Der Logbucheintrag konnte nicht gespeichert werden.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Logbuch ({items.length})</Text>
|
||||
<Pressable style={styles.addButton} onPress={() => setModalOpen(true)}>
|
||||
<Text style={styles.addButtonText}>+ Eintrag</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{loading ? <ActivityIndicator /> : null}
|
||||
{!loading && loadError ? <Text style={styles.error}>{loadError}</Text> : null}
|
||||
{!loading && !loadError && items.length === 0 ? (
|
||||
<Text style={styles.empty}>Noch keine Logbucheinträge vorhanden.</Text>
|
||||
) : null}
|
||||
|
||||
{!loading && !loadError
|
||||
? items.map((item) => (
|
||||
<View key={String(item.id)} style={styles.item}>
|
||||
<Text style={styles.itemAuthor}>{getAuthor(item)}</Text>
|
||||
<Text style={styles.itemText}>{item.text}</Text>
|
||||
<Text style={styles.itemDate}>{formatDateTime(item.created_at || item.createdAt)}</Text>
|
||||
</View>
|
||||
))
|
||||
: null}
|
||||
|
||||
<Modal visible={modalOpen} transparent animationType="fade" onRequestClose={closeModal}>
|
||||
<View style={styles.modalOverlay}>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
style={styles.modalKeyboardWrap}>
|
||||
<View style={styles.modalCard}>
|
||||
<Text style={styles.modalTitle}>Logbucheintrag hinzufügen</Text>
|
||||
<TextInput
|
||||
autoFocus
|
||||
multiline
|
||||
placeholder="Was soll im Logbuch festgehalten werden?"
|
||||
placeholderTextColor="#9ca3af"
|
||||
style={styles.input}
|
||||
value={text}
|
||||
onChangeText={setText}
|
||||
/>
|
||||
{formError ? <Text style={styles.error}>{formError}</Text> : null}
|
||||
<View style={styles.modalActions}>
|
||||
<Pressable style={styles.secondaryButton} onPress={closeModal} disabled={saving}>
|
||||
<Text style={styles.secondaryButtonText}>Abbrechen</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.primaryButton, saving ? styles.disabled : null]}
|
||||
onPress={addItem}
|
||||
disabled={saving}>
|
||||
<Text style={styles.primaryButtonText}>{saving ? 'Speichere...' : 'Speichern'}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e5e7eb',
|
||||
padding: 12,
|
||||
gap: 8,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 10,
|
||||
},
|
||||
title: { color: '#111827', fontSize: 16, fontWeight: '700' },
|
||||
addButton: {
|
||||
minHeight: 36,
|
||||
borderRadius: 8,
|
||||
backgroundColor: PRIMARY,
|
||||
paddingHorizontal: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
addButtonText: { color: '#ffffff', fontSize: 13, fontWeight: '700' },
|
||||
item: {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#e5e7eb',
|
||||
paddingTop: 9,
|
||||
gap: 2,
|
||||
},
|
||||
itemAuthor: { color: '#111827', fontSize: 13, fontWeight: '700' },
|
||||
itemText: { color: '#374151', fontSize: 14, lineHeight: 20 },
|
||||
itemDate: { color: '#6b7280', fontSize: 12 },
|
||||
empty: { color: '#6b7280', fontSize: 13, paddingVertical: 4 },
|
||||
error: { color: '#dc2626', fontSize: 13 },
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(17, 24, 39, 0.45)',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
modalKeyboardWrap: { width: '100%' },
|
||||
modalCard: { backgroundColor: '#ffffff', borderRadius: 14, padding: 16, gap: 12 },
|
||||
modalTitle: { color: '#111827', fontSize: 18, fontWeight: '700' },
|
||||
input: {
|
||||
minHeight: 120,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
color: '#111827',
|
||||
fontSize: 15,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
modalActions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 8 },
|
||||
secondaryButton: {
|
||||
minHeight: 40,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
secondaryButtonText: { color: '#374151', fontWeight: '600' },
|
||||
primaryButton: {
|
||||
minHeight: 40,
|
||||
borderRadius: 10,
|
||||
backgroundColor: PRIMARY,
|
||||
paddingHorizontal: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
primaryButtonText: { color: '#ffffff', fontWeight: '700' },
|
||||
disabled: { opacity: 0.6 },
|
||||
});
|
||||
Reference in New Issue
Block a user