Initialize repo and add session changes (2025-09-08)

resources/js/admin/pages/EventDetailPage.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { getEvent, getEventStats, toggleEvent, createInviteLink } from '../api';
+import { Button } from '@/components/ui/button';
+
+export default function EventDetailPage() {
+  const [sp] = useSearchParams();
+  const id = Number(sp.get('id'));
+  const nav = useNavigate();
+  const [ev, setEv] = React.useState<any | null>(null);
+  const [stats, setStats] = React.useState<{ total: number; featured: number; likes: number } | null>(null);
+  const [invite, setInvite] = React.useState<string | null>(null);
+
+  async function load() {
+    const e = await getEvent(id);
+    setEv(e);
+    setStats(await getEventStats(id));
+  }
+  React.useEffect(() => { load(); }, [id]);
+
+  async function onToggle() {
+    const isActive = await toggleEvent(id);
+    setEv((o: any) => ({ ...(o || {}), is_active: isActive }));
+  }
+
+  async function onInvite() {
+    const link = await createInviteLink(id);
+    setInvite(link);
+    try { await navigator.clipboard.writeText(link); } catch {}
+  }
+
+  if (!ev) return <div className="p-4">Lade…</div>;
+  const joinLink = `${location.origin}/e/${ev.slug}`;
+  const qrUrl = `/admin/qr?data=${encodeURIComponent(joinLink)}`;
+
+  return (
+    <div className="mx-auto max-w-3xl p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-lg font-semibold">Event: {renderName(ev.name)}</h1>
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={onToggle}>{ev.is_active ? 'Deaktivieren' : 'Aktivieren'}</Button>
+          <Button variant="secondary" onClick={() => nav(`/admin/events/photos?id=${id}`)}>Fotos moderieren</Button>
+        </div>
+      </div>
+      <div className="rounded border p-3 text-sm">
+        <div>Slug: {ev.slug}</div>
+        <div>Datum: {ev.date ?? '-'}</div>
+        <div>Status: {ev.is_active ? 'Aktiv' : 'Inaktiv'}</div>
+      </div>
+      <div className="grid grid-cols-3 gap-3 text-center text-sm">
+        <div className="rounded border p-3"><div className="text-2xl font-semibold">{stats?.total ?? 0}</div><div>Fotos</div></div>
+        <div className="rounded border p-3"><div className="text-2xl font-semibold">{stats?.featured ?? 0}</div><div>Featured</div></div>
+        <div className="rounded border p-3"><div className="text-2xl font-semibold">{stats?.likes ?? 0}</div><div>Likes gesamt</div></div>
+      </div>
+      <div className="rounded border p-3">
+        <div className="mb-2 text-sm font-medium">Join-Link</div>
+        <div className="mb-2 flex items-center gap-2">
+          <input className="w-full rounded border p-2 text-sm" value={joinLink} readOnly />
+          <Button variant="secondary" onClick={() => navigator.clipboard.writeText(joinLink)}>Kopieren</Button>
+        </div>
+        <div className="mb-2 text-sm font-medium">QR</div>
+        <img src={qrUrl} alt="QR" width={200} height={200} className="rounded border" />
+        <div className="mt-3">
+          <Button variant="secondary" onClick={onInvite}>Einladungslink erzeugen</Button>
+          {invite && <div className="mt-2 text-xs text-muted-foreground">Erzeugt und kopiert: {invite}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function renderName(name: any): string {
+  if (typeof name === 'string') return name;
+  if (name && (name.de || name.en)) return name.de || name.en;
+  return JSON.stringify(name);
+}
+

resources/js/admin/pages/EventFormPage.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { createEvent, updateEvent } from '../api';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+export default function EventFormPage() {
+  const [sp] = useSearchParams();
+  const id = sp.get('id');
+  const nav = useNavigate();
+  const [name, setName] = React.useState('');
+  const [slug, setSlug] = React.useState('');
+  const [date, setDate] = React.useState('');
+  const [active, setActive] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const isEdit = !!id;
+
+  async function save() {
+    setSaving(true);
+    try {
+      if (isEdit) {
+        await updateEvent(Number(id), { name, slug, date, is_active: active });
+      } else {
+        await createEvent({ name, slug, date, is_active: active });
+      }
+      nav('/admin/events');
+    } finally { setSaving(false); }
+  }
+
+  return (
+    <div className="mx-auto max-w-md p-4 space-y-3">
+      <h1 className="text-lg font-semibold">{isEdit ? 'Event bearbeiten' : 'Neues Event'}</h1>
+      <Input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+      <Input placeholder="Slug" value={slug} onChange={(e) => setSlug(e.target.value)} />
+      <Input placeholder="Datum" type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+      <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} /> Aktiv</label>
+      <div className="flex gap-2">
+        <Button onClick={save} disabled={saving || !name || !slug}>{saving ? 'Speichern…' : 'Speichern'}</Button>
+        <Button variant="secondary" onClick={() => nav(-1)}>Abbrechen</Button>
+      </div>
+    </div>
+  );
+}
+

resources/js/admin/pages/EventPhotosPage.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { deletePhoto, featurePhoto, getEventPhotos, unfeaturePhoto } from '../api';
+import { Button } from '@/components/ui/button';
+
+export default function EventPhotosPage() {
+  const [sp] = useSearchParams();
+  const id = Number(sp.get('id'));
+  const [rows, setRows] = React.useState<any[]>([]);
+  const [loading, setLoading] = React.useState(true);
+
+  async function load() {
+    setLoading(true);
+    try { setRows(await getEventPhotos(id)); } finally { setLoading(false); }
+  }
+  React.useEffect(() => { load(); }, [id]);
+
+  async function onFeature(p: any) { await featurePhoto(p.id); load(); }
+  async function onUnfeature(p: any) { await unfeaturePhoto(p.id); load(); }
+  async function onDelete(p: any) { await deletePhoto(p.id); load(); }
+
+  return (
+    <div className="mx-auto max-w-5xl p-4">
+      <h1 className="mb-3 text-lg font-semibold">Fotos moderieren</h1>
+      {loading && <div>Lade…</div>}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+        {rows.map((p) => (
+          <div key={p.id} className="rounded border p-2">
+            <img src={p.thumbnail_path || p.file_path} className="mb-2 aspect-square w-full rounded object-cover" />
+            <div className="flex items-center justify-between text-sm">
+              <span>❤ {p.likes_count}</span>
+              <div className="flex gap-1">
+                {p.is_featured ? (
+                  <Button size="sm" variant="secondary" onClick={() => onUnfeature(p)}>Unfeature</Button>
+                ) : (
+                  <Button size="sm" variant="secondary" onClick={() => onFeature(p)}>Feature</Button>
+                )}
+                <Button size="sm" variant="destructive" onClick={() => onDelete(p)}>Löschen</Button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+

resources/js/admin/pages/EventsPage.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { getEvents } from '../api';
+import { Button } from '@/components/ui/button';
+import { Link, useNavigate } from 'react-router-dom';
+
+export default function EventsPage() {
+  const [rows, setRows] = React.useState<any[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+  const nav = useNavigate();
+
+  React.useEffect(() => {
+    (async () => {
+      try { setRows(await getEvents()); } catch (e) { setError('Laden fehlgeschlagen'); } finally { setLoading(false); }
+    })();
+  }, []);
+
+  return (
+    <div className="mx-auto max-w-3xl p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <h1 className="text-lg font-semibold">Meine Events</h1>
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={() => nav('/admin/events/new')}>Neues Event</Button>
+          <Link to="/admin/settings"><Button variant="secondary">Einstellungen</Button></Link>
+        </div>
+      </div>
+      {loading && <div>Lade…</div>}
+      {error && <div className="rounded border border-red-300 bg-red-50 p-2 text-sm text-red-700">{error}</div>}
+      <div className="divide-y rounded border">
+        {rows.map((e) => (
+          <div key={e.id} className="flex items-center justify-between p-3">
+            <div className="text-sm">
+              <div className="font-medium">{renderName(e.name)}</div>
+              <div className="text-muted-foreground">Slug: {e.slug} · Datum: {e.date ?? '-'}</div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Link to={`/admin/events/view?id=${e.id}`} className="text-sm underline">details</Link>
+              <Link to={`/admin/events/edit?id=${e.id}`} className="text-sm underline">bearbeiten</Link>
+              <Link to={`/admin/events/photos?id=${e.id}`} className="text-sm underline">fotos</Link>
+              <a className="text-sm underline" href={`/e/${e.slug}`} target="_blank">öffnen</a>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function renderName(name: any): string {
+  if (typeof name === 'string') return name;
+  if (name && (name.de || name.en)) return name.de || name.en;
+  return JSON.stringify(name);
+}

resources/js/admin/pages/LoginPage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { login } from '../api';
+import { useNavigate } from 'react-router-dom';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import AppearanceToggleDropdown from '@/components/appearance-dropdown';
+
+export default function LoginPage() {
+  const nav = useNavigate();
+  const [email, setEmail] = React.useState('');
+  const [password, setPassword] = React.useState('');
+  const [error, setError] = React.useState<string | null>(null);
+  const [loading, setLoading] = React.useState(false);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const { token } = await login(email, password);
+      localStorage.setItem('ta_token', token);
+      nav('/admin', { replace: true });
+    } catch (err: any) {
+      setError('Login fehlgeschlagen');
+    } finally { setLoading(false); }
+  }
+
+  return (
+    <div className="mx-auto max-w-sm p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h1 className="text-lg font-semibold">Tenant Admin</h1>
+        <AppearanceToggleDropdown />
+      </div>
+      <form onSubmit={submit} className="space-y-3">
+        {error && <div className="rounded border border-red-300 bg-red-50 p-2 text-sm text-red-700">{error}</div>}
+        <Input placeholder="E-Mail" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <Input placeholder="Passwort" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <Button type="submit" disabled={loading || !email || !password} className="w-full">{loading ? 'Bitte warten…' : 'Anmelden'}</Button>
+      </form>
+    </div>
+  );
+}
+

resources/js/admin/pages/SettingsPage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import AppearanceToggleDropdown from '@/components/appearance-dropdown';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
+
+export default function SettingsPage() {
+  const nav = useNavigate();
+  function logout() {
+    localStorage.removeItem('ta_token');
+    nav('/admin/login', { replace: true });
+  }
+  return (
+    <div className="mx-auto max-w-sm p-6">
+      <h1 className="mb-4 text-lg font-semibold">Einstellungen</h1>
+      <div className="mb-4">
+        <div className="text-sm font-medium">Darstellung</div>
+        <AppearanceToggleDropdown />
+      </div>
+      <Button variant="destructive" onClick={logout}>Abmelden</Button>
+    </div>
+  );
+}
+