first commit

calcom/packages/features/insights/components/HighestRatedMembersTable.tsx

@@ -0,0 +1,47 @@
+import { Title } from "@tremor/react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc";
+
+import { useFilterContext } from "../context/provider";
+import { CardInsights } from "./Card";
+import { LoadingInsight } from "./LoadingInsights";
+import { TotalUserFeedbackTable } from "./TotalUserFeedbackTable";
+
+export const HighestRatedMembersTable = () => {
+  const { t } = useLocale();
+  const { filter } = useFilterContext();
+  const { dateRange, selectedEventTypeId, isAll, initialConfig } = filter;
+  const [startDate, endDate] = dateRange;
+  const { selectedTeamId: teamId } = filter;
+
+  const { data, isSuccess, isPending } = trpc.viewer.insights.membersWithHighestRatings.useQuery(
+    {
+      startDate: startDate.toISOString(),
+      endDate: endDate.toISOString(),
+      teamId,
+      eventTypeId: selectedEventTypeId ?? undefined,
+      isAll,
+    },
+    {
+      staleTime: 30000,
+      trpc: {
+        context: { skipBatch: true },
+      },
+      enabled: !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll),
+    }
+  );
+
+  if (isPending) return <LoadingInsight />;
+
+  if (!isSuccess || !startDate || !endDate || !teamId) return null;
+
+  return data && data.length > 0 ? (
+    <CardInsights className="shadow-none">
+      <Title className="text-emphasis">{t("highest_rated_members")}</Title>
+      <TotalUserFeedbackTable data={data} />
+    </CardInsights>
+  ) : (
+    <></>
+  );
+};