KI-AGENT: Mobile Kundenerfassung und Logbücher erweitern

This commit is contained in:
2026-09-08 21:50:31 +02:00
parent 1c39b69513
commit 5e1631e2d3
7 changed files with 621 additions and 27 deletions

View File

@@ -127,7 +127,10 @@ export default async function resourceHistoryRoutes(server: FastifyInstance) {
const data = await server.db
.select()
.from(historyitems)
.where(eq(column, parseId(id)))
.where(and(
eq(historyitems.tenant, req.user?.tenant_id),
eq(column, parseId(id))
))
.orderBy(asc(historyitems.createdAt));
const userIds = Array.from(

View File

@@ -17,6 +17,7 @@ import * as DocumentPicker from 'expo-document-picker';
import * as WebBrowser from 'expo-web-browser';
import { BarcodeScanningResult, BarcodeType, CameraView, useCameraPermissions } from 'expo-camera';
import { HistorySection } from '@/components/history-section';
import {
createCustomerInventoryItem,
CreatedDocument,
@@ -117,10 +118,18 @@ export default function CustomerDetailScreen() {
return [
{ label: 'Name', value: String(customer.name || '-') },
{ label: 'Kundennummer', value: String(customer.customerNumber || '-') },
{ label: 'Typ', value: String(customer.type || '-') },
{ label: 'Kundentyp', value: customer.isCompany ? 'Firma' : 'Privat' },
{ label: 'Namenszusatz', value: String(customer.nameAddition || '-') },
{ label: 'E-Mail', value: String(infoData.email || customer.email || '-') },
{ label: 'Rechnungs-E-Mail', value: String(infoData.invoiceEmail || '-') },
{ label: 'Telefon', value: String(infoData.tel || customer.phone || '-') },
{ label: 'Mobilnummer', value: String(infoData.mobileTel || '-') },
{ label: 'Straße', value: String(infoData.street || '-') },
{ label: 'Adresszusatz', value: String(infoData.special || '-') },
{ label: 'PLZ / Stadt', value: [infoData.zip, infoData.city].filter(Boolean).join(' ') || '-' },
{ label: 'Land', value: String(infoData.country || '-') },
{ label: 'Webseite', value: String(infoData.web || '-') },
{ label: 'USt-Id', value: String(infoData.ustid || '-') },
{ label: 'Erstellt', value: formatDateTime(customer.createdAt || customer.created_at) },
{ label: 'Aktualisiert', value: formatDateTime(customer.updatedAt || customer.updated_at) },
];
@@ -373,6 +382,8 @@ export default function CustomerDetailScreen() {
) : null}
</View>
<HistorySection resource="customers" resourceId={customerId} />
<View style={styles.card}>
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Kundeninventar ({inventoryItems.length})</Text>

View File

@@ -34,8 +34,25 @@ export default function CustomersScreen() {
const [createOpen, setCreateOpen] = useState(false);
const [saving, setSaving] = useState(false);
const [createError, setCreateError] = useState<string | null>(null);
const [isCompanyInput, setIsCompanyInput] = useState(false);
const [nameInput, setNameInput] = useState('');
const [nameAdditionInput, setNameAdditionInput] = useState('');
const [salutationInput, setSalutationInput] = useState('');
const [titleInput, setTitleInput] = useState('');
const [firstnameInput, setFirstnameInput] = useState('');
const [lastnameInput, setLastnameInput] = useState('');
const [numberInput, setNumberInput] = useState('');
const [streetInput, setStreetInput] = useState('');
const [addressAdditionInput, setAddressAdditionInput] = useState('');
const [zipInput, setZipInput] = useState('');
const [cityInput, setCityInput] = useState('');
const [countryInput, setCountryInput] = useState('Deutschland');
const [phoneInput, setPhoneInput] = useState('');
const [mobileInput, setMobileInput] = useState('');
const [emailInput, setEmailInput] = useState('');
const [invoiceEmailInput, setInvoiceEmailInput] = useState('');
const [websiteInput, setWebsiteInput] = useState('');
const [vatIdInput, setVatIdInput] = useState('');
const [notesInput, setNotesInput] = useState('');
const filtered = useMemo(
@@ -72,17 +89,36 @@ export default function CustomersScreen() {
function closeCreateModal() {
setCreateOpen(false);
setCreateError(null);
setIsCompanyInput(false);
setNameInput('');
setNameAdditionInput('');
setSalutationInput('');
setTitleInput('');
setFirstnameInput('');
setLastnameInput('');
setNumberInput('');
setStreetInput('');
setAddressAdditionInput('');
setZipInput('');
setCityInput('');
setCountryInput('Deutschland');
setPhoneInput('');
setMobileInput('');
setEmailInput('');
setInvoiceEmailInput('');
setWebsiteInput('');
setVatIdInput('');
setNotesInput('');
}
async function onCreateCustomer() {
if (!token) return;
const name = nameInput.trim();
const name = isCompanyInput
? nameInput.trim()
: [salutationInput, titleInput, firstnameInput, lastnameInput].map((value) => value.trim()).filter(Boolean).join(' ');
if (!name) {
setCreateError('Bitte einen Namen eingeben.');
setCreateError(isCompanyInput ? 'Bitte einen Firmennamen eingeben.' : 'Bitte mindestens Vor- oder Nachname eingeben.');
return;
}
@@ -93,6 +129,25 @@ export default function CustomersScreen() {
await createCustomer(token, {
name,
customerNumber: numberInput.trim() || null,
isCompany: isCompanyInput,
nameAddition: nameAdditionInput.trim() || null,
salutation: salutationInput.trim() || null,
title: titleInput.trim() || null,
firstname: firstnameInput.trim() || null,
lastname: lastnameInput.trim() || null,
infoData: {
street: streetInput.trim() || null,
special: addressAdditionInput.trim() || null,
zip: zipInput.trim() || null,
city: cityInput.trim() || null,
country: countryInput.trim() || null,
tel: phoneInput.trim() || null,
mobileTel: mobileInput.trim() || null,
email: emailInput.trim() || null,
invoiceEmail: invoiceEmailInput.trim() || null,
web: websiteInput.trim() || null,
ustid: vatIdInput.trim() || null,
},
notes: notesInput.trim() || null,
});
closeCreateModal();
@@ -168,22 +223,178 @@ export default function CustomersScreen() {
<View style={styles.modalCard}>
<Text style={styles.modalTitle}>Neuer Kunde</Text>
<ScrollView
style={styles.modalScroll}
contentContainerStyle={styles.modalForm}
keyboardShouldPersistTaps="handled">
<Text style={styles.fieldLabel}>Kundentyp</Text>
<View style={styles.segmentedControl}>
<Pressable
style={[styles.segment, !isCompanyInput ? styles.segmentActive : null]}
onPress={() => setIsCompanyInput(false)}>
<Text style={[styles.segmentText, !isCompanyInput ? styles.segmentTextActive : null]}>Privat</Text>
</Pressable>
<Pressable
style={[styles.segment, isCompanyInput ? styles.segmentActive : null]}
onPress={() => setIsCompanyInput(true)}>
<Text style={[styles.segmentText, isCompanyInput ? styles.segmentTextActive : null]}>Firma</Text>
</Pressable>
</View>
<Text style={styles.sectionLabel}>Allgemeines</Text>
{isCompanyInput ? (
<>
<TextInput
placeholder="Name"
placeholder="Firmenname *"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={nameInput}
onChangeText={setNameInput}
/>
<TextInput
placeholder="Kundennummer (optional)"
placeholder="Firmenname Zusatz"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={nameAdditionInput}
onChangeText={setNameAdditionInput}
/>
</>
) : (
<>
<View style={styles.inputRow}>
<TextInput
placeholder="Anrede"
placeholderTextColor="#9ca3af"
style={[styles.searchInput, styles.flexInput]}
value={salutationInput}
onChangeText={setSalutationInput}
/>
<TextInput
placeholder="Titel"
placeholderTextColor="#9ca3af"
style={[styles.searchInput, styles.flexInput]}
value={titleInput}
onChangeText={setTitleInput}
/>
</View>
<TextInput
placeholder="Vorname"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={firstnameInput}
onChangeText={setFirstnameInput}
/>
<TextInput
placeholder="Nachname"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={lastnameInput}
onChangeText={setLastnameInput}
/>
</>
)}
<TextInput
placeholder="Kundennummer (wird sonst automatisch vergeben)"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={numberInput}
onChangeText={setNumberInput}
/>
<Text style={styles.sectionLabel}>Adresse</Text>
<TextInput
placeholder="Notizen (optional)"
placeholder="Straße + Hausnummer"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={streetInput}
onChangeText={setStreetInput}
/>
<TextInput
placeholder="Adresszusatz"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={addressAdditionInput}
onChangeText={setAddressAdditionInput}
/>
<View style={styles.inputRow}>
<TextInput
placeholder="PLZ"
placeholderTextColor="#9ca3af"
style={[styles.searchInput, styles.zipInput]}
value={zipInput}
onChangeText={setZipInput}
keyboardType="numbers-and-punctuation"
/>
<TextInput
placeholder="Stadt"
placeholderTextColor="#9ca3af"
style={[styles.searchInput, styles.flexInput]}
value={cityInput}
onChangeText={setCityInput}
/>
</View>
<TextInput
placeholder="Land"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={countryInput}
onChangeText={setCountryInput}
/>
<Text style={styles.sectionLabel}>Kontaktdaten</Text>
<TextInput
placeholder="E-Mail"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={emailInput}
onChangeText={setEmailInput}
autoCapitalize="none"
keyboardType="email-address"
/>
<TextInput
placeholder="E-Mail für Rechnungen"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={invoiceEmailInput}
onChangeText={setInvoiceEmailInput}
autoCapitalize="none"
keyboardType="email-address"
/>
<TextInput
placeholder="Telefon"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={phoneInput}
onChangeText={setPhoneInput}
keyboardType="phone-pad"
/>
<TextInput
placeholder="Mobilnummer"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={mobileInput}
onChangeText={setMobileInput}
keyboardType="phone-pad"
/>
<TextInput
placeholder="Webseite"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={websiteInput}
onChangeText={setWebsiteInput}
autoCapitalize="none"
keyboardType="url"
/>
<TextInput
placeholder="USt-Id"
placeholderTextColor="#9ca3af"
style={styles.searchInput}
value={vatIdInput}
onChangeText={setVatIdInput}
autoCapitalize="characters"
/>
<TextInput
placeholder="Notizen"
placeholderTextColor="#9ca3af"
style={[styles.searchInput, styles.multilineInput]}
value={notesInput}
@@ -191,7 +402,8 @@ export default function CustomersScreen() {
multiline
/>
{createError ? <Text style={styles.error}>{createError}</Text> : null}
{createError ? <Text style={styles.formError}>{createError}</Text> : null}
</ScrollView>
<View style={styles.modalActions}>
<Pressable style={styles.secondaryButton} onPress={closeCreateModal} disabled={saving}>
@@ -313,6 +525,7 @@ const styles = StyleSheet.create({
borderRadius: 14,
padding: 16,
gap: 10,
maxHeight: '92%',
},
modalTitle: {
color: '#111827',
@@ -323,6 +536,63 @@ const styles = StyleSheet.create({
minHeight: 92,
textAlignVertical: 'top',
},
modalScroll: {
flexShrink: 1,
},
modalForm: {
gap: 10,
paddingBottom: 4,
},
fieldLabel: {
color: '#374151',
fontSize: 13,
fontWeight: '600',
},
sectionLabel: {
color: '#111827',
fontSize: 14,
fontWeight: '700',
marginTop: 6,
},
segmentedControl: {
flexDirection: 'row',
borderWidth: 1,
borderColor: '#d1d5db',
borderRadius: 10,
padding: 3,
gap: 3,
},
segment: {
flex: 1,
minHeight: 36,
borderRadius: 7,
alignItems: 'center',
justifyContent: 'center',
},
segmentActive: {
backgroundColor: '#eff9ea',
},
segmentText: {
color: '#6b7280',
fontWeight: '600',
},
segmentTextActive: {
color: '#3d7a30',
},
inputRow: {
flexDirection: 'row',
gap: 8,
},
flexInput: {
flex: 1,
},
zipInput: {
width: 105,
},
formError: {
color: '#dc2626',
fontSize: 13,
},
modalActions: {
flexDirection: 'row',
justifyContent: 'flex-end',

View File

@@ -5,6 +5,7 @@ import * as DocumentPicker from 'expo-document-picker';
import * as ImagePicker from 'expo-image-picker';
import * as WebBrowser from 'expo-web-browser';
import { HistorySection } from '@/components/history-section';
import { fetchPlantById, fetchPlantFiles, Plant, ProjectFile, uploadPlantFile } from '@/src/lib/api';
import { useAuth } from '@/src/providers/auth-provider';
@@ -233,6 +234,8 @@ export default function PlantDetailScreen() {
</View>
</View>
<HistorySection resource="plants" resourceId={plantId} />
<View style={styles.card}>
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Dokumente ({files.length})</Text>

View File

@@ -17,6 +17,7 @@ import * as DocumentPicker from 'expo-document-picker';
import * as ImagePicker from 'expo-image-picker';
import * as WebBrowser from 'expo-web-browser';
import { HistorySection } from '@/components/history-section';
import {
createProjectTask,
fetchProjectById,
@@ -366,6 +367,8 @@ export default function ProjectDetailScreen() {
) : null}
</View>
<HistorySection resource="projects" resourceId={projectId} />
<View style={styles.card}>
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Aufgaben ({tasks.length})</Text>

View 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 },
});

View File

@@ -76,8 +76,32 @@ export type Customer = {
archived?: boolean;
infoData?: {
email?: string | null;
invoiceEmail?: string | null;
tel?: string | null;
mobileTel?: string | null;
street?: string | null;
special?: string | null;
zip?: string | null;
city?: string | null;
country?: string | null;
web?: string | null;
ustid?: string | null;
[key: string]: unknown;
} | null;
[key: string]: unknown;
};
export type HistoryItem = {
id: number;
text: string;
created_at?: string | null;
createdAt?: string | null;
created_by?: string | null;
createdBy?: string | null;
created_by_profile?: {
full_name?: string | null;
fullName?: string | null;
email?: string | null;
[key: string]: unknown;
} | null;
[key: string]: unknown;
@@ -874,6 +898,13 @@ export async function createCustomer(
name: string;
customerNumber?: string | null;
notes?: string | null;
isCompany?: boolean;
salutation?: string | null;
title?: string | null;
firstname?: string | null;
lastname?: string | null;
nameAddition?: string | null;
infoData?: Customer['infoData'];
}
): Promise<Customer> {
return apiRequest<Customer>('/api/resource/customers', {
@@ -887,6 +918,33 @@ export async function fetchCustomerById(token: string, customerId: number): Prom
return apiRequest<Customer>(`/api/resource/customers/${customerId}`, { token });
}
export async function fetchResourceHistory(
token: string,
resource: string,
resourceId: number | string
): Promise<HistoryItem[]> {
return apiRequest<HistoryItem[]>(
`/api/resource/${encodeURIComponent(resource)}/${encodeURIComponent(String(resourceId))}/history`,
{ token }
);
}
export async function createResourceHistoryItem(
token: string,
resource: string,
resourceId: number | string,
text: string
): Promise<HistoryItem> {
return apiRequest<HistoryItem>(
`/api/resource/${encodeURIComponent(resource)}/${encodeURIComponent(String(resourceId))}/history`,
{
method: 'POST',
token,
body: { text },
}
);
}
function resolveCustomerIdFromCustomerInventoryItem(item: CustomerInventoryItem): number | null {
const rawCustomer = item.customer;
if (!rawCustomer) return null;