4644a3194d
- 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
49 lines
2.6 KiB
TypeScript
49 lines
2.6 KiB
TypeScript
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import { router } from 'expo-router';
|
||
|
||
export default function CollectScreen() {
|
||
return (
|
||
<SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
|
||
<View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
|
||
<View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 }}>
|
||
<Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Collect</Text>
|
||
<Text style={{ color: '#A5F3FC', fontSize: 15, marginTop: 2 }}>Payments & remittances</Text>
|
||
</View>
|
||
|
||
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
|
||
<TouchableOpacity
|
||
style={{ backgroundColor: '#ECFEFF', borderRadius: 20, padding: 20, marginBottom: 14, borderWidth: 1.5, borderColor: '#67E8F9', flexDirection: 'row', alignItems: 'center' }}
|
||
onPress={() => router.push('/(app)/payments/record')}
|
||
activeOpacity={0.7}
|
||
>
|
||
<View style={{ width: 56, height: 56, borderRadius: 16, backgroundColor: '#0891B2', alignItems: 'center', justifyContent: 'center', marginRight: 16 }}>
|
||
<Text style={{ fontSize: 26 }}>💳</Text>
|
||
</View>
|
||
<View style={{ flex: 1 }}>
|
||
<Text style={{ fontSize: 18, fontWeight: '800', color: '#0F172A' }}>Record Payment</Text>
|
||
<Text style={{ fontSize: 15, color: '#64748B', marginTop: 3 }}>Cash, GCash, Maya, or bank</Text>
|
||
</View>
|
||
<Text style={{ fontSize: 22, color: '#94A3B8' }}>›</Text>
|
||
</TouchableOpacity>
|
||
|
||
<TouchableOpacity
|
||
style={{ backgroundColor: '#F0FDF4', borderRadius: 20, padding: 20, borderWidth: 1.5, borderColor: '#86EFAC', flexDirection: 'row', alignItems: 'center' }}
|
||
onPress={() => router.push('/(app)/remittances')}
|
||
activeOpacity={0.7}
|
||
>
|
||
<View style={{ width: 56, height: 56, borderRadius: 16, backgroundColor: '#059669', alignItems: 'center', justifyContent: 'center', marginRight: 16 }}>
|
||
<Text style={{ fontSize: 26 }}>📋</Text>
|
||
</View>
|
||
<View style={{ flex: 1 }}>
|
||
<Text style={{ fontSize: 18, fontWeight: '800', color: '#0F172A' }}>Remittances</Text>
|
||
<Text style={{ fontSize: 15, color: '#64748B', marginTop: 3 }}>Submit & track daily collections</Text>
|
||
</View>
|
||
<Text style={{ fontSize: 22, color: '#94A3B8' }}>›</Text>
|
||
</TouchableOpacity>
|
||
</ScrollView>
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
}
|