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/events/event-list-item.tsx
+++ b/apps/start/src/components/events/event-list-item.tsx
@@ -0,0 +1,114 @@
+import { Tooltiper } from '@/components/ui/tooltip';
+import { useAppParams } from '@/hooks/use-app-params';
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { pushModal } from '@/modals';
+import { cn } from '@/utils/cn';
+import { getProfileName } from '@/utils/getters';
+import { Link } from '@tanstack/react-router';
+
+import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
+
+import { SerieIcon } from '../report-chart/common/serie-icon';
+import { EventIcon } from './event-icon';
+
+type EventListItemProps = IServiceEventMinimal | IServiceEvent;
+
+export function EventListItem(props: EventListItemProps) {
+  const { organizationId, projectId } = useAppParams();
+  const { createdAt, name, path, duration, meta } = props;
+  const profile = 'profile' in props ? props.profile : null;
+
+  const number = useNumber();
+
+  const renderName = () => {
+    if (name === 'screen_view') {
+      if (path.includes('/')) {
+        return path;
+      }
+
+      return `Route: ${path}`;
+    }
+
+    return name.replace(/_/g, ' ');
+  };
+
+  const renderDuration = () => {
+    if (name === 'screen_view') {
+      return (
+        <span className="text-muted-foreground">
+          {number.shortWithUnit(duration / 1000, 'min')}
+        </span>
+      );
+    }
+
+    return null;
+  };
+
+  const isMinimal = 'minimal' in props;
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          if (!isMinimal) {
+            pushModal('EventDetails', {
+              id: props.id,
+              projectId,
+              createdAt,
+            });
+          }
+        }}
+        className={cn(
+          'card hover:bg-light-background flex w-full items-center justify-between rounded-lg p-4 transition-colors',
+          meta?.conversion &&
+            `bg-${meta.color}-50 dark:bg-${meta.color}-900 hover:bg-${meta.color}-100 dark:hover:bg-${meta.color}-700`,
+        )}
+      >
+        <div>
+          <div className="flex items-center gap-4 text-left ">
+            <EventIcon size="sm" name={name} meta={meta} />
+            <span>
+              <span className="font-medium">{renderName()}</span>
+              {'  '}
+              {renderDuration()}
+            </span>
+          </div>
+          <div className="pl-10">
+            <div className="flex origin-left scale-75 gap-1">
+              <SerieIcon name={props.country} />
+              <SerieIcon name={props.os} />
+              <SerieIcon name={props.browser} />
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-4">
+          {profile && (
+            <Tooltiper asChild content={getProfileName(profile)}>
+              <Link
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                to={'/$organizationId/$projectId/profiles/$profileId'}
+                params={{
+                  organizationId,
+                  projectId,
+                  profileId: profile.id,
+                }}
+                className="max-w-[80px] overflow-hidden text-ellipsis whitespace-nowrap  text-muted-foreground hover:underline"
+              >
+                {getProfileName(profile)}
+              </Link>
+            </Tooltiper>
+          )}
+
+          <Tooltiper asChild content={createdAt.toLocaleString()}>
+            <div className=" text-muted-foreground">
+              {createdAt.toLocaleTimeString()}
+            </div>
+          </Tooltiper>
+        </div>
+      </button>
+    </>
+  );
+}