feat: complete Sprint 3 Expo mobile app scaffold + all screens

app/(app)/payments/index.tsx

@@ -1,18 +1,23 @@
 import { View, Text, TouchableOpacity } from 'react-native';
-import { useRouter } from 'expo-router';
+import { router } from 'expo-router';
 
 export default function PaymentsScreen() {
-  const router = useRouter();
   return (
-    <View className="flex-1 bg-gray-50 pt-14 px-4">
-      <Text className="text-2xl font-bold text-gray-900 mb-6">Payments</Text>
-      <TouchableOpacity
-        className="bg-primary rounded-2xl p-5 items-center"
-        onPress={() => router.push('/(app)/payments/record')}
-      >
-        <Text className="text-white text-lg font-semibold">💳 Record Payment</Text>
-        <Text className="text-blue-100 text-sm mt-1">Accept cash, GCash, or bank transfer</Text>
-      </TouchableOpacity>
+    <View className="flex-1 bg-gray-50">
+      <View className="px-4 pt-14 pb-4 bg-primary">
+        <Text className="text-white text-xl font-bold">Payments</Text>
+      </View>
+      <View className="flex-1 items-center justify-center px-8">
+        <Text className="text-6xl mb-4">💰</Text>
+        <Text className="text-xl font-bold text-gray-900 mb-2">Record a Payment</Text>
+        <Text className="text-gray-500 text-center mb-8">Collect payments from clients in the field</Text>
+        <TouchableOpacity
+          className="bg-primary rounded-xl py-4 px-8 w-full items-center"
+          onPress={() => router.push('/(app)/payments/record')}
+        >
+          <Text className="text-white font-semibold text-base">Record Payment</Text>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }

app/(app)/payments/record.tsx

@@ -1,116 +1,121 @@
 import { useState } from 'react';
 import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
-import { useRouter } from 'expo-router';
+import { router } from 'expo-router';
 import { api } from '../../../services/api';
 
-const METHODS = ['Cash', 'GCash', 'Maya', 'Bank Transfer'];
+const METHODS = ['CASH', 'GCASH', 'MAYA', 'BANK'];
 
 export default function RecordPaymentScreen() {
-  const router = useRouter();
-  const [accountNumber, setAccountNumber] = useState('');
+  const [search, setSearch] = useState('');
   const [client, setClient] = useState<any>(null);
   const [amount, setAmount] = useState('');
-  const [method, setMethod] = useState('Cash');
+  const [method, setMethod] = useState('CASH');
   const [reference, setReference] = useState('');
   const [loading, setLoading] = useState(false);
   const [searching, setSearching] = useState(false);
 
   const searchClient = async () => {
-    if (!accountNumber.trim()) return;
+    if (!search.trim()) return;
     setSearching(true);
     try {
-      const res = await api.get(`/api/v1/clients?accountNumber=${accountNumber.trim()}`);
-      const clients = res.data?.data ?? res.data?.results ?? [];
-      setClient(clients[0] ?? null);
-      if (!clients[0]) Alert.alert('Not found', 'No client with that account number.');
-    } catch { Alert.alert('Error', 'Could not search clients.'); }
-    finally { setSearching(false); }
+      const res = await api.get(`/api/v1/clients?search=${search.trim()}&limit=1`);
+      const found = res.data?.data?.[0] ?? res.data?.[0];
+      if (found) setClient(found);
+      else Alert.alert('Not Found', 'No client found with that account number or name.');
+    } catch {
+      Alert.alert('Error', 'Search failed.');
+    } finally {
+      setSearching(false);
+    }
   };
 
   const submit = async () => {
-    if (!client || !amount) return Alert.alert('Required', 'Select a client and enter amount.');
+    if (!client) return Alert.alert('Required', 'Search and select a client first.');
+    if (!amount || isNaN(Number(amount))) return Alert.alert('Required', 'Enter a valid amount.');
     setLoading(true);
     try {
       await api.post('/api/v1/payments', {
         clientId: client.id,
-        amount: parseFloat(amount),
-        paymentMethod: method.toLowerCase().replace(' ', '_'),
+        amount: Number(amount),
+        paymentMethod: method,
         referenceNumber: reference || undefined,
-        paymentDate: new Date().toISOString().split('T')[0],
+        paymentDate: new Date().toISOString(),
       });
       Alert.alert('Success', 'Payment recorded!', [{ text: 'OK', onPress: () => router.back() }]);
     } catch (e: any) {
-      Alert.alert('Failed', e?.response?.data?.message ?? 'Could not record payment.');
-    } finally { setLoading(false); }
+      Alert.alert('Error', e?.response?.data?.message ?? 'Payment failed.');
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
-    <ScrollView className="flex-1 bg-gray-50 pt-14">
-      <TouchableOpacity className="px-4 mb-4" onPress={() => router.back()}>
-        <Text className="text-primary">← Back</Text>
-      </TouchableOpacity>
-      <Text className="text-2xl font-bold text-gray-900 px-4 mb-6">Record Payment</Text>
-
-      <View className="bg-white mx-4 rounded-2xl p-5 border border-gray-100 mb-4">
-        <Text className="text-sm font-medium text-gray-700 mb-2">Account Number</Text>
-        <View className="flex-row gap-2">
+    <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">Record Payment</Text>
+      </View>
+      <ScrollView className="flex-1 px-4 py-4">
+        <Text className="font-semibold text-gray-700 mb-2">Search Client</Text>
+        <View className="flex-row mb-4">
           <TextInput
-            className="flex-1 border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
-            placeholder="e.g. 2024-0001"
-            value={accountNumber}
-            onChangeText={setAccountNumber}
+            className="flex-1 bg-white border border-gray-200 rounded-xl px-4 py-3 mr-2"
+            placeholder="Account # or name"
+            value={search}
+            onChangeText={setSearch}
           />
           <TouchableOpacity className="bg-primary rounded-xl px-4 items-center justify-center" onPress={searchClient}>
-            {searching ? <ActivityIndicator color="#fff" size="small" /> : <Text className="text-white font-medium text-sm">Find</Text>}
+            {searching ? <ActivityIndicator color="white" /> : <Text className="text-white font-semibold">Find</Text>}
           </TouchableOpacity>
         </View>
+
         {client && (
-          <View className="mt-3 bg-blue-50 rounded-xl p-3">
-            <Text className="text-primary font-semibold">{client.name}</Text>
-            <Text className="text-gray-500 text-xs">{client.accountNumber} · {client.status}</Text>
+          <View className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4">
+            <Text className="font-bold text-blue-900">{client.firstName} {client.lastName}</Text>
+            <Text className="text-blue-700 text-sm">{client.accountNumber}</Text>
           </View>
         )}
-      </View>
 
-      <View className="bg-white mx-4 rounded-2xl p-5 border border-gray-100 mb-4">
-        <Text className="text-sm font-medium text-gray-700 mb-2">Amount (₱)</Text>
+        <Text className="font-semibold text-gray-700 mb-2">Amount (₱)</Text>
         <TextInput
-          className="border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
+          className="bg-white border border-gray-200 rounded-xl px-4 py-3 mb-4 text-base"
           placeholder="0.00"
           value={amount}
           onChangeText={setAmount}
-          keyboardType="decimal-pad"
+          keyboardType="numeric"
         />
 
-        <Text className="text-sm font-medium text-gray-700 mt-4 mb-2">Payment Method</Text>
-        <View className="flex-row flex-wrap gap-2">
+        <Text className="font-semibold text-gray-700 mb-2">Payment Method</Text>
+        <View className="flex-row flex-wrap mb-4">
           {METHODS.map(m => (
             <TouchableOpacity
               key={m}
-              className={`px-4 py-2 rounded-xl border ${method === m ? 'bg-primary border-primary' : 'border-gray-200 bg-white'}`}
               onPress={() => setMethod(m)}
+              className={`rounded-xl px-4 py-2 mr-2 mb-2 border ${method === m ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
             >
-              <Text className={`text-sm font-medium ${method === m ? 'text-white' : 'text-gray-700'}`}>{m}</Text>
+              <Text className={method === m ? 'text-white font-semibold' : 'text-gray-700'}>{m}</Text>
             </TouchableOpacity>
           ))}
         </View>
 
-        <Text className="text-sm font-medium text-gray-700 mt-4 mb-2">Reference # (optional)</Text>
+        <Text className="font-semibold text-gray-700 mb-2">Reference # (optional)</Text>
         <TextInput
-          className="border border-gray-300 rounded-xl px-3 py-2.5 text-sm bg-gray-50"
-          placeholder="GCash ref / OR number"
+          className="bg-white border border-gray-200 rounded-xl px-4 py-3 mb-8"
+          placeholder="GCash ref, receipt #, etc."
           value={reference}
           onChangeText={setReference}
         />
-      </View>
 
-      <TouchableOpacity
-        className={`mx-4 rounded-2xl py-4 items-center mb-8 ${loading ? 'bg-blue-400' : 'bg-primary'}`}
-        onPress={submit}
-        disabled={loading}
-      >
-        {loading ? <ActivityIndicator color="#fff" /> : <Text className="text-white font-semibold text-base">Record Payment</Text>}
-      </TouchableOpacity>
-    </ScrollView>
+        <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 Payment</Text>}
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
   );
 }