392 lines
21 KiB
TypeScript
392 lines
21 KiB
TypeScript
import { useState } from 'react';
|
|
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, Linking, Alert, TextInput, Modal } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useLocalSearchParams, router } from 'expo-router';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import MapView, { Marker } from 'react-native-maps';
|
|
import { api } from '../../../services/api';
|
|
|
|
const TABS = ['Profile', 'Subscription', 'Invoices', 'Tickets'] as const;
|
|
type Tab = typeof TABS[number];
|
|
|
|
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 TICKET_STATUS_COLOR: Record<string, string> = { OPEN: '#0891B2', IN_PROGRESS: '#D97706', RESOLVED: '#16A34A', CLOSED: '#6B7280' };
|
|
const TYPE_COLOR: Record<string, string> = { INSTALLATION: '#0891B2', SUPPORT: '#7C3AED', BILLING: '#D97706' };
|
|
|
|
const INV_STATUS: Record<string, { label: string; color: string; bg: string }> = {
|
|
PAID: { label: 'Paid', color: '#166534', bg: '#DCFCE7' },
|
|
SENT: { label: 'Unpaid', color: '#92400E', bg: '#FEF3C7' },
|
|
OVERDUE: { label: 'Overdue', color: '#991B1B', bg: '#FEE2E2' },
|
|
PARTIAL: { label: 'Partial', color: '#0E7490', bg: '#CFFAFE' },
|
|
DRAFT: { label: 'Draft', color: '#6B7280', bg: '#F1F5F9' },
|
|
VOID: { label: 'Void', color: '#6B7280', bg: '#F1F5F9' },
|
|
};
|
|
|
|
function InfoRow({ label, value, isLast }: { label: string; value?: string | null; isLast?: boolean }) {
|
|
return (
|
|
<View style={{ paddingHorizontal: 20, paddingVertical: 16, borderBottomWidth: isLast ? 0 : 1, borderBottomColor: '#F1F5F9' }}>
|
|
<Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>{label}</Text>
|
|
<Text style={{ fontSize: 17, fontWeight: '500', color: value ? '#0F172A' : '#CBD5E1' }}>{value ?? '—'}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// ── Pay Invoice Modal ─────────────────────────────────────────────────────────
|
|
function PayInvoiceModal({ invoice, onClose, onSuccess }: { invoice: any; onClose: () => void; onSuccess: () => void }) {
|
|
const [amount, setAmount] = useState('');
|
|
const [method, setMethod] = useState('CASH');
|
|
const [ref, setRef] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const METHODS = ['CASH', 'GCASH', 'MAYA', 'BANK'];
|
|
|
|
const submit = async () => {
|
|
const amt = Number(amount);
|
|
if (!amt || amt <= 0) return Alert.alert('Required', 'Enter a valid amount.');
|
|
if (amt > Number(invoice.balance)) {
|
|
Alert.alert('Over Payment', `Amount exceeds balance of ₱${Number(invoice.balance).toLocaleString()}`);
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
await api.post('/api/v1/payments', {
|
|
clientId: invoice.clientId,
|
|
invoiceId: invoice.id,
|
|
amount: amt,
|
|
channel: method,
|
|
referenceNumber: ref.trim() || undefined,
|
|
paymentDate: new Date().toISOString(),
|
|
});
|
|
Alert.alert('Payment Recorded!', `₱${amt.toLocaleString()} applied to ${invoice.invoiceNumber}`);
|
|
onSuccess();
|
|
} catch (e: any) {
|
|
const msg = e?.response?.data?.message;
|
|
Alert.alert('Error', Array.isArray(msg) ? msg.join('\n') : msg ?? 'Payment failed.');
|
|
} finally { setLoading(false); }
|
|
};
|
|
|
|
return (
|
|
<Modal visible animationType="slide" transparent onRequestClose={onClose}>
|
|
<TouchableOpacity style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' }} activeOpacity={1} onPress={onClose}>
|
|
<TouchableOpacity activeOpacity={1} style={{ backgroundColor: '#FFF', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: 24 }}>
|
|
<Text style={{ fontSize: 20, fontWeight: '800', color: '#0F172A', marginBottom: 4 }}>Record Payment</Text>
|
|
<Text style={{ fontSize: 15, color: '#64748B', marginBottom: 20 }}>
|
|
{invoice.invoiceNumber} · Balance: <Text style={{ fontWeight: '700', color: '#991B1B' }}>₱{Number(invoice.balance).toLocaleString()}</Text>
|
|
</Text>
|
|
|
|
<Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>Amount (₱)</Text>
|
|
<TextInput
|
|
style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 16, paddingVertical: 14, fontSize: 24, fontWeight: '800', color: '#0F172A', textAlign: 'center', marginBottom: 16 }}
|
|
placeholder="0.00"
|
|
placeholderTextColor="#CBD5E1"
|
|
keyboardType="decimal-pad"
|
|
value={amount}
|
|
onChangeText={setAmount}
|
|
/>
|
|
|
|
<Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>Method</Text>
|
|
<View style={{ flexDirection: 'row', marginBottom: 16 }}>
|
|
{METHODS.map(m => (
|
|
<TouchableOpacity key={m} onPress={() => setMethod(m)}
|
|
style={{ flex: 1, borderRadius: 12, paddingVertical: 12, alignItems: 'center', marginHorizontal: 3, backgroundColor: method === m ? '#0891B2' : '#F1F5F9' }}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={{ fontSize: 13, fontWeight: '700', color: method === m ? '#FFF' : '#64748B' }}>{m}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>Reference # <Text style={{ fontWeight: '400', color: '#94A3B8' }}>(optional)</Text></Text>
|
|
<TextInput
|
|
style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 16, paddingVertical: 12, fontSize: 16, color: '#0F172A', marginBottom: 20 }}
|
|
placeholder="GCash ref, OR number..."
|
|
placeholderTextColor="#94A3B8"
|
|
value={ref}
|
|
onChangeText={setRef}
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={{ backgroundColor: amount && Number(amount) > 0 ? '#059669' : '#CBD5E1', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
|
|
onPress={submit}
|
|
disabled={loading}
|
|
activeOpacity={0.8}
|
|
>
|
|
{loading ? <ActivityIndicator color="#FFF" /> : <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>Confirm Payment</Text>}
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
// ── Main Screen ───────────────────────────────────────────────────────────────
|
|
export default function ClientDetailScreen() {
|
|
const params = useLocalSearchParams<{ id: string; tab?: string }>();
|
|
const id = params.id;
|
|
const qc = useQueryClient();
|
|
|
|
const initialTab = (params.tab === 'invoices' ? 'Invoices' : 'Profile') as Tab;
|
|
const [activeTab, setActiveTab] = useState<Tab>(initialTab);
|
|
const [payingInvoice, setPayingInvoice] = useState<any>(null);
|
|
|
|
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: async () => {
|
|
const res = await api.get(`/api/v1/invoices?clientId=${id}&limit=50`);
|
|
const items: any[] = res.data?.data ?? res.data ?? [];
|
|
items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
|
return items;
|
|
},
|
|
enabled: activeTab === 'Invoices',
|
|
});
|
|
|
|
const { data: tickets } = useQuery({
|
|
queryKey: ['client-tickets', id],
|
|
queryFn: async () => {
|
|
const res = await api.get(`/api/v1/tickets?clientId=${id}&limit=50`);
|
|
return res.data?.data ?? res.data ?? [];
|
|
},
|
|
enabled: activeTab === 'Tickets',
|
|
});
|
|
|
|
const sub = client?.subscriptions?.[0];
|
|
|
|
const navigateToClient = () => {
|
|
const lat = client?.lat;
|
|
const lng = client?.lng;
|
|
if (!lat || !lng) {
|
|
Alert.alert('No Location', 'This client has no recorded location yet. Location is recorded during installation confirmation.');
|
|
return;
|
|
}
|
|
Alert.alert('Navigate to Client', `${client?.firstName} ${client?.lastName}`, [
|
|
{ text: 'Google Maps', onPress: () => Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`) },
|
|
{ text: 'Waze', onPress: () => Linking.openURL(`waze://?ll=${lat},${lng}&navigate=yes`) },
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
]);
|
|
};
|
|
|
|
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 statusStyle = {
|
|
color: STATUS_COLOR[client?.status] ?? '#475569',
|
|
bg: 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: 18 }}>
|
|
<TouchableOpacity onPress={() => router.back()} style={{ marginBottom: 12 }} activeOpacity={0.7}>
|
|
<Text style={{ color: '#A5F3FC', fontSize: 17, fontWeight: '600' }}>← Back</Text>
|
|
</TouchableOpacity>
|
|
<Text style={{ color: '#FFF', fontSize: 24, fontWeight: '800' }}>{client?.firstName} {client?.lastName}</Text>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 8, gap: 8 }}>
|
|
<Text style={{ color: '#A5F3FC', fontSize: 14 }}>{client?.accountNumber}</Text>
|
|
<View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 5, backgroundColor: statusStyle.bg }}>
|
|
<Text style={{ fontSize: 13, fontWeight: '700', color: statusStyle.color }}>{client?.status}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Tabs */}
|
|
<View style={{ flexDirection: 'row', backgroundColor: '#FFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9' }}>
|
|
{TABS.map(tab => (
|
|
<TouchableOpacity key={tab} onPress={() => setActiveTab(tab)} style={{ flex: 1, paddingVertical: 14, alignItems: 'center', borderBottomWidth: 2.5, borderBottomColor: activeTab === tab ? '#0891B2' : 'transparent' }} activeOpacity={0.7}>
|
|
<Text style={{ fontSize: 14, fontWeight: '700', color: activeTab === tab ? '#0891B2' : '#94A3B8' }}>{tab}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{/* ── PROFILE TAB ── */}
|
|
{activeTab === 'Profile' && (
|
|
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 40 }}>
|
|
<View style={{ backgroundColor: '#FFF', borderRadius: 20, margin: 16, borderWidth: 1, borderColor: '#F1F5F9', overflow: 'hidden' }}>
|
|
<InfoRow label="Full Name" value={`${client?.firstName} ${client?.lastName}`} />
|
|
<InfoRow label="Account #" value={client?.accountNumber} />
|
|
<InfoRow label="Email" value={client?.email} />
|
|
<InfoRow label="Phone" value={client?.phone} />
|
|
<InfoRow label="Address" value={client?.address} />
|
|
<InfoRow label="Area" value={client?.area?.name} />
|
|
<InfoRow label="Zone" value={client?.zone?.name} isLast />
|
|
</View>
|
|
|
|
{/* Map + Navigate */}
|
|
<View style={{ marginHorizontal: 16, marginBottom: 16 }}>
|
|
<Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>Location</Text>
|
|
{client?.lat && client?.lng ? (
|
|
<>
|
|
<View style={{ borderRadius: 16, overflow: 'hidden', height: 200, marginBottom: 10 }}>
|
|
<MapView
|
|
style={{ flex: 1 }}
|
|
initialRegion={{ latitude: client.lat, longitude: client.lng, latitudeDelta: 0.005, longitudeDelta: 0.005 }}
|
|
scrollEnabled={false}
|
|
zoomEnabled={false}
|
|
>
|
|
<Marker coordinate={{ latitude: client.lat, longitude: client.lng }} title={`${client.firstName} ${client.lastName}`} description={client.address ?? ''} />
|
|
</MapView>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={{ backgroundColor: '#0891B2', borderRadius: 14, paddingVertical: 16, alignItems: 'center' }}
|
|
onPress={navigateToClient}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={{ color: '#FFF', fontSize: 16, fontWeight: '700' }}>📍 Navigate to Client</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
) : (
|
|
<View style={{ backgroundColor: '#F1F5F9', borderRadius: 16, padding: 24, alignItems: 'center' }}>
|
|
<Text style={{ fontSize: 15, color: '#94A3B8', marginBottom: 6 }}>No location recorded</Text>
|
|
<Text style={{ fontSize: 13, color: '#CBD5E1', textAlign: 'center' }}>Location is recorded when a technician confirms an installation</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
)}
|
|
|
|
{/* ── SUBSCRIPTION TAB ── */}
|
|
{activeTab === 'Subscription' && (
|
|
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
|
|
{!sub ? (
|
|
<View style={{ alignItems: 'center', paddingVertical: 48 }}>
|
|
<Text style={{ fontSize: 15, color: '#94A3B8' }}>No active subscription</Text>
|
|
</View>
|
|
) : (
|
|
<View style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', overflow: 'hidden' }}>
|
|
<InfoRow label="Plan" value={sub.plan?.name} />
|
|
<InfoRow label="Speed" value={sub.plan?.speed ? `${sub.plan.speed} Mbps` : null} />
|
|
<InfoRow label="Monthly" value={sub.plan?.price ? `₱${Number(sub.plan.price).toLocaleString()}` : null} />
|
|
<InfoRow label="Status" value={sub.status} />
|
|
<InfoRow label="Start Date" value={sub.startDate ? new Date(sub.startDate).toLocaleDateString('en-PH', { year: 'numeric', month: 'long', day: 'numeric' }) : null} />
|
|
<InfoRow label="Billing Day" value={sub.billingDay ? `Day ${sub.billingDay}` : null} isLast />
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
)}
|
|
|
|
{/* ── INVOICES TAB ── */}
|
|
{activeTab === 'Invoices' && (
|
|
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
|
|
{!invoices ? (
|
|
<ActivityIndicator color="#0891B2" style={{ marginTop: 40 }} />
|
|
) : invoices.length === 0 ? (
|
|
<View style={{ alignItems: 'center', paddingVertical: 48 }}>
|
|
<Text style={{ fontSize: 15, color: '#94A3B8' }}>No invoices found</Text>
|
|
</View>
|
|
) : (
|
|
invoices.map((inv: any) => {
|
|
const st = INV_STATUS[inv.status] ?? { label: inv.status, color: '#6B7280', bg: '#F1F5F9' };
|
|
const isUnpaid = ['SENT', 'PARTIAL', 'OVERDUE'].includes(inv.status) && Number(inv.balance) > 0;
|
|
const issued = inv.createdAt ? new Date(inv.createdAt).toLocaleDateString('en-PH', { month: 'short', day: 'numeric', year: 'numeric' }) : '—';
|
|
return (
|
|
<View key={inv.id} style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 16, marginBottom: 12, borderWidth: 1, borderColor: '#F1F5F9' }}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
|
|
<View>
|
|
<Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A' }}>{inv.invoiceNumber}</Text>
|
|
<Text style={{ fontSize: 13, color: '#64748B', marginTop: 2 }}>Issued: {issued}</Text>
|
|
{inv.dueDate && (
|
|
<Text style={{ fontSize: 13, color: '#64748B' }}>Due: {new Date(inv.dueDate).toLocaleDateString('en-PH', { month: 'short', day: 'numeric', year: 'numeric' })}</Text>
|
|
)}
|
|
</View>
|
|
<View style={{ alignItems: 'flex-end' }}>
|
|
<View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 5, backgroundColor: st.bg }}>
|
|
<Text style={{ fontSize: 13, fontWeight: '700', color: st.color }}>{st.label}</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 16, fontWeight: '800', color: '#0F172A', marginTop: 6 }}>₱{Number(inv.total).toLocaleString()}</Text>
|
|
{isUnpaid && (
|
|
<Text style={{ fontSize: 13, color: '#991B1B', fontWeight: '600' }}>Balance: ₱{Number(inv.balance).toLocaleString()}</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
{isUnpaid && (
|
|
<TouchableOpacity
|
|
style={{ backgroundColor: '#059669', borderRadius: 12, paddingVertical: 13, alignItems: 'center' }}
|
|
onPress={() => setPayingInvoice(inv)}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={{ color: '#FFF', fontSize: 15, fontWeight: '700' }}>+ Record Payment</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
})
|
|
)}
|
|
</ScrollView>
|
|
)}
|
|
|
|
{/* ── TICKETS TAB ── */}
|
|
{activeTab === 'Tickets' && (
|
|
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
|
|
<TouchableOpacity
|
|
style={{ backgroundColor: '#0891B2', borderRadius: 14, paddingVertical: 14, alignItems: 'center', marginBottom: 16 }}
|
|
onPress={() => router.push({ pathname: '/(app)/tasks/new', params: { prefillClientId: id, prefillName: `${client?.firstName} ${client?.lastName}` } })}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={{ color: '#FFF', fontSize: 16, fontWeight: '700' }}>+ New Ticket</Text>
|
|
</TouchableOpacity>
|
|
|
|
{!tickets ? (
|
|
<ActivityIndicator color="#0891B2" style={{ marginTop: 40 }} />
|
|
) : tickets.length === 0 ? (
|
|
<View style={{ alignItems: 'center', paddingVertical: 48 }}>
|
|
<Text style={{ fontSize: 15, color: '#94A3B8' }}>No tickets for this client</Text>
|
|
</View>
|
|
) : (
|
|
tickets.map((t: any) => {
|
|
const typeColor = TYPE_COLOR[t.type] ?? '#6B7280';
|
|
const statusColor = TICKET_STATUS_COLOR[t.status] ?? '#6B7280';
|
|
return (
|
|
<TouchableOpacity
|
|
key={t.id}
|
|
onPress={() => router.push(`/(app)/tasks/${t.id}`)}
|
|
activeOpacity={0.8}
|
|
style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 16, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9', borderLeftWidth: 4, borderLeftColor: typeColor }}
|
|
>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 }}>
|
|
<View style={{ borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: `${typeColor}20` }}>
|
|
<Text style={{ fontSize: 12, fontWeight: '700', color: typeColor }}>{t.type}</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 13, fontWeight: '600', color: statusColor }}>{t.status?.replace('_', ' ')}</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A' }} numberOfLines={1}>{t.subject}</Text>
|
|
<Text style={{ fontSize: 13, color: '#64748B', marginTop: 3 }}>
|
|
{t.assignedTo ? `Assigned: ${t.assignedTo.firstName} ${t.assignedTo.lastName}` : 'Unassigned'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})
|
|
)}
|
|
</ScrollView>
|
|
)}
|
|
</View>
|
|
|
|
{/* Pay Invoice Modal */}
|
|
{payingInvoice && (
|
|
<PayInvoiceModal
|
|
invoice={payingInvoice}
|
|
onClose={() => setPayingInvoice(null)}
|
|
onSuccess={() => {
|
|
setPayingInvoice(null);
|
|
qc.invalidateQueries({ queryKey: ['client-invoices', id] });
|
|
qc.invalidateQueries({ queryKey: ['unpaid-invoices'] });
|
|
}}
|
|
/>
|
|
)}
|
|
</SafeAreaView>
|
|
);
|
|
}
|