initial
This commit is contained in:
@@ -0,0 +1,129 @@
|
||||
import React from 'react';
|
||||
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { Tabs, useRouter } from 'expo-router';
|
||||
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
|
||||
import { useT } from '@/i18n';
|
||||
import { colors, fontSize, shadow, spacing } from '@/theme';
|
||||
|
||||
const FAB_SIZE = 58;
|
||||
/** Width reserved for the centre action button, flanked by two tabs a side. */
|
||||
const FAB_SLOT = 84;
|
||||
|
||||
const TAB_ICONS: Record<string, keyof typeof Ionicons.glyphMap> = {
|
||||
index: 'home',
|
||||
search: 'search',
|
||||
expiring: 'time',
|
||||
profile: 'person',
|
||||
};
|
||||
|
||||
const TAB_LABEL_KEYS: Record<string, string> = {
|
||||
index: 'tabs.home',
|
||||
search: 'tabs.search',
|
||||
expiring: 'tabs.expiring',
|
||||
profile: 'tabs.profile',
|
||||
};
|
||||
|
||||
function TabBar({ state, navigation }: BottomTabBarProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const router = useRouter();
|
||||
const t = useT();
|
||||
|
||||
const renderTab = (routeName: string) => {
|
||||
const index = state.routes.findIndex((r) => r.name === routeName);
|
||||
if (index < 0) return <View style={styles.tab} key={routeName} />;
|
||||
const route = state.routes[index];
|
||||
const focused = state.index === index;
|
||||
return (
|
||||
<Pressable
|
||||
key={routeName}
|
||||
style={styles.tab}
|
||||
onPress={() => {
|
||||
const event = navigation.emit({
|
||||
type: 'tabPress',
|
||||
target: route.key,
|
||||
canPreventDefault: true,
|
||||
});
|
||||
if (!focused && !event.defaultPrevented) navigation.navigate(route.name);
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={TAB_ICONS[routeName]}
|
||||
size={22}
|
||||
color={focused ? colors.teal600 : colors.slate400}
|
||||
/>
|
||||
<Text style={[styles.tabLabel, focused && { color: colors.teal600 }]} numberOfLines={1}>
|
||||
{t(TAB_LABEL_KEYS[routeName])}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
// Two tabs, action, two tabs: symmetric, so the button sits on the midpoint.
|
||||
return (
|
||||
<View style={[styles.bar, { paddingBottom: insets.bottom || spacing[3] }]}>
|
||||
<View style={styles.row}>
|
||||
<View style={styles.group}>
|
||||
{renderTab('index')}
|
||||
{renderTab('search')}
|
||||
</View>
|
||||
|
||||
<View style={styles.fabSlot}>
|
||||
<Pressable
|
||||
style={({ pressed }) => [styles.fab, pressed && { opacity: 0.9 }]}
|
||||
onPress={() => router.push('/upload')}
|
||||
accessibilityLabel={t('tabs.upload')}
|
||||
>
|
||||
<Ionicons name="cloud-upload-outline" size={26} color={colors.onDark} />
|
||||
</Pressable>
|
||||
<Text style={styles.fabLabel} numberOfLines={1}>
|
||||
{t('tabs.upload')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.group}>
|
||||
{renderTab('expiring')}
|
||||
{renderTab('profile')}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TabsLayout() {
|
||||
return (
|
||||
<Tabs screenOptions={{ headerShown: false }} tabBar={(props) => <TabBar {...props} />}>
|
||||
<Tabs.Screen name="index" />
|
||||
<Tabs.Screen name="search" />
|
||||
<Tabs.Screen name="expiring" />
|
||||
<Tabs.Screen name="profile" />
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bar: {
|
||||
backgroundColor: colors.surface,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border,
|
||||
paddingTop: spacing[2],
|
||||
...shadow.sm,
|
||||
},
|
||||
row: { flexDirection: 'row', alignItems: 'flex-end', paddingHorizontal: spacing[1] },
|
||||
group: { flex: 1, flexDirection: 'row' },
|
||||
tab: { flex: 1, alignItems: 'center', gap: 3, paddingVertical: 4 },
|
||||
tabLabel: { fontSize: fontSize['2xs'], fontWeight: '600', color: colors.slate400 },
|
||||
fabSlot: { width: FAB_SLOT, alignItems: 'center' },
|
||||
fab: {
|
||||
width: FAB_SIZE,
|
||||
height: FAB_SIZE,
|
||||
borderRadius: FAB_SIZE / 2,
|
||||
backgroundColor: colors.teal600,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: -FAB_SIZE / 2,
|
||||
...shadow.md,
|
||||
},
|
||||
fabLabel: { fontSize: fontSize['2xs'], fontWeight: '600', color: colors.teal700, marginTop: 3 },
|
||||
});
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { FlatList, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api, DocCategory } from '@/api';
|
||||
import { useT } from '@/i18n';
|
||||
import { AppBar } from '@/components/AppBar';
|
||||
import { Chip, EmptyState, Loading } from '@/components/ui';
|
||||
import { DocumentRow } from '@/components/domain';
|
||||
import { DocWithProperty, fetchAllDocuments } from '@/lib/allDocuments';
|
||||
import { daysUntil } from '@/lib/format';
|
||||
import { colors, fontSize, spacing } from '@/theme';
|
||||
|
||||
type Filter = 'all' | 'expiring' | 'expired';
|
||||
|
||||
export default function ExpiringScreen() {
|
||||
const router = useRouter();
|
||||
const t = useT();
|
||||
const [filter, setFilter] = useState<Filter>('all');
|
||||
|
||||
const docsQuery = useQuery({ queryKey: ['all-documents'], queryFn: fetchAllDocuments });
|
||||
const catsQuery = useQuery({ queryKey: ['categories'], queryFn: () => api.reference.categories() });
|
||||
const catName = (slug: string) =>
|
||||
(catsQuery.data as DocCategory[] | undefined)?.find((c) => c.slug === slug)?.name ?? slug;
|
||||
|
||||
// Only documents that actually need attention, soonest deadline first.
|
||||
const attention = useMemo(() => {
|
||||
const docs: DocWithProperty[] = docsQuery.data ?? [];
|
||||
return docs
|
||||
.filter((d) => d.expiryStatus === 'expiring' || d.expiryStatus === 'expired')
|
||||
.sort((a, b) => (daysUntil(a.expiryDate) ?? 0) - (daysUntil(b.expiryDate) ?? 0));
|
||||
}, [docsQuery.data]);
|
||||
|
||||
const counts = useMemo(
|
||||
() => ({
|
||||
all: attention.length,
|
||||
expiring: attention.filter((d) => d.expiryStatus === 'expiring').length,
|
||||
expired: attention.filter((d) => d.expiryStatus === 'expired').length,
|
||||
}),
|
||||
[attention],
|
||||
);
|
||||
|
||||
const visible = filter === 'all' ? attention : attention.filter((d) => d.expiryStatus === filter);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: colors.bgApp }}>
|
||||
<AppBar
|
||||
title={t('expiring.title')}
|
||||
subtitle={docsQuery.data ? t('expiring.subtitle', { count: counts.all }) : undefined}
|
||||
large
|
||||
/>
|
||||
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.chips}
|
||||
style={{ flexGrow: 0 }}
|
||||
>
|
||||
<Chip label={t('common.all')} count={counts.all} active={filter === 'all'} onPress={() => setFilter('all')} />
|
||||
<Chip
|
||||
label={t('documents.filterExpiring')}
|
||||
count={counts.expiring}
|
||||
active={filter === 'expiring'}
|
||||
onPress={() => setFilter('expiring')}
|
||||
/>
|
||||
<Chip
|
||||
label={t('documents.filterExpired')}
|
||||
count={counts.expired}
|
||||
active={filter === 'expired'}
|
||||
onPress={() => setFilter('expired')}
|
||||
/>
|
||||
</ScrollView>
|
||||
|
||||
{docsQuery.isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<FlatList
|
||||
data={visible}
|
||||
keyExtractor={(d) => String(d.id)}
|
||||
contentContainerStyle={styles.list}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={docsQuery.isRefetching}
|
||||
onRefresh={() => docsQuery.refetch()}
|
||||
tintColor={colors.teal600}
|
||||
/>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<View style={{ marginBottom: spacing[3] }}>
|
||||
<DocumentRow
|
||||
document={item}
|
||||
subtitle={`${item.propertyName} · ${catName(item.category)}`}
|
||||
onPress={() => router.push(`/document/${item.id}?propertyId=${item.propertyId}`)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<EmptyState
|
||||
icon="checkmark-circle-outline"
|
||||
title={t('expiring.emptyTitle')}
|
||||
subtitle={t('expiring.emptySubtitle')}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
chips: { gap: 8, paddingHorizontal: spacing[4], paddingVertical: spacing[2] },
|
||||
list: { padding: spacing[4], paddingTop: spacing[2], paddingBottom: spacing[9] },
|
||||
});
|
||||
@@ -0,0 +1,108 @@
|
||||
import React from 'react';
|
||||
import { FlatList, Pressable, RefreshControl, StyleSheet, Text, View } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api, Property } from '@/api';
|
||||
import { useT } from '@/i18n';
|
||||
import { AppBar } from '@/components/AppBar';
|
||||
import { Button, EmptyState, IconButton, Loading } from '@/components/ui';
|
||||
import { PropertyCard } from '@/components/domain';
|
||||
import { colors, fontSize, radii, spacing } from '@/theme';
|
||||
|
||||
export default function PropertiesScreen() {
|
||||
const router = useRouter();
|
||||
const t = useT();
|
||||
|
||||
// One request: homes.php returns the per-property counters itself.
|
||||
const {
|
||||
data: properties,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
refetch,
|
||||
isRefetching,
|
||||
} = useQuery({ queryKey: ['properties'], queryFn: () => api.properties.list() });
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: colors.bgApp }}>
|
||||
<AppBar
|
||||
title={t('properties.title')}
|
||||
subtitle={properties ? t('properties.count', { count: properties.length }) : undefined}
|
||||
large
|
||||
right={<IconButton name="search" onPress={() => router.push('/search')} />}
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<Loading label={t('properties.loading')} />
|
||||
) : isError ? (
|
||||
<EmptyState
|
||||
icon="cloud-offline-outline"
|
||||
title={t('properties.loadError')}
|
||||
subtitle={(error as Error)?.message}
|
||||
action={<Button title={t('common.retry')} variant="ghost" onPress={() => refetch()} />}
|
||||
/>
|
||||
) : (
|
||||
<FlatList
|
||||
data={properties as Property[]}
|
||||
keyExtractor={(p) => String(p.id)}
|
||||
contentContainerStyle={styles.list}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={isRefetching}
|
||||
onRefresh={refetch}
|
||||
tintColor={colors.teal600}
|
||||
/>
|
||||
}
|
||||
ListHeaderComponent={
|
||||
<View style={{ gap: spacing[3], marginBottom: spacing[4] }}>
|
||||
<Pressable style={styles.searchBar} onPress={() => router.push('/search')}>
|
||||
<Ionicons name="search" size={18} color={colors.slate400} />
|
||||
<Text style={styles.searchPlaceholder}>{t('properties.searchPlaceholder')}</Text>
|
||||
</Pressable>
|
||||
<Button
|
||||
title={t('properties.add')}
|
||||
variant="ghost"
|
||||
icon="add"
|
||||
dashed
|
||||
block
|
||||
onPress={() => router.push('/property/add')}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<View style={{ marginBottom: spacing[3] }}>
|
||||
<PropertyCard property={item} onPress={() => router.push(`/property/${item.id}`)} />
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<EmptyState
|
||||
icon="home-outline"
|
||||
title={t('properties.emptyTitle')}
|
||||
subtitle={t('properties.emptySubtitle')}
|
||||
action={
|
||||
<Button title={t('properties.add')} icon="add" onPress={() => router.push('/property/add')} />
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
list: { padding: spacing[4], paddingBottom: spacing[9] },
|
||||
searchBar: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
backgroundColor: colors.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
borderRadius: radii.md,
|
||||
paddingHorizontal: spacing[4],
|
||||
height: 48,
|
||||
},
|
||||
searchPlaceholder: { color: colors.textMuted2, fontSize: fontSize.sm, flex: 1 },
|
||||
});
|
||||
@@ -0,0 +1,260 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
Alert,
|
||||
Linking,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api, USE_MOCK } from '@/api';
|
||||
import { AppBar } from '@/components/AppBar';
|
||||
import { Avatar, Badge, Button, Card, SectionTitle } from '@/components/ui';
|
||||
import { useAuth } from '@/auth/AuthContext';
|
||||
import { LanguagePreference, useI18n } from '@/i18n';
|
||||
import { colors, fontSize, radii, spacing } from '@/theme';
|
||||
|
||||
// Both stores check these open a real page before accepting a build.
|
||||
const PRIVACY_URL = 'https://casadoc.app/privacy';
|
||||
const TERMS_URL = 'https://casadoc.app/terms';
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { user, signOut, deleteAccount } = useAuth();
|
||||
const router = useRouter();
|
||||
const { t, preference, setPreference } = useI18n();
|
||||
const [signingOut, setSigningOut] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const propsQuery = useQuery({ queryKey: ['properties'], queryFn: () => api.properties.list() });
|
||||
|
||||
const fullName = [user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.email || '—';
|
||||
const initials = ((user?.firstName?.[0] ?? '') + (user?.lastName?.[0] ?? '')).toUpperCase() || 'U';
|
||||
|
||||
const languageOptions: { value: LanguagePreference; label: string; sub?: string }[] = [
|
||||
{ value: 'system', label: t('profile.languageSystem'), sub: t('profile.languageSystemSub') },
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'it', label: 'Italiano' },
|
||||
];
|
||||
|
||||
// Both stores require in-app deletion, with the consequences spelled out.
|
||||
function confirmDelete() {
|
||||
Alert.alert(t('profile.deleteConfirmTitle'), t('profile.deleteConfirmBody'), [
|
||||
{ text: t('common.cancel'), style: 'cancel' },
|
||||
{
|
||||
text: t('profile.deleteConfirmCta'),
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
setDeleting(true);
|
||||
try {
|
||||
await deleteAccount();
|
||||
} catch (e: any) {
|
||||
Alert.alert(t('profile.deleteFailed'), e?.message ?? t('common.tryAgain'));
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
async function onSignOut() {
|
||||
setSigningOut(true);
|
||||
try {
|
||||
await signOut();
|
||||
} finally {
|
||||
setSigningOut(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: colors.bgApp }}>
|
||||
<AppBar title={t('profile.title')} large />
|
||||
<ScrollView contentContainerStyle={styles.body}>
|
||||
<Card style={{ padding: spacing[5] }}>
|
||||
<View style={styles.hero}>
|
||||
{user?.avatar ? (
|
||||
<Image source={{ uri: user.avatar }} style={styles.heroAvatar} />
|
||||
) : (
|
||||
<Avatar initials={initials} size={60} />
|
||||
)}
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.name}>{fullName}</Text>
|
||||
<Text style={styles.email}>{user?.email}</Text>
|
||||
<View style={{ flexDirection: 'row', marginTop: 8 }}>
|
||||
<Badge
|
||||
label={t('properties.count', { count: propsQuery.data?.length ?? 0 })}
|
||||
tone="info"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Card>
|
||||
|
||||
{/* Language */}
|
||||
<SectionTitle title={t('profile.language')} />
|
||||
<Card style={{ padding: 0 }}>
|
||||
{languageOptions.map((opt, i) => {
|
||||
const selected = preference === opt.value;
|
||||
return (
|
||||
<React.Fragment key={opt.value}>
|
||||
{i > 0 ? <Divider /> : null}
|
||||
<Pressable
|
||||
style={styles.row}
|
||||
onPress={() => setPreference(opt.value)}
|
||||
accessibilityRole="radio"
|
||||
accessibilityState={{ selected }}
|
||||
>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons
|
||||
name={opt.value === 'system' ? 'phone-portrait-outline' : 'language-outline'}
|
||||
size={18}
|
||||
color={colors.teal600}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.rowTitle}>{opt.label}</Text>
|
||||
{opt.sub ? <Text style={styles.rowSub}>{opt.sub}</Text> : null}
|
||||
</View>
|
||||
<View style={[styles.radio, selected && styles.radioOn]}>
|
||||
{selected ? <View style={styles.radioDot} /> : null}
|
||||
</View>
|
||||
</Pressable>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Card>
|
||||
|
||||
{/* Account */}
|
||||
<SectionTitle title={t('profile.account')} />
|
||||
<Card style={{ padding: 0 }}>
|
||||
<Pressable style={styles.row} onPress={() => router.push('/profile/edit')}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="person-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.rowTitle}>{t('profile.personalDetails')}</Text>
|
||||
<Text style={styles.rowSub}>{t('profile.personalDetailsSub')}</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
<Divider />
|
||||
<Pressable style={styles.row} onPress={() => router.push('/profile/password')}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.rowTitle}>{t('profile.security')}</Text>
|
||||
<Text style={styles.rowSub}>{t('profile.securitySub')}</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
</Card>
|
||||
|
||||
{/* Legal — store listings require these to be reachable. */}
|
||||
<SectionTitle title={t('profile.legal')} />
|
||||
<Card style={{ padding: 0 }}>
|
||||
<Pressable style={styles.row} onPress={() => Linking.openURL(PRIVACY_URL)}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="shield-checkmark-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<Text style={[styles.rowTitle, { flex: 1 }]}>{t('profile.privacy')}</Text>
|
||||
<Ionicons name="open-outline" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
<Divider />
|
||||
<Pressable style={styles.row} onPress={() => Linking.openURL(TERMS_URL)}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="document-text-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<Text style={[styles.rowTitle, { flex: 1 }]}>{t('profile.terms')}</Text>
|
||||
<Ionicons name="open-outline" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
</Card>
|
||||
|
||||
{USE_MOCK ? <Text style={styles.demo}>{t('profile.demoMode')}</Text> : null}
|
||||
|
||||
<SectionTitle title={t('profile.dangerZone')} />
|
||||
<Pressable style={styles.dangerRow} onPress={deleting ? undefined : confirmDelete}>
|
||||
<View style={styles.dangerIcon}>
|
||||
<Ionicons name="trash-outline" size={18} color={colors.danger600} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.dangerTitle}>{t('profile.deleteAccount')}</Text>
|
||||
<Text style={styles.rowSub}>{t('profile.deleteAccountSub')}</Text>
|
||||
</View>
|
||||
{deleting ? <ActivityIndicator color={colors.danger600} /> : null}
|
||||
</Pressable>
|
||||
|
||||
<Button
|
||||
title={t('profile.signOut')}
|
||||
variant="ghost"
|
||||
icon="log-out-outline"
|
||||
block
|
||||
loading={signingOut}
|
||||
onPress={onSignOut}
|
||||
style={{ marginTop: spacing[5] }}
|
||||
/>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <View style={styles.divider} />;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
body: { padding: spacing[4], paddingBottom: spacing[9] },
|
||||
heroAvatar: { width: 60, height: 60, borderRadius: 30, backgroundColor: colors.surfaceSunken },
|
||||
hero: { flexDirection: 'row', alignItems: 'center', gap: spacing[4] },
|
||||
name: { fontSize: fontSize.lg, fontWeight: '700', color: colors.ink },
|
||||
email: { fontSize: fontSize.sm, color: colors.textMuted, marginTop: 2 },
|
||||
row: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], padding: spacing[4] },
|
||||
rowIcon: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.teal50,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
rowTitle: { fontSize: fontSize.base, fontWeight: '600', color: colors.ink },
|
||||
rowSub: { fontSize: fontSize.xs, color: colors.textMuted, marginTop: 2 },
|
||||
divider: { height: 1, backgroundColor: colors.border, marginLeft: 58 },
|
||||
radio: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.borderStrong,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
radioOn: { borderColor: colors.teal600 },
|
||||
radioDot: { width: 10, height: 10, borderRadius: 5, backgroundColor: colors.teal600 },
|
||||
dangerRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing[3],
|
||||
padding: spacing[4],
|
||||
backgroundColor: colors.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: '#f0c2c9',
|
||||
borderRadius: radii.lg,
|
||||
},
|
||||
dangerIcon: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.dangerBg,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
dangerTitle: { fontSize: fontSize.base, fontWeight: '700', color: colors.danger600 },
|
||||
demo: { textAlign: 'center', color: colors.textMuted2, fontSize: fontSize.xs, marginTop: spacing[5] },
|
||||
});
|
||||
@@ -0,0 +1,106 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { FlatList, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api, DocCategory } from '@/api';
|
||||
import { useT } from '@/i18n';
|
||||
import { AppBar } from '@/components/AppBar';
|
||||
import { Chip, EmptyState, Loading, TextField } from '@/components/ui';
|
||||
import { DocumentRow } from '@/components/domain';
|
||||
import { DocWithProperty, fetchAllDocuments } from '@/lib/allDocuments';
|
||||
import { colors, fontSize, spacing } from '@/theme';
|
||||
|
||||
export default function SearchScreen() {
|
||||
const router = useRouter();
|
||||
const t = useT();
|
||||
const [query, setQuery] = useState('');
|
||||
const [category, setCategory] = useState<string>('all');
|
||||
|
||||
const docsQuery = useQuery({ queryKey: ['all-documents'], queryFn: fetchAllDocuments });
|
||||
const catsQuery = useQuery({ queryKey: ['categories'], queryFn: () => api.reference.categories() });
|
||||
|
||||
const categories: DocCategory[] = catsQuery.data ?? [];
|
||||
const catName = (slug: string) => categories.find((c) => c.slug === slug)?.name ?? slug;
|
||||
|
||||
const results = useMemo(() => {
|
||||
const docs: DocWithProperty[] = docsQuery.data ?? [];
|
||||
const q = query.trim().toLowerCase();
|
||||
return docs.filter((d) => {
|
||||
const matchesCat = category === 'all' || d.category === category;
|
||||
const matchesQuery =
|
||||
!q || d.name.toLowerCase().includes(q) || catName(d.category).toLowerCase().includes(q);
|
||||
return matchesCat && matchesQuery;
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [docsQuery.data, query, category, categories]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: colors.bgApp }}>
|
||||
<AppBar title={t('tabs.search')} large />
|
||||
|
||||
<View style={styles.controls}>
|
||||
<TextField
|
||||
icon="search"
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
placeholder={t('properties.searchPlaceholder')}
|
||||
autoCapitalize="none"
|
||||
autoFocus
|
||||
/>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.chips}
|
||||
>
|
||||
<Chip label={t('common.all')} active={category === 'all'} onPress={() => setCategory('all')} />
|
||||
{categories.map((c) => (
|
||||
<Chip
|
||||
key={c.slug}
|
||||
label={c.name}
|
||||
active={category === c.slug}
|
||||
onPress={() => setCategory(c.slug)}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{docsQuery.isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<FlatList
|
||||
data={results}
|
||||
keyExtractor={(d) => String(d.id)}
|
||||
contentContainerStyle={styles.list}
|
||||
ListHeaderComponent={
|
||||
<Text style={styles.count}>
|
||||
{t('properties.docCount', { count: results.length })}
|
||||
</Text>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<View style={{ marginBottom: spacing[3] }}>
|
||||
<DocumentRow
|
||||
document={item}
|
||||
subtitle={`${item.propertyName} · ${catName(item.category)}`}
|
||||
onPress={() => router.push(`/document/${item.id}?propertyId=${item.propertyId}`)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<EmptyState
|
||||
icon="search-outline"
|
||||
title={t('documents.emptyTitle')}
|
||||
subtitle={t('documents.emptySubtitle')}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
controls: { paddingHorizontal: spacing[4], gap: spacing[3], paddingBottom: spacing[2] },
|
||||
chips: { gap: 8, paddingVertical: spacing[1], paddingRight: spacing[4] },
|
||||
list: { padding: spacing[4], paddingTop: spacing[2], paddingBottom: spacing[9] },
|
||||
count: { fontSize: fontSize.sm, color: colors.slate500, marginBottom: spacing[3], fontWeight: '600' },
|
||||
});
|
||||
Reference in New Issue
Block a user