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/realtime/realtime-referrals.tsx
+++ b/apps/start/src/components/realtime/realtime-referrals.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { useTRPC } from '@/integrations/trpc/react';
+import { useQuery } from '@tanstack/react-query';
+import { prop, uniqBy } from 'ramda';
+import { OverviewWidgetTable } from '../overview/overview-widget-table';
+import { SerieIcon } from '../report-chart/common/serie-icon';
+import { Tooltiper } from '../ui/tooltip';
+
+interface RealtimeReferralsProps {
+  projectId: string;
+}
+
+export function RealtimeReferrals({ projectId }: RealtimeReferralsProps) {
+  const trpc = useTRPC();
+  const query = useQuery(
+    trpc.realtime.referrals.queryOptions({
+      projectId,
+    }),
+  );
+
+  const data = query.data ?? [];
+  const maxCount = Math.max(...data.map((item) => item.count));
+  const number = useNumber();
+  const unique = uniqBy(prop('referrer_name'), data)
+    .filter((i) => !!i.referrer_name.trim())
+    .slice(0, 8);
+
+  return (
+    <div className="col h-full card">
+      <div className="row justify-between items-center p-4 pb-0">
+        <div className="font-medium text-muted-foreground">Referrals</div>
+        <div className="row gap-1">
+          {unique.map((item) => (
+            <Tooltiper key={item.referrer_name} content={item.referrer_name}>
+              <SerieIcon key={item.referrer_name} name={item.referrer_name} />
+            </Tooltiper>
+          ))}
+        </div>
+      </div>
+      <OverviewWidgetTable
+        data={data ?? []}
+        keyExtractor={(item) => item.referrer_name}
+        getColumnPercentage={(item) => item.count / maxCount}
+        columns={[
+          {
+            name: 'Referrer',
+            width: 'w-full',
+            render(item) {
+              return (
+                <Tooltiper asChild content={item.referrer_name} side="left">
+                  <div className="row items-center gap-2 min-w-0 relative">
+                    <SerieIcon name={item.referrer_name} />
+                    {item.referrer_name || '(Not set)'}
+                  </div>
+                </Tooltiper>
+              );
+            },
+          },
+          {
+            name: 'Duration',
+            width: '75px',
+            render(item) {
+              return number.shortWithUnit(item.avg_duration, 'min');
+            },
+          },
+          {
+            name: 'Events',
+            width: '84px',
+            render(item) {
+              return (
+                <div className="row gap-2 justify-end">
+                  <span className="font-semibold">
+                    {number.short(item.count)}
+                  </span>
+                </div>
+              );
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+}