feat(accounts): enrich brokerage account list

src/entities/brokerage-account/ui/BrokerageAccountList.tsx

@@ -1,20 +1,59 @@
-import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Card, Group, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import type { BrokerageAccount } from "../api/useBrokerageAccounts";
+import { formatMoney } from "@/entities/portfolio";
+import type { BrokerageAccountCard } from "../model/display";
 import { accountTypeKey } from "../model/display";
 import classes from "./BrokerageAccountList.module.css";
 
-type BrokerageAccountListProps = { accounts: BrokerageAccount[] };
+type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };
+
+type BrokerageAccountSummaryProps = {
+	summary: BrokerageAccountCard["summary"];
+};
+
+const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
+	const { summary } = props;
+	const { t } = useTranslation();
+	if (summary.state === "unavailable")
+		return (
+			<Text c="dimmed" size="sm">
+				{t("accounts.summaryUnavailable")}
+			</Text>
+		);
+	if (summary.state === "empty")
+		return (
+			<Text c="dimmed" size="sm">
+				{t("accounts.summaryEmpty")}
+			</Text>
+		);
+
+	return (
+		<Group className={classes.summary} gap="sm" wrap="wrap">
+			{summary.totals.map((total) => (
+				<Text className={classes.total} fw={700} key={total.currency}>
+					{formatMoney(total)}
+				</Text>
+			))}
+			{summary.remainingCurrencyCount ? (
+				<Text c="dimmed" size="sm">
+					{t("accounts.remainingCurrencies", {
+						count: summary.remainingCurrencyCount,
+					})}
+				</Text>
+			) : null}
+		</Group>
+	);
+};
 
 const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 	const { accounts } = props;
 	const { t } = useTranslation();
 
 	return (
-		<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-			{accounts.map((account) => (
+		<Stack className={classes.list} gap="md">
+			{accounts.map(({ account, summary }) => (
 				<Card
 					component={Link}
 					to={`/accounts/${account.id}`}
@@ -31,6 +70,7 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 						<Text fw={800} size="lg">
 							{account.name}
 						</Text>
+						<BrokerageAccountSummary summary={summary} />
 						{account.openedOn ? (
 							<Text c="dimmed" size="sm">
 								{t("accounts.openedOn", {
@@ -41,10 +81,13 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
 								})}
 							</Text>
 						) : null}
+						<Text className={classes.open} size="sm" fw={700}>
+							{t("accounts.openAccount")}
+						</Text>
 					</Stack>
 				</Card>
 			))}
-		</SimpleGrid>
+		</Stack>
 	);
 };