From defacbcc778ba9e6ea37d9cb3b957d5c0c6a4ae5 Mon Sep 17 00:00:00 2001
From: Nemo <nemo@openclaw.ai>
Date: Tue, 24 Mar 2026 11:33:30 +0800
Subject: [PATCH] fix: client list - prominent status badge with left border
 accent + plan name

---
 app/(app)/clients/index.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/(app)/clients/index.tsx b/app/(app)/clients/index.tsx
index c81d2f8..641124a 100644
--- a/app/(app)/clients/index.tsx
+++ b/app/(app)/clients/index.tsx
@@ -5,11 +5,11 @@ import { useQuery } from '@tanstack/react-query';
 import { router } from 'expo-router';
 import { api } from '../../../services/api';
 
-const STATUS_CONFIG: Record<string, { label: string; color: string; bg: string }> = {
-  ACTIVE:    { label: 'Active',    color: '#166534', bg: '#DCFCE7' },
-  SUSPENDED: { label: 'Suspended', color: '#92400E', bg: '#FEF3C7' },
-  CANCELLED: { label: 'Cancelled', color: '#991B1B', bg: '#FEE2E2' },
-  PENDING:   { label: 'Pending',   color: '#475569', bg: '#F1F5F9' },
+const STATUS_CONFIG: Record<string, { label: string; color: string; bg: string; accent: string }> = {
+  ACTIVE:    { label: 'Active',    color: '#166534', bg: '#DCFCE7', accent: '#16A34A' },
+  SUSPENDED: { label: 'Suspended', color: '#92400E', bg: '#FEF3C7', accent: '#D97706' },
+  CANCELLED: { label: 'Cancelled', color: '#991B1B', bg: '#FEE2E2', accent: '#DC2626' },
+  PENDING:   { label: 'Pending',   color: '#475569', bg: '#F1F5F9', accent: '#94A3B8' },
 };
 
 export default function ClientsScreen() {
@@ -63,21 +63,22 @@ export default function ClientsScreen() {
             refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#0891B2" />}
             contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
             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 (
                 <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}`)}
                   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 }}>
                       <Text style={{ fontSize: 17, fontWeight: '700', color: '#0F172A' }}>{item.firstName} {item.lastName}</Text>
-                      <Text style={{ fontSize: 15, color: '#64748B', marginTop: 3 }}>{item.accountNumber}</Text>
-                      {item.phone && <Text style={{ fontSize: 15, color: '#94A3B8', marginTop: 2 }}>{item.phone}</Text>}
+                      <Text style={{ fontSize: 14, color: '#64748B', marginTop: 3 }}>{item.accountNumber}{plan ? ` · ${plan}` : ''}</Text>
+                      {item.phone && <Text style={{ fontSize: 14, color: '#94A3B8', marginTop: 2 }}>{item.phone}</Text>}
                     </View>
-                    <View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 5, backgroundColor: st.bg }}>
-                      <Text style={{ fontSize: 13, fontWeight: '700', color: st.color }}>{st.label}</Text>
+                    <View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 6, backgroundColor: st.bg }}>
+                      <Text style={{ fontSize: 13, fontWeight: '800', color: st.color }}>{st.label}</Text>
                     </View>
                   </View>
                 </TouchableOpacity>