feat: render hourly investment states

src/pages/accounts/ui/AccountsPage/components/AccountsPageLoaded.view.tsx

@@ -1,45 +1,24 @@
 import type { FC } from "react";
 
-import { Badge, Button, Stack, Text, Title } from "@mantine/core";
+import { Button, Stack, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
+import type { InvestmentResourceMeta } from "@/shared/api";
+
 import {
 	type BrokerageAccountCard,
 	BrokerageAccountList,
 } from "@/entities/brokerage-account";
+import { SourceSyncStatus } from "@/shared/ui";
 
 type AccountsPageLoadedProps = {
 	accounts: BrokerageAccountCard[];
-	sync:
-		| null
-		| undefined
-		| {
-			finishedAt: null | string;
-			sections: {
-				accountId?: string;
-				errorCode: null | string;
-				section: string;
-			}[];
-			startedAt: string;
-			state: string;
-		};
+	meta: InvestmentResourceMeta;
 };
 
 const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
-	const sync = props.sync;
-
-	const syncLabel = sync
-		? new Intl.DateTimeFormat("ru-RU", {
-				dateStyle: "short",
-				timeStyle: "short",
-			}).format(new Date(sync.finishedAt ?? sync.startedAt))
-		: null;
-
-	const syncColor = sync?.state === "failed" || sync?.state === "partial"
-		? "red"
-		: "gray";
 
 	return (
 		<Stack gap="lg">
@@ -50,20 +29,11 @@ const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
 					{t("accounts.subtitle")}
 				</Text>
 
-				{sync && (
-					<Text c="dimmed" size="xs">
-						Последний обход:
-						{" "}
-						{syncLabel}
-						{" "}
-						<Badge
-							color={syncColor}
-							size="xs"
-						>
-							{sync.state}
-						</Badge>
-					</Text>
-				)}
+				<SourceSyncStatus
+					lastAttempt={props.meta.lastAttempt}
+					lastSuccessfulAt={props.meta.lastSuccessfulAt}
+					stale={props.meta.freshness === "stale"}
+				/>
 			</Stack>
 
 			<Button