83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
RefreshControl,
|
|
} from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'expo-router'
|
|
import { trpc } from '@/lib/trpc'
|
|
import { TerminCard } from '@/components/termine/TerminCard'
|
|
import { EmptyState } from '@/components/ui/EmptyState'
|
|
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'
|
|
|
|
export default function TermineScreen() {
|
|
const router = useRouter()
|
|
const [tab, setTab] = useState<'kommend' | 'vergangen'>('kommend')
|
|
|
|
const { data, isLoading, refetch, isRefetching } = trpc.termine.list.useQuery({
|
|
upcoming: tab === 'kommend',
|
|
})
|
|
|
|
return (
|
|
<SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
|
|
{/* Header */}
|
|
<View className="bg-white px-4 py-3 border-b border-gray-100">
|
|
<Text className="text-xl font-bold text-gray-900 mb-3">Termine</Text>
|
|
{/* Tabs */}
|
|
<View className="flex-row gap-1 bg-gray-100 p-1 rounded-xl">
|
|
{(['kommend', 'vergangen'] as const).map((t) => (
|
|
<TouchableOpacity
|
|
key={t}
|
|
onPress={() => setTab(t)}
|
|
className={`flex-1 py-2 rounded-lg items-center ${
|
|
tab === t ? 'bg-white shadow-sm' : ''
|
|
}`}
|
|
>
|
|
<Text
|
|
className={`text-sm font-medium ${
|
|
tab === t ? 'text-gray-900' : 'text-gray-500'
|
|
}`}
|
|
>
|
|
{t === 'kommend' ? 'Bevorstehend' : 'Vergangen'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{isLoading ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<FlatList
|
|
data={data ?? []}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={{ padding: 12, gap: 8 }}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isRefetching}
|
|
onRefresh={refetch}
|
|
tintColor="#E63946"
|
|
/>
|
|
}
|
|
renderItem={({ item }) => (
|
|
<TerminCard
|
|
termin={item}
|
|
onPress={() => router.push(`/(app)/termine/${item.id}`)}
|
|
/>
|
|
)}
|
|
ListEmptyComponent={
|
|
<EmptyState
|
|
icon="📅"
|
|
title={tab === 'kommend' ? 'Keine Termine' : 'Keine vergangenen Termine'}
|
|
subtitle="Es sind aktuell keine Termine eingetragen"
|
|
/>
|
|
}
|
|
/>
|
|
)}
|
|
</SafeAreaView>
|
|
)
|
|
}
|