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

apps/start/src/integrations/tanstack-query/devtools.tsx

@@ -0,0 +1,6 @@
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+
+export default {
+  name: 'Tanstack Query',
+  render: <ReactQueryDevtoolsPanel />,
+};

apps/start/src/integrations/tanstack-query/root-provider.tsx

@@ -0,0 +1,86 @@
+import { QueryClient } from '@tanstack/react-query';
+import { createTRPCClient, httpLink } from '@trpc/client';
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
+import superjson from 'superjson';
+
+import { TRPCProvider } from '@/integrations/trpc/react';
+import type { AppRouter } from '@openpanel/trpc';
+import { createIsomorphicFn } from '@tanstack/react-start';
+import { getRequestHeaders } from '@tanstack/react-start/server';
+import { useMemo } from 'react';
+
+type Headers = ReturnType<typeof getRequestHeaders>;
+
+export const getIsomorphicHeaders = createIsomorphicFn()
+  .server(() => {
+    return getRequestHeaders();
+  })
+  .client(() => ({}) as Headers);
+
+// Create a function that returns a tRPC client with optional cookies
+export function createTRPCClientWithHeaders(apiUrl: string) {
+  return createTRPCClient<AppRouter>({
+    links: [
+      httpLink({
+        transformer: superjson,
+        url: `${apiUrl}/trpc`,
+        headers: () => getIsomorphicHeaders(),
+        fetch: (url, options) => {
+          return fetch(url, {
+            ...options,
+            mode: 'cors',
+            credentials: 'include',
+          });
+        },
+      }),
+    ],
+  });
+}
+
+export function getContext(apiUrl: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+        refetchOnReconnect: false,
+      },
+      dehydrate: { serializeData: superjson.serialize },
+      hydrate: { deserializeData: superjson.deserialize },
+    },
+  });
+
+  // Create a tRPC client with cookies if provided
+  const client = createTRPCClientWithHeaders(apiUrl);
+
+  const serverHelpers = createTRPCOptionsProxy({
+    client: client,
+    queryClient: queryClient,
+  });
+  return {
+    queryClient,
+    trpc: serverHelpers,
+  };
+}
+
+export function Provider({
+  children,
+  queryClient,
+  apiUrl,
+}: {
+  children: React.ReactNode;
+  queryClient: QueryClient;
+  apiUrl: string;
+}) {
+  const trpcClient = useMemo(
+    () => createTRPCClientWithHeaders(apiUrl),
+    [apiUrl],
+  );
+  return (
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      {children}
+    </TRPCProvider>
+  );
+}

apps/start/src/integrations/trpc/react.ts

@@ -0,0 +1,21 @@
+import type { AppRouter } from '@openpanel/trpc';
+import type { TRPCClientErrorBase } from '@trpc/client';
+import { createTRPCContext } from '@trpc/tanstack-react-query';
+import { type ExternalToast, toast } from 'sonner';
+
+export const { TRPCProvider, useTRPC } = createTRPCContext<AppRouter>();
+
+export function handleError(error: TRPCClientErrorBase<any>) {
+  toast('Error', {
+    description: error.message,
+  });
+}
+
+export function handleErrorToastOptions(options: ExternalToast) {
+  return (error: TRPCClientErrorBase<any>) => {
+    toast('Error', {
+      description: error.message,
+      ...options,
+    });
+  };
+}