feat: creats frontend for the project

frontend/src/components/SummaryCards.tsx

@@ -0,0 +1,59 @@
+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>
+  );
+}