From ccd1a1456fe7ca1a9387e748910e5626d48aa658 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Sun, 4 Feb 2024 13:23:21 +0100
Subject: [PATCH] a lot

---
 .gitignore                                    |   4 +-
 .vscode/settings.json                         |   5 +-
 ROADMAP.md                                    |  15 +
 apps/sdk-api/package.json                     |  43 +
 apps/sdk-api/scripts/test-events.ts           | 226 ++++++
 .../src/controllers/event.controller.ts       | 176 ++++
 apps/sdk-api/src/index.ts                     |  78 ++
 apps/sdk-api/src/routes/event.router.ts       |  18 +
 apps/sdk-api/src/utils/auth.ts                |  43 +
 apps/sdk-api/src/utils/parseIp.ts             |  25 +
 apps/sdk-api/src/utils/parseUserAgent.ts      |  29 +
 apps/sdk-api/tsconfig.json                    |  12 +
 apps/sdk-api/tsup.config.ts                   |  18 +
 apps/web/package.json                         |   6 +
 .../[dashboardId]/list-reports.tsx            |  16 +-
 .../{ => dashboards}/[dashboardId]/page.tsx   |   0
 .../{ => dashboards}/header-dashboards.tsx    |   2 +-
 .../{ => dashboards}/list-dashboards.tsx      |   2 +-
 .../[projectId]/dashboards/page.tsx           |  25 +
 .../[projectId]/events/event-list-item.tsx    |   4 +-
 .../[projectId]/overview-metrics.tsx          | 272 +++++++
 .../[organizationId]/[projectId]/page.tsx     |  15 +-
 .../[projectId]/reports/report-editor.tsx     |  11 +-
 .../src/app/(app)/[organizationId]/page.tsx   |   7 +-
 apps/web/src/app/(app)/layout-menu.tsx        |  28 +-
 .../app/(app)/layout-sticky-below-header.tsx  |   2 +-
 apps/web/src/app/(app)/layout.tsx             |   7 +-
 apps/web/src/app/api/fml/route.ts             |  10 -
 apps/web/src/app/cookie-provider.tsx          |  24 -
 apps/web/src/app/layout.tsx                   |   7 +-
 apps/web/src/app/providers.tsx                |  12 +-
 .../app/share/project/[projectId]/page.tsx    |  33 +
 apps/web/src/components/ColorSquare.tsx       |   6 +
 apps/web/src/components/Logo.tsx              |  14 +-
 apps/web/src/components/Widget.tsx            |   6 +-
 .../src/components/events/ListProperties.tsx  |   2 +-
 apps/web/src/components/navbar/NavbarMenu.tsx |   3 +-
 .../overview/overview-filters-buttons.tsx     | 129 +++
 .../components/overview/overview-filters.tsx  | 121 +++
 .../overview/overview-top-devices.tsx         | 199 +++++
 .../overview/overview-top-events.tsx          |  75 ++
 .../components/overview/overview-top-geo.tsx  | 171 ++++
 .../overview/overview-top-pages.tsx           | 130 +++
 .../overview/overview-top-sources.tsx         | 245 ++++++
 .../components/overview/overview-widget.tsx   |  25 +
 .../components/overview/useOverviewOptions.ts | 234 ++++++
 .../components/overview/useOverviewWidget.tsx |  27 +
 .../report/PreviousDiffIndicator.tsx          |  37 +-
 .../src/components/report/ReportDateRange.tsx |  28 -
 .../web/src/components/report/ReportRange.tsx |  20 +
 .../components/report/ReportSaveButton.tsx    |   1 -
 .../components/report/chart/ChartProvider.tsx |  31 +-
 .../components/report/chart/MetricCard.tsx    |  81 ++
 .../report/chart/ReportAreaChart.tsx          |   2 +-
 .../report/chart/ReportBarChart.tsx           | 199 +++--
 .../report/chart/ReportChartTooltip.tsx       |  16 +-
 .../report/chart/ReportHistogramChart.tsx     |   2 +-
 .../report/chart/ReportLineChart.tsx          |   4 +-
 .../report/chart/ReportMapChart.tsx           |  40 +
 .../report/chart/ReportMetricChart.tsx        |  72 +-
 .../report/chart/ReportPieChart.tsx           | 120 +--
 .../web/src/components/report/chart/index.tsx |  29 +-
 apps/web/src/components/report/reportSlice.ts |  19 +
 .../sidebar/EventPropertiesCombobox.tsx       |  62 ++
 .../report/sidebar/ReportEventMore.tsx        |   6 +-
 .../report/sidebar/ReportEvents.tsx           |  69 +-
 .../report/sidebar/ReportForumula.tsx         |  26 +
 .../report/sidebar/ReportSidebar.tsx          |   2 +
 .../FilterItem.tsx}                           |  89 +--
 .../sidebar/filters/FiltersCombobox.tsx       |  61 ++
 .../report/sidebar/filters/FiltersList.tsx    |  19 +
 apps/web/src/components/ui/badge.tsx          |   4 +-
 apps/web/src/components/ui/button.tsx         |   2 +-
 apps/web/src/components/ui/combobox.tsx       |  27 +-
 apps/web/src/components/ui/sheet.tsx          |   2 +-
 apps/web/src/components/ui/table.tsx          |   9 +-
 apps/web/src/hooks/useNumerFormatter.ts       |   7 +-
 apps/web/src/hooks/useRechartDataModel.ts     |  10 +-
 apps/web/src/hooks/useVisibleSeries.ts        |   1 +
 apps/web/src/modals/SaveReport.tsx            |   2 +-
 .../src/server/api/routers/chart.formula.ts   | 264 ++++++
 apps/web/src/server/api/routers/chart.ts      | 752 +++++++-----------
 apps/web/src/server/api/routers/event.ts      |  52 +-
 apps/web/src/server/api/routers/report.ts     |   6 +-
 apps/web/src/server/chart-sql/getChartSql.ts  |  79 --
 apps/web/src/server/chart-sql/helpers.ts      | 140 ----
 apps/web/src/server/services/chart.service.ts | 167 ++++
 apps/web/src/server/services/event.service.ts |  10 +
 .../server/services/organization.service.ts   |  12 +
 .../src/server/services/project.service.ts    |  13 +
 .../src/server/services/reports.service.ts    |   9 +-
 apps/web/src/types/index.ts                   |   9 +-
 apps/web/src/utils/constants.ts               |  28 +-
 apps/web/src/utils/math.ts                    |  18 +-
 apps/web/src/utils/truncate.ts                |   6 +
 apps/web/src/utils/validation.ts              |  25 +-
 apps/worker/package.json                      |   1 +
 apps/worker/src/index.ts                      |  48 +-
 apps/worker/src/jobs/cron.salt.ts             |  22 +
 apps/worker/src/jobs/cron.ts                  |  13 +
 .../src/jobs/events.create-session-end.ts     |  56 ++
 apps/worker/src/jobs/events.ts                | 265 +-----
 packages/common/index.ts                      |   4 +
 packages/common/package.json                  |  32 +
 packages/common/src/crypto.ts                 |  51 ++
 packages/common/src/date.ts                   |   7 +
 .../utils => packages/common/src}/object.ts   |   0
 packages/common/src/profileId.ts              |  17 +
 packages/common/tsconfig.json                 |  12 +
 packages/db/clickhouse_tables.sql             |  46 ++
 packages/db/index.ts                          |  21 +-
 packages/db/package.json                      |   6 +-
 .../migration.sql                             |  17 +
 .../20240129163925_add_salts/migration.sql    |   8 +
 .../20240131204540_add_formula/migration.sql  |   2 +
 .../20240131212106_add_metric/migration.sql   |   6 +
 .../migration.sql                             |   2 +
 packages/db/prisma/schema.prisma              |  32 +-
 packages/db/scripts/insert.ts                 | 163 ++++
 packages/db/src/clickhouse-client.ts          |  51 ++
 packages/db/src/prisma-client.ts              |  15 +
 packages/db/src/prisma-types.ts               |  22 +
 packages/db/src/services/event.service.ts     | 113 +++
 packages/db/src/services/salt.ts              |  37 +
 packages/db/src/sql-builder.ts                |  56 ++
 packages/queue/index.ts                       |   2 +
 packages/queue/package.json                   |   1 +
 packages/queue/src/queues.ts                  |  27 +-
 packages/queue/src/utils.ts                   |   8 +
 packages/redis/index.ts                       |   3 +
 packages/redis/package.json                   |  32 +
 packages/redis/tsconfig.json                  |  12 +
 packages/sdk/index.ts                         | 254 +-----
 pnpm-lock.yaml                                | 629 ++++++++++++++-
 tooling/typescript/base.json                  |   2 +-
 135 files changed, 5588 insertions(+), 1758 deletions(-)
 create mode 100644 ROADMAP.md
 create mode 100644 apps/sdk-api/package.json
 create mode 100644 apps/sdk-api/scripts/test-events.ts
 create mode 100644 apps/sdk-api/src/controllers/event.controller.ts
 create mode 100644 apps/sdk-api/src/index.ts
 create mode 100644 apps/sdk-api/src/routes/event.router.ts
 create mode 100644 apps/sdk-api/src/utils/auth.ts
 create mode 100644 apps/sdk-api/src/utils/parseIp.ts
 create mode 100644 apps/sdk-api/src/utils/parseUserAgent.ts
 create mode 100644 apps/sdk-api/tsconfig.json
 create mode 100644 apps/sdk-api/tsup.config.ts
 rename apps/web/src/app/(app)/[organizationId]/[projectId]/{ => dashboards}/[dashboardId]/list-reports.tsx (92%)
 rename apps/web/src/app/(app)/[organizationId]/[projectId]/{ => dashboards}/[dashboardId]/page.tsx (100%)
 rename apps/web/src/app/(app)/[organizationId]/[projectId]/{ => dashboards}/header-dashboards.tsx (91%)
 rename apps/web/src/app/(app)/[organizationId]/[projectId]/{ => dashboards}/list-dashboards.tsx (97%)
 create mode 100644 apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx
 create mode 100644 apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx
 delete mode 100644 apps/web/src/app/api/fml/route.ts
 delete mode 100644 apps/web/src/app/cookie-provider.tsx
 create mode 100644 apps/web/src/app/share/project/[projectId]/page.tsx
 create mode 100644 apps/web/src/components/overview/overview-filters-buttons.tsx
 create mode 100644 apps/web/src/components/overview/overview-filters.tsx
 create mode 100644 apps/web/src/components/overview/overview-top-devices.tsx
 create mode 100644 apps/web/src/components/overview/overview-top-events.tsx
 create mode 100644 apps/web/src/components/overview/overview-top-geo.tsx
 create mode 100644 apps/web/src/components/overview/overview-top-pages.tsx
 create mode 100644 apps/web/src/components/overview/overview-top-sources.tsx
 create mode 100644 apps/web/src/components/overview/overview-widget.tsx
 create mode 100644 apps/web/src/components/overview/useOverviewOptions.ts
 create mode 100644 apps/web/src/components/overview/useOverviewWidget.tsx
 delete mode 100644 apps/web/src/components/report/ReportDateRange.tsx
 create mode 100644 apps/web/src/components/report/ReportRange.tsx
 create mode 100644 apps/web/src/components/report/chart/MetricCard.tsx
 create mode 100644 apps/web/src/components/report/chart/ReportMapChart.tsx
 create mode 100644 apps/web/src/components/report/sidebar/EventPropertiesCombobox.tsx
 create mode 100644 apps/web/src/components/report/sidebar/ReportForumula.tsx
 rename apps/web/src/components/report/sidebar/{ReportEventFilters.tsx => filters/FilterItem.tsx} (57%)
 create mode 100644 apps/web/src/components/report/sidebar/filters/FiltersCombobox.tsx
 create mode 100644 apps/web/src/components/report/sidebar/filters/FiltersList.tsx
 create mode 100644 apps/web/src/server/api/routers/chart.formula.ts
 delete mode 100644 apps/web/src/server/chart-sql/getChartSql.ts
 delete mode 100644 apps/web/src/server/chart-sql/helpers.ts
 create mode 100644 apps/web/src/server/services/chart.service.ts
 create mode 100644 apps/web/src/utils/truncate.ts
 create mode 100644 apps/worker/src/jobs/cron.salt.ts
 create mode 100644 apps/worker/src/jobs/cron.ts
 create mode 100644 apps/worker/src/jobs/events.create-session-end.ts
 create mode 100644 packages/common/index.ts
 create mode 100644 packages/common/package.json
 create mode 100644 packages/common/src/crypto.ts
 create mode 100644 packages/common/src/date.ts
 rename {apps/web/src/utils => packages/common/src}/object.ts (100%)
 create mode 100644 packages/common/src/profileId.ts
 create mode 100644 packages/common/tsconfig.json
 create mode 100644 packages/db/clickhouse_tables.sql
 create mode 100644 packages/db/prisma/migrations/20240122191559_remove_foreigen_key_profile_events/migration.sql
 create mode 100644 packages/db/prisma/migrations/20240129163925_add_salts/migration.sql
 create mode 100644 packages/db/prisma/migrations/20240131204540_add_formula/migration.sql
 create mode 100644 packages/db/prisma/migrations/20240131212106_add_metric/migration.sql
 create mode 100644 packages/db/prisma/migrations/20240202175049_add_events_count_on_project/migration.sql
 create mode 100644 packages/db/scripts/insert.ts
 create mode 100644 packages/db/src/clickhouse-client.ts
 create mode 100644 packages/db/src/prisma-client.ts
 create mode 100644 packages/db/src/prisma-types.ts
 create mode 100644 packages/db/src/services/event.service.ts
 create mode 100644 packages/db/src/services/salt.ts
 create mode 100644 packages/db/src/sql-builder.ts
 create mode 100644 packages/queue/src/utils.ts
 create mode 100644 packages/redis/index.ts
 create mode 100644 packages/redis/package.json
 create mode 100644 packages/redis/tsconfig.json

diff --git a/.gitignore b/.gitignore
index 233e84e5..a70ee3fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,9 @@
 packages/sdk/profileId.txt
 packages/sdk/test.ts
 dump.sql
-dump-*.sql
+dump-*
+.sql
+clickhouse
 
 # Logs
 
diff --git a/.vscode/settings.json b/.vscode/settings.json
index cc89dd2d..1e76b8a0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -15,5 +15,8 @@
   "typescript.preferences.autoImportFileExcludePatterns": [
     "next/router.d.ts",
     "next/dist/client/router.d.ts"
-  ]
+  ],
+  "[sql]": {
+    "editor.defaultFormatter": "adpyke.vscode-sql-formatter"
+  }
 }
diff --git a/ROADMAP.md b/ROADMAP.md
new file mode 100644
index 00000000..4eb2bc6d
--- /dev/null
+++ b/ROADMAP.md
@@ -0,0 +1,15 @@
+# Roadmap
+
+## Simple todos
+
+- [ ] add session_id on events table, link this id on create
+- [ ] add overview page containing
+  - [x] User histogram (last 30 minutes)
+  - [ ] Bounce rate
+  - [ ] Session duration
+  - [ ] Views per session
+  - [ ] Unique users
+  - [ ] Total users
+  - [ ] Total pageviews
+  - [ ] Total events
+- [ ]
diff --git a/apps/sdk-api/package.json b/apps/sdk-api/package.json
new file mode 100644
index 00000000..302bfa7a
--- /dev/null
+++ b/apps/sdk-api/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@mixan/sdk-api",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "dotenv -e ../../.env -c -v WATCH=1 tsup",
+    "start": "node dist/index.js",
+    "build": "rm -rf dist && tsup",
+    "lint": "eslint .",
+    "format": "prettier --check \"**/*.{mjs,ts,md,json}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fastify/cors": "^9.0.0",
+    "@mixan/common": "workspace:*",
+    "@mixan/db": "workspace:*",
+    "@mixan/queue": "workspace:*",
+    "fastify": "^4.25.2",
+    "pino": "^8.17.2",
+    "ramda": "^0.29.1",
+    "request-ip": "^3.3.0",
+    "ua-parser-js": "^1.0.37"
+  },
+  "devDependencies": {
+    "@mixan/eslint-config": "workspace:*",
+    "@mixan/prettier-config": "workspace:*",
+    "@mixan/tsconfig": "workspace:*",
+    "@mixan/types": "workspace:*",
+    "@types/ramda": "^0.29.6",
+    "@types/request-ip": "^0.0.41",
+    "@types/ua-parser-js": "^0.7.39",
+    "eslint": "^8.48.0",
+    "prettier": "^3.0.3",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@mixan/eslint-config/base"
+    ]
+  },
+  "prettier": "@mixan/prettier-config"
+}
diff --git a/apps/sdk-api/scripts/test-events.ts b/apps/sdk-api/scripts/test-events.ts
new file mode 100644
index 00000000..7df343be
--- /dev/null
+++ b/apps/sdk-api/scripts/test-events.ts
@@ -0,0 +1,226 @@
+import { omit, prop, uniqBy } from 'ramda';
+
+import { generateProfileId, getTime, toISOString } from '@mixan/common';
+import type { Event, IServiceCreateEventPayload } from '@mixan/db';
+import {
+  createEvent as createClickhouseEvent,
+  db,
+  formatClickhouseDate,
+  getSalts,
+} from '@mixan/db';
+
+import { parseIp } from '../src/utils/parseIp';
+import { parseUserAgent } from '../src/utils/parseUserAgent';
+
+const clean = omit([
+  'ip',
+  'os',
+  'ua',
+  'url',
+  'hash',
+  'host',
+  'path',
+  'device',
+  'screen',
+  'hostname',
+  'language',
+  'referrer',
+  'timezone',
+]);
+async function main() {
+  const events = await db.event.findMany({
+    where: {
+      project_id: '4e2798cb-e255-4e9d-960d-c9ad095aabd7',
+      name: 'screen_view',
+      createdAt: {
+        gte: new Date('2024-01-01'),
+        lt: new Date('2024-02-04'),
+      },
+    },
+    orderBy: {
+      createdAt: 'asc',
+    },
+  });
+
+  const grouped: Record<string, Event[]> = {};
+  let index = 0;
+  for (const event of events.slice()) {
+    // console.log(index, event.name, event.createdAt.toISOString());
+    index++;
+
+    const properties = event.properties as Record<string, any>;
+
+    if (properties.ua?.includes('bot')) {
+      // console.log('IGNORE', event.id);
+      continue;
+    }
+
+    if (!event.profile_id) {
+      // console.log('IGNORE', event.id);
+      continue;
+    }
+    const hej = grouped[event.profile_id];
+    if (hej) {
+      hej.push(event);
+    } else {
+      grouped[event.profile_id] = [event];
+    }
+  }
+
+  console.log('Total users', Object.keys(grouped).length);
+
+  let uidx = -1;
+  for (const profile_id of Object.keys(grouped)) {
+    uidx++;
+    console.log(`User index ${uidx}`);
+
+    const events = uniqBy(prop('createdAt'), grouped[profile_id] || []);
+
+    if (events) {
+      let lastSessionStart = null;
+      let screenViews = 0;
+      let totalDuration = 0;
+      console.log('new user...');
+      let eidx = -1;
+      for (const event of events) {
+        eidx++;
+        const prevEvent = events[eidx - 1];
+        const prevEventAt = prevEvent?.createdAt;
+
+        const nextEvent = events[eidx + 1];
+
+        const properties = event.properties as Record<string, any>;
+        const projectId = event.project_id;
+        const path = properties.path!;
+        const ip = properties.ip!;
+        const origin = 'https://mixan.kiddo.se';
+        const ua = properties.ua!;
+        const uaInfo = parseUserAgent(ua);
+        const salts = await getSalts();
+
+        const [profileId, geo] = await Promise.all([
+          generateProfileId({
+            salt: salts.current,
+            origin,
+            ip,
+            ua,
+          }),
+          parseIp(ip),
+        ]);
+
+        const isNextEventNewSession =
+          nextEvent &&
+          nextEvent.createdAt.getTime() - event.createdAt.getTime() >
+            1000 * 60 * 30;
+
+        const payload: IServiceCreateEventPayload = {
+          name: event.name,
+          profileId,
+          projectId,
+          properties: clean(properties),
+          createdAt: event.createdAt.toISOString(),
+          country: geo.country,
+          city: geo.city,
+          region: geo.region,
+          continent: geo.continent,
+          os: uaInfo.os,
+          osVersion: uaInfo.osVersion,
+          browser: uaInfo.browser,
+          browserVersion: uaInfo.browserVersion,
+          device: uaInfo.device,
+          brand: uaInfo.brand,
+          model: uaInfo.model,
+          duration:
+            nextEvent && !isNextEventNewSession
+              ? nextEvent.createdAt.getTime() - event.createdAt.getTime()
+              : 0,
+          path,
+          referrer: properties?.referrer?.host ?? '', // TODO
+          referrerName: properties?.referrer?.host ?? '', // TODO
+        };
+
+        if (!prevEventAt) {
+          lastSessionStart = await createSessionStart(payload);
+        } else if (
+          event.createdAt.getTime() - prevEventAt.getTime() >
+          1000 * 60 * 30
+        ) {
+          if (eidx > 0 && prevEventAt && lastSessionStart) {
+            await createSessionEnd(prevEventAt, lastSessionStart, {
+              screenViews,
+              totalDuration,
+            });
+            totalDuration = 0;
+            screenViews = 0;
+            lastSessionStart = await createSessionStart(payload);
+          }
+        }
+
+        screenViews++;
+        totalDuration += payload.duration;
+        await createEvent(payload);
+      } // for each user event
+
+      const prevEventAt = events[events.length - 1]?.createdAt;
+      if (prevEventAt && lastSessionStart) {
+        await createSessionEnd(prevEventAt, lastSessionStart, {
+          screenViews,
+          totalDuration,
+        });
+      }
+    }
+  }
+}
+
+async function createEvent(event: IServiceCreateEventPayload) {
+  console.log(
+    `Create ${event.name} - ${event.path} - ${formatClickhouseDate(
+      event.createdAt
+    )} - ${event.duration / 1000} sec`
+  );
+  await createClickhouseEvent(event);
+}
+
+async function createSessionStart(event: IServiceCreateEventPayload) {
+  const session: IServiceCreateEventPayload = {
+    ...event,
+    duration: 0,
+    name: 'session_start',
+    createdAt: toISOString(getTime(event.createdAt) - 10),
+  };
+
+  await createEvent(session);
+  return session;
+}
+
+async function createSessionEnd(
+  prevEventAt: Date,
+  sessionStart: IServiceCreateEventPayload,
+  options: {
+    screenViews: number;
+    totalDuration: number;
+  }
+) {
+  const properties: Record<string, unknown> = {};
+  if (options.screenViews === 1) {
+    properties._bounce = true;
+  } else {
+    properties._bounce = false;
+  }
+
+  const session: IServiceCreateEventPayload = {
+    ...sessionStart,
+    properties: {
+      ...properties,
+      ...sessionStart.properties,
+    },
+    duration: options.totalDuration,
+    name: 'session_end',
+    createdAt: toISOString(prevEventAt.getTime() + 10),
+  };
+
+  await createEvent(session);
+  return session;
+}
+
+main();
diff --git a/apps/sdk-api/src/controllers/event.controller.ts b/apps/sdk-api/src/controllers/event.controller.ts
new file mode 100644
index 00000000..48a90c0e
--- /dev/null
+++ b/apps/sdk-api/src/controllers/event.controller.ts
@@ -0,0 +1,176 @@
+import { parseIp } from '@/utils/parseIp';
+import { parseUserAgent } from '@/utils/parseUserAgent';
+import type { FastifyReply, FastifyRequest } from 'fastify';
+import { getClientIp } from 'request-ip';
+
+import { generateProfileId, getTime, toISOString } from '@mixan/common';
+import type { IServiceCreateEventPayload } from '@mixan/db';
+import { getSalts } from '@mixan/db';
+import type { JobsOptions } from '@mixan/queue';
+import { eventsQueue, findJobByPrefix } from '@mixan/queue';
+
+export interface PostEventPayload {
+  profileId?: string;
+  name: string;
+  timestamp: string;
+  properties: Record<string, unknown>;
+  referrer: string | undefined;
+  path: string;
+}
+
+const SESSION_TIMEOUT = 1000 * 30 * 1;
+const SESSION_END_TIMEOUT = SESSION_TIMEOUT + 1000;
+
+export async function postEvent(
+  request: FastifyRequest<{
+    Body: PostEventPayload;
+  }>,
+  reply: FastifyReply
+) {
+  let profileId: string | null = null;
+  const projectId = request.projectId;
+  const body = request.body;
+  const path = body.path;
+  const ip = getClientIp(request)!;
+  const origin = request.headers.origin!;
+  const ua = request.headers['user-agent']!;
+  const uaInfo = parseUserAgent(ua);
+  const salts = await getSalts();
+
+  const [currentProfileId, previousProfileId, geo, eventsJobs] =
+    await Promise.all([
+      generateProfileId({
+        salt: salts.current,
+        origin,
+        ip,
+        ua,
+      }),
+      generateProfileId({
+        salt: salts.previous,
+        origin,
+        ip,
+        ua,
+      }),
+      parseIp(ip),
+      eventsQueue.getJobs(['delayed']),
+    ]);
+
+  // find session_end job
+  const sessionEndJobCurrentProfileId = findJobByPrefix(
+    eventsJobs,
+    `sessionEnd:${projectId}:${currentProfileId}:`
+  );
+  const sessionEndJobPreviousProfileId = findJobByPrefix(
+    eventsJobs,
+    `sessionEnd:${projectId}:${previousProfileId}:`
+  );
+
+  const createSessionStart =
+    !sessionEndJobCurrentProfileId && !sessionEndJobPreviousProfileId;
+
+  if (sessionEndJobCurrentProfileId && !sessionEndJobPreviousProfileId) {
+    console.log('found session current');
+    profileId = currentProfileId;
+    const diff = Date.now() - sessionEndJobCurrentProfileId.timestamp;
+    sessionEndJobCurrentProfileId.changeDelay(diff + SESSION_END_TIMEOUT);
+  } else if (!sessionEndJobCurrentProfileId && sessionEndJobPreviousProfileId) {
+    console.log('found session previous');
+    profileId = previousProfileId;
+    const diff = Date.now() - sessionEndJobPreviousProfileId.timestamp;
+    sessionEndJobPreviousProfileId.changeDelay(diff + SESSION_END_TIMEOUT);
+  } else {
+    console.log('new session with current');
+    profileId = currentProfileId;
+    // Queue session end
+    eventsQueue.add(
+      'event',
+      {
+        type: 'createSessionEnd',
+        payload: {
+          profileId,
+        },
+      },
+      {
+        delay: SESSION_END_TIMEOUT,
+        jobId: `sessionEnd:${projectId}:${profileId}:${Date.now()}`,
+      }
+    );
+  }
+
+  const payload: IServiceCreateEventPayload = {
+    name: body.name,
+    profileId,
+    projectId,
+    properties: body.properties,
+    createdAt: body.timestamp,
+    country: geo.country,
+    city: geo.city,
+    region: geo.region,
+    continent: geo.continent,
+    os: uaInfo.os,
+    osVersion: uaInfo.osVersion,
+    browser: uaInfo.browser,
+    browserVersion: uaInfo.browserVersion,
+    device: uaInfo.device,
+    brand: uaInfo.brand,
+    model: uaInfo.model,
+    duration: 0,
+    path,
+    referrer: body.referrer, // TODO
+    referrerName: body.referrer, // TODO
+  };
+
+  console.log(payload);
+
+  const job = findJobByPrefix(eventsJobs, `event:${projectId}:${profileId}:`);
+
+  if (job?.isDelayed && job.data.type === 'createEvent') {
+    const prevEvent = job.data.payload;
+    const duration = getTime(payload.createdAt) - getTime(prevEvent.createdAt);
+
+    // Set path from prev screen_view event if current event is not a screen_view
+    if (payload.name != 'screen_view') {
+      payload.path = prevEvent.path;
+    }
+
+    if (payload.name === 'screen_view') {
+      await job.updateData({
+        type: 'createEvent',
+        payload: {
+          ...prevEvent,
+          duration,
+        },
+      });
+      job.promote();
+    }
+  }
+
+  if (createSessionStart) {
+    eventsQueue.add('event', {
+      type: 'createEvent',
+      payload: {
+        ...payload,
+        name: 'session_start',
+        createdAt: toISOString(getTime(payload.createdAt) - 10),
+      },
+    });
+  }
+
+  const options: JobsOptions = {};
+  if (payload.name === 'screen_view') {
+    options.delay = SESSION_TIMEOUT;
+    options.jobId = `event:${projectId}:${profileId}:${Date.now()}`;
+  }
+
+  // Queue current event
+  eventsQueue.add(
+    'event',
+    {
+      type: 'createEvent',
+      payload,
+    },
+    options
+  );
+
+  reply.status(202).send(profileId);
+}
diff --git a/apps/sdk-api/src/index.ts b/apps/sdk-api/src/index.ts
new file mode 100644
index 00000000..259b46ba
--- /dev/null
+++ b/apps/sdk-api/src/index.ts
@@ -0,0 +1,78 @@
+import cors from '@fastify/cors';
+import Fastify from 'fastify';
+import pino from 'pino';
+
+import eventRouter from './routes/event.router';
+import { validateSdkRequest } from './utils/auth';
+
+declare module 'fastify' {
+  interface FastifyRequest {
+    projectId: string;
+  }
+}
+
+const port = parseInt(process.env.API_PORT || '3030', 10);
+
+const startServer = async () => {
+  try {
+    const fastify = Fastify({
+      logger: pino({ level: 'info' }),
+    });
+
+    fastify.register(cors, {
+      origin: '*',
+    });
+
+    fastify.decorateRequest('projectId', '');
+
+    fastify.addHook('preHandler', (req, reply, done) => {
+      validateSdkRequest(req.headers)
+        .then((projectId) => {
+          req.projectId = projectId;
+          done();
+        })
+        .catch((e) => {
+          console.log(e);
+
+          reply.status(401).send();
+        });
+    });
+
+    fastify.register(eventRouter, { prefix: '/api/event' });
+    fastify.setErrorHandler((error, request, reply) => {
+      fastify.log.error(error);
+    });
+    fastify.get('/', (request, reply) => {
+      reply.send({ name: 'fastify-typescript' });
+    });
+    // fastify.get('/health-check', async (request, reply) => {
+    //   try {
+    //     await utils.healthCheck()
+    //     reply.status(200).send()
+    //   } catch (e) {
+    //     reply.status(500).send()
+    //   }
+    // })
+    if (process.env.NODE_ENV === 'production') {
+      for (const signal of ['SIGINT', 'SIGTERM']) {
+        process.on(signal, () =>
+          fastify.close().then((err) => {
+            console.log(`close application on ${signal}`);
+            process.exit(err ? 1 : 0);
+          })
+        );
+      }
+    }
+
+    await fastify.listen({ port });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+process.on('unhandledRejection', (e) => {
+  console.error(e);
+  process.exit(1);
+});
+
+startServer();
diff --git a/apps/sdk-api/src/routes/event.router.ts b/apps/sdk-api/src/routes/event.router.ts
new file mode 100644
index 00000000..661f3084
--- /dev/null
+++ b/apps/sdk-api/src/routes/event.router.ts
@@ -0,0 +1,18 @@
+import * as controller from '@/controllers/event.controller';
+import type { FastifyPluginCallback } from 'fastify';
+
+const eventRouter: FastifyPluginCallback = (fastify, opts, done) => {
+  fastify.route({
+    method: 'POST',
+    url: '/',
+    handler: controller.postEvent,
+  });
+  fastify.route({
+    method: 'GET',
+    url: '/',
+    handler: controller.postEvent,
+  });
+  done();
+};
+
+export default eventRouter;
diff --git a/apps/sdk-api/src/utils/auth.ts b/apps/sdk-api/src/utils/auth.ts
new file mode 100644
index 00000000..2a106720
--- /dev/null
+++ b/apps/sdk-api/src/utils/auth.ts
@@ -0,0 +1,43 @@
+import type { RawRequestDefaultExpression } from 'fastify';
+
+import { verifyPassword } from '@mixan/common';
+import { db } from '@mixan/db';
+
+export async function validateSdkRequest(
+  headers: RawRequestDefaultExpression['headers']
+): Promise<string> {
+  const clientId = headers['mixan-client-id'] as string;
+  const clientSecret = headers['mixan-client-secret'] as string;
+  const origin = headers.origin;
+  if (!clientId) {
+    throw new Error('Misisng client id');
+  }
+
+  const client = await db.client.findUnique({
+    where: {
+      id: clientId,
+    },
+  });
+
+  if (!client) {
+    throw new Error('Invalid client id');
+  }
+
+  if (client.secret) {
+    if (!(await verifyPassword(clientSecret || '', client.secret))) {
+      throw new Error('Invalid client secret');
+    }
+  } else if (client.cors !== '*') {
+    const domainAllowed = client.cors.split(',').find((domain) => {
+      if (domain === origin) {
+        return true;
+      }
+    });
+
+    if (!domainAllowed) {
+      throw new Error('Invalid cors settings');
+    }
+  }
+
+  return client.project_id;
+}
diff --git a/apps/sdk-api/src/utils/parseIp.ts b/apps/sdk-api/src/utils/parseIp.ts
new file mode 100644
index 00000000..9ad07109
--- /dev/null
+++ b/apps/sdk-api/src/utils/parseIp.ts
@@ -0,0 +1,25 @@
+export async function parseIp(ip: string) {
+  try {
+    const geo = await fetch(`http://localhost:8080/${ip}`);
+    const res = (await geo.json()) as {
+      country: string | undefined;
+      city: string | undefined;
+      stateprov: string | undefined;
+      continent: string | undefined;
+    };
+
+    return {
+      country: res.country,
+      city: res.city,
+      region: res.stateprov,
+      continent: res.continent,
+    };
+  } catch (e) {
+    return {
+      country: undefined,
+      city: undefined,
+      region: undefined,
+      continent: undefined,
+    };
+  }
+}
diff --git a/apps/sdk-api/src/utils/parseUserAgent.ts b/apps/sdk-api/src/utils/parseUserAgent.ts
new file mode 100644
index 00000000..b1a72e3e
--- /dev/null
+++ b/apps/sdk-api/src/utils/parseUserAgent.ts
@@ -0,0 +1,29 @@
+import { UAParser } from 'ua-parser-js';
+
+export function parseUserAgent(ua: string) {
+  const res = new UAParser(ua).getResult();
+  return {
+    os: res.os.name,
+    osVersion: res.os.version,
+    browser: res.browser.name,
+    browserVersion: res.browser.version,
+    device: res.device.type ?? getDevice(ua),
+    brand: res.device.vendor,
+    model: res.device.model,
+  };
+}
+
+export function getDevice(ua: string) {
+  const t1 =
+    /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+      ua
+    );
+  const t2 =
+    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
+      ua.slice(0, 4)
+    );
+  if (t1 || t2) {
+    return 'mobile';
+  }
+  return 'desktop';
+}
diff --git a/apps/sdk-api/tsconfig.json b/apps/sdk-api/tsconfig.json
new file mode 100644
index 00000000..73b1bbe4
--- /dev/null
+++ b/apps/sdk-api/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@mixan/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["."],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/sdk-api/tsup.config.ts b/apps/sdk-api/tsup.config.ts
new file mode 100644
index 00000000..9a320b05
--- /dev/null
+++ b/apps/sdk-api/tsup.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'tsup';
+import type { Options } from 'tsup';
+
+const options: Options = {
+  clean: true,
+  entry: ['src/index.ts'],
+  noExternal: [/^@mixan\/.*$/u, /^@\/.*$/u],
+  sourcemap: true,
+  splitting: false,
+};
+
+if (process.env.WATCH) {
+  options.watch = ['src/**/*', '../../packages/**/*'];
+  options.onSuccess = 'node dist/index.js';
+  options.minify = false;
+}
+
+export default defineConfig(options);
diff --git a/apps/web/package.json b/apps/web/package.json
index b96a50ef..073c7567 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,9 @@
     "with-env": "dotenv -e ../../.env -c --"
   },
   "dependencies": {
+    "@clickhouse/client": "^0.2.9",
     "@hookform/resolvers": "^3.3.2",
+    "@mixan/common": "workspace:^",
     "@mixan/db": "workspace:^",
     "@mixan/queue": "workspace:^",
     "@mixan/types": "workspace:*",
@@ -44,6 +46,7 @@
     "lodash.debounce": "^4.0.8",
     "lottie-react": "^2.4.0",
     "lucide-react": "^0.286.0",
+    "mathjs": "^12.3.0",
     "mitt": "^3.0.1",
     "next": "~14.0.4",
     "next-auth": "^4.23.0",
@@ -58,9 +61,11 @@
     "react-in-viewport": "1.0.0-alpha.30",
     "react-redux": "^8.1.3",
     "react-responsive": "^9.0.2",
+    "react-svg-worldmap": "2.0.0-alpha.16",
     "react-syntax-highlighter": "^15.5.0",
     "react-virtualized-auto-sizer": "^1.0.20",
     "recharts": "^2.8.0",
+    "request-ip": "^3.3.0",
     "slugify": "^1.6.6",
     "superjson": "^1.13.1",
     "tailwind-merge": "^1.14.0",
@@ -79,6 +84,7 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/react-syntax-highlighter": "^15.5.9",
+    "@types/request-ip": "^0.0.41",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "autoprefixer": "^10.4.14",
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/[dashboardId]/list-reports.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
similarity index 92%
rename from apps/web/src/app/(app)/[organizationId]/[projectId]/[dashboardId]/list-reports.tsx
rename to apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
index d4c5059b..acd8ecb6 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/[dashboardId]/list-reports.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { LazyChart } from '@/components/report/chart/LazyChart';
+import { ReportRange } from '@/components/report/ReportRange';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import {
@@ -19,7 +20,7 @@ import { cn } from '@/utils/cn';
 import { getDefaultIntervalByRange, timeRanges } from '@/utils/constants';
 import { ChevronRight, MoreHorizontal, PlusIcon, Trash } from 'lucide-react';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 interface ListReportsProps {
   reports: Awaited<ReturnType<typeof getReportsByDashboardId>>;
@@ -33,17 +34,10 @@ export function ListReports({ reports }: ListReportsProps) {
   return (
     <>
       <StickyBelowHeader className="p-4 items-center justify-between flex">
-        <Combobox
-          className="min-w-0"
+        <ReportRange
           placeholder="Override range"
           value={range}
-          onChange={(value) => {
-            setRange((p) => (p === value ? null : value));
-          }}
-          items={Object.values(timeRanges).map((key) => ({
-            label: key,
-            value: key,
-          }))}
+          onChange={(value) => setRange((p) => (p === value ? null : value))}
         />
         <Button
           icon={PlusIcon}
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/[dashboardId]/page.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/page.tsx
similarity index 100%
rename from apps/web/src/app/(app)/[organizationId]/[projectId]/[dashboardId]/page.tsx
rename to apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/page.tsx
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/header-dashboards.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/header-dashboards.tsx
similarity index 91%
rename from apps/web/src/app/(app)/[organizationId]/[projectId]/header-dashboards.tsx
rename to apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/header-dashboards.tsx
index 5ff73200..a717fd48 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/header-dashboards.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/header-dashboards.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { pushModal } from '@/modals';
 import { PlusIcon } from 'lucide-react';
 
-import { StickyBelowHeader } from '../../layout-sticky-below-header';
+import { StickyBelowHeader } from '../../../layout-sticky-below-header';
 
 interface HeaderDashboardsProps {
   projectId: string;
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/list-dashboards.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/list-dashboards.tsx
similarity index 97%
rename from apps/web/src/app/(app)/[organizationId]/[projectId]/list-dashboards.tsx
rename to apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/list-dashboards.tsx
index 47ef23e7..c6cb1eca 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/list-dashboards.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/list-dashboards.tsx
@@ -53,7 +53,7 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
           <Card key={item.id} hover>
             <div>
               <Link
-                href={`/${organizationId}/${projectId}/${item.id}`}
+                href={`/${organizationId}/${projectId}/dashboards/${item.id}`}
                 className="block p-4 flex flex-col"
               >
                 <span className="font-medium">{item.name}</span>
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx
new file mode 100644
index 00000000..77e7f4ba
--- /dev/null
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx
@@ -0,0 +1,25 @@
+import PageLayout from '@/app/(app)/page-layout';
+import { getDashboardsByProjectId } from '@/server/services/dashboard.service';
+
+import { HeaderDashboards } from './header-dashboards';
+import { ListDashboards } from './list-dashboards';
+
+interface PageProps {
+  params: {
+    organizationId: string;
+    projectId: string;
+  };
+}
+
+export default async function Page({
+  params: { organizationId, projectId },
+}: PageProps) {
+  const dashboards = await getDashboardsByProjectId(projectId);
+
+  return (
+    <PageLayout title="Dashboards" organizationId={organizationId}>
+      <HeaderDashboards projectId={projectId} />
+      <ListDashboards dashboards={dashboards} />
+    </PageLayout>
+  );
+}
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
index 9eb88849..3fbfce4e 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
@@ -6,11 +6,9 @@ import { ListProperties } from '@/components/events/ListProperties';
 import { ExpandableListItem } from '@/components/general/ExpandableListItem';
 import { ProfileAvatar } from '@/components/profiles/ProfileAvatar';
 import { useAppParams } from '@/hooks/useAppParams';
-import { cn } from '@/utils/cn';
 import { formatDateTime } from '@/utils/date';
 import { getProfileName } from '@/utils/getters';
 import { round } from '@/utils/math';
-import { Activity, BotIcon, MonitorPlay } from 'lucide-react';
 import Link from 'next/link';
 
 import { EventIcon } from './event-icon';
@@ -48,7 +46,7 @@ export function EventListItem({
 
     switch (name) {
       case 'screen_view': {
-        const route = (properties?.route || properties?.path) as string;
+        const route = (properties?.route || properties?.path)!;
         if (route) {
           bullets.push(route);
         }
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx
new file mode 100644
index 00000000..cc625cc5
--- /dev/null
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx
@@ -0,0 +1,272 @@
+'use client';
+
+import { OverviewFilters } from '@/components/overview/overview-filters';
+import { OverviewFiltersButtons } from '@/components/overview/overview-filters-buttons';
+import OverviewTopDevices from '@/components/overview/overview-top-devices';
+import OverviewTopEvents from '@/components/overview/overview-top-events';
+import OverviewTopGeo from '@/components/overview/overview-top-geo';
+import OverviewTopPages from '@/components/overview/overview-top-pages';
+import OverviewTopSources from '@/components/overview/overview-top-sources';
+import { WidgetHead } from '@/components/overview/overview-widget';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { Chart } from '@/components/report/chart';
+import { ReportRange } from '@/components/report/ReportRange';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Widget, WidgetBody } from '@/components/Widget';
+import type { IChartInput } from '@/types';
+import { cn } from '@/utils/cn';
+import { Eye, FilterIcon, Globe2Icon, LockIcon, X } from 'lucide-react';
+import Link from 'next/link';
+
+import { StickyBelowHeader } from '../../layout-sticky-below-header';
+
+export default function OverviewMetrics() {
+  const { previous, range, setRange, interval, metric, setMetric, filters } =
+    useOverviewOptions();
+
+  const reports = [
+    {
+      id: 'Unique visitors',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'user',
+          filters,
+          id: 'A',
+          name: 'session_start',
+          displayName: 'Unique visitors',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Unique visitors',
+      range,
+      previous,
+      metric: 'sum',
+    },
+    {
+      id: 'Total sessions',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'event',
+          filters,
+          id: 'A',
+          name: 'session_start',
+          displayName: 'Total sessions',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Total sessions',
+      range,
+      previous,
+      metric: 'sum',
+    },
+    {
+      id: 'Total pageviews',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'event',
+          filters,
+          id: 'A',
+          name: 'screen_view',
+          displayName: 'Total pageviews',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Total pageviews',
+      range,
+      previous,
+      metric: 'sum',
+    },
+    {
+      id: 'Views per session',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'user_average',
+          filters,
+          id: 'A',
+          name: 'screen_view',
+          displayName: 'Views per session',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Views per session',
+      range,
+      previous,
+      metric: 'average',
+    },
+    {
+      id: 'Bounce rate',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'event',
+          filters: [
+            {
+              id: '1',
+              name: 'properties._bounce',
+              operator: 'is',
+              value: ['true'],
+            },
+            ...filters,
+          ],
+          id: 'A',
+          name: 'session_end',
+          displayName: 'Bounce rate',
+        },
+        {
+          segment: 'event',
+          filters: filters,
+          id: 'B',
+          name: 'session_end',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Bounce rate',
+      range,
+      previous,
+      previousIndicatorInverted: true,
+      formula: 'A/B*100',
+      metric: 'average',
+      unit: '%',
+    },
+    {
+      id: 'Visit duration',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'property_average',
+          filters: [
+            {
+              name: 'duration',
+              operator: 'isNot',
+              value: ['0'],
+              id: 'A',
+            },
+            ...filters,
+          ],
+          id: 'A',
+          property: 'duration',
+          name: 'screen_view',
+          displayName: 'Visit duration',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Visit duration',
+      range,
+      previous,
+      formula: 'A/1000/60',
+      metric: 'average',
+      unit: 'min',
+    },
+  ] satisfies (IChartInput & { id: string })[];
+
+  const selectedMetric = reports[metric]!;
+
+  return (
+    <Sheet>
+      <StickyBelowHeader className="p-4 flex gap-2 justify-between">
+        <ReportRange
+          size="sm"
+          value={range}
+          onChange={(value) => setRange(value)}
+        />
+        <div className="flex-wrap flex gap-2">
+          <OverviewFiltersButtons />
+          <SheetTrigger asChild>
+            <Button size="sm" variant="cta" icon={FilterIcon}>
+              Filters
+            </Button>
+          </SheetTrigger>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="sm" icon={Globe2Icon}>
+                Public
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuGroup>
+                <DropdownMenuItem asChild>
+                  <Link href="http://localhost:3000/share/project/4e2798cb-e255-4e9d-960d-c9ad095aabd7">
+                    <Eye size={16} className="mr-2" />
+                    View
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={(event) => {}}>
+                  <LockIcon size={16} className="mr-2" />
+                  Make private
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </StickyBelowHeader>
+      <div className="p-4 grid gap-4 grid-cols-6">
+        {reports.map((report, index) => (
+          <button
+            key={index}
+            className="relative col-span-6 md:col-span-3 lg:col-span-2 group"
+            onClick={() => {
+              setMetric(index);
+            }}
+          >
+            <Chart hideID {...report} />
+
+            {/* add active border */}
+            <div
+              className={cn(
+                'transition-opacity top-0 left-0 right-0 bottom-0 absolute rounded-md w-full h-full border ring-1 border-chart-0 ring-chart-0',
+                metric === index ? 'opacity-100' : 'opacity-0'
+              )}
+            />
+          </button>
+        ))}
+        <Widget className="col-span-6">
+          <WidgetHead>
+            <div className="title">{selectedMetric.events[0]?.displayName}</div>
+          </WidgetHead>
+          <WidgetBody>
+            <Chart hideID {...selectedMetric} chartType="linear" />
+          </WidgetBody>
+        </Widget>
+        <OverviewTopSources />
+        <OverviewTopPages />
+        <OverviewTopDevices />
+        <OverviewTopGeo />
+        <OverviewTopEvents />
+      </div>
+
+      <SheetContent className="!max-w-lg w-full" side="left">
+        <OverviewFilters />
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx
index 77e7f4ba..f89ef128 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx
@@ -1,8 +1,6 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getDashboardsByProjectId } from '@/server/services/dashboard.service';
 
-import { HeaderDashboards } from './header-dashboards';
-import { ListDashboards } from './list-dashboards';
+import OverviewMetrics from './overview-metrics';
 
 interface PageProps {
   params: {
@@ -11,15 +9,10 @@ interface PageProps {
   };
 }
 
-export default async function Page({
-  params: { organizationId, projectId },
-}: PageProps) {
-  const dashboards = await getDashboardsByProjectId(projectId);
-
+export default function Page({ params: { organizationId } }: PageProps) {
   return (
-    <PageLayout title="Dashboards" organizationId={organizationId}>
-      <HeaderDashboards projectId={projectId} />
-      <ListDashboards dashboards={dashboards} />
+    <PageLayout title="Overview" organizationId={organizationId}>
+      <OverviewMetrics />
     </PageLayout>
   );
 }
diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx
index 472d5445..b5db4eae 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
-import { api } from '@/app/_trpc/client';
+import { useEffect } from 'react';
 import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { Chart } from '@/components/report/chart';
 import { ReportChartType } from '@/components/report/ReportChartType';
 import { ReportInterval } from '@/components/report/ReportInterval';
 import { ReportLineType } from '@/components/report/ReportLineType';
+import { ReportRange } from '@/components/report/ReportRange';
 import { ReportSaveButton } from '@/components/report/ReportSaveButton';
 import {
   changeDateRanges,
@@ -58,17 +58,12 @@ export default function ReportEditor({
         </SheetTrigger>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-2 col-span-4">
           <ReportChartType className="min-w-0 flex-1" />
-          <Combobox
+          <ReportRange
             className="min-w-0 flex-1"
-            placeholder="Range"
             value={report.range}
             onChange={(value) => {
               dispatch(changeDateRanges(value));
             }}
-            items={Object.values(timeRanges).map((key) => ({
-              label: key,
-              value: key,
-            }))}
           />
           <ReportInterval className="min-w-0 flex-1" />
           <ReportLineType className="min-w-0 flex-1" />
diff --git a/apps/web/src/app/(app)/[organizationId]/page.tsx b/apps/web/src/app/(app)/[organizationId]/page.tsx
index f20d5435..850eba57 100644
--- a/apps/web/src/app/(app)/[organizationId]/page.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/page.tsx
@@ -1,4 +1,4 @@
-import { getFirstProjectByOrganizationId } from '@/server/services/project.service';
+import { getProjectWithMostEvents } from '@/server/services/project.service';
 import { redirect } from 'next/navigation';
 
 interface PageProps {
@@ -8,10 +8,11 @@ interface PageProps {
 }
 
 export default async function Page({ params: { organizationId } }: PageProps) {
-  const project = await getFirstProjectByOrganizationId(organizationId);
+  const project = await getProjectWithMostEvents(organizationId);
+
   if (project) {
     return redirect(`/${organizationId}/${project.id}`);
   }
 
-  return <p>List projects maybe?</p>;
+  return null;
 }
diff --git a/apps/web/src/app/(app)/layout-menu.tsx b/apps/web/src/app/(app)/layout-menu.tsx
index 16842d80..68cd01e8 100644
--- a/apps/web/src/app/(app)/layout-menu.tsx
+++ b/apps/web/src/app/(app)/layout-menu.tsx
@@ -2,14 +2,17 @@
 
 import { useAppParams } from '@/hooks/useAppParams';
 import type { IServiceRecentDashboards } from '@/server/services/dashboard.service';
+import { cn } from '@/utils/cn';
 import {
   BuildingIcon,
   CogIcon,
+  DotIcon,
   GanttChartIcon,
   KeySquareIcon,
   LayoutPanelTopIcon,
   UserIcon,
   UsersIcon,
+  WallpaperIcon,
   WarehouseIcon,
 } from 'lucide-react';
 import type { LucideProps } from 'lucide-react';
@@ -20,18 +23,32 @@ function LinkWithIcon({
   href,
   icon: Icon,
   label,
+  active: overrideActive,
 }: {
   href: string;
   icon: React.ElementType<LucideProps>;
   label: React.ReactNode;
+  active?: boolean;
 }) {
+  const pathname = usePathname();
+  const active = overrideActive || href === pathname;
   return (
     <Link
-      className="flex gap-2 items-center px-3 py-3 transition-colors hover:bg-slate-100 leading-none rounded-lg"
+      className={cn(
+        'text-slate-600 flex gap-2 items-center px-3 py-3 transition-colors hover:text-white hover:bg-blue-700 leading-none rounded-lg',
+        active && 'bg-blue-600 text-white'
+      )}
       href={href}
     >
       <Icon size={20} />
-      {label}
+      <div className="flex-1">{label}</div>
+      <DotIcon
+        size={20}
+        className={cn(
+          'transition-opacity',
+          active ? 'opacity-100' : 'opacity-0'
+        )}
+      />
     </Link>
   );
 }
@@ -53,10 +70,15 @@ export default function LayoutMenu({
 
   return (
     <>
+      <LinkWithIcon
+        icon={WallpaperIcon}
+        label="Overview"
+        href={`/${params.organizationId}/${projectId}`}
+      />
       <LinkWithIcon
         icon={LayoutPanelTopIcon}
         label="Dashboards"
-        href={`/${params.organizationId}/${projectId}`}
+        href={`/${params.organizationId}/${projectId}/dashboards`}
       />
       <LinkWithIcon
         icon={GanttChartIcon}
diff --git a/apps/web/src/app/(app)/layout-sticky-below-header.tsx b/apps/web/src/app/(app)/layout-sticky-below-header.tsx
index c93a0c6f..f2ec414b 100644
--- a/apps/web/src/app/(app)/layout-sticky-below-header.tsx
+++ b/apps/web/src/app/(app)/layout-sticky-below-header.tsx
@@ -12,7 +12,7 @@ export function StickyBelowHeader({
   return (
     <div
       className={cn(
-        'md:sticky top-16 bg-white border-b border-border z-10',
+        'md:sticky bg-white border-b border-border z-10 [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none rounded-lg top-0',
         className
       )}
     >
diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index 5a2c9c14..c62299ab 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -2,6 +2,7 @@ import { getSession } from '@/server/auth';
 import { getRecentDashboardsByUserId } from '@/server/services/dashboard.service';
 import { getOrganizations } from '@/server/services/organization.service';
 
+import Auth from '../auth';
 import { LayoutSidebar } from './layout-sidebar';
 
 interface AppLayoutProps {
@@ -15,8 +16,12 @@ export default async function AppLayout({ children }: AppLayoutProps) {
     ? await getRecentDashboardsByUserId(session?.user.id)
     : [];
 
+  if (!session) {
+    return <Auth />;
+  }
+
   return (
-    <div>
+    <div id="dashboard">
       <LayoutSidebar {...{ organizations, recentDashboards }} />
       <div className="lg:pl-72 transition-all">{children}</div>
     </div>
diff --git a/apps/web/src/app/api/fml/route.ts b/apps/web/src/app/api/fml/route.ts
deleted file mode 100644
index 5dd8ea53..00000000
--- a/apps/web/src/app/api/fml/route.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createRecentDashboard } from '@/server/services/dashboard.service';
-import { revalidatePath } from 'next/cache';
-import { NextResponse } from 'next/server';
-
-export const dynamic = 'force-dynamic'; // defaults to auto
-export async function POST(req: Request) {
-  await createRecentDashboard(await req.json());
-  revalidatePath('/', 'layout');
-  return NextResponse.json({ ok: 'qe' });
-}
diff --git a/apps/web/src/app/cookie-provider.tsx b/apps/web/src/app/cookie-provider.tsx
deleted file mode 100644
index 06133d04..00000000
--- a/apps/web/src/app/cookie-provider.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
-
-type ICookies = Record<string, string | null>;
-
-const context = createContext<ICookies>({});
-
-export const CookieProvider = ({
-  value,
-  children,
-}: {
-  children: React.ReactNode;
-  value: RequestCookie[];
-}) => {
-  const cookies = value.reduce((acc, cookie) => {
-    return {
-      ...acc,
-      [cookie.name]: cookie.value,
-    };
-  }, {} as ICookies);
-  return <context.Provider value={cookies}>{children}</context.Provider>;
-};
-
-export const useCookies = (): ICookies => useContext(context);
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 0887cc24..c5a25da5 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -5,9 +5,6 @@ import Providers from './providers';
 import '@/styles/globals.css';
 
 import { getSession } from '@/server/auth';
-import { cookies } from 'next/headers';
-
-import Auth from './auth';
 
 export const metadata = {};
 
@@ -30,9 +27,7 @@ export default async function RootLayout({
       <body
         className={cn('min-h-screen font-sans antialiased grainy bg-slate-50')}
       >
-        <Providers cookies={cookies().getAll()} session={session}>
-          {session ? children : <Auth />}
-        </Providers>
+        <Providers session={session}>{children}</Providers>
       </body>
     </html>
   );
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
index b367014e..4909e825 100644
--- a/apps/web/src/app/providers.tsx
+++ b/apps/web/src/app/providers.tsx
@@ -8,29 +8,25 @@ import { ModalProvider } from '@/modals';
 import type { AppStore } from '@/redux';
 import makeStore from '@/redux';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
+import { httpLink } from '@trpc/client';
 import type { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
-import type { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
 import { Provider as ReduxProvider } from 'react-redux';
 import superjson from 'superjson';
 
-import { CookieProvider } from './cookie-provider';
-
 export default function Providers({
   children,
   session,
-  cookies,
 }: {
   children: React.ReactNode;
   session: Session | null;
-  cookies: RequestCookie[];
 }) {
   const [queryClient] = useState(
     () =>
       new QueryClient({
         defaultOptions: {
           queries: {
+            networkMode: 'always',
             refetchOnMount: true,
             refetchOnWindowFocus: false,
           },
@@ -41,7 +37,7 @@ export default function Providers({
     api.createClient({
       transformer: superjson,
       links: [
-        httpBatchLink({
+        httpLink({
           url: 'http://localhost:3000/api/trpc',
         }),
       ],
@@ -60,7 +56,7 @@ export default function Providers({
         <api.Provider client={trpcClient} queryClient={queryClient}>
           <QueryClientProvider client={queryClient}>
             <TooltipProvider delayDuration={200}>
-              <CookieProvider value={cookies}>{children}</CookieProvider>
+              {children}
               <Toaster />
               <ModalProvider />
             </TooltipProvider>
diff --git a/apps/web/src/app/share/project/[projectId]/page.tsx b/apps/web/src/app/share/project/[projectId]/page.tsx
new file mode 100644
index 00000000..c2f8725d
--- /dev/null
+++ b/apps/web/src/app/share/project/[projectId]/page.tsx
@@ -0,0 +1,33 @@
+import OverviewMetrics from '@/app/(app)/[organizationId]/[projectId]/overview-metrics';
+import { Logo } from '@/components/Logo';
+import { getOrganizationByProjectId } from '@/server/services/organization.service';
+import { getProjectById } from '@/server/services/project.service';
+
+interface PageProps {
+  params: {
+    projectId: string;
+  };
+}
+
+export default async function Page({ params: { projectId } }: PageProps) {
+  const project = await getProjectById(projectId);
+  const organization = await getOrganizationByProjectId(projectId);
+  return (
+    <div className="p-4 md:p-16 bg-gradient-to-tl from-blue-950 to-blue-600">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex justify-between items-end mb-4">
+          <div className="leading-none">
+            <span className="text-white mb-4">{organization?.name}</span>
+            <h1 className="text-white text-xl font-medium">{project?.name}</h1>
+          </div>
+          <a href="https://openpanel.dev?utm_source=openpanel.dev&utm_medium=share">
+            <Logo className="text-white" />
+          </a>
+        </div>
+        <div className="bg-white rounded-lg shadow">
+          <OverviewMetrics />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ColorSquare.tsx b/apps/web/src/components/ColorSquare.tsx
index e0015dab..52f79340 100644
--- a/apps/web/src/components/ColorSquare.tsx
+++ b/apps/web/src/components/ColorSquare.tsx
@@ -1,9 +1,15 @@
 import type { HtmlProps } from '@/types';
 import { cn } from '@/utils/cn';
 
+import { useChartContext } from './report/chart/ChartProvider';
+
 type ColorSquareProps = HtmlProps<HTMLDivElement>;
 
 export function ColorSquare({ children, className }: ColorSquareProps) {
+  const { hideID } = useChartContext();
+  if (hideID) {
+    return null;
+  }
   return (
     <div
       className={cn(
diff --git a/apps/web/src/components/Logo.tsx b/apps/web/src/components/Logo.tsx
index b3351c7f..f5169729 100644
--- a/apps/web/src/components/Logo.tsx
+++ b/apps/web/src/components/Logo.tsx
@@ -1,7 +1,15 @@
-export function Logo() {
+import { cn } from '@/utils/cn';
+
+interface LogoProps {
+  className?: string;
+}
+
+export function Logo({ className }: LogoProps) {
   return (
-    <div className="text-xl font-medium flex gap-2 items-center">
-      <img src="/logo.svg" className="max-h-10" />
+    <div
+      className={cn('text-xl font-medium flex gap-2 items-center', className)}
+    >
+      <img src="/logo.svg" className="max-h-8 rounded-md" />
       openpanel.dev
     </div>
   );
diff --git a/apps/web/src/components/Widget.tsx b/apps/web/src/components/Widget.tsx
index 1e1deb5f..57c50154 100644
--- a/apps/web/src/components/Widget.tsx
+++ b/apps/web/src/components/Widget.tsx
@@ -1,6 +1,6 @@
 import { cn } from '@/utils/cn';
 
-interface WidgetHeadProps {
+export interface WidgetHeadProps {
   children: React.ReactNode;
   className?: string;
 }
@@ -17,7 +17,7 @@ export function WidgetHead({ children, className }: WidgetHeadProps) {
   );
 }
 
-interface WidgetBodyProps {
+export interface WidgetBodyProps {
   children: React.ReactNode;
   className?: string;
 }
@@ -25,7 +25,7 @@ export function WidgetBody({ children, className }: WidgetBodyProps) {
   return <div className={cn('p-4', className)}>{children}</div>;
 }
 
-interface WidgetProps {
+export interface WidgetProps {
   children: React.ReactNode;
   className?: string;
 }
diff --git a/apps/web/src/components/events/ListProperties.tsx b/apps/web/src/components/events/ListProperties.tsx
index d5020ba5..c84cfe97 100644
--- a/apps/web/src/components/events/ListProperties.tsx
+++ b/apps/web/src/components/events/ListProperties.tsx
@@ -1,4 +1,4 @@
-import { toDots } from '@/utils/object';
+import { toDots } from '@mixan/common';
 
 import { Table, TableBody, TableCell, TableRow } from '../ui/table';
 
diff --git a/apps/web/src/components/navbar/NavbarMenu.tsx b/apps/web/src/components/navbar/NavbarMenu.tsx
index 374dad6e..db02c057 100644
--- a/apps/web/src/components/navbar/NavbarMenu.tsx
+++ b/apps/web/src/components/navbar/NavbarMenu.tsx
@@ -1,9 +1,10 @@
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { cn } from '@/utils/cn';
-import { strip } from '@/utils/object';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
 
+import { strip } from '@mixan/common';
+
 import { NavbarUserDropdown } from './NavbarUserDropdown';
 
 function Item({
diff --git a/apps/web/src/components/overview/overview-filters-buttons.tsx b/apps/web/src/components/overview/overview-filters-buttons.tsx
new file mode 100644
index 00000000..c4626e02
--- /dev/null
+++ b/apps/web/src/components/overview/overview-filters-buttons.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import { api } from '@/app/_trpc/client';
+import { useAppParams } from '@/hooks/useAppParams';
+import { cn } from '@/utils/cn';
+import { X } from 'lucide-react';
+
+import { Button } from '../ui/button';
+import { Combobox } from '../ui/combobox';
+import { Label } from '../ui/label';
+import { useOverviewOptions } from './useOverviewOptions';
+
+export function OverviewFiltersButtons() {
+  const options = useOverviewOptions();
+  return (
+    <>
+      {options.referrer && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setReferrer(null)}
+        >
+          {options.referrer}
+        </Button>
+      )}
+      {options.device && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setDevice(null)}
+        >
+          {options.device}
+        </Button>
+      )}
+      {options.page && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setPage(null)}
+        >
+          {options.page}
+        </Button>
+      )}
+      {options.utmSource && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setUtmSource(null)}
+        >
+          {options.utmSource}
+        </Button>
+      )}
+      {options.utmMedium && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setUtmMedium(null)}
+        >
+          {options.utmMedium}
+        </Button>
+      )}
+      {options.utmCampaign && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setUtmCampaign(null)}
+        >
+          {options.utmCampaign}
+        </Button>
+      )}
+      {options.utmTerm && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setUtmTerm(null)}
+        >
+          {options.utmTerm}
+        </Button>
+      )}
+      {options.utmContent && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setUtmContent(null)}
+        >
+          {options.utmContent}
+        </Button>
+      )}
+      {options.country && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setCountry(null)}
+        >
+          {options.country}
+        </Button>
+      )}
+      {options.region && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setRegion(null)}
+        >
+          {options.region}
+        </Button>
+      )}
+      {options.city && (
+        <Button
+          size="sm"
+          variant="ghost"
+          icon={X}
+          onClick={() => options.setCity(null)}
+        >
+          {options.city}
+        </Button>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/src/components/overview/overview-filters.tsx b/apps/web/src/components/overview/overview-filters.tsx
new file mode 100644
index 00000000..77d04150
--- /dev/null
+++ b/apps/web/src/components/overview/overview-filters.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import { api } from '@/app/_trpc/client';
+import { useAppParams } from '@/hooks/useAppParams';
+import { cn } from '@/utils/cn';
+
+import { Combobox } from '../ui/combobox';
+import { Label } from '../ui/label';
+import { useOverviewOptions } from './useOverviewOptions';
+
+export function OverviewFilters() {
+  const { projectId } = useAppParams();
+  const options = useOverviewOptions();
+
+  const { data: referrers } = api.chart.values.useQuery({
+    projectId,
+    property: 'referrer',
+    event: 'session_start',
+  });
+
+  const { data: devices } = api.chart.values.useQuery({
+    projectId,
+    property: 'device',
+    event: 'session_start',
+  });
+
+  const { data: pages } = api.chart.values.useQuery({
+    projectId,
+    property: 'path',
+    event: 'screen_view',
+  });
+
+  return (
+    <div>
+      <h2 className="text-xl font-medium mb-8">Overview filters</h2>
+      <div className="flex flex-col gap-4">
+        <div>
+          <Label className="flex justify-between">
+            Referrer
+            <button
+              className={cn(
+                'text-slate-500 transition-opacity opacity-100',
+                options.referrer === null && 'opacity-0'
+              )}
+              onClick={() => options.setReferrer(null)}
+            >
+              Reset
+            </button>
+          </Label>
+          <Combobox
+            className="w-full"
+            onChange={(value) => options.setReferrer(value)}
+            label="Referrer"
+            placeholder="Referrer"
+            items={
+              referrers?.values?.filter(Boolean)?.map((value) => ({
+                value,
+                label: value,
+              })) ?? []
+            }
+            value={options.referrer}
+          />
+        </div>
+        <div>
+          <Label className="flex justify-between">
+            Device
+            <button
+              className={cn(
+                'opacity-100 text-slate-500 transition-opacity',
+                options.device === null && 'opacity-0'
+              )}
+              onClick={() => options.setDevice(null)}
+            >
+              Reset
+            </button>
+          </Label>
+          <Combobox
+            className="w-full"
+            onChange={(value) => options.setDevice(value)}
+            label="Device"
+            placeholder="Device"
+            items={
+              devices?.values?.filter(Boolean)?.map((value) => ({
+                value,
+                label: value,
+              })) ?? []
+            }
+            value={options.device}
+          />
+        </div>
+        <div>
+          <Label className="flex justify-between">
+            Page
+            <button
+              className={cn(
+                'opacity-100 text-slate-500 transition-opacity',
+                options.page === null && 'opacity-0'
+              )}
+              onClick={() => options.setPage(null)}
+            >
+              Reset
+            </button>
+          </Label>
+          <Combobox
+            className="w-full"
+            onChange={(value) => options.setPage(value)}
+            label="Page"
+            placeholder="Page"
+            items={
+              pages?.values?.filter(Boolean)?.map((value) => ({
+                value,
+                label: value,
+              })) ?? []
+            }
+            value={options.page}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/overview/overview-top-devices.tsx b/apps/web/src/components/overview/overview-top-devices.tsx
new file mode 100644
index 00000000..73516c56
--- /dev/null
+++ b/apps/web/src/components/overview/overview-top-devices.tsx
@@ -0,0 +1,199 @@
+'use client';
+
+import { Chart } from '@/components/report/chart';
+import { cn } from '@/utils/cn';
+
+import { Widget, WidgetBody } from '../Widget';
+import { WidgetButtons, WidgetHead } from './overview-widget';
+import { useOverviewOptions } from './useOverviewOptions';
+import { useOverviewWidget } from './useOverviewWidget';
+
+export default function OverviewTopDevices() {
+  const { filters, interval, range, previous, setCountry, setRegion, setCity } =
+    useOverviewOptions();
+  const [widget, setWidget, widgets] = useOverviewWidget('tech', {
+    devices: {
+      title: 'Top devices',
+      btn: 'Devices',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'user',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'device',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    browser: {
+      title: 'Top browser',
+      btn: 'Browser',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'user',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'browser',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    browser_version: {
+      title: 'Top Browser Version',
+      btn: 'Browser Version',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'user',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'browser_version',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    os: {
+      title: 'Top OS',
+      btn: 'OS',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'user',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'os',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    os_version: {
+      title: 'Top OS version',
+      btn: 'OS Version',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'user',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'os_version',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+  });
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead className="flex items-center justify-between">
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets.map((w) => (
+              <button
+                key={w.key}
+                onClick={() => setWidget(w.key)}
+                className={cn(w.key === widget.key && 'active')}
+              >
+                {w.btn}
+              </button>
+            ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody>
+          <Chart
+            hideID
+            {...widget.chart}
+            previous={false}
+            onClick={(item) => {
+              // switch (widget.key) {
+              //   case 'browser':
+              //     setWidget('browser_version');
+              //     // setCountry(item.name);
+              //     break;
+              //   case 'regions':
+              //     setWidget('cities');
+              //     setRegion(item.name);
+              //     break;
+              //   case 'cities':
+              //     setCity(item.name);
+              //     break;
+              // }
+            }}
+          />
+        </WidgetBody>
+      </Widget>
+    </>
+  );
+}
diff --git a/apps/web/src/components/overview/overview-top-events.tsx b/apps/web/src/components/overview/overview-top-events.tsx
new file mode 100644
index 00000000..1454ea58
--- /dev/null
+++ b/apps/web/src/components/overview/overview-top-events.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { Chart } from '@/components/report/chart';
+import { cn } from '@/utils/cn';
+
+import { Widget, WidgetBody } from '../Widget';
+import { WidgetButtons, WidgetHead } from './overview-widget';
+import { useOverviewOptions } from './useOverviewOptions';
+import { useOverviewWidget } from './useOverviewWidget';
+
+export default function OverviewTopEvents() {
+  const { filters, interval, range, previous } = useOverviewOptions();
+  const [widget, setWidget, widgets] = useOverviewWidget('ev', {
+    all: {
+      title: 'Top events',
+      btn: 'All',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters: [
+              ...filters,
+              {
+                id: 'ex_session',
+                name: 'name',
+                operator: 'isNot',
+                value: ['session_start', 'session_end'],
+              },
+            ],
+            id: 'A',
+            name: '*',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'name',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+  });
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead className="flex items-center justify-between">
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets.map((w) => (
+              <button
+                key={w.key}
+                onClick={() => setWidget(w.key)}
+                className={cn(w.key === widget.key && 'active')}
+              >
+                {w.btn}
+              </button>
+            ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody>
+          <Chart hideID {...widget.chart} previous={false} />
+        </WidgetBody>
+      </Widget>
+    </>
+  );
+}
diff --git a/apps/web/src/components/overview/overview-top-geo.tsx b/apps/web/src/components/overview/overview-top-geo.tsx
new file mode 100644
index 00000000..c5364901
--- /dev/null
+++ b/apps/web/src/components/overview/overview-top-geo.tsx
@@ -0,0 +1,171 @@
+'use client';
+
+import { Chart } from '@/components/report/chart';
+import { cn } from '@/utils/cn';
+
+import { Widget, WidgetBody } from '../Widget';
+import { WidgetButtons, WidgetHead } from './overview-widget';
+import { useOverviewOptions } from './useOverviewOptions';
+import { useOverviewWidget } from './useOverviewWidget';
+
+export default function OverviewTopGeo() {
+  const { filters, interval, range, previous, setCountry, setRegion, setCity } =
+    useOverviewOptions();
+  const [widget, setWidget, widgets] = useOverviewWidget('geo', {
+    map: {
+      title: 'Map',
+      btn: 'Map',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'country',
+          },
+        ],
+        chartType: 'map',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    countries: {
+      title: 'Top countries',
+      btn: 'Countries',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'country',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    regions: {
+      title: 'Top regions',
+      btn: 'Regions',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'region',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    cities: {
+      title: 'Top cities',
+      btn: 'Cities',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'city',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+  });
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead className="flex items-center justify-between">
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets.map((w) => (
+              <button
+                key={w.key}
+                onClick={() => setWidget(w.key)}
+                className={cn(w.key === widget.key && 'active')}
+              >
+                {w.btn}
+              </button>
+            ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody>
+          <Chart
+            hideID
+            {...widget.chart}
+            previous={false}
+            onClick={(item) => {
+              switch (widget.key) {
+                case 'countries':
+                  setWidget('regions');
+                  setCountry(item.name);
+                  break;
+                case 'regions':
+                  setWidget('cities');
+                  setRegion(item.name);
+                  break;
+                case 'cities':
+                  setCity(item.name);
+                  break;
+              }
+            }}
+          />
+        </WidgetBody>
+      </Widget>
+    </>
+  );
+}
diff --git a/apps/web/src/components/overview/overview-top-pages.tsx b/apps/web/src/components/overview/overview-top-pages.tsx
new file mode 100644
index 00000000..a970c60e
--- /dev/null
+++ b/apps/web/src/components/overview/overview-top-pages.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import { Chart } from '@/components/report/chart';
+import { cn } from '@/utils/cn';
+
+import { Widget, WidgetBody } from '../Widget';
+import { WidgetButtons, WidgetHead } from './overview-widget';
+import { useOverviewOptions } from './useOverviewOptions';
+import { useOverviewWidget } from './useOverviewWidget';
+
+export default function OverviewTopPages() {
+  const { filters, interval, range, previous, setPage } = useOverviewOptions();
+  const [widget, setWidget, widgets] = useOverviewWidget('pages', {
+    top: {
+      title: 'Top pages',
+      btn: 'Top pages',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'screen_view',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'path',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval,
+        name: 'Top sources',
+        range,
+        previous,
+        metric: 'sum',
+      },
+    },
+    entries: {
+      title: 'Entry Pages',
+      btn: 'Entries',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'path',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval,
+        name: 'Top sources',
+        range,
+        previous,
+        metric: 'sum',
+      },
+    },
+    exits: {
+      title: 'Exit Pages',
+      btn: 'Exits',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_end',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'path',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval,
+        name: 'Top sources',
+        range,
+        previous,
+        metric: 'sum',
+      },
+    },
+  });
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead className="flex items-center justify-between">
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets.map((w) => (
+              <button
+                key={w.key}
+                onClick={() => setWidget(w.key)}
+                className={cn(w.key === widget.key && 'active')}
+              >
+                {w.btn}
+              </button>
+            ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody>
+          <Chart
+            hideID
+            {...widget.chart}
+            previous={false}
+            onClick={(item) => {
+              setPage(item.name);
+            }}
+          />
+        </WidgetBody>
+      </Widget>
+    </>
+  );
+}
diff --git a/apps/web/src/components/overview/overview-top-sources.tsx b/apps/web/src/components/overview/overview-top-sources.tsx
new file mode 100644
index 00000000..d7fd6ebf
--- /dev/null
+++ b/apps/web/src/components/overview/overview-top-sources.tsx
@@ -0,0 +1,245 @@
+'use client';
+
+import { Chart } from '@/components/report/chart';
+import type { IChartInput } from '@/types';
+import { cn } from '@/utils/cn';
+
+import { Widget, WidgetBody } from '../Widget';
+import { WidgetButtons, WidgetHead } from './overview-widget';
+import { useOverviewOptions } from './useOverviewOptions';
+import { useOverviewWidget } from './useOverviewWidget';
+
+export default function OverviewTopSources() {
+  const {
+    filters,
+    interval,
+    range,
+    previous,
+    setReferrer,
+    setUtmSource,
+    setUtmMedium,
+    setUtmCampaign,
+    setUtmTerm,
+    setUtmContent,
+  } = useOverviewOptions();
+  const [widget, setWidget, widgets] = useOverviewWidget('sources', {
+    all: {
+      title: 'Top sources',
+      btn: 'All',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters: filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'referrer',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    utm_source: {
+      title: 'UTM Source',
+      btn: 'Source',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'properties.query.utm_source',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    utm_medium: {
+      title: 'UTM Medium',
+      btn: 'Medium',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'properties.query.utm_medium',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    utm_campaign: {
+      title: 'UTM Campaign',
+      btn: 'Campaign',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'properties.query.utm_campaign',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    utm_term: {
+      title: 'UTM Term',
+      btn: 'Term',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'properties.query.utm_term',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    utm_content: {
+      title: 'UTM Content',
+      btn: 'Content',
+      chart: {
+        projectId: '',
+        events: [
+          {
+            segment: 'event',
+            filters,
+            id: 'A',
+            name: 'session_start',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'properties.query.utm_content',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+  });
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead className="flex items-center justify-between">
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets.map((w) => (
+              <button
+                key={w.key}
+                onClick={() => setWidget(w.key)}
+                className={cn(w.key === widget.key && 'active')}
+              >
+                {w.btn}
+              </button>
+            ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody>
+          <Chart
+            hideID
+            {...widget.chart}
+            previous={false}
+            onClick={(item) => {
+              switch (widget.key) {
+                case 'all':
+                  setReferrer(item.name);
+                  break;
+                case 'utm_source':
+                  setUtmSource(item.name);
+                  break;
+                case 'utm_medium':
+                  setUtmMedium(item.name);
+                  break;
+                case 'utm_campaign':
+                  setUtmCampaign(item.name);
+                  break;
+                case 'utm_term':
+                  setUtmTerm(item.name);
+                  break;
+                case 'utm_content':
+                  setUtmContent(item.name);
+                  break;
+              }
+            }}
+          />
+        </WidgetBody>
+      </Widget>
+    </>
+  );
+}
diff --git a/apps/web/src/components/overview/overview-widget.tsx b/apps/web/src/components/overview/overview-widget.tsx
new file mode 100644
index 00000000..9881fc38
--- /dev/null
+++ b/apps/web/src/components/overview/overview-widget.tsx
@@ -0,0 +1,25 @@
+import { cn } from '@/utils/cn';
+
+import type { WidgetHeadProps } from '../Widget';
+import { WidgetHead as WidgetHeadBase } from '../Widget';
+
+export function WidgetHead({ className, ...props }: WidgetHeadProps) {
+  return (
+    <WidgetHeadBase
+      className={cn('flex items-center justify-between', className)}
+      {...props}
+    />
+  );
+}
+
+export function WidgetButtons({ className, ...props }: WidgetHeadProps) {
+  return (
+    <div
+      className={cn(
+        'flex gap-2 [&_button]:text-xs [&_button]:opacity-50 [&_button.active]:opacity-100',
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/web/src/components/overview/useOverviewOptions.ts b/apps/web/src/components/overview/useOverviewOptions.ts
new file mode 100644
index 00000000..9f28f14d
--- /dev/null
+++ b/apps/web/src/components/overview/useOverviewOptions.ts
@@ -0,0 +1,234 @@
+import { useMemo } from 'react';
+import type { IChartInput } from '@/types';
+import { getDefaultIntervalByRange, timeRanges } from '@/utils/constants';
+import { mapKeys } from '@/utils/validation';
+import {
+  parseAsBoolean,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+  useQueryState,
+} from 'nuqs';
+
+const nuqsOptions = { history: 'push' } as const;
+
+export function useOverviewOptions() {
+  const [previous, setPrevious] = useQueryState(
+    'name',
+    parseAsBoolean.withDefault(true).withOptions(nuqsOptions)
+  );
+  const [range, setRange] = useQueryState(
+    'range',
+    parseAsStringEnum(mapKeys(timeRanges))
+      .withDefault('7d')
+      .withOptions(nuqsOptions)
+  );
+  const interval = getDefaultIntervalByRange(range);
+  const [metric, setMetric] = useQueryState(
+    'metric',
+    parseAsInteger.withDefault(0).withOptions(nuqsOptions)
+  );
+
+  // Filters
+  const [referrer, setReferrer] = useQueryState(
+    'referrer',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [device, setDevice] = useQueryState(
+    'device',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [page, setPage] = useQueryState(
+    'page',
+    parseAsString.withOptions(nuqsOptions)
+  );
+
+  const [utmSource, setUtmSource] = useQueryState(
+    'utm_source',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [utmMedium, setUtmMedium] = useQueryState(
+    'utm_medium',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [utmCampaign, setUtmCampaign] = useQueryState(
+    'utm_campaign',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [utmContent, setUtmContent] = useQueryState(
+    'utm_content',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [utmTerm, setUtmTerm] = useQueryState(
+    'utm_term',
+    parseAsString.withOptions(nuqsOptions)
+  );
+
+  const [country, setCountry] = useQueryState(
+    'country',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [region, setRegion] = useQueryState(
+    'region',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [city, setCity] = useQueryState(
+    'city',
+    parseAsString.withOptions(nuqsOptions)
+  );
+
+  const filters = useMemo(() => {
+    const filters: IChartInput['events'][number]['filters'] = [];
+    if (referrer) {
+      filters.push({
+        id: 'referrer',
+        operator: 'is',
+        name: 'referrer',
+        value: [referrer],
+      });
+    }
+
+    if (page) {
+      filters.push({
+        id: 'path',
+        operator: 'is',
+        name: 'path',
+        value: [page],
+      });
+    }
+
+    if (device) {
+      filters.push({
+        id: 'device',
+        operator: 'is',
+        name: 'device',
+        value: [device],
+      });
+    }
+
+    if (utmSource) {
+      filters.push({
+        id: 'utm_source',
+        operator: 'is',
+        name: 'properties.query.utm_source',
+        value: [utmSource],
+      });
+    }
+
+    if (utmMedium) {
+      filters.push({
+        id: 'utm_medium',
+        operator: 'is',
+        name: 'properties.query.utm_medium',
+        value: [utmMedium],
+      });
+    }
+
+    if (utmCampaign) {
+      filters.push({
+        id: 'utm_campaign',
+        operator: 'is',
+        name: 'properties.query.utm_campaign',
+        value: [utmCampaign],
+      });
+    }
+
+    if (utmContent) {
+      filters.push({
+        id: 'utm_content',
+        operator: 'is',
+        name: 'properties.query.utm_content',
+        value: [utmContent],
+      });
+    }
+
+    if (utmTerm) {
+      filters.push({
+        id: 'utm_term',
+        operator: 'is',
+        name: 'properties.query.utm_term',
+        value: [utmTerm],
+      });
+    }
+
+    if (country) {
+      filters.push({
+        id: 'country',
+        operator: 'is',
+        name: 'country',
+        value: [country],
+      });
+    }
+
+    if (region) {
+      filters.push({
+        id: 'region',
+        operator: 'is',
+        name: 'region',
+        value: [region],
+      });
+    }
+
+    if (city) {
+      filters.push({
+        id: 'city',
+        operator: 'is',
+        name: 'city',
+        value: [city],
+      });
+    }
+
+    return filters;
+  }, [
+    referrer,
+    page,
+    device,
+    utmSource,
+    utmMedium,
+    utmCampaign,
+    utmContent,
+    utmTerm,
+    country,
+    region,
+    city,
+  ]);
+
+  return {
+    previous,
+    setPrevious,
+    range,
+    setRange,
+    metric,
+    setMetric,
+    referrer,
+    setReferrer,
+    device,
+    setDevice,
+    page,
+    setPage,
+
+    // Computed
+    interval,
+    filters,
+
+    // UTM
+    utmSource,
+    setUtmSource,
+    utmMedium,
+    setUtmMedium,
+    utmCampaign,
+    setUtmCampaign,
+    utmContent,
+    setUtmContent,
+    utmTerm,
+    setUtmTerm,
+
+    // GEO
+    country,
+    setCountry,
+    region,
+    setRegion,
+    city,
+    setCity,
+  };
+}
diff --git a/apps/web/src/components/overview/useOverviewWidget.tsx b/apps/web/src/components/overview/useOverviewWidget.tsx
new file mode 100644
index 00000000..242a1240
--- /dev/null
+++ b/apps/web/src/components/overview/useOverviewWidget.tsx
@@ -0,0 +1,27 @@
+import type { IChartInput } from '@/types';
+import { mapKeys } from '@/utils/validation';
+import { parseAsStringEnum, useQueryState } from 'nuqs';
+
+export function useOverviewWidget<T extends string>(
+  key: string,
+  widgets: Record<T, { title: string; btn: string; chart: IChartInput }>
+) {
+  const keys = Object.keys(widgets) as T[];
+  const [widget, setWidget] = useQueryState<T>(
+    key,
+    parseAsStringEnum(keys)
+      .withDefault(keys[0]!)
+      .withOptions({ history: 'push' })
+  );
+  return [
+    {
+      ...widgets[widget]!,
+      key: widget,
+    },
+    setWidget,
+    mapKeys(widgets).map((key) => ({
+      ...widgets[key],
+      key,
+    })),
+  ] as const;
+}
diff --git a/apps/web/src/components/report/PreviousDiffIndicator.tsx b/apps/web/src/components/report/PreviousDiffIndicator.tsx
index bd80a312..7d3c3003 100644
--- a/apps/web/src/components/report/PreviousDiffIndicator.tsx
+++ b/apps/web/src/components/report/PreviousDiffIndicator.tsx
@@ -1,13 +1,15 @@
 import { useNumber } from '@/hooks/useNumerFormatter';
 import { cn } from '@/utils/cn';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { TrendingDownIcon, TrendingUpIcon } from 'lucide-react';
 
+import { Badge } from '../ui/badge';
 import { useChartContext } from './chart/ChartProvider';
 
 interface PreviousDiffIndicatorProps {
   diff?: number | null | undefined;
   state?: string | null | undefined;
   children?: React.ReactNode;
+  inverted?: boolean;
 }
 
 export function PreviousDiffIndicator({
@@ -15,25 +17,38 @@ export function PreviousDiffIndicator({
   state,
   children,
 }: PreviousDiffIndicatorProps) {
-  const { previous } = useChartContext();
+  const { previous, previousIndicatorInverted } = useChartContext();
   const number = useNumber();
   if (diff === null || diff === undefined || previous === false) {
     return children ?? null;
   }
 
+  if (previousIndicatorInverted === true) {
+    return (
+      <>
+        <Badge
+          className="flex gap-1"
+          variant={state === 'positive' ? 'destructive' : 'success'}
+        >
+          {state === 'negative' && <TrendingUpIcon size={15} />}
+          {state === 'positive' && <TrendingDownIcon size={15} />}
+          {number.format(diff)}%
+        </Badge>
+        {children}
+      </>
+    );
+  }
+
   return (
     <>
-      <div
-        className={cn('flex items-center', [
-          state === 'positive' && 'text-emerald-500',
-          state === 'negative' && 'text-rose-500',
-          state === 'neutral' && 'text-slate-400',
-        ])}
+      <Badge
+        className="flex gap-1"
+        variant={state === 'positive' ? 'success' : 'destructive'}
       >
-        {state === 'positive' && <ChevronUp size={20} />}
-        {state === 'negative' && <ChevronDown size={20} />}
+        {state === 'positive' && <TrendingUpIcon size={15} />}
+        {state === 'negative' && <TrendingDownIcon size={15} />}
         {number.format(diff)}%
-      </div>
+      </Badge>
       {children}
     </>
   );
diff --git a/apps/web/src/components/report/ReportDateRange.tsx b/apps/web/src/components/report/ReportDateRange.tsx
deleted file mode 100644
index 12fc2f4c..00000000
--- a/apps/web/src/components/report/ReportDateRange.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useDispatch, useSelector } from '@/redux';
-import { timeRanges } from '@/utils/constants';
-
-import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
-import { changeDateRanges } from './reportSlice';
-
-export function ReportDateRange() {
-  const dispatch = useDispatch();
-  const range = useSelector((state) => state.report.range);
-
-  return (
-    <RadioGroup className="overflow-auto">
-      {Object.values(timeRanges).map((key) => {
-        return (
-          <RadioGroupItem
-            key={key}
-            active={key === range}
-            onClick={() => {
-              dispatch(changeDateRanges(key));
-            }}
-          >
-            {key}
-          </RadioGroupItem>
-        );
-      })}
-    </RadioGroup>
-  );
-}
diff --git a/apps/web/src/components/report/ReportRange.tsx b/apps/web/src/components/report/ReportRange.tsx
new file mode 100644
index 00000000..51d51fdc
--- /dev/null
+++ b/apps/web/src/components/report/ReportRange.tsx
@@ -0,0 +1,20 @@
+import type { IChartRange } from '@/types';
+import { timeRanges } from '@/utils/constants';
+import { CalendarIcon } from 'lucide-react';
+
+import type { ExtendedComboboxProps } from '../ui/combobox';
+import { Combobox } from '../ui/combobox';
+
+export function ReportRange(props: ExtendedComboboxProps<IChartRange>) {
+  return (
+    <Combobox
+      icon={CalendarIcon}
+      placeholder={'Range'}
+      items={Object.values(timeRanges).map((key) => ({
+        label: key,
+        value: key,
+      }))}
+      {...props}
+    />
+  );
+}
diff --git a/apps/web/src/components/report/ReportSaveButton.tsx b/apps/web/src/components/report/ReportSaveButton.tsx
index 6f5c9e86..bcf98235 100644
--- a/apps/web/src/components/report/ReportSaveButton.tsx
+++ b/apps/web/src/components/report/ReportSaveButton.tsx
@@ -7,7 +7,6 @@ import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import { useDispatch, useSelector } from '@/redux';
 import { SaveIcon } from 'lucide-react';
-import { useParams } from 'next/navigation';
 
 import { resetDirty } from './reportSlice';
 
diff --git a/apps/web/src/components/report/chart/ChartProvider.tsx b/apps/web/src/components/report/chart/ChartProvider.tsx
index 37888960..d7fb362a 100644
--- a/apps/web/src/components/report/chart/ChartProvider.tsx
+++ b/apps/web/src/components/report/chart/ChartProvider.tsx
@@ -1,31 +1,46 @@
 import { createContext, memo, useContext, useMemo } from 'react';
+import type { IChartInput } from '@/types';
 
-export interface ChartContextType {
-  editMode: boolean;
-  previous?: boolean;
+export interface ChartContextType extends IChartInput {
+  editMode?: boolean;
+  hideID?: boolean;
+  onClick?: (item: any) => void;
 }
 
 type ChartProviderProps = {
   children: React.ReactNode;
 } & ChartContextType;
 
-const ChartContext = createContext<ChartContextType>({
-  editMode: false,
+const ChartContext = createContext<ChartContextType | null>({
+  events: [],
+  breakdowns: [],
+  chartType: 'linear',
+  lineType: 'monotone',
+  interval: 'day',
+  name: '',
+  range: '7d',
+  metric: 'sum',
+  previous: false,
+  projectId: '',
 });
 
 export function ChartProvider({
   children,
   editMode,
   previous,
+  hideID,
+  ...props
 }: ChartProviderProps) {
   return (
     <ChartContext.Provider
       value={useMemo(
         () => ({
-          editMode,
+          editMode: editMode ?? false,
           previous: previous ?? false,
+          hideID: hideID ?? false,
+          ...props,
         }),
-        [editMode, previous]
+        [editMode, previous, hideID, props]
       )}
     >
       {children}
@@ -52,5 +67,5 @@ export function withChartProivder<ComponentProps>(
 }
 
 export function useChartContext() {
-  return useContext(ChartContext);
+  return useContext(ChartContext)!;
 }
diff --git a/apps/web/src/components/report/chart/MetricCard.tsx b/apps/web/src/components/report/chart/MetricCard.tsx
new file mode 100644
index 00000000..6945c3bc
--- /dev/null
+++ b/apps/web/src/components/report/chart/MetricCard.tsx
@@ -0,0 +1,81 @@
+import type { IChartData } from '@/app/_trpc/client';
+import { ColorSquare } from '@/components/ColorSquare';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import type { IChartMetric } from '@/types';
+import { theme } from '@/utils/theme';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { Area, AreaChart } from 'recharts';
+
+import { PreviousDiffIndicator } from '../PreviousDiffIndicator';
+
+interface MetricCardProps {
+  serie: IChartData['series'][number];
+  color?: string;
+  metric: IChartMetric;
+  unit?: string;
+}
+
+export function MetricCard({
+  serie,
+  color: _color,
+  metric,
+  unit,
+}: MetricCardProps) {
+  const color = _color || theme?.colors['chart-0'];
+  const number = useNumber();
+  return (
+    <div
+      className="group relative border border-border p-4 rounded-md bg-white overflow-hidden"
+      key={serie.name}
+    >
+      <div className="absolute -top-1 -left-1 -right-1 -bottom-1 z-0 opacity-10 transition-opacity duration-300 group-hover:opacity-50">
+        <AutoSizer>
+          {({ width, height }) => (
+            <AreaChart
+              width={width}
+              height={height / 3}
+              data={serie.data}
+              style={{ marginTop: (height / 3) * 2 }}
+            >
+              <defs>
+                <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+                  <stop offset="95%" stopColor={color} stopOpacity={0.1} />
+                </linearGradient>
+              </defs>
+              <Area
+                dataKey="count"
+                type="monotone"
+                fill="url(#area)"
+                fillOpacity={1}
+                stroke={color}
+                strokeWidth={2}
+              />
+            </AreaChart>
+          )}
+        </AutoSizer>
+      </div>
+      <div className="relative">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 font-medium">
+            <ColorSquare>{serie.event.id}</ColorSquare>
+            {serie.name ?? serie.event.displayName ?? serie.event.name}
+          </div>
+          <PreviousDiffIndicator {...serie.metrics.previous[metric]} />
+        </div>
+        <div className="flex justify-between items-end mt-2">
+          <div className="text-2xl font-bold">
+            {number.format(serie.metrics[metric])}
+            {unit && <span className="ml-1 font-light text-xl">{unit}</span>}
+          </div>
+          {!!serie.metrics.previous[metric] && (
+            <div>
+              {number.format(serie.metrics.previous[metric]?.value)}
+              {unit}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/report/chart/ReportAreaChart.tsx b/apps/web/src/components/report/chart/ReportAreaChart.tsx
index b6e64fc8..dc1b8c95 100644
--- a/apps/web/src/components/report/chart/ReportAreaChart.tsx
+++ b/apps/web/src/components/report/chart/ReportAreaChart.tsx
@@ -34,7 +34,7 @@ export function ReportAreaChart({
   const { editMode } = useChartContext();
   const { series, setVisibleSeries } = useVisibleSeries(data);
   const formatDate = useFormatDateInterval(interval);
-  const rechartData = useRechartDataModel(data);
+  const rechartData = useRechartDataModel(series);
 
   return (
     <>
diff --git a/apps/web/src/components/report/chart/ReportBarChart.tsx b/apps/web/src/components/report/chart/ReportBarChart.tsx
index 545f118d..f36dbb14 100644
--- a/apps/web/src/components/report/chart/ReportBarChart.tsx
+++ b/apps/web/src/components/report/chart/ReportBarChart.tsx
@@ -9,6 +9,11 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
@@ -21,7 +26,6 @@ import {
 } from '@tanstack/react-table';
 import type { SortingState } from '@tanstack/react-table';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { useElementSize } from 'usehooks-ts';
 
 import { PreviousDiffIndicator } from '../PreviousDiffIndicator';
 import { useChartContext } from './ChartProvider';
@@ -34,10 +38,11 @@ interface ReportBarChartProps {
 }
 
 export function ReportBarChart({ data }: ReportBarChartProps) {
-  const { editMode } = useChartContext();
-  const [ref, { width }] = useElementSize();
+  const { editMode, metric, unit, onClick } = useChartContext();
   const [sorting, setSorting] = useState<SortingState>([]);
-  const maxCount = Math.max(...data.series.map((serie) => serie.metrics.sum));
+  const maxCount = Math.max(
+    ...data.series.map((serie) => serie.metrics[metric])
+  );
   const number = useNumber();
   const table = useReactTable({
     data: useMemo(
@@ -53,46 +58,45 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
             return (
               <div className="flex items-center gap-2">
                 <ColorSquare>{info.row.original.event.id}</ColorSquare>
-                {info.getValue()}
+                <Tooltip delayDuration={200}>
+                  <TooltipTrigger asChild>
+                    <div className="text-ellipsis overflow-hidden">
+                      {info.getValue()}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>{info.getValue()}</TooltipContent>
+                </Tooltip>
               </div>
             );
           },
-          footer: (info) => info.column.id,
-          size: width ? width * 0.3 : undefined,
         }),
-        columnHelper.accessor((row) => row.metrics.sum, {
+        columnHelper.accessor((row) => row.metrics[metric], {
           id: 'totalCount',
           cell: (info) => (
-            <div className="text-right font-medium flex gap-2">
-              <div>{number.format(info.getValue())}</div>
+            <div className="flex gap-4 w-full">
+              <div className="relative flex-1">
+                <div
+                  className="top-0 absolute shine h-[20px] rounded-full"
+                  style={{
+                    width: (info.getValue() / maxCount) * 100 + '%',
+                    background: getChartColor(info.row.index),
+                  }}
+                />
+              </div>
+              <div className="font-bold">
+                {number.format(info.getValue())}
+                {unit}
+              </div>
               <PreviousDiffIndicator
-                {...info.row.original.metrics.previous.sum}
+                {...info.row.original.metrics.previous[metric]}
               />
             </div>
           ),
           header: () => 'Count',
-          footer: (info) => info.column.id,
-          size: width ? width * 0.1 : undefined,
           enableSorting: true,
         }),
-        columnHelper.accessor((row) => row.metrics.sum, {
-          id: 'graph',
-          cell: (info) => (
-            <div
-              className="shine h-4 rounded [.mini_&]:h-3"
-              style={{
-                width: (info.getValue() / maxCount) * 100 + '%',
-                background: getChartColor(info.row.index),
-              }}
-            />
-          ),
-          header: () => 'Graph',
-          footer: (info) => info.column.id,
-          size: width ? width * 0.6 : undefined,
-        }),
       ];
-    }, [width]),
-    columnResizeMode: 'onChange',
+    }, [maxCount, number]),
     state: {
       sorting,
     },
@@ -102,85 +106,64 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
   });
 
   return (
-    <div ref={ref}>
-      <div className="overflow-x-auto">
-        <Table
-          {...{
-            className: editMode ? '' : 'mini',
-            style: {
-              width: table.getTotalSize(),
-            },
-          }}
-        >
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead
-                    key={header.id}
-                    {...{
-                      colSpan: header.colSpan,
-                      style: {
-                        width: header.getSize(),
-                      },
-                    }}
-                  >
-                    <div
-                      {...{
-                        className: cn(
-                          'flex items-center gap-2',
-                          header.column.getCanSort() &&
-                            'cursor-pointer select-none'
-                        ),
-                        onClick: header.column.getToggleSortingHandler(),
-                      }}
-                    >
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                      {{
-                        asc: <ChevronUp className="ml-auto" size={14} />,
-                        desc: <ChevronDown className="ml-auto" size={14} />,
-                      }[header.column.getIsSorted() as string] ?? null}
-                    </div>
-                    <div
-                      {...(editMode
-                        ? {
-                            onMouseDown: header.getResizeHandler(),
-                            onTouchStart: header.getResizeHandler(),
-                            className: `resizer ${
-                              header.column.getIsResizing() ? 'isResizing' : ''
-                            }`,
-                            style: {},
-                          }
-                        : {})}
-                    />
-                  </TableHead>
-                ))}
-              </TableRow>
+    <Table
+      overflow={editMode}
+      className={cn('table-fixed', editMode ? '' : 'mini')}
+    >
+      <TableHeader>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <TableHead
+                key={header.id}
+                {...{
+                  colSpan: header.colSpan,
+                }}
+              >
+                <div
+                  {...{
+                    className: cn(
+                      'flex items-center gap-2',
+                      header.column.getCanSort() && 'cursor-pointer select-none'
+                    ),
+                    onClick: header.column.getToggleSortingHandler(),
+                  }}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                  {{
+                    asc: <ChevronUp className="ml-auto" size={14} />,
+                    desc: <ChevronDown className="ml-auto" size={14} />,
+                  }[header.column.getIsSorted() as string] ?? null}
+                </div>
+              </TableHead>
             ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows.map((row) => (
-              <TableRow key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    {...{
-                      style: {
-                        width: cell.column.getSize(),
-                      },
-                    }}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows.map((row) => (
+          <TableRow
+            key={row.id}
+            {...(onClick
+              ? {
+                  onClick() {
+                    onClick(row.original);
+                  },
+                  className: 'cursor-pointer',
+                }
+              : {})}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <TableCell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableCell>
             ))}
-          </TableBody>
-        </Table>
-      </div>
-    </div>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
   );
 }
diff --git a/apps/web/src/components/report/chart/ReportChartTooltip.tsx b/apps/web/src/components/report/chart/ReportChartTooltip.tsx
index 852fd9d6..8b904bc1 100644
--- a/apps/web/src/components/report/chart/ReportChartTooltip.tsx
+++ b/apps/web/src/components/report/chart/ReportChartTooltip.tsx
@@ -19,7 +19,7 @@ export function ReportChartTooltip({
   active,
   payload,
 }: ReportLineChartTooltipProps) {
-  const { previous } = useChartContext();
+  const { previous, unit } = useChartContext();
   const getLabel = useMappings();
   const interval = useSelector((state) => state.report.interval);
   const formatDate = useFormatDateInterval(interval);
@@ -41,7 +41,7 @@ export function ReportChartTooltip({
   const hidden = sorted.slice(limit);
 
   return (
-    <div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
+    <div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl min-w-[180px]">
       {visible.map((item, index) => {
         // If we have a <Cell /> component, payload can be nested
         const payload = item.payload.payload ?? item.payload;
@@ -57,11 +57,11 @@ export function ReportChartTooltip({
             {index === 0 && data.date && (
               <div className="flex justify-between gap-8">
                 <div>{formatDate(new Date(data.date))}</div>
-                {previous && data.previous?.date && (
+                {/* {previous && data.previous?.date && (
                   <div className="text-slate-400 italic">
                     {formatDate(new Date(data.previous.date))}
                   </div>
-                )}
+                )} */}
               </div>
             )}
             <div className="flex gap-2">
@@ -74,11 +74,15 @@ export function ReportChartTooltip({
                   {getLabel(data.label)}
                 </div>
                 <div className="flex justify-between gap-8">
-                  <div>{number.format(data.count)}</div>
+                  <div>
+                    {number.format(data.count)}
+                    {unit}
+                  </div>
 
                   <div className="flex gap-1">
                     <PreviousDiffIndicator {...data.previous}>
-                      {!!data.previous && `(${data.previous.count})`}
+                      {!!data.previous &&
+                        `(${data.previous.value + (unit ? unit : '')})`}
                     </PreviousDiffIndicator>
                   </div>
                 </div>
diff --git a/apps/web/src/components/report/chart/ReportHistogramChart.tsx b/apps/web/src/components/report/chart/ReportHistogramChart.tsx
index 7d057aec..cfa15bb1 100644
--- a/apps/web/src/components/report/chart/ReportHistogramChart.tsx
+++ b/apps/web/src/components/report/chart/ReportHistogramChart.tsx
@@ -32,7 +32,7 @@ export function ReportHistogramChart({
   const formatDate = useFormatDateInterval(interval);
   const { series, setVisibleSeries } = useVisibleSeries(data);
 
-  const rechartData = useRechartDataModel(data);
+  const rechartData = useRechartDataModel(series);
 
   return (
     <>
diff --git a/apps/web/src/components/report/chart/ReportLineChart.tsx b/apps/web/src/components/report/chart/ReportLineChart.tsx
index 4fa51382..a4206ab5 100644
--- a/apps/web/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/web/src/components/report/chart/ReportLineChart.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import type { IChartData } from '@/app/_trpc/client';
 import { AutoSizer } from '@/components/AutoSizer';
 import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
@@ -35,7 +35,7 @@ export function ReportLineChart({
   const { editMode, previous } = useChartContext();
   const formatDate = useFormatDateInterval(interval);
   const { series, setVisibleSeries } = useVisibleSeries(data);
-  const rechartData = useRechartDataModel(data);
+  const rechartData = useRechartDataModel(series);
 
   return (
     <>
diff --git a/apps/web/src/components/report/chart/ReportMapChart.tsx b/apps/web/src/components/report/chart/ReportMapChart.tsx
new file mode 100644
index 00000000..2b83b875
--- /dev/null
+++ b/apps/web/src/components/report/chart/ReportMapChart.tsx
@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import type { IChartData } from '@/app/_trpc/client';
+import { useVisibleSeries } from '@/hooks/useVisibleSeries';
+import { theme } from '@/utils/theme';
+import WorldMap from 'react-svg-worldmap';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import { useChartContext } from './ChartProvider';
+
+interface ReportMapChartProps {
+  data: IChartData;
+}
+
+export function ReportMapChart({ data }: ReportMapChartProps) {
+  const { metric, unit } = useChartContext();
+  const { series } = useVisibleSeries(data, 100);
+
+  const mapData = useMemo(
+    () =>
+      series.map((s) => ({
+        country: s.name.toLowerCase(),
+        value: s.metrics[metric],
+      })),
+    [series, metric]
+  );
+
+  return (
+    <AutoSizer disableHeight>
+      {({ width }) => (
+        <WorldMap
+          size={width}
+          data={mapData}
+          color={theme.colors['chart-0']}
+          borderColor={'#103A96'}
+          value-suffix={unit}
+        />
+      )}
+    </AutoSizer>
+  );
+}
diff --git a/apps/web/src/components/report/chart/ReportMetricChart.tsx b/apps/web/src/components/report/chart/ReportMetricChart.tsx
index 0b7137fc..59a107b0 100644
--- a/apps/web/src/components/report/chart/ReportMetricChart.tsx
+++ b/apps/web/src/components/report/chart/ReportMetricChart.tsx
@@ -1,25 +1,17 @@
 import type { IChartData } from '@/app/_trpc/client';
-import { ColorSquare } from '@/components/ColorSquare';
-import { useNumber } from '@/hooks/useNumerFormatter';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import { cn } from '@/utils/cn';
-import { theme } from '@/utils/theme';
-import { ChevronDown, ChevronUp, ChevronUpCircle } from 'lucide-react';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { Area, AreaChart } from 'recharts';
 
-import { PreviousDiffIndicator } from '../PreviousDiffIndicator';
 import { useChartContext } from './ChartProvider';
+import { MetricCard } from './MetricCard';
 
 interface ReportMetricChartProps {
   data: IChartData;
 }
 
 export function ReportMetricChart({ data }: ReportMetricChartProps) {
-  const { editMode } = useChartContext();
+  const { editMode, metric, unit } = useChartContext();
   const { series } = useVisibleSeries(data, editMode ? undefined : 2);
-  const color = theme?.colors['chart-0'];
-  const number = useNumber();
   return (
     <div
       className={cn(
@@ -29,62 +21,12 @@ export function ReportMetricChart({ data }: ReportMetricChartProps) {
     >
       {series.map((serie) => {
         return (
-          <div
-            className="relative border border-border p-4 rounded-md bg-white overflow-hidden"
+          <MetricCard
             key={serie.name}
-          >
-            <div className="absolute -top-1 -left-1 -right-1 -bottom-1 z-0 opacity-20">
-              <AutoSizer>
-                {({ width, height }) => (
-                  <AreaChart
-                    width={width}
-                    height={height / 3}
-                    data={serie.data}
-                    style={{ marginTop: (height / 3) * 2 }}
-                  >
-                    <defs>
-                      <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="5%" stopColor={color} stopOpacity={0.3} />
-                        <stop
-                          offset="95%"
-                          stopColor={color}
-                          stopOpacity={0.1}
-                        />
-                      </linearGradient>
-                    </defs>
-                    <Area
-                      dataKey="count"
-                      type="monotone"
-                      fill="url(#area)"
-                      fillOpacity={1}
-                      stroke={color}
-                      strokeWidth={2}
-                    />
-                  </AreaChart>
-                )}
-              </AutoSizer>
-            </div>
-            <div className="relative">
-              <div className="flex items-center gap-2 text-lg font-medium">
-                <ColorSquare>{serie.event.id}</ColorSquare>
-                {serie.name ?? serie.event.displayName ?? serie.event.name}
-              </div>
-              <div className="flex justify-between items-end">
-                <div className="mt-6 font-mono text-3xl font-bold">
-                  {number.format(serie.metrics.sum)}
-                </div>
-                {!!serie.metrics.previous.sum && (
-                  <div className="flex flex-col items-end">
-                    <PreviousDiffIndicator {...serie.metrics.previous.sum}>
-                      <div className="font-mono">
-                        {number.format(serie.metrics.previous.sum.value)}
-                      </div>
-                    </PreviousDiffIndicator>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
+            serie={serie}
+            metric={metric}
+            unit={unit}
+          />
         );
       })}
     </div>
diff --git a/apps/web/src/components/report/chart/ReportPieChart.tsx b/apps/web/src/components/report/chart/ReportPieChart.tsx
index e6c4c971..5ba9fd8c 100644
--- a/apps/web/src/components/report/chart/ReportPieChart.tsx
+++ b/apps/web/src/components/report/chart/ReportPieChart.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
 import type { IChartData } from '@/app/_trpc/client';
 import { AutoSizer } from '@/components/AutoSizer';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import { cn } from '@/utils/cn';
 import { round } from '@/utils/math';
 import { getChartColor } from '@/utils/theme';
+import { truncate } from '@/utils/truncate';
 import { Cell, Pie, PieChart, Tooltip } from 'recharts';
 
 import { useChartContext } from './ChartProvider';
@@ -15,66 +15,19 @@ interface ReportPieChartProps {
   data: IChartData;
 }
 
-const RADIAN = Math.PI / 180;
-const renderLabel = ({
-  x,
-  y,
-  cx,
-  cy,
-  midAngle,
-  innerRadius,
-  outerRadius,
-  payload,
-  ...props
-}: any) => {
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const xx = cx + radius * Math.cos(-midAngle * RADIAN);
-  const yy = cy + radius * Math.sin(-midAngle * RADIAN);
-  const label = payload.label;
-  const percent = round(payload.percent * 100, 1);
-
-  return (
-    <>
-      <text
-        x={xx}
-        y={yy}
-        fill="white"
-        textAnchor="middle"
-        dominantBaseline="central"
-        fontSize={12}
-      >
-        {percent}%
-      </text>
-      <text
-        x={x}
-        y={y}
-        fill="black"
-        textAnchor="middle"
-        dominantBaseline="central"
-        fontSize={12}
-      >
-        {label}
-      </text>
-    </>
-  );
-};
-
 export function ReportPieChart({ data }: ReportPieChartProps) {
   const { editMode } = useChartContext();
   const { series, setVisibleSeries } = useVisibleSeries(data);
 
   const sum = series.reduce((acc, serie) => acc + serie.metrics.sum, 0);
-  // Get max 10 series and than combine others into one
-  const pieData = series.map((serie) => {
-    return {
-      id: serie.name,
-      color: getChartColor(serie.index),
-      index: serie.index,
-      label: serie.name,
-      count: serie.metrics.sum,
-      percent: serie.metrics.sum / sum,
-    };
-  });
+  const pieData = series.map((serie) => ({
+    id: serie.name,
+    color: getChartColor(serie.index),
+    index: serie.index,
+    label: serie.name,
+    count: serie.metrics.sum,
+    percent: serie.metrics.sum / sum,
+  }));
 
   return (
     <>
@@ -127,3 +80,58 @@ export function ReportPieChart({ data }: ReportPieChartProps) {
     </>
   );
 }
+
+const renderLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  fill,
+  payload,
+}: {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  fill: string;
+  payload: { label: string; percent: number };
+}) => {
+  const RADIAN = Math.PI / 180;
+  const radius = 25 + innerRadius + (outerRadius - innerRadius);
+  const radiusProcent = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const xProcent = cx + radiusProcent * Math.cos(-midAngle * RADIAN);
+  const yProcent = cy + radiusProcent * Math.sin(-midAngle * RADIAN);
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  const label = payload.label;
+  const percent = round(payload.percent * 100, 1);
+
+  return (
+    <>
+      <text
+        x={xProcent}
+        y={yProcent}
+        fill="white"
+        textAnchor="middle"
+        dominantBaseline="central"
+        fontSize={10}
+        fontWeight={700}
+        pointerEvents={'none'}
+      >
+        {percent}%
+      </text>
+      <text
+        x={x}
+        y={y}
+        fill={fill}
+        textAnchor={x > cx ? 'start' : 'end'}
+        dominantBaseline="central"
+        fontSize={10}
+      >
+        {truncate(label, 20)}
+      </text>
+    </>
+  );
+};
diff --git a/apps/web/src/components/report/chart/index.tsx b/apps/web/src/components/report/chart/index.tsx
index c1811edb..b19221ef 100644
--- a/apps/web/src/components/report/chart/index.tsx
+++ b/apps/web/src/components/report/chart/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { memo } from 'react';
+import type { RouterOutputs } from '@/app/_trpc/client';
 import { api } from '@/app/_trpc/client';
 import { useAppParams } from '@/hooks/useAppParams';
 import type { IChartInput } from '@/types';
@@ -11,10 +12,13 @@ import { ReportAreaChart } from './ReportAreaChart';
 import { ReportBarChart } from './ReportBarChart';
 import { ReportHistogramChart } from './ReportHistogramChart';
 import { ReportLineChart } from './ReportLineChart';
+import { ReportMapChart } from './ReportMapChart';
 import { ReportMetricChart } from './ReportMetricChart';
 import { ReportPieChart } from './ReportPieChart';
 
-export type ReportChartProps = IChartInput;
+export type ReportChartProps = IChartInput & {
+  initialData?: RouterOutputs['chart']['chart'];
+};
 
 export const Chart = memo(
   withChartProivder(function Chart({
@@ -26,18 +30,23 @@ export const Chart = memo(
     range,
     lineType,
     previous,
+    formula,
+    unit,
+    metric,
+    initialData,
   }: ReportChartProps) {
     const params = useAppParams();
     const hasEmptyFilters = events.some((event) =>
       event.filters.some((filter) => filter.value.length === 0)
     );
     const enabled = events.length > 0 && !hasEmptyFilters;
+
     const chart = api.chart.chart.useQuery(
       {
-        interval,
-        chartType,
         // dont send lineType since it does not need to be sent
         lineType: 'monotone',
+        interval,
+        chartType,
         events,
         breakdowns,
         name,
@@ -46,10 +55,14 @@ export const Chart = memo(
         endDate: null,
         projectId: params.projectId,
         previous,
+        formula,
+        unit,
+        metric,
       },
       {
-        keepPreviousData: false,
+        keepPreviousData: true,
         enabled,
+        initialData,
       }
     );
 
@@ -66,10 +79,10 @@ export const Chart = memo(
       );
     }
 
-    if (chart.isFetching) {
+    if (chart.isLoading) {
       return (
         <ChartAnimationContainer>
-          <ChartAnimation name="airplane" className="max-w-sm w-fill mx-auto" />
+          {/* <ChartAnimation name="airplane" className="max-w-sm w-fill mx-auto" /> */}
           <p className="text-center font-medium">Loading...</p>
         </ChartAnimationContainer>
       );
@@ -99,6 +112,10 @@ export const Chart = memo(
       );
     }
 
+    if (chartType === 'map') {
+      return <ReportMapChart data={chart.data} />;
+    }
+
     if (chartType === 'histogram') {
       return <ReportHistogramChart interval={interval} data={chart.data} />;
     }
diff --git a/apps/web/src/components/report/reportSlice.ts b/apps/web/src/components/report/reportSlice.ts
index 118eb4c3..b8c3dec6 100644
--- a/apps/web/src/components/report/reportSlice.ts
+++ b/apps/web/src/components/report/reportSlice.ts
@@ -27,6 +27,8 @@ type InitialState = IChartInput & {
 const initialState: InitialState = {
   ready: false,
   dirty: false,
+  // TODO: remove this
+  projectId: '',
   name: 'Untitled',
   chartType: 'linear',
   lineType: 'monotone',
@@ -37,6 +39,9 @@ const initialState: InitialState = {
   startDate: null,
   endDate: null,
   previous: false,
+  formula: undefined,
+  unit: undefined,
+  metric: 'sum',
 };
 
 export const reportSlice = createSlice({
@@ -100,6 +105,12 @@ export const reportSlice = createSlice({
       });
     },
 
+    // Previous
+    changePrevious: (state, action: PayloadAction<boolean>) => {
+      state.dirty = true;
+      state.previous = action.payload;
+    },
+
     // Breakdowns
     addBreakdown: (
       state,
@@ -181,6 +192,12 @@ export const reportSlice = createSlice({
       state.range = action.payload;
       state.interval = getDefaultIntervalByRange(action.payload);
     },
+
+    // Formula
+    changeFormula: (state, action: PayloadAction<string>) => {
+      state.dirty = true;
+      state.formula = action.payload;
+    },
   },
 });
 
@@ -201,6 +218,8 @@ export const {
   changeChartType,
   changeLineType,
   resetDirty,
+  changeFormula,
+  changePrevious,
 } = reportSlice.actions;
 
 export default reportSlice.reducer;
diff --git a/apps/web/src/components/report/sidebar/EventPropertiesCombobox.tsx b/apps/web/src/components/report/sidebar/EventPropertiesCombobox.tsx
new file mode 100644
index 00000000..b6751e48
--- /dev/null
+++ b/apps/web/src/components/report/sidebar/EventPropertiesCombobox.tsx
@@ -0,0 +1,62 @@
+import { api } from '@/app/_trpc/client';
+import { Combobox } from '@/components/ui/combobox';
+import { useAppParams } from '@/hooks/useAppParams';
+import { useDispatch } from '@/redux';
+import type { IChartEvent } from '@/types';
+import { cn } from '@/utils/cn';
+import { DatabaseIcon, FilterIcon } from 'lucide-react';
+
+import { changeEvent } from '../reportSlice';
+
+interface EventPropertiesComboboxProps {
+  event: IChartEvent;
+}
+
+export function EventPropertiesCombobox({
+  event,
+}: EventPropertiesComboboxProps) {
+  const dispatch = useDispatch();
+  const { projectId } = useAppParams();
+
+  const query = api.chart.properties.useQuery(
+    {
+      event: event.name,
+      projectId,
+    },
+    {
+      enabled: !!event.name,
+    }
+  );
+
+  const properties = (query.data ?? []).map((item) => ({
+    label: item,
+    value: item,
+  }));
+
+  return (
+    <Combobox
+      searchable
+      placeholder="Select a filter"
+      value=""
+      items={properties}
+      onChange={(value) => {
+        dispatch(
+          changeEvent({
+            ...event,
+            property: value,
+          })
+        );
+      }}
+    >
+      <button
+        className={cn(
+          'flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs',
+          !event.property && 'border-destructive text-destructive'
+        )}
+      >
+        <DatabaseIcon size={12} />{' '}
+        {event.property ? `Property: ${event.property}` : 'Select property'}
+      </button>
+    </Combobox>
+  );
+}
diff --git a/apps/web/src/components/report/sidebar/ReportEventMore.tsx b/apps/web/src/components/report/sidebar/ReportEventMore.tsx
index 987a5f34..25168b87 100644
--- a/apps/web/src/components/report/sidebar/ReportEventMore.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEventMore.tsx
@@ -34,7 +34,7 @@ const labels = [
 ];
 
 export interface ReportEventMoreProps {
-  onClick: (action: 'createFilter' | 'remove') => void;
+  onClick: (action: 'remove') => void;
 }
 
 export function ReportEventMore({ onClick }: ReportEventMoreProps) {
@@ -49,10 +49,6 @@ export function ReportEventMore({ onClick }: ReportEventMoreProps) {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[200px]">
         <DropdownMenuGroup>
-          <DropdownMenuItem onClick={() => onClick('createFilter')}>
-            <Filter className="mr-2 h-4 w-4" />
-            Add filter
-          </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem
             className="text-red-600"
diff --git a/apps/web/src/components/report/sidebar/ReportEvents.tsx b/apps/web/src/components/report/sidebar/ReportEvents.tsx
index 6ac39b72..e8bf88bf 100644
--- a/apps/web/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/web/src/components/report/sidebar/ReportEvents.tsx
@@ -1,25 +1,31 @@
 'use client';
 
-import { useState } from 'react';
 import { api } from '@/app/_trpc/client';
 import { ColorSquare } from '@/components/ColorSquare';
 import { Dropdown } from '@/components/Dropdown';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Combobox } from '@/components/ui/combobox';
 import { Input } from '@/components/ui/input';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDebounceFn } from '@/hooks/useDebounceFn';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartEvent } from '@/types';
-import { Filter, GanttChart, Users } from 'lucide-react';
-import { useParams } from 'next/navigation';
+import { GanttChart, Users } from 'lucide-react';
 
-import { addEvent, changeEvent, removeEvent } from '../reportSlice';
-import { ReportEventFilters } from './ReportEventFilters';
+import {
+  addEvent,
+  changeEvent,
+  changePrevious,
+  removeEvent,
+} from '../reportSlice';
+import { EventPropertiesCombobox } from './EventPropertiesCombobox';
+import { FiltersCombobox } from './filters/FiltersCombobox';
+import { FiltersList } from './filters/FiltersList';
 import { ReportEventMore } from './ReportEventMore';
 import type { ReportEventMoreProps } from './ReportEventMore';
 
 export function ReportEvents() {
-  const [isCreating, setIsCreating] = useState(false);
+  const previous = useSelector((state) => state.report.previous);
   const selectedEvents = useSelector((state) => state.report.events);
   const dispatch = useDispatch();
   const params = useAppParams();
@@ -37,9 +43,6 @@ export function ReportEvents() {
   const handleMore = (event: IChartEvent) => {
     const callback: ReportEventMoreProps['onClick'] = (action) => {
       switch (action) {
-        case 'createFilter': {
-          return setIsCreating(true);
-        }
         case 'remove': {
           return dispatch(removeEvent(event));
         }
@@ -111,12 +114,20 @@ export function ReportEvents() {
                     },
                     {
                       value: 'user_average',
-                      label: 'Unique users (average)',
+                      label: 'Average event per user',
                     },
                     {
                       value: 'one_event_per_user',
                       label: 'One event per user',
                     },
+                    {
+                      value: 'property_sum',
+                      label: 'Sum of property',
+                    },
+                    {
+                      value: 'property_average',
+                      label: 'Average of property',
+                    },
                   ]}
                   label="Segment"
                 >
@@ -127,12 +138,20 @@ export function ReportEvents() {
                       </>
                     ) : event.segment === 'user_average' ? (
                       <>
-                        <Users size={12} /> Unique users (average)
+                        <Users size={12} /> Average event per user
                       </>
                     ) : event.segment === 'one_event_per_user' ? (
                       <>
                         <Users size={12} /> One event per user
                       </>
+                    ) : event.segment === 'property_sum' ? (
+                      <>
+                        <Users size={12} /> Sum of property
+                      </>
+                    ) : event.segment === 'property_average' ? (
+                      <>
+                        <Users size={12} /> Average of property
+                      </>
                     ) : (
                       <>
                         <GanttChart size={12} /> All events
@@ -140,18 +159,17 @@ export function ReportEvents() {
                     )}
                   </button>
                 </Dropdown>
-                <button
-                  onClick={() => {
-                    handleMore(event)('createFilter');
-                  }}
-                  className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs"
-                >
-                  <Filter size={12} /> Filter
-                </button>
+                {/*  */}
+                <FiltersCombobox event={event} />
+
+                {(event.segment === 'property_average' ||
+                  event.segment === 'property_sum') && (
+                  <EventPropertiesCombobox event={event} />
+                )}
               </div>
 
               {/* Filters */}
-              <ReportEventFilters {...{ isCreating, setIsCreating, event }} />
+              <FiltersList event={event} />
             </div>
           );
         })}
@@ -172,6 +190,17 @@ export function ReportEvents() {
           placeholder="Select event"
         />
       </div>
+      <label
+        className="flex items-center gap-2 cursor-pointer select-none text-sm font-medium mt-4"
+        htmlFor="previous"
+      >
+        <Checkbox
+          id="previous"
+          checked={previous}
+          onCheckedChange={(val) => dispatch(changePrevious(!!val))}
+        />
+        Show previous / Compare
+      </label>
     </div>
   );
 }
diff --git a/apps/web/src/components/report/sidebar/ReportForumula.tsx b/apps/web/src/components/report/sidebar/ReportForumula.tsx
new file mode 100644
index 00000000..1908bbe7
--- /dev/null
+++ b/apps/web/src/components/report/sidebar/ReportForumula.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { useDispatch, useSelector } from '@/redux';
+
+import { changeFormula } from '../reportSlice';
+
+export function ReportForumula() {
+  const forumula = useSelector((state) => state.report.formula);
+  const dispatch = useDispatch();
+
+  return (
+    <div>
+      <h3 className="mb-2 font-medium">Forumula</h3>
+      <div className="flex flex-col gap-4">
+        <Input
+          placeholder="eg: A/B"
+          value={forumula}
+          onChange={(event) => {
+            dispatch(changeFormula(event.target.value));
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/report/sidebar/ReportSidebar.tsx b/apps/web/src/components/report/sidebar/ReportSidebar.tsx
index 00b57b3e..7fc31b2d 100644
--- a/apps/web/src/components/report/sidebar/ReportSidebar.tsx
+++ b/apps/web/src/components/report/sidebar/ReportSidebar.tsx
@@ -3,11 +3,13 @@ import { SheetClose } from '@/components/ui/sheet';
 
 import { ReportBreakdowns } from './ReportBreakdowns';
 import { ReportEvents } from './ReportEvents';
+import { ReportForumula } from './ReportForumula';
 
 export function ReportSidebar() {
   return (
     <div className="flex flex-col gap-8 pb-12">
       <ReportEvents />
+      <ReportForumula />
       <ReportBreakdowns />
       <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-white/100 to-white/0">
         <SheetClose asChild>
diff --git a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx b/apps/web/src/components/report/sidebar/filters/FilterItem.tsx
similarity index 57%
rename from apps/web/src/components/report/sidebar/ReportEventFilters.tsx
rename to apps/web/src/components/report/sidebar/filters/FilterItem.tsx
index 1259be2d..72033e11 100644
--- a/apps/web/src/components/report/sidebar/ReportEventFilters.tsx
+++ b/apps/web/src/components/report/sidebar/filters/FilterItem.tsx
@@ -1,18 +1,8 @@
-import type { Dispatch } from 'react';
 import { api } from '@/app/_trpc/client';
 import { ColorSquare } from '@/components/ColorSquare';
 import { Dropdown } from '@/components/Dropdown';
 import { Button } from '@/components/ui/button';
 import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from '@/components/ui/command';
 import { RenderDots } from '@/components/ui/RenderDots';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
@@ -23,93 +13,24 @@ import type {
   IChartEventFilterValue,
 } from '@/types';
 import { operators } from '@/utils/constants';
-import { CreditCard, SlidersHorizontal, Trash } from 'lucide-react';
+import { SlidersHorizontal, Trash } from 'lucide-react';
 import { useParams } from 'next/navigation';
 
-import { changeEvent } from '../reportSlice';
-
-interface ReportEventFiltersProps {
-  event: IChartEvent;
-  isCreating: boolean;
-  setIsCreating: Dispatch<boolean>;
-}
-
-export function ReportEventFilters({
-  event,
-  isCreating,
-  setIsCreating,
-}: ReportEventFiltersProps) {
-  const params = useAppParams();
-  const dispatch = useDispatch();
-  const propertiesQuery = api.chart.properties.useQuery(
-    {
-      event: event.name,
-      projectId: params.projectId,
-    },
-    {
-      enabled: !!event.name,
-    }
-  );
-
-  return (
-    <div>
-      <div className="flex flex-col divide-y bg-slate-50">
-        {event.filters.map((filter) => {
-          return <Filter key={filter.name} filter={filter} event={event} />;
-        })}
-
-        <CommandDialog open={isCreating} onOpenChange={setIsCreating} modal>
-          <CommandInput placeholder="Search properties" />
-          <CommandList>
-            <CommandEmpty>Such emptyness 🤨</CommandEmpty>
-            <CommandGroup heading="Properties">
-              {propertiesQuery.data?.map((item) => (
-                <CommandItem
-                  key={item}
-                  onSelect={() => {
-                    setIsCreating(false);
-                    dispatch(
-                      changeEvent({
-                        ...event,
-                        filters: [
-                          ...event.filters,
-                          {
-                            id: (event.filters.length + 1).toString(),
-                            name: item,
-                            operator: 'is',
-                            value: [],
-                          },
-                        ],
-                      })
-                    );
-                  }}
-                >
-                  <CreditCard className="mr-2 h-4 w-4" />
-                  <RenderDots className="text-sm">{item}</RenderDots>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-            <CommandSeparator />
-          </CommandList>
-        </CommandDialog>
-      </div>
-    </div>
-  );
-}
+import { changeEvent } from '../../reportSlice';
 
 interface FilterProps {
   event: IChartEvent;
   filter: IChartEvent['filters'][number];
 }
 
-function Filter({ filter, event }: FilterProps) {
-  const params = useParams<{ organizationId: string; projectId: string }>();
+export function FilterItem({ filter, event }: FilterProps) {
+  const { projectId } = useAppParams();
   const getLabel = useMappings();
   const dispatch = useDispatch();
   const potentialValues = api.chart.values.useQuery({
     event: event.name,
     property: filter.name,
-    projectId: params?.projectId!,
+    projectId,
   });
 
   const valuesCombobox =
diff --git a/apps/web/src/components/report/sidebar/filters/FiltersCombobox.tsx b/apps/web/src/components/report/sidebar/filters/FiltersCombobox.tsx
new file mode 100644
index 00000000..e639b61c
--- /dev/null
+++ b/apps/web/src/components/report/sidebar/filters/FiltersCombobox.tsx
@@ -0,0 +1,61 @@
+import { api } from '@/app/_trpc/client';
+import { Combobox } from '@/components/ui/combobox';
+import { useAppParams } from '@/hooks/useAppParams';
+import { useDispatch } from '@/redux';
+import type { IChartEvent } from '@/types';
+import { FilterIcon } from 'lucide-react';
+
+import { changeEvent } from '../../reportSlice';
+
+interface FiltersComboboxProps {
+  event: IChartEvent;
+}
+
+export function FiltersCombobox({ event }: FiltersComboboxProps) {
+  const dispatch = useDispatch();
+  const { projectId } = useAppParams();
+
+  const query = api.chart.properties.useQuery(
+    {
+      event: event.name,
+      projectId,
+    },
+    {
+      enabled: !!event.name,
+    }
+  );
+
+  const properties = (query.data ?? []).map((item) => ({
+    label: item,
+    value: item,
+  }));
+
+  return (
+    <Combobox
+      searchable
+      placeholder="Select a filter"
+      value=""
+      items={properties}
+      onChange={(value) => {
+        dispatch(
+          changeEvent({
+            ...event,
+            filters: [
+              ...event.filters,
+              {
+                id: (event.filters.length + 1).toString(),
+                name: value,
+                operator: 'is',
+                value: [],
+              },
+            ],
+          })
+        );
+      }}
+    >
+      <button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs">
+        <FilterIcon size={12} /> Add filter
+      </button>
+    </Combobox>
+  );
+}
diff --git a/apps/web/src/components/report/sidebar/filters/FiltersList.tsx b/apps/web/src/components/report/sidebar/filters/FiltersList.tsx
new file mode 100644
index 00000000..03c4f920
--- /dev/null
+++ b/apps/web/src/components/report/sidebar/filters/FiltersList.tsx
@@ -0,0 +1,19 @@
+import type { IChartEvent } from '@/types';
+
+import { FilterItem } from './FilterItem';
+
+interface ReportEventFiltersProps {
+  event: IChartEvent;
+}
+
+export function FiltersList({ event }: ReportEventFiltersProps) {
+  return (
+    <div>
+      <div className="flex flex-col divide-y bg-slate-50">
+        {event.filters.map((filter) => {
+          return <FilterItem key={filter.name} filter={filter} event={event} />;
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index c8df0653..60b45ea9 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-1.5 h-[20px] text-[10px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
@@ -16,6 +16,8 @@ const badgeVariants = cva(
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        success:
+          'border-transparent bg-emerald-500 text-emerald-100 hover:bg-emerald-500/80',
         outline: 'text-foreground',
       },
     },
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 5e4f5e59..0ab333b1 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -38,7 +38,7 @@ const buttonVariants = cva(
   }
 );
 
-interface ButtonProps
+export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
index 706d51a6..a939345a 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import type { ButtonProps } from '@/components/ui/button';
 import { Button } from '@/components/ui/button';
 import {
   Command,
@@ -15,9 +16,10 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { cn } from '@/utils/cn';
+import type { LucideIcon } from 'lucide-react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 
-interface ComboboxProps<T> {
+export interface ComboboxProps<T> {
   placeholder: string;
   items: {
     value: T;
@@ -30,8 +32,18 @@ interface ComboboxProps<T> {
   onCreate?: (value: T) => void;
   className?: string;
   searchable?: boolean;
+  icon?: LucideIcon;
+  size?: ButtonProps['size'];
+  label?: string;
 }
 
+export type ExtendedComboboxProps<T> = Omit<
+  ComboboxProps<T>,
+  'items' | 'placeholder'
+> & {
+  placeholder?: string;
+};
+
 export function Combobox<T extends string>({
   placeholder,
   items,
@@ -41,6 +53,9 @@ export function Combobox<T extends string>({
   onCreate,
   className,
   searchable,
+  icon: Icon,
+  size,
+  label,
 }: ComboboxProps<T>) {
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
@@ -55,11 +70,13 @@ export function Combobox<T extends string>({
       <PopoverTrigger asChild>
         {children ?? (
           <Button
+            size={size}
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className={cn('justify-between min-w-[150px]', className)}
+            className={cn('justify-between', className)}
           >
+            {Icon ? <Icon className="mr-2" size={16} /> : null}
             <span className="overflow-hidden text-ellipsis whitespace-nowrap">
               {value ? find(value)?.label ?? 'No match' : placeholder}
             </span>
@@ -67,7 +84,7 @@ export function Combobox<T extends string>({
           </Button>
         )}
       </PopoverTrigger>
-      <PopoverContent className="w-full min-w-0 p-0" align="start">
+      <PopoverContent className="w-full max-w-md p-0" align="start">
         <Command>
           {searchable === true && (
             <CommandInput
@@ -80,7 +97,7 @@ export function Combobox<T extends string>({
             <CommandEmpty className="p-2">
               <Button
                 onClick={() => {
-                  onCreate(search);
+                  onCreate(search as T);
                   setSearch('');
                   setOpen(false);
                 }}
@@ -99,7 +116,7 @@ export function Combobox<T extends string>({
                   value={item.value}
                   onSelect={(currentValue) => {
                     const value = find(currentValue)?.value ?? currentValue;
-                    onChange(value);
+                    onChange(value as T);
                     setOpen(false);
                   }}
                   {...(item.disabled && { disabled: true })}
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
index 0e9cc931..d2a3ff6e 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -32,7 +32,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-150',
   {
     variants: {
       side: {
diff --git a/apps/web/src/components/ui/table.tsx b/apps/web/src/components/ui/table.tsx
index 8386924f..fda58dff 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/apps/web/src/components/ui/table.tsx
@@ -5,10 +5,13 @@ import { cn } from '@/utils/cn';
 
 const Table = React.forwardRef<
   HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement> & { wrapper?: boolean }
->(({ className, wrapper, ...props }, ref) => (
+  React.HTMLAttributes<HTMLTableElement> & {
+    wrapper?: boolean;
+    overflow?: boolean;
+  }
+>(({ className, wrapper, overflow = true, ...props }, ref) => (
   <div className={cn('border border-border rounded-md bg-white', className)}>
-    <div className="relative w-full overflow-auto ">
+    <div className={cn('relative w-full', overflow && 'overflow-auto')}>
       <table
         ref={ref}
         className={cn(
diff --git a/apps/web/src/hooks/useNumerFormatter.ts b/apps/web/src/hooks/useNumerFormatter.ts
index c448476a..e027a61d 100644
--- a/apps/web/src/hooks/useNumerFormatter.ts
+++ b/apps/web/src/hooks/useNumerFormatter.ts
@@ -1,8 +1,13 @@
+import { isNil } from 'ramda';
+
 export function useNumber() {
   const locale = 'en-gb';
 
   return {
-    format: (value: number) => {
+    format: (value: number | null | undefined) => {
+      if (isNil(value)) {
+        return 'N/A';
+      }
       return new Intl.NumberFormat(locale, {
         maximumSignificantDigits: 20,
       }).format(value);
diff --git a/apps/web/src/hooks/useRechartDataModel.ts b/apps/web/src/hooks/useRechartDataModel.ts
index 61f2229a..535a4b2c 100644
--- a/apps/web/src/hooks/useRechartDataModel.ts
+++ b/apps/web/src/hooks/useRechartDataModel.ts
@@ -4,20 +4,20 @@ import { getChartColor } from '@/utils/theme';
 
 export type IRechartPayloadItem = IChartSerieDataItem & { color: string };
 
-export function useRechartDataModel(data: IChartData) {
+export function useRechartDataModel(series: IChartData['series']) {
   return useMemo(() => {
     return (
-      data.series[0]?.data.map(({ date }) => {
+      series[0]?.data.map(({ date }) => {
         return {
           date,
-          ...data.series.reduce((acc, serie, idx) => {
+          ...series.reduce((acc, serie, idx) => {
             return {
               ...acc,
               ...serie.data.reduce(
                 (acc2, item) => {
                   if (item.date === date) {
                     if (item.previous) {
-                      acc2[`${idx}:prev:count`] = item.previous.count;
+                      acc2[`${idx}:prev:count`] = item.previous.value;
                     }
                     acc2[`${idx}:count`] = item.count;
                     acc2[`${idx}:payload`] = {
@@ -34,5 +34,5 @@ export function useRechartDataModel(data: IChartData) {
         };
       }) ?? []
     );
-  }, [data]);
+  }, [series]);
 }
diff --git a/apps/web/src/hooks/useVisibleSeries.ts b/apps/web/src/hooks/useVisibleSeries.ts
index a6030eb1..a37a349f 100644
--- a/apps/web/src/hooks/useVisibleSeries.ts
+++ b/apps/web/src/hooks/useVisibleSeries.ts
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { IChartData } from '@/app/_trpc/client';
 
+export type IVisibleSeries = ReturnType<typeof useVisibleSeries>['series'];
 export function useVisibleSeries(data: IChartData, limit?: number | undefined) {
   const max = limit ?? 5;
   const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
diff --git a/apps/web/src/modals/SaveReport.tsx b/apps/web/src/modals/SaveReport.tsx
index b4876745..178b571f 100644
--- a/apps/web/src/modals/SaveReport.tsx
+++ b/apps/web/src/modals/SaveReport.tsx
@@ -10,7 +10,7 @@ import { toast } from '@/components/ui/use-toast';
 import { useAppParams } from '@/hooks/useAppParams';
 import type { IChartInput } from '@/types';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
diff --git a/apps/web/src/server/api/routers/chart.formula.ts b/apps/web/src/server/api/routers/chart.formula.ts
new file mode 100644
index 00000000..57171ec3
--- /dev/null
+++ b/apps/web/src/server/api/routers/chart.formula.ts
@@ -0,0 +1,264 @@
+import { getChartSql } from '@/server/services/chart.service';
+import type {
+  IChartEvent,
+  IChartInput,
+  IGetChartDataInput,
+  IInterval,
+} from '@/types';
+import { alphabetIds } from '@/utils/constants';
+import { average, max, min, round, sum } from '@/utils/math';
+import * as mathjs from 'mathjs';
+import { sort } from 'ramda';
+
+import { chQuery } from '@mixan/db';
+
+export type GetChartDataResult = Awaited<ReturnType<typeof getChartData>>;
+export interface ResultItem {
+  label: string | null;
+  count: number | null;
+  date: string;
+}
+
+function getEventLegend(event: IChartEvent) {
+  return event.displayName ?? `${event.name} (${event.id})`;
+}
+
+function fillEmptySpotsInTimeline(
+  items: ResultItem[],
+  interval: IInterval,
+  startDate: string,
+  endDate: string
+) {
+  const result = [];
+  const clonedStartDate = new Date(startDate);
+  const clonedEndDate = new Date(endDate);
+  const today = new Date();
+
+  if (interval === 'minute') {
+    clonedStartDate.setUTCSeconds(0, 0);
+    clonedEndDate.setUTCMinutes(clonedEndDate.getUTCMinutes() + 1, 0, 0);
+  } else if (interval === 'hour') {
+    clonedStartDate.setUTCMinutes(0, 0, 0);
+    clonedEndDate.setUTCMinutes(0, 0, 0);
+  } else {
+    clonedStartDate.setUTCHours(0, 0, 0, 0);
+    clonedEndDate.setUTCHours(0, 0, 0, 0);
+  }
+
+  if (interval === 'month') {
+    clonedStartDate.setUTCDate(1);
+    clonedEndDate.setUTCDate(1);
+  }
+
+  // Force if interval is month and the start date is the same month as today
+  const shouldForce = () =>
+    interval === 'month' &&
+    clonedStartDate.getUTCFullYear() === today.getUTCFullYear() &&
+    clonedStartDate.getUTCMonth() === today.getUTCMonth();
+  let prev = undefined;
+  while (
+    shouldForce() ||
+    clonedStartDate.getTime() <= clonedEndDate.getTime()
+  ) {
+    if (prev === clonedStartDate.getTime()) {
+      console.log('GET OUT NOW!');
+      break;
+    }
+    prev = clonedStartDate.getTime();
+
+    const getYear = (date: Date) => date.getUTCFullYear();
+    const getMonth = (date: Date) => date.getUTCMonth();
+    const getDay = (date: Date) => date.getUTCDate();
+    const getHour = (date: Date) => date.getUTCHours();
+    const getMinute = (date: Date) => date.getUTCMinutes();
+
+    const item = items.find((item) => {
+      const date = new Date(item.date);
+
+      if (interval === 'month') {
+        return (
+          getYear(date) === getYear(clonedStartDate) &&
+          getMonth(date) === getMonth(clonedStartDate)
+        );
+      }
+      if (interval === 'day') {
+        return (
+          getYear(date) === getYear(clonedStartDate) &&
+          getMonth(date) === getMonth(clonedStartDate) &&
+          getDay(date) === getDay(clonedStartDate)
+        );
+      }
+      if (interval === 'hour') {
+        return (
+          getYear(date) === getYear(clonedStartDate) &&
+          getMonth(date) === getMonth(clonedStartDate) &&
+          getDay(date) === getDay(clonedStartDate) &&
+          getHour(date) === getHour(clonedStartDate)
+        );
+      }
+      if (interval === 'minute') {
+        return (
+          getYear(date) === getYear(clonedStartDate) &&
+          getMonth(date) === getMonth(clonedStartDate) &&
+          getDay(date) === getDay(clonedStartDate) &&
+          getHour(date) === getHour(clonedStartDate) &&
+          getMinute(date) === getMinute(clonedStartDate)
+        );
+      }
+
+      return false;
+    });
+
+    if (item) {
+      result.push({
+        ...item,
+        date: clonedStartDate.toISOString(),
+      });
+    } else {
+      result.push({
+        date: clonedStartDate.toISOString(),
+        count: 0,
+        label: null,
+      });
+    }
+
+    switch (interval) {
+      case 'day': {
+        clonedStartDate.setUTCDate(clonedStartDate.getUTCDate() + 1);
+        break;
+      }
+      case 'hour': {
+        clonedStartDate.setUTCHours(clonedStartDate.getUTCHours() + 1);
+        break;
+      }
+      case 'minute': {
+        clonedStartDate.setUTCMinutes(clonedStartDate.getUTCMinutes() + 1);
+        break;
+      }
+      case 'month': {
+        clonedStartDate.setUTCMonth(clonedStartDate.getUTCMonth() + 1);
+        break;
+      }
+    }
+  }
+
+  return sort(function (a, b) {
+    return new Date(a.date).getTime() - new Date(b.date).getTime();
+  }, result);
+}
+
+export function withFormula(
+  { formula }: IChartInput,
+  series: GetChartDataResult
+) {
+  if (!formula) {
+    return series;
+  }
+
+  if (!series) {
+    return series;
+  }
+
+  if (!series[0]) {
+    return series;
+  }
+  if (!series[0].data) {
+    return series;
+  }
+
+  return [
+    {
+      ...series[0],
+      data: series[0].data.map((item, dIndex) => {
+        const scope = series.reduce((acc, item) => {
+          return {
+            ...acc,
+            [item.event.id]: item.data[dIndex]?.count ?? 0,
+          };
+        }, {});
+
+        const count = mathjs.parse(formula).compile().evaluate(scope) as number;
+        return {
+          ...item,
+          count:
+            Number.isNaN(count) || !Number.isFinite(count)
+              ? null
+              : round(count, 2),
+        };
+      }),
+    },
+  ];
+}
+
+export async function getChartData(payload: IGetChartDataInput) {
+  let result = await chQuery<ResultItem>(getChartSql(payload));
+
+  if (result.length === 0 && payload.breakdowns.length > 0) {
+    result = await chQuery<ResultItem>(
+      getChartSql({
+        ...payload,
+        breakdowns: [],
+      })
+    );
+  }
+
+  // group by sql label
+  const series = result.reduce(
+    (acc, item) => {
+      // item.label can be null when using breakdowns on a property
+      // that doesn't exist on all events
+      const label = item.label?.trim() || '(not set)';
+      if (label) {
+        if (acc[label]) {
+          acc[label]?.push(item);
+        } else {
+          acc[label] = [item];
+        }
+      }
+
+      return {
+        ...acc,
+      };
+    },
+    {} as Record<string, ResultItem[]>
+  );
+
+  return Object.keys(series).map((key) => {
+    // If we have breakdowns, we want to use the breakdown key as the legend
+    // But only if it successfully broke it down, otherwise we use the getEventLabel
+    const serieName =
+      payload.breakdowns.length && !alphabetIds.includes(key as 'A')
+        ? key
+        : getEventLegend(payload.event);
+    const data =
+      payload.chartType === 'area' ||
+      payload.chartType === 'linear' ||
+      payload.chartType === 'histogram' ||
+      payload.chartType === 'metric' ||
+      payload.chartType === 'pie' ||
+      payload.chartType === 'bar'
+        ? fillEmptySpotsInTimeline(
+            series[key] ?? [],
+            payload.interval,
+            payload.startDate,
+            payload.endDate
+          ).map((item) => {
+            return {
+              label: serieName,
+              count: item.count ? round(item.count) : null,
+              date: new Date(item.date).toISOString(),
+            };
+          })
+        : (series[key] ?? []).map((item) => ({
+            label: item.label,
+            count: item.count ? round(item.count) : null,
+            date: new Date(item.date).toISOString(),
+          }));
+
+    return {
+      name: serieName,
+      event: payload.event,
+      data,
+    };
+  });
+}
diff --git a/apps/web/src/server/api/routers/chart.ts b/apps/web/src/server/api/routers/chart.ts
index 631f9759..5c5204f0 100644
--- a/apps/web/src/server/api/routers/chart.ts
+++ b/apps/web/src/server/api/routers/chart.ts
@@ -1,31 +1,56 @@
 import { createTRPCRouter, protectedProcedure } from '@/server/api/trpc';
-import * as cache from '@/server/cache';
-import { getChartSql } from '@/server/chart-sql/getChartSql';
-import { isJsonPath, selectJsonPath } from '@/server/chart-sql/helpers';
-import { db } from '@/server/db';
-import { getUniqueEvents } from '@/server/services/event.service';
-import type {
-  IChartEvent,
-  IChartRange,
-  IGetChartDataInput,
-  IInterval,
-} from '@/types';
-import { alphabetIds } from '@/utils/constants';
+import type { IChartEvent, IChartInput, IChartRange } from '@/types';
 import { getDaysOldDate } from '@/utils/date';
-import { average, round, sum } from '@/utils/math';
-import { toDots } from '@/utils/object';
-import { zChartInputWithDates } from '@/utils/validation';
-import { pipe, sort, uniq } from 'ramda';
+import { average, max, min, round, sum } from '@/utils/math';
+import { zChartInput } from '@/utils/validation';
+import { flatten, map, pathOr, pipe, prop, sort, uniq } from 'ramda';
 import { z } from 'zod';
 
+import { chQuery } from '@mixan/db';
+
+import { getChartData, withFormula } from './chart.formula';
+
+type PreviousValue = {
+  value: number;
+  diff: number | null;
+  state: 'positive' | 'negative' | 'neutral';
+} | null;
+
+interface Metrics {
+  sum: number;
+  average: number;
+  min: number;
+  max: number;
+  previous: {
+    sum: PreviousValue;
+    average: PreviousValue;
+    min: PreviousValue;
+    max: PreviousValue;
+  };
+}
+
+interface FinalChart {
+  events: IChartInput['events'];
+  series: {
+    name: string;
+    event: IChartEvent;
+    metrics: Metrics;
+    data: {
+      date: string;
+      count: number;
+      label: string | null;
+      previous: PreviousValue;
+    }[];
+  }[];
+  metrics: Metrics;
+}
+
 export const chartRouter = createTRPCRouter({
   events: protectedProcedure
     .input(z.object({ projectId: z.string() }))
     .query(async ({ input: { projectId } }) => {
-      const events = await cache.getOr(
-        `events_${projectId}`,
-        1000 * 60 * 60 * 24,
-        () => getUniqueEvents({ projectId: projectId })
+      const events = await chQuery<{ name: string }>(
+        `SELECT DISTINCT name FROM events WHERE project_id = '${projectId}'`
       );
 
       return [
@@ -39,32 +64,36 @@ export const chartRouter = createTRPCRouter({
   properties: protectedProcedure
     .input(z.object({ event: z.string().optional(), projectId: z.string() }))
     .query(async ({ input: { projectId, event } }) => {
-      const events = await cache.getOr(
-        `events_${projectId}_${event ?? 'all'}`,
-        1000 * 60 * 60,
-        () =>
-          db.event.findMany({
-            take: 500,
-            distinct: 'name',
-            where: {
-              project_id: projectId,
-              ...(event
-                ? {
-                    name: event,
-                  }
-                : {}),
-            },
-          })
+      const events = await chQuery<{ keys: string[] }>(
+        `SELECT distinct mapKeys(properties) as keys from events where ${
+          event && event !== '*' ? `name = '${event}' AND ` : ''
+        } project_id = '${projectId}';`
       );
 
       const properties = events
-        .reduce((acc, event) => {
-          const properties = event as Record<string, unknown>;
-          const dotNotation = toDots(properties);
-          return [...acc, ...Object.keys(dotNotation)];
-        }, [] as string[])
+        .flatMap((event) => event.keys)
         .map((item) => item.replace(/\.([0-9]+)\./g, '.*.'))
-        .map((item) => item.replace(/\.([0-9]+)/g, '[*]'));
+        .map((item) => item.replace(/\.([0-9]+)/g, '[*]'))
+        .map((item) => `properties.${item}`);
+
+      properties.push(
+        'name',
+        'path',
+        'referrer',
+        'referrer_name',
+        'duration',
+        'created_at',
+        'country',
+        'city',
+        'region',
+        'os',
+        'os_version',
+        'browser',
+        'browser_version',
+        'device',
+        'brand',
+        'model'
+      );
 
       return pipe(
         sort<string>((a, b) => a.length - b.length),
@@ -81,162 +110,226 @@ export const chartRouter = createTRPCRouter({
       })
     )
     .query(async ({ input: { event, property, projectId } }) => {
-      const intervalInDays = 180;
-      if (isJsonPath(property)) {
-        const events = await db.$queryRawUnsafe<{ value: string }[]>(
-          `SELECT ${selectJsonPath(
-            property
-          )} AS value from events WHERE project_id = '${projectId}' AND name = '${event}' AND "createdAt" >= NOW() - INTERVAL '${intervalInDays} days'`
-        );
+      const sql = property.startsWith('properties.')
+        ? `SELECT distinct mapValues(mapExtractKeyLike(properties, '${property
+            .replace(/^properties\./, '')
+            .replace(
+              '.*.',
+              '.%.'
+            )}')) as values from events where name = '${event}' AND project_id = '${projectId}';`
+        : `SELECT ${property} as values from events where name = '${event}' AND project_id = '${projectId}';`;
+
+      const events = await chQuery<{ values: string[] }>(sql);
+
+      const values = pipe(
+        (data: typeof events) => map(prop('values'), data),
+        flatten,
+        uniq,
+        sort((a, b) => a.length - b.length)
+      )(events);
+
+      return {
+        values,
+      };
+    }),
+
+  chart: protectedProcedure.input(zChartInput).query(async ({ input }) => {
+    const current = getDatesFromRange(input.range);
+    let diff = 0;
+
+    switch (input.range) {
+      case '30min': {
+        diff = 1000 * 60 * 30;
+        break;
+      }
+      case '1h': {
+        diff = 1000 * 60 * 60;
+        break;
+      }
+      case '24h':
+      case 'today': {
+        diff = 1000 * 60 * 60 * 24;
+        break;
+      }
+      case '7d': {
+        diff = 1000 * 60 * 60 * 24 * 7;
+        break;
+      }
+      case '14d': {
+        diff = 1000 * 60 * 60 * 24 * 14;
+        break;
+      }
+      case '1m': {
+        diff = 1000 * 60 * 60 * 24 * 30;
+        break;
+      }
+      case '3m': {
+        diff = 1000 * 60 * 60 * 24 * 90;
+        break;
+      }
+      case '6m': {
+        diff = 1000 * 60 * 60 * 24 * 180;
+        break;
+      }
+    }
+
+    const promises = [getSeriesFromEvents(input)];
+
+    if (input.previous) {
+      console.log('------->P R E V I O U S');
+      console.log({
+        startDate: new Date(
+          new Date(current.startDate).getTime() - diff
+        ).toISOString(),
+        endDate: new Date(
+          new Date(current.endDate).getTime() - diff
+        ).toISOString(),
+      });
+
+      promises.push(
+        getSeriesFromEvents({
+          ...input,
+          ...{
+            startDate: new Date(
+              new Date(current.startDate).getTime() - diff
+            ).toISOString(),
+            endDate: new Date(
+              new Date(current.endDate).getTime() - diff
+            ).toISOString(),
+          },
+        })
+      );
+    }
+
+    const result = await Promise.all(promises);
+    const series = result[0]!;
+    const previousSeries = result[1];
+
+    const final: FinalChart = {
+      events: input.events,
+      series: series.map((serie, index) => {
+        const previousSerie = previousSeries?.[index];
+        const metrics = {
+          sum: sum(serie.data.map((item) => item.count)),
+          average: round(average(serie.data.map((item) => item.count)), 2),
+          min: min(serie.data.map((item) => item.count)),
+          max: max(serie.data.map((item) => item.count)),
+        };
 
         return {
-          values: uniq(events.map((item) => item.value)),
-        };
-      } else {
-        const events = await db.event.findMany({
-          where: {
-            project_id: projectId,
-            name: event,
-            [property]: {
-              not: null,
-            },
-            createdAt: {
-              gte: new Date(
-                new Date().getTime() - 1000 * 60 * 60 * 24 * intervalInDays
+          name: serie.name,
+          event: serie.event,
+          metrics: {
+            ...metrics,
+            previous: {
+              sum: getPreviousMetric(
+                metrics.sum,
+                previousSerie
+                  ? sum(previousSerie?.data.map((item) => item.count))
+                  : null
+              ),
+              average: getPreviousMetric(
+                metrics.average,
+                previousSerie
+                  ? round(
+                      average(previousSerie?.data.map((item) => item.count)),
+                      2
+                    )
+                  : null
+              ),
+              min: getPreviousMetric(
+                metrics.sum,
+                previousSerie
+                  ? min(previousSerie?.data.map((item) => item.count))
+                  : null
+              ),
+              max: getPreviousMetric(
+                metrics.sum,
+                previousSerie
+                  ? max(previousSerie?.data.map((item) => item.count))
+                  : null
               ),
             },
           },
-          distinct: property as any,
-          select: {
-            [property]: true,
-          },
-        });
-
-        return {
-          values: uniq(events.map((item) => item[property]!)),
+          data: serie.data.map((item, index) => ({
+            date: item.date,
+            count: item.count ?? 0,
+            label: item.label,
+            previous: previousSerie?.data[index]
+              ? getPreviousMetric(
+                  item.count ?? 0,
+                  previousSerie?.data[index]?.count ?? null
+                )
+              : null,
+          })),
         };
+      }),
+      metrics: {
+        sum: 0,
+        average: 0,
+        min: 0,
+        max: 0,
+        previous: {
+          sum: null,
+          average: null,
+          min: null,
+          max: null,
+        },
+      },
+    };
+
+    final.metrics.sum = sum(final.series.map((item) => item.metrics.sum));
+    final.metrics.average = round(
+      average(final.series.map((item) => item.metrics.average)),
+      2
+    );
+    final.metrics.min = min(final.series.map((item) => item.metrics.min));
+    final.metrics.max = max(final.series.map((item) => item.metrics.max));
+    final.metrics.previous = {
+      sum: getPreviousMetric(
+        sum(final.series.map((item) => item.metrics.sum)),
+        sum(final.series.map((item) => item.metrics.previous.sum?.value ?? 0))
+      ),
+      average: getPreviousMetric(
+        round(average(final.series.map((item) => item.metrics.average)), 2),
+        round(
+          average(
+            final.series.map(
+              (item) => item.metrics.previous.average?.value ?? 0
+            )
+          ),
+          2
+        )
+      ),
+      min: getPreviousMetric(
+        min(final.series.map((item) => item.metrics.min)),
+        min(final.series.map((item) => item.metrics.previous.min?.value ?? 0))
+      ),
+      max: getPreviousMetric(
+        max(final.series.map((item) => item.metrics.max)),
+        max(final.series.map((item) => item.metrics.previous.max?.value ?? 0))
+      ),
+    };
+
+    final.series = final.series.sort((a, b) => {
+      if (input.chartType === 'linear') {
+        const sumA = a.data.reduce((acc, item) => acc + (item.count ?? 0), 0);
+        const sumB = b.data.reduce((acc, item) => acc + (item.count ?? 0), 0);
+        return sumB - sumA;
+      } else {
+        return b.metrics[input.metric] - a.metrics[input.metric];
       }
-    }),
+    });
 
-  chart: protectedProcedure
-    .input(zChartInputWithDates.merge(z.object({ projectId: z.string() })))
-    .query(async ({ input }) => {
-      const current = getDatesFromRange(input.range);
-      let diff = 0;
-
-      switch (input.range) {
-        case '30min': {
-          diff = 1000 * 60 * 30;
-          break;
-        }
-        case '1h': {
-          diff = 1000 * 60 * 60;
-          break;
-        }
-        case '24h':
-        case 'today': {
-          diff = 1000 * 60 * 60 * 24;
-          break;
-        }
-        case '7d': {
-          diff = 1000 * 60 * 60 * 24 * 17;
-          break;
-        }
-        case '14d': {
-          diff = 1000 * 60 * 60 * 24 * 14;
-          break;
-        }
-        case '1m': {
-          diff = 1000 * 60 * 60 * 24 * 30;
-          break;
-        }
-        case '3m': {
-          diff = 1000 * 60 * 60 * 24 * 90;
-          break;
-        }
-        case '6m': {
-          diff = 1000 * 60 * 60 * 24 * 180;
-          break;
-        }
-      }
-
-      const promises = [wrapper(input)];
-
-      if (input.previous) {
-        promises.push(
-          wrapper({
-            ...input,
-            ...{
-              startDate: new Date(
-                new Date(current.startDate).getTime() - diff
-              ).toISOString(),
-              endDate: new Date(
-                new Date(current.endDate).getTime() - diff
-              ).toISOString(),
-            },
-          })
-        );
-      }
-
-      const awaitedPromises = await Promise.all(promises);
-      const data = awaitedPromises[0]!;
-      const previousData = awaitedPromises[1];
-
-      return {
-        ...data,
-        series: data.series.map((item, sIndex) => {
-          function getPreviousDiff(key: keyof (typeof data)['metrics']) {
-            const prev = previousData?.series?.[sIndex]?.metrics?.[key];
-            const diff = getPreviousDataDiff(item.metrics[key], prev);
-
-            return diff && prev
-              ? {
-                  diff: diff?.diff,
-                  state: diff?.state,
-                  value: prev,
-                }
-              : null;
-          }
-
-          return {
-            ...item,
-            metrics: {
-              ...item.metrics,
-              previous: {
-                sum: getPreviousDiff('sum'),
-                average: getPreviousDiff('average'),
-              },
-            },
-            data: item.data.map((item, dIndex) => {
-              const diff = getPreviousDataDiff(
-                item.count,
-                previousData?.series?.[sIndex]?.data?.[dIndex]?.count
-              );
-              return {
-                ...item,
-                previous:
-                  diff && previousData?.series?.[sIndex]?.data?.[dIndex]
-                    ? Object.assign(
-                        {},
-                        previousData?.series?.[sIndex]?.data?.[dIndex],
-                        diff
-                      )
-                    : null,
-              };
-            }),
-          };
-        }),
-      };
-    }),
+    return final;
+  }),
 });
 
-const chartValidator = zChartInputWithDates.merge(
-  z.object({ projectId: z.string() })
-);
-type ChartInput = z.infer<typeof chartValidator>;
-
-function getPreviousDataDiff(current: number, previous: number | undefined) {
-  if (!previous) {
+function getPreviousMetric(
+  current: number,
+  previous: number | null
+): PreviousValue {
+  if (previous === null) {
     return null;
   }
 
@@ -262,10 +355,11 @@ function getPreviousDataDiff(current: number, previous: number | undefined) {
         : current < previous
         ? 'negative'
         : 'neutral',
+    value: previous,
   };
 }
 
-async function wrapper({ events, projectId, ...input }: ChartInput) {
+async function getSeriesFromEvents(input: IChartInput) {
   const { startDate, endDate } =
     input.startDate && input.endDate
       ? {
@@ -273,65 +367,30 @@ async function wrapper({ events, projectId, ...input }: ChartInput) {
           endDate: input.endDate,
         }
       : getDatesFromRange(input.range);
-  const series: Awaited<ReturnType<typeof getChartData>> = [];
-  for (const event of events) {
-    const result = await getChartData({
-      ...input,
-      startDate,
-      endDate,
-      event,
-      projectId: projectId,
-    });
-    series.push(...result);
-  }
 
-  const sorted = [...series].sort((a, b) => {
-    if (input.chartType === 'linear') {
-      const sumA = a.data.reduce((acc, item) => acc + item.count, 0);
-      const sumB = b.data.reduce((acc, item) => acc + item.count, 0);
-      return sumB - sumA;
-    } else {
-      return b.metrics.sum - a.metrics.sum;
-    }
-  });
-
-  const metrics = {
-    max: Math.max(...sorted.map((item) => item.metrics.max)),
-    min: Math.min(...sorted.map((item) => item.metrics.min)),
-    sum: sum(sorted.map((item) => item.metrics.sum, 0)),
-    average: round(average(sorted.map((item) => item.metrics.average, 0)), 2),
-  };
-
-  return {
-    events: Object.entries(
-      series.reduce(
-        (acc, item) => {
-          if (acc[item.event.id]) {
-            acc[item.event.id] += item.metrics.sum;
-          } else {
-            acc[item.event.id] = item.metrics.sum;
-          }
-          return acc;
-        },
-        {} as Record<(typeof series)[number]['event']['id'], number>
+  const series = (
+    await Promise.all(
+      input.events.map(async (event) =>
+        getChartData({
+          ...input,
+          startDate,
+          endDate,
+          event,
+        })
       )
-    ).map(([id, count]) => ({
-      count,
-      ...events.find((event) => event.id === id)!,
-    })),
-    series: sorted,
-    metrics,
-  };
-}
+    )
+  ).flat();
 
-interface ResultItem {
-  label: string | null;
-  count: number;
-  date: string;
-}
-
-function getEventLegend(event: IChartEvent) {
-  return event.displayName ?? `${event.name} (${event.id})`;
+  return withFormula(input, series);
+  // .sort((a, b) => {
+  //   if (input.chartType === 'linear') {
+  //     const sumA = a.data.reduce((acc, item) => acc + (item.count ?? 0), 0);
+  //     const sumB = b.data.reduce((acc, item) => acc + (item.count ?? 0), 0);
+  //     return sumB - sumA;
+  //   } else {
+  //     return b.metrics.sum - a.metrics.sum;
+  //   }
+  // });
 }
 
 function getDatesFromRange(range: IChartRange) {
@@ -385,206 +444,3 @@ function getDatesFromRange(range: IChartRange) {
     endDate: endDate.toISOString(),
   };
 }
-
-async function getChartData(payload: IGetChartDataInput) {
-  let result = await db.$queryRawUnsafe<ResultItem[]>(getChartSql(payload));
-
-  if (result.length === 0 && payload.breakdowns.length > 0) {
-    result = await db.$queryRawUnsafe<ResultItem[]>(
-      getChartSql({
-        ...payload,
-        breakdowns: [],
-      })
-    );
-  }
-
-  // group by sql label
-  const series = result.reduce(
-    (acc, item) => {
-      // item.label can be null when using breakdowns on a property
-      // that doesn't exist on all events
-      const label = item.label?.trim() ?? payload.event.id;
-      if (label) {
-        if (acc[label]) {
-          acc[label]?.push(item);
-        } else {
-          acc[label] = [item];
-        }
-      }
-
-      return {
-        ...acc,
-      };
-    },
-    {} as Record<string, ResultItem[]>
-  );
-
-  return Object.keys(series).map((key) => {
-    // If we have breakdowns, we want to use the breakdown key as the legend
-    // But only if it successfully broke it down, otherwise we use the getEventLabel
-    const legend =
-      payload.breakdowns.length && !alphabetIds.includes(key as 'A')
-        ? key
-        : getEventLegend(payload.event);
-    const data =
-      payload.chartType === 'area' ||
-      payload.chartType === 'linear' ||
-      payload.chartType === 'histogram' ||
-      payload.chartType === 'metric' ||
-      payload.chartType === 'pie' ||
-      payload.chartType === 'bar'
-        ? fillEmptySpotsInTimeline(
-            series[key] ?? [],
-            payload.interval,
-            payload.startDate,
-            payload.endDate
-          ).map((item) => {
-            return {
-              label: legend,
-              count: round(item.count),
-              date: new Date(item.date).toISOString(),
-            };
-          })
-        : (series[key] ?? []).map((item) => ({
-            label: item.label,
-            count: round(item.count),
-            date: new Date(item.date).toISOString(),
-          }));
-
-    const counts = data.map((item) => item.count);
-
-    return {
-      name: legend,
-      event: payload.event,
-      metrics: {
-        sum: sum(counts),
-        average: round(average(counts)),
-        max: Math.max(...counts),
-        min: Math.min(...counts),
-      },
-      data,
-    };
-  });
-}
-
-function fillEmptySpotsInTimeline(
-  items: ResultItem[],
-  interval: IInterval,
-  startDate: string,
-  endDate: string
-) {
-  const result = [];
-  const clonedStartDate = new Date(startDate);
-  const clonedEndDate = new Date(endDate);
-  const today = new Date();
-
-  if (interval === 'minute') {
-    clonedStartDate.setUTCSeconds(0, 0);
-    clonedEndDate.setUTCMinutes(clonedEndDate.getUTCMinutes() + 1, 0, 0);
-  } else if (interval === 'hour') {
-    clonedStartDate.setUTCMinutes(0, 0, 0);
-    clonedEndDate.setUTCMinutes(0, 0, 0);
-  } else {
-    clonedStartDate.setUTCHours(0, 0, 0, 0);
-    clonedEndDate.setUTCHours(0, 0, 0, 0);
-  }
-
-  if (interval === 'month') {
-    clonedStartDate.setUTCDate(1);
-    clonedEndDate.setUTCDate(1);
-  }
-
-  // Force if interval is month and the start date is the same month as today
-  const shouldForce = () =>
-    interval === 'month' &&
-    clonedStartDate.getUTCFullYear() === today.getUTCFullYear() &&
-    clonedStartDate.getUTCMonth() === today.getUTCMonth();
-  let prev = undefined;
-  while (
-    shouldForce() ||
-    clonedStartDate.getTime() <= clonedEndDate.getTime()
-  ) {
-    if (prev === clonedStartDate.getTime()) {
-      console.log('GET OUT NOW!');
-      break;
-    }
-    prev = clonedStartDate.getTime();
-
-    const getYear = (date: Date) => date.getUTCFullYear();
-    const getMonth = (date: Date) => date.getUTCMonth();
-    const getDay = (date: Date) => date.getUTCDate();
-    const getHour = (date: Date) => date.getUTCHours();
-    const getMinute = (date: Date) => date.getUTCMinutes();
-
-    const item = items.find((item) => {
-      const date = new Date(item.date);
-
-      if (interval === 'month') {
-        return (
-          getYear(date) === getYear(clonedStartDate) &&
-          getMonth(date) === getMonth(clonedStartDate)
-        );
-      }
-      if (interval === 'day') {
-        return (
-          getYear(date) === getYear(clonedStartDate) &&
-          getMonth(date) === getMonth(clonedStartDate) &&
-          getDay(date) === getDay(clonedStartDate)
-        );
-      }
-      if (interval === 'hour') {
-        return (
-          getYear(date) === getYear(clonedStartDate) &&
-          getMonth(date) === getMonth(clonedStartDate) &&
-          getDay(date) === getDay(clonedStartDate) &&
-          getHour(date) === getHour(clonedStartDate)
-        );
-      }
-      if (interval === 'minute') {
-        return (
-          getYear(date) === getYear(clonedStartDate) &&
-          getMonth(date) === getMonth(clonedStartDate) &&
-          getDay(date) === getDay(clonedStartDate) &&
-          getHour(date) === getHour(clonedStartDate) &&
-          getMinute(date) === getMinute(clonedStartDate)
-        );
-      }
-    });
-
-    if (item) {
-      result.push({
-        ...item,
-        date: clonedStartDate.toISOString(),
-      });
-    } else {
-      result.push({
-        date: clonedStartDate.toISOString(),
-        count: 0,
-        label: null,
-      });
-    }
-
-    switch (interval) {
-      case 'day': {
-        clonedStartDate.setUTCDate(clonedStartDate.getUTCDate() + 1);
-        break;
-      }
-      case 'hour': {
-        clonedStartDate.setUTCHours(clonedStartDate.getUTCHours() + 1);
-        break;
-      }
-      case 'minute': {
-        clonedStartDate.setUTCMinutes(clonedStartDate.getUTCMinutes() + 1);
-        break;
-      }
-      case 'month': {
-        clonedStartDate.setUTCMonth(clonedStartDate.getUTCMonth() + 1);
-        break;
-      }
-    }
-  }
-
-  return sort(function (a, b) {
-    return new Date(a.date).getTime() - new Date(b.date).getTime();
-  }, result);
-}
diff --git a/apps/web/src/server/api/routers/event.ts b/apps/web/src/server/api/routers/event.ts
index 865926ee..ecb90d20 100644
--- a/apps/web/src/server/api/routers/event.ts
+++ b/apps/web/src/server/api/routers/event.ts
@@ -1,19 +1,9 @@
 import { createTRPCRouter, protectedProcedure } from '@/server/api/trpc';
-import { db } from '@/server/db';
+import { transformEvent } from '@/server/services/event.service';
 import { z } from 'zod';
 
-import type { Event, Profile } from '@mixan/db';
-
-function transformEvent(
-  event: Event & {
-    profile: Profile;
-  }
-) {
-  return {
-    ...event,
-    properties: event.properties as Record<string, unknown>,
-  };
-}
+import type { IDBEvent } from '@mixan/db';
+import { chQuery, createSqlBuilder } from '@mixan/db';
 
 export const eventRouter = createTRPCRouter({
   list: protectedProcedure
@@ -27,28 +17,18 @@ export const eventRouter = createTRPCRouter({
       })
     )
     .query(async ({ input: { take, skip, projectId, profileId, events } }) => {
-      return db.event
-        .findMany({
-          take,
-          skip,
-          where: {
-            project_id: projectId,
-            profile_id: profileId,
-            ...(events && events.length > 0
-              ? {
-                  name: {
-                    in: events,
-                  },
-                }
-              : {}),
-          },
-          orderBy: {
-            createdAt: 'desc',
-          },
-          include: {
-            profile: true,
-          },
-        })
-        .then((events) => events.map(transformEvent));
+      const { sb, getSql } = createSqlBuilder();
+
+      sb.limit = take;
+      sb.offset = skip;
+      sb.where.projectId = `project_id = '${projectId}'`;
+      if (profileId) {
+        sb.where.profileId = `profile_id = '${profileId}'`;
+      }
+      if (events?.length) {
+        sb.where.name = `name IN (${events.map((e) => `'${e}'`).join(',')})`;
+      }
+
+      return (await chQuery<IDBEvent>(getSql())).map(transformEvent);
     }),
 });
diff --git a/apps/web/src/server/api/routers/report.ts b/apps/web/src/server/api/routers/report.ts
index 83a516ce..fc5625ac 100644
--- a/apps/web/src/server/api/routers/report.ts
+++ b/apps/web/src/server/api/routers/report.ts
@@ -53,7 +53,7 @@ export const reportRouter = createTRPCRouter({
   save: protectedProcedure
     .input(
       z.object({
-        report: zChartInput,
+        report: zChartInput.omit({ projectId: true }),
         dashboardId: z.string(),
       })
     )
@@ -74,6 +74,7 @@ export const reportRouter = createTRPCRouter({
           chart_type: report.chartType,
           line_type: report.lineType,
           range: report.range,
+          formula: report.formula,
         },
       });
     }),
@@ -81,7 +82,7 @@ export const reportRouter = createTRPCRouter({
     .input(
       z.object({
         reportId: z.string(),
-        report: zChartInput,
+        report: zChartInput.omit({ projectId: true }),
       })
     )
     .mutation(({ input: { report, reportId } }) => {
@@ -97,6 +98,7 @@ export const reportRouter = createTRPCRouter({
           chart_type: report.chartType,
           line_type: report.lineType,
           range: report.range,
+          formula: report.formula,
         },
       });
     }),
diff --git a/apps/web/src/server/chart-sql/getChartSql.ts b/apps/web/src/server/chart-sql/getChartSql.ts
deleted file mode 100644
index 740a265a..00000000
--- a/apps/web/src/server/chart-sql/getChartSql.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { IGetChartDataInput } from '@/types';
-
-import {
-  createSqlBuilder,
-  getWhereClause,
-  isJsonPath,
-  selectJsonPath,
-} from './helpers';
-
-function log(sql: string) {
-  const logs = ['--- START', sql, '--- END'];
-  console.log(logs.join('\n'));
-  return sql;
-}
-
-export function getChartSql({
-  event,
-  breakdowns,
-  interval,
-  startDate,
-  endDate,
-  projectId,
-}: IGetChartDataInput) {
-  const { sb, join, getWhere, getFrom, getSelect, getOrderBy, getGroupBy } =
-    createSqlBuilder();
-
-  sb.where.projectId = `project_id = '${projectId}'`;
-  if (event.name !== '*') {
-    sb.where.eventName = `name = '${event.name}'`;
-  }
-  sb.where.eventFilter = join(getWhereClause(event.filters), ' AND ');
-
-  sb.select.count = `count(*)::int as count`;
-  sb.select.date = `date_trunc('${interval}', "createdAt") as date`;
-  sb.groupBy.date = 'date';
-  sb.orderBy.date = 'date ASC';
-
-  if (startDate) {
-    sb.where.startDate = `"createdAt" >= '${startDate}'`;
-  }
-
-  if (endDate) {
-    sb.where.endDate = `"createdAt" <= '${endDate}'`;
-  }
-
-  const breakdown = breakdowns[0]!;
-  if (breakdown) {
-    if (isJsonPath(breakdown.name)) {
-      sb.select.label = `${selectJsonPath(breakdown.name)} as label`;
-    } else {
-      sb.select.label = `${breakdown.name} as label`;
-    }
-    sb.groupBy.label = `label`;
-  }
-
-  if (event.segment === 'user') {
-    sb.select.count = `count(DISTINCT profile_id)::int as count`;
-  }
-
-  if (event.segment === 'user_average') {
-    sb.select.count = `COUNT(*)::float / COUNT(DISTINCT profile_id)::float as count`;
-  }
-
-  if (event.segment === 'one_event_per_user') {
-    sb.from = `(
-      SELECT DISTINCT on (profile_id) * from events WHERE ${join(
-        sb.where,
-        ' AND '
-      )}
-        ORDER BY profile_id, "createdAt" DESC
-      ) as subQuery`;
-
-    return log(`${getSelect()} ${getFrom()} ${getGroupBy()} ${getOrderBy()}`);
-  }
-
-  return log(
-    `${getSelect()} ${getFrom()} ${getWhere()} ${getGroupBy()} ${getOrderBy()}`
-  );
-}
diff --git a/apps/web/src/server/chart-sql/helpers.ts b/apps/web/src/server/chart-sql/helpers.ts
deleted file mode 100644
index 10b60396..00000000
--- a/apps/web/src/server/chart-sql/helpers.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import type { IChartEventFilter } from '@/types';
-
-export function getWhereClause(filters: IChartEventFilter[]) {
-  const where: string[] = [];
-  if (filters.length > 0) {
-    filters.forEach((filter) => {
-      const { name, value, operator } = filter;
-      switch (operator) {
-        case 'contains': {
-          if (name.includes('.*.') || name.endsWith('[*]')) {
-            // TODO: Make sure this works
-            // where.push(
-            //   `properties @? '$.${name
-            //     .replace(/^properties\./, '')
-            //     .replace(/\.\*\./g, '[*].')} ? (@ like_regex "${value[0]}")'`
-            // );
-          } else {
-            where.push(
-              `(${value
-                .map(
-                  (val) =>
-                    `${propertyNameToSql(name)} like '%${String(val).replace(
-                      /'/g,
-                      "''"
-                    )}%'`
-                )
-                .join(' OR ')})`
-            );
-          }
-          break;
-        }
-        case 'is': {
-          if (name.includes('.*.') || name.endsWith('[*]')) {
-            where.push(
-              `properties @? '$.${name
-                .replace(/^properties\./, '')
-                .replace(/\.\*\./g, '[*].')} ? (${value
-                .map((val) => `@ == "${val}"`)
-                .join(' || ')})'`
-            );
-          } else {
-            where.push(
-              `${propertyNameToSql(name)} in (${value
-                .map((val) => `'${val}'`)
-                .join(', ')})`
-            );
-          }
-          break;
-        }
-        case 'isNot': {
-          if (name.includes('.*.') || name.endsWith('[*]')) {
-            where.push(
-              `properties @? '$.${name
-                .replace(/^properties\./, '')
-                .replace(/\.\*\./g, '[*].')} ? (${value
-                .map((val) => `@ != "${val}"`)
-                .join(' && ')})'`
-            );
-          } else if (name.includes('.')) {
-            where.push(
-              `${propertyNameToSql(name)} not in (${value
-                .map((val) => `'${val}'`)
-                .join(', ')})`
-            );
-          }
-          break;
-        }
-      }
-    });
-  }
-
-  return where;
-}
-
-export function selectJsonPath(property: string) {
-  const jsonPath = property
-    .replace(/^properties\./, '')
-    .replace(/\.\*\./g, '.**.');
-  return `jsonb_path_query(properties, '$.${jsonPath}')`;
-}
-
-export function isJsonPath(property: string) {
-  return property.startsWith('properties');
-}
-
-export function propertyNameToSql(name: string) {
-  if (name.includes('.')) {
-    const str = name
-      .split('.')
-      .map((item, index) => (index === 0 ? item : `'${item}'`))
-      .join('->');
-    const findLastOf = '->';
-    const lastArrow = str.lastIndexOf(findLastOf);
-    if (lastArrow === -1) {
-      return str;
-    }
-    const first = str.slice(0, lastArrow);
-    const last = str.slice(lastArrow + findLastOf.length);
-    return `${first}->>${last}`;
-  }
-
-  return name;
-}
-
-export function createSqlBuilder() {
-  const join = (obj: Record<string, string> | string[], joiner: string) =>
-    Object.values(obj).filter(Boolean).join(joiner);
-
-  const sb: {
-    where: Record<string, string>;
-    select: Record<string, string>;
-    groupBy: Record<string, string>;
-    orderBy: Record<string, string>;
-    from: string;
-  } = {
-    where: {},
-    from: 'events',
-    select: {},
-    groupBy: {},
-    orderBy: {},
-  };
-
-  return {
-    sb,
-    join,
-    getWhere: () =>
-      Object.keys(sb.where).length ? 'WHERE ' + join(sb.where, ' AND ') : '',
-    getFrom: () => `FROM ${sb.from}`,
-    getSelect: () =>
-      'SELECT ' + (Object.keys(sb.select).length ? join(sb.select, ', ') : '*'),
-    getGroupBy: () =>
-      Object.keys(sb.groupBy).length
-        ? 'GROUP BY ' + join(sb.groupBy, ', ')
-        : '',
-    getOrderBy: () =>
-      Object.keys(sb.orderBy).length
-        ? 'ORDER BY ' + join(sb.orderBy, ', ')
-        : '',
-  };
-}
diff --git a/apps/web/src/server/services/chart.service.ts b/apps/web/src/server/services/chart.service.ts
new file mode 100644
index 00000000..c7ad95ea
--- /dev/null
+++ b/apps/web/src/server/services/chart.service.ts
@@ -0,0 +1,167 @@
+import type { IGetChartDataInput } from '@/types';
+
+import { createSqlBuilder, formatClickhouseDate } from '@mixan/db';
+
+function log(sql: string) {
+  const logs = ['--- START', sql, '--- END'];
+  console.log(logs.join('\n'));
+  return sql;
+}
+
+export function getChartSql({
+  event,
+  breakdowns,
+  interval,
+  startDate,
+  endDate,
+  projectId,
+}: IGetChartDataInput) {
+  const { sb, join, getWhere, getFrom, getSelect, getOrderBy, getGroupBy } =
+    createSqlBuilder();
+
+  sb.where.projectId = `project_id = '${projectId}'`;
+  if (event.name !== '*') {
+    sb.select.label = `'${event.name}' as label`;
+    sb.where.eventName = `name = '${event.name}'`;
+  }
+
+  event.filters.forEach((filter, index) => {
+    const id = `f${index}`;
+    const { name, value, operator } = filter;
+
+    if (name.startsWith('properties.')) {
+      const whereFrom = `mapValues(mapExtractKeyLike(properties, '${name
+        .replace(/^properties\./, '')
+        .replace('.*.', '.%.')}'))`;
+
+      switch (operator) {
+        case 'is': {
+          sb.where[id] = `arrayExists(x -> ${value
+            .map((val) => `x = '${String(val).trim()}'`)
+            .join(' OR ')}, ${whereFrom})`;
+          break;
+        }
+        case 'isNot': {
+          sb.where[id] = `arrayExists(x -> ${value
+            .map((val) => `x != '${String(val).trim()}'`)
+            .join(' OR ')}, ${whereFrom})`;
+          break;
+        }
+        case 'contains': {
+          sb.where[id] = `arrayExists(x -> ${value
+            .map((val) => `x LIKE '%${String(val).trim()}%'`)
+            .join(' OR ')}, ${whereFrom})`;
+          break;
+        }
+        case 'doesNotContain': {
+          sb.where[id] = `arrayExists(x -> ${value
+            .map((val) => `x NOT LIKE '%${String(val).trim()}%'`)
+            .join(' OR ')}, ${whereFrom})`;
+          break;
+        }
+      }
+    } else {
+      switch (operator) {
+        case 'is': {
+          sb.where[id] = `${name} IN (${value
+            .map((val) => `'${String(val).trim()}'`)
+            .join(', ')})`;
+          break;
+        }
+        case 'isNot': {
+          sb.where[id] = `${name} NOT IN (${value
+            .map((val) => `'${String(val).trim()}'`)
+            .join(', ')})`;
+          break;
+        }
+        case 'contains': {
+          sb.where[id] = value
+            .map((val) => `${name} LIKE '%${String(val).trim()}%'`)
+            .join(' OR ');
+          break;
+        }
+        case 'doesNotContain': {
+          sb.where[id] = value
+            .map((val) => `${name} NOT LIKE '%${String(val).trim()}%'`)
+            .join(' OR ');
+          break;
+        }
+      }
+    }
+  });
+
+  sb.select.count = `count(*) as count`;
+  switch (interval) {
+    case 'minute': {
+      sb.select.date = `toStartOfMinute(created_at) as date`;
+      break;
+    }
+    case 'hour': {
+      sb.select.date = `toStartOfHour(created_at) as date`;
+      break;
+    }
+    case 'day': {
+      sb.select.date = `toStartOfDay(created_at) as date`;
+      break;
+    }
+    case 'month': {
+      sb.select.date = `toStartOfMonth(created_at) as date`;
+      break;
+    }
+  }
+  sb.groupBy.date = 'date';
+  sb.orderBy.date = 'date ASC';
+
+  if (startDate) {
+    sb.where.startDate = `created_at >= '${formatClickhouseDate(startDate)}'`;
+  }
+
+  if (endDate) {
+    sb.where.endDate = `created_at <= '${formatClickhouseDate(endDate)}'`;
+  }
+
+  const breakdown = breakdowns[0]!;
+  if (breakdown) {
+    const value = breakdown.name.startsWith('properties.')
+      ? `mapValues(mapExtractKeyLike(properties, '${breakdown.name
+          .replace(/^properties\./, '')
+          .replace('.*.', '.%.')}'))`
+      : breakdown.name;
+    sb.select.label = breakdown.name.startsWith('properties.')
+      ? `arrayElement(${value}, 1) as label`
+      : `${breakdown.name} as label`;
+    sb.groupBy.label = `label`;
+  }
+
+  if (event.segment === 'user') {
+    sb.select.count = `countDistinct(profile_id) as count`;
+  }
+
+  if (event.segment === 'user_average') {
+    sb.select.count = `COUNT(*)::float / COUNT(DISTINCT profile_id)::float as count`;
+  }
+
+  if (event.segment === 'property_sum' && event.property) {
+    sb.select.count = `sum(${event.property}) as count`;
+  }
+
+  if (event.segment === 'property_average' && event.property) {
+    sb.select.count = `avg(${event.property}) as count`;
+  }
+
+  if (event.segment === 'one_event_per_user') {
+    sb.from = `(
+      SELECT DISTINCT ON (profile_id) * from events WHERE ${join(
+        sb.where,
+        ' AND '
+      )}
+        ORDER BY profile_id, created_at DESC
+      ) as subQuery`;
+
+    return log(`${getSelect()} ${getFrom()} ${getGroupBy()} ${getOrderBy()}`);
+  }
+
+  return log(
+    `${getSelect()} ${getFrom()} ${getWhere()} ${getGroupBy()} ${getOrderBy()}`
+  );
+}
diff --git a/apps/web/src/server/services/event.service.ts b/apps/web/src/server/services/event.service.ts
index b7d12b63..03524411 100644
--- a/apps/web/src/server/services/event.service.ts
+++ b/apps/web/src/server/services/event.service.ts
@@ -1,5 +1,15 @@
+import type { IDBEvent } from '@mixan/db';
+
 import { db } from '../db';
 
+export function transformEvent({ created_at, ...event }: IDBEvent) {
+  return {
+    ...event,
+    profile: undefined,
+    createdAt: new Date(created_at),
+  };
+}
+
 export function getUniqueEvents({ projectId }: { projectId: string }) {
   return db.event.findMany({
     take: 500,
diff --git a/apps/web/src/server/services/organization.service.ts b/apps/web/src/server/services/organization.service.ts
index 56d483aa..45f52e8b 100644
--- a/apps/web/src/server/services/organization.service.ts
+++ b/apps/web/src/server/services/organization.service.ts
@@ -23,3 +23,15 @@ export function getOrganizationById(id: string) {
     },
   });
 }
+
+export function getOrganizationByProjectId(projectId: string) {
+  return db.organization.findFirst({
+    where: {
+      projects: {
+        some: {
+          id: projectId,
+        },
+      },
+    },
+  });
+}
diff --git a/apps/web/src/server/services/project.service.ts b/apps/web/src/server/services/project.service.ts
index a0623162..b7d7c004 100644
--- a/apps/web/src/server/services/project.service.ts
+++ b/apps/web/src/server/services/project.service.ts
@@ -1,5 +1,7 @@
 import { unstable_cache } from 'next/cache';
 
+import { chQuery } from '@mixan/db';
+
 import { db } from '../db';
 
 export type IServiceProject = Awaited<ReturnType<typeof getProjectById>>;
@@ -20,6 +22,17 @@ export function getProjectsByOrganizationId(organizationId: string) {
   });
 }
 
+export async function getProjectWithMostEvents(organizationId: string) {
+  return db.project.findFirst({
+    where: {
+      organization_id: organizationId,
+    },
+    orderBy: {
+      eventsCount: 'desc',
+    },
+  });
+}
+
 export function getFirstProjectByOrganizationId(organizationId: string) {
   const tag = `getFirstProjectByOrganizationId_${organizationId}`;
   return unstable_cache(
diff --git a/apps/web/src/server/services/reports.service.ts b/apps/web/src/server/services/reports.service.ts
index fe0983b5..1b203638 100644
--- a/apps/web/src/server/services/reports.service.ts
+++ b/apps/web/src/server/services/reports.service.ts
@@ -26,7 +26,7 @@ export function transformFilter(
   };
 }
 
-export function transformEvent(
+export function transformReportEvent(
   event: Partial<IChartEvent>,
   index: number
 ): IChartEvent {
@@ -36,6 +36,7 @@ export function transformEvent(
     id: event.id ?? alphabetIds[index]!,
     name: event.name || 'unknown_event',
     displayName: event.displayName,
+    property: event.property,
   };
 }
 
@@ -44,7 +45,8 @@ export function transformReport(
 ): IChartInput & { id: string } {
   return {
     id: report.id,
-    events: (report.events as IChartEvent[]).map(transformEvent),
+    projectId: report.project_id,
+    events: (report.events as IChartEvent[]).map(transformReportEvent),
     breakdowns: report.breakdowns as IChartBreakdown[],
     chartType: report.chart_type,
     lineType: (report.line_type ?? 'kuk') as IChartLineType,
@@ -52,6 +54,9 @@ export function transformReport(
     name: report.name || 'Untitled',
     range: (report.range as IChartRange) ?? timeRanges['1m'],
     previous: report.previous ?? false,
+    formula: report.formula ?? undefined,
+    metric: report.metric ?? 'sum',
+    unit: report.unit ?? undefined,
   };
 }
 
diff --git a/apps/web/src/types/index.ts b/apps/web/src/types/index.ts
index 7b9fc763..76a00c16 100644
--- a/apps/web/src/types/index.ts
+++ b/apps/web/src/types/index.ts
@@ -3,9 +3,9 @@ import type {
   zChartBreakdown,
   zChartEvent,
   zChartInput,
-  zChartInputWithDates,
   zChartType,
   zLineType,
+  zMetric,
   zTimeInterval,
 } from '@/utils/validation';
 import type { TooltipProps } from 'recharts';
@@ -19,7 +19,6 @@ export type HtmlProps<T> = Omit<
 >;
 
 export type IChartInput = z.infer<typeof zChartInput>;
-export type IChartInputWithDates = z.infer<typeof zChartInputWithDates>;
 export type IChartEvent = z.infer<typeof zChartEvent>;
 export type IChartEventFilter = IChartEvent['filters'][number];
 export type IChartEventFilterValue =
@@ -27,6 +26,7 @@ export type IChartEventFilterValue =
 export type IChartBreakdown = z.infer<typeof zChartBreakdown>;
 export type IInterval = z.infer<typeof zTimeInterval>;
 export type IChartType = z.infer<typeof zChartType>;
+export type IChartMetric = z.infer<typeof zMetric>;
 export type IChartLineType = z.infer<typeof zLineType>;
 export type IChartRange = keyof typeof timeRanges;
 export type IToolTipProps<T> = Omit<TooltipProps<number, string>, 'payload'> & {
@@ -43,7 +43,4 @@ export type IGetChartDataInput = {
   projectId: string;
   startDate: string;
   endDate: string;
-} & Omit<
-  IChartInputWithDates,
-  'events' | 'name' | 'startDate' | 'endDate' | 'range'
->;
+} & Omit<IChartInput, 'events' | 'name' | 'startDate' | 'endDate' | 'range'>;
diff --git a/apps/web/src/utils/constants.ts b/apps/web/src/utils/constants.ts
index af53bc0f..bebe213f 100644
--- a/apps/web/src/utils/constants.ts
+++ b/apps/web/src/utils/constants.ts
@@ -3,7 +3,7 @@ export const operators = {
   isNot: 'Is not',
   contains: 'Contains',
   doesNotContain: 'Not contains',
-};
+} as const;
 
 export const chartTypes = {
   linear: 'Linear',
@@ -12,7 +12,8 @@ export const chartTypes = {
   pie: 'Pie',
   metric: 'Metric',
   area: 'Area',
-};
+  map: 'Map',
+} as const;
 
 export const lineTypes = {
   monotone: 'Monotone',
@@ -30,14 +31,14 @@ export const lineTypes = {
   bumpY: 'Bump Y',
   bump: 'Bump',
   linearClosed: 'Linear closed',
-};
+} as const;
 
 export const intervals = {
-  minute: 'Minute',
-  day: 'Day',
-  hour: 'Hour',
-  month: 'Month',
-};
+  minute: 'minute',
+  day: 'day',
+  hour: 'hour',
+  month: 'month',
+} as const;
 
 export const alphabetIds = [
   'A',
@@ -65,6 +66,13 @@ export const timeRanges = {
   '1y': '1y',
 } as const;
 
+export const metrics = {
+  sum: 'sum',
+  average: 'average',
+  min: 'min',
+  max: 'max',
+} as const;
+
 export function isMinuteIntervalEnabledByRange(range: keyof typeof timeRanges) {
   return range === '30min' || range === '1h';
 }
@@ -77,7 +85,9 @@ export function isHourIntervalEnabledByRange(range: keyof typeof timeRanges) {
   );
 }
 
-export function getDefaultIntervalByRange(range: keyof typeof timeRanges) {
+export function getDefaultIntervalByRange(
+  range: keyof typeof timeRanges
+): keyof typeof intervals {
   if (range === '30min' || range === '1h') {
     return 'minute';
   } else if (range === 'today' || range === '24h') {
diff --git a/apps/web/src/utils/math.ts b/apps/web/src/utils/math.ts
index 8c55e8f8..9360880c 100644
--- a/apps/web/src/utils/math.ts
+++ b/apps/web/src/utils/math.ts
@@ -1,12 +1,22 @@
+import { isNumber } from 'mathjs';
+
 export const round = (num: number, decimals = 2) => {
   const factor = Math.pow(10, decimals);
   return Math.round((num + Number.EPSILON) * factor) / factor;
 };
 
-export const average = (arr: number[]) =>
-  arr.reduce((p, c) => p + c, 0) / arr.length;
+export const average = (arr: (number | null)[]) => {
+  const filtered = arr.filter(isNumber);
+  return filtered.reduce((p, c) => p + c, 0) / filtered.length;
+};
 
-export const sum = (arr: number[]) =>
-  round(arr.reduce((acc, item) => acc + item, 0));
+export const sum = (arr: (number | null)[]): number =>
+  round(arr.filter(isNumber).reduce((acc, item) => acc + item, 0));
+
+export const min = (arr: (number | null)[]): number =>
+  Math.min(...arr.filter(isNumber));
+
+export const max = (arr: (number | null)[]): number =>
+  Math.max(...arr.filter(isNumber));
 
 export const isFloat = (n: number) => n % 1 !== 0;
diff --git a/apps/web/src/utils/truncate.ts b/apps/web/src/utils/truncate.ts
new file mode 100644
index 00000000..9cecae76
--- /dev/null
+++ b/apps/web/src/utils/truncate.ts
@@ -0,0 +1,6 @@
+export function truncate(str: string, len: number) {
+  if (str.length <= len) {
+    return str;
+  }
+  return str.slice(0, len) + '...';
+}
diff --git a/apps/web/src/utils/validation.ts b/apps/web/src/utils/validation.ts
index eb14d80b..3b57c8bd 100644
--- a/apps/web/src/utils/validation.ts
+++ b/apps/web/src/utils/validation.ts
@@ -4,6 +4,7 @@ import {
   chartTypes,
   intervals,
   lineTypes,
+  metrics,
   operators,
   timeRanges,
 } from './constants';
@@ -15,11 +16,21 @@ export function objectToZodEnums<K extends string>(
   return [firstKey!, ...otherKeys];
 }
 
+export const mapKeys = objectToZodEnums;
+
 export const zChartEvent = z.object({
   id: z.string(),
   name: z.string(),
   displayName: z.string().optional(),
-  segment: z.enum(['event', 'user', 'user_average', 'one_event_per_user']),
+  property: z.string().optional(),
+  segment: z.enum([
+    'event',
+    'user',
+    'user_average',
+    'one_event_per_user',
+    'property_sum',
+    'property_average',
+  ]),
   filters: z.array(
     z.object({
       id: z.string(),
@@ -43,6 +54,8 @@ export const zLineType = z.enum(objectToZodEnums(lineTypes));
 
 export const zTimeInterval = z.enum(objectToZodEnums(intervals));
 
+export const zMetric = z.enum(objectToZodEnums(metrics));
+
 export const zChartInput = z.object({
   name: z.string(),
   chartType: zChartType,
@@ -52,9 +65,11 @@ export const zChartInput = z.object({
   breakdowns: zChartBreakdowns,
   range: z.enum(objectToZodEnums(timeRanges)),
   previous: z.boolean(),
-});
-
-export const zChartInputWithDates = zChartInput.extend({
+  formula: z.string().optional(),
+  metric: zMetric,
+  unit: z.string().optional(),
+  previousIndicatorInverted: z.boolean().optional(),
+  projectId: z.string(),
   startDate: z.string().nullish(),
-  endDate: z.string().nullable(),
+  endDate: z.string().nullish(),
 });
diff --git a/apps/worker/package.json b/apps/worker/package.json
index abf0345b..3e5aeca3 100644
--- a/apps/worker/package.json
+++ b/apps/worker/package.json
@@ -14,6 +14,7 @@
     "@bull-board/express": "^5.13.0",
     "@mixan/db": "workspace:*",
     "@mixan/queue": "workspace:*",
+    "@mixan/common": "workspace:*",
     "bullmq": "^5.1.1",
     "express": "^4.18.2",
     "ramda": "^0.29.1"
diff --git a/apps/worker/src/index.ts b/apps/worker/src/index.ts
index c6cff87c..1f70db83 100644
--- a/apps/worker/src/index.ts
+++ b/apps/worker/src/index.ts
@@ -5,10 +5,12 @@ import { Worker } from 'bullmq';
 import express from 'express';
 
 import { connection, eventsQueue } from '@mixan/queue';
+import { cronQueue } from '@mixan/queue/src/queues';
 
+import { cronJob } from './jobs/cron';
 import { eventsJob } from './jobs/events';
 
-const PORT = process.env.PORT || 3001;
+const PORT = process.env.PORT || 3000;
 const serverAdapter = new ExpressAdapter();
 serverAdapter.setBasePath('/');
 const app = express();
@@ -17,13 +19,43 @@ new Worker(eventsQueue.name, eventsJob, {
   connection,
 });
 
-createBullBoard({
-  queues: [new BullMQAdapter(eventsQueue)],
-  serverAdapter: serverAdapter,
+new Worker(cronQueue.name, cronJob, {
+  connection,
 });
 
-app.use('/', serverAdapter.getRouter());
+async function start() {
+  createBullBoard({
+    queues: [new BullMQAdapter(eventsQueue), new BullMQAdapter(cronQueue)],
+    serverAdapter: serverAdapter,
+  });
 
-app.listen(PORT, () => {
-  console.log(`For the UI, open http://localhost:${PORT}/`);
-});
+  app.use('/', serverAdapter.getRouter());
+
+  app.listen(PORT, () => {
+    console.log(`For the UI, open http://localhost:${PORT}/`);
+  });
+
+  const repeatableJobs = await cronQueue.getRepeatableJobs();
+
+  console.log(repeatableJobs);
+
+  await cronQueue.add(
+    'salt',
+    {
+      type: 'salt',
+      payload: undefined,
+    },
+    {
+      jobId: 'salt',
+      repeat: {
+        utc: true,
+        pattern: '0 0 * * *',
+      },
+    }
+  );
+  // if (!repeatableJobs.find((job) => job.name === 'salt')) {
+  //   console.log('Add salt job to queue');
+  // }
+}
+
+start();
diff --git a/apps/worker/src/jobs/cron.salt.ts b/apps/worker/src/jobs/cron.salt.ts
new file mode 100644
index 00000000..403bf64b
--- /dev/null
+++ b/apps/worker/src/jobs/cron.salt.ts
@@ -0,0 +1,22 @@
+import { generateSalt } from '@mixan/common';
+import { db, getCurrentSalt } from '@mixan/db';
+
+export async function salt() {
+  const oldSalt = await getCurrentSalt();
+  const newSalt = await db.salt.create({
+    data: {
+      salt: generateSalt(),
+    },
+  });
+
+  // Delete rest of the salts
+  await db.salt.deleteMany({
+    where: {
+      salt: {
+        notIn: [newSalt.salt, oldSalt],
+      },
+    },
+  });
+
+  return newSalt;
+}
diff --git a/apps/worker/src/jobs/cron.ts b/apps/worker/src/jobs/cron.ts
new file mode 100644
index 00000000..7dfa16f8
--- /dev/null
+++ b/apps/worker/src/jobs/cron.ts
@@ -0,0 +1,13 @@
+import type { Job } from 'bullmq';
+
+import type { CronQueuePayload } from '@mixan/queue/src/queues';
+
+import { salt } from './cron.salt';
+
+export async function cronJob(job: Job<CronQueuePayload>) {
+  switch (job.data.type) {
+    case 'salt': {
+      return await salt();
+    }
+  }
+}
diff --git a/apps/worker/src/jobs/events.create-session-end.ts b/apps/worker/src/jobs/events.create-session-end.ts
new file mode 100644
index 00000000..56e31460
--- /dev/null
+++ b/apps/worker/src/jobs/events.create-session-end.ts
@@ -0,0 +1,56 @@
+import type { Job } from 'bullmq';
+
+import { getTime, toISOString } from '@mixan/common';
+import { createEvent, getEvents } from '@mixan/db';
+import type { EventsQueuePayloadCreateSessionEnd } from '@mixan/queue/src/queues';
+
+export async function createSessionEnd(
+  job: Job<EventsQueuePayloadCreateSessionEnd>
+) {
+  const payload = job.data.payload;
+
+  const sql = `
+  SELECT * FROM events 
+  WHERE 
+    profile_id = '${payload.profileId}' 
+    AND created_at >= (
+      SELECT created_at 
+      FROM events
+      WHERE 
+        profile_id = '${payload.profileId}' 
+        AND name = 'session_start'
+      ORDER BY created_at DESC
+      LIMIT 1
+    ) 
+  ORDER BY created_at DESC
+`;
+  job.log(sql);
+  const events = await getEvents(sql);
+
+  const sessionDuration = events.reduce((acc, event) => {
+    return acc + event.duration;
+  }, 0);
+
+  const sessionStart = events.find((event) => event.name === 'session_start');
+  const lastScreenView = events.find((event) => event.name === 'screen_view');
+  const screenViews = events.filter((event) => event.name === 'screen_view');
+
+  if (!sessionStart) {
+    throw new Error('Failed to find a session_start');
+  }
+
+  if (!lastScreenView) {
+    throw new Error('Failed to find a screen_view');
+  }
+
+  return createEvent({
+    ...sessionStart,
+    properties: {
+      _bounce: screenViews.length === 1,
+    },
+    name: 'session_end',
+    duration: sessionDuration,
+    path: lastScreenView?.path ?? '',
+    createdAt: toISOString(getTime(lastScreenView.createdAt) + 100),
+  });
+}
diff --git a/apps/worker/src/jobs/events.ts b/apps/worker/src/jobs/events.ts
index 76ea7e52..40d7e7ee 100644
--- a/apps/worker/src/jobs/events.ts
+++ b/apps/worker/src/jobs/events.ts
@@ -1,257 +1,24 @@
-import { getDevice, getOS } from '@/utils/user-agent';
 import type { Job } from 'bullmq';
-import { mergeDeepRight } from 'ramda';
 
-import { db } from '@mixan/db';
-import type { EventsQueuePayload } from '@mixan/queue/src/queues';
-import type { BatchPayload } from '@mixan/types';
+import { createEvent } from '@mixan/db';
+import type {
+  EventsQueuePayload,
+  EventsQueuePayloadCreateSessionEnd,
+} from '@mixan/queue/src/queues';
+
+import { createSessionEnd } from './events.create-session-end';
 
 export async function eventsJob(job: Job<EventsQueuePayload>) {
-  const projectId = job.data.projectId;
-  const body = job.data.payload;
-
-  const profileIds = new Set<string>(
-    body
-      .map((item) => item.payload.profileId)
-      .filter((id): id is string => typeof id === 'string' && id.length > 0)
-  );
-
-  if (profileIds.size === 0) {
-    return null;
+  switch (job.data.type) {
+    case 'createEvent': {
+      return await createEvent(job.data.payload);
+    }
   }
-
-  const profiles = await db.profile.findMany({
-    where: {
-      id: {
-        in: Array.from(profileIds),
-      },
-    },
-  });
-
-  async function getProfile(profileId: string) {
-    const profile = profiles.find((profile) => profile.id === profileId);
-    if (profile) {
-      return profile;
+  switch (job.data.type) {
+    case 'createSessionEnd': {
+      return await createSessionEnd(
+        job as Job<EventsQueuePayloadCreateSessionEnd>
+      );
     }
-
-    const created = await db.profile.create({
-      data: {
-        id: profileId,
-        properties: {},
-        project_id: projectId,
-      },
-    });
-
-    profiles.push(created);
-
-    return created;
   }
-
-  const mergedBody: BatchPayload[] = body.reduce((acc, item) => {
-    const canMerge =
-      item.type === 'update_profile' || item.type === 'update_session';
-
-    if (!canMerge) {
-      return [...acc, item];
-    }
-
-    const match = acc.findIndex(
-      (i) =>
-        i.type === item.type && i.payload.profileId === item.payload.profileId
-    );
-
-    if (acc[match]) {
-      acc[match]!.payload = mergeDeepRight(acc[match]!.payload, item.payload);
-    } else {
-      acc.push(item);
-    }
-
-    return acc;
-  }, [] as BatchPayload[]);
-
-  const failedEvents: BatchPayload[] = [];
-
-  for (const item of mergedBody) {
-    try {
-      const { type, payload } = item;
-      const profile = await getProfile(payload.profileId);
-      switch (type) {
-        case 'create_profile': {
-          profile.properties = {
-            ...(typeof profile.properties === 'object'
-              ? profile.properties ?? {}
-              : {}),
-            ...(payload.properties ?? {}),
-          };
-          await db.profile.update({
-            where: {
-              id: payload.profileId,
-            },
-            data: {
-              properties: profile.properties,
-            },
-          });
-          break;
-        }
-        case 'update_profile': {
-          profile.properties = {
-            ...(typeof profile.properties === 'object'
-              ? profile.properties ?? {}
-              : {}),
-            ...(payload.properties ?? {}),
-          };
-          await db.profile.update({
-            where: {
-              id: payload.profileId,
-            },
-            data: {
-              external_id: payload.id,
-              email: payload.email,
-              first_name: payload.first_name,
-              last_name: payload.last_name,
-              avatar: payload.avatar,
-              properties: profile.properties,
-            },
-          });
-          break;
-        }
-        case 'set_profile_property': {
-          if (
-            typeof (profile.properties as Record<string, unknown>)[
-              payload.name
-            ] === 'undefined'
-          ) {
-            (profile.properties as Record<string, unknown>)[payload.name] =
-              payload.value;
-
-            await db.profile.update({
-              where: {
-                id: payload.profileId,
-              },
-              data: {
-                // @ts-expect-error
-                properties: profile.properties,
-              },
-            });
-          }
-          break;
-        }
-        case 'increment': {
-          await tickProfileProperty({
-            profileId: payload.profileId,
-            name: payload.name,
-            tick: payload.value,
-          });
-          break;
-        }
-        case 'decrement': {
-          await tickProfileProperty({
-            profileId: payload.profileId,
-            name: payload.name,
-            tick: -Math.abs(payload.value),
-          });
-          break;
-        }
-        case 'event': {
-          const userAgent = payload.properties.ua as string | undefined;
-          if (userAgent) {
-            payload.properties.device = getDevice(userAgent);
-            payload.properties.os = getOS(userAgent);
-            delete payload.properties.ua;
-          }
-          await db.event.create({
-            data: {
-              name: payload.name,
-              properties: payload.properties,
-              createdAt: payload.time,
-              project_id: projectId,
-              profile_id: payload.profileId,
-            },
-          });
-          break;
-        }
-        case 'update_session': {
-          const session = await db.event.findFirst({
-            where: {
-              profile_id: payload.profileId,
-              project_id: projectId,
-              name: 'session_start',
-            },
-            orderBy: {
-              createdAt: 'desc',
-            },
-          });
-          if (session) {
-            await db.$executeRawUnsafe(
-              `UPDATE events SET properties = '${JSON.stringify(
-                payload.properties
-              )}' || properties WHERE "createdAt" >= '${session.createdAt.toISOString()}' AND profile_id = '${
-                payload.profileId
-              }'`
-            );
-          }
-          break;
-        }
-      }
-    } catch (error) {
-      job.log(`Failed to create "${item.type}"`);
-      job.log(`  > Payload: ${JSON.stringify(item.payload)}`);
-      if (error instanceof Error) {
-        job.log(`  > Error: ${error.message.trim()}`);
-        job.log(`  > Stack: ${error.stack}`);
-      }
-      failedEvents.push(item);
-      job.log(`---`);
-    }
-  } // end for
-
-  await db.eventFailed.createMany({
-    data: failedEvents.map((item) => ({
-      data: item as Record<string, any>,
-    })),
-  });
-
-  return body;
-}
-
-export async function tickProfileProperty({
-  profileId,
-  tick,
-  name,
-}: {
-  profileId: string;
-  tick: number;
-  name: string;
-}) {
-  const profile = await db.profile.findUniqueOrThrow({
-    where: {
-      id: profileId,
-    },
-  });
-
-  const properties = (
-    typeof profile.properties === 'object' ? profile.properties ?? {} : {}
-  ) as Record<string, number>;
-  const value = name in properties ? properties[name] : 0;
-
-  if (typeof value !== 'number') {
-    return `Property "${name}" on user is of type ${typeof value}`;
-  }
-
-  if (typeof tick !== 'number') {
-    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-    return `Value is not a number ${tick} (${typeof tick})`;
-  }
-
-  await db.profile.update({
-    where: {
-      id: profileId,
-    },
-    data: {
-      properties: {
-        ...properties,
-        [name]: value + tick,
-      },
-    },
-  });
 }
diff --git a/packages/common/index.ts b/packages/common/index.ts
new file mode 100644
index 00000000..a4123a31
--- /dev/null
+++ b/packages/common/index.ts
@@ -0,0 +1,4 @@
+export * from './src/crypto';
+export * from './src/profileId';
+export * from './src/date';
+export * from './src/object';
diff --git a/packages/common/package.json b/packages/common/package.json
new file mode 100644
index 00000000..5f30f03a
--- /dev/null
+++ b/packages/common/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@mixan/common",
+  "version": "0.0.1",
+  "main": "index.ts",
+  "scripts": {
+    "lint": "eslint .",
+    "format": "prettier --check \"**/*.{mjs,ts,md,json}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "ramda": "^0.29.1"
+  },
+  "devDependencies": {
+    "@mixan/eslint-config": "workspace:*",
+    "@mixan/prettier-config": "workspace:*",
+    "@mixan/tsconfig": "workspace:*",
+    "@mixan/types": "workspace:*",
+    "@types/node": "^18.16.0",
+    "@types/ramda": "^0.29.6",
+    "eslint": "^8.48.0",
+    "prettier": "^3.0.3",
+    "prisma": "^5.1.1",
+    "typescript": "^5.2.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@mixan/eslint-config/base"
+    ]
+  },
+  "prettier": "@mixan/prettier-config"
+}
diff --git a/packages/common/src/crypto.ts b/packages/common/src/crypto.ts
new file mode 100644
index 00000000..4bea5d42
--- /dev/null
+++ b/packages/common/src/crypto.ts
@@ -0,0 +1,51 @@
+import { randomBytes, scrypt, timingSafeEqual } from 'crypto';
+
+export function generateSalt() {
+  return randomBytes(16).toString('hex');
+}
+
+/**
+ * Has a password or a secret with a password hashing algorithm (scrypt)
+ * @param {string} password
+ * @returns {string} The salt+hash
+ */
+export async function hashPassword(
+  password: string,
+  _salt?: string,
+  keyLength = 32
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    // generate random 16 bytes long salt - recommended by NodeJS Docs
+    const salt = _salt || generateSalt();
+    scrypt(password, salt, keyLength, (err, derivedKey) => {
+      if (err) reject(err);
+      // derivedKey is of type Buffer
+      resolve(`${salt}.${derivedKey.toString('hex')}`);
+    });
+  });
+}
+
+/**
+ * Compare a plain text password with a salt+hash password
+ * @param {string} password The plain text password
+ * @param {string} hash The hash+salt to check against
+ * @returns {boolean}
+ */
+export async function verifyPassword(
+  password: string,
+  hash: string,
+  keyLength = 32
+): Promise<boolean> {
+  return new Promise((resolve, reject) => {
+    const [salt, hashKey] = hash.split('.');
+    // we need to pass buffer values to timingSafeEqual
+    const hashKeyBuff = Buffer.from(hashKey!, 'hex');
+    scrypt(password, salt!, keyLength, (err, derivedKey) => {
+      if (err) {
+        reject(err);
+      }
+      // compare the new supplied password with the hashed password using timeSafeEqual
+      resolve(timingSafeEqual(hashKeyBuff, derivedKey));
+    });
+  });
+}
diff --git a/packages/common/src/date.ts b/packages/common/src/date.ts
new file mode 100644
index 00000000..9cdf7e88
--- /dev/null
+++ b/packages/common/src/date.ts
@@ -0,0 +1,7 @@
+export function getTime(date: string | number) {
+  return new Date(date).getTime();
+}
+
+export function toISOString(date: string | number) {
+  return new Date(date).toISOString();
+}
diff --git a/apps/web/src/utils/object.ts b/packages/common/src/object.ts
similarity index 100%
rename from apps/web/src/utils/object.ts
rename to packages/common/src/object.ts
diff --git a/packages/common/src/profileId.ts b/packages/common/src/profileId.ts
new file mode 100644
index 00000000..e0f36552
--- /dev/null
+++ b/packages/common/src/profileId.ts
@@ -0,0 +1,17 @@
+import { hashPassword } from './crypto';
+
+interface GenerateProfileIdOptions {
+  salt: string;
+  ua: string;
+  ip: string;
+  origin: string;
+}
+
+export async function generateProfileId({
+  salt,
+  ua,
+  ip,
+  origin,
+}: GenerateProfileIdOptions) {
+  return await hashPassword(`${ua}:${ip}:${origin}`, salt, 8);
+}
diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json
new file mode 100644
index 00000000..73b1bbe4
--- /dev/null
+++ b/packages/common/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@mixan/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["."],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/db/clickhouse_tables.sql b/packages/db/clickhouse_tables.sql
new file mode 100644
index 00000000..e3cc4a65
--- /dev/null
+++ b/packages/db/clickhouse_tables.sql
@@ -0,0 +1,46 @@
+CREATE TABLE test.events (
+  `name` String,
+  `profile_id` String,
+  `project_id` String,
+  -- the route
+  `path` String,
+  `utm_source` String,
+  `utm_medium` String,
+  `utm_campaign` String,
+  `utm_term` String,
+  `utm_content` String,
+  `referrer` String,
+  `referrer_name` String,
+  `duration` UInt64,
+  `properties` Map(String, String),
+  `created_at` DateTime64(3),
+  `country` String,
+  `city` String,
+  `region` String,
+  `os` String,
+  `os_version` String,
+  `browser` String,
+  `browser_version` String,
+  -- device: mobile/desktop/tablet
+  `device` String,
+  -- brand: (Samsung, OnePlus)
+  `brand` String,
+  -- model: (Samsung Galaxy, iPhone X)
+  `model` String
+) ENGINE MergeTree
+ORDER BY
+  (project_id, created_at, profile_id) SETTINGS index_granularity = 8192;
+
+CREATE TABLE test.profiles (
+  `id` String,
+  `external_id` String,
+  `first_name` String,
+  `last_name` String,
+  `email` String,
+  `avatar` String,
+  `properties` Map(String, String),
+  `project_id` String,
+  `created_at` DateTime
+) ENGINE = ReplacingMergeTree
+ORDER BY
+  (id) SETTINGS index_granularity = 8192;
\ No newline at end of file
diff --git a/packages/db/index.ts b/packages/db/index.ts
index 05f3a853..0520a86b 100644
--- a/packages/db/index.ts
+++ b/packages/db/index.ts
@@ -1,15 +1,6 @@
-import { PrismaClient } from '@prisma/client';
-
-export * from '@prisma/client';
-
-const globalForPrisma = globalThis as unknown as {
-  prisma: PrismaClient | undefined;
-};
-
-export const db =
-  globalForPrisma.prisma ??
-  new PrismaClient({
-    log: ['error'],
-  });
-
-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;
+export * from './src/prisma-client';
+export * from './src/prisma-types';
+export * from './src/clickhouse-client';
+export * from './src/sql-builder';
+export * from './src/services/salt';
+export * from './src/services/event.service';
diff --git a/packages/db/package.json b/packages/db/package.json
index 20702f5a..47f31626 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -12,7 +12,10 @@
     "with-env": "dotenv -e ../../.env -c --"
   },
   "dependencies": {
-    "@prisma/client": "^5.1.1"
+    "@mixan/common": "workspace:*",
+    "@clickhouse/client": "^0.2.9",
+    "@prisma/client": "^5.1.1",
+    "ramda": "^0.29.1"
   },
   "devDependencies": {
     "@mixan/eslint-config": "workspace:*",
@@ -20,6 +23,7 @@
     "@mixan/tsconfig": "workspace:*",
     "@mixan/types": "workspace:*",
     "@types/node": "^18.16.0",
+    "@types/ramda": "^0.29.6",
     "eslint": "^8.48.0",
     "prettier": "^3.0.3",
     "prisma": "^5.1.1",
diff --git a/packages/db/prisma/migrations/20240122191559_remove_foreigen_key_profile_events/migration.sql b/packages/db/prisma/migrations/20240122191559_remove_foreigen_key_profile_events/migration.sql
new file mode 100644
index 00000000..86a81ca5
--- /dev/null
+++ b/packages/db/prisma/migrations/20240122191559_remove_foreigen_key_profile_events/migration.sql
@@ -0,0 +1,17 @@
+/*
+  Warnings:
+
+  - The primary key for the `profiles` table will be changed. If it partially fails, the table could be left without primary key constraint.
+
+*/
+-- DropForeignKey
+ALTER TABLE "events" DROP CONSTRAINT "events_profile_id_fkey";
+
+-- AlterTable
+ALTER TABLE "events" ALTER COLUMN "profile_id" SET DATA TYPE TEXT;
+
+-- AlterTable
+ALTER TABLE "profiles" DROP CONSTRAINT "profiles_pkey",
+ALTER COLUMN "id" DROP DEFAULT,
+ALTER COLUMN "id" SET DATA TYPE TEXT,
+ADD CONSTRAINT "profiles_pkey" PRIMARY KEY ("id");
diff --git a/packages/db/prisma/migrations/20240129163925_add_salts/migration.sql b/packages/db/prisma/migrations/20240129163925_add_salts/migration.sql
new file mode 100644
index 00000000..1f24fbb6
--- /dev/null
+++ b/packages/db/prisma/migrations/20240129163925_add_salts/migration.sql
@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "salts" (
+    "salt" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "salts_pkey" PRIMARY KEY ("salt")
+);
diff --git a/packages/db/prisma/migrations/20240131204540_add_formula/migration.sql b/packages/db/prisma/migrations/20240131204540_add_formula/migration.sql
new file mode 100644
index 00000000..92b27c65
--- /dev/null
+++ b/packages/db/prisma/migrations/20240131204540_add_formula/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "reports" ADD COLUMN     "formula" TEXT;
diff --git a/packages/db/prisma/migrations/20240131212106_add_metric/migration.sql b/packages/db/prisma/migrations/20240131212106_add_metric/migration.sql
new file mode 100644
index 00000000..3d872424
--- /dev/null
+++ b/packages/db/prisma/migrations/20240131212106_add_metric/migration.sql
@@ -0,0 +1,6 @@
+-- CreateEnum
+CREATE TYPE "Metric" AS ENUM ('sum', 'average', 'min', 'max');
+
+-- AlterTable
+ALTER TABLE "reports" ADD COLUMN     "metric" "Metric" NOT NULL DEFAULT 'sum',
+ADD COLUMN     "unit" TEXT;
diff --git a/packages/db/prisma/migrations/20240202175049_add_events_count_on_project/migration.sql b/packages/db/prisma/migrations/20240202175049_add_events_count_on_project/migration.sql
new file mode 100644
index 00000000..00d8d484
--- /dev/null
+++ b/packages/db/prisma/migrations/20240202175049_add_events_count_on_project/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "projects" ADD COLUMN     "eventsCount" INTEGER NOT NULL DEFAULT 0;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 2fbdec1f..e36f4773 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -30,6 +30,7 @@ model Project {
   organization_id String
   organization    Organization @relation(fields: [organization_id], references: [id])
   events          Event[]
+  eventsCount     Int          @default(0)
   profiles        Profile[]
   clients         Client[]
 
@@ -64,8 +65,7 @@ model Event {
   project_id String
   project    Project @relation(fields: [project_id], references: [id])
 
-  profile_id String?  @db.Uuid
-  profile    Profile? @relation(fields: [profile_id], references: [id])
+  profile_id String?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now()) @updatedAt
@@ -73,8 +73,16 @@ model Event {
   @@map("events")
 }
 
+model Salt {
+  salt      String   @id
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now()) @updatedAt
+
+  @@map("salts")
+}
+
 model Profile {
-  id          String  @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
+  id          String   @id
   external_id String?
   first_name  String?
   last_name   String?
@@ -82,11 +90,9 @@ model Profile {
   avatar      String?
   properties  Json
   project_id  String
-  project     Project @relation(fields: [project_id], references: [id])
-  events      Event[]
-
-  createdAt DateTime @default(now())
-  updatedAt DateTime @default(now()) @updatedAt
+  project     Project  @relation(fields: [project_id], references: [id])
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @default(now()) @updatedAt
 
   @@map("profiles")
 }
@@ -160,6 +166,13 @@ model Dashboard {
   @@map("dashboards")
 }
 
+enum Metric {
+  sum
+  average
+  min
+  max
+}
+
 model Report {
   id         String    @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
   name       String
@@ -169,6 +182,9 @@ model Report {
   line_type  String    @default("monotone")
   breakdowns Json
   events     Json
+  formula    String?
+  unit       String?
+  metric     Metric    @default(sum)
   project_id String
   project    Project   @relation(fields: [project_id], references: [id])
   previous   Boolean   @default(false)
diff --git a/packages/db/scripts/insert.ts b/packages/db/scripts/insert.ts
new file mode 100644
index 00000000..355b9a06
--- /dev/null
+++ b/packages/db/scripts/insert.ts
@@ -0,0 +1,163 @@
+// @ts-nocheck
+
+import { createEvent } from '@/services/event.service';
+import { last, omit } from 'ramda';
+
+import type { Event } from '../src/prisma-client';
+import { db } from '../src/prisma-client';
+
+async function push(event: Event) {
+  if (event.properties.ip && Number.isNaN(parseInt(event.properties.ip[0]))) {
+    return console.log('IGNORE', event.id);
+  }
+  await fetch('http://localhost:3030/api/event', {
+    method: 'POST',
+    body: JSON.stringify({
+      name: event.name,
+      timestamp: event.createdAt.toISOString(),
+      path: event.properties.path,
+      properties: omit(
+        [
+          'ip',
+          'os',
+          'ua',
+          'url',
+          'hash',
+          'host',
+          'path',
+          'device',
+          'screen',
+          'hostname',
+          'language',
+          'referrer',
+          'timezone',
+        ],
+        event.properties
+      ),
+      referrer: event.properties?.referrer?.host ?? undefined,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+      'User-Agent': event.properties.ua,
+      'X-Forwarded-For': event.properties.ip,
+      'mixan-client-id': 'c8b4962e-bc3d-4b23-8ea4-505c8fbdf09e',
+      origin: 'https://mixan.kiddo.se',
+    },
+  }).catch(() => {});
+}
+
+async function main() {
+  const events = await db.event.findMany({
+    where: {
+      project_id: '4e2798cb-e255-4e9d-960d-c9ad095aabd7',
+      name: 'screen_view',
+      createdAt: {
+        gte: new Date('2024-01-14'),
+        lt: new Date('2024-01-18'),
+      },
+    },
+    orderBy: {
+      createdAt: 'asc',
+    },
+  });
+
+  const grouped: Record<string, Event[]> = {};
+  let index = 0;
+  for (const event of events.slice()) {
+    console.log(index, event.name, event.createdAt.toISOString());
+    index++;
+
+    if (event.properties.ua?.includes('bot')) {
+      console.log('IGNORE', event.id);
+      continue;
+    }
+
+    if (grouped[event.profile_id]) {
+      grouped[event.profile_id].push(event);
+    } else {
+      grouped[event.profile_id] = [event];
+    }
+  }
+
+  for (const profile_id of Object.keys(grouped).slice(0, 10)) {
+    const events = grouped[profile_id];
+
+    if (events) {
+      console.log('new user...');
+      let eidx = -1;
+      for (const event of events) {
+        eidx++;
+        const lastEventAt = events[eidx - 1]?.createdAt;
+
+        const profileId: string | null = null;
+        const projectId = event.project_id;
+        const path = event.properties.path as string;
+        const ip = event.properties.ip as string;
+        const origin = 'https://mixan.kiddo.se';
+        const ua = event.properties.ua as string;
+        const uaInfo = parseUserAgent(ua);
+        const salts = await getSalts();
+
+        const [currentProfileId, previousProfileId, geo, eventsJobs] =
+          await Promise.all([
+            generateProfileId({
+              salt: salts.current,
+              origin,
+              ip,
+              ua,
+            }),
+            generateProfileId({
+              salt: salts.previous,
+              origin,
+              ip,
+              ua,
+            }),
+            parseIp(ip),
+            eventsQueue.getJobs(['delayed']),
+          ]);
+        const payload: IServiceCreateEventPayload = {
+          name: body.name,
+          profileId,
+          projectId,
+          properties: body.properties,
+          createdAt: body.timestamp,
+          country: geo.country,
+          city: geo.city,
+          region: geo.region,
+          continent: geo.continent,
+          os: uaInfo.os,
+          osVersion: uaInfo.osVersion,
+          browser: uaInfo.browser,
+          browserVersion: uaInfo.browserVersion,
+          device: uaInfo.device,
+          brand: uaInfo.brand,
+          model: uaInfo.model,
+          duration: 0,
+          path,
+          referrer: body.referrer, // TODO
+          referrerName: body.referrer, // TODO
+        };
+
+        if (!lastEventAt) {
+          createEvent({});
+          continue;
+        }
+
+        if (
+          event.createdAt.getTime() - lastEventAt.getTime() >
+          1000 * 60 * 30
+        ) {
+          console.log(
+            'new Session?',
+            event.createdAt.toISOString(),
+            event.properties.path
+          );
+        } else {
+          console.log('Same session?');
+        }
+      }
+    }
+  }
+}
+
+main();
diff --git a/packages/db/src/clickhouse-client.ts b/packages/db/src/clickhouse-client.ts
new file mode 100644
index 00000000..051bbb29
--- /dev/null
+++ b/packages/db/src/clickhouse-client.ts
@@ -0,0 +1,51 @@
+import { createClient } from '@clickhouse/client';
+
+export const ch = createClient({
+  host: process.env.CLICKHOUSE_URL,
+  username: process.env.CLICKHOUSE_USER,
+  password: process.env.CLICKHOUSE_PASSWORD,
+  database: process.env.CLICKHOUSE_DB,
+});
+
+interface ClickhouseJsonResponse<T> {
+  data: T[];
+  rows: number;
+  statistics: { elapsed: number; rows_read: number; bytes_read: number };
+  meta: { name: string; type: string }[];
+}
+
+export async function chQueryAll<T extends Record<string, any>>(
+  query: string
+): Promise<ClickhouseJsonResponse<T>> {
+  const res = await ch.query({
+    query,
+  });
+  const json = await res.json<ClickhouseJsonResponse<T>>();
+  return {
+    ...json,
+    data: json.data.map((item) => {
+      const keys = Object.keys(item);
+      return keys.reduce((acc, key) => {
+        const meta = json.meta.find((m) => m.name === key);
+        return {
+          ...acc,
+          [key]:
+            item[key] && meta?.type.includes('Int')
+              ? parseFloat(item[key] as string)
+              : item[key],
+        };
+      }, {} as T);
+    }),
+  };
+}
+
+export async function chQuery<T extends Record<string, any>>(
+  query: string
+): Promise<T[]> {
+  return (await chQueryAll<T>(query)).data;
+}
+
+export function formatClickhouseDate(_date: Date | string) {
+  const date = typeof _date === 'string' ? new Date(_date) : _date;
+  return date.toISOString().replace('T', ' ').replace(/Z+$/, '');
+}
diff --git a/packages/db/src/prisma-client.ts b/packages/db/src/prisma-client.ts
new file mode 100644
index 00000000..05f3a853
--- /dev/null
+++ b/packages/db/src/prisma-client.ts
@@ -0,0 +1,15 @@
+import { PrismaClient } from '@prisma/client';
+
+export * from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const db =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: ['error'],
+  });
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;
diff --git a/packages/db/src/prisma-types.ts b/packages/db/src/prisma-types.ts
new file mode 100644
index 00000000..3ca8d38d
--- /dev/null
+++ b/packages/db/src/prisma-types.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+
+export type IDBEvent = {
+  id: string;
+  name: string;
+  profile_id?: string;
+  project_id: string;
+  properties: Record<string, string>;
+  created_at: string;
+};
+
+export type IDBProfile = {
+  id: string;
+  external_id?: string;
+  first_name?: string;
+  last_name?: string;
+  email?: string;
+  avatar?: string;
+  properties: Record<string, string>;
+  project_id: String;
+  created_at: string;
+};
diff --git a/packages/db/src/services/event.service.ts b/packages/db/src/services/event.service.ts
new file mode 100644
index 00000000..617c642d
--- /dev/null
+++ b/packages/db/src/services/event.service.ts
@@ -0,0 +1,113 @@
+import { omit } from 'ramda';
+
+import { toDots } from '@mixan/common';
+
+import { ch, chQuery, formatClickhouseDate } from '../clickhouse-client';
+
+export interface IClickhouseEvent {
+  name: string;
+  profile_id: string;
+  project_id: string;
+  path: string;
+  referrer: string;
+  referrer_name: string;
+  duration: number;
+  properties: Record<string, string>;
+  created_at: string;
+  country: string;
+  city: string;
+  region: string;
+  os: string;
+  os_version: string;
+  browser: string;
+  browser_version: string;
+  device: string;
+  brand: string;
+  model: string;
+}
+
+export function transformEvent(
+  event: IClickhouseEvent
+): IServiceCreateEventPayload {
+  return {
+    name: event.name,
+    profileId: event.profile_id,
+    projectId: event.project_id,
+    properties: event.properties,
+    createdAt: event.created_at,
+    country: event.country,
+    city: event.city,
+    region: event.region,
+    os: event.os,
+    osVersion: event.os_version,
+    browser: event.browser,
+    browserVersion: event.browser_version,
+    device: event.device,
+    brand: event.brand,
+    model: event.model,
+    duration: event.duration,
+    path: event.path,
+    referrer: event.referrer,
+    referrerName: event.referrer_name,
+  };
+}
+
+export interface IServiceCreateEventPayload {
+  name: string;
+  profileId: string;
+  projectId: string;
+  properties: Record<string, unknown>;
+  createdAt: string;
+  country?: string | undefined;
+  city?: string | undefined;
+  region?: string | undefined;
+  continent?: string | undefined;
+  os?: string | undefined;
+  osVersion?: string | undefined;
+  browser?: string | undefined;
+  browserVersion?: string | undefined;
+  device?: string | undefined;
+  brand?: string | undefined;
+  model?: string | undefined;
+  duration: number;
+  path: string;
+  referrer: string | undefined;
+  referrerName: string | undefined;
+}
+
+export function getEvents(sql: string) {
+  return chQuery<IClickhouseEvent>(sql).then((events) =>
+    events.map(transformEvent)
+  );
+}
+
+export async function createEvent(payload: IServiceCreateEventPayload) {
+  console.log(`create event ${payload.name} for ${payload.profileId}`);
+
+  return ch.insert({
+    table: 'events',
+    values: [
+      {
+        name: payload.name,
+        profile_id: payload.profileId,
+        project_id: payload.projectId,
+        properties: toDots(omit(['_path'], payload.properties)),
+        path: payload.path ?? '',
+        created_at: formatClickhouseDate(payload.createdAt),
+        country: payload.country ?? '',
+        city: payload.city ?? '',
+        region: payload.region ?? '',
+        os: payload.os ?? '',
+        os_version: payload.osVersion ?? '',
+        browser: payload.browser ?? '',
+        browser_version: payload.browserVersion ?? '',
+        device: payload.device ?? '',
+        brand: payload.brand ?? '',
+        model: payload.model ?? '',
+        duration: payload.duration,
+        referrer: payload.referrer ?? '',
+      },
+    ],
+    format: 'JSONEachRow',
+  });
+}
diff --git a/packages/db/src/services/salt.ts b/packages/db/src/services/salt.ts
new file mode 100644
index 00000000..eaa56a9d
--- /dev/null
+++ b/packages/db/src/services/salt.ts
@@ -0,0 +1,37 @@
+import { db } from '../prisma-client';
+
+export async function getCurrentSalt() {
+  const salt = await db.salt.findFirst({
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+
+  if (!salt) {
+    throw new Error('No salt found');
+  }
+
+  return salt.salt;
+}
+
+export async function getSalts() {
+  const [curr, prev] = await db.salt.findMany({
+    orderBy: {
+      createdAt: 'desc',
+    },
+    take: 2,
+  });
+
+  if (!curr) {
+    throw new Error('No salt found');
+  }
+
+  if (!prev) {
+    throw new Error('No previous salt found');
+  }
+
+  return {
+    current: curr.salt,
+    previous: prev.salt,
+  };
+}
diff --git a/packages/db/src/sql-builder.ts b/packages/db/src/sql-builder.ts
new file mode 100644
index 00000000..c8805175
--- /dev/null
+++ b/packages/db/src/sql-builder.ts
@@ -0,0 +1,56 @@
+export function createSqlBuilder() {
+  const join = (obj: Record<string, string> | string[], joiner: string) =>
+    Object.values(obj).filter(Boolean).join(joiner);
+
+  const sb: {
+    where: Record<string, string>;
+    select: Record<string, string>;
+    groupBy: Record<string, string>;
+    orderBy: Record<string, string>;
+    from: string;
+    limit: number | undefined;
+    offset: number | undefined;
+  } = {
+    where: {},
+    from: 'events',
+    select: {},
+    groupBy: {},
+    orderBy: {},
+    limit: undefined,
+    offset: undefined,
+  };
+
+  const getWhere = () =>
+    Object.keys(sb.where).length ? 'WHERE ' + join(sb.where, ' AND ') : '';
+  const getFrom = () => `FROM ${sb.from}`;
+  const getSelect = () =>
+    'SELECT ' + (Object.keys(sb.select).length ? join(sb.select, ', ') : '*');
+  const getGroupBy = () =>
+    Object.keys(sb.groupBy).length ? 'GROUP BY ' + join(sb.groupBy, ', ') : '';
+  const getOrderBy = () =>
+    Object.keys(sb.orderBy).length ? 'ORDER BY ' + join(sb.orderBy, ', ') : '';
+  const getLimit = () => (sb.limit ? `LIMIT ${sb.limit}` : '');
+  const getOffset = () => (sb.offset ? `OFFSET ${sb.offset}` : '');
+
+  return {
+    sb,
+    join,
+    getWhere,
+    getFrom,
+    getSelect,
+    getGroupBy,
+    getOrderBy,
+    getSql: () =>
+      [
+        getSelect(),
+        getFrom(),
+        getWhere(),
+        getGroupBy(),
+        getOrderBy(),
+        getLimit(),
+        getOffset(),
+      ]
+        .filter(Boolean)
+        .join(' '),
+  };
+}
diff --git a/packages/queue/index.ts b/packages/queue/index.ts
index 24f8ab5a..8eb797c0 100644
--- a/packages/queue/index.ts
+++ b/packages/queue/index.ts
@@ -1,2 +1,4 @@
 export { eventsQueue } from './src/queues';
 export { connection } from './src/connection';
+export { findJobByPrefix } from './src/utils';
+export type { JobsOptions } from 'bullmq';
diff --git a/packages/queue/package.json b/packages/queue/package.json
index 32ca9593..129d0aea 100644
--- a/packages/queue/package.json
+++ b/packages/queue/package.json
@@ -8,6 +8,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@mixan/db": "workspace:*",
     "bullmq": "^5.1.1"
   },
   "devDependencies": {
diff --git a/packages/queue/src/queues.ts b/packages/queue/src/queues.ts
index 0d6c72e7..ec2a3531 100644
--- a/packages/queue/src/queues.ts
+++ b/packages/queue/src/queues.ts
@@ -1,12 +1,24 @@
 import { Queue } from 'bullmq';
 
-import type { BatchPayload } from '@mixan/types';
+import type { IServiceCreateEventPayload } from '@mixan/db';
 
 import { connection } from './connection';
 
-export interface EventsQueuePayload {
-  projectId: string;
-  payload: BatchPayload[];
+export interface EventsQueuePayloadCreateEvent {
+  type: 'createEvent';
+  payload: IServiceCreateEventPayload;
+}
+export interface EventsQueuePayloadCreateSessionEnd {
+  type: 'createSessionEnd';
+  payload: Pick<IServiceCreateEventPayload, 'profileId'>;
+}
+export type EventsQueuePayload =
+  | EventsQueuePayloadCreateEvent
+  | EventsQueuePayloadCreateSessionEnd;
+
+export interface CronQueuePayload {
+  type: 'salt';
+  payload: undefined;
 }
 
 export const eventsQueue = new Queue<EventsQueuePayload>('events', {
@@ -15,3 +27,10 @@ export const eventsQueue = new Queue<EventsQueuePayload>('events', {
     removeOnComplete: 10,
   },
 });
+
+export const cronQueue = new Queue<CronQueuePayload>('cron', {
+  connection,
+  defaultJobOptions: {
+    removeOnComplete: 10,
+  },
+});
diff --git a/packages/queue/src/utils.ts b/packages/queue/src/utils.ts
new file mode 100644
index 00000000..c92a7026
--- /dev/null
+++ b/packages/queue/src/utils.ts
@@ -0,0 +1,8 @@
+import type { Job } from 'bullmq';
+
+export function findJobByPrefix<T>(
+  jobs: Job<T, any, string>[],
+  prefix: string
+) {
+  return jobs.find((job) => job.opts.jobId?.startsWith(prefix));
+}
diff --git a/packages/redis/index.ts b/packages/redis/index.ts
new file mode 100644
index 00000000..4e852f1c
--- /dev/null
+++ b/packages/redis/index.ts
@@ -0,0 +1,3 @@
+import Redis from 'ioredis';
+
+export const redis = new Redis(process.env.REDIS_URL);
diff --git a/packages/redis/package.json b/packages/redis/package.json
new file mode 100644
index 00000000..79d08091
--- /dev/null
+++ b/packages/redis/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@mixan/redis",
+  "version": "0.0.1",
+  "main": "index.ts",
+  "scripts": {
+    "lint": "eslint .",
+    "format": "prettier --check \"**/*.{mjs,ts,md,json}\"",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env -c --"
+  },
+  "dependencies": {
+    "ioredis": "^5.3.2"
+  },
+  "devDependencies": {
+    "@mixan/eslint-config": "workspace:*",
+    "@mixan/prettier-config": "workspace:*",
+    "@mixan/tsconfig": "workspace:*",
+    "@mixan/types": "workspace:*",
+    "@types/node": "^18.16.0",
+    "eslint": "^8.48.0",
+    "prettier": "^3.0.3",
+    "prisma": "^5.1.1",
+    "typescript": "^5.2.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@mixan/eslint-config/base"
+    ]
+  },
+  "prettier": "@mixan/prettier-config"
+}
diff --git a/packages/redis/tsconfig.json b/packages/redis/tsconfig.json
new file mode 100644
index 00000000..73b1bbe4
--- /dev/null
+++ b/packages/redis/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@mixan/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["."],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/sdk/index.ts b/packages/sdk/index.ts
index 46898e70..95531e20 100644
--- a/packages/sdk/index.ts
+++ b/packages/sdk/index.ts
@@ -7,27 +7,33 @@ import type {
 
 type MixanLogger = (...args: unknown[]) => void;
 
+// -- 1. Besök
+// -- 2. Finns profile id?
+// --   NEJ
+// --   a. skicka events som vanligt (retunera genererat ID)
+// --   b. ge möjlighet att spara
+// --   JA
+// --   a. skicka event med profile_id
+// -- Payload
+// -- - user_agent?
+// -- - ip?
+// -- - profile_id?
+// -- - referrer
+
 export interface NewMixanOptions {
   url: string;
   clientId: string;
   clientSecret?: string;
-  batchInterval?: number;
-  maxBatchSize?: number;
-  sessionTimeout?: number;
-  session?: boolean;
   verbose?: boolean;
-  trackIp?: boolean;
-  ipUrl?: string;
-  setItem: (key: string, profileId: string) => void;
-  getItem: (key: string) => string | null;
-  removeItem: (key: string) => void;
+  setItem?: (key: string, profileId: string) => void;
+  getItem?: (key: string) => string | null;
+  removeItem?: (key: string) => void;
 }
 
 export type MixanOptions = Required<NewMixanOptions>;
 
 export interface MixanState {
-  profileId: string;
-  lastEventAt: number;
+  profileId: null | string;
   properties: Record<string, unknown>;
 }
 
@@ -35,14 +41,6 @@ function createLogger(verbose: boolean): MixanLogger {
   return verbose ? (...args) => console.log('[Mixan]', ...args) : () => {};
 }
 
-function uuid() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0;
-    const v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
-
 class Fetcher {
   private url: string;
   private clientId: string;
@@ -126,72 +124,23 @@ class Fetcher {
   }
 }
 
-class Batcher {
-  queue: BatchPayload[] = [];
-  timer?: ReturnType<typeof setTimeout>;
-
-  constructor(
-    private options: MixanOptions,
-    private callback: (payload: BatchPayload[]) => void,
-    private logger: MixanLogger
-  ) {}
-
-  add(action: BatchPayload) {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-
-    this.logger(`Add to queue ${action.type}`);
-    this.queue.push(action);
-
-    if (this.queue.length >= this.options.maxBatchSize) {
-      this.send();
-    } else {
-      this.timer = setTimeout(this.send.bind(this), this.options.batchInterval);
-    }
-  }
-
-  send() {
-    this.logger('Send queue', this.queue.length > 0);
-    if (this.queue.length > 0) {
-      this.callback(this.queue);
-      this.queue = [];
-    }
-  }
-}
-
 export class Mixan {
   private options: MixanOptions;
   private fetch: Fetcher;
-  private batcher: Batcher;
   private logger: (...args: any[]) => void;
   private state: MixanState = {
-    profileId: '',
-    lastEventAt: 0,
+    profileId: null,
     properties: {},
   };
 
   constructor(options: NewMixanOptions) {
     this.logger = createLogger(options.verbose ?? false);
     this.options = {
-      sessionTimeout: 1000 * 60 * 30,
-      session: true,
       verbose: false,
-      batchInterval: 10000,
-      maxBatchSize: 10,
-      trackIp: false,
       clientSecret: '',
-      ipUrl: 'https://api.ipify.org',
       ...options,
     };
     this.fetch = new Fetcher(this.options, this.logger);
-    this.batcher = new Batcher(
-      this.options,
-      (queue) => {
-        this.fetch.post('/batch', queue);
-      },
-      this.logger
-    );
   }
 
   // Public
@@ -199,14 +148,9 @@ export class Mixan {
   public init(properties?: Record<string, unknown>) {
     this.logger('Init');
     this.state.properties = properties ?? {};
-    this.createProfile();
-    this.createSession();
-    this.ipLookup();
   }
 
   public setUser(payload: Omit<BatchUpdateProfilePayload, 'profileId'>) {
-    this.createSession();
-
     this.batcher.add({
       type: 'update_profile',
       payload: {
@@ -217,21 +161,7 @@ export class Mixan {
     });
   }
 
-  public setSession(properties: BatchUpdateSessionPayload['properties']) {
-    this.createSession();
-
-    this.batcher.add({
-      type: 'update_session',
-      payload: {
-        properties,
-        profileId: this.state.profileId,
-      },
-    });
-  }
-
   public increment(name: string, value: number) {
-    this.createSession();
-
     this.batcher.add({
       type: 'increment',
       payload: {
@@ -243,8 +173,6 @@ export class Mixan {
   }
 
   public decrement(name: string, value: number) {
-    this.createSession();
-
     this.batcher.add({
       type: 'decrement',
       payload: {
@@ -256,11 +184,8 @@ export class Mixan {
   }
 
   public event(name: string, properties?: Record<string, unknown>) {
-    this.createSession();
-
-    this.batcher.add({
-      type: 'event',
-      payload: {
+    this.fetch
+      .post('/event', {
         name,
         properties: {
           ...this.state.properties,
@@ -268,17 +193,15 @@ export class Mixan {
         },
         time: this.timestamp(),
         profileId: this.state.profileId,
-      },
-    });
+      })
+      .then((response) => {
+        if ('profileId' in response) {
+          this.options.setItem('@mixan:profileId', response.profileId);
+        }
+      });
   }
 
   public setGlobalProperties(properties: Record<string, unknown>) {
-    if (typeof properties !== 'object') {
-      return this.logger(
-        'Set global properties failed, properties must be an object'
-      );
-    }
-
     this.logger('Set global properties', properties);
     this.state.properties = {
       ...this.state.properties,
@@ -286,128 +209,27 @@ export class Mixan {
     };
   }
 
-  public flush() {
-    this.batcher.send();
-  }
-
   public clear() {
     this.logger('Clear / Logout');
-    this.flush();
-    this.options.removeItem('@mixan:ip');
     this.options.removeItem('@mixan:profileId');
-    this.options.removeItem('@mixan:lastEventAt');
-    this.state.profileId = '';
-    this.state.lastEventAt = 0;
-    this.createProfile();
+    this.state.profileId = null;
   }
 
   public setUserProperty(name: string, value: unknown, update = true) {
-    this.batcher.add({
-      type: 'set_profile_property',
-      payload: {
-        name,
-        value,
-        update,
-        profileId: this.state.profileId,
-      },
-    });
+    // this.batcher.add({
+    //   type: 'set_profile_property',
+    //   payload: {
+    //     name,
+    //     value,
+    //     update,
+    //     profileId: this.state.profileId,
+    //   },
+    // });
   }
 
   // Private
 
-  private timestamp(modify = 0) {
-    this.setLastEventAt();
-    return new Date(Date.now() + modify).toISOString();
-  }
-
-  private createProfile() {
-    const profileId = this.options.getItem('@mixan:profileId');
-
-    if (profileId) {
-      this.logger('Reusing existing profile');
-      this.state.profileId = profileId;
-    } else {
-      this.logger('Creating profile');
-      this.state.profileId = uuid();
-      this.options.setItem('@mixan:profileId', this.state.profileId);
-      this.batcher.add({
-        type: 'create_profile',
-        payload: {
-          profileId: this.state.profileId,
-          properties: this.state.properties,
-        },
-      });
-    }
-  }
-
-  private checkSession() {
-    if (!this.options.session) {
-      return false;
-    }
-
-    if (this.state.lastEventAt === 0) {
-      const str = this.options.getItem('@mixan:lastEventAt') ?? '0';
-      const value = parseInt(str, 10);
-      this.state.lastEventAt = isNaN(value) ? 0 : value;
-    }
-
-    return Date.now() - this.state.lastEventAt > this.options.sessionTimeout;
-  }
-
-  private createSession() {
-    if (!this.checkSession()) {
-      return;
-    }
-
-    const time = this.timestamp(-10);
-
-    this.batcher.add({
-      type: 'event',
-      payload: {
-        name: 'session_start',
-        properties: this.state.properties,
-        profileId: this.state.profileId,
-        time,
-      },
-    });
-  }
-
-  private setLastEventAt() {
-    this.state.lastEventAt = Date.now();
-    this.options.setItem(
-      '@mixan:lastEventAt',
-      this.state.lastEventAt.toString()
-    );
-  }
-
-  private async ipLookup() {
-    if (!this.options.trackIp) {
-      return null;
-    }
-
-    let ip: string | null;
-
-    const cachedIp = this.options.getItem('@mixan:ip');
-    if (cachedIp) {
-      ip = cachedIp;
-    } else {
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), 1000);
-      ip = await fetch(this.options.ipUrl, {
-        signal: controller.signal,
-      })
-        .then((res) => res.text())
-        .catch(() => null)
-        .finally(() => clearTimeout(timeout));
-    }
-
-    if (ip) {
-      this.options.setItem('@mixan:ip', ip);
-      this.setGlobalProperties({ ip });
-      if (!cachedIp) {
-        this.setUserProperty('ip', ip, false);
-        this.setSession({ ip });
-      }
-    }
+  private timestamp() {
+    return new Date().toISOString();
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 496e4bb2..c5550d8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,70 @@ importers:
         specifier: ^5.2.2
         version: 5.2.2
 
+  apps/sdk-api:
+    dependencies:
+      '@fastify/cors':
+        specifier: ^9.0.0
+        version: 9.0.0
+      '@mixan/common':
+        specifier: workspace:*
+        version: link:../../packages/common
+      '@mixan/db':
+        specifier: workspace:*
+        version: link:../../packages/db
+      '@mixan/queue':
+        specifier: workspace:*
+        version: link:../../packages/queue
+      fastify:
+        specifier: ^4.25.2
+        version: 4.25.2
+      pino:
+        specifier: ^8.17.2
+        version: 8.17.2
+      ramda:
+        specifier: ^0.29.1
+        version: 0.29.1
+      request-ip:
+        specifier: ^3.3.0
+        version: 3.3.0
+      ua-parser-js:
+        specifier: ^1.0.37
+        version: 1.0.37
+    devDependencies:
+      '@mixan/eslint-config':
+        specifier: workspace:*
+        version: link:../../tooling/eslint
+      '@mixan/prettier-config':
+        specifier: workspace:*
+        version: link:../../tooling/prettier
+      '@mixan/tsconfig':
+        specifier: workspace:*
+        version: link:../../tooling/typescript
+      '@mixan/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      '@types/ramda':
+        specifier: ^0.29.6
+        version: 0.29.7
+      '@types/request-ip':
+        specifier: ^0.0.41
+        version: 0.0.41
+      '@types/ua-parser-js':
+        specifier: ^0.7.39
+        version: 0.7.39
+      eslint:
+        specifier: ^8.48.0
+        version: 8.52.0
+      prettier:
+        specifier: ^3.0.3
+        version: 3.0.3
+      tsup:
+        specifier: ^7.2.0
+        version: 7.2.0(typescript@5.2.2)
+      typescript:
+        specifier: ^5.2.2
+        version: 5.2.2
+
   apps/test:
     dependencies:
       '@mixan-test/sdk':
@@ -90,9 +154,15 @@ importers:
 
   apps/web:
     dependencies:
+      '@clickhouse/client':
+        specifier: ^0.2.9
+        version: 0.2.9
       '@hookform/resolvers':
         specifier: ^3.3.2
         version: 3.3.2(react-hook-form@7.47.0)
+      '@mixan/common':
+        specifier: workspace:^
+        version: link:../../packages/common
       '@mixan/db':
         specifier: workspace:^
         version: link:../../packages/db
@@ -186,6 +256,9 @@ importers:
       lucide-react:
         specifier: ^0.286.0
         version: 0.286.0(react@18.2.0)
+      mathjs:
+        specifier: ^12.3.0
+        version: 12.3.0
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
@@ -228,6 +301,9 @@ importers:
       react-responsive:
         specifier: ^9.0.2
         version: 9.0.2(react@18.2.0)
+      react-svg-worldmap:
+        specifier: 2.0.0-alpha.16
+        version: 2.0.0-alpha.16(react-dom@18.2.0)(react@18.2.0)
       react-syntax-highlighter:
         specifier: ^15.5.0
         version: 15.5.0(react@18.2.0)
@@ -237,6 +313,9 @@ importers:
       recharts:
         specifier: ^2.8.0
         version: 2.9.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+      request-ip:
+        specifier: ^3.3.0
+        version: 3.3.0
       slugify:
         specifier: ^1.6.6
         version: 1.6.6
@@ -286,6 +365,9 @@ importers:
       '@types/react-syntax-highlighter':
         specifier: ^15.5.9
         version: 15.5.9
+      '@types/request-ip':
+        specifier: ^0.0.41
+        version: 0.0.41
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.6.0
         version: 6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.52.0)(typescript@5.2.2)
@@ -322,6 +404,9 @@ importers:
       '@bull-board/express':
         specifier: ^5.13.0
         version: 5.13.0
+      '@mixan/common':
+        specifier: workspace:*
+        version: link:../../packages/common
       '@mixan/db':
         specifier: workspace:*
         version: link:../../packages/db
@@ -369,11 +454,11 @@ importers:
         specifier: ^5.2.2
         version: 5.2.2
 
-  packages/db:
+  packages/common:
     dependencies:
-      '@prisma/client':
-        specifier: ^5.1.1
-        version: 5.5.2(prisma@5.5.2)
+      ramda:
+        specifier: ^0.29.1
+        version: 0.29.1
     devDependencies:
       '@mixan/eslint-config':
         specifier: workspace:*
@@ -390,6 +475,55 @@ importers:
       '@types/node':
         specifier: ^18.16.0
         version: 18.18.8
+      '@types/ramda':
+        specifier: ^0.29.6
+        version: 0.29.7
+      eslint:
+        specifier: ^8.48.0
+        version: 8.52.0
+      prettier:
+        specifier: ^3.0.3
+        version: 3.0.3
+      prisma:
+        specifier: ^5.1.1
+        version: 5.5.2
+      typescript:
+        specifier: ^5.2.2
+        version: 5.2.2
+
+  packages/db:
+    dependencies:
+      '@clickhouse/client':
+        specifier: ^0.2.9
+        version: 0.2.9
+      '@mixan/common':
+        specifier: workspace:*
+        version: link:../common
+      '@prisma/client':
+        specifier: ^5.1.1
+        version: 5.5.2(prisma@5.5.2)
+      ramda:
+        specifier: ^0.29.1
+        version: 0.29.1
+    devDependencies:
+      '@mixan/eslint-config':
+        specifier: workspace:*
+        version: link:../../tooling/eslint
+      '@mixan/prettier-config':
+        specifier: workspace:*
+        version: link:../../tooling/prettier
+      '@mixan/tsconfig':
+        specifier: workspace:*
+        version: link:../../tooling/typescript
+      '@mixan/types':
+        specifier: workspace:*
+        version: link:../types
+      '@types/node':
+        specifier: ^18.16.0
+        version: 18.18.8
+      '@types/ramda':
+        specifier: ^0.29.6
+        version: 0.29.7
       eslint:
         specifier: ^8.48.0
         version: 8.52.0
@@ -405,6 +539,9 @@ importers:
 
   packages/queue:
     dependencies:
+      '@mixan/db':
+        specifier: workspace:*
+        version: link:../db
       bullmq:
         specifier: ^5.1.1
         version: 5.1.1
@@ -434,6 +571,40 @@ importers:
         specifier: ^5.2.2
         version: 5.2.2
 
+  packages/redis:
+    dependencies:
+      ioredis:
+        specifier: ^5.3.2
+        version: 5.3.2
+    devDependencies:
+      '@mixan/eslint-config':
+        specifier: workspace:*
+        version: link:../../tooling/eslint
+      '@mixan/prettier-config':
+        specifier: workspace:*
+        version: link:../../tooling/prettier
+      '@mixan/tsconfig':
+        specifier: workspace:*
+        version: link:../../tooling/typescript
+      '@mixan/types':
+        specifier: workspace:*
+        version: link:../types
+      '@types/node':
+        specifier: ^18.16.0
+        version: 18.18.8
+      eslint:
+        specifier: ^8.48.0
+        version: 8.52.0
+      prettier:
+        specifier: ^3.0.3
+        version: 3.0.3
+      prisma:
+        specifier: ^5.1.1
+        version: 5.5.2
+      typescript:
+        specifier: ^5.2.2
+        version: 5.2.2
+
   packages/sdk:
     dependencies:
       '@mixan/types':
@@ -836,6 +1007,13 @@ packages:
       regenerator-runtime: 0.14.0
     dev: false
 
+  /@babel/runtime@7.23.9:
+    resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: false
+
   /@babel/template@7.22.15:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
@@ -898,6 +1076,17 @@ packages:
       '@bull-board/api': 5.13.0(@bull-board/ui@5.13.0)
     dev: false
 
+  /@clickhouse/client-common@0.2.9:
+    resolution: {integrity: sha512-ecXcegMbT4HYNWtGcfyidW6lNVRqPogbFMY5kfjJmz4IXJ4WZbQMwj2IQgemwFwE7jyia2OEwPIVfw1sNfDHRA==}
+    dev: false
+
+  /@clickhouse/client@0.2.9:
+    resolution: {integrity: sha512-KqQlO9vZNSLyhMWG9+0/VXqcUZrNk1Hybr9icgI/nLCoX8RD19BJsakZJj38IQvQxNUTxvcItm/kyu/gD/9LXA==}
+    engines: {node: '>=16'}
+    dependencies:
+      '@clickhouse/client-common': 0.2.9
+    dev: false
+
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -1129,6 +1318,35 @@ packages:
     resolution: {integrity: sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  /@fastify/ajv-compiler@3.5.0:
+    resolution: {integrity: sha512-ebbEtlI7dxXF5ziNdr05mOY8NnDiPB1XvAlLHctRt/Rc+C3LCOVW5imUVX+mhvUhnNzmPBHewUkOFgGlCxgdAA==}
+    dependencies:
+      ajv: 8.12.0
+      ajv-formats: 2.1.1(ajv@8.12.0)
+      fast-uri: 2.3.0
+    dev: false
+
+  /@fastify/cors@9.0.0:
+    resolution: {integrity: sha512-KVsBFs2jZHbtN4vI/jJFaeRHXr3htB3koquGD5TwQQt/lmspyrS1a2UOBTlMOC/5hawC81vdoCzmiR03HbjdXg==}
+    dependencies:
+      fastify-plugin: 4.5.1
+      mnemonist: 0.39.6
+    dev: false
+
+  /@fastify/deepmerge@1.3.0:
+    resolution: {integrity: sha512-J8TOSBq3SoZbDhM9+R/u77hP93gz/rajSA+K2kGyijPpORPWUXHUpTaleoj+92As0S9uPRP7Oi8IqMf0u+ro6A==}
+    dev: false
+
+  /@fastify/error@3.4.1:
+    resolution: {integrity: sha512-wWSvph+29GR783IhmvdwWnN4bUxTD01Vm5Xad4i7i1VuAOItLvbPAb69sb0IQ2N57yprvhNIwAP5B6xfKTmjmQ==}
+    dev: false
+
+  /@fastify/fast-json-stringify-compiler@4.3.0:
+    resolution: {integrity: sha512-aZAXGYo6m22Fk1zZzEUKBvut/CIIQe/BapEORnxiD5Qr0kPHqqI69NtEMCme74h+at72sPhbkb4ZrLd1W3KRLA==}
+    dependencies:
+      fast-json-stringify: 5.10.0
+    dev: false
+
   /@floating-ui/core@1.5.0:
     resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==}
     dependencies:
@@ -2813,6 +3031,12 @@ packages:
       '@types/scheduler': 0.16.5
       csstype: 3.1.2
 
+  /@types/request-ip@0.0.41:
+    resolution: {integrity: sha512-Qzz0PM2nSZej4lsLzzNfADIORZhhxO7PED0fXpg4FjXiHuJ/lMyUg+YFF5q8x9HPZH3Gl6N+NOM8QZjItNgGKg==}
+    dependencies:
+      '@types/node': 18.18.8
+    dev: true
+
   /@types/scheduler@0.16.5:
     resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
 
@@ -2834,6 +3058,10 @@ packages:
       '@types/node': 18.18.8
     dev: true
 
+  /@types/ua-parser-js@0.7.39:
+    resolution: {integrity: sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==}
+    dev: true
+
   /@types/unist@2.0.9:
     resolution: {integrity: sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==}
     dev: false
@@ -2972,6 +3200,17 @@ packages:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: false
 
+  /abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
+    dependencies:
+      event-target-shim: 5.0.1
+    dev: false
+
+  /abstract-logging@2.0.1:
+    resolution: {integrity: sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==}
+    dev: false
+
   /accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -3001,6 +3240,17 @@ packages:
       - supports-color
     dev: false
 
+  /ajv-formats@2.1.1(ajv@8.12.0):
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+    dependencies:
+      ajv: 8.12.0
+    dev: false
+
   /ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:
@@ -3009,6 +3259,15 @@ packages:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  /ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: false
+
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -3040,6 +3299,10 @@ packages:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
     dev: false
 
+  /archy@1.0.0:
+    resolution: {integrity: sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==}
+    dev: false
+
   /are-we-there-yet@2.0.0:
     resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
     engines: {node: '>=10'}
@@ -3161,6 +3424,11 @@ packages:
       has-symbols: 1.0.3
     dev: false
 
+  /atomic-sleep@1.0.0:
+    resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
+    engines: {node: '>=8.0.0'}
+    dev: false
+
   /autoprefixer@10.4.16(postcss@8.4.31):
     resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -3182,6 +3450,16 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
+  /avvio@8.2.1:
+    resolution: {integrity: sha512-TAlMYvOuwGyLK3PfBb5WKBXZmXz2fVCgv23d6zZFdle/q3gPjmxBaeuC0pY0Dzs5PWMSgfqqEZkrye19GlDTgw==}
+    dependencies:
+      archy: 1.0.0
+      debug: 4.3.4
+      fastq: 1.15.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /axe-core@4.7.0:
     resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
     engines: {node: '>=4'}
@@ -3196,6 +3474,10 @@ packages:
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  /base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: false
+
   /bcrypt@5.1.1:
     resolution: {integrity: sha512-AGBHOG5hPYZ5Xl9KXzU5iKq9516yEmvCKDg3ecP5kX2aB6UqTeXZxk2ELnDgDm6BQSMlLt9rDB4LoSMx0rYwww==}
     engines: {node: '>= 10.0.0'}
@@ -3260,6 +3542,13 @@ packages:
       node-releases: 2.0.13
       update-browserslist-db: 1.0.13(browserslist@4.22.1)
 
+  /buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
   /bullmq@5.1.1:
     resolution: {integrity: sha512-j3zbNEQWsyHjpqGWiem2XBfmxAjYcArbwsmGlkM1E9MAVcrqB5hQUsXmyy9gEBAdL+PVotMICr7xTquR4Y2sKQ==}
     dependencies:
@@ -3447,6 +3736,10 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  /complex.js@2.1.1:
+    resolution: {integrity: sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==}
+    dev: false
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -3513,6 +3806,12 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+    dependencies:
+      internmap: 1.0.1
+    dev: false
+
   /d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -3535,6 +3834,12 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /d3-geo@2.0.2:
+    resolution: {integrity: sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==}
+    dependencies:
+      d3-array: 2.12.1
+    dev: false
+
   /d3-interpolate@3.0.1:
     resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
     engines: {node: '>=12'}
@@ -3625,6 +3930,10 @@ packages:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
     dev: false
 
+  /decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+    dev: false
+
   /deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3897,6 +4206,10 @@ packages:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
     dev: false
 
+  /escape-latex@1.2.0:
+    resolution: {integrity: sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==}
+    dev: false
+
   /escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -4205,10 +4518,20 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
     dev: false
 
+  /events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+    dev: false
+
   /execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -4263,6 +4586,14 @@ packages:
       - supports-color
     dev: false
 
+  /fast-content-type-parse@1.1.0:
+    resolution: {integrity: sha512-fBHHqSTFLVnR61C+gltJuE5GkVQMV0S2nqUO8TJ+5Z3qAKG8vAx4FKai1s5jq/inV1+sREynIWSuQ6HgoSXpDQ==}
+    dev: false
+
+  /fast-decode-uri-component@1.0.1:
+    resolution: {integrity: sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==}
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -4284,9 +4615,63 @@ packages:
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
+  /fast-json-stringify@5.10.0:
+    resolution: {integrity: sha512-fu1BhzPzgOdvK+sVhSPFzm06DQl0Dwbo+NQxWm21k03ili2wsJExXbGZ9qsD4Lsn7zFGltF8h9I1fuhk4JPnrQ==}
+    dependencies:
+      '@fastify/deepmerge': 1.3.0
+      ajv: 8.12.0
+      ajv-formats: 2.1.1(ajv@8.12.0)
+      fast-deep-equal: 3.1.3
+      fast-uri: 2.3.0
+      json-schema-ref-resolver: 1.0.1
+      rfdc: 1.3.1
+    dev: false
+
   /fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  /fast-querystring@1.1.2:
+    resolution: {integrity: sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg==}
+    dependencies:
+      fast-decode-uri-component: 1.0.1
+    dev: false
+
+  /fast-redact@3.3.0:
+    resolution: {integrity: sha512-6T5V1QK1u4oF+ATxs1lWUmlEk6P2T9HqJG3e2DnHOdVgZy2rFJBoEnrIedcTXlkAHU/zKC+7KETJ+KGGKwxgMQ==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /fast-uri@2.3.0:
+    resolution: {integrity: sha512-eel5UKGn369gGEWOqBShmFJWfq/xSJvsgDzgLYC845GneayWvXBf0lJCBn5qTABfewy1ZDPoaR5OZCP+kssfuw==}
+    dev: false
+
+  /fastify-plugin@4.5.1:
+    resolution: {integrity: sha512-stRHYGeuqpEZTL1Ef0Ovr2ltazUT9g844X5z/zEBFLG8RYlpDiOCIG+ATvYEp+/zmc7sN29mcIMp8gvYplYPIQ==}
+    dev: false
+
+  /fastify@4.25.2:
+    resolution: {integrity: sha512-SywRouGleDHvRh054onj+lEZnbC1sBCLkR0UY3oyJwjD4BdZJUrxBqfkfCaqn74pVCwBaRHGuL3nEWeHbHzAfw==}
+    dependencies:
+      '@fastify/ajv-compiler': 3.5.0
+      '@fastify/error': 3.4.1
+      '@fastify/fast-json-stringify-compiler': 4.3.0
+      abstract-logging: 2.0.1
+      avvio: 8.2.1
+      fast-content-type-parse: 1.1.0
+      fast-json-stringify: 5.10.0
+      find-my-way: 7.7.0
+      light-my-request: 5.11.0
+      pino: 8.17.2
+      process-warning: 3.0.0
+      proxy-addr: 2.0.7
+      rfdc: 1.3.1
+      secure-json-parse: 2.7.0
+      semver: 7.5.4
+      toad-cache: 3.7.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -4331,6 +4716,15 @@ packages:
       - supports-color
     dev: false
 
+  /find-my-way@7.7.0:
+    resolution: {integrity: sha512-+SrHpvQ52Q6W9f3wJoJBbAQULJuNEEQwBvlvYwACDhBTLOTMiQ0HYWh4+vC3OivGP2ENcTI1oKlFA2OepJNjhQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-querystring: 1.1.2
+      safe-regex2: 2.0.0
+    dev: false
+
   /find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -4365,6 +4759,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /fraction.js@4.3.4:
+    resolution: {integrity: sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==}
+    dev: false
+
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
@@ -4676,6 +5074,10 @@ packages:
       safer-buffer: 2.1.2
     dev: false
 
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: false
+
   /ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -4713,6 +5115,10 @@ packages:
       side-channel: 1.0.4
     dev: false
 
+  /internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+    dev: false
+
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -4963,6 +5369,10 @@ packages:
       minimatch: 3.1.2
     dev: false
 
+  /javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+    dev: false
+
   /jiti@1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
@@ -4995,9 +5405,19 @@ packages:
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  /json-schema-ref-resolver@1.0.1:
+    resolution: {integrity: sha512-EJAj1pgHc1hxF6vo2Z3s69fMjO1INq6eGHXZ8Z6wCQeldCuwxGK9Sxf4/cScGn3FZubCVUehfWtcDM/PLteCQw==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+    dev: false
+
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  /json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: false
+
   /json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -5047,6 +5467,14 @@ packages:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  /light-my-request@5.11.0:
+    resolution: {integrity: sha512-qkFCeloXCOMpmEdZ/MV91P8AT4fjwFXWaAFz3lUeStM8RcoM1ks4J/F8r1b3r6y/H4u3ACEJ1T+Gv5bopj7oDA==}
+    dependencies:
+      cookie: 0.5.0
+      process-warning: 2.3.2
+      set-cookie-parser: 2.6.0
+    dev: false
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -5155,6 +5583,22 @@ packages:
       css-mediaquery: 0.1.2
     dev: false
 
+  /mathjs@12.3.0:
+    resolution: {integrity: sha512-Mik+O8gbH14/1V2D/vdJNgu+qGXpF+2oeBJVBqN8nbOdZNuu4Nxw6aDbJ0QOkDSq/9bQ+AZpXoIxBuErRODS8w==}
+    engines: {node: '>= 18'}
+    hasBin: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      complex.js: 2.1.1
+      decimal.js: 10.4.3
+      escape-latex: 1.2.0
+      fraction.js: 4.3.4
+      javascript-natural-sort: 0.7.1
+      seedrandom: 3.0.5
+      tiny-emitter: 2.1.0
+      typed-function: 4.1.1
+    dev: false
+
   /media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -5253,6 +5697,12 @@ packages:
     hasBin: true
     dev: false
 
+  /mnemonist@0.39.6:
+    resolution: {integrity: sha512-A/0v5Z59y63US00cRSLiloEIw3t5G+MiKz4BhX21FI+YBJXBOGW0ohFxTxO08dsOYlzxo87T7vGfZKYp2bcAWA==}
+    dependencies:
+      obliterator: 2.0.4
+    dev: false
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: false
@@ -5562,11 +6012,20 @@ packages:
       es-abstract: 1.22.3
     dev: false
 
+  /obliterator@2.0.4:
+    resolution: {integrity: sha512-lgHwxlxV1qIg1Eap7LgIeoBWIMFibOjbrYPIPJZcI1mmGAI2m3lNYpK12Y+GBdPQ0U1hRwSord7GIaawz962qQ==}
+    dev: false
+
   /oidc-token-hash@5.0.3:
     resolution: {integrity: sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==}
     engines: {node: ^10.13.0 || >=12.0.0}
     dev: false
 
+  /on-exit-leak-free@2.1.2:
+    resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
   /on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -5674,6 +6133,34 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  /pino-abstract-transport@1.1.0:
+    resolution: {integrity: sha512-lsleG3/2a/JIWUtf9Q5gUNErBqwIu1tUKTT3dUzaf5DySw9ra1wcqKjJjLX1VTY64Wk1eEOYsVGSaGfCK85ekA==}
+    dependencies:
+      readable-stream: 4.5.2
+      split2: 4.2.0
+    dev: false
+
+  /pino-std-serializers@6.2.2:
+    resolution: {integrity: sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==}
+    dev: false
+
+  /pino@8.17.2:
+    resolution: {integrity: sha512-LA6qKgeDMLr2ux2y/YiUt47EfgQ+S9LznBWOJdN3q1dx2sv0ziDLUBeVpyVv17TEcGCBuWf0zNtg3M5m1NhhWQ==}
+    hasBin: true
+    dependencies:
+      atomic-sleep: 1.0.0
+      fast-redact: 3.3.0
+      on-exit-leak-free: 2.1.2
+      pino-abstract-transport: 1.1.0
+      pino-std-serializers: 6.2.2
+      process-warning: 3.0.0
+      quick-format-unescaped: 4.0.4
+      real-require: 0.2.0
+      safe-stable-stringify: 2.4.3
+      sonic-boom: 3.8.0
+      thread-stream: 2.4.1
+    dev: false
+
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -5854,6 +6341,19 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /process-warning@2.3.2:
+    resolution: {integrity: sha512-n9wh8tvBe5sFmsqlg+XQhaQLumwpqoAUruLwjCopgTmUBjJ/fjtBsJzKleCaIGBOMXYEhp1YfKl4d7rJ5ZKJGA==}
+    dev: false
+
+  /process-warning@3.0.0:
+    resolution: {integrity: sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ==}
+    dev: false
+
+  /process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -5890,6 +6390,10 @@ packages:
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  /quick-format-unescaped@4.0.4:
+    resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
+    dev: false
+
   /ramda@0.29.1:
     resolution: {integrity: sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA==}
     dev: false
@@ -5966,6 +6470,17 @@ packages:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
     dev: false
 
+  /react-path-tooltip@1.0.25(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wT1+mDi10aFyP3nyRCz3ixcwWGPIeCb3QOPHFYC+kIzaQUPk82Lrm3TsDn2k24n8FdUbbsxpfL8iwIddzaG5LQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16.0.0'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-redux@8.1.3(@types/react-dom@18.2.14)(@types/react@18.2.34)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1):
     resolution: {integrity: sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==}
     peerDependencies:
@@ -6117,6 +6632,20 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /react-svg-worldmap@2.0.0-alpha.16(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yztQgcshmUjN6GQ5irTuEiO54iWzY/iZsPP7vygEc+yY1IFlbXWOffRaZW7cHm9oBBmSk+/UNaaDI9iCQlHQ8g==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16.0.0'
+    dependencies:
+      d3-geo: 2.0.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-path-tooltip: 1.0.25(react-dom@18.2.0)(react@18.2.0)
+      tslib: 2.6.2
+    dev: false
+
   /react-syntax-highlighter@15.5.0(react@18.2.0):
     resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
     peerDependencies:
@@ -6175,12 +6704,28 @@ packages:
       util-deprecate: 1.0.2
     dev: false
 
+  /readable-stream@4.5.2:
+    resolution: {integrity: sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      abort-controller: 3.0.0
+      buffer: 6.0.3
+      events: 3.3.0
+      process: 0.11.10
+      string_decoder: 1.3.0
+    dev: false
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
 
+  /real-require@0.2.0:
+    resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
+    engines: {node: '>= 12.13.0'}
+    dev: false
+
   /recharts-scale@0.4.5:
     resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
     dependencies:
@@ -6274,6 +6819,15 @@ packages:
       set-function-name: 2.0.1
     dev: false
 
+  /request-ip@3.3.0:
+    resolution: {integrity: sha512-cA6Xh6e0fDBBBwH77SLJaJPBmD3nWVAcF9/XAcsrIHdjhFzFiB5aNQFytdjCGPezU3ROwrR11IddKAM08vohxA==}
+    dev: false
+
+  /require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /reselect@4.1.8:
     resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==}
     dev: false
@@ -6308,10 +6862,19 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: false
 
+  /ret@0.2.2:
+    resolution: {integrity: sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ==}
+    engines: {node: '>=4'}
+    dev: false
+
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  /rfdc@1.3.1:
+    resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==}
+    dev: false
+
   /rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     hasBin: true
@@ -6353,6 +6916,17 @@ packages:
       is-regex: 1.1.4
     dev: false
 
+  /safe-regex2@2.0.0:
+    resolution: {integrity: sha512-PaUSFsUaNNuKwkBijoAPHAK6/eM6VirvyPWlZ7BAQy4D+hCvh4B6lIG+nPdhbFfIbP+gTGBcrdsOaUs0F+ZBOQ==}
+    dependencies:
+      ret: 0.2.2
+    dev: false
+
+  /safe-stable-stringify@2.4.3:
+    resolution: {integrity: sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==}
+    engines: {node: '>=10'}
+    dev: false
+
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
@@ -6363,6 +6937,14 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
+  /secure-json-parse@2.7.0:
+    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
+    dev: false
+
+  /seedrandom@3.0.5:
+    resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
+    dev: false
+
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -6412,6 +6994,10 @@ packages:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
     dev: false
 
+  /set-cookie-parser@2.6.0:
+    resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
+    dev: false
+
   /set-function-length@1.1.1:
     resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==}
     engines: {node: '>= 0.4'}
@@ -6469,6 +7055,12 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: false
 
+  /sonic-boom@3.8.0:
+    resolution: {integrity: sha512-ybz6OYOUjoQQCQ/i4LU8kaToD8ACtYP+Cj5qd2AO36bwbdewxWJ3ArmJ2cr6AvxlL2o0PqnCcPGUgkILbfkaCA==}
+    dependencies:
+      atomic-sleep: 1.0.0
+    dev: false
+
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -6484,6 +7076,11 @@ packages:
     resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
     dev: false
 
+  /split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+    dev: false
+
   /standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
     dev: false
@@ -6699,6 +7296,16 @@ packages:
     dependencies:
       any-promise: 1.3.0
 
+  /thread-stream@2.4.1:
+    resolution: {integrity: sha512-d/Ex2iWd1whipbT681JmTINKw0ZwOUBZm7+Gjs64DHuX34mmw8vJL2bFAaNacaW72zYiTJxSHi5abUuOi5nsfg==}
+    dependencies:
+      real-require: 0.2.0
+    dev: false
+
+  /tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+    dev: false
+
   /tiny-invariant@1.3.1:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
     dev: false
@@ -6714,6 +7321,11 @@ packages:
     dependencies:
       is-number: 7.0.0
 
+  /toad-cache@3.7.0:
+    resolution: {integrity: sha512-/m8M+2BJUpoJdgAHoG+baCwBT+tf2VraSfkBgl0Y00qIWt41DJ8R5B8nsEw0I58YwF5IZH6z24/2TobDKnqSWw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -6854,6 +7466,11 @@ packages:
       is-typed-array: 1.1.12
     dev: false
 
+  /typed-function@4.1.1:
+    resolution: {integrity: sha512-Pq1DVubcvibmm8bYcMowjVnnMwPVMeh0DIdA8ad8NZY2sJgapANJmiigSUwlt+EgXxpfIv8MWrQXTIzkfYZLYQ==}
+    engines: {node: '>= 14'}
+    dev: false
+
   /types-ramda@0.29.5:
     resolution: {integrity: sha512-u+bAYXHDPJR+amB0qMrMU/NXRB2PG8QqpO2v6j7yK/0mPZhlaaZj++ynYjnVpkPEpCkZEGxNpWY3X7qyLCGE3w==}
     dependencies:
@@ -6865,6 +7482,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /ua-parser-js@1.0.37:
+    resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==}
+    dev: false
+
   /unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies:
diff --git a/tooling/typescript/base.json b/tooling/typescript/base.json
index bd981df1..da39eda6 100644
--- a/tooling/typescript/base.json
+++ b/tooling/typescript/base.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "checkJs": true,