4644a3194d
- 5-tab navigation (Home/Clients/Collect/Tickets/Profile) - Inline styles throughout (17px min font, SafeAreaView) - Dashboard fixed to match real API shape - Ticket detail: 2 tabs (Details + Comments), always-visible comment input - Installation confirmation: GPS coordinate capture + client location update - User management screens (Admin only): list, create, detail + role/active toggle - Tasks folder replaces tickets folder - Remittance detail: inline styles - Record payment: prefill from client, live button text - Icon component with SVG icons - Color system: primary #0891B2
223 lines
12 KiB
TypeScript
223 lines
12 KiB
TypeScript
import { useState } from 'react';
|
|
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, Linking } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useLocalSearchParams, router } from 'expo-router';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { api } from '../../../services/api';
|
|
|
|
const TABS = ['Profile', 'Subscription', 'Invoices', 'Payments'];
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
ACTIVE: '#166534', SUSPENDED: '#92400E', CANCELLED: '#991B1B', PENDING: '#475569',
|
|
};
|
|
const STATUS_BG: Record<string, string> = {
|
|
ACTIVE: '#DCFCE7', SUSPENDED: '#FEF3C7', CANCELLED: '#FEE2E2', PENDING: '#F1F5F9',
|
|
};
|
|
const INV_STATUS: Record<string, { label: string; color: string; bg: string }> = {
|
|
PAID: { label: 'Paid', color: '#166534', bg: '#DCFCE7' },
|
|
UNPAID: { label: 'Unpaid', color: '#92400E', bg: '#FEF3C7' },
|
|
OVERDUE: { label: 'Overdue', color: '#991B1B', bg: '#FEE2E2' },
|
|
PARTIAL: { label: 'Partial', color: '#0E7490', bg: '#CFFAFE' },
|
|
VOID: { label: 'Void', color: '#6B7280', bg: '#F1F5F9' },
|
|
};
|
|
|
|
function InfoRow({ label, value, onPress, isLast }: { label: string; value?: string | null; onPress?: () => void; isLast?: boolean }) {
|
|
return (
|
|
<TouchableOpacity
|
|
disabled={!onPress}
|
|
onPress={onPress}
|
|
style={{ paddingHorizontal: 20, paddingVertical: 16, borderBottomWidth: isLast ? 0 : 1, borderBottomColor: '#F1F5F9' }}
|
|
activeOpacity={onPress ? 0.7 : 1}
|
|
>
|
|
<Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>{label}</Text>
|
|
<Text style={{ fontSize: 17, fontWeight: '500', color: onPress ? '#0891B2' : '#0F172A' }}>{value ?? '—'}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
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),
|
|
});
|
|
const { data: subData, isLoading: subLoading } = useQuery({
|
|
queryKey: ['client-subscription', id],
|
|
queryFn: () => api.get(`/api/v1/subscriptions?clientId=${id}&limit=1`).then(r => r.data?.data?.[0] ?? r.data?.[0] ?? null),
|
|
enabled: tab === 'Subscription',
|
|
});
|
|
const { data: invoices, isLoading: invLoading } = 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, isLoading: payLoading } = useQuery({
|
|
queryKey: ['client-payments', id],
|
|
queryFn: () => api.get(`/api/v1/payments?clientId=${id}&limit=20`).then(r => r.data?.data ?? r.data ?? []),
|
|
enabled: tab === 'Payments',
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
|
<View style={{ flex: 1, backgroundColor: '#F8FAFC', alignItems: 'center', justifyContent: 'center' }}>
|
|
<ActivityIndicator color="#0891B2" size="large" />
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const statusColor = STATUS_COLOR[client?.status] ?? '#475569';
|
|
const statusBg = STATUS_BG[client?.status] ?? '#F1F5F9';
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
|
<View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
|
{/* Header */}
|
|
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 16, paddingTop: 12, paddingBottom: 20 }}>
|
|
<TouchableOpacity onPress={() => router.back()} style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 12 }} activeOpacity={0.7} hitSlop={{ top: 10, bottom: 10, left: 0, right: 20 }}>
|
|
<Text style={{ color: '#A5F3FC', fontSize: 17, fontWeight: '600' }}>← Back</Text>
|
|
</TouchableOpacity>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
|
<View style={{ flex: 1, marginRight: 12 }}>
|
|
<Text style={{ color: '#FFF', fontSize: 22, fontWeight: '800' }}>{client?.firstName} {client?.lastName}</Text>
|
|
<Text style={{ color: '#A5F3FC', fontSize: 15, marginTop: 3 }}>{client?.accountNumber}</Text>
|
|
</View>
|
|
<View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 6, backgroundColor: statusBg }}>
|
|
<Text style={{ fontSize: 13, fontWeight: '700', color: statusColor }}>{client?.status}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Tabs */}
|
|
<View style={{ flexDirection: 'row', backgroundColor: '#FFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9' }}>
|
|
{TABS.map(t => (
|
|
<TouchableOpacity
|
|
key={t}
|
|
onPress={() => setTab(t)}
|
|
style={{ flex: 1, paddingVertical: 14, alignItems: 'center', borderBottomWidth: 2.5, borderBottomColor: tab === t ? '#0891B2' : 'transparent' }}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={{ fontSize: 14, fontWeight: '700', color: tab === t ? '#0891B2' : '#94A3B8' }}>{t}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
|
|
{/* PROFILE */}
|
|
{tab === 'Profile' && (
|
|
<View style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9' }}>
|
|
<InfoRow label="Account Number" value={client?.accountNumber} />
|
|
<InfoRow label="Email" value={client?.email} />
|
|
<InfoRow label="Phone" value={client?.phone} onPress={() => client?.phone && Linking.openURL(`tel:${client.phone}`)} />
|
|
<InfoRow label="Address" value={client?.address} />
|
|
<InfoRow label="Area" value={client?.area?.name} />
|
|
<InfoRow label="Date Joined" value={client?.createdAt ? new Date(client.createdAt).toLocaleDateString('en-PH', { year: 'numeric', month: 'long', day: 'numeric' }) : undefined} isLast />
|
|
</View>
|
|
)}
|
|
|
|
{/* SUBSCRIPTION */}
|
|
{tab === 'Subscription' && (
|
|
subLoading ? (
|
|
<View style={{ paddingVertical: 60, alignItems: 'center' }}><ActivityIndicator color="#0891B2" size="large" /></View>
|
|
) : !subData ? (
|
|
<View style={{ alignItems: 'center', paddingVertical: 60 }}>
|
|
<Text style={{ fontSize: 17, color: '#94A3B8' }}>No active subscription</Text>
|
|
</View>
|
|
) : (
|
|
<View>
|
|
<View style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', marginBottom: 12 }}>
|
|
<InfoRow label="Plan" value={subData.plan?.name} />
|
|
<InfoRow label="Speed" value={subData.plan?.speedMbps ? `${subData.plan.speedMbps} Mbps` : undefined} />
|
|
<InfoRow label="Monthly Rate" value={subData.plan?.price ? `₱${Number(subData.plan.price).toLocaleString()}` : undefined} />
|
|
<InfoRow label="Status" value={subData.status} />
|
|
<InfoRow label="Start Date" value={subData.startDate ? new Date(subData.startDate).toLocaleDateString('en-PH', { year: 'numeric', month: 'long', day: 'numeric' }) : undefined} />
|
|
<InfoRow label="Billing Day" value={subData.billingCycleDay ? `Day ${subData.billingCycleDay} of every month` : undefined} isLast />
|
|
</View>
|
|
{subData.nextBillingDate && (
|
|
<View style={{ backgroundColor: '#ECFEFF', borderRadius: 14, padding: 16, borderWidth: 1, borderColor: '#A5F3FC' }}>
|
|
<Text style={{ fontSize: 13, fontWeight: '600', color: '#0E7490' }}>Next billing date</Text>
|
|
<Text style={{ fontSize: 17, fontWeight: '700', color: '#0E7490', marginTop: 2 }}>{new Date(subData.nextBillingDate).toLocaleDateString('en-PH', { year: 'numeric', month: 'long', day: 'numeric' })}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
)}
|
|
|
|
{/* INVOICES */}
|
|
{tab === 'Invoices' && (
|
|
invLoading ? (
|
|
<View style={{ paddingVertical: 60, alignItems: 'center' }}><ActivityIndicator color="#0891B2" size="large" /></View>
|
|
) : !invoices?.length ? (
|
|
<View style={{ alignItems: 'center', paddingVertical: 60 }}>
|
|
<Text style={{ fontSize: 17, color: '#94A3B8' }}>No invoices yet</Text>
|
|
</View>
|
|
) : (
|
|
invoices.map((inv: any) => {
|
|
const st = INV_STATUS[inv.status] ?? { label: inv.status, color: '#6B7280', bg: '#F1F5F9' };
|
|
return (
|
|
<View key={inv.id} style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9' }}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
|
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A' }}>{inv.invoiceNumber}</Text>
|
|
<View style={{ borderRadius: 20, paddingHorizontal: 10, paddingVertical: 4, backgroundColor: st.bg }}>
|
|
<Text style={{ fontSize: 12, fontWeight: '700', color: st.color }}>{st.label}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<Text style={{ fontSize: 15, color: '#64748B' }}>Due: {inv.dueDate ? new Date(inv.dueDate).toLocaleDateString() : '—'}</Text>
|
|
<Text style={{ fontSize: 17, fontWeight: '800', color: '#0F172A' }}>₱{Number(inv.amount ?? inv.totalAmount ?? 0).toLocaleString()}</Text>
|
|
</View>
|
|
{inv.balance > 0 && (
|
|
<Text style={{ fontSize: 14, color: '#DC2626', marginTop: 6, fontWeight: '600' }}>Balance: ₱{Number(inv.balance).toLocaleString()}</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
})
|
|
)
|
|
)}
|
|
|
|
{/* PAYMENTS */}
|
|
{tab === 'Payments' && (
|
|
payLoading ? (
|
|
<View style={{ paddingVertical: 60, alignItems: 'center' }}><ActivityIndicator color="#0891B2" size="large" /></View>
|
|
) : (
|
|
<>
|
|
<TouchableOpacity
|
|
style={{ backgroundColor: '#059669', borderRadius: 14, paddingVertical: 16, alignItems: 'center', marginBottom: 16 }}
|
|
onPress={() => router.push({ pathname: '/(app)/payments/record', params: { prefillClientId: id, prefillName: `${client?.firstName} ${client?.lastName}`, prefillAccountNumber: client?.accountNumber } })}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>+ Record Payment</Text>
|
|
</TouchableOpacity>
|
|
|
|
{!payments?.length ? (
|
|
<View style={{ alignItems: 'center', paddingVertical: 40 }}>
|
|
<Text style={{ fontSize: 17, color: '#94A3B8' }}>No payments recorded</Text>
|
|
</View>
|
|
) : (
|
|
payments.map((p: any) => (
|
|
<View key={p.id} style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9' }}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A' }}>{p.paymentMethod}</Text>
|
|
<Text style={{ fontSize: 14, color: '#64748B', marginTop: 3 }}>
|
|
{p.paymentDate ? new Date(p.paymentDate).toLocaleDateString('en-PH') : new Date(p.createdAt).toLocaleDateString('en-PH')}
|
|
</Text>
|
|
{p.referenceNumber && <Text style={{ fontSize: 13, color: '#94A3B8', marginTop: 2 }}>Ref: {p.referenceNumber}</Text>}
|
|
</View>
|
|
<Text style={{ fontSize: 18, fontWeight: '800', color: '#166534' }}>₱{Number(p.amount).toLocaleString()}</Text>
|
|
</View>
|
|
</View>
|
|
))
|
|
)}
|
|
</>
|
|
)
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|