60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import type { AnalyticsSummaryResponse } from '@family-budget/shared';
|
||
import { formatAmount } from '../utils/format';
|
||
|
||
interface Props {
|
||
summary: AnalyticsSummaryResponse;
|
||
}
|
||
|
||
export function SummaryCards({ summary }: Props) {
|
||
return (
|
||
<div className="summary-cards">
|
||
<div className="summary-card summary-card-income">
|
||
<div className="summary-label">Доходы</div>
|
||
<div className="summary-value">
|
||
{formatAmount(summary.totalIncome)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="summary-card summary-card-expense">
|
||
<div className="summary-label">Расходы</div>
|
||
<div className="summary-value">
|
||
{formatAmount(summary.totalExpense)}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`summary-card ${summary.net >= 0 ? 'summary-card-positive' : 'summary-card-negative'}`}
|
||
>
|
||
<div className="summary-label">Баланс</div>
|
||
<div className="summary-value">
|
||
{formatAmount(summary.net)}
|
||
</div>
|
||
</div>
|
||
|
||
{summary.topCategories.length > 0 && (
|
||
<div className="summary-card summary-card-top">
|
||
<div className="summary-label">Топ расходов</div>
|
||
<div className="summary-top-list">
|
||
{summary.topCategories.map((cat) => (
|
||
<div
|
||
key={cat.categoryId}
|
||
className="top-category-item"
|
||
>
|
||
<span className="top-category-name">
|
||
{cat.categoryName}
|
||
</span>
|
||
<span className="top-category-amount">
|
||
{formatAmount(cat.amount)}
|
||
</span>
|
||
<span className="top-category-share">
|
||
{(cat.share * 100).toFixed(0)}%
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|