feat: add brocker account list

2026-08-13 20:57:01 +03:00
parent 32e21de17d
commit 6e89c1a8f7
11 changed files with 330 additions and 8 deletions
@@ -0,0 +1,46 @@
+import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import type { BrokerageAccount } from "../api/useBrokerageAccounts";
+import { accountTypeKey } from "../model/display";
+import classes from "./BrokerageAccountList.module.css";
+
+type BrokerageAccountListProps = { accounts: BrokerageAccount[] };
+
+export function BrokerageAccountList({ accounts }: BrokerageAccountListProps) {
+	const { t } = useTranslation();
+	return (
+		<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+			{accounts.map((account) => (
+				<Card
+					component={Link}
+					to={`/accounts/${account.id}`}
+					key={account.id}
+					className={classes.card}
+					padding="lg"
+					radius="lg"
+					withBorder
+				>
+					<Stack gap="xs">
+						<Text className={classes.kicker} size="xs" fw={700}>
+							{t(accountTypeKey(account.type))}
+						</Text>
+						<Text fw={800} size="lg">
+							{account.name}
+						</Text>
+						{account.openedOn ? (
+							<Text c="dimmed" size="sm">
+								{t("accounts.openedOn", {
+									date: new Intl.DateTimeFormat("ru-RU", {
+										dateStyle: "long",
+										timeZone: "UTC",
+									}).format(new Date(`${account.openedOn}T00:00:00Z`)),
+								})}
+							</Text>
+						) : null}
+					</Stack>
+				</Card>
+			))}
+		</SimpleGrid>
+	);
+}