76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import {
|
|
Alert,
|
|
Stack,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { StateView } from "@wealthledger/ui";
|
|
import { FormProvider } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
|
|
|
|
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
|
|
|
import classes from "../AccountIncomePage.module.css";
|
|
import { IncomePayments } from "./IncomePayments.view";
|
|
import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
|
|
import { IncomeSummary } from "./IncomeSummary.view";
|
|
|
|
type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
|
|
|
|
const AccountIncomePageLoadedSummary: FC<LoadedProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
const { analytics } = props;
|
|
|
|
if (props.partial) {
|
|
return <Alert role="status">{t("investment.partial")}</Alert>;
|
|
}
|
|
|
|
return analytics.totalsByCurrency.length > 0
|
|
? <IncomeSummary totals={analytics.totalsByCurrency} />
|
|
: <StateView text={t("income.emptyText")} title={t("income.emptyTitle")} />;
|
|
};
|
|
|
|
const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
|
const { display, form, onReset, onSubmit } = props;
|
|
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack className={classes.page} gap="lg">
|
|
<Title order={1}>{t("income.title")}</Title>
|
|
|
|
<FormProvider {...form}>
|
|
<IncomePeriodForm
|
|
key={props.formRevision}
|
|
onReset={onReset}
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
/>
|
|
</FormProvider>
|
|
|
|
<SourceSyncStatus
|
|
lastAttempt={props.source?.lastAttempt}
|
|
lastSuccessfulAt={props.source?.lastSuccessfulAt}
|
|
stale={props.source?.freshness === "stale"}
|
|
/>
|
|
|
|
<ReadRetry {...props.readRetry} />
|
|
|
|
<AccountIncomePageLoadedSummary {...props} />
|
|
|
|
<Alert color="blue">{t("income.taxBoundary")}</Alert>
|
|
|
|
<IncomePayments
|
|
allAccounts={props.analytics.accountId === "all"}
|
|
entries={display.entries}
|
|
totalVisible={props.totalVisible}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { AccountIncomePageLoaded };
|