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