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,87 +1,48 @@
|
||||
import { useState } from 'react';
|
||||
import { View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { router } from 'expo-router';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
const METHOD_ICON: Record<string, string> = { CASH: '💵', GCASH: '📱', MAYA: '💙', BANK: '🏦' };
|
||||
|
||||
export default function PaymentsScreen() {
|
||||
const { data, isLoading, refetch, isRefetching } = useQuery({
|
||||
queryKey: ['payments'],
|
||||
queryFn: () => api.get('/api/v1/payments?limit=50').then(r => r.data?.data ?? r.data ?? []),
|
||||
});
|
||||
|
||||
const payments: any[] = data ?? [];
|
||||
|
||||
// Calculate today's total
|
||||
const today = new Date().toDateString();
|
||||
const todayTotal = payments
|
||||
.filter((p: any) => new Date(p.paymentDate ?? p.createdAt).toDateString() === today)
|
||||
.reduce((sum: number, p: any) => sum + Number(p.amount), 0);
|
||||
|
||||
export default function CollectScreen() {
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
{/* Header */}
|
||||
<View className="px-4 pt-14 pb-4 bg-primary flex-row justify-between items-center">
|
||||
<View>
|
||||
<Text className="text-white text-xl font-bold">Payments</Text>
|
||||
<Text className="text-white/70 text-xs mt-0.5">Today: ₱{todayTotal.toLocaleString()}</Text>
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
||||
<View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
||||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 }}>
|
||||
<Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Collect</Text>
|
||||
<Text style={{ color: '#A5F3FC', fontSize: 15, marginTop: 2 }}>Payments & remittances</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
className="bg-white/20 rounded-xl px-4 py-2"
|
||||
onPress={() => router.push('/(app)/payments/record')}
|
||||
>
|
||||
<Text className="text-white font-semibold text-sm">+ Record</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={payments}
|
||||
keyExtractor={(item) => item.id}
|
||||
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
|
||||
contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
|
||||
ListEmptyComponent={
|
||||
<View className="items-center py-20">
|
||||
<Text className="text-4xl mb-3">💳</Text>
|
||||
<Text className="text-gray-400 text-base">No payments yet</Text>
|
||||
<TouchableOpacity
|
||||
className="mt-4 bg-primary rounded-xl px-6 py-3"
|
||||
onPress={() => router.push('/(app)/payments/record')}
|
||||
>
|
||||
<Text className="text-white font-semibold">Record First Payment</Text>
|
||||
</TouchableOpacity>
|
||||
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
|
||||
<TouchableOpacity
|
||||
style={{ backgroundColor: '#ECFEFF', borderRadius: 20, padding: 20, marginBottom: 14, borderWidth: 1.5, borderColor: '#67E8F9', flexDirection: 'row', alignItems: 'center' }}
|
||||
onPress={() => router.push('/(app)/payments/record')}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ width: 56, height: 56, borderRadius: 16, backgroundColor: '#0891B2', alignItems: 'center', justifyContent: 'center', marginRight: 16 }}>
|
||||
<Text style={{ fontSize: 26 }}>💳</Text>
|
||||
</View>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<View className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
|
||||
<View className="flex-row justify-between items-start">
|
||||
<View className="flex-1">
|
||||
<View className="flex-row items-center mb-1">
|
||||
<Text className="text-base mr-2">{METHOD_ICON[item.paymentMethod] ?? '💳'}</Text>
|
||||
<Text className="font-semibold text-gray-900">
|
||||
{item.client?.firstName} {item.client?.lastName}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="text-gray-500 text-sm">{item.client?.accountNumber}</Text>
|
||||
<Text className="text-gray-400 text-xs mt-1">
|
||||
{new Date(item.paymentDate ?? item.createdAt).toLocaleDateString()} · {item.paymentMethod}
|
||||
</Text>
|
||||
{item.referenceNumber && (
|
||||
<Text className="text-gray-400 text-xs">Ref: {item.referenceNumber}</Text>
|
||||
)}
|
||||
</View>
|
||||
<Text className="font-bold text-green-700 text-lg">
|
||||
₱{Number(item.amount).toLocaleString()}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 18, fontWeight: '800', color: '#0F172A' }}>Record Payment</Text>
|
||||
<Text style={{ fontSize: 15, color: '#64748B', marginTop: 3 }}>Cash, GCash, Maya, or bank</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text style={{ fontSize: 22, color: '#94A3B8' }}>›</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={{ backgroundColor: '#F0FDF4', borderRadius: 20, padding: 20, borderWidth: 1.5, borderColor: '#86EFAC', flexDirection: 'row', alignItems: 'center' }}
|
||||
onPress={() => router.push('/(app)/remittances')}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ width: 56, height: 56, borderRadius: 16, backgroundColor: '#059669', alignItems: 'center', justifyContent: 'center', marginRight: 16 }}>
|
||||
<Text style={{ fontSize: 26 }}>📋</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 18, fontWeight: '800', color: '#0F172A' }}>Remittances</Text>
|
||||
<Text style={{ fontSize: 15, color: '#64748B', marginTop: 3 }}>Submit & track daily collections</Text>
|
||||
</View>
|
||||
<Text style={{ fontSize: 22, color: '#94A3B8' }}>›</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user