Add self-hosted usage analytics: pageview tracking + admin stats dashboard

Records pageviews (path, referrer, browser/OS/device, IP, GeoIP country) via a POST /api/track beacon into a new PageView table, and exposes aggregated daily/breakdown stats behind a token-gated GET /api/admin/stats endpoint with brute-force lockout. Frontend gets a /admin dashboard (charts + breakdown tables) built on recharts, with a switchable per-day pageviews chart. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-01 19:43:10 +02:00
parent c59dca754f
commit 0845562a21
17 changed files with 1386 additions and 18 deletions
@@ -0,0 +1,79 @@
+import { createContext, useContext, useState } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
+
+const TOKEN_KEY = 'bridzik_admin_token';
+
+const AdminTokenContext = createContext<string>('');
+
+/** Admin token, read from the input/sessionStorage owned by AdminLayout.
+ *  Kept separate from the player login -- /admin is gated by ADMIN_TOKEN only. */
+export function useAdminToken(): string {
+  return useContext(AdminTokenContext);
+}
+
+export default function AdminLayout() {
+  const [token, setToken] = useState(() => sessionStorage.getItem(TOKEN_KEY) ?? '');
+  const [draft, setDraft] = useState('');
+
+  if (!token) {
+    return (
+      <div className="max-w-sm mx-auto p-4 pt-24 min-h-screen">
+        <h1 className="font-serif text-2xl text-gold mb-4">Admin</h1>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!draft.trim()) return;
+            sessionStorage.setItem(TOKEN_KEY, draft.trim());
+            setToken(draft.trim());
+          }}
+          className="flex flex-col gap-3"
+        >
+          <input
+            type="password"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder="Admin token"
+            className="bg-header border border-[#142018] rounded-lg px-3 py-2 text-green-score placeholder:text-green-dim outline-none focus:border-gold"
+            autoFocus
+          />
+          <button
+            type="submit"
+            className="px-4 py-2 rounded-lg font-serif font-semibold bg-gold text-table hover:bg-gold-bright transition-colors"
+          >
+            Vstup
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  return (
+    <AdminTokenContext.Provider value={token}>
+      <div className="max-w-4xl mx-auto p-4 pt-8 min-h-screen">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="font-serif text-2xl text-gold">Admin</h1>
+          <button
+            onClick={() => {
+              sessionStorage.removeItem(TOKEN_KEY);
+              setToken('');
+            }}
+            className="text-sm text-green-dim hover:text-gold"
+          >
+            Odhlásiť
+          </button>
+        </div>
+        <nav className="flex gap-4 mb-6 border-b border-gold/[.14] pb-2">
+          <NavLink
+            to="stats"
+            className={({ isActive }) =>
+              `text-sm ${isActive ? 'text-gold' : 'text-green-dim hover:text-gold'}`
+            }
+          >
+            Štatistiky
+          </NavLink>
+        </nav>
+        <Outlet />
+      </div>
+    </AdminTokenContext.Provider>
+  );
+}