refactor: colocate frontend component files

src/entities/bank-card/ui/BankSummary/BankSummary.module.css

@@ -0,0 +1,64 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: var(--mantine-spacing-xs) var(--mantine-spacing-lg);
+}
+
+.total {
+	font-size: var(--mantine-font-size-xl);
+	font-weight: 650;
+	letter-spacing: -0.025em;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+	min-width: 0;
+}
+
+.categories {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	grid-template-rows: repeat(var(--category-rows), auto);
+	grid-auto-flow: column;
+	column-gap: var(--mantine-spacing-xl);
+	margin: 0;
+}
+
+.category {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--mantine-spacing-md);
+	padding-block: var(--mantine-spacing-sm);
+	border-top: 1px solid var(--mantine-color-gray-3);
+	min-width: 0;
+}
+
+.label {
+	display: flex;
+	align-items: center;
+	gap: var(--mantine-spacing-xs);
+	min-width: 0;
+	font-size: var(--mantine-font-size-sm);
+	overflow-wrap: anywhere;
+}
+
+.amount {
+	flex-shrink: 0;
+	max-width: 60%;
+	margin: 0;
+	font-size: var(--mantine-font-size-sm);
+	font-weight: 600;
+	font-variant-numeric: tabular-nums;
+	text-align: right;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+@media (max-width: 48em) {
+	.categories {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: none;
+		grid-auto-flow: row;
+	}
+}

src/entities/bank-card/ui/BankSummary/BankSummary.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BankSummaryView } from "./BankSummary.view";
+
+const money = (value: string) => ({ currency: "RUB", value });
+const meta = {
+	title: "Product/BankCards/Summary",
+	component: BankSummaryView,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Месячные расходы ручного учёта. Вымышленные суммы, без API и сохранения. Один итог с учётом возвратов и компактные строки категорий. Отрицательные суммы сохраняют знак.",
+			},
+		},
+	},
+	args: {
+		loading: false,
+		error: false,
+		fetching: false,
+		retry: () => {},
+		data: {
+			month: "2026-09",
+			cardId: null,
+			expenses: money("8500"),
+			refunds: money("1000"),
+			net: money("7500"),
+			categories: [
+				{
+					categoryId: "food",
+					categoryName: "Продукты",
+					expenses: money("3500"),
+					refunds: money("1000"),
+					net: money("2500"),
+				},
+				{
+					categoryId: "cafe",
+					categoryName: "Кафе",
+					expenses: money("2200"),
+					refunds: money("0"),
+					net: money("2200"),
+				},
+				{
+					categoryId: "taxi",
+					categoryName: "Такси",
+					expenses: money("1800"),
+					refunds: money("0"),
+					net: money("1800"),
+				},
+				{
+					categoryId: "health",
+					categoryName: "Здоровье",
+					expenses: money("1000"),
+					refunds: money("0"),
+					net: money("1000"),
+				},
+			],
+		},
+	},
+} satisfies Meta<typeof BankSummaryView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Loaded: Story = { name: "Расходы по категориям" };
+export const RefundMonth: Story = {
+	name: "Возврат покупки прошлого месяца",
+	args: {
+		data: {
+			month: "2026-09",
+			cardId: null,
+			expenses: money("0"),
+			refunds: money("600"),
+			net: money("-600"),
+			categories: [
+				{
+					categoryId: "shopping",
+					categoryName:
+						"Покупки с длинным пользовательским названием категории",
+					expenses: money("0"),
+					refunds: money("600"),
+					net: money("-600"),
+				},
+			],
+		},
+	},
+};
+export const Empty: Story = {
+	name: "Известные нули",
+	args: {
+		data: {
+			month: "2026-09",
+			cardId: null,
+			expenses: money("0"),
+			refunds: money("0"),
+			net: money("0"),
+			categories: [],
+		},
+	},
+};
+export const Loading: Story = {
+	name: "Начальная загрузка",
+	args: { data: undefined, loading: true },
+};
+export const Failed: Story = {
+	name: "Ошибка без данных",
+	args: { data: undefined, error: true },
+};
+export const CachedError: Story = {
+	name: "Сохранённые суммы при ошибке обновления",
+	args: { error: true },
+};
+export const LongAmounts: Story = {
+	name: "Точный итог длиннее предела отдельного ввода",
+	args: {
+		data: {
+			month: "2026-09",
+			cardId: null,
+			expenses: money("184467440737095516.14"),
+			refunds: money("0"),
+			net: money("184467440737095516.14"),
+			categories: [
+				{
+					categoryId: "shopping",
+					categoryName: "Покупки",
+					expenses: money("184467440737095516.14"),
+					refunds: money("0"),
+					net: money("184467440737095516.14"),
+				},
+			],
+		},
+	},
+};

src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx

@@ -0,0 +1,86 @@
+import { Button, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import type { CSSProperties, FC } from "react";
+import { useTranslation } from "react-i18next";
+import { formatMoney } from "@/shared/lib";
+import type { BankSummary } from "../../api/queries";
+import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon";
+import classes from "./BankSummary.module.css";
+
+type BankSummaryViewProps = {
+	data?: BankSummary;
+	loading: boolean;
+	error: boolean;
+	fetching: boolean;
+	retry: () => void;
+	all?: boolean;
+};
+const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
+	const { t } = useTranslation();
+	return (
+		<Stack gap="md" aria-busy={props.loading || props.fetching}>
+			<div className={classes.header}>
+				<Title order={2}>
+					{t(props.all ? "bank.allSummary" : "bank.summary")}
+				</Title>
+				{props.data && (
+					<Text className={classes.total}>
+						{formatMoney(props.data.net, { withZeroCents: true })}
+					</Text>
+				)}
+			</div>
+			{props.data ? (
+				props.data.categories.length ? (
+					<dl
+						className={classes.categories}
+						style={
+							{
+								"--category-rows": Math.ceil(props.data.categories.length / 2),
+							} as CSSProperties
+						}
+					>
+						{props.data.categories.map((category) => (
+							<div className={classes.category} key={category.categoryId}>
+								<dt className={classes.label}>
+									<BankOperationIcon
+										kind="expense"
+										categoryName={category.categoryName}
+									/>
+									<span>{category.categoryName}</span>
+								</dt>
+								<dd className={classes.amount}>
+									{formatMoney(category.net, { withZeroCents: true })}
+								</dd>
+							</div>
+						))}
+					</dl>
+				) : (
+					<Text size="sm" c="dimmed">
+						{t("bank.noExpenses")}
+					</Text>
+				)
+			) : props.loading ? (
+				<LoadingSkeleton label={t("bank.loading")}>
+					<Stack gap="sm">
+						<Skeleton h={32} w="35%" />
+						<Skeleton h={40} />
+						<Skeleton h={40} />
+					</Stack>
+				</LoadingSkeleton>
+			) : null}
+			{props.error && (
+				<Group role="alert">
+					<Text>{t(props.data ? "bank.refreshError" : "bank.error")}</Text>
+					<Button variant="default" onClick={props.retry}>
+						{t("bank.retry")}
+					</Button>
+				</Group>
+			)}
+			{props.data && props.fetching && (
+				<Text role="status">{t("bank.refreshing")}</Text>
+			)}
+		</Stack>
+	);
+};
+
+export { BankSummaryView };