added idividual vendor pages

2026-01-27 12:59:24 -05:00
parent 3aa9b6f325
commit aa2f30c086
11 changed files with 1212 additions and 19 deletions
--- a/components/vendor/FinancialCard.tsx
+++ b/components/vendor/FinancialCard.tsx
@@ -0,0 +1,99 @@
+// components/vendors/FinancialCard.tsx
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Calendar } from 'lucide-react'
+
+interface FinancialCardProps {
+    quotedPrice?: number | null
+    finalCost?: number | null
+    depositPaid?: number | null
+    depositDueDate?: Date | null
+    finalPaymentDue?: Date | null
+    paymentNotes?: string | null
+}
+
+const formatCurrency = (amount?: number | null): string => {
+    if (!amount) return '—'
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+    }).format(amount)
+}
+
+const formatDate = (date?: Date | null): string => {
+    if (!date) return '—'
+    return new Date(date).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    })
+}
+
+export function FinancialCard({
+    quotedPrice,
+    finalCost,
+    depositPaid,
+    depositDueDate,
+    finalPaymentDue,
+    paymentNotes,
+}: FinancialCardProps) {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Financial Information</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div className="space-y-2">
+                        <p className="text-sm text-muted-foreground">Quoted Price</p>
+                        <p className="text-2xl font-bold">{formatCurrency(quotedPrice)}</p>
+                    </div>
+                    <div className="space-y-2">
+                        <p className="text-sm text-muted-foreground">Final Cost</p>
+                        <p className="text-2xl font-bold">{formatCurrency(finalCost)}</p>
+                    </div>
+                    <div className="space-y-2">
+                        <p className="text-sm text-muted-foreground">Deposit Paid</p>
+                        <p className="text-2xl font-bold">{formatCurrency(depositPaid)}</p>
+                    </div>
+                </div>
+                
+                {(depositDueDate || finalPaymentDue) && (
+                    <>
+                        <Separator className="my-4" />
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            {depositDueDate && (
+                                <div className="flex items-start gap-3">
+                                    <Calendar className="h-5 w-5 text-muted-foreground mt-0.5" />
+                                    <div>
+                                        <p className="text-sm text-muted-foreground">Deposit Due Date</p>
+                                        <p className="font-medium">{formatDate(depositDueDate)}</p>
+                                    </div>
+                                </div>
+                            )}
+                            {finalPaymentDue && (
+                                <div className="flex items-start gap-3">
+                                    <Calendar className="h-5 w-5 text-muted-foreground mt-0.5" />
+                                    <div>
+                                        <p className="text-sm text-muted-foreground">Final Payment Due</p>
+                                        <p className="font-medium">{formatDate(finalPaymentDue)}</p>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
+                
+                {paymentNotes && (
+                    <>
+                        <Separator className="my-4" />
+                        <div>
+                            <p className="text-sm text-muted-foreground mb-2">Payment Notes</p>
+                            <p className="text-sm">{paymentNotes}</p>
+                        </div>
+                    </>
+                )}
+            </CardContent>
+        </Card>
+    )
+}