refactor: simplify auth and instrument pages

2026-09-29 05:45:08 +03:00
parent 32a77860c8
commit b404c1802a
38 changed files with 644 additions and 790 deletions
@@ -0,0 +1,223 @@
+import type { FC } from "react";
+
+import {
+	Accordion,
+	Alert,
+	Badge,
+	Group,
+	Paper,
+	Stack,
+	Text,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import type { StockDividends as Dividends } from "@/entities/stock";
+
+import { InstrumentSection, type SectionState } from "@/features/instrument-details";
+import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
+
+import classes from "../StockPage.module.css";
+
+type StockDividendsProps = {
+	dividends?: Dividends;
+	pastDividends: Dividends["dividends"];
+	state: SectionState;
+	upcoming: Dividends["dividends"];
+};
+
+const StockDividends: FC<StockDividendsProps> = (props) => {
+	const { dividends, pastDividends, state, upcoming } = props;
+	const { t } = useTranslation();
+
+	let upcomingContent;
+
+	if (dividends) {
+		if (upcoming.length > 0) {
+			upcomingContent = (
+				upcoming.map(event => (
+					<div
+						className={classes.dividend}
+						key={JSON.stringify([
+							event.recordDate,
+							event.paymentDate,
+							event.perShare,
+						])}
+					>
+						<Group align="start" justify="space-between">
+							<div>
+								<Badge color="green" variant="light">
+									{t("stock.companyEvent")}
+								</Badge>
+
+								<Text fw={650} mt="xs" size="xl">
+									{formatMoney(event.perShare)}
+									{" "}
+									<Text c="dimmed" component="span" size="sm">
+										{t("stock.perShare")}
+									</Text>
+								</Text>
+							</div>
+
+							{!!event.estimatedAmount && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.yourEstimate")}
+									</Text>
+
+									<Text fw={600}>
+										{formatMoney(event.estimatedAmount)}
+									</Text>
+								</div>
+							)}
+						</Group>
+
+						<Group gap="xl" mt="md">
+							{!!event.lastBuyDate && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.lastBuy")}
+									</Text>
+
+									<Text>{formatDate(event.lastBuyDate)}</Text>
+								</div>
+							)}
+
+							{!!event.recordDate && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.record")}
+									</Text>
+
+									<Text>{formatDate(event.recordDate)}</Text>
+								</div>
+							)}
+
+							{!!event.paymentDate && (
+								<div>
+									<Text c="dimmed" size="xs">
+										{t("stock.payment")}
+									</Text>
+
+									<Text>{formatDate(event.paymentDate)}</Text>
+								</div>
+							)}
+						</Group>
+					</div>
+				))
+			);
+		}
+		else {
+			upcomingContent = (
+				<Text c="dimmed">
+					{t("stock.noUpcoming", { to: formatDate(dividends.to) })}
+				</Text>
+			);
+		}
+	}
+
+	let pastDividendsContent;
+
+	if (pastDividends.length > 0) {
+		pastDividendsContent = (
+			<Stack gap="sm">
+				{pastDividends.map(event => (
+					<Paper
+						key={JSON.stringify([
+							event.recordDate,
+							event.paymentDate,
+							event.perShare,
+						])}
+						p="md"
+						radius="md"
+						withBorder
+					>
+						<Group align="start" justify="space-between">
+							<div>
+								<Text c="dimmed" size="xs">
+									{t("stock.record")}
+								</Text>
+
+								<Text fw={600}>
+									{event.recordDate
+										? formatDate(event.recordDate)
+										: t("stock.dateUnknown")}
+								</Text>
+
+								{!!event.paymentDate && (
+									<Text c="dimmed" mt="xs" size="xs">
+										{t("stock.payment")}:{" "}
+										{formatDate(event.paymentDate)}
+									</Text>
+								)}
+							</div>
+
+							<div>
+								<Text fw={650} size="lg">
+									{formatMoney(event.perShare)}
+								</Text>
+
+								<Text c="dimmed" size="xs">
+									{t("stock.perShare")}
+								</Text>
+							</div>
+						</Group>
+					</Paper>
+				))}
+			</Stack>
+		);
+	}
+	else {
+		pastDividendsContent = <Text c="dimmed">{t("stock.noDividends")}</Text>;
+	}
+
+	return (
+		<InstrumentSection state={state} title={t("stock.upcoming")}>
+			{!!dividends && (
+				<Stack gap="md">
+					{!!(
+						dividends.estimateUnavailable || dividends.positionIsStale
+					) && (
+						<Alert aria-live="polite" color="orange" role="status">
+							{t("stock.estimateUnavailable")}
+						</Alert>
+					)}
+
+					{upcomingContent}
+
+					<Text c="dimmed" size="xs">
+						{t("stock.dividendNote")}
+					</Text>
+
+					{!!dividends.positionAt && (
+						<Text c="dimmed" size="xs">
+							{t("stock.snapshotAt", {
+								date: formatSnapshotTime(dividends.positionAt),
+							})}
+						</Text>
+					)}
+
+					<Accordion radius="md" variant="contained">
+						<Accordion.Item value="history">
+							<Accordion.Control>
+								<Text fw={600}>{t("stock.dividendHistory")}</Text>
+							</Accordion.Control>
+
+							<Accordion.Panel>
+								<Text c="dimmed" my="sm" size="xs">
+									{t("stock.dividendWindow", {
+										from: formatDate(dividends.from),
+										to: formatDate(dividends.to),
+									})}
+								</Text>
+
+								{pastDividendsContent}
+							</Accordion.Panel>
+						</Accordion.Item>
+					</Accordion>
+				</Stack>
+			)}
+		</InstrumentSection>
+	);
+};
+
+export { StockDividends };