48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import type { OrderItemData, OrderStatus } from "@/lib/types";
|
|
import { StatusBadge } from "./StatusBadge";
|
|
|
|
export function SummaryPanel({
|
|
items,
|
|
status,
|
|
customerCount,
|
|
}: {
|
|
items: OrderItemData[];
|
|
status: OrderStatus;
|
|
customerCount: number;
|
|
}) {
|
|
const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
|
|
const totalOrderValue = items.reduce((sum, item) => sum + item.finalPrice, 0);
|
|
const myNetTotal = items.reduce((sum, item) => sum + item.myNetPrice, 0);
|
|
|
|
return (
|
|
<div className="bg-surface border-2 border-border rounded-2xl p-5 shadow-card space-y-4">
|
|
<h3 className="font-display text-lg font-bold text-fg">Order Summary</h3>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted">Status</span>
|
|
<StatusBadge status={status} />
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted">Total Order Value</span>
|
|
<span className="font-mono font-bold text-lg text-fg">${totalOrderValue.toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted">My Net Total</span>
|
|
<span className="font-mono font-bold text-lg text-accent">${myNetTotal.toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted">Items</span>
|
|
<span className="font-mono font-medium">{totalItems}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-muted">Customers</span>
|
|
<span className="font-mono font-medium">{customerCount}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|