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>
   );
 }

app/(app)/remittances/_layout.tsx

@@ -0,0 +1,4 @@
+import { Stack } from 'expo-router';
+export default function RemittancesLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}

app/(app)/remittances/index.tsx

@@ -1,49 +1,120 @@
 import { View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
-import { useQuery } from '@tanstack/react-query';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useQueries } from '@tanstack/react-query';
 import { router } from 'expo-router';
 import { api } from '../../../services/api';
 
-const STATUS_COLOR: Record<string, string> = { PENDING: '#D97706', CONFIRMED: '#16A34A', DISPUTED: '#DC2626' };
+const STATUS_CONFIG: Record<string, { color: string; bg: string }> = {
+  PENDING:   { color: '#92400E', bg: '#FEF3C7' },
+  CONFIRMED: { color: '#166534', bg: '#DCFCE7' },
+  DISPUTED:  { color: '#991B1B', bg: '#FEE2E2' },
+};
 
 export default function RemittancesScreen() {
-  const { data, isLoading, refetch, isRefetching } = useQuery({
-    queryKey: ['remittances'],
-    queryFn: () => api.get('/api/v1/remittances?limit=50').then(r => r.data?.data ?? r.data),
+  const [remittancesQ, unremittedQ] = useQueries({
+    queries: [
+      { queryKey: ['remittances'], queryFn: () => api.get('/api/v1/remittances?limit=50').then(r => r.data?.data ?? r.data) },
+      { queryKey: ['unremitted'], queryFn: () => api.get('/api/v1/payments?unremitted=true').then(r => r.data).catch(() => null) },
+    ],
   });
 
+  const data = remittancesQ.data ?? [];
+  const isLoading = remittancesQ.isLoading;
+  const isRefetching = remittancesQ.isRefetching || unremittedQ.isRefetching;
+  const refetchAll = () => { remittancesQ.refetch(); unremittedQ.refetch(); };
+
+  // Compute unremitted total from raw payments or summary
+  const unremittedPayments: any[] = Array.isArray(unremittedQ.data?.data)
+    ? unremittedQ.data.data
+    : Array.isArray(unremittedQ.data)
+    ? unremittedQ.data
+    : [];
+  const unremittedTotal = unremittedQ.data?.totalUnremitted
+    ?? unremittedPayments.reduce((s: number, p: any) => s + Number(p.amount ?? 0), 0);
+  const unremittedCount = unremittedQ.data?.count ?? unremittedPayments.length;
+
   return (
-    <View className="flex-1 bg-gray-50">
-      <View className="px-4 pt-14 pb-4 bg-primary flex-row justify-between items-center">
-        <Text className="text-white text-xl font-bold">Remittances</Text>
-        <TouchableOpacity className="bg-white/20 rounded-lg px-3 py-1.5" onPress={() => router.push('/(app)/remittances/submit')}>
-          <Text className="text-white text-sm font-semibold">+ Submit</Text>
-        </TouchableOpacity>
-      </View>
-      {isLoading ? (
-        <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>
-      ) : (
-        <FlatList
-          data={data ?? []}
-          keyExtractor={(item) => item.id}
-          refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
-          contentContainerStyle={{ padding: 16 }}
-          renderItem={({ item }) => (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+      <View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
+        {/* Header */}
+        <View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, 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-end' }}>
+            <View>
+              <Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Remittances</Text>
+              <Text style={{ color: '#A5F3FC', fontSize: 14, marginTop: 2 }}>{data.length} submissions</Text>
+            </View>
             <TouchableOpacity
-              className="bg-white rounded-xl p-4 mb-2 border border-gray-100"
-              onPress={() => router.push(`/(app)/remittances/${item.id}`)}
+              style={{ backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 12, paddingHorizontal: 16, paddingVertical: 10 }}
+              onPress={() => router.push('/(app)/remittances/submit')}
+              activeOpacity={0.7}
             >
-              <View className="flex-row justify-between">
-                <Text className="font-semibold text-gray-900">₱{Number(item.totalAmount).toLocaleString()}</Text>
-                <View className="rounded-full px-2 py-0.5" style={{ backgroundColor: `${STATUS_COLOR[item.status] ?? '#6B7280'}20` }}>
-                  <Text className="text-xs font-medium" style={{ color: STATUS_COLOR[item.status] ?? '#6B7280' }}>{item.status}</Text>
-                </View>
-              </View>
-              <Text className="text-gray-500 text-sm mt-1">{new Date(item.createdAt).toLocaleDateString()}</Text>
+              <Text style={{ color: '#FFF', fontWeight: '700', fontSize: 15 }}>+ Submit</Text>
             </TouchableOpacity>
-          )}
-          ListEmptyComponent={<View className="items-center py-16"><Text className="text-gray-400">No remittances yet</Text></View>}
-        />
-      )}
-    </View>
+          </View>
+        </View>
+
+        {isLoading ? (
+          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <ActivityIndicator color="#0891B2" size="large" />
+          </View>
+        ) : (
+          <FlatList
+            data={data}
+            keyExtractor={(item) => item.id}
+            refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetchAll} tintColor="#0891B2" />}
+            ListHeaderComponent={
+              unremittedTotal > 0 ? (
+                <TouchableOpacity
+                  onPress={() => router.push('/(app)/remittances/submit')}
+                  style={{ backgroundColor: '#FFF7ED', borderRadius: 16, padding: 18, marginBottom: 16, borderWidth: 1.5, borderColor: '#FED7AA' }}
+                  activeOpacity={0.7}
+                >
+                  <Text style={{ fontSize: 13, fontWeight: '700', color: '#92400E', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 4 }}>
+                    Unremitted Amount
+                  </Text>
+                  <Text style={{ fontSize: 28, fontWeight: '800', color: '#9A3412' }}>
+                    ₱{Number(unremittedTotal).toLocaleString()}
+                  </Text>
+                  {unremittedCount > 0 && (
+                    <Text style={{ fontSize: 14, color: '#C2410C', marginTop: 4 }}>{unremittedCount} payment{unremittedCount !== 1 ? 's' : ''} pending remittance</Text>
+                  )}
+                  <Text style={{ fontSize: 14, color: '#EA580C', marginTop: 8, fontWeight: '600' }}>Tap to submit →</Text>
+                </TouchableOpacity>
+              ) : null
+            }
+            contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
+            renderItem={({ item }) => {
+              const st = STATUS_CONFIG[item.status] ?? { color: '#6B7280', bg: '#F1F5F9' };
+              return (
+                <TouchableOpacity
+                  style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 12, borderWidth: 1, borderColor: '#F1F5F9' }}
+                  onPress={() => router.push(`/(app)/remittances/${item.id}`)}
+                  activeOpacity={0.7}
+                >
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+                    <Text style={{ fontSize: 20, fontWeight: '800', color: '#0F172A' }}>₱{Number(item.totalAmount).toLocaleString()}</Text>
+                    <View style={{ borderRadius: 20, paddingHorizontal: 12, paddingVertical: 5, backgroundColor: st.bg }}>
+                      <Text style={{ fontSize: 13, fontWeight: '700', color: st.color }}>{item.status}</Text>
+                    </View>
+                  </View>
+                  <Text style={{ fontSize: 15, color: '#64748B' }}>{new Date(item.createdAt).toLocaleDateString('en-PH', { year: 'numeric', month: 'long', day: 'numeric' })}</Text>
+                  {item.payments?.length > 0 && (
+                    <Text style={{ fontSize: 14, color: '#94A3B8', marginTop: 3 }}>{item.payments.length} payment{item.payments.length !== 1 ? 's' : ''}</Text>
+                  )}
+                </TouchableOpacity>
+              );
+            }}
+            ListEmptyComponent={
+              <View style={{ alignItems: 'center', paddingVertical: 60 }}>
+                <Text style={{ fontSize: 17, color: '#94A3B8' }}>No remittances yet</Text>
+              </View>
+            }
+          />
+        )}
+      </View>
+    </SafeAreaView>
   );
 }

app/(app)/remittances/submit.tsx

@@ -1,57 +1,112 @@
 import { useState } from 'react';
 import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
+import { useQuery } from '@tanstack/react-query';
 import { api } from '../../../services/api';
 
 export default function SubmitRemittanceScreen() {
-  const [amount, setAmount] = useState('');
   const [notes, setNotes] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Fetch unremitted payments to auto-fill amount
+  const { data: unremittedData, isLoading: loadingUnremitted } = useQuery({
+    queryKey: ['unremitted'],
+    queryFn: () => api.get('/api/v1/payments?unremitted=true').then(r => r.data).catch(() => null),
+  });
+
+  const unremittedPayments: any[] = Array.isArray(unremittedData?.data)
+    ? unremittedData.data
+    : Array.isArray(unremittedData)
+    ? unremittedData
+    : [];
+  const totalAmount = unremittedData?.totalUnremitted
+    ?? unremittedPayments.reduce((s: number, p: any) => s + Number(p.amount ?? 0), 0);
+
   const submit = async () => {
-    if (!amount || isNaN(Number(amount))) return Alert.alert('Required', 'Enter a valid amount.');
+    if (totalAmount <= 0) return Alert.alert('Nothing to Submit', 'You have no unremitted payments to submit.');
     setLoading(true);
     try {
-      await api.post('/api/v1/remittances', { totalAmount: Number(amount), notes });
-      Alert.alert('Submitted', 'Remittance submitted successfully.', [{ text: 'OK', onPress: () => router.back() }]);
+      await api.post('/api/v1/remittances', { totalAmount: Number(totalAmount), notes: notes.trim() || undefined });
+      Alert.alert('Submitted!', `₱${Number(totalAmount).toLocaleString()} remittance submitted.`, [
+        { text: 'OK', onPress: () => router.back() },
+      ]);
     } catch (e: any) {
-      Alert.alert('Error', e?.response?.data?.message ?? 'Submission failed.');
+      Alert.alert('Error', e?.response?.data?.message ?? 'Submission failed. Please try again.');
     } finally {
       setLoading(false);
     }
   };
 
   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">
-          <Text className="text-white text-lg">←</Text>
-        </TouchableOpacity>
-        <Text className="text-white text-xl font-bold">Submit Remittance</Text>
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+      <View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
+        <View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, 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>
+          <Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Submit Remittance</Text>
+          <Text style={{ color: '#A5F3FC', fontSize: 14, marginTop: 2 }}>End-of-day collection</Text>
+        </View>
+
+        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }} keyboardShouldPersistTaps="handled">
+          {/* Total amount summary card */}
+          <View style={{ backgroundColor: '#FFF', borderRadius: 20, padding: 20, marginBottom: 20, alignItems: 'center', borderWidth: 1, borderColor: '#F1F5F9' }}>
+            <Text style={{ fontSize: 14, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 8 }}>Total to Remit</Text>
+            {loadingUnremitted ? (
+              <ActivityIndicator color="#0891B2" size="large" />
+            ) : (
+              <>
+                <Text style={{ fontSize: 36, fontWeight: '800', color: totalAmount > 0 ? '#059669' : '#94A3B8' }}>
+                  ₱{Number(totalAmount).toLocaleString()}
+                </Text>
+                {unremittedPayments.length > 0 && (
+                  <Text style={{ fontSize: 14, color: '#64748B', marginTop: 6 }}>
+                    From {unremittedPayments.length} collection{unremittedPayments.length !== 1 ? 's' : ''}
+                  </Text>
+                )}
+              </>
+            )}
+          </View>
+
+          {/* Breakdown of payments */}
+          {unremittedPayments.length > 0 && (
+            <View style={{ marginBottom: 20 }}>
+              <Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 10 }}>Breakdown</Text>
+              {unremittedPayments.map((p: any) => (
+                <View key={p.id} style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 16, marginBottom: 8, flexDirection: 'row', justifyContent: 'space-between', borderWidth: 1, borderColor: '#F1F5F9' }}>
+                  <View>
+                    <Text style={{ fontSize: 16, fontWeight: '600', color: '#0F172A' }}>{p.client?.firstName} {p.client?.lastName}</Text>
+                    <Text style={{ fontSize: 14, color: '#64748B', marginTop: 2 }}>{p.paymentMethod} · {p.client?.accountNumber}</Text>
+                  </View>
+                  <Text style={{ fontSize: 17, fontWeight: '800', color: '#166534' }}>₱{Number(p.amount).toLocaleString()}</Text>
+                </View>
+              ))}
+            </View>
+          )}
+
+          {/* Notes */}
+          <Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>Notes <Text style={{ fontWeight: '400', color: '#94A3B8' }}>(optional)</Text></Text>
+          <TextInput
+            style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 18, paddingVertical: 14, fontSize: 16, color: '#0F172A', marginBottom: 24, minHeight: 80, textAlignVertical: 'top' }}
+            placeholder="Any remarks or notes for admin..."
+            placeholderTextColor="#94A3B8"
+            value={notes}
+            onChangeText={setNotes}
+            multiline
+          />
+
+          <TouchableOpacity
+            style={{ backgroundColor: totalAmount > 0 ? '#059669' : '#CBD5E1', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
+            onPress={submit}
+            disabled={loading || loadingUnremitted || totalAmount <= 0}
+            activeOpacity={0.8}
+          >
+            {loading ? <ActivityIndicator color="#FFF" /> : <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>Submit ₱{Number(totalAmount).toLocaleString()}</Text>}
+          </TouchableOpacity>
+          <View style={{ height: 32 }} />
+        </ScrollView>
       </View>
-      <ScrollView className="flex-1 px-4 py-6">
-        <Text className="font-semibold text-gray-700 mb-2">Total Collection (₱)</Text>
-        <TextInput
-          className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base mb-4"
-          placeholder="0.00"
-          value={amount}
-          onChangeText={setAmount}
-          keyboardType="numeric"
-          autoFocus
-        />
-        <Text className="font-semibold text-gray-700 mb-2">Notes (optional)</Text>
-        <TextInput
-          className="bg-white border border-gray-200 rounded-xl px-4 py-3 text-base mb-8"
-          placeholder="Any remarks..."
-          value={notes}
-          onChangeText={setNotes}
-          multiline
-          numberOfLines={3}
-        />
-        <TouchableOpacity className="bg-primary rounded-xl py-4 items-center" onPress={submit} disabled={loading}>
-          {loading ? <ActivityIndicator color="white" /> : <Text className="text-white font-bold text-base">Submit Remittance</Text>}
-        </TouchableOpacity>
-      </ScrollView>
-    </View>
+    </SafeAreaView>
   );
 }