ksv741
daf1dca666
Reuse account sections and group securities with per-account holdings. Use Mantine Select to preserve filters and reset pagination on scope changes. Document component reuse guardrails and cover routes, grouping and scope switching.
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { Stack } from "@mantine/core";
|
|
import type { FC } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMatch } from "react-router";
|
|
import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
|
|
import { AccountScopeSwitch } from "./AccountScopeSwitch";
|
|
import { BreadcrumbTrail } from "./BreadcrumbTrail";
|
|
|
|
const AppBreadcrumbs: FC = () => {
|
|
const { t } = useTranslation();
|
|
const operations = useMatch({
|
|
path: "/accounts/:accountId/operations",
|
|
end: true,
|
|
});
|
|
const events = useMatch({ path: "/accounts/:accountId/events", end: true });
|
|
const income = useMatch({ path: "/accounts/:accountId/income", end: true });
|
|
const account = useMatch({ path: "/accounts/:accountId", end: true });
|
|
const accounts = useMatch({ path: "/accounts", end: true });
|
|
const settings = useMatch({ path: "/settings", end: true });
|
|
|
|
if (operations)
|
|
return (
|
|
<Stack gap="sm" mb="lg">
|
|
<AccountBreadcrumbs
|
|
accountId={operations.params.accountId ?? ""}
|
|
section="operations"
|
|
/>
|
|
<AccountScopeSwitch
|
|
accountId={operations.params.accountId ?? ""}
|
|
section="operations"
|
|
/>
|
|
</Stack>
|
|
);
|
|
if (events)
|
|
return (
|
|
<Stack gap="sm" mb="lg">
|
|
<AccountBreadcrumbs
|
|
accountId={events.params.accountId ?? ""}
|
|
section="events"
|
|
/>
|
|
<AccountScopeSwitch
|
|
accountId={events.params.accountId ?? ""}
|
|
section="events"
|
|
/>
|
|
</Stack>
|
|
);
|
|
if (income)
|
|
return (
|
|
<Stack gap="sm" mb="lg">
|
|
<AccountBreadcrumbs
|
|
accountId={income.params.accountId ?? ""}
|
|
section="income"
|
|
/>
|
|
<AccountScopeSwitch
|
|
accountId={income.params.accountId ?? ""}
|
|
section="income"
|
|
/>
|
|
</Stack>
|
|
);
|
|
if (account)
|
|
return (
|
|
<Stack gap="sm" mb="lg">
|
|
<AccountBreadcrumbs accountId={account.params.accountId ?? ""} />
|
|
<AccountScopeSwitch accountId={account.params.accountId ?? ""} />
|
|
</Stack>
|
|
);
|
|
if (accounts)
|
|
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
|
|
if (settings)
|
|
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
|
|
return null;
|
|
};
|
|
|
|
export { AppBreadcrumbs };
|