118 lines
4.2 KiB
TypeScript
118 lines
4.2 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 { Card } from "@/components/ui/card";
|
|
import {
|
|
FileText,
|
|
Wallet,
|
|
ChevronRight,
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Clock,
|
|
} from "@/lib/icons";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { ShadowWrapper } from "@/components/ShadowWrapper";
|
|
import { StandardHeader } from "@/components/StandardHeader";
|
|
import { MOCK_INVOICES, MOCK_PAYMENTS } from "@/lib/mock-data";
|
|
|
|
export default function HistoryScreen() {
|
|
// Combine and sort by date (mocking real activity)
|
|
const activity = [
|
|
...MOCK_INVOICES.map((inv) => ({
|
|
id: `inv-${inv.id}`,
|
|
type: "Invoice Sent",
|
|
title: inv.recipient,
|
|
amount: inv.amount,
|
|
date: inv.createdAt,
|
|
icon: <FileText size={16} color="#ea580c" />,
|
|
})),
|
|
...MOCK_PAYMENTS.map((pay) => ({
|
|
id: `pay-${pay.id}`,
|
|
type: "Payment Received",
|
|
title: pay.source,
|
|
amount: pay.amount,
|
|
date: pay.date,
|
|
icon: <Wallet size={16} color="#10b981" />,
|
|
})),
|
|
].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background">
|
|
<StandardHeader />
|
|
<ScrollView
|
|
className="flex-1"
|
|
contentContainerStyle={{ padding: 16, paddingBottom: 150 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View className="flex-row gap-2 mb-10">
|
|
<ShadowWrapper className="flex-1">
|
|
<View className="bg-card rounded-[10px] p-3">
|
|
<View className="h-8 w-8 bg-emerald-500/10 rounded-[6px] items-center justify-center mb-1">
|
|
<TrendingUp color="#10b981" size={16} />
|
|
</View>
|
|
<Text variant="muted" className="font-semibold">
|
|
Inflow
|
|
</Text>
|
|
<Text variant="h3" className="text-foreground">
|
|
$4,120
|
|
</Text>
|
|
</View>
|
|
</ShadowWrapper>
|
|
<ShadowWrapper className="flex-1">
|
|
<View className="bg-card rounded-[10px] p-3">
|
|
<View className="h-8 w-8 bg-amber-500/10 rounded-[6px] items-center justify-center mb-1">
|
|
<TrendingDown color="#f59e0b" size={16} />
|
|
</View>
|
|
<Text variant="muted" className="font-semibold">
|
|
Pending
|
|
</Text>
|
|
<Text variant="h3" className="text-foreground">
|
|
$1,540
|
|
</Text>
|
|
</View>
|
|
</ShadowWrapper>
|
|
</View>
|
|
|
|
<Text variant="h4" className="text-foreground mb-2">
|
|
Recent Activity
|
|
</Text>
|
|
|
|
<View className="gap-2">
|
|
{activity.map((item) => (
|
|
<ShadowWrapper key={item.id} level="xs">
|
|
<Card className="rounded-[6px] bg-card overflow-hidden">
|
|
<View className="flex-row items-center p-3">
|
|
<View className="bg-secondary/50 p-1 rounded-[6px] mr-4 border border-border/10">
|
|
{item.icon}
|
|
</View>
|
|
<View className="flex-1 mt-[-10px]">
|
|
<Text variant="p" className="text-foreground font-semibold">
|
|
{item.title}
|
|
</Text>
|
|
<Text variant="muted" className="text-xs font-medium">
|
|
{item.type} · {item.date}
|
|
</Text>
|
|
</View>
|
|
<View className="items-end mt-[-10px]">
|
|
<Text variant="p" className="text-foreground font-semibold">
|
|
{item.type.includes("Payment") ? "+" : ""}$
|
|
{item.amount.toLocaleString()}
|
|
</Text>
|
|
<View className="flex-row items-center gap-1">
|
|
<Clock color="#000" size={12} />
|
|
<Text className="text-[10px] text-foreground font-semibold">
|
|
Success
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
</ShadowWrapper>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|