55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import type { StatusAmountMetric } from '../../api/dashboardApi';
|
|
import { formatMoney } from '../../utils/formatters';
|
|
import { StatusBadge } from '../StatusBadge';
|
|
import { Card } from '../ui/Card';
|
|
import { EmptyState } from '../ui/EmptyState';
|
|
|
|
type StatusSummaryTableProps = {
|
|
title: string;
|
|
metrics: StatusAmountMetric[];
|
|
};
|
|
|
|
export function StatusSummaryTable({ title, metrics }: StatusSummaryTableProps) {
|
|
const maxCount = Math.max(...metrics.map((metric) => metric.count), 1);
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<h2 className="text-base font-semibold text-slate-900">{title}</h2>
|
|
{metrics.length === 0 ? (
|
|
<EmptyState title="Данных пока нет" />
|
|
) : (
|
|
<div className="mt-4 overflow-x-auto">
|
|
<table className="min-w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-slate-200 text-left text-slate-500">
|
|
<th className="pb-2 font-medium">Статус</th>
|
|
<th className="pb-2 font-medium">Количество</th>
|
|
<th className="pb-2 font-medium">Сумма</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{metrics.map((metric) => (
|
|
<tr key={metric.status}>
|
|
<td className="py-3">
|
|
<div className="flex min-w-44 items-center gap-3">
|
|
<span className="w-32"><StatusBadge status={metric.status} /></span>
|
|
<span className="h-2 flex-1 overflow-hidden rounded-sm bg-slate-100">
|
|
<span
|
|
className="block h-full rounded-sm bg-slate-800"
|
|
style={{ width: `${Math.max((metric.count / maxCount) * 100, 4)}%` }}
|
|
/>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 text-slate-700">{metric.count}</td>
|
|
<td className="py-3 text-slate-700">{formatMoney(metric.totalAmount)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|