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/profiles/table/columns.tsx
+++ b/apps/start/src/components/profiles/table/columns.tsx
@@ -0,0 +1,131 @@
+import { ProjectLink } from '@/components/links';
+import { SerieIcon } from '@/components/report-chart/common/serie-icon';
+import { Tooltiper } from '@/components/ui/tooltip';
+import { formatDateTime, formatTime } from '@/utils/date';
+import { getProfileName } from '@/utils/getters';
+import type { ColumnDef } from '@tanstack/react-table';
+import { isToday } from 'date-fns';
+
+import type { IServiceProfile } from '@openpanel/db';
+
+import { ProfileAvatar } from '../profile-avatar';
+
+export function useColumns(type: 'profiles' | 'power-users') {
+  const columns: ColumnDef<IServiceProfile>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        const profile = row.original;
+        return (
+          <ProjectLink
+            href={`/profiles/${profile.id}`}
+            className="flex items-center gap-2 font-medium"
+            title={getProfileName(profile, false)}
+          >
+            <ProfileAvatar size="sm" {...profile} />
+            {getProfileName(profile)}
+          </ProjectLink>
+        );
+      },
+    },
+    {
+      accessorKey: 'referrer',
+      header: 'Referrer',
+      cell({ row }) {
+        const { referrer, referrer_name } = row.original.properties;
+        const ref = referrer_name || referrer;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={ref} />
+            <span className="truncate">{ref}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'country',
+      header: 'Country',
+      cell({ row }) {
+        const { country, city } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={country} />
+            <span className="truncate">{city}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'os',
+      header: 'OS',
+      cell({ row }) {
+        const { os } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={os} />
+            <span className="truncate">{os}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'browser',
+      header: 'Browser',
+      cell({ row }) {
+        const { browser } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={browser} />
+            <span className="truncate">{browser}</span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'model',
+      header: 'Model',
+      cell({ row }) {
+        const { model, brand } = row.original.properties;
+        return (
+          <div className="flex min-w-0 items-center gap-2">
+            <SerieIcon name={brand} />
+            <span className="truncate">
+              {brand} / {model}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Last seen',
+      cell: ({ row }) => {
+        const profile = row.original;
+        return (
+          <Tooltiper asChild content={formatDateTime(profile.createdAt)}>
+            <div className="text-muted-foreground">
+              {isToday(profile.createdAt)
+                ? formatTime(profile.createdAt)
+                : formatDateTime(profile.createdAt)}
+            </div>
+          </Tooltiper>
+        );
+      },
+    },
+  ];
+
+  if (type === 'power-users') {
+    columns.unshift({
+      accessorKey: 'count',
+      header: 'Events',
+      cell: ({ row }) => {
+        const profile = row.original;
+        // @ts-expect-error
+        return <div>{profile.count}</div>;
+      },
+    });
+  }
+
+  return columns;
+}