113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
import { IconCalendar, IconClock, IconCreditCard, IconCircleCheck } from "@tabler/icons-react"
|
|
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
|
|
type PatientStats = {
|
|
upcomingAppointments: number
|
|
completedAppointments: number
|
|
totalSpent: number
|
|
pendingPayments: number
|
|
}
|
|
|
|
export function PatientSectionCards({ stats }: { stats: PatientStats }) {
|
|
return (
|
|
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>Upcoming Appointments</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
{stats.upcomingAppointments}
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="outline">
|
|
<IconCalendar className="size-3" />
|
|
Scheduled
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Your scheduled visits <IconClock className="size-4" />
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
Appointments waiting for you
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>Completed Visits</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
{stats.completedAppointments}
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="outline">
|
|
<IconCircleCheck className="size-3" />
|
|
Done
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Total completed appointments <IconCircleCheck className="size-4" />
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
Your dental care history
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>Total Spent</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
₱{stats.totalSpent.toLocaleString('en-PH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="outline">
|
|
<IconCreditCard className="size-3" />
|
|
Paid
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Total payments made <IconCreditCard className="size-4" />
|
|
</div>
|
|
<div className="text-muted-foreground">Lifetime spending on dental care</div>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>Pending Payments</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
₱{stats.pendingPayments.toLocaleString('en-PH', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="secondary">
|
|
<IconClock className="size-3" />
|
|
Pending
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Outstanding balance <IconCreditCard className="size-4" />
|
|
</div>
|
|
<div className="text-muted-foreground">Payments awaiting settlement</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|