feat: major UI/UX overhaul + user management + ticket detail refactor
- 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
This commit is contained in:
Nemo
@@ -1,11 +1,15 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { router } from 'expo-router';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
ACTIVE: '#16A34A', SUSPENDED: '#D97706', CANCELLED: '#DC2626', PENDING: '#6B7280',
|
||||
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' },
|
||||
};
|
||||
|
||||
export default function ClientsScreen() {
|
||||
@@ -20,54 +24,73 @@ export default function ClientsScreen() {
|
||||
);
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<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-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" />
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
||||
<View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
||||
{/* Header */}
|
||||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 20 }}>
|
||||
<Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Clients</Text>
|
||||
<Text style={{ color: '#A5F3FC', fontSize: 15, marginTop: 2 }}>{data?.length ?? 0} subscribers</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={clients}
|
||||
keyExtractor={(item) => item.id}
|
||||
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"
|
||||
onPress={() => router.push(`/(app)/clients/${item.id}`)}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* Search */}
|
||||
<View style={{ backgroundColor: '#FFF', paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F1F5F9' }}>
|
||||
<View style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 12, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14 }}>
|
||||
<TextInput
|
||||
style={{ flex: 1, paddingVertical: 13, fontSize: 16, color: '#0F172A' }}
|
||||
placeholder="Search by name or account #"
|
||||
placeholderTextColor="#94A3B8"
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
/>
|
||||
{search.length > 0 && (
|
||||
<TouchableOpacity onPress={() => setSearch('')} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: '#CBD5E1', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text style={{ color: '#FFF', fontSize: 12, fontWeight: '800', lineHeight: 14 }}>×</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ActivityIndicator color="#0891B2" size="large" />
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={clients}
|
||||
keyExtractor={(item) => item.id}
|
||||
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' };
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 12, borderWidth: 1, borderColor: '#F1F5F9' }}
|
||||
onPress={() => router.push(`/(app)/clients/${item.id}`)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<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>}
|
||||
</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>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}}
|
||||
ListEmptyComponent={
|
||||
<View style={{ alignItems: 'center', paddingVertical: 60 }}>
|
||||
<Text style={{ fontSize: 17, color: '#94A3B8' }}>No clients found</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<View className="items-center py-16">
|
||||
<Text className="text-gray-400 text-base">No clients found</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user