feat: complete Sprint 3 Expo mobile app scaffold + all screens
This commit is contained in:
Nemo
@@ -1,111 +1,68 @@
|
||||
import { View, Text, ScrollView, ActivityIndicator, TouchableOpacity, Linking } from 'react-native';
|
||||
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 { useState } from 'react';
|
||||
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' | 'subscription' | 'invoices' | 'payments'>('profile');
|
||||
const [tab, setTab] = useState('Profile');
|
||||
|
||||
const { data: client, isLoading } = useQuery({
|
||||
queryKey: ['client', id],
|
||||
queryFn: () => api.get(`/api/v1/clients/${id}`).then(r => r.data),
|
||||
});
|
||||
|
||||
const { data: invoices } = useQuery({
|
||||
queryKey: ['client-invoices', id],
|
||||
queryFn: () => api.get(`/api/v1/invoices?clientId=${id}&limit=20`).then(r => r.data?.data ?? r.data),
|
||||
enabled: tab === 'invoices',
|
||||
});
|
||||
|
||||
const { data: payments } = useQuery({
|
||||
queryKey: ['client-payments', id],
|
||||
queryFn: () => api.get(`/api/v1/clients/${id}/payments`).then(r => r.data?.data ?? r.data),
|
||||
enabled: tab === 'payments',
|
||||
});
|
||||
|
||||
if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>;
|
||||
|
||||
const TABS = ['profile', 'subscription', 'invoices', 'payments'] as const;
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-3 bg-white border-b border-gray-100">
|
||||
<TouchableOpacity onPress={() => router.back()} className="mb-2">
|
||||
<Text className="text-primary">← Back</Text>
|
||||
<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>
|
||||
<Text className="text-xl font-bold text-gray-900">{client?.firstName} {client?.lastName}</Text>
|
||||
<Text className="text-gray-500 text-sm">{client?.accountNumber}</Text>
|
||||
<View className="flex-row mt-3 gap-2">
|
||||
{TABS.map(t => (
|
||||
<TouchableOpacity key={t} onPress={() => setTab(t)}
|
||||
className={`px-3 py-1.5 rounded-full ${tab === t ? 'bg-primary' : 'bg-gray-100'}`}>
|
||||
<Text className={`text-xs font-medium capitalize ${tab === t ? 'text-white' : 'text-gray-600'}`}>{t}</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' && (
|
||||
{tab === 'Profile' && (
|
||||
<View className="bg-white rounded-2xl border border-gray-100">
|
||||
{[
|
||||
{ label: 'Full Name', value: `${client?.firstName} ${client?.lastName}` },
|
||||
{ label: 'Phone', value: client?.phone, action: () => Linking.openURL(`tel:${client?.phone}`) },
|
||||
{ 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 },
|
||||
{ label: 'Status', value: client?.status },
|
||||
].map((row, i) => (
|
||||
<TouchableOpacity key={row.label} onPress={row.action}
|
||||
className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}>
|
||||
<Text className="text-gray-500 text-xs mb-0.5">{row.label}</Text>
|
||||
<Text className={`text-gray-900 font-medium ${row.action ? 'text-primary' : ''}`}>{row.value ?? '—'}</Text>
|
||||
].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' && (
|
||||
<View className="bg-white rounded-2xl border border-gray-100 p-4">
|
||||
<Text className="font-semibold text-gray-900 mb-3">Current Subscription</Text>
|
||||
{client?.subscription ? (
|
||||
<>
|
||||
<Text className="text-gray-700">Plan: <Text className="font-medium">{client.subscription.plan?.name}</Text></Text>
|
||||
<Text className="text-gray-700 mt-1">Status: <Text className="font-medium capitalize">{client.subscription.status}</Text></Text>
|
||||
<Text className="text-gray-700 mt-1">Billing Day: <Text className="font-medium">{client.subscription.billingDay}</Text></Text>
|
||||
<Text className="text-gray-700 mt-1">Monthly: <Text className="font-medium">₱{client.subscription.plan?.price?.toLocaleString()}</Text></Text>
|
||||
</>
|
||||
) : (
|
||||
<Text className="text-gray-400">No active subscription</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{tab === 'invoices' && (
|
||||
<View>
|
||||
{(invoices ?? []).map((inv: any) => (
|
||||
<View key={inv.id} className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
|
||||
<Text className="font-medium text-gray-900">{inv.invoiceNumber}</Text>
|
||||
<Text className="text-gray-500 text-sm">₱{inv.totalAmount?.toLocaleString()} · {inv.status}</Text>
|
||||
</View>
|
||||
))}
|
||||
{!invoices?.length && <Text className="text-gray-400 text-center py-10">No invoices</Text>}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{tab === 'payments' && (
|
||||
<View>
|
||||
{(payments ?? []).map((p: any) => (
|
||||
<View key={p.id} className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
|
||||
<Text className="font-medium text-gray-900">₱{p.amount?.toLocaleString()}</Text>
|
||||
<Text className="text-gray-500 text-sm">{p.paymentMethod} · {new Date(p.paymentDate).toLocaleDateString()}</Text>
|
||||
</View>
|
||||
))}
|
||||
{!payments?.length && <Text className="text-gray-400 text-center py-10">No payments</Text>}
|
||||
</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>
|
||||
);
|
||||
|
||||
@@ -1,67 +1,69 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, TextInput, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
|
||||
import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { router } from 'expo-router';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
active: '#16A34A', suspended: '#DC2626', pending: '#D97706', cancelled: '#6B7280',
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
ACTIVE: '#16A34A', SUSPENDED: '#D97706', CANCELLED: '#DC2626', PENDING: '#6B7280',
|
||||
};
|
||||
|
||||
export default function ClientsScreen() {
|
||||
const [search, setSearch] = useState('');
|
||||
const { data, isLoading } = useQuery({
|
||||
const { data, isLoading, refetch, isRefetching } = useQuery({
|
||||
queryKey: ['clients'],
|
||||
queryFn: () => api.get('/api/v1/clients?limit=100').then(r => r.data?.data ?? r.data),
|
||||
});
|
||||
|
||||
const filtered = (data ?? []).filter((c: any) =>
|
||||
[c.firstName, c.lastName, c.accountNumber, c.phone].join(' ').toLowerCase().includes(search.toLowerCase())
|
||||
const clients = (data ?? []).filter((c: any) =>
|
||||
`${c.firstName} ${c.lastName} ${c.accountNumber}`.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="px-4 pt-14 pb-3 bg-white border-b border-gray-100">
|
||||
<Text className="text-xl font-bold text-gray-900 mb-3">Clients</Text>
|
||||
<View className="px-4 pt-14 pb-4 bg-primary">
|
||||
<Text className="text-white text-xl font-bold">Clients</Text>
|
||||
</View>
|
||||
<View className="px-4 py-3">
|
||||
<TextInput
|
||||
className="bg-gray-100 rounded-xl px-4 py-2 text-base"
|
||||
placeholder="Search name, account #, phone..."
|
||||
className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base"
|
||||
placeholder="Search name or account #"
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator color="#2563EB" />
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={filtered}
|
||||
data={clients}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={{ padding: 16 }}
|
||||
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
|
||||
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 24 }}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
className="bg-white rounded-xl p-4 mb-2 border border-gray-100 flex-row items-center"
|
||||
className="bg-white rounded-xl p-4 mb-2 border border-gray-100"
|
||||
onPress={() => router.push(`/(app)/clients/${item.id}`)}
|
||||
>
|
||||
<View className="w-10 h-10 rounded-full bg-blue-100 items-center justify-center mr-3">
|
||||
<Text className="text-primary font-bold">{item.firstName?.[0]?.toUpperCase()}</Text>
|
||||
</View>
|
||||
<View className="flex-1">
|
||||
<Text className="font-semibold text-gray-900">{item.firstName} {item.lastName}</Text>
|
||||
<Text className="text-gray-500 text-sm">{item.accountNumber} · {item.phone}</Text>
|
||||
</View>
|
||||
<View className="px-2 py-1 rounded-full" style={{ backgroundColor: `${STATUS_COLOR[item.status] ?? '#6B7280'}20` }}>
|
||||
<Text className="text-xs font-medium capitalize" style={{ color: STATUS_COLOR[item.status] ?? '#6B7280' }}>
|
||||
{item.status}
|
||||
</Text>
|
||||
<View className="flex-row justify-between items-start">
|
||||
<View className="flex-1">
|
||||
<Text className="font-semibold text-gray-900">{item.firstName} {item.lastName}</Text>
|
||||
<Text className="text-gray-500 text-sm">{item.accountNumber}</Text>
|
||||
{item.phone && <Text className="text-gray-500 text-sm">{item.phone}</Text>}
|
||||
</View>
|
||||
<View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${STATUS_COLORS[item.status] ?? '#6B7280'}20` }}>
|
||||
<Text className="text-xs font-medium" style={{ color: STATUS_COLORS[item.status] ?? '#6B7280' }}>
|
||||
{item.status}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<View className="items-center py-20">
|
||||
<Text className="text-gray-400">No clients found</Text>
|
||||
<View className="items-center py-16">
|
||||
<Text className="text-gray-400 text-base">No clients found</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user