Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5
2026-07-30 06:11:24 +00:00
parent 5476c1bab5
commit da158cfd84
114 changed files with 26045 additions and 2 deletions
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import styles from './DashboardScreen.module.scss';
+import { ApprovalRouteApi } from '../../services/api';
+import { ScreenKey } from '../app/types';
+import { texts } from '../../texts';
+import { useRequestTypes } from '../../hooks/useRequestTypes';
+import { useTemplateRoutes } from '../../hooks/useTemplateRoutes';
+import { AsyncList } from '../../hooks/useAsyncList';
+import { CardGrid, NavCard, StatCard, StatRow } from '../ui';
+
+export interface IDashboardScreenProps {
+  api: ApprovalRouteApi;
+  onNavigate: (key: ScreenKey) => void;
+}
+
+// Пока список грузится или запрос упал — показываем прочерк, а не «0»,
+// чтобы не соврать пользователю про реальное количество записей.
+function statValue(list: AsyncList<unknown>): React.ReactNode {
+  if (list.isLoading || list.error) return texts.common.empty;
+  return list.items.length;
+}
+
+export const DashboardScreen: React.FC<IDashboardScreenProps> = ({ api, onNavigate }) => {
+  const requestTypes = useRequestTypes(api);
+  const routes = useTemplateRoutes(api);
+
+  return (
+    <div>
+      <StatRow>
+        <StatCard label={texts.dashboard.requestTypesStat} value={statValue(requestTypes)} />
+        <StatCard label={texts.dashboard.routesStat} value={statValue(routes)} />
+      </StatRow>
+
+      <div className={styles.sectionsLabel}>{texts.dashboard.sections}</div>
+      <hr className={styles.sectionsDivider} />
+      <CardGrid>
+        <NavCard
+          icon="clipboard"
+          title={texts.dashboard.requestTypesCard.title}
+          description={texts.dashboard.requestTypesCard.description}
+          onClick={() => onNavigate('requestTypes')}
+        />
+        <NavCard
+          icon="route"
+          title={texts.dashboard.routesCard.title}
+          description={texts.dashboard.routesCard.description}
+          onClick={() => onNavigate('routes')}
+        />
+        <NavCard
+          icon="search"
+          title={texts.dashboard.resolveCard.title}
+          description={texts.dashboard.resolveCard.description}
+          onClick={() => onNavigate('resolve')}
+        />
+      </CardGrid>
+    </div>
+  );
+};