feat: improve ledger event rows

src/entities/broker-operation/index.ts

@@ -4,3 +4,4 @@ export {
 	operationCategories,
 	useBrokerageOperations,
 } from "./api/useBrokerageOperations";
+export { LedgerEntryRow } from "./ui/LedgerEntryRow";

src/entities/broker-operation/ui/LedgerEntryRow.module.css

@@ -0,0 +1,42 @@
+.row {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	gap: var(--mantine-spacing-sm);
+	align-items: center;
+	padding: var(--mantine-spacing-md);
+	border-color: var(--mantine-color-gray-3);
+	background: var(--mantine-color-gray-0);
+}
+
+.identity,
+.amount {
+	min-width: 0;
+}
+
+.amount {
+	text-align: right;
+	white-space: nowrap;
+}
+
+.positive {
+	color: var(--mantine-color-green-6);
+}
+
+.negative {
+	color: var(--mantine-color-red-6);
+}
+
+.neutral {
+	color: var(--mantine-color-dimmed);
+}
+
+@media (max-width: 36em) {
+	.row {
+		grid-template-columns: auto minmax(0, 1fr);
+	}
+
+	.amount {
+		grid-column: 2;
+		text-align: left;
+	}
+}

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

@@ -0,0 +1,100 @@
+import { Avatar, Paper, Stack, Text } from "@mantine/core";
+import type { FC } from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	formatMoney,
+	formatSnapshotTime,
+	instrumentLogoUrl,
+} from "@/entities/portfolio";
+import type { BrokerageOperation } from "../api/useBrokerageOperations";
+import classes from "./LedgerEntryRow.module.css";
+
+type LedgerEntryRowProps = {
+	operation: BrokerageOperation;
+};
+
+type PaymentPresentation = {
+	amount: string;
+	direction: "incoming" | "outgoing" | "neutral";
+	tone: "positive" | "negative" | "neutral";
+};
+
+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,
+		t(`ledger.category.${operation.category}`),
+	].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(`ledger.direction.${payment.direction}`)}
+				</Text>
+			</Stack>
+		</Paper>
+	);
+};
+
+function paymentPresentation(
+	operation: BrokerageOperation,
+): PaymentPresentation {
+	if (!operation.payment)
+		return { amount: "—", direction: "neutral", tone: "neutral" };
+	if (isZeroDecimal(operation.payment.value))
+		return {
+			amount: formatMoney(operation.payment),
+			direction: "neutral",
+			tone: "neutral",
+		};
+	if (operation.payment.value.startsWith("-"))
+		return {
+			amount: `−${formatMoney({
+				...operation.payment,
+				value: operation.payment.value.slice(1),
+			})}`,
+			direction: "outgoing",
+			tone: "negative",
+		};
+	return {
+		amount: `+${formatMoney(operation.payment)}`,
+		direction: "incoming",
+		tone: "positive",
+	};
+}
+
+function isZeroDecimal(value: string): boolean {
+	return /^-?0(?:\.0+)?$/.test(value);
+}
+
+export { LedgerEntryRow };