- Add Expo Router with bottom tabs (Home, Scan, Proforma, Payments, Profile) - Home: earnings summary, quick actions, invoice list with Waiting/Paid filters - Scan: placeholder for camera flow, recent scans list - Proforma: list of proforma requests with send-to-contacts CTA - Payments: pending match and reconciled list - Profile: account info, about, logout - Apply Yaltopia theme: primary orange (#ea580c), dark navbar/tabs (#2d2d2d) - Add mock data (invoices, proforma, payments, user) in lib/mock-data.ts - Root layout: GestureHandler, SafeArea, PortalHost; tab bar dark with orange active Co-authored-by: Cursor <cursoragent@cursor.com>
58 lines
2.6 KiB
TypeScript
58 lines
2.6 KiB
TypeScript
import { View, ScrollView } from 'react-native';
|
|
import { Text } from '@/components/ui/text';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
export default function ScanScreen() {
|
|
return (
|
|
<ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
|
|
<Text className="text-muted-foreground mb-4">
|
|
Capture paper or digital invoices with your camera. We'll extract vendor, amount, date, and line items.
|
|
</Text>
|
|
|
|
<Card className="mb-4 border-2 border-dashed border-border">
|
|
<CardContent className="items-center justify-center py-16">
|
|
<View className="mb-4 h-20 w-20 items-center justify-center rounded-full bg-primary/10">
|
|
<Text className="text-4xl">📷</Text>
|
|
</View>
|
|
<Text className="mb-2 text-center text-lg font-semibold text-gray-900">Scan invoice</Text>
|
|
<Text className="text-muted-foreground mb-4 text-center text-sm">
|
|
Tap below to open camera and capture an invoice
|
|
</Text>
|
|
<Button className="bg-primary min-w-[200]">
|
|
<Text className="text-primary-foreground font-medium">Open camera</Text>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Text className="text-muted-foreground mb-2 text-sm">Recent scans</Text>
|
|
<Card className="mb-2">
|
|
<CardContent className="py-3">
|
|
<View className="flex-row items-center justify-between">
|
|
<View>
|
|
<Text className="font-medium text-gray-900">Acme Corp - Invoice #101</Text>
|
|
<Text className="text-muted-foreground text-sm">Scanned Sep 12, 2022 · $1,240</Text>
|
|
</View>
|
|
<View className="rounded-full bg-amber-500/20 px-2 py-0.5">
|
|
<Text className="text-xs font-medium text-amber-700">Pending</Text>
|
|
</View>
|
|
</View>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="mb-2">
|
|
<CardContent className="py-3">
|
|
<View className="flex-row items-center justify-between">
|
|
<View>
|
|
<Text className="font-medium text-gray-900">Tech Supplies Ltd - Invoice #88</Text>
|
|
<Text className="text-muted-foreground text-sm">Scanned Sep 11, 2022 · $890</Text>
|
|
</View>
|
|
<View className="rounded-full bg-emerald-500/20 px-2 py-0.5">
|
|
<Text className="text-xs font-medium text-emerald-700">Saved</Text>
|
|
</View>
|
|
</View>
|
|
</CardContent>
|
|
</Card>
|
|
</ScrollView>
|
|
);
|
|
}
|