Full site redesign, help system, and dashboard stats fixes
Multi-phase visual facelift (design tokens, dashboards, sidebar/navbar shell, per-page help guides, and a layout/content pass across every remaining page) plus backend fixes to the dashboard KPI stats: - Admin/Supervisor dashboard KPIs (revenue, donations, registrations, tickets sold) now use a rolling trailing-month window (today back one calendar month, e.g. 9 May - 8 June if today is 8 June) instead of calendar month-to-date, which under-counted for most of the month. The comparison window shifts the same way, so like is still compared with like. - Reports deep-links from those stat tiles now match the same window (range=trailing_month, replacing range=this_month). - Design tokens (brand-* Tailwind scale + shadcn CSS variables), a site-wide contextual help button, fixed dashboard sidebar/navbar, Admin/Supervisor/Staff/User dashboard rebuilds backed by a new GET /api/stats/overview endpoint, a dedicated Contact page, Site Settings restyle with WhatsApp config folded in, and an Account activity feed backed by a new SecurityEvent model. - Every remaining page (home, events, registration flow, auth, legal, payment results, and every Admin/Supervisor/Staff/User tool page) restyled onto the same design tokens, several with real layout upgrades (home hero, events list/detail, donate page, auth pages). - 20+ new dedicated help guides so the whole site has page-specific help content instead of falling back to a generic guide. - Assorted fixes surfaced along the way: donation-leg double-counting in payment stats, donations not counting toward revenue, refund netting in per-method report breakdowns, and donation over-allocation after a refund. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -1,4 +1,5 @@
|
||||
import { ApiImage } from "@/components/shared/ApiImage";
|
||||
import { Calendar } from "lucide-react";
|
||||
|
||||
type Event = {
|
||||
id: string;
|
||||
@@ -19,12 +20,21 @@ export const EventCard = ({ event }: { event: Event }) => {
|
||||
const dateRange = formatDateTimeRange(event.startDate, event.endDate);
|
||||
|
||||
return (
|
||||
<div className="border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
|
||||
<div className="border rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-brand-200 transition">
|
||||
<a href={`/events/${event.id}`} className="block">
|
||||
<ApiImage src={event.picture} alt={event.title} className="h-48 w-full object-cover" />
|
||||
{event.picture ? (
|
||||
<ApiImage src={event.picture} alt={event.title} className="h-48 w-full object-cover" />
|
||||
) : (
|
||||
<div className="h-48 w-full bg-brand-50 flex items-center justify-center">
|
||||
<Calendar className="w-10 h-10 text-brand-200" />
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold hover:underline">{event.title}</h3>
|
||||
<p className="text-sm text-gray-500">{dateRange}</p>
|
||||
<p className="text-sm text-gray-500 flex items-center gap-1.5 mt-1">
|
||||
<Calendar className="w-3.5 h-3.5 shrink-0" />
|
||||
{dateRange}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-2 line-clamp-2">{event.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
@@ -32,7 +42,7 @@ export const EventCard = ({ event }: { event: Event }) => {
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href={`/events/${event.id}`}
|
||||
className="flex-1 text-center text-sm text-gray-700 border py-2 rounded hover:bg-gray-50"
|
||||
className="flex-1 text-center text-sm text-gray-700 border rounded-lg py-2 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
View details
|
||||
</a>
|
||||
@@ -45,21 +55,21 @@ export const EventCard = ({ event }: { event: Event }) => {
|
||||
const closed = (deadline ? now >= deadline : false) || now >= end;
|
||||
if (notYetOpen) {
|
||||
return (
|
||||
<button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 py-2 rounded cursor-not-allowed" title="Registration not yet open">
|
||||
<button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 rounded-lg py-2 cursor-not-allowed" title="Registration not yet open">
|
||||
Opens {goLive?.toLocaleString()}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
if (closed) {
|
||||
return (
|
||||
<button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 py-2 rounded cursor-not-allowed" title="Registration closed">
|
||||
<button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 rounded-lg py-2 cursor-not-allowed" title="Registration closed">
|
||||
Registration closed
|
||||
</button>
|
||||
);
|
||||
}
|
||||
if (event.isSoldOut) {
|
||||
return (
|
||||
<button disabled className="flex-1 text-center text-sm text-red-700 bg-red-50 border border-red-200 py-2 rounded cursor-not-allowed">
|
||||
<button disabled className="flex-1 text-center text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg py-2 cursor-not-allowed">
|
||||
Sold Out
|
||||
</button>
|
||||
);
|
||||
@@ -67,7 +77,7 @@ export const EventCard = ({ event }: { event: Event }) => {
|
||||
return (
|
||||
<a
|
||||
href={`/register/${event.id}`}
|
||||
className="flex-1 text-center text-sm text-white bg-blue-600 py-2 rounded hover:bg-blue-700"
|
||||
className="flex-1 text-center text-sm text-white bg-brand-600 rounded-lg py-2 hover:bg-brand-700 transition-colors"
|
||||
>
|
||||
Register{event.price > 0 ? ` - R${event.price.toFixed(2)}` : ""}
|
||||
</a>
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { apiFetch, resolveToApiOrigin } from "@/lib/api";
|
||||
import { Button } from "@/components/shared/Button";
|
||||
|
||||
export function EventForm({ onCreated }: { onCreated?: () => void }) {
|
||||
const { token } = useAuth();
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
const [price, setPrice] = useState<number>(0);
|
||||
const [picture, setPicture] = useState("");
|
||||
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
||||
const [uploadingImage, setUploadingImage] = useState(false);
|
||||
const [isHidden, setIsHidden] = useState(false);
|
||||
const [requiresAuth, setRequiresAuth] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function handleImageFile(file: File) {
|
||||
setUploadingImage(true);
|
||||
setError(null);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append("image", file);
|
||||
const data = await apiFetch<{ url: string }>("/api/uploads/event-image", {
|
||||
method: "POST",
|
||||
authToken: token,
|
||||
body: fd,
|
||||
});
|
||||
setPicture(data.url);
|
||||
setImagePreview(URL.createObjectURL(file));
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Image upload failed");
|
||||
} finally {
|
||||
setUploadingImage(false);
|
||||
}
|
||||
}
|
||||
|
||||
function clearImage() {
|
||||
setImagePreview(null);
|
||||
setPicture("");
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!token) { setError("Please login"); return; }
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await apiFetch("/api/events", {
|
||||
method: "POST",
|
||||
authToken: token,
|
||||
body: { title, description, startDate, endDate, price, picture, isHidden, requiresAuth },
|
||||
});
|
||||
onCreated?.();
|
||||
setTitle(""); setDescription(""); setStartDate(""); setEndDate(""); setPrice(0); setPicture(""); setImagePreview(null); setIsHidden(false); setRequiresAuth(true);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Failed to create event");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const previewSrc = imagePreview || (picture ? resolveToApiOrigin(picture) : null);
|
||||
|
||||
return (
|
||||
<form onSubmit={submit} className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Title</label>
|
||||
<input className="w-full border rounded px-3 py-2" value={title} onChange={(e) => setTitle(e.target.value)} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Description</label>
|
||||
<textarea className="w-full border rounded px-3 py-2" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Start</label>
|
||||
<input type="datetime-local" className="w-full border rounded px-3 py-2" value={startDate} onChange={(e) => setStartDate(e.target.value)} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">End</label>
|
||||
<input type="datetime-local" className="w-full border rounded px-3 py-2" value={endDate} onChange={(e) => setEndDate(e.target.value)} required />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Price (R)</label>
|
||||
<input type="number" step="0.01" className="w-full border rounded px-3 py-2" value={price} onChange={(e) => setPrice(parseFloat(e.target.value))} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Event image</label>
|
||||
{previewSrc && (
|
||||
<div className="relative inline-block mb-2">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={previewSrc} alt="Preview" className="h-32 object-cover rounded border" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearImage}
|
||||
className="absolute top-1 right-1 bg-white text-red-500 hover:text-red-700 rounded px-1 text-xs shadow"
|
||||
>✕</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2 items-center">
|
||||
<label className={`cursor-pointer px-3 py-2 text-sm rounded border bg-gray-50 hover:bg-gray-100 ${uploadingImage ? "opacity-50 pointer-events-none" : ""}`}>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
disabled={uploadingImage}
|
||||
onChange={e => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) handleImageFile(file);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
{uploadingImage ? "Uploading…" : "Upload image"}
|
||||
</label>
|
||||
<span className="text-xs text-gray-400">or</span>
|
||||
<input
|
||||
className="flex-1 border rounded px-3 py-2 text-sm"
|
||||
placeholder="https://…"
|
||||
value={picture}
|
||||
onChange={e => { setPicture(e.target.value); setImagePreview(null); }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border rounded-lg p-3 bg-gray-50 space-y-2">
|
||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Visibility & Access</div>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" checked={isHidden} onChange={e => setIsHidden(e.target.checked)} />
|
||||
<span className="text-sm text-gray-700">
|
||||
<span className="font-medium">Hidden event</span> — not shown in the public listing; accessible by direct link only
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" checked={!requiresAuth} onChange={e => setRequiresAuth(!e.target.checked)} />
|
||||
<span className="text-sm text-gray-700">
|
||||
<span className="font-medium">Allow unauthenticated registration</span> — guests can register without creating an account
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
<Button type="submit" loading={loading}>Create Event</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user