feat: complete all screens - client tabs, payments list, remittance detail, new ticket, installations tab

- Client detail: Subscription/Invoices/Payments tabs now fully functional
- Payments: proper list with today's total + live search prefill from client
- Record payment: debounced live search, reference required for non-cash
- Remittances: detail screen with included payments breakdown
- Tickets: status filter chips + create button, new ticket with categories
- Installations: tab now visible with list + confirm flow
- Fix: remove duplicate @react-navigation/elements causing Metro asset error
- Fix: metro.config.js asset resolution from node_modules

app/(app)/payments/index.tsx

@@ -1,23 +1,87 @@
-import { View, Text, TouchableOpacity } from 'react-native';
+import { useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl } from 'react-native';
+import { useQuery } from '@tanstack/react-query';
 import { router } from 'expo-router';
+import { api } from '../../../services/api';
+
+const METHOD_ICON: Record<string, string> = { CASH: '💵', GCASH: '📱', MAYA: '💙', BANK: '🏦' };
 
 export default function PaymentsScreen() {
+  const { data, isLoading, refetch, isRefetching } = useQuery({
+    queryKey: ['payments'],
+    queryFn: () => api.get('/api/v1/payments?limit=50').then(r => r.data?.data ?? r.data ?? []),
+  });
+
+  const payments: any[] = data ?? [];
+
+  // Calculate today's total
+  const today = new Date().toDateString();
+  const todayTotal = payments
+    .filter((p: any) => new Date(p.paymentDate ?? p.createdAt).toDateString() === today)
+    .reduce((sum: number, p: any) => sum + Number(p.amount), 0);
+
   return (
     <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>
+      {/* Header */}
+      <View className="px-4 pt-14 pb-4 bg-primary flex-row justify-between items-center">
+        <View>
+          <Text className="text-white text-xl font-bold">Payments</Text>
+          <Text className="text-white/70 text-xs mt-0.5">Today: ₱{todayTotal.toLocaleString()}</Text>
+        </View>
         <TouchableOpacity
-          className="bg-primary rounded-xl py-4 px-8 w-full items-center"
+          className="bg-white/20 rounded-xl px-4 py-2"
           onPress={() => router.push('/(app)/payments/record')}
         >
-          <Text className="text-white font-semibold text-base">Record Payment</Text>
+          <Text className="text-white font-semibold text-sm">+ Record</Text>
         </TouchableOpacity>
       </View>
+
+      {isLoading ? (
+        <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>
+      ) : (
+        <FlatList
+          data={payments}
+          keyExtractor={(item) => item.id}
+          refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
+          contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
+          ListEmptyComponent={
+            <View className="items-center py-20">
+              <Text className="text-4xl mb-3">💳</Text>
+              <Text className="text-gray-400 text-base">No payments yet</Text>
+              <TouchableOpacity
+                className="mt-4 bg-primary rounded-xl px-6 py-3"
+                onPress={() => router.push('/(app)/payments/record')}
+              >
+                <Text className="text-white font-semibold">Record First Payment</Text>
+              </TouchableOpacity>
+            </View>
+          }
+          renderItem={({ item }) => (
+            <View className="bg-white rounded-xl p-4 mb-2 border border-gray-100">
+              <View className="flex-row justify-between items-start">
+                <View className="flex-1">
+                  <View className="flex-row items-center mb-1">
+                    <Text className="text-base mr-2">{METHOD_ICON[item.paymentMethod] ?? '💳'}</Text>
+                    <Text className="font-semibold text-gray-900">
+                      {item.client?.firstName} {item.client?.lastName}
+                    </Text>
+                  </View>
+                  <Text className="text-gray-500 text-sm">{item.client?.accountNumber}</Text>
+                  <Text className="text-gray-400 text-xs mt-1">
+                    {new Date(item.paymentDate ?? item.createdAt).toLocaleDateString()} · {item.paymentMethod}
+                  </Text>
+                  {item.referenceNumber && (
+                    <Text className="text-gray-400 text-xs">Ref: {item.referenceNumber}</Text>
+                  )}
+                </View>
+                <Text className="font-bold text-green-700 text-lg">
+                  ₱{Number(item.amount).toLocaleString()}
+                </Text>
+              </View>
+            </View>
+          )}
+        />
+      )}
     </View>
   );
 }