105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import { Button, Card, Group, Stack, Text, Title } from "@mantine/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useParams } from "react-router";
|
|
import {
|
|
type BrokerageEvent,
|
|
useBrokerageEvents,
|
|
} from "@/entities/brokerage-event";
|
|
import { formatMoney } from "@/entities/portfolio";
|
|
import { StateView } from "@/shared/ui";
|
|
|
|
export function AccountEventsPage() {
|
|
const { accountId } = useParams();
|
|
const events = useBrokerageEvents(accountId);
|
|
if (events.isLoading) return <AccountEventsPageLoading />;
|
|
if (events.isError)
|
|
return <AccountEventsPageError retry={() => events.refetch()} />;
|
|
if (!events.data) return <AccountEventsPageLoading />;
|
|
if (!events.data.events.length) return <AccountEventsPageEmpty />;
|
|
return <AccountEventsPageLoaded events={events.data.events} />;
|
|
}
|
|
|
|
function AccountEventsPageLoading() {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StateView
|
|
loading
|
|
title={t("states.loadingTitle")}
|
|
text={t("states.loadingText")}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function AccountEventsPageError({ retry }: { retry: () => void }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<StateView
|
|
error
|
|
title={t("events.errorTitle")}
|
|
text={t("events.errorText")}
|
|
action={<Button onClick={retry}>{t("events.retry")}</Button>}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function AccountEventsPageEmpty() {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Stack maw={960} gap="lg">
|
|
<Title order={1}>{t("events.title")}</Title>
|
|
<Text c="dimmed">{t("events.hint")}</Text>
|
|
<StateView title={t("events.emptyTitle")} text={t("events.emptyText")} />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function AccountEventsPageLoaded({ events }: { events: BrokerageEvent[] }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Stack maw={960} gap="lg">
|
|
<Title order={1}>{t("events.title")}</Title>
|
|
<Text c="dimmed">{t("events.hint")}</Text>
|
|
{events.map((event) => (
|
|
<AccountEventRow
|
|
event={event}
|
|
key={`${event.type}-${event.date}-${event.ticker}`}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function AccountEventRow({ event }: { event: BrokerageEvent }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Card withBorder>
|
|
<Group justify="space-between" align="flex-start" wrap="wrap">
|
|
<Stack gap={2}>
|
|
<Text fw={700}>{event.displayName}</Text>
|
|
<Text c="dimmed" size="sm">
|
|
{formatCalendarDate(event.date)} ·{" "}
|
|
{t(`events.dateKind.${event.dateKind}`)}
|
|
</Text>
|
|
</Stack>
|
|
<Stack gap={2} align="flex-end">
|
|
<Text fw={700}>
|
|
{event.amount && event.currency
|
|
? formatMoney({ currency: event.currency, value: event.amount })
|
|
: t("events.noAmount")}
|
|
</Text>
|
|
<Text c="dimmed" size="sm">
|
|
{t(`events.type.${event.type}`)}
|
|
</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function formatCalendarDate(date: string) {
|
|
return new Intl.DateTimeFormat("ru-RU", {
|
|
dateStyle: "medium",
|
|
timeZone: "UTC",
|
|
}).format(new Date(`${date}T00:00:00Z`));
|
|
}
|