233 lines
10 KiB
TypeScript
233 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Calendar,
|
|
Hash,
|
|
Building2,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
TimerIcon,
|
|
ReceiptIcon,
|
|
Wrench,
|
|
Tag,
|
|
Percent,
|
|
} from "lucide-react"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/shared/components/ui/card"
|
|
import { Badge } from "@/shared/components/ui/badge"
|
|
import { cn } from "@/shared/lib/utils"
|
|
import { formatDate, formatCurrency, formatEnum, formatTaxLabel } from "@/shared/utils/formatters"
|
|
import { useExpense } from "./expense-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",
|
|
un_paid: "destructive",
|
|
partially_paid: "secondary",
|
|
paid: "default",
|
|
cancelled: "destructive",
|
|
}
|
|
|
|
export function ExpenseGeneralInfo() {
|
|
const expense = useExpense()
|
|
if (!expense) return null
|
|
|
|
const vendor = expense.vendor || {}
|
|
const department = expense.department || null
|
|
const jobCard = expense.job_card || null
|
|
const category = expense.category || null
|
|
const labels = (expense as any)?.labels || []
|
|
const balanceDue = expense.balance_due ?? null
|
|
const paymentsM = expense.payments_made ?? null
|
|
const taxLabel = formatTaxLabel(expense.tax, "Tax")
|
|
|
|
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">
|
|
{expense.status === "paid" && <CheckCircle2 className="size-4 text-green-500" />}
|
|
{expense.status === "pending" && <TimerIcon className="size-4 text-muted-foreground" />}
|
|
{expense.status === "open" && <AlertTriangle className="size-4 text-yellow-600" />}
|
|
{expense.status === "un_paid" && <AlertTriangle className="size-4 text-destructive" />}
|
|
<Badge variant={statusVariantMap[String(expense.status ?? "")] ?? "outline"} className="text-sm px-2 py-0.5">
|
|
{formatEnum(String(expense.status ?? ""))}
|
|
</Badge>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Total */}
|
|
<Card className="flex flex-col gap-1 p-4">
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Total</span>
|
|
<span className="mt-1 text-lg font-semibold">
|
|
{formatCurrency(expense.total ?? 0)}
|
|
</span>
|
|
{expense.sub_total != null && expense.sub_total !== expense.total && (
|
|
<span className="text-xs text-muted-foreground">Subtotal: {formatCurrency(expense.sub_total)}</span>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Payments Made */}
|
|
<Card className="flex flex-col gap-1 p-4">
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Paid</span>
|
|
<span className="mt-1 text-lg font-semibold text-green-600 dark:text-green-400">
|
|
{formatCurrency(paymentsM ?? 0)}
|
|
</span>
|
|
</Card>
|
|
|
|
{/* Balance Due */}
|
|
<Card className={cn("flex flex-col gap-1 p-4", (balanceDue ?? 0) > 0 && "border-destructive/50 bg-destructive/5")}>
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Balance Due</span>
|
|
<span className={cn("mt-1 text-lg font-semibold", (balanceDue ?? 0) > 0 ? "text-destructive" : "text-green-600 dark:text-green-400")}>
|
|
{formatCurrency(balanceDue ?? 0)}
|
|
</span>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* ── Vendor ── */}
|
|
<Card className="flex flex-col gap-1 p-4">
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Vendor</span>
|
|
<span className="mt-1 text-lg font-semibold">{vendor.name || "—"}</span>
|
|
</Card>
|
|
|
|
{/* ── Expense Details ── */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<ReceiptIcon className="size-4" />
|
|
Expense Details
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
<InfoItem icon={Hash} label="Invoice Number" value={expense.invoice_number} />
|
|
<InfoItem icon={Calendar} label="Expense Date" value={formatDate(expense.expense_date)} />
|
|
<InfoItem icon={Building2} label="Department" value={department?.name} />
|
|
{expense.discount && expense.discount !== "no" && (
|
|
<InfoItem icon={Percent} label="Discount Type" value={formatEnum(expense.discount)} />
|
|
)}
|
|
{expense.discount_amount_major != null && expense.discount_amount_major > 0 && (
|
|
<InfoItem icon={Percent} label="Discount" value={formatCurrency(expense.discount_amount_major)} />
|
|
)}
|
|
{expense.tax_amount != null && expense.tax_amount > 0 && (
|
|
<InfoItem icon={Percent} label={taxLabel} value={formatCurrency(expense.tax_amount)} />
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ── Job Card & Category ── */}
|
|
{(jobCard || category) && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Wrench className="size-4" />
|
|
Related Information
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{jobCard && (
|
|
<div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
|
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-background text-muted-foreground">
|
|
<Wrench className="size-4" />
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-xs text-muted-foreground font-medium">Job Card</span>
|
|
<span className="text-sm font-semibold">{jobCard.order_number || "—"}</span>
|
|
<span className="text-xs text-muted-foreground">{jobCard.title || ""}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{category && (
|
|
<div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
|
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-background text-muted-foreground">
|
|
<Tag className="size-4" />
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-xs text-muted-foreground font-medium">Category</span>
|
|
<span className="text-sm font-semibold">{category.title || "—"}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* ── Labels ── */}
|
|
{labels && labels.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Tag className="size-4" />
|
|
Labels
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-2">
|
|
{labels.map((label: any) => (
|
|
<Badge
|
|
key={label.id}
|
|
style={{
|
|
backgroundColor: label.color_code + "20",
|
|
borderColor: label.color_code,
|
|
color: label.color_code,
|
|
}}
|
|
variant="outline"
|
|
>
|
|
{label.title}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* ── Notes ── */}
|
|
{expense.notes && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Notes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{expense.notes}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|