feat: slide-to-confirm on all payment screens; pay button on dashboard invoice rows

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, Linking, Alert, TextInput, Modal, KeyboardAvoidingView, Platform } from 'react-native';
+import { SlideToConfirm } from '../../../components/SlideToConfirm';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useLocalSearchParams, router } from 'expo-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
@@ -106,14 +107,12 @@ function PayInvoiceModal({ invoice, onClose, onSuccess }: { invoice: any; onClos
             onChangeText={setRef}
           />
 
-          <TouchableOpacity
-            style={{ backgroundColor: amount && Number(amount) > 0 ? '#059669' : '#CBD5E1', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
-            onPress={submit}
-            disabled={loading}
-            activeOpacity={0.8}
-          >
-            {loading ? <ActivityIndicator color="#FFF" /> : <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>Confirm Payment</Text>}
-          </TouchableOpacity>
+          <SlideToConfirm
+            label={`Slide to record ₱${parseFloat(amount || '0').toLocaleString()} payment`}
+            color="#059669"
+            onConfirm={submit}
+            disabled={loading || !amount || Number(amount) <= 0}
+          />
         </TouchableOpacity>
       </TouchableOpacity>
       </KeyboardAvoidingView>