frontend/src/components/AppShell.tsx - master - Sturon/Diplom

frontend/src/components/AppShell.tsx
77 строк3 KB
Sturon
Initial
03 июн 2026, 15:01
03 июн 2026, 15:0117b44a2
import { useQuery } from '@tanstack/react-query';
import { type PropsWithChildren } from 'react';
import { NavLink } from 'react-router-dom';
import { api } from '../api';

const navItems = [
  { to: '/', label: 'Точки контроля' },
  { to: '/references', label: 'Эталоны и ROI' },
  { to: '/cameras', label: 'Камеры' },
];

export function AppShell({ children }: PropsWithChildren) {
  const systemStatusQuery = useQuery({
    queryKey: ['system-status'],
    queryFn: api.getSystemStatus,
    refetchInterval: 30000,
  });

  const statusVariant =
    systemStatusQuery.error || systemStatusQuery.data?.status === 'ERROR'
      ? 'error'
      : systemStatusQuery.isLoading
        ? 'pending'
        : 'success';

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="brand-block">
          <div className="logo-placeholder">ТУТ БУДЕТ ЛОГОТИП</div>
        </div>

        <nav className="nav-stack">
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) => `nav-link ${isActive ? 'nav-link-active' : ''}`}
            >
              {item.label}
            </NavLink>
          ))}
        </nav>

        <div className={`sidebar-card sidebar-status-card sidebar-status-${statusVariant}`}>
          <div className="status-card-header">
            <span className={`status-square status-square-${statusVariant}`} />
            <div>
              <p className="eyebrow">Статус проекта</p>
              <strong>
                {systemStatusQuery.error
                  ? 'Обнаружены сбои в работе системы'
                  : (systemStatusQuery.data?.title ?? 'Проверка состояния системы')}
              </strong>
            </div>
          </div>

          {systemStatusQuery.data && (
            <div className="sidebar-status-meta">
              <span>Точек контроля: {systemStatusQuery.data.pointCount}</span>
              <span>Камер: {systemStatusQuery.data.cameraCount}</span>
              <span>Эталонов: {systemStatusQuery.data.referenceCount}</span>
            </div>
          )}
        </div>
      </aside>

      <main className="app-main">
        <header className="topbar">
          <h2>Панель управления точками контроля</h2>
        </header>

        <div className="page-container">{children}</div>
      </main>
    </div>
  );
}