uprava FE pro multisite

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { Toaster } from 'sonner'
 import { NavLink, Outlet, Route, Routes } from 'react-router-dom'
 
+import { SiteSelectionProvider, useSiteSelection } from './context/SiteSelectionContext'
 import { useWsLogErrorCount } from './hooks/useWsLogErrorCount'
 import { Dashboard } from './pages/Dashboard'
 import Economics from './pages/Economics'
@@ -8,6 +9,47 @@ import { Logs } from './pages/Logs'
 import Planning from './pages/Planning'
 import { Settings } from './pages/Settings'
 
+function SiteCombo() {
+  const { sites, selectedSiteId, setSelectedSiteId, ready, error } = useSiteSelection()
+
+  if (!ready) {
+    return (
+      <span className="ml-auto text-xs text-slate-500" aria-live="polite">
+        Lokality…
+      </span>
+    )
+  }
+
+  if (error != null || sites.length === 0) {
+    return (
+      <span className="ml-auto max-w-[12rem] truncate text-xs text-amber-500/90" title={error ?? undefined}>
+        {error ?? 'Žádná lokalita'}
+      </span>
+    )
+  }
+
+  return (
+    <label className="ml-auto flex min-w-0 items-center gap-2 text-sm text-slate-400">
+      <span className="hidden shrink-0 sm:inline">Lokalita</span>
+      <select
+        className="max-w-[11rem] cursor-pointer truncate rounded-lg border border-slate-700 bg-slate-900 px-2 py-1.5 text-slate-200 sm:max-w-[14rem]"
+        value={selectedSiteId ?? ''}
+        onChange={(e) => {
+          const v = Number.parseInt(e.target.value, 10)
+          if (Number.isFinite(v)) setSelectedSiteId(v)
+        }}
+        aria-label="Vybrat lokalitu"
+      >
+        {sites.map((s) => (
+          <option key={s.id} value={s.id}>
+            {s.code} — {s.name}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}
+
 function AppLayout() {
   const logErrors = useWsLogErrorCount(true)
 
@@ -19,7 +61,7 @@ function AppLayout() {
   return (
     <div className="min-h-screen bg-slate-950">
       <nav className="sticky top-0 z-40 border-b border-slate-800/80 bg-slate-950/95 backdrop-blur">
-        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-1 px-4 py-2 md:px-8">
+        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-1 gap-y-2 px-4 py-2 md:px-8">
           <NavLink to="/" end className={tabClass}>
             Přehled
           </NavLink>
@@ -45,6 +87,7 @@ function AppLayout() {
               </span>
             ) : null}
           </a>
+          <SiteCombo />
         </div>
       </nav>
       <Outlet />
@@ -55,14 +98,16 @@ function AppLayout() {
 
 export default function App() {
   return (
-    <Routes>
+    <SiteSelectionProvider>
-      <Route element={<AppLayout />}>
+      <Routes>
-        <Route index element={<Dashboard />} />
+        <Route element={<AppLayout />}>
-        <Route path="planning" element={<Planning />} />
+          <Route index element={<Dashboard />} />
-        <Route path="economics" element={<Economics />} />
+          <Route path="planning" element={<Planning />} />
-        <Route path="settings" element={<Settings />} />
+          <Route path="economics" element={<Economics />} />
-      </Route>
+          <Route path="settings" element={<Settings />} />
-      <Route path="logs" element={<Logs />} />
+        </Route>
-    </Routes>
+        <Route path="logs" element={<Logs />} />
+      </Routes>
+    </SiteSelectionProvider>
   )
 }

frontend/src/api/backend.ts

@@ -30,6 +30,24 @@ export async function getBackendHealthDetailed(): Promise<HealthDetailedResponse
   return data
 }
 
+/** Aktivní lokality pro výběr v UI (`GET /me/sites`). */
+export type MeSiteRow = {
+  id: number
+  code: string
+  name: string
+  timezone: string
+  latitude?: number | string | null
+  longitude?: number | string | null
+  active: boolean
+  notes?: string | null
+  created_at?: string
+}
+
+export async function getMySites(): Promise<MeSiteRow[]> {
+  const { data } = await client.get<MeSiteRow[]>('/me/sites')
+  return Array.isArray(data) ? data : []
+}
+
 export async function getSiteStatusFull(siteId: number): Promise<FullStatusResponse> {
   const { data } = await client.get<FullStatusResponse>(`/sites/${siteId}/status/full`)
   return data

frontend/src/context/SiteSelectionContext.tsx

@@ -0,0 +1,88 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+
+import { getMySites, type MeSiteRow } from '../api/backend'
+
+export const SITE_STORAGE_KEY = 'ems.selected_site_id'
+
+export type SiteSelectionContextValue = {
+  sites: MeSiteRow[]
+  selectedSiteId: number | null
+  setSelectedSiteId: (id: number) => void
+  ready: boolean
+  error: string | null
+}
+
+const SiteSelectionContext = createContext<SiteSelectionContextValue | null>(null)
+
+export function SiteSelectionProvider({ children }: { children: ReactNode }) {
+  const [sites, setSites] = useState<MeSiteRow[]>([])
+  const [selectedSiteId, setSelectedSiteIdState] = useState<number | null>(null)
+  const [ready, setReady] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const list = await getMySites()
+        if (cancelled) return
+        setSites(list)
+        if (list.length === 0) {
+          setError('Žádná aktivní lokalita')
+          setSelectedSiteIdState(null)
+        } else {
+          setError(null)
+          const raw = localStorage.getItem(SITE_STORAGE_KEY)
+          const parsed = raw != null ? Number.parseInt(raw, 10) : Number.NaN
+          const valid = Number.isFinite(parsed) && list.some((s) => s.id === parsed)
+          setSelectedSiteIdState(valid ? parsed : list[0]!.id)
+        }
+      } catch {
+        if (!cancelled) {
+          setSites([])
+          setSelectedSiteIdState(null)
+          setError('Lokality se nepodařilo načíst')
+        }
+      } finally {
+        if (!cancelled) setReady(true)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const setSelectedSiteId = useCallback((id: number) => {
+    setSelectedSiteIdState(id)
+    localStorage.setItem(SITE_STORAGE_KEY, String(id))
+  }, [])
+
+  const value = useMemo(
+    (): SiteSelectionContextValue => ({
+      sites,
+      selectedSiteId,
+      setSelectedSiteId,
+      ready,
+      error,
+    }),
+    [sites, selectedSiteId, setSelectedSiteId, ready, error],
+  )
+
+  return <SiteSelectionContext.Provider value={value}>{children}</SiteSelectionContext.Provider>
+}
+
+export function useSiteSelection(): SiteSelectionContextValue {
+  const ctx = useContext(SiteSelectionContext)
+  if (ctx == null) {
+    throw new Error('useSiteSelection must be used within SiteSelectionProvider')
+  }
+  return ctx
+}

frontend/src/hooks/useSiteStatus.ts

@@ -1,26 +1,52 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useSiteSelection } from '../context/SiteSelectionContext'
 import { getJson } from '../api/postgrest'
 import type { SiteStatusRow } from '../types/ems'
 
 const POLL_MS = 30_000
 
 export function useSiteStatus() {
+  const { selectedSiteId, ready: selectionReady, error: selectionError } = useSiteSelection()
   const [row, setRow] = useState<SiteStatusRow | null>(null)
-  const [ready, setReady] = useState(false)
+  const [statusReady, setStatusReady] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [fetchError, setFetchError] = useState<string | null>(null)
+  const selectedSiteIdRef = useRef(selectedSiteId)
+  selectedSiteIdRef.current = selectedSiteId
 
   const load = useCallback(async () => {
-    try {
+    if (!selectionReady) {
-      const rows = await getJson<SiteStatusRow[]>('/vw_site_status')
+      return
-      setRow(Array.isArray(rows) && rows.length > 0 ? rows[0]! : null)
-      setError(null)
-    } catch {
-      setRow(null)
-      setError('Stav lokality se nepodařilo načíst')
-    } finally {
-      setReady(true)
     }
-  }, [])
+    if (selectedSiteId == null) {
+      setRow(null)
+      setFetchError(null)
+      setStatusReady(true)
+      return
+    }
+    const sid = selectedSiteId
+    try {
+      const rows = await getJson<SiteStatusRow[]>('/vw_site_status', {
+        site_id: `eq.${sid}`,
+      })
+      if (selectedSiteIdRef.current !== sid) return
+      setRow(Array.isArray(rows) && rows.length > 0 ? rows[0]! : null)
+      setFetchError(null)
+    } catch {
+      if (selectedSiteIdRef.current !== sid) return
+      setRow(null)
+      setFetchError('Stav lokality se nepodařilo načíst')
+    } finally {
+      if (selectedSiteIdRef.current === sid) {
+        setStatusReady(true)
+      }
+    }
+  }, [selectionReady, selectedSiteId])
+
+  useEffect(() => {
+    if (!selectionReady) return
+    setStatusReady(false)
+  }, [selectionReady, selectedSiteId])
 
   useEffect(() => {
     void load()
@@ -28,6 +54,9 @@ export function useSiteStatus() {
     return () => window.clearInterval(id)
   }, [load])
 
+  const ready = selectionReady && statusReady
+  const error = selectionError ?? fetchError
+
   const hasTelemetry =
     row != null &&
     (row.pv_power_w != null ||