gnx/DetnalCare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dental Care

Browse Source
This commit is contained in:
Iliyan Angelov
2025-11-16 14:29:51 +02:00
commit 39077550ef
194 changed files with 43197 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
components/patient/section-cards.tsx Normal file
View File

@@ -0,0 +1,112 @@
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>
)
}