60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import { View, ScrollView } from 'react-native';
|
|
import { router } from 'expo-router';
|
|
import { Text } from '@/components/ui/text';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { MOCK_PAYMENTS } from '@/lib/mock-data';
|
|
|
|
export default function PaymentsScreen() {
|
|
const matched = MOCK_PAYMENTS.filter((p) => p.matched);
|
|
const pending = MOCK_PAYMENTS.filter((p) => !p.matched);
|
|
|
|
return (
|
|
<ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
|
|
<Text className="text-muted-foreground mb-4">
|
|
Match payment SMS (e.g. bank or Telebirr) to invoices for quick reconciliation.
|
|
</Text>
|
|
|
|
<Button className="mb-4 bg-primary">
|
|
<Text className="text-primary-foreground font-medium">Scan SMS now</Text>
|
|
</Button>
|
|
|
|
<Text className="text-muted-foreground mb-2 text-sm">Pending match</Text>
|
|
{pending.map((pay) => (
|
|
<Card key={pay.id} className="mb-2 border-amber-500/30">
|
|
<CardContent className="py-3">
|
|
<View className="flex-row items-center justify-between">
|
|
<View>
|
|
<Text className="font-semibold text-gray-900">${pay.amount.toLocaleString()}</Text>
|
|
<Text className="text-muted-foreground text-sm">{pay.source} · {pay.date}</Text>
|
|
</View>
|
|
<Button variant="outline" size="sm" onPress={() => router.push(`/payments/${pay.id}`)}>
|
|
<Text className="font-medium">Match to invoice</Text>
|
|
</Button>
|
|
</View>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
|
|
<Text className="text-muted-foreground mb-2 mt-4 text-sm">Reconciled</Text>
|
|
{matched.map((pay) => (
|
|
<Card key={pay.id} className="mb-2">
|
|
<CardContent className="py-3">
|
|
<View className="flex-row items-center justify-between">
|
|
<View>
|
|
<Text className="font-semibold text-gray-900">${pay.amount.toLocaleString()}</Text>
|
|
<Text className="text-muted-foreground text-sm">
|
|
{pay.source} · {pay.date} {pay.reference && `· ${pay.reference}`}
|
|
</Text>
|
|
</View>
|
|
<View className="rounded-full bg-emerald-500/20 px-2 py-0.5">
|
|
<Text className="text-xs font-medium text-emerald-700">Matched</Text>
|
|
</View>
|
|
</View>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
}
|