Initial commit

Made-with: Cursor

frontend/src/pages/Settings.tsx

@@ -0,0 +1,98 @@
+import { ModeLog } from '../components/ModeLog'
+import { ModeSelector } from '../components/ModeSelector'
+import { useSiteStatus } from '../hooks/useSiteStatus'
+
+function SectionTitle({ kicker, title }: { kicker: string; title: string }) {
+  return (
+    <div className="mb-4">
+      <p className="text-xs font-semibold uppercase tracking-widest text-slate-500">{kicker}</p>
+      <h2 className="text-lg font-semibold text-slate-100">{title}</h2>
+    </div>
+  )
+}
+
+export function Settings() {
+  const { site, ready, reload } = useSiteStatus()
+  const siteId = site?.site_id ?? null
+
+  return (
+    <div className="min-h-screen bg-slate-950 p-4 md:p-8">
+      <div className="mx-auto max-w-7xl space-y-12">
+        <header className="border-b border-slate-800/80 pb-6">
+          <h1 className="text-2xl font-bold tracking-tight text-white">Nastavení</h1>
+          <p className="mt-1 text-sm text-slate-400">Provozní režim a plánování flexibilní zátěže</p>
+          {ready && site ? (
+            <p className="mt-2 text-sm text-slate-500">
+              Lokalita: <span className="text-slate-300">{site.site_name}</span> ({site.site_code})
+            </p>
+          ) : null}
+        </header>
+
+        <section>
+          <SectionTitle kicker="Řízení" title="Provozní režim" />
+          <p className="mb-4 max-w-3xl text-sm text-slate-400">
+            Přepnutí zapíše stav do databáze a notifikuje Loxone. U dočasného režimu lze nastavit čas návratu; po vypršení systém obnoví předchozí režim.
+          </p>
+          <ModeSelector
+            siteId={siteId}
+            currentMode={site?.active_mode}
+            onModeApplied={() => void reload()}
+          />
+          <div className="mt-8">
+            <h3 className="mb-3 text-sm font-medium text-slate-300">Poslední přepnutí</h3>
+            <ModeLog siteId={siteId} />
+          </div>
+        </section>
+
+        <section>
+          <SectionTitle kicker="EV" title="Deadline nabíjení (připravuje se)" />
+          <p className="mb-4 text-sm text-slate-500">
+            Zatím pouze rozhraní; napojení na API a session přijde v další iteraci.
+          </p>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="rounded-xl border border-slate-800 bg-slate-900/40 p-4">
+              <p className="text-sm font-medium text-slate-200">Tesla</p>
+              <div className="mt-3 flex flex-wrap gap-3">
+                <label className="flex flex-col text-xs text-slate-500">
+                  Cílové SoC %
+                  <input
+                    type="number"
+                    min={0}
+                    max={100}
+                    placeholder="např. 80"
+                    disabled
+                    className="mt-1 w-28 rounded-lg border border-slate-700 bg-slate-900 px-2 py-1.5 text-sm text-slate-400"
+                  />
+                </label>
+                <label className="flex min-w-[200px] flex-col text-xs text-slate-500">
+                  Deadline
+                  <input type="datetime-local" disabled className="mt-1 rounded-lg border border-slate-700 bg-slate-900 px-2 py-1.5 text-sm text-slate-400" />
+                </label>
+              </div>
+            </div>
+            <div className="rounded-xl border border-slate-800 bg-slate-900/40 p-4">
+              <p className="text-sm font-medium text-slate-200">Zoe</p>
+              <div className="mt-3 flex flex-wrap gap-3">
+                <label className="flex flex-col text-xs text-slate-500">
+                  Cílové SoC %
+                  <input
+                    type="number"
+                    min={0}
+                    max={100}
+                    placeholder="např. 80"
+                    disabled
+                    className="mt-1 w-28 rounded-lg border border-slate-700 bg-slate-900 px-2 py-1.5 text-sm text-slate-400"
+                  />
+                </label>
+                <label className="flex min-w-[200px] flex-col text-xs text-slate-500">
+                  Deadline
+                  <input type="datetime-local" disabled className="mt-1 rounded-lg border border-slate-700 bg-slate-900 px-2 py-1.5 text-sm text-slate-400" />
+                </label>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}