fix: show bank summary totals

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));

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();
+	});
+});

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>