feat: complete Sprint 3 Expo mobile app scaffold + all screens
This commit is contained in:
41
app/(app)/remittances/[id].tsx
Normal file
41
app/(app)/remittances/[id].tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator } from 'react-native';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
export default function RemittanceDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['remittance', id],
|
||||
queryFn: () => api.get(`/api/v1/remittances/${id}`).then(r => r.data),
|
||||
});
|
||||
|
||||
if (isLoading) return <View className="flex-1 items-center justify-center"><ActivityIndicator color="#2563EB" /></View>;
|
||||
|
||||
return (
|
||||
<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">Remittance Detail</Text>
|
||||
</View>
|
||||
<ScrollView className="flex-1 px-4 py-4">
|
||||
<View className="bg-white rounded-2xl border border-gray-100 p-4">
|
||||
<Text className="text-3xl font-bold text-gray-900 mb-1">₱{Number(data?.totalAmount ?? 0).toLocaleString()}</Text>
|
||||
<Text className="text-gray-500 text-sm mb-4">{new Date(data?.createdAt).toLocaleDateString()}</Text>
|
||||
<View className="border-t border-gray-100 pt-4">
|
||||
<Text className="text-gray-500 text-xs mb-0.5">Status</Text>
|
||||
<Text className="font-semibold text-gray-900">{data?.status}</Text>
|
||||
</View>
|
||||
{data?.notes && (
|
||||
<View className="border-t border-gray-100 pt-4 mt-4">
|
||||
<Text className="text-gray-500 text-xs mb-0.5">Notes</Text>
|
||||
<Text className="text-gray-900">{data.notes}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user