67 lines
2.9 KiB
TypeScript
67 lines
2.9 KiB
TypeScript
import { View, ScrollView } from 'react-native';
|
||
import { useLocalSearchParams, router } from 'expo-router';
|
||
import { Text } from '@/components/ui/text';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
|
||
const MOCK_ITEMS = [
|
||
{ description: 'Marketing Landing Page Package', qty: 1, unitPrice: 1000, total: 1000 },
|
||
{ description: 'Instagram Post Initial Design', qty: 4, unitPrice: 100, total: 400 },
|
||
];
|
||
const MOCK_SUBTOTAL = 1400;
|
||
const MOCK_TAX = 140;
|
||
const MOCK_TOTAL = 1540;
|
||
|
||
export default function ProformaDetailScreen() {
|
||
const { id } = useLocalSearchParams<{ id: string }>();
|
||
|
||
return (
|
||
<ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
|
||
<Card className="mb-4">
|
||
<CardHeader>
|
||
<CardTitle>Proforma Request #{id ?? '—'}</CardTitle>
|
||
<CardDescription>Marketing Landing Page Package</CardDescription>
|
||
<Text className="text-muted-foreground mt-1 text-sm">Deadline: Sep 20, 2022 · OPEN</Text>
|
||
</CardHeader>
|
||
<CardContent className="gap-2">
|
||
{MOCK_ITEMS.map((item, i) => (
|
||
<View key={i} className="flex-row justify-between py-2">
|
||
<Text className="text-gray-700">{item.description} × {item.qty}</Text>
|
||
<Text className="font-medium text-gray-900">${item.total.toLocaleString()}</Text>
|
||
</View>
|
||
))}
|
||
<View className="mt-2 border-t border-border pt-2">
|
||
<View className="flex-row justify-between">
|
||
<Text className="text-muted-foreground">Subtotal</Text>
|
||
<Text className="text-gray-900">${MOCK_SUBTOTAL.toLocaleString()}</Text>
|
||
</View>
|
||
<View className="flex-row justify-between">
|
||
<Text className="text-muted-foreground">Tax (10%)</Text>
|
||
<Text className="text-gray-900">${MOCK_TAX.toLocaleString()}</Text>
|
||
</View>
|
||
<View className="flex-row justify-between">
|
||
<Text className="font-semibold text-gray-900">Total</Text>
|
||
<Text className="font-semibold text-gray-900">${MOCK_TOTAL.toLocaleString()}</Text>
|
||
</View>
|
||
</View>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Button className="mb-3 bg-primary" onPress={() => {}}>
|
||
<Text className="text-primary-foreground font-medium">Send to contacts</Text>
|
||
</Button>
|
||
<Button variant="outline" onPress={() => router.back()}>
|
||
<Text className="font-medium">Back to list</Text>
|
||
</Button>
|
||
|
||
<Text className="text-muted-foreground mt-6 mb-2 text-sm">Submissions (mock)</Text>
|
||
<Card>
|
||
<CardContent className="py-3">
|
||
<Text className="font-medium text-gray-900">Vendor A — $1,450</Text>
|
||
<Text className="text-muted-foreground text-sm">Submitted Sep 15, 2022</Text>
|
||
</CardContent>
|
||
</Card>
|
||
</ScrollView>
|
||
);
|
||
}
|