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/components/widget.tsx

@@ -0,0 +1,63 @@
+import { cn } from '@/utils/cn';
+import type { LucideIcon } from 'lucide-react';
+
+export interface WidgetHeadProps {
+  children: React.ReactNode;
+  className?: string;
+}
+export function WidgetHead({ children, className }: WidgetHeadProps) {
+  return (
+    <div
+      className={cn(
+        'border-b border-border p-4 [&_.title]:whitespace-nowrap [&_.title]:font-semibold [&_.title]:text-lg',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface WidgetTitleProps {
+  children: React.ReactNode;
+  className?: string;
+  icon?: LucideIcon;
+}
+export function WidgetTitle({
+  children,
+  className,
+  icon: Icon,
+}: WidgetTitleProps) {
+  return (
+    <div
+      className={cn(
+        'relative flex items-center gap-4',
+        className,
+        !!Icon && 'pl-12',
+      )}
+    >
+      {Icon && (
+        <div className="absolute left-0 rounded-lg bg-def-200 p-2">
+          <Icon size={18} />
+        </div>
+      )}
+      <div className="title">{children}</div>
+    </div>
+  );
+}
+
+export interface WidgetBodyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+export function WidgetBody({ children, className }: WidgetBodyProps) {
+  return <div className={cn('p-4', className)}>{children}</div>;
+}
+
+export interface WidgetProps {
+  children: React.ReactNode;
+  className?: string;
+}
+export function Widget({ children, className }: WidgetProps) {
+  return <div className={cn('card self-start', className)}>{children}</div>;
+}