dstpabuaran.com/resources/js/pages/admin/manage/transaction/transaction-summary-card.tsx
Yoga Pangestu 8053ea2db4 feat: Enhance leave request and transaction management with user-specific data
- Added current user ID to leave request index for better context.
- Updated transaction management to include user-specific filters and summaries.
- Enhanced analysis service methods to incorporate user context for attendance and revenue metrics.
- Modified dashboard service to reflect user-specific attendance and financial summaries.
- Implemented role-based access control in leave request service for update and delete actions.
- Adjusted frontend components to utilize user-specific data for leave requests and transactions.
- Removed unused permissions from role seeder for cleaner access control.
2026-08-13 21:08:39 +07:00

92 lines
2.5 KiB
TypeScript

import {
Banknote,
CircleDollarSign,
FileText,
Minus,
Percent,
TrendingUp,
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { formatCurrency } from '@/lib/utils';
type Summary = {
total_orders: number;
total_amount: number;
total_discount: number;
total_deduction: 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_amount',
label: 'Total',
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_deduction',
label: 'Potongan',
icon: Minus,
color: 'bg-orange-100',
iconColor: 'text-orange-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>
);
}