From 20b2cdfd432f8b01e447f68657cf5c685a297f1e Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Fri, 9 Oct 2026 16:04:41 +0300
Subject: [PATCH] fix: show bank summary totals

---
 .../ui/BankSummary/BankSummary.module.css     | 22 ++++++++++++
 .../ui/BankSummary/BankSummary.view.test.tsx  | 35 +++++++++++++++++++
 .../ui/BankSummary/BankSummary.view.tsx       | 28 +++++++++++++--
 3 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 src/entities/bank-card/ui/BankSummary/BankSummary.view.test.tsx

diff --git a/src/entities/bank-card/ui/BankSummary/BankSummary.module.css b/src/entities/bank-card/ui/BankSummary/BankSummary.module.css
index 0944833..8aea161 100644
--- a/src/entities/bank-card/ui/BankSummary/BankSummary.module.css
+++ b/src/entities/bank-card/ui/BankSummary/BankSummary.module.css
@@ -15,6 +15,28 @@
 	min-width: 0;
 }
 
+.totals {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
+	margin: 0;
+}
+
+.totals > div {
+	display: grid;
+	gap: 0;
+}
+
+.totals dt {
+	color: var(--mantine-color-dimmed);
+	font-size: var(--mantine-font-size-xs);
+}
+
+.totals dd {
+	margin: 0;
+	font-variant-numeric: tabular-nums;
+}
+
 .categories {
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
diff --git a/src/entities/bank-card/ui/BankSummary/BankSummary.view.test.tsx b/src/entities/bank-card/ui/BankSummary/BankSummary.view.test.tsx
new file mode 100644
index 0000000..9594f96
--- /dev/null
+++ b/src/entities/bank-card/ui/BankSummary/BankSummary.view.test.tsx
@@ -0,0 +1,35 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { BankSummaryView } from "./BankSummary.view";
+
+const money = (value: string) => ({ currency: "RUB", value });
+
+describe("BankSummaryView", () => {
+	it("shows expenses, refunds, and net monthly totals", () => {
+		render(
+			<MantineProvider env="test">
+				<BankSummaryView
+					data={{
+						cardId: "card-1",
+						categories: [],
+						expenses: money("1000"),
+						net: money("800"),
+						refunds: money("200"),
+					}}
+					error={false}
+					fetching={false}
+					loading={false}
+				/>
+			</MantineProvider>,
+		);
+
+		expect(screen.getAllByText("Расходы")).toHaveLength(2);
+		expect(screen.getByText("Возвращено")).toBeInTheDocument();
+		expect(screen.getByText("После возвратов")).toBeInTheDocument();
+		expect(screen.getByText("1 000,00 ₽")).toBeInTheDocument();
+		expect(screen.getByText("200,00 ₽")).toBeInTheDocument();
+		expect(screen.getByText("800,00 ₽")).toBeInTheDocument();
+	});
+});
diff --git a/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx b/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx
index 52fccc6..ffd3e4f 100644
--- a/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx
+++ b/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx
@@ -92,9 +92,31 @@ const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
 				</Title>
 
 				{props.data && (
-					<Text className={classes.total}>
-						{formatMoney(props.data.net, { withZeroCents: true })}
-					</Text>
+					<dl className={classes.totals}>
+						<div>
+							<dt>{t("bank.summary")}</dt>
+
+							<dd>
+								{formatMoney(props.data.expenses, { withZeroCents: true })}
+							</dd>
+						</div>
+
+						<div>
+							<dt>{t("bank.refunds")}</dt>
+
+							<dd>
+								{formatMoney(props.data.refunds, { withZeroCents: true })}
+							</dd>
+						</div>
+
+						<div>
+							<dt>{t("bank.net")}</dt>
+
+							<dd className={classes.total}>
+								{formatMoney(props.data.net, { withZeroCents: true })}
+							</dd>
+						</div>
+					</dl>
 				)}
 			</div>