59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Stack } from "@mantine/core";
|
|
import { StateView } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { BrokerageAccount } from "@/entities/brokerage-account";
|
|
|
|
import { BrokerageEventsPreview } from "@/entities/brokerage-event";
|
|
import { PortfolioStructure } from "@/widgets/portfolio-structure";
|
|
|
|
import type {
|
|
AccountPageIncomeSummary,
|
|
AccountPageRecentEvents,
|
|
AccountPageRecentOperations,
|
|
} from "../../../model/previews";
|
|
|
|
import { AccountHeading } from "./AccountHeading.view";
|
|
import { IncomeSummary } from "./IncomeSummary.view";
|
|
import { RecentOperations } from "./RecentOperations.view";
|
|
|
|
type AccountPageEmptyProps = {
|
|
account?: BrokerageAccount;
|
|
accountId?: string;
|
|
incomeSummary?: AccountPageIncomeSummary;
|
|
recentEvents: AccountPageRecentEvents;
|
|
recentOperations: AccountPageRecentOperations;
|
|
};
|
|
|
|
const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
const text = t(
|
|
props.accountId === "all"
|
|
? "portfolio.allEmptyText"
|
|
: "portfolio.emptyText",
|
|
);
|
|
|
|
return (
|
|
<Stack>
|
|
<AccountHeading account={props.account} accountId={props.accountId} />
|
|
|
|
<StateView text={text} title={t("portfolio.emptyTitle")} />
|
|
|
|
<PortfolioStructure
|
|
structure={{ currencies: [], unvaluedCategories: [] }}
|
|
/>
|
|
|
|
<RecentOperations operations={props.recentOperations} />
|
|
|
|
<BrokerageEventsPreview events={props.recentEvents} />
|
|
|
|
{!!props.incomeSummary && <IncomeSummary {...props.incomeSummary} />}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { AccountPageEmpty };
|