4644a3194d
- 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
195 lines
10 KiB
TypeScript
195 lines
10 KiB
TypeScript
import { View, Text, ScrollView, RefreshControl, ActivityIndicator, TouchableOpacity } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useQueries } from '@tanstack/react-query';
|
|
import { router } from 'expo-router';
|
|
import { api } from '../../services/api';
|
|
import { useAuthStore } from '../../stores/authStore';
|
|
|
|
// ─── Constants ────────────────────────────────────────────────────────────────
|
|
const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', NORMAL: '#0891B2' };
|
|
const PRIORITY_BG: Record<string, string> = { HIGH: '#FEE2E2', NORMAL: '#ECFEFF' };
|
|
const STATUS_COLOR: Record<string, string> = { OPEN: '#0891B2', IN_PROGRESS: '#D97706', RESOLVED: '#16A34A', CLOSED: '#6B7280' };
|
|
const TYPE_COLOR: Record<string, string> = { INSTALLATION: '#0891B2', SUPPORT: '#7C3AED', BILLING: '#D97706' };
|
|
|
|
// ─── KPI Card ────────────────────────────────────────────────────────────────
|
|
function KpiCard({ label, value, color, bg }: { label: string; value: string | number; color: string; bg: string }) {
|
|
return (
|
|
<View style={{ flex: 1, marginHorizontal: 5, borderRadius: 16, padding: 16, backgroundColor: bg }}>
|
|
<Text style={{ fontSize: 11, fontWeight: '700', color, marginBottom: 6, textTransform: 'uppercase', letterSpacing: 0.5 }}>{label}</Text>
|
|
<Text style={{ fontSize: 26, fontWeight: '800', color }}>{value}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// ─── Ticket Row ───────────────────────────────────────────────────────────────
|
|
function TaskRow({ task, onPress }: { task: any; onPress: () => void }) {
|
|
const typeColor = TYPE_COLOR[task.type] ?? '#6B7280';
|
|
const isHigh = task.priority === 'HIGH';
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
activeOpacity={0.7}
|
|
style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 16, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9', borderLeftWidth: 4, borderLeftColor: typeColor }}
|
|
>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
|
|
<View style={{ flexDirection: 'row', gap: 6, alignItems: 'center' }}>
|
|
<View style={{ borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: `${typeColor}15` }}>
|
|
<Text style={{ fontSize: 11, fontWeight: '700', color: typeColor }}>{task.type}</Text>
|
|
</View>
|
|
{isHigh && (
|
|
<View style={{ borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: PRIORITY_BG.HIGH }}>
|
|
<Text style={{ fontSize: 11, fontWeight: '700', color: PRIORITY_COLOR.HIGH }}>HIGH</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text style={{ fontSize: 12, fontWeight: '600', color: STATUS_COLOR[task.status] ?? '#6B7280' }}>
|
|
{task.status?.replace('_', ' ')}
|
|
</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A' }} numberOfLines={1}>{task.subject}</Text>
|
|
<Text style={{ fontSize: 13, color: '#64748B', marginTop: 3 }}>
|
|
{task.client?.firstName} {task.client?.lastName}
|
|
{task.assignedTo
|
|
? ` · ${task.assignedTo.firstName} ${task.assignedTo.lastName}`
|
|
: ' · Unassigned'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
// ─── Main Screen ──────────────────────────────────────────────────────────────
|
|
export default function DashboardScreen() {
|
|
const { user } = useAuthStore();
|
|
const hour = new Date().getHours();
|
|
const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
|
|
|
|
const [summaryQ, tasksQ] = useQueries({
|
|
queries: [
|
|
{
|
|
queryKey: ['dashboard'],
|
|
queryFn: () => api.get('/api/v1/dashboard/summary').then(r => r.data),
|
|
},
|
|
{
|
|
queryKey: ['dashboard-tasks'],
|
|
queryFn: () =>
|
|
api.get('/api/v1/tickets?status=OPEN&status=IN_PROGRESS&limit=20')
|
|
.then(r => r.data?.data ?? r.data ?? []),
|
|
},
|
|
],
|
|
});
|
|
|
|
const isLoading = summaryQ.isLoading || tasksQ.isLoading;
|
|
const isRefetching = summaryQ.isRefetching || tasksQ.isRefetching;
|
|
const summary = summaryQ.data;
|
|
|
|
// Real dashboard API shape:
|
|
// { subscribers: { total, active, pending, suspended },
|
|
// billing: { unpaidInvoices, overdueInvoices },
|
|
// support: { openTickets, inProgressTickets },
|
|
// tasks: { pending },
|
|
// revenue: { thisMonth, lastMonth, growth } }
|
|
const totalClients = summary?.subscribers?.total ?? '—';
|
|
const activeSubscribers = summary?.subscribers?.active ?? '—';
|
|
const unpaidInvoices = summary?.billing?.unpaidInvoices ?? '—';
|
|
const openTickets = summary?.support?.openTickets ?? '—';
|
|
const thisMonthRevenue = summary?.revenue?.thisMonth ?? null;
|
|
|
|
const allTasks: any[] = tasksQ.data ?? [];
|
|
const unassigned = allTasks.filter((t: any) => !t.assignedToId);
|
|
const assigned = allTasks.filter((t: any) => !!t.assignedToId);
|
|
const prioOrder: Record<string, number> = { HIGH: 0, NORMAL: 1 };
|
|
const byPrio = (a: any, b: any) => (prioOrder[a.priority] ?? 2) - (prioOrder[b.priority] ?? 2);
|
|
|
|
const refetchAll = () => { summaryQ.refetch(); tasksQ.refetch(); };
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
|
<ScrollView
|
|
style={{ flex: 1, backgroundColor: '#F8FAFC' }}
|
|
refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetchAll} tintColor="#0891B2" />}
|
|
>
|
|
{/* Header */}
|
|
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 }}>
|
|
<Text style={{ color: '#A5F3FC', fontSize: 15, fontWeight: '500' }}>{greeting},</Text>
|
|
<Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800', marginTop: 2 }}>{user?.firstName ?? 'Field Staff'}</Text>
|
|
</View>
|
|
|
|
{isLoading ? (
|
|
<View style={{ paddingVertical: 80, alignItems: 'center' }}>
|
|
<ActivityIndicator color="#0891B2" size="large" />
|
|
</View>
|
|
) : (
|
|
<View style={{ padding: 16 }}>
|
|
{/* KPI Row 1 */}
|
|
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
|
|
<KpiCard label="Subscribers" value={totalClients} color="#0E7490" bg="#ECFEFF" />
|
|
<KpiCard label="Active" value={activeSubscribers} color="#166534" bg="#F0FDF4" />
|
|
</View>
|
|
|
|
{/* KPI Row 2 */}
|
|
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
|
|
<KpiCard label="Unpaid Invoices" value={unpaidInvoices} color="#991B1B" bg="#FEF2F2" />
|
|
<KpiCard label="Open Tasks" value={openTickets} color="#92400E" bg="#FFFBEB" />
|
|
</View>
|
|
|
|
{/* Revenue card */}
|
|
{thisMonthRevenue !== null && (
|
|
<View style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 16, borderWidth: 1, borderColor: '#F1F5F9', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<View>
|
|
<Text style={{ fontSize: 12, fontWeight: '700', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>This Month's Revenue</Text>
|
|
<Text style={{ fontSize: 24, fontWeight: '800', color: '#166534' }}>₱{Number(thisMonthRevenue).toLocaleString()}</Text>
|
|
</View>
|
|
{summary?.revenue?.growth !== undefined && (
|
|
<View style={{ backgroundColor: '#F0FDF4', borderRadius: 12, paddingHorizontal: 12, paddingVertical: 6 }}>
|
|
<Text style={{ fontSize: 15, fontWeight: '800', color: '#16A34A' }}>+{summary.revenue.growth}%</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
{/* Unassigned Tasks */}
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Text style={{ fontSize: 17, fontWeight: '800', color: '#0F172A' }}>Unassigned</Text>
|
|
{unassigned.length > 0 && (
|
|
<View style={{ backgroundColor: '#FEE2E2', borderRadius: 20, paddingHorizontal: 8, paddingVertical: 2, marginLeft: 8 }}>
|
|
<Text style={{ fontSize: 12, fontWeight: '700', color: '#DC2626' }}>{unassigned.length}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<TouchableOpacity onPress={() => router.push('/(app)/tasks')} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Text style={{ fontSize: 14, fontWeight: '600', color: '#0891B2' }}>View all</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{unassigned.length === 0 ? (
|
|
<View style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 20, alignItems: 'center', marginBottom: 20, borderWidth: 1, borderColor: '#F1F5F9' }}>
|
|
<Text style={{ fontSize: 15, color: '#94A3B8' }}>No unassigned tasks</Text>
|
|
</View>
|
|
) : (
|
|
<View style={{ marginBottom: 20 }}>
|
|
{[...unassigned].sort(byPrio).slice(0, 5).map((t: any) => (
|
|
<TaskRow key={t.id} task={t} onPress={() => router.push(`/(app)/tasks/${t.id}`)} />
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
{/* Assigned Tasks */}
|
|
{assigned.length > 0 && (
|
|
<>
|
|
<Text style={{ fontSize: 17, fontWeight: '800', color: '#0F172A', marginBottom: 10 }}>Assigned Tasks</Text>
|
|
{[...assigned].sort(byPrio).slice(0, 5).map((t: any) => (
|
|
<TaskRow key={t.id} task={t} onPress={() => router.push(`/(app)/tasks/${t.id}`)} />
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
<View style={{ height: 24 }} />
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|