312 lines
11 KiB
TypeScript
312 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Users,
|
|
UserCheck,
|
|
Calendar,
|
|
CalendarCheck,
|
|
CalendarX,
|
|
DollarSign,
|
|
TrendingUp,
|
|
ArrowUpRight,
|
|
ArrowDownRight,
|
|
FileText,
|
|
} from "lucide-react";
|
|
import { useAppTheme } from "@/components/ThemeProvider";
|
|
import { getAllUsers } from "@/lib/actions/auth";
|
|
import { getAppointmentStats, listAppointments } from "@/lib/actions/appointments";
|
|
import { toast } from "sonner";
|
|
import type { User } from "@/lib/models/auth";
|
|
import type { Appointment } from "@/lib/models/appointments";
|
|
|
|
interface DashboardStats {
|
|
total_users: number;
|
|
active_users: number;
|
|
total_bookings: number;
|
|
upcoming_bookings: number;
|
|
completed_bookings: number;
|
|
cancelled_bookings: number;
|
|
total_revenue: number;
|
|
monthly_revenue: number;
|
|
trends: {
|
|
total_users: string;
|
|
active_users: string;
|
|
total_bookings: string;
|
|
upcoming_bookings: string;
|
|
completed_bookings: string;
|
|
cancelled_bookings: string;
|
|
total_revenue: string;
|
|
monthly_revenue: string;
|
|
};
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const [stats, setStats] = useState<DashboardStats | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [timePeriod, setTimePeriod] = useState<string>("last_month");
|
|
const { theme } = useAppTheme();
|
|
const isDark = theme === "dark";
|
|
|
|
useEffect(() => {
|
|
const fetchStats = async () => {
|
|
setLoading(true);
|
|
try {
|
|
// Fetch all data in parallel
|
|
const [users, appointmentStats, appointments] = await Promise.all([
|
|
getAllUsers().catch(() => [] as User[]),
|
|
getAppointmentStats().catch(() => null),
|
|
listAppointments().catch(() => [] as Appointment[]),
|
|
]);
|
|
|
|
// Calculate statistics
|
|
// Use users count from appointment stats if available, otherwise use getAllUsers result
|
|
const totalUsers = appointmentStats?.users ?? users.length;
|
|
const activeUsers = users.filter(
|
|
(user) => user.is_active === true || user.isActive === true
|
|
).length;
|
|
|
|
const totalBookings = appointmentStats?.total_requests || appointments.length;
|
|
const upcomingBookings = appointmentStats?.scheduled ||
|
|
appointments.filter((apt) => apt.status === "scheduled").length;
|
|
// Completed bookings - not in API status types, so set to 0
|
|
const completedBookings = 0;
|
|
const cancelledBookings = appointmentStats?.rejected ||
|
|
appointments.filter((apt) => apt.status === "rejected").length;
|
|
|
|
// Calculate revenue (assuming appointments have amount field, defaulting to 0)
|
|
const now = new Date();
|
|
const currentMonth = now.getMonth();
|
|
const currentYear = now.getFullYear();
|
|
|
|
const totalRevenue = appointments.reduce((sum, apt) => {
|
|
// If appointment has amount field, use it, otherwise default to 0
|
|
const amount = (apt as any).amount || 0;
|
|
return sum + amount;
|
|
}, 0);
|
|
|
|
const monthlyRevenue = appointments
|
|
.filter((apt) => {
|
|
if (!apt.scheduled_datetime) return false;
|
|
const aptDate = new Date(apt.scheduled_datetime);
|
|
return (
|
|
aptDate.getMonth() === currentMonth &&
|
|
aptDate.getFullYear() === currentYear
|
|
);
|
|
})
|
|
.reduce((sum, apt) => {
|
|
const amount = (apt as any).amount || 0;
|
|
return sum + amount;
|
|
}, 0);
|
|
|
|
// For now, use static trends (in a real app, you'd calculate these from historical data)
|
|
const trends = {
|
|
total_users: "+12%",
|
|
active_users: "+8%",
|
|
total_bookings: "+24%",
|
|
upcoming_bookings: "+6",
|
|
completed_bookings: "0%",
|
|
cancelled_bookings: "0%",
|
|
total_revenue: "+18%",
|
|
monthly_revenue: "+32%",
|
|
};
|
|
|
|
setStats({
|
|
total_users: totalUsers,
|
|
active_users: activeUsers,
|
|
total_bookings: totalBookings,
|
|
upcoming_bookings: upcomingBookings,
|
|
completed_bookings: completedBookings,
|
|
cancelled_bookings: cancelledBookings,
|
|
total_revenue: totalRevenue,
|
|
monthly_revenue: monthlyRevenue,
|
|
trends,
|
|
});
|
|
} catch (error) {
|
|
toast.error("Failed to load dashboard statistics");
|
|
// Set default values on error
|
|
setStats({
|
|
total_users: 0,
|
|
active_users: 0,
|
|
total_bookings: 0,
|
|
upcoming_bookings: 0,
|
|
completed_bookings: 0,
|
|
cancelled_bookings: 0,
|
|
total_revenue: 0,
|
|
monthly_revenue: 0,
|
|
trends: {
|
|
total_users: "0%",
|
|
active_users: "0%",
|
|
total_bookings: "0%",
|
|
upcoming_bookings: "0",
|
|
completed_bookings: "0%",
|
|
cancelled_bookings: "0%",
|
|
total_revenue: "0%",
|
|
monthly_revenue: "0%",
|
|
},
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchStats();
|
|
}, [timePeriod]);
|
|
|
|
const statCards = [
|
|
{
|
|
title: "Total Users",
|
|
value: stats?.total_users ?? 0,
|
|
icon: Users,
|
|
trend: stats?.trends.total_users ?? "0%",
|
|
trendUp: true,
|
|
},
|
|
{
|
|
title: "Active Users",
|
|
value: stats?.active_users ?? 0,
|
|
icon: UserCheck,
|
|
trend: stats?.trends.active_users ?? "0%",
|
|
trendUp: true,
|
|
},
|
|
{
|
|
title: "Total Bookings",
|
|
value: stats?.total_bookings ?? 0,
|
|
icon: Calendar,
|
|
trend: stats?.trends.total_bookings ?? "0%",
|
|
trendUp: true,
|
|
},
|
|
{
|
|
title: "Upcoming Bookings",
|
|
value: stats?.upcoming_bookings ?? 0,
|
|
icon: CalendarCheck,
|
|
trend: stats?.trends.upcoming_bookings ?? "0",
|
|
trendUp: true,
|
|
},
|
|
{
|
|
title: "Completed Bookings",
|
|
value: stats?.completed_bookings ?? 0,
|
|
icon: CalendarCheck,
|
|
trend: stats?.trends.completed_bookings ?? "0%",
|
|
trendUp: true,
|
|
},
|
|
{
|
|
title: "Cancelled Bookings",
|
|
value: stats?.cancelled_bookings ?? 0,
|
|
icon: CalendarX,
|
|
trend: stats?.trends.cancelled_bookings ?? "0%",
|
|
trendUp: false,
|
|
},
|
|
];
|
|
|
|
|
|
const getTrendClasses = (trendUp: boolean) => {
|
|
if (isDark) {
|
|
return trendUp ? "bg-green-500/20 text-green-200" : "bg-red-500/20 text-red-200";
|
|
}
|
|
return trendUp ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700";
|
|
};
|
|
|
|
return (
|
|
<div className={`min-h-screen ${isDark ? "bg-gray-900" : "bg-gray-50"}`}>
|
|
|
|
{/* Main Content */}
|
|
<main className="p-4 sm:p-6 lg:p-8 space-y-6">
|
|
{/* Welcome Section */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
|
<div>
|
|
<h1 className={`text-2xl font-semibold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
|
|
Welcome Back! Hammond
|
|
</h1>
|
|
<p className={`text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}>
|
|
Here's an overview of your practice today
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Link href="/deliverables">
|
|
<Button
|
|
variant="outline"
|
|
className={`flex items-center gap-2 ${isDark ? "bg-gray-800 border-gray-700 text-gray-100 hover:bg-gray-700" : "bg-white border-gray-200 text-gray-900 hover:bg-gray-50"}`}
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
<span className="hidden sm:inline">Deliverables</span>
|
|
</Button>
|
|
</Link>
|
|
<Select value={timePeriod} onValueChange={setTimePeriod}>
|
|
<SelectTrigger className={`w-full sm:w-[200px] cursor-pointer ${isDark ? "bg-gray-800 border-gray-700 text-gray-100" : "bg-white border-gray-200 text-gray-900"}`}>
|
|
<SelectValue placeholder="Select period" />
|
|
</SelectTrigger>
|
|
<SelectContent className={`${isDark ? "bg-gray-800 border-gray-700 text-gray-100" : "bg-white border-gray-200 text-gray-900"} cursor-pointer`}>
|
|
<SelectItem className={isDark ? "focus:bg-gray-700" : ""} value="last_week">Last Week</SelectItem>
|
|
<SelectItem className={isDark ? "focus:bg-gray-700" : ""} value="last_month">Last Month</SelectItem>
|
|
<SelectItem className={isDark ? "focus:bg-gray-700" : ""} value="last_year">Last Year</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className={`animate-spin rounded-full h-8 w-8 border-b-2 ${isDark ? "border-gray-600" : "border-gray-400"}`}></div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
|
|
{statCards.map((card, index) => {
|
|
const Icon = card.icon;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`rounded-lg border p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-3 sm:mb-4">
|
|
<div className={`p-2 sm:p-2.5 rounded-lg ${isDark ? "bg-gray-700" : "bg-gray-50"}`}>
|
|
<Icon className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? "text-gray-200" : "text-gray-600"}`} />
|
|
</div>
|
|
{card.showTrend !== false && card.trend && (
|
|
<div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getTrendClasses(card.trendUp)}`}>
|
|
{card.trendUp ? (
|
|
<ArrowUpRight className="w-3 h-3" />
|
|
) : (
|
|
<ArrowDownRight className="w-3 h-3" />
|
|
)}
|
|
<span className="hidden sm:inline">{card.trend}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className={`text-xs font-medium mb-1 sm:mb-2 uppercase tracking-wider ${isDark ? "text-rose-300" : "text-rose-600"}`}>
|
|
{card.title}
|
|
</h3>
|
|
<p className={`text-xl sm:text-2xl font-bold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
|
|
{card.value}
|
|
</p>
|
|
{card.showTrend !== false && (
|
|
<p className={`text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`}>
|
|
vs last month
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|