Initial commit
Next.js + Express event management app for Hope Family Church.
This commit is contained in:
@@ -0,0 +1,451 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { apiFetch, fetchAllUsers } from "@/lib/api";
|
||||
import { scoreUser } from "@/lib/fuzzyMatch";
|
||||
|
||||
// ─── Pricing helpers ─────────────────────────────────────────────────────────
|
||||
|
||||
function effectiveOptionUnit(opt: any): number {
|
||||
const base = opt.price || 0;
|
||||
const tiers = (Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : []).filter((t: any) => !t.variantId);
|
||||
if (tiers.length === 0) return base;
|
||||
const now = new Date();
|
||||
const applicable = tiers
|
||||
.map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
|
||||
.filter((t: any) => now < t.deadline)
|
||||
.sort((a: any, b: any) => a.deadline - b.deadline || (a.order || 0) - (b.order || 0) || a.price - b.price);
|
||||
return applicable.length > 0 ? applicable[0].price : base;
|
||||
}
|
||||
|
||||
function effectiveVariantUnit(opt: any, variant: any): number {
|
||||
const base = variant.price !== null && variant.price !== undefined ? variant.price : opt.price || 0;
|
||||
const allTiers = Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : [];
|
||||
const variantTiers = allTiers.filter((t: any) => t.variantId === variant.id);
|
||||
const tiers = variantTiers.length > 0 ? variantTiers : allTiers.filter((t: any) => !t.variantId);
|
||||
if (tiers.length === 0) return base;
|
||||
const now = new Date();
|
||||
const applicable = tiers
|
||||
.map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
|
||||
.filter((t: any) => now < t.deadline)
|
||||
.sort((a: any, b: any) => a.deadline - b.deadline || (a.order || 0) - (b.order || 0) || a.price - b.price);
|
||||
return applicable.length > 0 ? applicable[0].price : base;
|
||||
}
|
||||
|
||||
function fmtPrice(n: number) {
|
||||
return n === 0 ? "Free" : `R ${n.toFixed(2)}`;
|
||||
}
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ManualRegistrationPage() {
|
||||
const { user, loading, token } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const canView = useMemo(() => {
|
||||
const role = user?.role;
|
||||
return role === "admin" || role === "supervisor";
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) return;
|
||||
if (!user) router.replace("/login");
|
||||
}, [user, loading, router]);
|
||||
|
||||
const [events, setEvents] = useState<any[]>([]);
|
||||
const [selectedEventId, setSelectedEventId] = useState<string>("");
|
||||
const [options, setOptions] = useState<any[]>([]);
|
||||
|
||||
// All system users for fuzzy lookup
|
||||
const [allUsers, setAllUsers] = useState<any[]>([]);
|
||||
|
||||
const [guest, setGuest] = useState({ name: "", email: "", phoneNumber: "" });
|
||||
const [registerAsGuest, setRegisterAsGuest] = useState(false);
|
||||
const [notifPref, setNotifPref] = useState<"email" | "whatsapp" | "both">("email");
|
||||
const [quantities, setQuantities] = useState<Record<string, number>>({});
|
||||
|
||||
// User search state
|
||||
const [userQuery, setUserQuery] = useState("");
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Load all users for client-side fuzzy matching
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
fetchAllUsers(token)
|
||||
.then(users => setAllUsers(users))
|
||||
.catch(() => {});
|
||||
}, [token]);
|
||||
|
||||
// Fuzzy match results (top 6, score threshold 0.45)
|
||||
const matchedUsers = useMemo(() => {
|
||||
if (userQuery.trim().length < 2) return [];
|
||||
return allUsers
|
||||
.map(u => ({ u, score: scoreUser(u, userQuery) }))
|
||||
.filter(x => x.score >= 0.45)
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, 6)
|
||||
.map(x => x.u);
|
||||
}, [userQuery, allUsers]);
|
||||
|
||||
const selectUser = (u: any) => {
|
||||
setGuest({ name: u.name || "", email: u.email || "", phoneNumber: u.phoneNumber || "" });
|
||||
setUserQuery(u.name || "");
|
||||
setDropdownOpen(false);
|
||||
};
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handler);
|
||||
return () => document.removeEventListener("mousedown", handler);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!token) return;
|
||||
const evs = await apiFetch<any[]>("/api/events/all", { authToken: token });
|
||||
const now = Date.now();
|
||||
const active = (evs || []).filter(ev => {
|
||||
const t = new Date(ev.endDate).getTime();
|
||||
// Manual registration is rejected server-side for closed (cashed-up) events —
|
||||
// don't offer them here even in the rare case one is closed before it ends.
|
||||
return !isNaN(t) && t > now && ev.cashupStatus !== 'closed';
|
||||
});
|
||||
active.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
|
||||
setEvents(active);
|
||||
} catch (e: any) {
|
||||
// ignore
|
||||
}
|
||||
})();
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
const ev = events.find(e => e.id === selectedEventId);
|
||||
if (ev) {
|
||||
const opts = ev.options || ev.eventOptions || [];
|
||||
setOptions(opts);
|
||||
const map: Record<string, number> = {};
|
||||
opts.forEach((o: any) => {
|
||||
if ((o.variants || []).length > 0) {
|
||||
(o.variants as any[]).forEach(v => { map[`${o.id}::${v.id}`] = 0; });
|
||||
} else {
|
||||
map[o.id] = 0;
|
||||
}
|
||||
});
|
||||
setQuantities(map);
|
||||
} else {
|
||||
setOptions([]);
|
||||
setQuantities({});
|
||||
}
|
||||
}, [selectedEventId, events]);
|
||||
|
||||
const totalDue = useMemo(() => {
|
||||
return options.reduce((sum, o) => {
|
||||
if ((o.variants || []).length > 0) {
|
||||
return sum + (o.variants as any[]).reduce((vs: number, v: any) => vs + (quantities[`${o.id}::${v.id}`] || 0) * effectiveVariantUnit(o, v), 0);
|
||||
}
|
||||
return sum + (quantities[o.id] || 0) * effectiveOptionUnit(o);
|
||||
}, 0);
|
||||
}, [options, quantities]);
|
||||
|
||||
const submit = async () => {
|
||||
if (!token) return;
|
||||
setError(null);
|
||||
setMessage(null);
|
||||
if (!selectedEventId) { setError("Please select an event."); return; }
|
||||
if (!guest.name || (!registerAsGuest && !guest.email)) { setError("Guest name and email are required."); return; }
|
||||
const opts = Object.entries(quantities)
|
||||
.filter(([, qty]) => qty > 0)
|
||||
.map(([key, quantity]) => {
|
||||
const [eventOptionId, variantId] = key.split("::");
|
||||
return { eventOptionId, quantity, ...(variantId ? { variantId } : {}) };
|
||||
});
|
||||
if (opts.length === 0) { setError("Please select at least one ticket option."); return; }
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
const hasEmail = !!guest.email.trim();
|
||||
const hasPhone = !!guest.phoneNumber.trim();
|
||||
const resolvedPref = hasEmail && hasPhone ? notifPref : hasPhone ? "whatsapp" : "email";
|
||||
const res = await apiFetch<any>("/api/registrations/manual", {
|
||||
method: "POST",
|
||||
authToken: token,
|
||||
body: {
|
||||
eventId: selectedEventId,
|
||||
options: opts,
|
||||
user: guest,
|
||||
guestOnly: registerAsGuest,
|
||||
notificationPreference: resolvedPref,
|
||||
}
|
||||
});
|
||||
setMessage("Manual registration created successfully.");
|
||||
|
||||
// Reset guest/ticket fields so the next registration starts from a clean slate
|
||||
setGuest({ name: "", email: "", phoneNumber: "" });
|
||||
setRegisterAsGuest(false);
|
||||
setNotifPref("email");
|
||||
setUserQuery("");
|
||||
setDropdownOpen(false);
|
||||
setQuantities(prev => Object.fromEntries(Object.keys(prev).map(k => [k, 0])));
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Failed to create manual registration");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto w-full p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-2xl font-semibold">Manual registration</h1>
|
||||
<button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
|
||||
</div>
|
||||
|
||||
{!canView && (
|
||||
<div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
|
||||
You need supervisor or admin access to use this page.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{message}</div>}
|
||||
{error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="border rounded-xl p-4 bg-white shadow-sm">
|
||||
<div className="text-lg font-semibold mb-3">1) Choose event</div>
|
||||
<select className="w-full border rounded px-3 py-2 text-sm" value={selectedEventId} onChange={e => setSelectedEventId(e.target.value)}>
|
||||
<option value="">Select an event…</option>
|
||||
{events.map(ev => (
|
||||
<option key={ev.id} value={ev.id}>{ev.title}</option>
|
||||
))}
|
||||
</select>
|
||||
{selectedEventId && (
|
||||
<div className="mt-3 text-xs text-gray-600">
|
||||
{(() => {
|
||||
const ev = events.find(e => e.id === selectedEventId);
|
||||
if (!ev) return null;
|
||||
return <>
|
||||
<div>{new Date(ev.startDate).toLocaleString()} - {new Date(ev.endDate).toLocaleString()}</div>
|
||||
</>;
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border rounded-xl p-4 bg-white shadow-sm">
|
||||
<div className="text-lg font-semibold mb-3">2) Guest details</div>
|
||||
|
||||
{/* ── User lookup ─────────────────────────────────────────── */}
|
||||
<div ref={searchRef} className="relative mb-4">
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">
|
||||
Search existing user <span className="font-normal">(name, email or phone)</span>
|
||||
</label>
|
||||
<input
|
||||
className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||||
placeholder="Start typing to find a user…"
|
||||
value={userQuery}
|
||||
autoComplete="off"
|
||||
onChange={e => { setUserQuery(e.target.value); setDropdownOpen(true); }}
|
||||
onFocus={() => { if (userQuery.length >= 2) setDropdownOpen(true); }}
|
||||
/>
|
||||
|
||||
{dropdownOpen && userQuery.trim().length >= 2 && (
|
||||
<div className="absolute z-30 top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden">
|
||||
{matchedUsers.length > 0 ? (
|
||||
<>
|
||||
<div className="px-3 py-1.5 text-[11px] text-gray-400 bg-gray-50 border-b">
|
||||
{matchedUsers.length} match{matchedUsers.length !== 1 ? "es" : ""} — click to auto-fill
|
||||
</div>
|
||||
{matchedUsers.map(u => (
|
||||
<button
|
||||
key={u.id}
|
||||
type="button"
|
||||
className="w-full text-left px-3 py-2.5 hover:bg-indigo-50 border-b border-gray-100 last:border-b-0 transition-colors"
|
||||
onClick={() => selectUser(u)}
|
||||
>
|
||||
<div className="text-sm font-medium text-gray-900">{u.name}</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5 flex gap-2 flex-wrap">
|
||||
{u.email && <span>{u.email}</span>}
|
||||
{u.phoneNumber && <span>· {u.phoneNumber}</span>}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<div className="px-3 py-3 text-sm text-gray-500 italic">
|
||||
No matching users found — fill in details below manually.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-3 mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<input id="registerAsGuest" type="checkbox" checked={registerAsGuest} onChange={e => setRegisterAsGuest(e.target.checked)} />
|
||||
<label htmlFor="registerAsGuest" className="text-sm text-gray-700">Guest (do not link to an existing account)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<input
|
||||
className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||||
placeholder="Full name"
|
||||
value={guest.name}
|
||||
onChange={e => setGuest({ ...guest, name: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||||
placeholder={registerAsGuest ? "Email (optional for guest)" : "Email"}
|
||||
type="email"
|
||||
value={guest.email}
|
||||
onChange={e => setGuest({ ...guest, email: e.target.value })}
|
||||
required={!registerAsGuest}
|
||||
/>
|
||||
<input
|
||||
className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||||
placeholder="Phone (optional)"
|
||||
value={guest.phoneNumber}
|
||||
onChange={e => {
|
||||
const v = e.target.value;
|
||||
setGuest({ ...guest, phoneNumber: v });
|
||||
if (v.trim() && !guest.email.trim()) setNotifPref("whatsapp");
|
||||
else if (!v.trim() && guest.email.trim()) setNotifPref("email");
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Preference selector */}
|
||||
{(() => {
|
||||
const hasEmail = !!guest.email.trim();
|
||||
const hasPhone = !!guest.phoneNumber.trim();
|
||||
if (!hasEmail && !hasPhone) return null;
|
||||
if (hasEmail && !hasPhone) return (
|
||||
<p className="text-xs text-gray-500">Tickets will be sent via <strong>email</strong>.</p>
|
||||
);
|
||||
if (hasPhone && !hasEmail) return (
|
||||
<p className="text-xs text-gray-500">Tickets will be sent via <strong>WhatsApp</strong>.</p>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600 mb-1">Send tickets via</label>
|
||||
<div className="flex rounded-lg border overflow-hidden text-xs font-medium">
|
||||
{(["email", "whatsapp", "both"] as const).map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => setNotifPref(p)}
|
||||
className={`flex-1 py-2 transition-colors ${
|
||||
notifPref === p
|
||||
? p === "whatsapp" ? "bg-green-600 text-white border-green-600"
|
||||
: p === "both" ? "bg-indigo-600 text-white"
|
||||
: "bg-blue-600 text-white"
|
||||
: "bg-white text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{p === "email" ? "Email" : p === "whatsapp" ? "WhatsApp" : "Both"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{guest.name && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setGuest({ name: "", email: "", phoneNumber: "" }); setUserQuery(""); setNotifPref("email"); }}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 text-left"
|
||||
>
|
||||
✕ Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 border rounded-xl p-4 bg-white shadow-sm">
|
||||
<div className="text-lg font-semibold mb-3">3) Select ticket options</div>
|
||||
{options.length === 0 ? (
|
||||
<div className="text-sm text-gray-500">Select an event to view options.</div>
|
||||
) : (
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{options.map(opt => {
|
||||
const hasVariants = (opt.variants || []).length > 0;
|
||||
if (hasVariants) {
|
||||
return (
|
||||
<div key={opt.id} className="border rounded overflow-hidden col-span-full sm:col-span-1">
|
||||
<div className="px-3 py-2 bg-gray-50 border-b text-sm font-medium text-gray-800">
|
||||
{opt.name}{opt.isMainTicket ? <span className="ml-1.5 text-xs text-blue-600 font-normal">• Main</span> : null}
|
||||
</div>
|
||||
{(opt.variants as any[]).map((v: any) => {
|
||||
const unit = effectiveVariantUnit(opt, v);
|
||||
const basePrice = v.price !== null && v.price !== undefined ? v.price : opt.price;
|
||||
const key = `${opt.id}::${v.id}`;
|
||||
return (
|
||||
<div key={v.id} className="flex items-center justify-between px-3 py-2 border-b last:border-b-0">
|
||||
<div>
|
||||
<div className="text-sm">{v.name}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{fmtPrice(unit)}
|
||||
{unit < basePrice && basePrice > 0 && <span className="ml-1 text-green-600">(early bird, was {fmtPrice(basePrice)})</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-gray-500">Qty</label>
|
||||
<input
|
||||
type="number" min={0}
|
||||
className="w-16 border rounded px-2 py-1 text-sm"
|
||||
value={quantities[key] || 0}
|
||||
onChange={e => setQuantities(q => ({ ...q, [key]: Math.max(0, parseInt(e.target.value || '0')) }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const unit = effectiveOptionUnit(opt);
|
||||
return (
|
||||
<div key={opt.id} className="border rounded p-3">
|
||||
<div className="font-medium text-sm">{opt.name}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{fmtPrice(unit)}
|
||||
{unit < opt.price && opt.price > 0 && <span className="ml-1 text-green-600">(early bird, was {fmtPrice(opt.price)})</span>}
|
||||
{opt.isMainTicket ? " • Main" : ""}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<label className="text-xs text-gray-600">Qty</label>
|
||||
<input
|
||||
type="number" min={0}
|
||||
className="w-20 border rounded px-2 py-1 text-sm"
|
||||
value={quantities[opt.id] || 0}
|
||||
onChange={e => setQuantities(q => ({ ...q, [opt.id]: Math.max(0, parseInt(e.target.value || '0')) }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<div className="text-sm">Total due: <span className="font-semibold">R {totalDue.toFixed(2)}</span></div>
|
||||
<button disabled={submitting} onClick={submit} className="px-4 py-2 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 shadow-sm">{submitting ? 'Creating…' : 'Create registration'}</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user