69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { CalendarCheck, CalendarX, Eye, Ban } from "lucide-react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import type { DashboardData } from "./use-dashboard-data"
|
|
|
|
type Props = { data: DashboardData }
|
|
|
|
export function AppointmentsSummaryCard({ data }: Props) {
|
|
const totals = data.appointments_summary?.totals
|
|
|
|
const stats = [
|
|
{
|
|
label: "Completed",
|
|
value: totals?.completed?.text ?? "0 Appt.",
|
|
icon: CalendarCheck,
|
|
color: "text-emerald-600",
|
|
bg: "bg-emerald-500/10",
|
|
},
|
|
{
|
|
label: "No Shows",
|
|
value: totals?.no_shows?.text ?? "0 Appt.",
|
|
icon: Eye,
|
|
color: "text-amber-600",
|
|
bg: "bg-amber-500/10",
|
|
},
|
|
{
|
|
label: "No-Show Rate",
|
|
value: totals?.no_shows_rate?.text ?? "0%",
|
|
icon: Ban,
|
|
color: "text-red-600",
|
|
bg: "bg-red-500/10",
|
|
},
|
|
{
|
|
label: "Cancelled",
|
|
value: totals?.cancelled?.text ?? "0 Appt.",
|
|
icon: CalendarX,
|
|
color: "text-slate-600",
|
|
bg: "bg-slate-500/10",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Appointments Summary</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{stats.map((stat) => (
|
|
<div
|
|
key={stat.label}
|
|
className="flex items-center gap-3 rounded-lg border p-3"
|
|
>
|
|
<div className={`rounded-md p-2 ${stat.bg}`}>
|
|
<stat.icon className={`h-4 w-4 ${stat.color}`} />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium">{stat.value}</p>
|
|
<p className="text-xs text-muted-foreground">{stat.label}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|