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

app/(app)/payments/record.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator, Modal } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { SlideToConfirm } from '../../../components/SlideToConfirm';
 import { router, useLocalSearchParams } from 'expo-router';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../../../services/api';
@@ -237,19 +238,12 @@ export default function RecordPaymentScreen() {
             onChangeText={setReference}
           />
 
-          <TouchableOpacity
-            style={{ backgroundColor: canSubmit ? '#059669' : '#CBD5E1', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
-            onPress={submit}
+          <SlideToConfirm
+            label={canSubmit ? `Slide to record ₱${Number(amount || 0).toLocaleString()} payment` : 'Slide to record payment'}
+            color="#059669"
+            onConfirm={submit}
             disabled={loading || !canSubmit}
-            activeOpacity={0.8}
-          >
-            {loading
-              ? <ActivityIndicator color="#FFF" />
-              : <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>
-                  {canSubmit ? `Record ₱${Number(amount || 0).toLocaleString()} Payment` : 'Record Payment'}
-                </Text>
-            }
-          </TouchableOpacity>
+          />
         </ScrollView>
       </View>