kibin/fiberops-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: client list - prominent status badge with left border accent + plan name

Browse Source
This commit is contained in:
Nemo
2026-03-24 11:33:30 +08:00
parent 346e41445b
commit defacbcc77
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/(app)/clients/index.tsx
View File

@@ -5,11 +5,11 @@ import { useQuery } from '@tanstack/react-query';
import { router } from 'expo-router'; import { router } from 'expo-router';
import { api } from '../../../services/api'; import { api } from '../../../services/api';
const STATUS_CONFIG: Record<string, { label: string; color: string; bg: string }> = { const STATUS_CONFIG: Record<string, { label: string; color: string; bg: string; accent: string }> = {
ACTIVE: { label: 'Active', color: '#166534', bg: '#DCFCE7' }, ACTIVE: { label: 'Active', color: '#166534', bg: '#DCFCE7', accent: '#16A34A' },
SUSPENDED: { label: 'Suspended', color: '#92400E', bg: '#FEF3C7' }, SUSPENDED: { label: 'Suspended', color: '#92400E', bg: '#FEF3C7', accent: '#D97706' },
CANCELLED: { label: 'Cancelled', color: '#991B1B', bg: '#FEE2E2' }, CANCELLED: { label: 'Cancelled', color: '#991B1B', bg: '#FEE2E2', accent: '#DC2626' },
PENDING: { label: 'Pending', color: '#475569', bg: '#F1F5F9' }, PENDING: { label: 'Pending', color: '#475569', bg: '#F1F5F9', accent: '#94A3B8' },
}; };
export default function ClientsScreen() { export default function ClientsScreen() {
@@ -63,21 +63,22 @@ export default function ClientsScreen() {
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#0891B2" />} refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#0891B2" />}
contentContainerStyle={{ padding: 16, paddingBottom: 32 }} contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
renderItem={({ item }) => { renderItem={({ item }) => {
const st = STATUS_CONFIG[item.status] ?? { label: item.status, color: '#475569', bg: '#F1F5F9' }; const st = STATUS_CONFIG[item.status] ?? { label: item.status, color: '#475569', bg: '#F1F5F9', accent: '#94A3B8' };
const plan = item.subscriptions?.[0]?.plan?.name;
return ( return (
<TouchableOpacity <TouchableOpacity
style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 12, borderWidth: 1, borderColor: '#F1F5F9' }} style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 12, borderWidth: 1, borderColor: '#F1F5F9', borderLeftWidth: 4, borderLeftColor: st.accent }}
onPress={() => router.push(`/(app)/clients/${item.id}`)} onPress={() => router.push(`/(app)/clients/${item.id}`)}
activeOpacity={0.7} activeOpacity={0.7}
> >
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View style={{ flex: 1, marginRight: 12 }}> <View style={{ flex: 1, marginRight: 12 }}>
<Text style={{ fontSize: 17, fontWeight: '700', color: '#0F172A' }}>{item.firstName} {item.lastName}</Text> <Text style={{ fontSize: 17, fontWeight: '700', color: '#0F172A' }}>{item.firstName} {item.lastName}</Text>
<Text style={{ fontSize: 15, color: '#64748B', marginTop: 3 }}>{item.accountNumber}</Text> <Text style={{ fontSize: 14, color: '#64748B', marginTop: 3 }}>{item.accountNumber}{plan ? ` · ${plan}` : ''}</Text>
{item.phone && <Text style={{ fontSize: 15, color: '#94A3B8', marginTop: 2 }}>{item.phone}</Text>} {item.phone && <Text style={{ fontSize: 14, color: '#94A3B8', marginTop: 2 }}>{item.phone}</Text>}
</View> </View>
<View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 5, backgroundColor: st.bg }}> <View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 6, backgroundColor: st.bg }}>
<Text style={{ fontSize: 13, fontWeight: '700', color: st.color }}>{st.label}</Text> <Text style={{ fontSize: 13, fontWeight: '800', color: st.color }}>{st.label}</Text>
</View> </View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>