"use client"; import { useEffect, useRef, useState } from "react"; import { API, fallbackSettings, resolveImageUrl, type SiteSettings } from "@/lib/api"; type FieldDef = { name: keyof SiteSettings; label: string; hint?: string; span?: boolean; }; type GroupDef = { id: string; title: string; description: string; icon: React.ReactNode; fields: FieldDef[]; }; const icon = (d: string) => ( ); const groups: GroupDef[] = [ { id: "identity", title: "Organization identity", description: "Name, tagline and logo used across the website and on printed certificates, ID cards and receipts.", icon: icon("M13 2 3 14h7l-1 8 10-12h-7l1-8z"), fields: [ { name: "site_name", label: "Organization name", span: true }, { name: "short_name", label: "Short name", hint: "Shown on badges, the browser tab and the card footer." }, { name: "tagline", label: "Tagline", span: true }, { name: "logo_url", label: "Logo image URL", hint: "A transparent PNG works best on every background." }, { name: "favicon_url", label: "Favicon URL", hint: "Small icon shown in the browser tab." }, ], }, { id: "colors", title: "Color palette", description: "Colors that drive the website header, buttons, cards and printed documents.", icon: icon("M12 22a10 10 0 1 1 10-10c0 2-1.5 3-3 3h-2a3 3 0 0 0-2 5c1 1 1 2 0 2z"), fields: [ { name: "primary_color", label: "Primary" }, { name: "secondary_color", label: "Secondary" }, { name: "accent_color", label: "Accent" }, { name: "background_color", label: "Page background" }, { name: "text_color", label: "Body text" }, ], }, { id: "contact", title: "Contact information", description: "Shown in the website footer and on the back of the identity card.", icon: icon("M4 4h16c1.1 0 2 .9 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 4-8 5-8-5"), fields: [ { name: "address", label: "Registered address", span: true }, { name: "phone", label: "Phone" }, { name: "email", label: "Email" }, ], }, { id: "social", title: "Social links", description: "Links shown in the website footer.", icon: icon("M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5"), fields: [ { name: "facebook_url", label: "Facebook URL", span: true }, { name: "instagram_url", label: "Instagram URL", span: true }, { name: "whatsapp_url", label: "WhatsApp URL", span: true }, ], }, ]; function Field({ field, value, onChange }: { field: FieldDef; value: string; onChange: (name: keyof SiteSettings, value: string) => void }) { const isColor = field.name.endsWith("_color"); const id = `field-${field.name}`; return ( ); } export function AdminBrandSettings() { const [settings, setSettings] = useState(fallbackSettings); const [saved, setSaved] = useState(fallbackSettings); const [message, setMessage] = useState<{ tone: "ok" | "error"; text: string } | null>(null); const [uploading, setUploading] = useState(false); const [saving, setSaving] = useState(false); const toastTimer = useRef | null>(null); const dirty = JSON.stringify(settings) !== JSON.stringify(saved); useEffect(() => { const token = localStorage.getItem("ngo_admin_token"); fetch(`${API}/admin/settings`, { headers: { Authorization: `Bearer ${token}` } }) .then((res) => res.json()) .then((data) => { if (!data) return; const merged = { ...fallbackSettings, ...data }; setSettings(merged); setSaved(merged); }) .catch(() => setMessage({ tone: "error", text: "Could not load settings." })); }, []); useEffect(() => () => { if (toastTimer.current) clearTimeout(toastTimer.current); }, []); const notify = (tone: "ok" | "error", text: string) => { setMessage({ tone, text }); if (toastTimer.current) clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setMessage(null), 4000); }; const update = (name: keyof SiteSettings, value: string) => { setSettings((prev) => ({ ...prev, [name]: value })); }; const save = async (payload?: SiteSettings) => { setSaving(true); const token = localStorage.getItem("ngo_admin_token"); try { const res = await fetch(`${API}/admin/settings`, { method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify(payload || settings), }); if (!res.ok) throw new Error("Save failed"); const result = await res.json(); const merged = { ...fallbackSettings, ...result }; setSettings(merged); setSaved(merged); notify("ok", "Changes saved. Public pages may take up to a minute to refresh."); } catch { notify("error", "Could not save settings. Please try again."); } finally { setSaving(false); } }; const onSignatureFile = async (event: React.ChangeEvent) => { const file = event.target.files?.[0]; event.target.value = ""; if (!file) return; setUploading(true); setMessage(null); try { const fd = new FormData(); fd.append("file", file); const upRes = await fetch(`${API}/upload`, { method: "POST", body: fd }); if (!upRes.ok) throw new Error("Upload failed"); const upData = await upRes.json(); if (!upData?.url) throw new Error("Upload failed"); await save({ ...settings, signature_url: upData.url }); notify("ok", "Signature uploaded and saved. It now appears on certificates, ID cards and receipts."); } catch { notify("error", "Signature upload failed. Please try again."); } finally { setUploading(false); } }; const removeSignature = async () => { await save({ ...settings, signature_url: "" }); notify("ok", "Signature removed."); }; const signatureUrl = settings.signature_url ? resolveImageUrl(settings.signature_url) : ""; return (
{/* ── Header ───────────────────────────────────────── */}

Settings

Brand & identity

Everything that defines how your organization looks — on the website and on printed documents.

{dirty ? ( Unsaved changes ) : ( All changes saved )}
{/* ── Toast ────────────────────────────────────────── */} {message ? (
{message.tone === "ok" ? ( ) : ( )} {message.text}
) : null} {/* ── Jump nav ─────────────────────────────────────── */}
{groups.map((group) => ( {group.title} ))}
{/* ── Left: sections ─────────────────────────────── */}
{groups.map((group) => (
{group.icon}

{group.title}

{group.description}

{group.fields.map((field) => ( ))}
))} {/* ── Signature section ─────────────────────────── */}

Authorised signatory

Upload a transparent PNG of your signature. It is placed under the {"\u201CAuthorised Signatory\u201D"} line on certificates, ID cards and receipts.

{signatureUrl ? (
{/* eslint-disable-next-line @next/next/no-img-element */} Authorised signatory signature

Signature active

) : (
No signature set
)}

Or paste an image URL in the {"\u201CSignature URL\u201D"} field above.

{/* ── Right: live preview ─────────────────────────── */}
{/* ── Sticky save bar ──────────────────────────────── */} {dirty ? (

You have unsaved changes to your brand settings.

) : null} {dirty ?
: null}
); }