chore: save pending changes

src/pages/card/ui/CardPage.view.tsx

@@ -1,7 +1,6 @@
 import {
 	ActionIcon,
 	Anchor,
-	Badge,
 	Button,
 	Group,
 	Paper,
@@ -15,11 +14,11 @@ import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import {
+	BankCardFace,
 	BankFeedback,
 	BankOperationIcon,
 	BankSummaryView,
 } from "@/entities/bank-card";
-import { formatMoney } from "@/shared/lib";
 import { EntryCard, LoadingSkeleton, StateView } from "@/shared/ui";
 import classes from "./CardPage.module.css";
 import type { CardPageVm } from "./CardPage.vm";
@@ -65,21 +64,10 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
 		<Stack gap="lg">
 			<Paper p="md" withBorder>
 				<Stack>
-					<Group justify="space-between">
-						<Title order={1} className={classes.wrap}>
-							{card.name}
-						</Title>
-						{card.archivedAt && (
-							<Badge color="gray">{t("bank.archived")}</Badge>
-						)}
-					</Group>
-					<Text c="dimmed">
-						{card.bankName}
-						{card.lastFour ? ` · •• ${card.lastFour}` : ""}
-					</Text>
-					<Text size="xl" fw={700} className={classes.wrap}>
-						{formatMoney(card.balance)}
-					</Text>
+					<Title order={1} className={classes.wrap}>
+						{card.name}
+					</Title>
+					<BankCardFace card={card} />
 					<Text c="dimmed">{t("bank.manualBalance")}</Text>
 					<Group>
 						<Button

src/pages/card/ui/OperationForm.test.tsx

@@ -21,6 +21,7 @@ const card: BankCard = {
 	name: "Повседневная",
 	bankName: null,
 	lastFour: null,
+	paymentSystem: null,
 	balance: money("0"),
 	openingBalance: money("0"),
 	openingDate: "2026-01-01",

src/pages/cards/ui/CardsPage.module.css

@@ -2,6 +2,9 @@
 	text-decoration: none;
 	color: inherit;
 	min-width: 0;
+	max-width: 28rem;
+	border-radius: 1.25rem;
+	background: transparent;
 	overflow-wrap: anywhere;
 }
 .card:focus-visible {

src/pages/cards/ui/CardsPage.view.tsx

@@ -1,5 +1,4 @@
 import {
-	Badge,
 	Button,
 	Group,
 	Paper,
@@ -14,8 +13,11 @@ import { MonthPickerInput } from "@mantine/dates";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import { BankFeedback, BankSummaryView } from "@/entities/bank-card";
-import { formatMoney } from "@/shared/lib";
+import {
+	BankCardFace,
+	BankFeedback,
+	BankSummaryView,
+} from "@/entities/bank-card";
 import { LoadingSkeleton, StateView } from "@/shared/ui";
 import classes from "./CardsPage.module.css";
 import type { CardsPageVm } from "./CardsPage.vm";
@@ -44,27 +46,10 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 								key={card.id}
 								component={Link}
 								to={card.to}
-								withBorder
-								p="md"
+								p={0}
 								className={classes.card}
 							>
-								<Stack gap="xs">
-									<Group>
-										<Text fw={600} size="lg">
-											{card.name}
-										</Text>
-										{card.archivedAt && (
-											<Badge color="gray">{t("bank.archived")}</Badge>
-										)}
-									</Group>
-									<Text c="dimmed">
-										{card.bankName}
-										{card.lastFour ? ` · •• ${card.lastFour}` : ""}
-									</Text>
-									<Text size="xl" fw={650}>
-										{formatMoney(card.balance)}
-									</Text>
-								</Stack>
+								<BankCardFace card={card} />
 							</Paper>
 						))}
 					</SimpleGrid>
@@ -82,8 +67,8 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 			) : vm.cards.isLoading ? (
 				<LoadingSkeleton label={t("bank.loading")}>
 					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						<Skeleton h={120} />
-						<Skeleton h={120} />
+						<Skeleton h={250} />
+						<Skeleton h={250} />
 					</SimpleGrid>
 				</LoadingSkeleton>
 			) : null}