3b471df8d5
- Add Lucide React Native icon library and use across tabs and screens
- Mobile-like design: rounded cards (xl/2xl), section dividers, icon chips, chevrons
- New pages from swagger: register, invoices/[id], reports, documents, settings
- Invoice detail: amount, bill to, items, Share/PDF actions (GET /invoices/{id})
- Register screen with link to login (POST /auth/register)
- Reports list with mock data and download (GET /reports)
- Documents list with upload CTA (GET /documents)
- Settings: notifications link, language, about
- Profile: links to Notifications, Reports, Documents, Settings
- Home: invoice rows navigate to /invoices/[id]
- Login ↔ Register navigation
- Keep orange (#ea580c) and dark navbar (#2d2d2d) theme throughout
- README: update screens table with new routes
Co-authored-by: Cursor <cursoragent@cursor.com>
77 lines
3.4 KiB
TypeScript
77 lines
3.4 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';
|
|
import { ScanLine, Link2, CheckCircle2, Wallet, ChevronRight } from '@/lib/icons';
|
|
|
|
const PRIMARY = '#ea580c';
|
|
|
|
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-[#f5f5f5]"
|
|
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Text className="text-muted-foreground mb-5 text-base">
|
|
Match payment SMS (e.g. bank or Telebirr) to invoices for quick reconciliation.
|
|
</Text>
|
|
|
|
<Button className="mb-5 min-h-12 rounded-xl bg-primary">
|
|
<ScanLine color="#ffffff" size={20} strokeWidth={2} />
|
|
<Text className="ml-2 text-primary-foreground font-medium">Scan SMS now</Text>
|
|
</Button>
|
|
|
|
<View className="mb-3 flex-row items-center gap-2">
|
|
<Link2 color="#71717a" size={18} strokeWidth={2} />
|
|
<Text className="text-muted-foreground text-sm font-medium">Pending match</Text>
|
|
</View>
|
|
{pending.map((pay) => (
|
|
<Card key={pay.id} className="mb-2.5 overflow-hidden rounded-xl border-2 border-amber-500/30 bg-white">
|
|
<CardContent className="flex-row items-center py-4 pl-4 pr-3">
|
|
<View className="mr-3 rounded-xl bg-primary/10 p-2">
|
|
<Wallet color={PRIMARY} size={22} strokeWidth={2} />
|
|
</View>
|
|
<View className="flex-1">
|
|
<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" className="rounded-lg" onPress={() => router.push(`/payments/${pay.id}`)}>
|
|
<Text className="font-medium">Match</Text>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
|
|
<View className="mb-3 mt-6 flex-row items-center gap-2">
|
|
<CheckCircle2 color="#059669" size={18} strokeWidth={2} />
|
|
<Text className="text-muted-foreground text-sm font-medium">Reconciled</Text>
|
|
</View>
|
|
{matched.map((pay) => (
|
|
<Card key={pay.id} className="mb-2.5 overflow-hidden rounded-xl border border-border bg-white">
|
|
<CardContent className="flex-row items-center py-4 pl-4 pr-3">
|
|
<View className="mr-3 rounded-xl bg-emerald-500/15 p-2">
|
|
<CheckCircle2 color="#059669" size={22} strokeWidth={2} />
|
|
</View>
|
|
<View className="flex-1">
|
|
<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.5 py-1">
|
|
<Text className="text-xs font-medium text-emerald-700">Matched</Text>
|
|
</View>
|
|
<ChevronRight className="ml-2 text-muted-foreground" color="#71717a" size={20} strokeWidth={2} />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
}
|