99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
// 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>
|
|
)
|
|
} |