293 lines
14 KiB
TypeScript
293 lines
14 KiB
TypeScript
"use client"
|
|
import {
|
|
FileText,
|
|
Calendar,
|
|
Hash,
|
|
Users,
|
|
Car,
|
|
Building2,
|
|
Clock,
|
|
Mail,
|
|
Phone,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
TimerIcon,
|
|
} from "lucide-react"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/shared/components/ui/card"
|
|
import { Badge } from "@/shared/components/ui/badge"
|
|
import { Separator } from "@/shared/components/ui/separator"
|
|
import { cn } from "@/shared/lib/utils"
|
|
import { formatDate, formatCurrency, formatEnum, formatNumber } from "@/shared/utils/formatters"
|
|
import { useInvoice } from "./invoice-context"
|
|
|
|
function InfoItem({
|
|
icon: Icon,
|
|
label,
|
|
value,
|
|
}: {
|
|
icon: React.ComponentType<{ className?: string }>
|
|
label: string
|
|
value?: string | null
|
|
}) {
|
|
return (
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
|
<Icon className="size-4" />
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-xs text-muted-foreground">{label}</span>
|
|
<span className="text-sm font-medium">
|
|
{value || <span className="text-muted-foreground">—</span>}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const statusVariantMap: Record<string, "secondary" | "default" | "destructive" | "outline"> = {
|
|
draft: "secondary",
|
|
open: "default",
|
|
paid: "default",
|
|
overdue: "destructive",
|
|
void: "outline",
|
|
}
|
|
|
|
function getDueInfo(dueDateStr?: string, status?: string) {
|
|
if (!dueDateStr) return null
|
|
const now = new Date()
|
|
const due = new Date(dueDateStr)
|
|
const diffMs = due.getTime() - now.getTime()
|
|
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
|
|
const isPaid = status === "paid" || status === "void"
|
|
if (isPaid) return { label: formatDate(dueDateStr), variant: "neutral" as const }
|
|
if (diffDays < 0) return { label: `${Math.abs(diffDays)} days overdue`, variant: "overdue" as const }
|
|
if (diffDays === 0) return { label: "Due today", variant: "today" as const }
|
|
if (diffDays <= 7) return { label: `Due in ${diffDays} day${diffDays === 1 ? "" : "s"}`, variant: "soon" as const }
|
|
return { label: formatDate(dueDateStr), variant: "neutral" as const }
|
|
}
|
|
|
|
export function InvoiceGeneralInfo() {
|
|
const _invoice = useInvoice()
|
|
if (!_invoice) return null
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const invoice = _invoice as any
|
|
|
|
const customer = invoice.customer || {}
|
|
const vehicle = invoice.vehicle || {}
|
|
const insurer = invoice.insurer || {}
|
|
const department = invoice.department || null
|
|
|
|
const total = parseFloat(String(invoice.total ?? 0)) || 0
|
|
const paid = parseFloat(String(invoice.payments_recieved ?? invoice.received_payment ?? 0)) || 0
|
|
const balanceDue = parseFloat(String(invoice.balance_due ?? 0)) || 0
|
|
|
|
const dueInfo = getDueInfo(invoice.due_date as string | undefined, invoice.status as string | undefined)
|
|
|
|
return (
|
|
<div className="grid gap-6">
|
|
|
|
{/* ── Summary Hero ── */}
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
{/* Status */}
|
|
<Card className="flex flex-col gap-1 p-4">
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Status</span>
|
|
<div className="mt-1 flex items-center gap-2">
|
|
{invoice.status === "paid" && <CheckCircle2 className="size-4 text-green-500" />}
|
|
{invoice.status === "overdue" && <AlertTriangle className="size-4 text-destructive" />}
|
|
{(invoice.status === "draft" || invoice.status === "open") && <TimerIcon className="size-4 text-muted-foreground" />}
|
|
<Badge variant={statusVariantMap[String(invoice.status ?? "")] ?? "outline"} className="text-sm px-2 py-0.5">
|
|
{formatEnum(String(invoice.status ?? ""))}
|
|
</Badge>
|
|
</div>
|
|
{invoice.invoice_number && (
|
|
<span className="mt-1 text-xs text-muted-foreground">{invoice.invoice_number}</span>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Due Date */}
|
|
<Card className={cn(
|
|
"flex flex-col gap-1 p-4",
|
|
dueInfo?.variant === "overdue" && "border-destructive/60 bg-destructive/5",
|
|
dueInfo?.variant === "today" && "border-orange-400/60 bg-orange-50 dark:bg-orange-950/20",
|
|
dueInfo?.variant === "soon" && "border-yellow-400/60 bg-yellow-50 dark:bg-yellow-950/20",
|
|
)}>
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Due Date</span>
|
|
<span className={cn(
|
|
"mt-1 text-lg font-semibold",
|
|
dueInfo?.variant === "overdue" && "text-destructive",
|
|
dueInfo?.variant === "today" && "text-orange-600",
|
|
dueInfo?.variant === "soon" && "text-yellow-700 dark:text-yellow-500",
|
|
)}>
|
|
{formatDate(invoice.due_date) || "—"}
|
|
</span>
|
|
{dueInfo && dueInfo.variant !== "neutral" && (
|
|
<span className={cn(
|
|
"text-xs font-medium",
|
|
dueInfo.variant === "overdue" && "text-destructive",
|
|
dueInfo.variant === "today" && "text-orange-600",
|
|
dueInfo.variant === "soon" && "text-yellow-700 dark:text-yellow-500",
|
|
)}>
|
|
{dueInfo.label}
|
|
</span>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Total Amount */}
|
|
<Card className="flex flex-col gap-1 p-4">
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Total Amount</span>
|
|
<span className="mt-1 text-lg font-semibold">{formatCurrency(total)}</span>
|
|
{paid > 0 && (
|
|
<span className="text-xs text-muted-foreground">{formatCurrency(paid)} received</span>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Balance Due */}
|
|
<Card className={cn(
|
|
"flex flex-col gap-1 p-4",
|
|
balanceDue > 0 && invoice.status !== "paid" && "border-primary/40 bg-primary/5",
|
|
balanceDue <= 0 && "border-green-500/40 bg-green-50 dark:bg-green-950/20",
|
|
)}>
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Balance Due</span>
|
|
<span className={cn(
|
|
"mt-1 text-lg font-bold",
|
|
balanceDue > 0 && invoice.status !== "paid" && "text-primary",
|
|
balanceDue <= 0 && "text-green-600",
|
|
)}>
|
|
{formatCurrency(balanceDue)}
|
|
</span>
|
|
{balanceDue <= 0 && (
|
|
<span className="text-xs font-medium text-green-600">Fully paid</span>
|
|
)}
|
|
{invoice.discount && invoice.discount !== "no" && (
|
|
<span className="text-xs text-muted-foreground">Discount: {formatEnum(invoice.discount)}</span>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
|
|
{/* ── Customer & Vehicle ── */}
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="size-4" />
|
|
Customer Information
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<InfoItem
|
|
icon={Users}
|
|
label="Customer Name"
|
|
value={customer.first_name && customer.last_name ? `${customer.first_name} ${customer.last_name}` : invoice.customer_name}
|
|
/>
|
|
<InfoItem icon={Mail} label="Email" value={customer.email} />
|
|
<InfoItem icon={Phone} label="Phone" value={customer.phone} />
|
|
<InfoItem icon={Phone} label="Alternate Phone" value={customer.alternate_phone} />
|
|
</div>
|
|
{customer.address_line_1 && (
|
|
<>
|
|
<Separator />
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-xs text-muted-foreground">Address</span>
|
|
<p className="text-sm">
|
|
{customer.address_line_1}
|
|
{customer.address_line_2 ? `, ${customer.address_line_2}` : ""}
|
|
<br />
|
|
{customer.city ?? ""}{customer.zip_code ? `, ${customer.zip_code}` : ""}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Car className="size-4" />
|
|
Vehicle Information
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<InfoItem
|
|
icon={Car}
|
|
label="Vehicle"
|
|
value={vehicle.make && vehicle.model ? `${vehicle.make} ${vehicle.model}` : invoice.vehicle_name}
|
|
/>
|
|
<InfoItem icon={Hash} label="License Plate" value={vehicle.license_plate} />
|
|
<InfoItem icon={Hash} label="VIN" value={vehicle.vin_number} />
|
|
<InfoItem icon={Hash} label="Engine Number" value={vehicle.engine_number} />
|
|
</div>
|
|
{vehicle.mileage && (
|
|
<>
|
|
<Separator />
|
|
<InfoItem icon={Clock} label="Mileage" value={formatNumber(vehicle.mileage)} />
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* ── Invoice Meta ── */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<FileText className="size-4" />
|
|
Invoice Details
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
<InfoItem icon={Hash} label="Invoice Number" value={invoice.invoice_number} />
|
|
<InfoItem icon={Calendar} label="Invoice Date" value={formatDate(invoice.invoice_date)} />
|
|
<InfoItem icon={Calendar} label="Due Date" value={formatDate(invoice.due_date)} />
|
|
<InfoItem icon={Building2} label="Department" value={department?.name} />
|
|
<InfoItem icon={Hash} label="Has Insurance" value={invoice.has_insurance ? "Yes" : "No"} />
|
|
{invoice.has_insurance && insurer.id && (
|
|
<InfoItem icon={Users} label="Insurer" value={insurer.name} />
|
|
)}
|
|
{invoice.kms_in ? (
|
|
<InfoItem icon={Clock} label="KMs In" value={formatNumber(invoice.kms_in)} />
|
|
) : null}
|
|
{invoice.invoice_title ? (
|
|
<InfoItem icon={FileText} label="Invoice Title" value={invoice.invoice_title} />
|
|
) : null}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ── Notes & Terms ── */}
|
|
{(invoice.notes || invoice.terms_and_conditions) && (
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{invoice.notes && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Notes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-wrap text-sm">{invoice.notes}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
{invoice.terms_and_conditions && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Terms & Conditions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-wrap text-sm">{invoice.terms_and_conditions}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|