139 lines
4.0 KiB
TypeScript
139 lines
4.0 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Accordion, Alert, Stack } from "@mantine/core";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { BrokerageAccount } from "@/entities/brokerage-account";
|
|
import type { Portfolio } from "@/entities/portfolio";
|
|
import type { InvestmentResourceMeta } from "@/shared/api";
|
|
|
|
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
|
|
import { SourceSyncStatus } from "@/shared/ui";
|
|
import { PortfolioStructure } from "@/widgets/portfolio-structure";
|
|
|
|
import type { AccountPagePositionSection } from "../../../model/positions";
|
|
import type {
|
|
AccountPageIncomeSummary,
|
|
AccountPageRecentEvents,
|
|
AccountPageRecentOperations,
|
|
} from "../../../model/previews";
|
|
|
|
import classes from "../AccountPage.module.css";
|
|
import { AccountHeading } from "./AccountHeading.view";
|
|
import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
|
|
import { IncomeSummary } from "./IncomeSummary.view";
|
|
import { PositionSection } from "./PositionSection.view";
|
|
import { RecentOperations } from "./RecentOperations.view";
|
|
|
|
type AccountPageLoadedProps = {
|
|
account?: BrokerageAccount;
|
|
accountId?: string;
|
|
incomeSummary?: AccountPageIncomeSummary;
|
|
partial?: boolean;
|
|
portfolio: Portfolio;
|
|
positionSections: AccountPagePositionSection[];
|
|
recentEvents: AccountPageRecentEvents;
|
|
recentOperations: AccountPageRecentOperations;
|
|
source?: InvestmentResourceMeta;
|
|
};
|
|
|
|
const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
const defaultValue = [
|
|
...props.positionSections.map(section => section.kind),
|
|
"cash",
|
|
"recentOperations",
|
|
"recentEvents",
|
|
"incomeSummary",
|
|
];
|
|
|
|
return (
|
|
<Stack gap="lg">
|
|
<AccountHeading account={props.account} accountId={props.accountId} />
|
|
|
|
<SourceSyncStatus
|
|
lastAttempt={props.source?.lastAttempt}
|
|
lastSuccessfulAt={props.source?.lastSuccessfulAt}
|
|
stale={props.source?.freshness === "stale"}
|
|
/>
|
|
|
|
{props.partial
|
|
? <Alert role="status">{t("investment.partial")}</Alert>
|
|
: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}
|
|
|
|
{!props.partial && (
|
|
<PortfolioStructure
|
|
key={props.accountId}
|
|
structure={props.portfolio.structure}
|
|
/>
|
|
)}
|
|
|
|
<Accordion
|
|
classNames={{
|
|
chevron: classes.accordionChevron,
|
|
control: classes.accordionControl,
|
|
label: classes.accordionLabel,
|
|
panel: classes.accordionPanel,
|
|
}}
|
|
defaultValue={defaultValue}
|
|
multiple
|
|
>
|
|
{props.positionSections.map(section => (
|
|
<Accordion.Item key={section.kind} value={section.kind}>
|
|
<Accordion.Control>
|
|
{t(positionSectionTitleKey(section.kind))}
|
|
</Accordion.Control>
|
|
|
|
<Accordion.Panel>
|
|
<PositionSection section={section} />
|
|
</Accordion.Panel>
|
|
</Accordion.Item>
|
|
))}
|
|
|
|
<Accordion.Item value="cash">
|
|
<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control>
|
|
|
|
<Accordion.Panel>
|
|
<CurrencyCards amounts={props.portfolio.cashBalances} />
|
|
</Accordion.Panel>
|
|
</Accordion.Item>
|
|
|
|
<Accordion.Item value="recentOperations">
|
|
<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control>
|
|
|
|
<Accordion.Panel>
|
|
<RecentOperations operations={props.recentOperations} />
|
|
</Accordion.Panel>
|
|
</Accordion.Item>
|
|
|
|
<Accordion.Item value="recentEvents">
|
|
<Accordion.Control>{t("events.recentTitle")}</Accordion.Control>
|
|
|
|
<Accordion.Panel>
|
|
<BrokerageEventsPreview events={props.recentEvents} />
|
|
</Accordion.Panel>
|
|
</Accordion.Item>
|
|
|
|
<Accordion.Item value="incomeSummary">
|
|
<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>
|
|
|
|
<Accordion.Panel>
|
|
{!!props.incomeSummary && (
|
|
<IncomeSummary {...props.incomeSummary} />
|
|
)}
|
|
</Accordion.Panel>
|
|
</Accordion.Item>
|
|
</Accordion>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) {
|
|
if (kind === "stocks") return "portfolio.stocks";
|
|
|
|
return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions";
|
|
}
|
|
|
|
export { AccountPageLoaded };
|