feat: unify upcoming event cards across pages

src/entities/broker-operation/ui/LedgerEntryRow.tsx

@@ -1,11 +1,9 @@
-import { Avatar, Paper, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { formatSnapshotTime, instrumentLogoUrl } from "@/shared/lib";
+import { EntryCard } from "@/shared/ui";
 import type { BrokerageOperation } from "../api/useBrokerageOperations";
 import { paymentPresentation } from "../model/display";
-import classes from "./LedgerEntryRow.module.css";
 
 type LedgerEntryRowProps = {
 	operation: BrokerageOperation;
@@ -14,44 +12,23 @@ type LedgerEntryRowProps = {
 const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
 	const { operation } = props;
 	const { t } = useTranslation();
-	const [imageFailed, setImageFailed] = useState(false);
 	const instrument =
 		operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
-	const logoSrc = imageFailed ? null : instrumentLogoUrl(operation.logoName);
 	const payment = paymentPresentation(operation);
 	const metadata = [formatSnapshotTime(operation.occurredAt), instrument].join(
 		" · ",
 	);
 
 	return (
-		<Paper className={classes.row} withBorder>
-			<Avatar
-				alt=""
-				aria-hidden="true"
-				radius="md"
-				size={40}
-				src={logoSrc}
-				onError={() => setImageFailed(true)}
-			>
-				{(instrument.trim()[0] ?? "?").toUpperCase()}
-			</Avatar>
-			<Stack className={classes.identity} gap={2}>
-				<Text fw={700} lineClamp={1}>
-					{operation.description || operation.type}
-				</Text>
-				<Text c="dimmed" size="sm">
-					{metadata}
-				</Text>
-			</Stack>
-			<Stack className={classes.amount} gap={2}>
-				<Text className={classes[payment.tone]} fw={700}>
-					{payment.amount}
-				</Text>
-				<Text className={classes[payment.tone]} size="sm">
-					{t(payment.label)}
-				</Text>
-			</Stack>
-		</Paper>
+		<EntryCard
+			title={operation.description || operation.type}
+			metadata={metadata}
+			initial={(instrument.trim()[0] ?? "?").toUpperCase()}
+			imageSrc={instrumentLogoUrl(operation.logoName)}
+			value={payment.amount}
+			valueLabel={t(payment.label)}
+			tone={payment.tone}
+		/>
 	);
 };