feat: dashboard v2, esm, upgrades (#211)

* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
2025-10-16 12:27:44 +02:00
parent 436e81ecc9
commit 81a7e5d62e
741 changed files with 32695 additions and 16996 deletions
--- a/apps/start/src/components/report-chart/metric/index.tsx
+++ b/apps/start/src/components/report-chart/metric/index.tsx
@@ -0,0 +1,74 @@
+import { useTRPC } from '@/integrations/trpc/react';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+import { useReportChartContext } from '../context';
+import { Chart } from './chart';
+
+export function ReportMetricChart() {
+  const { isLazyLoading, report } = useReportChartContext();
+  const trpc = useTRPC();
+
+  const res = useQuery(
+    trpc.chart.chart.queryOptions(report, {
+      placeholderData: keepPreviousData,
+      staleTime: 1000 * 60 * 1,
+      enabled: !isLazyLoading,
+    }),
+  );
+
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
+    return <Loading />;
+  }
+
+  if (res.isError) {
+    return <Error />;
+  }
+
+  if (!res.data || res.data?.series.length === 0) {
+    return <Empty />;
+  }
+
+  return <Chart data={res.data} />;
+}
+
+export function Loading() {
+  return (
+    <div className="flex h-[78px] flex-col justify-between p-4">
+      <div className="h-3 w-1/2 animate-pulse rounded bg-def-200" />
+      <div className="row items-end justify-between">
+        <div className="h-6 w-1/3 animate-pulse rounded bg-def-200" />
+        <div className="h-3 w-1/5 animate-pulse rounded bg-def-200" />
+      </div>
+    </div>
+  );
+}
+
+export function Error() {
+  return (
+    <div className="relative h-[70px]">
+      <div className="opacity-50">
+        <Loading />
+      </div>
+      <div className="center-center absolute inset-0 text-muted-foreground">
+        <div className="text-sm font-medium">Error fetching data</div>
+      </div>
+    </div>
+  );
+}
+
+export function Empty() {
+  return (
+    <div className="relative h-[70px]">
+      <div className="opacity-50">
+        <Loading />
+      </div>
+      <div className="center-center absolute inset-0 text-muted-foreground">
+        <div className="text-sm font-medium">No data</div>
+      </div>
+    </div>
+  );
+}