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/common/previous-diff-indicator.tsx
+++ b/apps/start/src/components/report-chart/common/previous-diff-indicator.tsx
@@ -0,0 +1,157 @@
+import { useNumber } from '@/hooks/use-numer-formatter';
+import { cn } from '@/utils/cn';
+import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';
+
+import { useReportChartContext } from '../context';
+
+export function getDiffIndicator<A, B, C>(
+  inverted: boolean | undefined,
+  state: string | undefined | null,
+  positive: A,
+  negative: B,
+  neutral: C,
+): A | B | C {
+  if (state === 'neutral' || !state) {
+    return neutral;
+  }
+
+  if (inverted === true) {
+    return state === 'positive' ? negative : positive;
+  }
+  return state === 'positive' ? positive : negative;
+}
+
+// TODO: Fix this mess!
+
+interface PreviousDiffIndicatorProps {
+  diff?: number | null | undefined;
+  state?: string | null | undefined;
+  children?: React.ReactNode;
+  inverted?: boolean;
+  className?: string;
+  size?: 'sm' | 'lg' | 'md' | 'xs';
+}
+
+export function PreviousDiffIndicator({
+  diff,
+  state,
+  inverted,
+  size = 'sm',
+  children,
+  className,
+}: PreviousDiffIndicatorProps) {
+  const {
+    report: { previousIndicatorInverted, previous },
+  } = useReportChartContext();
+  const variant = getDiffIndicator(
+    inverted ?? previousIndicatorInverted,
+    state,
+    'bg-emerald-300',
+    'bg-rose-300',
+    undefined,
+  );
+  const number = useNumber();
+
+  if (diff === null || diff === undefined || previous === false) {
+    return children ?? null;
+  }
+
+  const renderIcon = () => {
+    if (state === 'positive') {
+      return <ArrowUpIcon strokeWidth={3} size={10} color="#000" />;
+    }
+    if (state === 'negative') {
+      return <ArrowDownIcon strokeWidth={3} size={10} color="#000" />;
+    }
+    return null;
+  };
+
+  return (
+    <>
+      <div
+        className={cn(
+          'flex items-center gap-1 font-mono font-medium',
+          size === 'lg' && 'gap-2',
+          className,
+        )}
+      >
+        <div
+          className={cn(
+            'flex size-4 items-center justify-center rounded-full',
+            variant,
+            size === 'lg' && 'size-8',
+            size === 'md' && 'size-6',
+            size === 'xs' && 'size-3',
+          )}
+        >
+          {renderIcon()}
+        </div>
+        {number.format(diff)}%
+      </div>
+      {children}
+    </>
+  );
+}
+
+interface PreviousDiffIndicatorPureProps {
+  diff?: number | null | undefined;
+  state?: string | null | undefined;
+  inverted?: boolean;
+  size?: 'sm' | 'lg' | 'md' | 'xs';
+  className?: string;
+  showPrevious?: boolean;
+}
+
+export function PreviousDiffIndicatorPure({
+  diff,
+  state,
+  inverted,
+  size = 'sm',
+  className,
+  showPrevious = true,
+}: PreviousDiffIndicatorPureProps) {
+  const variant = getDiffIndicator(
+    inverted,
+    state,
+    'bg-emerald-300',
+    'bg-rose-300',
+    undefined,
+  );
+
+  if (diff === null || diff === undefined || !showPrevious) {
+    return null;
+  }
+
+  const renderIcon = () => {
+    if (state === 'positive') {
+      return <ArrowUpIcon strokeWidth={3} size={10} color="#000" />;
+    }
+    if (state === 'negative') {
+      return <ArrowDownIcon strokeWidth={3} size={10} color="#000" />;
+    }
+    return null;
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-1 font-mono font-medium',
+        size === 'lg' && 'gap-2',
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          'flex size-2.5 items-center justify-center rounded-full',
+          variant,
+          size === 'lg' && 'size-8',
+          size === 'md' && 'size-6',
+          size === 'xs' && 'size-3',
+        )}
+      >
+        {renderIcon()}
+      </div>
+      {diff.toFixed(1)}%
+    </div>
+  );
+}