Netpulse_SasS/web/src/App.tsx

import { useEffect, useState, useSyncExternalStore } from 'react'
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
import { api, staticTokenPresent } from './api/client'
import { session } from './api/session'
import { AppShell } from './components/AppShell'
import { LoginPage } from './components/LoginPage'
import { MapPage } from './pages/MapPage'
import { DevicesPage } from './pages/DevicesPage'
import { GroupsPage } from './pages/GroupsPage'
import { TemplatesPage } from './pages/TemplatesPage'
import { CredentialsPage } from './pages/CredentialsPage'
import { ConfigsPage } from './pages/ConfigsPage'
import { AlertsPage } from './pages/AlertsPage'
import { RulesPage } from './pages/RulesPage'
import { ChannelsPage } from './pages/ChannelsPage'
import { AgentsPage } from './pages/AgentsPage'
import { TeamPage } from './pages/TeamPage'
import { ProfilePage } from './pages/ProfilePage'
import type { Permission } from './types'

export default function App() {
  // Сесія живе поза React, бо її читає й шар API. useSyncExternalStore
  // підписує компонент на неї без дублювання стану.
  const me = useSyncExternalStore(session.subscribe, session.me)
  const [booting, setBooting] = useState(true)

  // Після перезавантаження сторінки access-токен зник разом із памʼяттю
  // вкладки, але httpOnly-кукі жива — пробуємо тихо відновити сесію.
  useEffect(() => {
    if (staticTokenPresent) {
      setBooting(false)
      return
    }
    void api.restore().finally(() => setBooting(false))
  }, [])

  if (booting) {
    return (
      <div className="flex h-[100dvh] items-center justify-center bg-slate-950 text-sm text-slate-600">
        Відновлення сесії…
      </div>
    )
  }

  if (!me && !staticTokenPresent) {
    return <LoginPage onDone={() => setBooting(false)} />
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<AppShell />}>
          <Route index element={<Home />} />
          <Route path="/map" element={<Guard perm="maps:read" element={<MapPage />} />} />
          <Route path="/devices" element={<Guard perm="devices:read" element={<DevicesPage />} />} />
          <Route path="/groups" element={<Guard perm="devices:read" element={<GroupsPage />} />} />
          <Route path="/credentials" element={<Guard perm="devices:read" element={<CredentialsPage />} />} />
          <Route path="/templates" element={<Guard perm="devices:read" element={<TemplatesPage />} />} />
          <Route path="/configs" element={<Guard perm="ncm:read" element={<ConfigsPage />} />} />
          <Route path="/alerts" element={<Guard perm="alerts:read" element={<AlertsPage />} />} />
          <Route path="/rules" element={<Guard perm="alerts:read" element={<RulesPage />} />} />
          <Route path="/channels" element={<Guard perm="alerts:read" element={<ChannelsPage />} />} />
          <Route path="/agents" element={<Guard perm="agents:read" element={<AgentsPage />} />} />
          <Route path="/team" element={<Guard perm="users:read" element={<TeamPage />} />} />
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="*" element={<Home />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

/**
 * Стартова сторінка залежить від ролі.
 *
 * Глядача без права на мапи слати на «/map» означало б вітати його
 * порожнім екраном із відмовою. Тому перший доступний розділ і стає
 * домівкою.
 */
function Home() {
  const order: { perm: Permission; to: string }[] = [
    { perm: 'maps:read', to: '/map' },
    { perm: 'alerts:read', to: '/alerts' },
    { perm: 'devices:read', to: '/devices' },
    { perm: 'ncm:read', to: '/configs' },
    { perm: 'agents:read', to: '/agents' },
    { perm: 'users:read', to: '/team' },
  ]
  const first = order.find((o) => session.can(o.perm))
  return <Navigate to={first?.to ?? '/profile'} replace />
}

/**
 * Захист маршруту правом.
 *
 * Навігація вже ховає недоступні пункти, але посилання лишається
 * робочим: його можна зберегти в закладки, отримати від колеги або
 * успадкувати після зміни ролі. Сервер у будь-якому разі відповість 403 —
 * питання лише в тому, побачить людина зрозуміле пояснення чи порожню
 * сторінку з помилкою в консолі.
 */
function Guard({ perm, element }: { perm: Permission; element: React.ReactNode }) {
  if (session.can(perm)) return <>{element}</>
  return (
    <div className="flex flex-1 items-center justify-center p-8">
      <div className="max-w-sm text-center">
        <div className="mb-2 text-2xl">🔒</div>
        <h2 className="text-sm font-medium text-slate-200">Розділ недоступний</h2>
        <p className="mt-1 text-xs leading-relaxed text-slate-500">
          Вашій ролі не надано права <code className="text-slate-400">{perm}</code>. Попросіть
          власника організації змінити роль, якщо доступ потрібен для роботи.
        </p>
      </div>
    </div>
  )
}