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
+80
-22
@@ -1,10 +1,8 @@
|
||||
import { EventCard } from "@/components/events/EventCard";
|
||||
import { Navbar } from "@/components/layout/Navbar";
|
||||
import { Footer } from "@/components/layout/Footer";
|
||||
import { SectionHeader } from "@/components/shared/SectionHeader";
|
||||
import { ContactSection } from "@/components/shared/ContactSection";
|
||||
import { appName } from "@/lib/siteConfig";
|
||||
|
||||
import { Calendar, UserPlus, ArrowRight, CalendarCheck, Users, Heart, ShieldCheck } from "lucide-react";
|
||||
|
||||
type Event = {
|
||||
id: string;
|
||||
@@ -20,6 +18,13 @@ type Event = {
|
||||
|
||||
import { apiFetch } from "@/lib/api";
|
||||
|
||||
const FEATURES = [
|
||||
{ icon: CalendarCheck, title: "Meaningful Events", description: "Events designed to inspire, encourage and strengthen your faith." },
|
||||
{ icon: Calendar, title: "Easy Registration", description: "Simple and secure registration so you can focus on what matters." },
|
||||
{ icon: Users, title: "Community", description: "Connect with others and grow in a supportive and loving community." },
|
||||
{ icon: Heart, title: "Make an Impact", description: "Be part of what God is doing and make a difference together." },
|
||||
];
|
||||
|
||||
export default async function HomePage() {
|
||||
const events = await apiFetch<Event[]>("/api/events", { nextOptions: { next: { revalidate: 60 } } });
|
||||
const now = Date.now();
|
||||
@@ -34,34 +39,87 @@ export default async function HomePage() {
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-1">
|
||||
<section className="bg-gradient-to-br from-blue-100 to-white py-16 text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Welcome to {appName}</h1>
|
||||
<p className="text-gray-600 text-lg mb-6">Experience unforgettable moments. Powered by purpose.</p>
|
||||
<div className="space-x-4">
|
||||
<a href="/events" className="px-6 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700">
|
||||
View Events
|
||||
</a>
|
||||
<a href="/register" className="px-6 py-2 border border-blue-600 text-blue-600 rounded-xl hover:bg-blue-50">
|
||||
Join Us
|
||||
</a>
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-brand-50 via-white to-brand-50 py-20 text-center">
|
||||
<div className="absolute inset-0 pointer-events-none" aria-hidden="true">
|
||||
<div className="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-brand-100/60 blur-3xl" />
|
||||
<div className="absolute -bottom-24 -left-24 w-96 h-96 rounded-full bg-brand-100/40 blur-3xl" />
|
||||
</div>
|
||||
<div className="relative max-w-2xl mx-auto px-4">
|
||||
{sorted.length > 0 && (
|
||||
<div className="inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-full bg-white border border-brand-200 text-brand-700 shadow-sm mb-5">
|
||||
<CalendarCheck className="w-3.5 h-3.5" />
|
||||
{sorted.length} upcoming event{sorted.length === 1 ? "" : "s"}
|
||||
</div>
|
||||
)}
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-4 text-gray-900">Welcome to {appName}</h1>
|
||||
<p className="text-gray-600 text-lg mb-8">Experience unforgettable moments. Powered by purpose.</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
<a href="/events" className="inline-flex items-center gap-2 px-6 py-2.5 bg-brand-600 text-white rounded-xl hover:bg-brand-700 shadow-sm font-medium transition-colors">
|
||||
<Calendar className="w-4 h-4" />
|
||||
View Events
|
||||
</a>
|
||||
<a href="/register" className="inline-flex items-center gap-2 px-6 py-2.5 border border-brand-600 text-brand-600 rounded-xl hover:bg-brand-50 font-medium transition-colors">
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Join Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-12 px-4 max-w-7xl mx-auto">
|
||||
<SectionHeader title="Upcoming Events" />
|
||||
<div className="grid gap-6 md:grid-cols-3 sm:grid-cols-2">
|
||||
{sorted.slice(0, 3).map(event => (
|
||||
<EventCard key={event.id} event={event} />
|
||||
))}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-semibold text-gray-900">Upcoming Events</h2>
|
||||
<a href="/events" className="hidden sm:inline-flex items-center gap-1 text-sm font-medium text-brand-600 hover:underline">
|
||||
View all events
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-center mt-8">
|
||||
<a href="/events" className="text-blue-600 hover:underline text-sm">
|
||||
View all events →
|
||||
{sorted.length === 0 ? (
|
||||
<div className="text-center py-12 border rounded-xl bg-gray-50">
|
||||
<CalendarCheck className="w-8 h-8 text-gray-300 mx-auto mb-2" />
|
||||
<p className="text-gray-500 text-sm">No upcoming events right now — check back soon.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6 md:grid-cols-3 sm:grid-cols-2">
|
||||
{sorted.slice(0, 3).map(event => (
|
||||
<EventCard key={event.id} event={event} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center mt-8 sm:hidden">
|
||||
<a href="/events" className="inline-flex items-center gap-1 text-brand-600 hover:underline text-sm font-medium">
|
||||
View all events
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ContactSection />
|
||||
<section className="bg-gray-50 py-14 px-4">
|
||||
<div className="max-w-6xl mx-auto grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{FEATURES.map(f => {
|
||||
const Icon = f.icon;
|
||||
return (
|
||||
<div key={f.title} className="text-center sm:text-left">
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-50 flex items-center justify-center mb-3 mx-auto sm:mx-0">
|
||||
<Icon className="w-6 h-6 text-brand-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-1">{f.title}</h3>
|
||||
<p className="text-sm text-gray-600">{f.description}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-12 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-brand-50 mb-4">
|
||||
<ShieldCheck className="w-6 h-6 text-brand-600" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">Secure & reliable</h2>
|
||||
<p className="text-sm text-gray-600">Your details and payments are handled securely from registration through to the day of the event.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
Reference in New Issue
Block a user