Rebuild as InnungsApp project: replace stadtwerke analysis with full documentation
- PRD: vollständige Produktspezifikation (5 Module, Scope, Akzeptanzkriterien) - ARCHITECTURE: Tech Stack, Ordnerstruktur, Multi-Tenancy, Push, Kosten - DATABASE_SCHEMA: Vollständiges SQL-Schema mit RLS Policies und Views - USER_STORIES: 40+ Stories nach Rolle (Admin, Mitglied, Azubi, Obermeister) - PERSONAS: 5 detaillierte Nutzerprofile mit Alltag, Zitaten und Erwartungen - BUSINESS_MODEL: Preistabellen, Unit Economics, Revenue-Projektionen, Distribution - ROADMAP: 6 Phasen, Sprint-Planung, Meilensteine und KPIs - COMPETITIVE_ANALYSIS: Wettbewerbsmatrix, USPs, Preispositionierung - API_DESIGN: Supabase Query Patterns, Edge Functions, Realtime Subscriptions - ONBOARDING_FLOWS: 7 User Flows von Setup bis Fehlerfall - GTM_STRATEGY: 3-Phasen-Vertrieb, Outreach-Sequenz, Einwandbehandlung - AZUBI_MODULE: Video-Feed, 1-Click-Apply, Chat, Berichtsheft, Quiz - DSGVO_KONZEPT: Rechtsgrundlagen, TOMs, AVV, Minderjährige, Incident Response - FEATURES_BACKLOG: 72 Features nach MoSCoW + Technische Schulden Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
101
innungsapp/apps/mobile/app/(app)/members/index.tsx
Normal file
101
innungsapp/apps/mobile/app/(app)/members/index.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user