70 lines
3.2 KiB
TypeScript
70 lines
3.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, Linking } from 'react-native';
|
|
import { useLocalSearchParams, router } from 'expo-router';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { api } from '../../../services/api';
|
|
|
|
const TABS = ['Profile', 'Subscription', 'Invoices', 'Payments'];
|
|
|
|
export default function ClientDetailScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
const [tab, setTab] = useState('Profile');
|
|
|
|
const { data: client, isLoading } = useQuery({
|
|
queryKey: ['client', id],
|
|
queryFn: () => api.get(`/api/v1/clients/${id}`).then(r => r.data),
|
|
});
|
|
|
|
if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>;
|
|
|
|
return (
|
|
<View className="flex-1 bg-gray-50">
|
|
<View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
|
|
<TouchableOpacity onPress={() => router.back()} className="mr-3">
|
|
<Text className="text-white text-lg">←</Text>
|
|
</TouchableOpacity>
|
|
<View>
|
|
<Text className="text-white font-bold text-lg">{client?.firstName} {client?.lastName}</Text>
|
|
<Text className="text-white/70 text-sm">{client?.accountNumber}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="flex-row bg-white border-b border-gray-100">
|
|
{TABS.map(t => (
|
|
<TouchableOpacity key={t} onPress={() => setTab(t)} className={`flex-1 py-3 items-center border-b-2 ${tab === t ? 'border-primary' : 'border-transparent'}`}>
|
|
<Text className={`text-sm font-medium ${tab === t ? 'text-primary' : 'text-gray-500'}`}>{t}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<ScrollView className="flex-1 px-4 py-4">
|
|
{tab === 'Profile' && (
|
|
<View className="bg-white rounded-2xl border border-gray-100">
|
|
{[
|
|
{ label: 'Account #', value: client?.accountNumber },
|
|
{ label: 'Status', value: client?.status },
|
|
{ label: 'Email', value: client?.email },
|
|
{ label: 'Phone', value: client?.phone, onPress: () => client?.phone && Linking.openURL(`tel:${client.phone}`) },
|
|
{ label: 'Address', value: client?.address },
|
|
{ label: 'Area', value: client?.area?.name },
|
|
].map((item, i) => (
|
|
<TouchableOpacity
|
|
key={item.label}
|
|
disabled={!item.onPress}
|
|
onPress={item.onPress}
|
|
className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}
|
|
>
|
|
<Text className="text-gray-500 text-xs">{item.label}</Text>
|
|
<Text className={`font-medium mt-0.5 ${item.onPress ? 'text-primary' : 'text-gray-900'}`}>{item.value ?? '—'}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
)}
|
|
{tab === 'Subscription' && <Text className="text-gray-500 text-center py-10">Subscription details coming soon</Text>}
|
|
{tab === 'Invoices' && <Text className="text-gray-500 text-center py-10">Invoices coming soon</Text>}
|
|
{tab === 'Payments' && <Text className="text-gray-500 text-center py-10">Payments coming soon</Text>}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|