88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { EntryCard } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
formatDate,
|
|
formatMoney,
|
|
instrumentLogoUrl,
|
|
sumMoney,
|
|
totalText,
|
|
} from "@/shared/lib";
|
|
import { AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
|
|
|
|
import type { BrokerageEvent } from "../api/useBrokerageEvents";
|
|
|
|
import { brokerageEventKey } from "../model/event-key";
|
|
|
|
type BrokerageEventGroupProps = {
|
|
events: [BrokerageEvent, BrokerageEvent, ...BrokerageEvent[]];
|
|
totalVisible: boolean;
|
|
};
|
|
|
|
const BrokerageEventGroup: FC<BrokerageEventGroupProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
const [first] = props.events;
|
|
const typeLabel = t(`events.type.${first.type}`);
|
|
|
|
const amounts = props.events.flatMap(event =>
|
|
event.projectedAmount ? [event.projectedAmount] : [],
|
|
);
|
|
|
|
const totals = props.totalVisible && amounts.length === props.events.length
|
|
? sumMoney(amounts)
|
|
: null;
|
|
|
|
const date = formatDate(first.date);
|
|
|
|
const metadata = [
|
|
date,
|
|
first.dateKind === "registry" ? t("events.dateKind.registry") : null,
|
|
].filter(Boolean).join(" · ");
|
|
|
|
const title = `${typeLabel} · ${first.displayName}`;
|
|
const totalsText = totalText(totals, false);
|
|
|
|
const accessibleName = [
|
|
title,
|
|
metadata,
|
|
totalsText || t("entryGroup.totalUnavailable"),
|
|
].join(", ");
|
|
|
|
return (
|
|
<EntryGroup
|
|
header={(
|
|
<EntryCard
|
|
imageSrc={instrumentLogoUrl(first.logoName)}
|
|
initial={(first.ticker.trim()[0] ?? "?").toUpperCase()}
|
|
metadata={metadata}
|
|
title={title}
|
|
tone="neutral"
|
|
value={<EntryGroupTotal totals={totals} />}
|
|
valueLabel={t("payout.forecast")}
|
|
wrap
|
|
/>
|
|
)}
|
|
label={accessibleName}
|
|
>
|
|
{props.events.map((event) => {
|
|
const value = event.projectedAmount
|
|
? formatMoney(event.projectedAmount)
|
|
: t("events.noAmount");
|
|
|
|
return (
|
|
<AccountRow
|
|
accountName={event.account?.name ?? "—"}
|
|
key={brokerageEventKey(event)}
|
|
value={value}
|
|
valueLabel={t("payout.forecast")}
|
|
/>
|
|
);
|
|
})}
|
|
</EntryGroup>
|
|
);
|
|
};
|
|
|
|
export { BrokerageEventGroup };
|