Initial commit
Next.js + Express event management app for Hope Family Church.
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { apiFetch } from "@/lib/api";
|
||||
|
||||
type BannerType = "info" | "warning" | "success" | "danger";
|
||||
|
||||
const TYPE_LABELS: Record<BannerType, string> = {
|
||||
info: "Info (blue)",
|
||||
warning: "Warning (amber)",
|
||||
success: "Success (green)",
|
||||
danger: "Danger (red)",
|
||||
};
|
||||
|
||||
export default function SetBannerPage() {
|
||||
const { user, token, loading } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const [message, setMessage] = useState("");
|
||||
const [type, setType] = useState<BannerType>("info");
|
||||
const [liveFrom, setLiveFrom] = useState("");
|
||||
const [liveTill, setLiveTill] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [status, setStatus] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) return;
|
||||
if (!user) { router.replace("/login"); return; }
|
||||
if (user.role !== "admin" && user.role !== "supervisor") {
|
||||
router.replace("/dashboard");
|
||||
}
|
||||
}, [user, loading, router]);
|
||||
|
||||
// Load current banner
|
||||
useEffect(() => {
|
||||
apiFetch<any>("/api/banner")
|
||||
.then(b => {
|
||||
if (!b) return;
|
||||
setMessage(b.message || "");
|
||||
setType(b.type || "info");
|
||||
// Convert ISO strings back to datetime-local format
|
||||
setLiveFrom(b.liveFrom ? toLocalInput(b.liveFrom) : "");
|
||||
setLiveTill(b.liveTill ? toLocalInput(b.liveTill) : "");
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
function toLocalInput(iso: string) {
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d.getTime())) return "";
|
||||
// datetime-local wants "YYYY-MM-DDTHH:MM"
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!token) return;
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
await apiFetch("/api/banner", {
|
||||
method: "POST",
|
||||
authToken: token,
|
||||
body: {
|
||||
message,
|
||||
type,
|
||||
liveFrom: liveFrom ? new Date(liveFrom).toISOString() : null,
|
||||
liveTill: liveTill ? new Date(liveTill).toISOString() : null,
|
||||
},
|
||||
});
|
||||
setStatus("Banner saved.");
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Failed to save banner.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const clear = async () => {
|
||||
if (!token) return;
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
await apiFetch("/api/banner", {
|
||||
method: "POST",
|
||||
authToken: token,
|
||||
body: { message: "", type: "info", liveFrom: null, liveTill: null },
|
||||
});
|
||||
setMessage("");
|
||||
setType("info");
|
||||
setLiveFrom("");
|
||||
setLiveTill("");
|
||||
setStatus("Banner cleared.");
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Failed to clear banner.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-start justify-center px-4 py-12">
|
||||
<div className="w-full max-w-lg border rounded-xl bg-white shadow-sm p-6">
|
||||
<h1 className="text-xl font-semibold mb-1">Site Banner</h1>
|
||||
<p className="text-sm text-gray-500 mb-6">Set a message that appears at the top of every page for visitors within the scheduled window.</p>
|
||||
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Message</label>
|
||||
<input
|
||||
className="w-full border rounded px-3 py-2 text-sm"
|
||||
placeholder="e.g. Registration for Camp 2026 is now open!"
|
||||
value={message}
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Type</label>
|
||||
<select className="w-full border rounded px-3 py-2 text-sm" value={type} onChange={e => setType(e.target.value as BannerType)}>
|
||||
{(Object.keys(TYPE_LABELS) as BannerType[]).map(t => (
|
||||
<option key={t} value={t}>{TYPE_LABELS[t]}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Live from</label>
|
||||
<input type="datetime-local" className="w-full border rounded px-3 py-2 text-sm" value={liveFrom} onChange={e => setLiveFrom(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Live until</label>
|
||||
<input type="datetime-local" className="w-full border rounded px-3 py-2 text-sm" value={liveTill} onChange={e => setLiveTill(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500">Leave dates empty to show the banner immediately with no end date. Times use your local timezone.</p>
|
||||
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
{status && <p className="text-sm text-emerald-700">{status}</p>}
|
||||
|
||||
<div className="flex gap-3 pt-1">
|
||||
<button type="submit" disabled={busy} className="px-4 py-2 rounded bg-indigo-600 text-white text-sm disabled:opacity-60 hover:bg-indigo-700">
|
||||
{busy ? "Saving…" : "Save banner"}
|
||||
</button>
|
||||
<button type="button" onClick={clear} disabled={busy} className="px-4 py-2 rounded bg-gray-100 text-gray-700 text-sm disabled:opacity-60 hover:bg-gray-200">
|
||||
Clear banner
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user