import { Grid } from "@tremor/react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc"; import { SkeletonContainer, SkeletonText } from "@calcom/ui"; import { useFilterContext } from "../context/provider"; import { CardInsights } from "./Card"; import { KPICard } from "./KPICard"; export const BookingKPICards = () => { const { t } = useLocale(); const { filter } = useFilterContext(); const { dateRange, selectedEventTypeId, selectedUserId, selectedMemberUserId } = filter; const [startDate, endDate] = dateRange; const { selectedTeamId: teamId } = filter; const { data, isSuccess, isLoading } = trpc.viewer.insights.eventsByStatus.useQuery({ startDate: startDate.toISOString(), endDate: endDate.toISOString(), teamId, eventTypeId: selectedEventTypeId ?? undefined, memberUserId: selectedMemberUserId ?? undefined, userId: selectedUserId ?? undefined, }); const categories: { title: string; index: "created" | "completed" | "rescheduled" | "cancelled"; }[] = [ { title: t("events_created"), index: "created", }, { title: t("events_completed"), index: "completed", }, { title: t("events_rescheduled"), index: "rescheduled", }, { title: t("events_cancelled"), index: "cancelled", }, ]; if (isLoading) { return ; } if (!isSuccess || !startDate || !endDate || (!teamId && !selectedUserId)) return null; return ( <> {categories.map((item) => ( ))} ); }; const LoadingKPICards = (props: { categories: { title: string; index: string }[] }) => { const { categories } = props; return ( {categories.map((item) => ( ))} ); };