68 lines
2.5 KiB
TypeScript
68 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 { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { FileText, Download, ChevronRight, BarChart3 } from "@/lib/icons";
|
|
import { MOCK_REPORTS } from "@/lib/mock-data";
|
|
|
|
const PRIMARY = "#ea580c";
|
|
|
|
export default function ReportsScreen() {
|
|
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">
|
|
<BarChart3 color="#18181b" size={22} strokeWidth={2} />
|
|
<Text className="text-xl font-semibold text-gray-900">Reports</Text>
|
|
</View>
|
|
<Text className="text-muted-foreground mb-5 text-sm">
|
|
Monthly reports and PDF exports. Generate from the web app or view here.
|
|
</Text>
|
|
|
|
{MOCK_REPORTS.map((r) => (
|
|
<Card
|
|
key={r.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-semibold text-gray-900">{r.title}</Text>
|
|
<Text className="text-muted-foreground mt-0.5 text-sm">
|
|
{r.period}
|
|
</Text>
|
|
<Text className="text-muted-foreground mt-0.5 text-xs">
|
|
Generated {r.generatedAt}
|
|
</Text>
|
|
</View>
|
|
<View className="flex-row items-center gap-2">
|
|
<Pressable className="rounded-lg bg-primary/10 p-2">
|
|
<Download color={PRIMARY} size={18} strokeWidth={2} />
|
|
</Pressable>
|
|
<ChevronRight color="#71717a" size={20} strokeWidth={2} />
|
|
</View>
|
|
</CardContent>
|
|
</Pressable>
|
|
</Card>
|
|
))}
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="mt-4 rounded-xl border-border"
|
|
onPress={() => nav.back()}
|
|
>
|
|
<Text className="font-medium">Back</Text>
|
|
</Button>
|
|
</ScrollView>
|
|
);
|
|
}
|