45 lines
1.9 KiB
TypeScript
45 lines
1.9 KiB
TypeScript
import { View, ScrollView } from 'react-native';
|
|
import { useLocalSearchParams, router } from 'expo-router';
|
|
import { Text } from '@/components/ui/text';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
export default function PaymentDetailScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
|
|
return (
|
|
<ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
|
|
<Card className="mb-4">
|
|
<CardHeader>
|
|
<CardTitle>Payment #{id ?? '—'}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="gap-2">
|
|
<View className="flex-row justify-between py-2">
|
|
<Text className="text-muted-foreground">Amount</Text>
|
|
<Text className="font-semibold text-gray-900">$2,000.00</Text>
|
|
</View>
|
|
<View className="flex-row justify-between py-2">
|
|
<Text className="text-muted-foreground">Source</Text>
|
|
<Text className="text-gray-900">Telebirr</Text>
|
|
</View>
|
|
<View className="flex-row justify-between py-2">
|
|
<Text className="text-muted-foreground">Date</Text>
|
|
<Text className="text-gray-900">Sep 11, 2022</Text>
|
|
</View>
|
|
<View className="flex-row justify-between py-2">
|
|
<Text className="text-muted-foreground">Associated invoice</Text>
|
|
<Text className="text-amber-600">Not linked</Text>
|
|
</View>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Button className="mb-3 bg-primary" onPress={() => {}}>
|
|
<Text className="text-primary-foreground font-medium">Associate to invoice</Text>
|
|
</Button>
|
|
<Button variant="outline" onPress={() => router.back()}>
|
|
<Text className="font-medium">Back to payments</Text>
|
|
</Button>
|
|
</ScrollView>
|
|
);
|
|
}
|