102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
RefreshControl,
|
|
} from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useRouter } from 'expo-router'
|
|
import { trpc } from '@/lib/trpc'
|
|
import { useMembersFilterStore } from '@/store/members.store'
|
|
import { MemberCard } from '@/components/members/MemberCard'
|
|
import { EmptyState } from '@/components/ui/EmptyState'
|
|
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'
|
|
|
|
export default function MembersScreen() {
|
|
const router = useRouter()
|
|
const search = useMembersFilterStore((s) => s.search)
|
|
const nurAusbildungsbetriebe = useMembersFilterStore((s) => s.nurAusbildungsbetriebe)
|
|
const setSearch = useMembersFilterStore((s) => s.setSearch)
|
|
const setNurAusbildungsbetriebe = useMembersFilterStore((s) => s.setNurAusbildungsbetriebe)
|
|
|
|
const { data, isLoading, refetch, isRefetching } = trpc.members.list.useQuery({
|
|
search: search || undefined,
|
|
ausbildungsbetrieb: nurAusbildungsbetriebe || undefined,
|
|
status: 'aktiv',
|
|
})
|
|
|
|
return (
|
|
<SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
|
|
{/* Header */}
|
|
<View className="bg-white px-4 pt-3 pb-2 border-b border-gray-100">
|
|
<Text className="text-xl font-bold text-gray-900 mb-3">Mitglieder</Text>
|
|
|
|
{/* Search */}
|
|
<View className="flex-row items-center bg-gray-100 rounded-xl px-3 py-2 mb-2">
|
|
<Text className="text-gray-400 mr-2">🔍</Text>
|
|
<TextInput
|
|
className="flex-1 text-sm text-gray-900"
|
|
placeholder="Name, Betrieb, Ort, Sparte..."
|
|
placeholderTextColor="#9ca3af"
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
clearButtonMode="while-editing"
|
|
/>
|
|
</View>
|
|
|
|
{/* Filter: Ausbildungsbetriebe */}
|
|
<TouchableOpacity
|
|
onPress={() => setNurAusbildungsbetriebe(!nurAusbildungsbetriebe)}
|
|
className="flex-row items-center gap-2 py-1"
|
|
>
|
|
<View
|
|
className={`w-5 h-5 rounded border-2 items-center justify-center ${
|
|
nurAusbildungsbetriebe
|
|
? 'bg-brand-500 border-brand-500'
|
|
: 'border-gray-300 bg-white'
|
|
}`}
|
|
>
|
|
{nurAusbildungsbetriebe && (
|
|
<Text className="text-white text-xs">✓</Text>
|
|
)}
|
|
</View>
|
|
<Text className="text-sm text-gray-600">Nur Ausbildungsbetriebe</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* List */}
|
|
{isLoading ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<FlatList
|
|
data={data ?? []}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={{ padding: 12, gap: 8 }}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isRefetching}
|
|
onRefresh={refetch}
|
|
tintColor="#E63946"
|
|
/>
|
|
}
|
|
renderItem={({ item }) => (
|
|
<MemberCard
|
|
member={item}
|
|
onPress={() => router.push(`/(app)/members/${item.id}`)}
|
|
/>
|
|
)}
|
|
ListEmptyComponent={
|
|
<EmptyState
|
|
icon="👥"
|
|
title="Keine Mitglieder"
|
|
subtitle={search ? 'Keine Treffer für Ihre Suche' : 'Noch keine Mitglieder'}
|
|
/>
|
|
}
|
|
/>
|
|
)}
|
|
</SafeAreaView>
|
|
)
|
|
}
|