refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,168 @@
+import {
+	Accordion,
+	Alert,
+	Badge,
+	Group,
+	Paper,
+	Stack,
+	Text,
+} from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { InstrumentSection as StockSection } from "@/features/instrument-details";
+import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
+import classes from "../StockPage.module.css";
+import type { StockPageVm } from "../StockPage.vm";
+
+type StockEventsProps = { vm: StockPageVm };
+const StockDividends: FC<StockEventsProps> = (props) => {
+	const { vm } = props;
+	const { t } = useTranslation();
+	return (
+		<StockSection title={t("stock.upcoming")} state={vm.dividendsState}>
+			{vm.dividends ? (
+				<Stack gap="md">
+					{vm.dividends.estimateUnavailable || vm.dividends.positionIsStale ? (
+						<Alert color="orange">{t("stock.estimateUnavailable")}</Alert>
+					) : null}
+					{vm.upcoming.length ? (
+						vm.upcoming.map((event) => (
+							<div
+								className={classes.dividend}
+								key={JSON.stringify([
+									event.recordDate,
+									event.paymentDate,
+									event.perShare,
+								])}
+							>
+								<Group justify="space-between" align="start">
+									<div>
+										<Badge color="green" variant="light">
+											{t("stock.companyEvent")}
+										</Badge>
+										<Text size="xl" fw={650} mt="xs">
+											{formatMoney(event.perShare)}{" "}
+											<Text component="span" size="sm" c="dimmed">
+												{t("stock.perShare")}
+											</Text>
+										</Text>
+									</div>
+									{event.estimatedAmount ? (
+										<div>
+											<Text size="xs" c="dimmed">
+												{t("stock.yourEstimate")}
+											</Text>
+											<Text fw={600}>{formatMoney(event.estimatedAmount)}</Text>
+										</div>
+									) : null}
+								</Group>
+								<Group gap="xl" mt="md">
+									{event.lastBuyDate ? (
+										<div>
+											<Text size="xs" c="dimmed">
+												{t("stock.lastBuy")}
+											</Text>
+											<Text>{formatDate(event.lastBuyDate)}</Text>
+										</div>
+									) : null}
+									{event.recordDate ? (
+										<div>
+											<Text size="xs" c="dimmed">
+												{t("stock.record")}
+											</Text>
+											<Text>{formatDate(event.recordDate)}</Text>
+										</div>
+									) : null}
+									{event.paymentDate ? (
+										<div>
+											<Text size="xs" c="dimmed">
+												{t("stock.payment")}
+											</Text>
+											<Text>{formatDate(event.paymentDate)}</Text>
+										</div>
+									) : null}
+								</Group>
+							</div>
+						))
+					) : (
+						<Text c="dimmed">
+							{t("stock.noUpcoming", { to: formatDate(vm.dividends.to) })}
+						</Text>
+					)}
+					<Text size="xs" c="dimmed">
+						{t("stock.dividendNote")}
+					</Text>
+					{vm.dividends.positionAt ? (
+						<Text size="xs" c="dimmed">
+							{t("stock.snapshotAt", {
+								date: formatSnapshotTime(vm.dividends.positionAt),
+							})}
+						</Text>
+					) : null}
+					<Accordion variant="contained" radius="md">
+						<Accordion.Item value="history">
+							<Accordion.Control>
+								<Text fw={600}>{t("stock.dividendHistory")}</Text>
+							</Accordion.Control>
+							<Accordion.Panel>
+								<Text size="xs" c="dimmed" my="sm">
+									{t("stock.dividendWindow", {
+										from: formatDate(vm.dividends.from),
+										to: formatDate(vm.dividends.to),
+									})}
+								</Text>
+								{vm.pastDividends.length ? (
+									<Stack gap="sm">
+										{vm.pastDividends.map((event) => (
+											<Paper
+												key={JSON.stringify([
+													event.recordDate,
+													event.paymentDate,
+													event.perShare,
+												])}
+												withBorder
+												p="md"
+												radius="md"
+											>
+												<Group justify="space-between" align="start">
+													<div>
+														<Text size="xs" c="dimmed">
+															{t("stock.record")}
+														</Text>
+														<Text fw={600}>
+															{event.recordDate
+																? formatDate(event.recordDate)
+																: t("stock.dateUnknown")}
+														</Text>
+														{event.paymentDate ? (
+															<Text size="xs" c="dimmed" mt="xs">
+																{t("stock.payment")}:{" "}
+																{formatDate(event.paymentDate)}
+															</Text>
+														) : null}
+													</div>
+													<div>
+														<Text fw={650} size="lg">
+															{formatMoney(event.perShare)}
+														</Text>
+														<Text size="xs" c="dimmed">
+															{t("stock.perShare")}
+														</Text>
+													</div>
+												</Group>
+											</Paper>
+										))}
+									</Stack>
+								) : (
+									<Text c="dimmed">{t("stock.noDividends")}</Text>
+								)}
+							</Accordion.Panel>
+						</Accordion.Item>
+					</Accordion>
+				</Stack>
+			) : null}
+		</StockSection>
+	);
+};
+
+export { StockDividends };