71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { View, ScrollView, Pressable } from "react-native";
|
|
import { useSirouRouter } from "@sirou/react-native";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { FileText, ChevronRight, FolderOpen, Upload } from "@/lib/icons";
|
|
import { MOCK_DOCUMENTS } from "@/lib/mock-data";
|
|
|
|
const PRIMARY = "#ea580c";
|
|
|
|
export default function DocumentsScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
return (
|
|
<ScrollView
|
|
className="flex-1 bg-[#f5f5f5]"
|
|
contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View className="mb-4 flex-row items-center gap-2">
|
|
<FolderOpen color="#18181b" size={22} strokeWidth={2} />
|
|
<Text className="text-xl font-semibold text-gray-900">Documents</Text>
|
|
</View>
|
|
<Text className="text-muted-foreground mb-5 text-sm">
|
|
Uploaded invoices, scans, and attachments. Synced with your account.
|
|
</Text>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="mb-5 min-h-12 rounded-xl border-border"
|
|
onPress={() => {}}
|
|
>
|
|
<Upload color={PRIMARY} size={20} strokeWidth={2} />
|
|
<Text className="ml-2 font-medium text-gray-700">Upload document</Text>
|
|
</Button>
|
|
|
|
{MOCK_DOCUMENTS.map((d) => (
|
|
<Card
|
|
key={d.id}
|
|
className="mb-2.5 overflow-hidden rounded-xl border border-border bg-white"
|
|
>
|
|
<Pressable>
|
|
<CardContent className="flex-row items-center py-4 pl-4 pr-3">
|
|
<View className="mr-3 rounded-xl bg-primary/10 p-2">
|
|
<FileText color={PRIMARY} size={22} strokeWidth={2} />
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="font-medium text-gray-900" numberOfLines={1}>
|
|
{d.name}
|
|
</Text>
|
|
<Text className="text-muted-foreground mt-0.5 text-sm">
|
|
{d.size} · {d.uploadedAt}
|
|
</Text>
|
|
</View>
|
|
<ChevronRight color="#71717a" size={20} strokeWidth={2} />
|
|
</CardContent>
|
|
</Pressable>
|
|
</Card>
|
|
))}
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="mt-4 rounded-xl border-border"
|
|
onPress={() => nav.back()}
|
|
>
|
|
<Text className="font-medium">Back</Text>
|
|
</Button>
|
|
</ScrollView>
|
|
);
|
|
}
|