91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import { Card, CardContent } from '@/components/ui/card';
|
|
import { formatCurrency } from '@/lib/utils';
|
|
import {
|
|
Banknote,
|
|
CircleDollarSign,
|
|
FileText,
|
|
Percent,
|
|
TrendingUp,
|
|
} from 'lucide-react';
|
|
|
|
type Summary = {
|
|
total_orders: number;
|
|
total_subtotal: number;
|
|
total_discount: number;
|
|
total_amount: number;
|
|
net_total: number;
|
|
};
|
|
|
|
type TransactionSummaryCardProps = {
|
|
summary: Summary;
|
|
};
|
|
|
|
const summaryItems = [
|
|
{
|
|
key: 'total_orders',
|
|
label: 'Total Pesanan',
|
|
icon: FileText,
|
|
color: 'bg-blue-100',
|
|
iconColor: 'text-blue-600',
|
|
format: (value: number) => value.toLocaleString('id-ID'),
|
|
},
|
|
{
|
|
key: 'total_subtotal',
|
|
label: 'Subtotal',
|
|
icon: Banknote,
|
|
color: 'bg-emerald-100',
|
|
iconColor: 'text-emerald-600',
|
|
format: formatCurrency,
|
|
},
|
|
{
|
|
key: 'total_discount',
|
|
label: 'Diskon',
|
|
icon: Percent,
|
|
color: 'bg-amber-100',
|
|
iconColor: 'text-amber-600',
|
|
format: formatCurrency,
|
|
},
|
|
{
|
|
key: 'total_amount',
|
|
label: 'Total Uang',
|
|
icon: CircleDollarSign,
|
|
color: 'bg-purple-100',
|
|
iconColor: 'text-purple-600',
|
|
format: formatCurrency,
|
|
},
|
|
{
|
|
key: 'net_total',
|
|
label: 'Total Bersih',
|
|
icon: TrendingUp,
|
|
color: 'bg-sky-100',
|
|
iconColor: 'text-sky-600',
|
|
format: formatCurrency,
|
|
},
|
|
] as const;
|
|
|
|
export function TransactionSummaryCard({ summary }: TransactionSummaryCardProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 lg:grid-cols-5">
|
|
{summaryItems.map((item) => (
|
|
<Card key={item.key}>
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<div
|
|
className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${item.color}`}
|
|
>
|
|
<item.icon className={`h-5 w-5 ${item.iconColor}`} />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{item.label}
|
|
</p>
|
|
<p className="text-lg font-bold">
|
|
{item.format(summary[item.key] as number)}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|