feat: complete all screens - client tabs, payments list, remittance detail, new ticket, installations tab
- Client detail: Subscription/Invoices/Payments tabs now fully functional - Payments: proper list with today's total + live search prefill from client - Record payment: debounced live search, reference required for non-cash - Remittances: detail screen with included payments breakdown - Tickets: status filter chips + create button, new ticket with categories - Installations: tab now visible with list + confirm flow - Fix: remove duplicate @react-navigation/elements causing Metro asset error - Fix: metro.config.js asset resolution from node_modules
This commit is contained in:
Nemo
@@ -1,14 +1,31 @@
|
||||
import { View, Text, ScrollView, RefreshControl, ActivityIndicator } from 'react-native';
|
||||
import { View, Text, ScrollView, RefreshControl, ActivityIndicator, TouchableOpacity } from 'react-native';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { router } from 'expo-router';
|
||||
import { api } from '../../services/api';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
|
||||
function KpiCard({ label, value, color }: { label: string; value: string | number; color: string }) {
|
||||
const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', MEDIUM: '#D97706', LOW: '#6B7280' };
|
||||
const TICKET_STATUS_COLOR: Record<string, string> = { OPEN: '#2563EB', IN_PROGRESS: '#D97706', RESOLVED: '#16A34A', CLOSED: '#6B7280' };
|
||||
|
||||
function KpiCard({ label, value, color, onPress }: { label: string; value: string | number; color: string; onPress?: () => void }) {
|
||||
return (
|
||||
<View className="bg-white rounded-2xl p-4 flex-1 mx-1 shadow-sm border border-gray-100">
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
disabled={!onPress}
|
||||
className="bg-white rounded-2xl p-4 flex-1 mx-1 shadow-sm border border-gray-100"
|
||||
>
|
||||
<Text className="text-gray-500 text-xs mb-1">{label}</Text>
|
||||
<Text className={`text-2xl font-bold`} style={{ color }}>{value}</Text>
|
||||
</View>
|
||||
<Text className="text-2xl font-bold" style={{ color }}>{value}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
function QuickAction({ icon, label, onPress }: { icon: string; label: string; onPress: () => void }) {
|
||||
return (
|
||||
<TouchableOpacity className="flex-1 items-center bg-white rounded-2xl py-4 mx-1 border border-gray-100" onPress={onPress}>
|
||||
<Text className="text-2xl mb-1">{icon}</Text>
|
||||
<Text className="text-xs text-gray-600 font-medium">{label}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -19,14 +36,23 @@ export default function DashboardScreen() {
|
||||
queryFn: () => api.get('/api/v1/dashboard/summary').then(r => r.data),
|
||||
});
|
||||
|
||||
const greeting = () => {
|
||||
const h = new Date().getHours();
|
||||
if (h < 12) return 'Good morning';
|
||||
if (h < 17) return 'Good afternoon';
|
||||
return 'Good evening';
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
className="flex-1 bg-gray-50"
|
||||
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
|
||||
>
|
||||
<View className="px-4 pt-14 pb-4 bg-primary">
|
||||
<Text className="text-white text-sm opacity-80">Welcome back,</Text>
|
||||
<Text className="text-white text-xl font-bold">{user?.firstName ?? 'Field Staff'}</Text>
|
||||
{/* Header */}
|
||||
<View className="px-4 pt-14 pb-6 bg-primary">
|
||||
<Text className="text-white/70 text-sm">{greeting()},</Text>
|
||||
<Text className="text-white text-2xl font-bold">{user?.firstName ?? 'Field Staff'} 👋</Text>
|
||||
<Text className="text-white/50 text-xs mt-1">{new Date().toLocaleDateString('en-PH', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</Text>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
@@ -35,27 +61,77 @@ export default function DashboardScreen() {
|
||||
</View>
|
||||
) : (
|
||||
<View className="px-3 py-4">
|
||||
{/* KPIs */}
|
||||
<Text className="text-gray-700 font-semibold mb-3 px-1">Overview</Text>
|
||||
<View className="flex-row mb-3">
|
||||
<KpiCard label="Total Clients" value={data?.totalClients ?? 0} color="#2563EB" />
|
||||
<KpiCard label="Active Subs" value={data?.activeSubscriptions ?? 0} color="#16A34A" />
|
||||
<View className="flex-row mb-2">
|
||||
<KpiCard
|
||||
label="Total Clients"
|
||||
value={data?.totalClients ?? 0}
|
||||
color="#2563EB"
|
||||
onPress={() => router.push('/(app)/clients')}
|
||||
/>
|
||||
<KpiCard
|
||||
label="Active Subs"
|
||||
value={data?.activeSubscriptions ?? 0}
|
||||
color="#16A34A"
|
||||
/>
|
||||
</View>
|
||||
<View className="flex-row mb-6">
|
||||
<KpiCard label="Overdue" value={data?.overdueInvoices ?? 0} color="#DC2626" />
|
||||
<KpiCard label="Today Collections" value={`₱${(data?.todayCollections ?? 0).toLocaleString()}`} color="#D97706" />
|
||||
<View className="flex-row mb-5">
|
||||
<KpiCard
|
||||
label="Overdue"
|
||||
value={data?.overdueInvoices ?? 0}
|
||||
color="#DC2626"
|
||||
onPress={() => router.push('/(app)/clients')}
|
||||
/>
|
||||
<KpiCard
|
||||
label="Today's Collections"
|
||||
value={`₱${(data?.todayCollections ?? 0).toLocaleString()}`}
|
||||
color="#D97706"
|
||||
onPress={() => router.push('/(app)/payments')}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Text className="text-gray-700 font-semibold mb-3 px-1">Quick Actions</Text>
|
||||
<View className="flex-row mb-5">
|
||||
<QuickAction icon="💰" label="Collect" onPress={() => router.push('/(app)/payments/record')} />
|
||||
<QuickAction icon="🎫" label="New Ticket" onPress={() => router.push('/(app)/tickets/create')} />
|
||||
<QuickAction icon="🔌" label="Install" onPress={() => router.push('/(app)/installations')} />
|
||||
<QuickAction icon="📋" label="Remit" onPress={() => router.push('/(app)/remittances/submit')} />
|
||||
</View>
|
||||
|
||||
{/* Recent Tickets */}
|
||||
<Text className="text-gray-700 font-semibold mb-3 px-1">Recent Tickets</Text>
|
||||
{(data?.recentTickets ?? []).length === 0 ? (
|
||||
<View className="bg-white rounded-2xl p-6 items-center border border-gray-100">
|
||||
<Text className="text-gray-400">No recent tickets</Text>
|
||||
<Text className="text-gray-400 mb-3">No recent tickets</Text>
|
||||
<TouchableOpacity
|
||||
className="bg-primary rounded-xl px-5 py-2"
|
||||
onPress={() => router.push('/(app)/tickets/create')}
|
||||
>
|
||||
<Text className="text-white text-sm font-semibold">Create Ticket</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : (
|
||||
(data?.recentTickets ?? []).map((t: any) => (
|
||||
<View key={t.id} className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
|
||||
<Text className="font-medium text-gray-900">{t.subject}</Text>
|
||||
<Text className="text-gray-500 text-sm mt-1">{t.clientName} · {t.status}</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
key={t.id}
|
||||
className="bg-white rounded-xl p-4 mb-2 border border-gray-100"
|
||||
onPress={() => router.push(`/(app)/tickets/${t.id}`)}
|
||||
>
|
||||
<View className="flex-row justify-between items-start mb-1">
|
||||
<Text className="font-medium text-gray-900 flex-1 mr-2" numberOfLines={1}>{t.subject}</Text>
|
||||
<View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${PRIORITY_COLOR[t.priority] ?? '#6B7280'}20` }}>
|
||||
<Text className="text-xs font-medium" style={{ color: PRIORITY_COLOR[t.priority] ?? '#6B7280' }}>{t.priority}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="flex-row justify-between items-center mt-0.5">
|
||||
<Text className="text-gray-500 text-sm">{t.clientName ?? 'No client'}</Text>
|
||||
<View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${TICKET_STATUS_COLOR[t.status] ?? '#6B7280'}20` }}>
|
||||
<Text className="text-xs" style={{ color: TICKET_STATUS_COLOR[t.status] ?? '#6B7280' }}>{t.status}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user