107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
import React from "react";
|
|
import { View, ScrollView, Pressable } from "react-native";
|
|
import { router } from "expo-router";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { MOCK_PAYMENTS } from "@/lib/mock-data";
|
|
import { ScanLine, CheckCircle2, Wallet, ChevronRight } from "@/lib/icons";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { StandardHeader } from "@/components/StandardHeader";
|
|
|
|
const PRIMARY = "#ea580c";
|
|
|
|
export default function PaymentsScreen() {
|
|
const matched = MOCK_PAYMENTS.filter((p) => p.matched);
|
|
const pending = MOCK_PAYMENTS.filter((p) => !p.matched);
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background">
|
|
<StandardHeader />
|
|
<ScrollView
|
|
className="flex-1"
|
|
contentContainerStyle={{ padding: 20, paddingBottom: 150 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Button className="mb-4 h-10 rounded-[10px] bg-primary shadow-lg shadow-primary/30">
|
|
<ScanLine color="#ffffff" size={18} strokeWidth={2.5} />
|
|
<Text className=" text-white text-xs font-semibold uppercase tracking-widest">
|
|
Scan SMS
|
|
</Text>
|
|
</Button>
|
|
|
|
<View className="mb-4 flex-row items-center gap-3">
|
|
<Text variant="h4" className="text-foreground">
|
|
Pending Match
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="gap-2">
|
|
{pending.map((pay) => (
|
|
<Pressable
|
|
key={pay.id}
|
|
onPress={() => router.push(`/payments/${pay.id}`)}
|
|
>
|
|
<Card className="rounded-[10px] bg-card overflow-hidden">
|
|
<View className="flex-row items-center p-3">
|
|
<View className="mr-2 rounded-[6px] bg-primary/10 p-2 border border-primary/5">
|
|
<Wallet color={PRIMARY} size={18} strokeWidth={2.5} />
|
|
</View>
|
|
<View className="flex-1 mt-[-15px]">
|
|
<Text variant="p" className="text-foreground font-bold">
|
|
${pay.amount.toLocaleString()}
|
|
</Text>
|
|
<Text variant="muted" className="text-xs">
|
|
{pay.source} · {pay.date}
|
|
</Text>
|
|
</View>
|
|
<View className="bg-amber-500/10 px-4 py-2 rounded-[6px]">
|
|
<Text className="text-amber-700 text-[10px] font-semibold">
|
|
Match
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
|
|
<View className="mb-4 mt-4 flex-row items-center gap-3">
|
|
<Text variant="h4" className="text-foreground">
|
|
Reconciled
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="gap-2">
|
|
{matched.map((pay) => (
|
|
<Card
|
|
key={pay.id}
|
|
className="rounded-[10px] bg-card overflow-hidden opacity-80"
|
|
>
|
|
<View className="flex-row items-center p-3">
|
|
<View className="mr-2 rounded-[6px] bg-emerald-500/10 p-2 border border-emerald-500/5">
|
|
<CheckCircle2 color="#10b981" size={18} strokeWidth={2.5} />
|
|
</View>
|
|
<View className="flex-1 mt-[-15px]">
|
|
<Text variant="p" className="text-foreground font-bold">
|
|
${pay.amount.toLocaleString()}
|
|
</Text>
|
|
<Text variant="muted" className="text-xs">
|
|
{pay.source} · {pay.date}
|
|
</Text>
|
|
</View>
|
|
<ChevronRight
|
|
className="text-foreground"
|
|
size={18}
|
|
strokeWidth={2}
|
|
color="#000"
|
|
/>
|
|
</View>
|
|
</Card>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|