313 lines
9.7 KiB
TypeScript
313 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { useSession } from "next-auth/react";
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { formatCurrency, formatDate } from "@/lib/utils";
|
|
import { StatCard, StatCardSkeleton } from "@/components/dashboard/stat-card";
|
|
import { OccupancyChart, OccupancyChartSkeleton } from "@/components/dashboard/occupancy-chart";
|
|
import { RecentBookings, RecentBookingsSkeleton } from "@/components/dashboard/recent-bookings";
|
|
import { QuickActions } from "@/components/dashboard/quick-actions";
|
|
import { useSite } from "@/contexts/site-context";
|
|
|
|
interface DashboardStats {
|
|
todayBookings: number;
|
|
todayRevenue: number;
|
|
occupancyRate: number;
|
|
activeMembers: number;
|
|
pendingBookings: number;
|
|
upcomingTournaments: number;
|
|
}
|
|
|
|
interface CourtOccupancy {
|
|
courtId: string;
|
|
courtName: string;
|
|
availableHours: number;
|
|
bookedHours: number;
|
|
occupancyPercent: number;
|
|
}
|
|
|
|
interface RecentBooking {
|
|
id: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
status: string;
|
|
court: {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
client: {
|
|
id: string;
|
|
name: string;
|
|
} | null;
|
|
}
|
|
|
|
interface DashboardData {
|
|
stats: DashboardStats;
|
|
courtOccupancy: CourtOccupancy[];
|
|
recentBookings: RecentBooking[];
|
|
date: string;
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { data: session } = useSession();
|
|
const { selectedSiteId, selectedSite } = useSite();
|
|
const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fetchDashboardData = useCallback(async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const url = selectedSiteId
|
|
? `/api/dashboard/stats?siteId=${selectedSiteId}`
|
|
: "/api/dashboard/stats";
|
|
|
|
const response = await fetch(url);
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Error loading dashboard data");
|
|
}
|
|
|
|
const data = await response.json();
|
|
setDashboardData(data);
|
|
} catch (err) {
|
|
console.error("Dashboard fetch error:", err);
|
|
setError(err instanceof Error ? err.message : "Unknown error");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [selectedSiteId]);
|
|
|
|
useEffect(() => {
|
|
fetchDashboardData();
|
|
}, [fetchDashboardData]);
|
|
|
|
const userName = session?.user?.name?.split(" ")[0] || "User";
|
|
const today = new Date();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Welcome Section */}
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-primary-800">
|
|
Welcome, {userName}
|
|
</h1>
|
|
<p className="text-primary-500 mt-1">
|
|
{formatDate(today)} - Admin panel
|
|
</p>
|
|
</div>
|
|
{selectedSite && (
|
|
<div className="flex items-center gap-2 px-4 py-2 bg-accent/10 rounded-lg border border-accent/20">
|
|
<svg
|
|
className="w-5 h-5 text-accent"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm font-medium text-accent-700">
|
|
Showing: {selectedSite.name}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Error State */}
|
|
{error && (
|
|
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
|
|
<div className="flex items-center gap-2">
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<span>{error}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats Cards Row */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{isLoading ? (
|
|
<>
|
|
<StatCardSkeleton />
|
|
<StatCardSkeleton />
|
|
<StatCardSkeleton />
|
|
<StatCardSkeleton />
|
|
</>
|
|
) : dashboardData ? (
|
|
<>
|
|
<StatCard
|
|
title="Today's Bookings"
|
|
value={dashboardData.stats.todayBookings}
|
|
color="blue"
|
|
icon={
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
<StatCard
|
|
title="Today's Revenue"
|
|
value={formatCurrency(dashboardData.stats.todayRevenue)}
|
|
color="green"
|
|
icon={
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
<StatCard
|
|
title="Occupancy"
|
|
value={`${dashboardData.stats.occupancyRate}%`}
|
|
color="purple"
|
|
icon={
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
<StatCard
|
|
title="Active Members"
|
|
value={dashboardData.stats.activeMembers}
|
|
color="accent"
|
|
icon={
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Secondary Stats Row */}
|
|
{!isLoading && dashboardData && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<StatCard
|
|
title="Pending Bookings"
|
|
value={dashboardData.stats.pendingBookings}
|
|
color="orange"
|
|
icon={
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
<StatCard
|
|
title="Upcoming Events"
|
|
value={dashboardData.stats.upcomingTournaments}
|
|
color="primary"
|
|
icon={
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Two Column Layout: Occupancy + Recent Bookings */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{isLoading ? (
|
|
<>
|
|
<OccupancyChartSkeleton />
|
|
<RecentBookingsSkeleton />
|
|
</>
|
|
) : dashboardData ? (
|
|
<>
|
|
<OccupancyChart data={dashboardData.courtOccupancy} />
|
|
<RecentBookings bookings={dashboardData.recentBookings} />
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<QuickActions />
|
|
</div>
|
|
);
|
|
}
|