feat: Implement mobile application and lead processing utilities.

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

@@ -1,70 +1,60 @@
-import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-  RefreshControl,
-} from 'react-native'
+import { View, Text, FlatList, RefreshControl, StyleSheet } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { trpc } from '@/lib/trpc'
+import { useStellenListe } from '@/hooks/useStellen'
 import { StelleCard } from '@/components/stellen/StelleCard'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner'
-import { useAuth } from '@/hooks/useAuth'
 
 export default function StellenScreen() {
   const router = useRouter()
-  const { isAuthenticated } = useAuth()
-  const { data, isLoading, refetch, isRefetching } = trpc.stellen.listPublic.useQuery({})
+  const { data, isLoading, refetch, isRefetching } = useStellenListe()
+
+  const totalStellen = data?.reduce((sum, s) => sum + s.stellenAnz, 0) ?? 0
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
+    <SafeAreaView style={styles.safeArea} edges={['top']}>
       {/* Header */}
-      <View className="bg-white px-4 pt-3 pb-3 border-b border-gray-100">
-        <View className="flex-row items-center justify-between">
-          <View>
-            <Text className="text-xl font-bold text-gray-900">Lehrlingsbörse</Text>
-            <Text className="text-sm text-gray-500 mt-0.5">
-              {data?.length ?? 0} Angebote
-            </Text>
+      <View style={styles.header}>
+        <View style={styles.titleRow}>
+          <View style={styles.titleBlock}>
+            <Text style={styles.screenTitle}>Lehrlingsbörse</Text>
+            <Text style={styles.subtitle}>Ausbildungsplätze in deiner Innung</Text>
           </View>
-          {isAuthenticated && (
-            <TouchableOpacity
-              onPress={() => router.push('/(app)/stellen/neu')}
-              className="bg-brand-500 px-4 py-2 rounded-xl"
-            >
-              <Text className="text-white text-sm font-medium">+ Stelle anbieten</Text>
-            </TouchableOpacity>
+
+          {/* Counter */}
+          {totalStellen > 0 && (
+            <View style={styles.counter}>
+              <Text style={styles.counterNumber}>{totalStellen}</Text>
+              <Text style={styles.counterLabel}>Stellen</Text>
+            </View>
           )}
         </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 }) => (
             <StelleCard
               stelle={item}
-              onPress={() => router.push(`/(app)/stellen/${item.id}`)}
+              onPress={() => router.push(`/(app)/stellen/${item.id}` as never)}
             />
           )}
           ListEmptyComponent={
             <EmptyState
-              icon="🎓"
+              icon="school-outline"
               title="Keine Angebote"
-              subtitle="Aktuell sind keine Ausbildungsplätze verfügbar"
+              subtitle="Aktuell keine Ausbildungsplätze verfügbar"
             />
           }
         />
@@ -72,3 +62,69 @@ export default function StellenScreen() {
     </SafeAreaView>
   )
 }
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#F8FAFC',
+  },
+  header: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 16,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  titleBlock: {
+    flex: 1,
+  },
+  screenTitle: {
+    fontSize: 26,
+    fontWeight: '800',
+    color: '#0F172A',
+    letterSpacing: -0.5,
+  },
+  subtitle: {
+    fontSize: 13,
+    color: '#64748B',
+    marginTop: 2,
+  },
+  counter: {
+    backgroundColor: '#003B7E',
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    alignItems: 'center',
+    minWidth: 56,
+    shadowColor: '#003B7E',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  counterNumber: {
+    color: '#FFFFFF',
+    fontSize: 22,
+    fontWeight: '800',
+    lineHeight: 24,
+  },
+  counterLabel: {
+    color: 'rgba(255,255,255,0.75)',
+    fontSize: 9,
+    fontWeight: '600',
+    letterSpacing: 0.5,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#E2E8F0',
+  },
+  list: {
+    padding: 16,
+    gap: 10,
+  },
+})
+