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

app/(app)/remittances/[id].tsx

@@ -1,10 +1,24 @@
 import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useLocalSearchParams, router } from 'expo-router';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../../../services/api';
 
-const STATUS_COLOR: Record<string, string> = { PENDING: '#D97706', CONFIRMED: '#16A34A', DISPUTED: '#DC2626' };
-const METHOD_ICON: Record<string, string> = { CASH: '💵', GCASH: '📱', MAYA: '💙', BANK: '🏦' };
+const STATUS_CONFIG: Record<string, { color: string; bg: string }> = {
+  PENDING:   { color: '#92400E', bg: '#FEF3C7' },
+  CONFIRMED: { color: '#166534', bg: '#DCFCE7' },
+  DISPUTED:  { color: '#991B1B', bg: '#FEE2E2' },
+};
+
+function InfoRow({ label, value, isLast }: { label: string; value?: string | null; isLast?: boolean }) {
+  if (!value) return null;
+  return (
+    <View style={{ paddingHorizontal: 20, paddingVertical: 16, borderBottomWidth: isLast ? 0 : 1, borderBottomColor: '#F1F5F9' }}>
+      <Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>{label}</Text>
+      <Text style={{ fontSize: 17, fontWeight: '500', color: '#0F172A' }}>{value}</Text>
+    </View>
+  );
+}
 
 export default function RemittanceDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
@@ -14,76 +28,97 @@ export default function RemittanceDetailScreen() {
     queryFn: () => api.get(`/api/v1/remittances/${id}`).then(r => r.data),
   });
 
-  if (isLoading) return (
-    <View className="flex-1 items-center justify-center bg-gray-50">
-      <ActivityIndicator color="#2563EB" />
-    </View>
-  );
+  if (isLoading) {
+    return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+        <View style={{ flex: 1, backgroundColor: '#F8FAFC', alignItems: 'center', justifyContent: 'center' }}>
+          <ActivityIndicator color="#0891B2" size="large" />
+        </View>
+      </SafeAreaView>
+    );
+  }
 
   const status = data?.status ?? 'PENDING';
-  const statusColor = STATUS_COLOR[status] ?? '#6B7280';
+  const st = STATUS_CONFIG[status] ?? { color: '#6B7280', bg: '#F1F5F9' };
+  const payments: any[] = data?.payments ?? [];
 
   return (
-    <View className="flex-1 bg-gray-50">
-      <View className="px-4 pt-14 pb-4 bg-primary flex-row items-center">
-        <TouchableOpacity onPress={() => router.back()} className="mr-3 p-1">
-          <Text className="text-white text-lg">←</Text>
-        </TouchableOpacity>
-        <View className="flex-1">
-          <Text className="text-white font-bold text-lg">Remittance</Text>
-          <Text className="text-white/70 text-xs">{data?.createdAt ? new Date(data.createdAt).toLocaleDateString() : ''}</Text>
-        </View>
-        <View className="rounded-full px-3 py-1" style={{ backgroundColor: `${statusColor}30` }}>
-          <Text className="text-xs font-bold" style={{ color: statusColor }}>{status}</Text>
-        </View>
-      </View>
-
-      <ScrollView className="flex-1 px-4 py-4">
-        {/* Summary card */}
-        <View className="bg-white rounded-2xl border border-gray-100 p-5 mb-4 items-center">
-          <Text className="text-gray-500 text-sm mb-1">Total Amount</Text>
-          <Text className="text-4xl font-bold text-gray-900">₱{Number(data?.totalAmount ?? 0).toLocaleString()}</Text>
-          {data?.notes && <Text className="text-gray-500 text-sm mt-3 text-center">{data.notes}</Text>}
-        </View>
-
-        {/* Details */}
-        <View className="bg-white rounded-2xl border border-gray-100 mb-4">
-          {[
-            { label: 'Submitted by', value: data?.collector?.firstName ? `${data.collector.firstName} ${data.collector.lastName}` : undefined },
-            { label: 'Submitted on', value: data?.createdAt ? new Date(data.createdAt).toLocaleString() : undefined },
-            { label: 'Confirmed on', value: data?.confirmedAt ? new Date(data.confirmedAt).toLocaleString() : undefined },
-            { label: 'Confirmed by', value: data?.confirmedBy?.firstName ? `${data.confirmedBy.firstName} ${data.confirmedBy.lastName}` : undefined },
-          ].filter(r => r.value).map((row, i, arr) => (
-            <View key={row.label} className={`px-4 py-3 ${i < arr.length - 1 ? 'border-b border-gray-100' : ''}`}>
-              <Text className="text-gray-500 text-xs">{row.label}</Text>
-              <Text className="text-gray-900 font-medium mt-0.5">{row.value}</Text>
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+      <View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
+        {/* Header */}
+        <View style={{ backgroundColor: '#0891B2', paddingHorizontal: 16, paddingTop: 12, paddingBottom: 20 }}>
+          <TouchableOpacity onPress={() => router.back()} style={{ marginBottom: 12 }} activeOpacity={0.7}>
+            <Text style={{ color: '#A5F3FC', fontSize: 17, fontWeight: '600' }}>← Back</Text>
+          </TouchableOpacity>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <View>
+              <Text style={{ color: '#FFF', fontSize: 22, fontWeight: '800' }}>Remittance</Text>
+              <Text style={{ color: '#A5F3FC', fontSize: 14, marginTop: 2 }}>
+                {data?.createdAt ? new Date(data.createdAt).toLocaleDateString('en-PH', { year: 'numeric', month: 'long', day: 'numeric' }) : ''}
+              </Text>
             </View>
-          ))}
+            <View style={{ borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7, backgroundColor: st.bg }}>
+              <Text style={{ fontSize: 13, fontWeight: '700', color: st.color }}>{status}</Text>
+            </View>
+          </View>
         </View>
 
-        {/* Included payments */}
-        {(data?.payments ?? []).length > 0 && (
-          <>
-            <Text className="font-semibold text-gray-700 mb-2 px-1">Included Payments ({data.payments.length})</Text>
-            {data.payments.map((p: any) => (
-              <View key={p.id} className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
-                <View className="flex-row justify-between items-start">
-                  <View>
-                    <Text className="font-medium text-gray-900">
-                      {METHOD_ICON[p.paymentMethod] ?? '💳'} {p.client?.firstName} {p.client?.lastName}
-                    </Text>
-                    <Text className="text-gray-500 text-sm">{p.client?.accountNumber} · {p.paymentMethod}</Text>
-                    {p.referenceNumber && <Text className="text-gray-400 text-xs">Ref: {p.referenceNumber}</Text>}
-                  </View>
-                  <Text className="font-bold text-green-700">₱{Number(p.amount).toLocaleString()}</Text>
-                </View>
-              </View>
-            ))}
-          </>
-        )}
+        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
+          {/* Total amount card */}
+          <View style={{ backgroundColor: '#FFF', borderRadius: 20, padding: 24, marginBottom: 16, alignItems: 'center', borderWidth: 1, borderColor: '#F1F5F9' }}>
+            <Text style={{ fontSize: 13, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>Total Amount</Text>
+            <Text style={{ fontSize: 38, fontWeight: '800', color: '#0F172A' }}>₱{Number(data?.totalAmount ?? 0).toLocaleString()}</Text>
+            {payments.length > 0 && (
+              <Text style={{ fontSize: 15, color: '#64748B', marginTop: 6 }}>{payments.length} payment{payments.length !== 1 ? 's' : ''} included</Text>
+            )}
+            {data?.notes && (
+              <Text style={{ fontSize: 15, color: '#64748B', marginTop: 8, textAlign: 'center', fontStyle: 'italic' }}>"{data.notes}"</Text>
+            )}
+          </View>
 
-        <View className="h-8" />
-      </ScrollView>
-    </View>
+          {/* Details */}
+          <View style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', marginBottom: 16, overflow: 'hidden' }}>
+            <InfoRow label="Submitted by"
+              value={data?.collector?.firstName ? `${data.collector.firstName} ${data.collector.lastName}` : undefined} />
+            <InfoRow label="Submitted on"
+              value={data?.createdAt ? new Date(data.createdAt).toLocaleString('en-PH') : undefined} />
+            <InfoRow label="Confirmed on"
+              value={data?.confirmedAt ? new Date(data.confirmedAt).toLocaleString('en-PH') : undefined} />
+            <InfoRow label="Confirmed by"
+              value={data?.confirmedBy?.firstName ? `${data.confirmedBy.firstName} ${data.confirmedBy.lastName}` : undefined}
+              isLast />
+          </View>
+
+          {/* Payments breakdown */}
+          {payments.length > 0 && (
+            <>
+              <Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>
+                Payments ({payments.length})
+              </Text>
+              {payments.map((p: any) => (
+                <View key={p.id} style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9' }}>
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A' }}>
+                        {p.client?.firstName} {p.client?.lastName}
+                      </Text>
+                      <Text style={{ fontSize: 14, color: '#64748B', marginTop: 3 }}>
+                        {p.client?.accountNumber} · {p.channel ?? p.paymentMethod}
+                      </Text>
+                      {p.referenceNumber && (
+                        <Text style={{ fontSize: 13, color: '#94A3B8', marginTop: 2 }}>Ref: {p.referenceNumber}</Text>
+                      )}
+                    </View>
+                    <Text style={{ fontSize: 18, fontWeight: '800', color: '#166534' }}>
+                      ₱{Number(p.amount).toLocaleString()}
+                    </Text>
+                  </View>
+                </View>
+              ))}
+            </>
+          )}
+        </ScrollView>
+      </View>
+    </SafeAreaView>
   );
 }