135 lines
3.0 KiB
TypeScript
135 lines
3.0 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import {
|
|
Alert,
|
|
Button,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { DatePickerInput } from "@mantine/dates";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
BrokerageEventCard,
|
|
BrokerageEventGroup,
|
|
brokerageEventGroupKey,
|
|
brokerageEventKey,
|
|
} from "@/entities/brokerage-event";
|
|
import { formatDate, formatSnapshotTime, groupItems } from "@/shared/lib";
|
|
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
|
|
|
|
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
|
|
|
|
import { AccountEventsPageEmpty } from "./AccountEventsPageEmpty.view";
|
|
|
|
type AccountEventsPageLoadedProps = Extract<
|
|
AccountEventsPageViewModel,
|
|
{ state: "loaded" }
|
|
>;
|
|
|
|
const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
|
|
props,
|
|
) => {
|
|
if (props.events.length > 0) {
|
|
const entries = groupItems(
|
|
props.events,
|
|
props.allAccounts ? brokerageEventGroupKey : () => null,
|
|
);
|
|
|
|
return (
|
|
<Stack
|
|
component="ul"
|
|
gap="sm"
|
|
m={0}
|
|
p={0}
|
|
style={{ listStyle: "none" }}
|
|
>
|
|
{entries.map(entry => entry.type === "group"
|
|
? (
|
|
<BrokerageEventGroup
|
|
events={entry.items}
|
|
key={entry.key}
|
|
totalVisible={props.totalVisible}
|
|
/>
|
|
)
|
|
: (
|
|
<li key={brokerageEventKey(entry.item)}>
|
|
<BrokerageEventCard event={entry.item} />
|
|
</li>
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
if (props.partial) {
|
|
return;
|
|
}
|
|
|
|
return <AccountEventsPageEmpty />;
|
|
};
|
|
|
|
const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack gap="lg">
|
|
<Title order={1}>{t("events.title")}</Title>
|
|
|
|
<SourceSyncStatus
|
|
lastAttempt={props.source?.lastAttempt}
|
|
lastSuccessfulAt={props.source?.lastSuccessfulAt}
|
|
stale={props.source?.freshness === "stale"}
|
|
/>
|
|
|
|
<ReadRetry {...props.readRetry} />
|
|
|
|
{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
|
|
|
<Text c="dimmed">{t("events.hint")}</Text>
|
|
|
|
<Text c="dimmed" size="sm">
|
|
{t("events.forecastWindow", {
|
|
date: formatSnapshotTime(props.calculatedAt),
|
|
from: formatDate(props.window.from),
|
|
to: formatDate(props.window.to),
|
|
})}
|
|
</Text>
|
|
|
|
<Group align="end">
|
|
<DatePickerInput
|
|
allowSingleDateInRange
|
|
clearable
|
|
clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
|
|
label={t("ledger.period")}
|
|
minDate={props.minDate}
|
|
onChange={props.onPeriodChange}
|
|
popoverProps={{
|
|
middlewares: { shift: { crossAxis: true } },
|
|
onOpen: props.onPeriodPopoverOpen,
|
|
returnFocus: true,
|
|
}}
|
|
type="range"
|
|
value={props.draftPeriod}
|
|
valueFormat="DD.MM.YYYY"
|
|
/>
|
|
</Group>
|
|
|
|
<Group>
|
|
<Button disabled={!props.canApply} onClick={props.onApply}>
|
|
{t("ledger.apply")}
|
|
</Button>
|
|
|
|
<Button onClick={props.onReset} variant="default">
|
|
{t("ledger.reset")}
|
|
</Button>
|
|
</Group>
|
|
|
|
<AccountEventsPageLoadedEvents {...props} />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { AccountEventsPageLoaded };
|