50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { use } from "react"
|
|
import { useQuery } from "@tanstack/react-query"
|
|
import { useAuthApi } from "@/shared/useApi"
|
|
import { APPOINTMENT_ROUTES } from "@garage/api"
|
|
import { AppointmentGeneralInfo } from "@/modules/appointments/appointment-general-info"
|
|
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
import { Skeleton } from "@/shared/components/ui/skeleton"
|
|
|
|
export default function AppointmentDetailsPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = use(params)
|
|
const api = useAuthApi()
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: [APPOINTMENT_ROUTES.INDEX, "detail", id],
|
|
queryFn: async () => {
|
|
const response = await api.appointments.list()
|
|
const items = (response as any)?.data ?? []
|
|
return items.find((item: any) => String(item.id) === id) ?? null
|
|
},
|
|
})
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<DashboardPage header={null}>
|
|
<div className="grid gap-6 md:grid-cols-2 p-6">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-48 rounded-xl" />
|
|
))}
|
|
</div>
|
|
</DashboardPage>
|
|
)
|
|
}
|
|
|
|
if (!data) {
|
|
return (
|
|
<DashboardPage header={null}>
|
|
<p className="text-muted-foreground p-6">Appointment not found.</p>
|
|
</DashboardPage>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<DashboardPage header={null}>
|
|
<AppointmentGeneralInfo appointment={data} />
|
|
</DashboardPage>
|
|
)
|
|
}
|