631 lines
20 KiB
TypeScript
631 lines
20 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
KeyboardAvoidingView,
|
|
Modal,
|
|
Platform,
|
|
Pressable,
|
|
RefreshControl,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
|
|
import { createCustomer, Customer, fetchCustomers } from '@/src/lib/api';
|
|
import { filterCustomers } from '@/src/lib/resource-list-filters';
|
|
import { useAuth } from '@/src/providers/auth-provider';
|
|
|
|
const PRIMARY = '#69c350';
|
|
|
|
export default function CustomersScreen() {
|
|
const { token } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const [customers, setCustomers] = useState<Customer[]>([]);
|
|
const [search, setSearch] = useState('');
|
|
const [showArchived, setShowArchived] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
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(
|
|
() => filterCustomers(customers, search, showArchived),
|
|
[customers, search, showArchived]
|
|
);
|
|
|
|
const load = useCallback(async (showSpinner = true) => {
|
|
if (!token) return;
|
|
if (showSpinner) setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const rows = await fetchCustomers(token, true);
|
|
setCustomers(rows);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Kunden konnten nicht geladen werden.');
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
}
|
|
}, [token]);
|
|
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
void load(true);
|
|
}, [load, token]);
|
|
|
|
async function onRefresh() {
|
|
setRefreshing(true);
|
|
await load(false);
|
|
}
|
|
|
|
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 = isCompanyInput
|
|
? nameInput.trim()
|
|
: [salutationInput, titleInput, firstnameInput, lastnameInput].map((value) => value.trim()).filter(Boolean).join(' ');
|
|
if (!name) {
|
|
setCreateError(isCompanyInput ? 'Bitte einen Firmennamen eingeben.' : 'Bitte mindestens Vor- oder Nachname eingeben.');
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
setCreateError(null);
|
|
|
|
try {
|
|
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();
|
|
await load(false);
|
|
} catch (err) {
|
|
setCreateError(err instanceof Error ? err.message : 'Kunde konnte nicht erstellt werden.');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={styles.screen}>
|
|
<View style={styles.searchWrap}>
|
|
<TextInput
|
|
placeholder="Kunden suchen"
|
|
placeholderTextColor="#9ca3af"
|
|
style={styles.searchInput}
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
<Pressable
|
|
style={[styles.toggleButton, showArchived ? styles.toggleButtonActive : null]}
|
|
onPress={() => setShowArchived((prev) => !prev)}>
|
|
<Text style={[styles.toggleButtonText, showArchived ? styles.toggleButtonTextActive : null]}>
|
|
Abgeschlossene anzeigen
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
|
|
<ScrollView
|
|
style={styles.list}
|
|
contentContainerStyle={styles.listContent}
|
|
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
|
|
{error ? <Text style={styles.error}>{error}</Text> : null}
|
|
|
|
{loading ? (
|
|
<View style={styles.loadingBox}>
|
|
<ActivityIndicator />
|
|
<Text style={styles.loadingText}>Kunden werden geladen...</Text>
|
|
</View>
|
|
) : null}
|
|
|
|
{!loading && filtered.length === 0 ? <Text style={styles.empty}>Keine Kunden gefunden.</Text> : null}
|
|
|
|
{!loading &&
|
|
filtered.map((customer) => (
|
|
<Pressable
|
|
key={String(customer.id)}
|
|
style={({ pressed }) => [styles.row, pressed ? styles.rowPressed : null]}
|
|
onPress={() => router.push(`/more/customer/${customer.id}`)}>
|
|
<View style={styles.rowHeader}>
|
|
<Text style={styles.rowTitle} numberOfLines={1}>{customer.name}</Text>
|
|
{customer.archived ? <Text style={styles.badge}>Abgeschlossen</Text> : null}
|
|
</View>
|
|
{customer.customerNumber ? (
|
|
<Text style={styles.rowSubtitle} numberOfLines={1}>Nr.: {customer.customerNumber}</Text>
|
|
) : null}
|
|
{customer.notes ? <Text style={styles.rowSubtitle} numberOfLines={1}>{String(customer.notes)}</Text> : null}
|
|
</Pressable>
|
|
))}
|
|
</ScrollView>
|
|
|
|
<Pressable style={styles.fab} onPress={() => setCreateOpen(true)}>
|
|
<Text style={styles.fabText}>+</Text>
|
|
</Pressable>
|
|
|
|
<Modal visible={createOpen} transparent animationType="fade" onRequestClose={closeCreateModal}>
|
|
<View style={styles.modalOverlay}>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
|
style={styles.modalKeyboardWrap}>
|
|
<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="Firmenname *"
|
|
placeholderTextColor="#9ca3af"
|
|
style={styles.searchInput}
|
|
value={nameInput}
|
|
onChangeText={setNameInput}
|
|
/>
|
|
<TextInput
|
|
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="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}
|
|
onChangeText={setNotesInput}
|
|
multiline
|
|
/>
|
|
|
|
{createError ? <Text style={styles.formError}>{createError}</Text> : null}
|
|
</ScrollView>
|
|
|
|
<View style={styles.modalActions}>
|
|
<Pressable style={styles.secondaryButton} onPress={closeCreateModal} disabled={saving}>
|
|
<Text style={styles.secondaryButtonText}>Abbrechen</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
style={[styles.primaryButton, saving ? styles.buttonDisabled : null]}
|
|
onPress={onCreateCustomer}
|
|
disabled={saving}>
|
|
<Text style={styles.primaryButtonText}>{saving ? 'Speichere...' : 'Anlegen'}</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
screen: { flex: 1, backgroundColor: '#ffffff' },
|
|
searchWrap: {
|
|
paddingHorizontal: 16,
|
|
paddingTop: 12,
|
|
paddingBottom: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e5e7eb',
|
|
backgroundColor: '#ffffff',
|
|
gap: 8,
|
|
},
|
|
searchInput: {
|
|
borderWidth: 1,
|
|
borderColor: '#d1d5db',
|
|
borderRadius: 10,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
fontSize: 15,
|
|
color: '#111827',
|
|
backgroundColor: '#ffffff',
|
|
},
|
|
list: { flex: 1, backgroundColor: '#ffffff' },
|
|
listContent: { paddingBottom: 96 },
|
|
row: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 14,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e5e7eb',
|
|
backgroundColor: '#ffffff',
|
|
},
|
|
rowPressed: { backgroundColor: '#f3f4f6' },
|
|
rowHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
rowTitle: { flex: 1, color: '#111827', fontSize: 15, fontWeight: '600' },
|
|
rowSubtitle: { color: '#6b7280', fontSize: 13, marginTop: 2 },
|
|
badge: {
|
|
color: '#3d7a30',
|
|
fontSize: 11,
|
|
fontWeight: '600',
|
|
backgroundColor: '#eff9ea',
|
|
borderRadius: 999,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 3,
|
|
overflow: 'hidden',
|
|
},
|
|
toggleButton: {
|
|
alignSelf: 'flex-start',
|
|
borderWidth: 1,
|
|
borderColor: '#d1d5db',
|
|
borderRadius: 999,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 6,
|
|
backgroundColor: '#ffffff',
|
|
},
|
|
toggleButtonActive: { borderColor: PRIMARY, backgroundColor: '#eff9ea' },
|
|
toggleButtonText: { color: '#374151', fontSize: 12, fontWeight: '600' },
|
|
toggleButtonTextActive: { color: '#3d7a30' },
|
|
loadingBox: { paddingVertical: 20, alignItems: 'center', gap: 8 },
|
|
loadingText: { color: '#6b7280' },
|
|
empty: { color: '#6b7280', textAlign: 'center', paddingVertical: 20 },
|
|
error: { color: '#dc2626', fontSize: 13, paddingHorizontal: 16, paddingTop: 10 },
|
|
fab: {
|
|
position: 'absolute',
|
|
right: 18,
|
|
bottom: 20,
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 28,
|
|
backgroundColor: PRIMARY,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
shadowColor: '#111827',
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 8,
|
|
shadowOffset: { width: 0, height: 4 },
|
|
elevation: 5,
|
|
},
|
|
fabText: {
|
|
color: '#ffffff',
|
|
fontSize: 30,
|
|
lineHeight: 30,
|
|
marginTop: -2,
|
|
},
|
|
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: 10,
|
|
maxHeight: '92%',
|
|
},
|
|
modalTitle: {
|
|
color: '#111827',
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
},
|
|
multilineInput: {
|
|
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',
|
|
gap: 8,
|
|
marginTop: 4,
|
|
},
|
|
secondaryButton: {
|
|
borderWidth: 1,
|
|
borderColor: '#d1d5db',
|
|
borderRadius: 10,
|
|
minHeight: 40,
|
|
paddingHorizontal: 14,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
secondaryButtonText: {
|
|
color: '#374151',
|
|
fontWeight: '600',
|
|
},
|
|
primaryButton: {
|
|
borderRadius: 10,
|
|
minHeight: 40,
|
|
paddingHorizontal: 14,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: PRIMARY,
|
|
},
|
|
primaryButtonText: {
|
|
color: '#ffffff',
|
|
fontWeight: '700',
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
});
|