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/hooks/use-breakpoint.ts

@@ -0,0 +1,32 @@
+import { useMediaQuery } from 'react-responsive';
+// import type { ScreensConfig } from 'tailwindcss/types/config';
+
+// TODO: Ensure we have same breakpoints as tailwind
+// const breakpoints = theme?.screens ?? {
+const breakpoints = {
+  xs: '480px',
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+};
+
+type ScreensConfig = typeof breakpoints;
+
+export function useBreakpoint<K extends string>(breakpointKey: K) {
+  const breakpointValue = breakpoints[breakpointKey as keyof ScreensConfig];
+  const bool = useMediaQuery({
+    query: `(max-width: ${breakpointValue as string})`,
+  });
+  const capitalizedKey =
+    breakpointKey[0]?.toUpperCase() + breakpointKey.substring(1);
+
+  type KeyAbove = `isAbove${Capitalize<K>}`;
+  type KeyBelow = `isBelow${Capitalize<K>}`;
+
+  return {
+    [breakpointKey]: Number(String(breakpointValue).replace(/[^0-9]/g, '')),
+    [`isAbove${capitalizedKey}`]: !bool,
+    [`isBelow${capitalizedKey}`]: bool,
+  } as Record<K, number> & Record<KeyAbove | KeyBelow, boolean>;
+}