feat: Implement mobile application and lead processing utilities.

innungsapp/apps/mobile/app/(app)/termine/index.tsx

@@ -1,78 +1,78 @@
 import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-  RefreshControl,
+  View, Text, FlatList, TouchableOpacity, RefreshControl, StyleSheet,
 } 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 { useTermineListe, useToggleAnmeldung } from '@/hooks/useTermine'
 import { TerminCard } from '@/components/termine/TerminCard'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner'
 
+type Tab = 'kommend' | 'vergangen'
+
 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',
-  })
+  const [tab, setTab] = useState<Tab>('kommend')
+  const { data, isLoading, refetch, isRefetching } = useTermineListe(tab === 'kommend')
+  const { mutate, isPending } = useToggleAnmeldung()
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
+    <SafeAreaView style={styles.safeArea} 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'
-                }`}
+      <View style={styles.header}>
+        <Text style={styles.screenTitle}>Termine</Text>
+
+        {/* Segment control */}
+        <View style={styles.segmentContainer}>
+          {(['kommend', 'vergangen'] as Tab[]).map((t) => {
+            const active = tab === t
+            return (
+              <TouchableOpacity
+                key={t}
+                onPress={() => setTab(t)}
+                style={[styles.segment, active && styles.segmentActive]}
+                activeOpacity={0.8}
               >
-                {t === 'kommend' ? 'Bevorstehend' : 'Vergangen'}
-              </Text>
-            </TouchableOpacity>
-          ))}
+                <Text style={[styles.segmentLabel, active && styles.segmentLabelActive]}>
+                  {t === 'kommend' ? 'Bevorstehend' : 'Vergangen'}
+                </Text>
+              </TouchableOpacity>
+            )
+          })}
         </View>
       </View>
 
+      <View style={styles.divider} />
+
       {isLoading ? (
         <LoadingSpinner />
       ) : (
         <FlatList
           data={data ?? []}
           keyExtractor={(item) => item.id}
-          contentContainerStyle={{ padding: 12, gap: 8 }}
+          contentContainerStyle={styles.list}
           refreshControl={
-            <RefreshControl
-              refreshing={isRefetching}
-              onRefresh={refetch}
-              tintColor="#E63946"
-            />
+            <RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#003B7E" />
           }
           renderItem={({ item }) => (
             <TerminCard
               termin={item}
-              onPress={() => router.push(`/(app)/termine/${item.id}`)}
+              isPast={tab === 'vergangen'}
+              onPress={() => router.push(`/(app)/termine/${item.id}` as never)}
+              onToggleAnmeldung={() => mutate({ terminId: item.id })}
+              isToggling={isPending}
             />
           )}
           ListEmptyComponent={
             <EmptyState
-              icon="📅"
-              title={tab === 'kommend' ? 'Keine Termine' : 'Keine vergangenen Termine'}
-              subtitle="Es sind aktuell keine Termine eingetragen"
+              icon="calendar-outline"
+              title="Keine Termine"
+              subtitle={
+                tab === 'kommend'
+                  ? 'Aktuell keine bevorstehenden Termine'
+                  : 'Keine vergangenen Termine'
+              }
             />
           }
         />
@@ -80,3 +80,61 @@ export default function TermineScreen() {
     </SafeAreaView>
   )
 }
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#F8FAFC',
+  },
+  header: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 14,
+  },
+  screenTitle: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: '#0F172A',
+    letterSpacing: -0.5,
+    marginBottom: 14,
+  },
+  segmentContainer: {
+    flexDirection: 'row',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 14,
+    padding: 3,
+    gap: 3,
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: 9,
+    borderRadius: 11,
+    alignItems: 'center',
+  },
+  segmentActive: {
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  segmentLabel: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: '#64748B',
+  },
+  segmentLabelActive: {
+    color: '#0F172A',
+    fontWeight: '600',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#E2E8F0',
+  },
+  list: {
+    padding: 16,
+    gap: 10,
+  },
+})