tknuth/stadtwerke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement mobile application and lead processing utilities.

Browse Source
This commit is contained in:
Timo Knuth
2026-02-19 14:21:51 +01:00
parent fca42db4d2
commit c53a71a5f9
120 changed files with 24080 additions and 851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
innungsapp/apps/mobile/app/(app)/news/index.tsx
View File

@@ -1,100 +1,157 @@
import {
View,
Text,
FlatList,
TouchableOpacity,
RefreshControl,
ScrollView,
View, Text, FlatList, TouchableOpacity, RefreshControl, ScrollView, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useState } from 'react'
import { trpc } from '@/lib/trpc'
import { useRouter } from 'expo-router'
import { useNewsList } from '@/hooks/useNews'
import { NewsCard } from '@/components/news/NewsCard'
import { EmptyState } from '@/components/ui/EmptyState'
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'
import { NEWS_KATEGORIE_LABELS } from '@innungsapp/shared'
const FILTER_OPTIONS = [
const FILTERS = [
{ value: undefined, label: 'Alle' },
{ value: 'Wichtig', label: 'Wichtig' },
{ value: 'Pruefung', label: 'Prüfung' },
{ value: 'Foerderung', label: 'Förderung' },
{ value: 'Pruefung', label: 'Pruefung' },
{ value: 'Foerderung', label: 'Foerderung' },
{ value: 'Veranstaltung', label: 'Veranstaltung' },
]
export default function NewsScreen() {
const router = useRouter()
const [kategorie, setKategorie] = useState<string | undefined>(undefined)
const { data, isLoading, refetch, isRefetching } = trpc.news.list.useQuery({
kategorie: kategorie as never,
})
const { data, isLoading, refetch, isRefetching } = useNewsList(kategorie)
const unreadCount = data?.filter((n) => !n.isRead).length ?? 0
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">News</Text>
<SafeAreaView style={styles.safeArea} edges={['top']}>
<View style={styles.header}>
<View style={styles.titleRow}>
<Text style={styles.screenTitle}>Aktuelles</Text>
{unreadCount > 0 && (
<View style={styles.unreadBadge}>
<Text style={styles.unreadBadgeText}>{unreadCount} neu</Text>
</View>
)}
</View>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.filterScroll}
>
{FILTERS.map((opt) => {
const active = kategorie === opt.value
return (
<TouchableOpacity
key={String(opt.value)}
onPress={() => setKategorie(opt.value)}
style={[styles.chip, active && styles.chipActive]}
activeOpacity={0.85}
>
<Text style={[styles.chipLabel, active && styles.chipLabelActive]}>
{opt.label}
</Text>
</TouchableOpacity>
)
})}
</ScrollView>
</View>
{/* Kategorie Filter */}
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
className="bg-white border-b border-gray-100"
contentContainerStyle={{ paddingHorizontal: 12, paddingVertical: 10, gap: 8 }}
>
{FILTER_OPTIONS.map((opt) => (
<TouchableOpacity
key={String(opt.value)}
onPress={() => setKategorie(opt.value)}
className={`px-4 py-1.5 rounded-full border ${
kategorie === opt.value
? 'bg-brand-500 border-brand-500'
: 'bg-white border-gray-200'
}`}
>
<Text
className={`text-sm font-medium ${
kategorie === opt.value ? 'text-white' : 'text-gray-600'
}`}
>
{opt.label}
</Text>
</TouchableOpacity>
))}
</ScrollView>
<View style={styles.divider} />
{/* List */}
{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 }) => (
<NewsCard
news={item}
onPress={() => router.push(`/(app)/news/${item.id}`)}
onPress={() => router.push(`/(app)/news/${item.id}` as never)}
/>
)}
ListEmptyComponent={
<EmptyState
icon="📰"
title="Keine News"
subtitle="Noch keine Beiträge für diese Kategorie"
/>
<EmptyState icon="N" title="Keine News" subtitle="Noch keine Beitraege veroeffentlicht." />
}
/>
)}
</SafeAreaView>
)
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
backgroundColor: '#F8FAFC',
},
header: {
backgroundColor: '#FFFFFF',
paddingHorizontal: 20,
paddingTop: 14,
paddingBottom: 0,
},
titleRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 14,
},
screenTitle: {
fontSize: 28,
fontWeight: '800',
color: '#0F172A',
letterSpacing: -0.5,
},
unreadBadge: {
backgroundColor: '#EFF6FF',
paddingHorizontal: 10,
paddingVertical: 4,
borderRadius: 99,
},
unreadBadgeText: {
color: '#003B7E',
fontSize: 12,
fontWeight: '700',
},
filterScroll: {
paddingBottom: 14,
gap: 8,
paddingRight: 20,
},
chip: {
paddingHorizontal: 14,
paddingVertical: 7,
borderRadius: 99,
borderWidth: 1,
borderColor: '#E2E8F0',
backgroundColor: '#FFFFFF',
},
chipActive: {
backgroundColor: '#003B7E',
borderColor: '#003B7E',
},
chipLabel: {
fontSize: 13,
fontWeight: '600',
color: '#64748B',
},
chipLabelActive: {
color: '#FFFFFF',
},
divider: {
height: 1,
backgroundColor: '#E2E8F0',
},
list: {
padding: 16,
gap: 10,
paddingBottom: 30,
},
})