Merge pull request #3242 from umami-software/analytics

v2.16

.eslintrc.json

@@ -13,13 +13,6 @@
     "ecmaVersion": 11,
     "sourceType": "module"
   },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "moduleDirectory": ["node_modules", "src/"]
-      }
-    }
-  },
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "eslint:recommended",

Dockerfile

@@ -1,5 +1,5 @@
 # Install dependencies only when needed
-FROM node:18-alpine AS deps
+FROM node:22-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -9,7 +9,7 @@ RUN yarn config set network-timeout 300000
 RUN yarn install --frozen-lockfile
 
 # Rebuild the source code only when needed
-FROM node:18-alpine AS builder
+FROM node:22-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
@@ -26,18 +26,21 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN yarn build-docker
 
 # Production image, copy all the files and run next
-FROM node:18-alpine AS runner
+FROM node:22-alpine AS runner
 WORKDIR /app
 
+ARG NODE_OPTIONS
+
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_OPTIONS $NODE_OPTIONS
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 RUN set -x \
-    && apk add --no-cache curl openssl \
-    && yarn add npm-run-all dotenv semver prisma@5.17.0
+    && apk add --no-cache curl \
+    && yarn add npm-run-all dotenv semver prisma@6.1.0
 
 # You only need to copy next.config.js if you are NOT using the default configuration
 COPY --from=builder /app/next.config.js .

db/mysql/schema.prisma

@@ -1,6 +1,6 @@
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "linux-musl-openssl-3.0.x", "linux-musl-arm64-openssl-3.0.x"]
+  binaryTargets = ["native"]
 }
 
 datasource db {

db/postgresql/schema.prisma

@@ -1,6 +1,6 @@
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "linux-musl-openssl-3.0.x", "linux-musl-arm64-openssl-3.0.x"]
+  binaryTargets = ["native"]
 }
 
 datasource db {

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 require('dotenv').config();
-const path = require('path');
 const pkg = require('./package.json');
 
 const TRACKER_SCRIPT = '/script.js';
@@ -9,6 +8,7 @@ const basePath = process.env.BASE_PATH;
 const collectApiEndpoint = process.env.COLLECT_API_ENDPOINT;
 const cloudMode = process.env.CLOUD_MODE;
 const cloudUrl = process.env.CLOUD_URL;
+const corsMaxAge = process.env.CORS_MAX_AGE;
 const defaultLocale = process.env.DEFAULT_LOCALE;
 const disableLogin = process.env.DISABLE_LOGIN;
 const disableUI = process.env.DISABLE_UI;
@@ -60,6 +60,15 @@ const trackerHeaders = [
 ];
 
 const headers = [
+  {
+    source: '/api/:path*',
+    headers: [
+      { key: 'Access-Control-Allow-Origin', value: '*' },
+      { key: 'Access-Control-Allow-Headers', value: '*' },
+      { key: 'Access-Control-Allow-Methods', value: 'GET, DELETE, POST, PUT' },
+      { key: 'Access-Control-Max-Age', value: corsMaxAge || '86400' },
+    ],
+  },
   {
     source: '/:path*',
     headers: defaultHeaders,
@@ -169,27 +178,22 @@ const config = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  experimental: {
+    turbo: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      },
+    },
+  },
   webpack(config) {
-    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
-
-    config.module.rules.push(
-      {
-        ...fileLoaderRule,
-        test: /\.svg$/i,
-        resourceQuery: /url/,
-      },
-      {
-        test: /\.svg$/i,
-        issuer: fileLoaderRule.issuer,
-        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
-        use: ['@svgr/webpack'],
-      },
-    );
-
-    fileLoaderRule.exclude = /\.svg$/i;
-
-    config.resolve.alias['public'] = path.resolve('./public');
-
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: /\.(js|ts)x?$/,
+      use: ['@svgr/webpack'],
+    });
     return config;
   },
   async headers() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Umami Software, Inc. <hello@umami.is>",
   "license": "MIT",
@@ -10,7 +10,7 @@
     "url": "https://github.com/umami-software/umami.git"
   },
   "scripts": {
-    "dev": "next dev -p 3000",
+    "dev": "next dev -p 3000 --turbo",
     "build": "npm-run-all check-env build-db check-db build-tracker build-geo build-app",
     "start": "next start",
     "build-docker": "npm-run-all build-db build-tracker build-geo build-app",
@@ -63,21 +63,20 @@
   "cacheDirectories": [
     ".next/cache"
   ],
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  },
   "dependencies": {
-    "@clickhouse/client": "^1.4.1",
+    "@clickhouse/client": "^1.10.1",
     "@date-fns/utc": "^1.2.0",
     "@dicebear/collection": "^9.2.1",
     "@dicebear/core": "^9.2.1",
     "@fontsource/inter": "^4.5.15",
-    "@prisma/client": "5.22.0",
-    "@prisma/extension-read-replicas": "^0.3.0",
+    "@hello-pangea/dnd": "^17.0.0",
+    "@prisma/client": "6.1.0",
+    "@prisma/extension-read-replicas": "^0.4.0",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.28.6",
     "@umami/prisma-client": "^0.14.0",
-    "@umami/redis-client": "^0.24.0",
+    "@umami/redis-client": "^0.26.0",
+    "bcryptjs": "^2.4.3",
     "chalk": "^4.1.1",
     "chart.js": "^4.4.2",
     "chartjs-adapter-date-fns": "^3.0.0",
@@ -99,17 +98,17 @@
     "is-docker": "^3.0.0",
     "is-localhost-ip": "^1.4.0",
     "isbot": "^5.1.16",
+    "jsonwebtoken": "^9.0.2",
     "kafkajs": "^2.1.0",
-    "maxmind": "^4.3.6",
+    "maxmind": "^4.3.24",
     "md5": "^2.3.0",
     "next": "15.0.4",
-    "next-basics": "^0.39.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
-    "prisma": "5.22.0",
+    "prisma": "6.1.0",
+    "pure-rand": "^6.1.0",
     "react": "^19.0.0",
-    "react-basics": "^0.125.0",
-    "react-beautiful-dnd": "^13.1.0",
+    "react-basics": "^0.126.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^4.0.4",
     "react-intl": "^6.5.5",
@@ -118,9 +117,10 @@
     "react-window": "^1.8.6",
     "request-ip": "^3.3.0",
     "semver": "^7.5.4",
+    "serialize-error": "^12.0.0",
     "thenby": "^1.3.4",
     "uuid": "^9.0.0",
-    "yup": "^0.32.11",
+    "zod": "^3.24.1",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
@@ -135,15 +135,16 @@
     "@svgr/webpack": "^8.1.0",
     "@types/cypress": "^1.1.3",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.41",
-    "@types/react-dom": "^18.2.17",
+    "@types/node": "^22.13.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-intl": "^3.0.0",
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "cross-env": "^7.0.3",
     "cypress": "^13.6.6",
-    "esbuild": "^0.17.17",
+    "esbuild": "^0.25.0",
     "eslint": "^8.33.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^8.5.0",

public/intl/messages/hi-IN.json

@@ -2,7 +2,7 @@
   "label.access-code": [
     {
       "type": 0,
-      "value": "Access code"
+      "value": "पहुंच कोड"
     }
   ],
   "label.actions": [
@@ -14,19 +14,19 @@
   "label.activity": [
     {
       "type": 0,
-      "value": "Activity log"
+      "value": "गतिविधि लॉग"
     }
   ],
   "label.add": [
     {
       "type": 0,
-      "value": "Add"
+      "value": "जोडो"
     }
   ],
   "label.add-description": [
     {
       "type": 0,
-      "value": "Add description"
+      "value": "विवरण लिखें"
     }
   ],
   "label.add-member": [
@@ -1006,7 +1006,7 @@
   "label.reports": [
     {
       "type": 0,
-      "value": "Reports"
+      "value": "प्रतिवेदन"
     }
   ],
   "label.required": [

rollup.components.config.mjs

@@ -19,13 +19,8 @@ const customResolver = resolve({
 
 const aliasConfig = {
   entries: [
-    { find: /^app/, replacement: path.resolve('./src/app') },
-    { find: /^components/, replacement: path.resolve('./src/components') },
-    { find: /^hooks/, replacement: path.resolve('./src/hooks') },
-    { find: /^lib/, replacement: path.resolve('./src/lib') },
-    { find: /^store/, replacement: path.resolve('./src/store') },
+    { find: /^@/, replacement: path.resolve('./src/') },
     { find: /^public/, replacement: path.resolve('./public') },
-    { find: /^assets/, replacement: path.resolve('./src/assets') },
   ],
   customResolver,
 };

scripts/change-password.js

@@ -1,94 +0,0 @@
-/* eslint-disable no-console */
-require('dotenv').config();
-const { hashPassword } = require('next-basics');
-const chalk = require('chalk');
-const prompts = require('prompts');
-const { PrismaClient } = require('@prisma/client');
-
-const prisma = new PrismaClient();
-
-const runQuery = async query => {
-  return query.catch(e => {
-    throw e;
-  });
-};
-
-const updateUserByUsername = (username, data) => {
-  return runQuery(
-    prisma.user.update({
-      where: {
-        username,
-      },
-      data,
-    }),
-  );
-};
-
-const changePassword = async (username, newPassword) => {
-  const password = hashPassword(newPassword);
-  return updateUserByUsername(username, { password });
-};
-
-const getUsernameAndPassword = async () => {
-  let [username, password] = process.argv.slice(2);
-  if (username && password) {
-    return { username, password };
-  }
-
-  const questions = [];
-  if (!username) {
-    questions.push({
-      type: 'text',
-      name: 'username',
-      message: 'Enter user to change password',
-    });
-  }
-  if (!password) {
-    questions.push(
-      {
-        type: 'password',
-        name: 'password',
-        message: 'Enter new password',
-      },
-      {
-        type: 'password',
-        name: 'confirmation',
-        message: 'Confirm new password',
-      },
-    );
-  }
-
-  const answers = await prompts(questions);
-  if (answers.password !== answers.confirmation) {
-    throw new Error(`Passwords don't match`);
-  }
-
-  return {
-    username: username || answers.username,
-    password: answers.password,
-  };
-};
-
-(async () => {
-  let username, password;
-
-  try {
-    ({ username, password } = await getUsernameAndPassword());
-  } catch (error) {
-    console.log(chalk.redBright(error.message));
-    return;
-  }
-
-  try {
-    await changePassword(username, password);
-    console.log('Password changed for user', chalk.greenBright(username));
-  } catch (error) {
-    if (error.meta.cause.includes('Record to update not found')) {
-      console.log('User not found:', chalk.redBright(username));
-    } else {
-      throw error;
-    }
-  }
-
-  prisma.$disconnect();
-})();

scripts/check-env.js

@@ -23,5 +23,5 @@ if (!process.env.SKIP_DB_CHECK && !process.env.DATABASE_TYPE) {
 }
 
 if (process.env.CLOUD_MODE) {
-  checkMissing(['CLOUD_URL', 'KAFKA_BROKER', 'KAFKA_URL', 'REDIS_URL']);
+  checkMissing(['CLOUD_URL', 'KAFKA_BROKER', 'KAFKA_URL', 'REDIS_URL', 'KAFKA_SASL_MECHANISM']);
 }

src/app/(main)/App.tsx

@@ -2,7 +2,7 @@
 import { Loading } from 'react-basics';
 import Script from 'next/script';
 import { usePathname } from 'next/navigation';
-import { useLogin, useConfig } from 'components/hooks';
+import { useLogin, useConfig } from '@/components/hooks';
 import UpdateNotice from './UpdateNotice';
 
 export function App({ children }) {
@@ -22,6 +22,10 @@ export function App({ children }) {
     return null;
   }
 
+  if (config.uiDisabled) {
+    return null;
+  }
+
   return (
     <>
       {children}

src/app/(main)/NavBar.tsx

@@ -1,17 +1,17 @@
 'use client';
+import { useEffect } from 'react';
 import { Icon, Text } from 'react-basics';
 import Link from 'next/link';
 import classNames from 'classnames';
-import HamburgerButton from 'components/common/HamburgerButton';
-import ThemeButton from 'components/input/ThemeButton';
-import LanguageButton from 'components/input/LanguageButton';
-import ProfileButton from 'components/input/ProfileButton';
-import TeamsButton from 'components/input/TeamsButton';
-import Icons from 'components/icons';
-import { useMessages, useNavigation, useTeamUrl } from 'components/hooks';
+import HamburgerButton from '@/components/common/HamburgerButton';
+import ThemeButton from '@/components/input/ThemeButton';
+import LanguageButton from '@/components/input/LanguageButton';
+import ProfileButton from '@/components/input/ProfileButton';
+import TeamsButton from '@/components/input/TeamsButton';
+import Icons from '@/components/icons';
+import { useMessages, useNavigation, useTeamUrl } from '@/components/hooks';
+import { getItem, setItem } from '@/lib/storage';
 import styles from './NavBar.module.css';
-import { useEffect } from 'react';
-import { getItem, setItem } from 'next-basics';
 
 export function NavBar() {
   const { formatMessage, labels } = useMessages();

src/app/(main)/UpdateNotice.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from 'react-basics';
-import { setItem } from 'next-basics';
-import useStore, { checkVersion } from 'store/version';
-import { REPO_URL, VERSION_CHECK } from 'lib/constants';
-import { useMessages } from 'components/hooks';
+import { setItem } from '@/lib/storage';
+import useStore, { checkVersion } from '@/store/version';
+import { REPO_URL, VERSION_CHECK } from '@/lib/constants';
+import { useMessages } from '@/components/hooks';
 import { usePathname } from 'next/navigation';
 import styles from './UpdateNotice.module.css';
 
@@ -14,6 +14,7 @@ export function UpdateNotice({ user, config }) {
   const pathname = usePathname();
   const [dismissed, setDismissed] = useState(checked);
   const allowUpdate =
+    process.env.NODE_ENV === 'production' &&
     user?.isAdmin &&
     !config?.updatesDisabled &&
     !pathname.includes('/share/') &&

src/app/(main)/console/TestConsole.tsx

@@ -1,12 +1,12 @@
 import { Button } from 'react-basics';
 import Link from 'next/link';
 import Script from 'next/script';
-import WebsiteSelect from 'components/input/WebsiteSelect';
-import Page from 'components/layout/Page';
-import PageHeader from 'components/layout/PageHeader';
-import EventsChart from 'components/metrics/EventsChart';
+import WebsiteSelect from '@/components/input/WebsiteSelect';
+import Page from '@/components/layout/Page';
+import PageHeader from '@/components/layout/PageHeader';
+import EventsChart from '@/components/metrics/EventsChart';
 import WebsiteChart from '../websites/[websiteId]/WebsiteChart';
-import { useApi, useNavigation } from 'components/hooks';
+import { useApi, useNavigation } from '@/components/hooks';
 import styles from './TestConsole.module.css';
 
 export function TestConsole({ websiteId }: { websiteId: string }) {

src/app/(main)/dashboard/DashboardEdit.tsx

@@ -1,10 +1,10 @@
 import { useState, useMemo, useEffect } from 'react';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 import { Button, Loading, Toggle, SearchField } from 'react-basics';
 import { firstBy } from 'thenby';
-import useDashboard, { saveDashboard } from 'store/dashboard';
-import { useMessages, useWebsites } from 'components/hooks';
+import useDashboard, { saveDashboard } from '@/store/dashboard';
+import { useMessages, useWebsites } from '@/components/hooks';
 import styles from './DashboardEdit.module.css';
 
 const DRAG_ID = 'dashboard-website-ordering';

src/app/(main)/dashboard/DashboardPage.tsx

@@ -1,14 +1,14 @@
 'use client';
 import { Icon, Icons, Loading, Text } from 'react-basics';
-import PageHeader from 'components/layout/PageHeader';
-import Pager from 'components/common/Pager';
+import PageHeader from '@/components/layout/PageHeader';
+import Pager from '@/components/common/Pager';
 import WebsiteChartList from '../websites/[websiteId]/WebsiteChartList';
-import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
-import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import { useMessages, useLocale, useTeamUrl, useWebsites } from 'components/hooks';
-import useDashboard from 'store/dashboard';
-import LinkButton from 'components/common/LinkButton';
+import DashboardSettingsButton from '@/app/(main)/dashboard/DashboardSettingsButton';
+import DashboardEdit from '@/app/(main)/dashboard/DashboardEdit';
+import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { useMessages, useLocale, useTeamUrl, useWebsites } from '@/components/hooks';
+import useDashboard from '@/store/dashboard';
+import LinkButton from '@/components/common/LinkButton';
 
 export function DashboardPage() {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/dashboard/DashboardSettingsButton.tsx

@@ -1,7 +1,7 @@
 import { TooltipPopup, Icon, Text, Flexbox, Button } from 'react-basics';
-import Icons from 'components/icons';
-import { saveDashboard } from 'store/dashboard';
-import { useMessages } from 'components/hooks';
+import Icons from '@/components/icons';
+import { saveDashboard } from '@/store/dashboard';
+import { useMessages } from '@/components/hooks';
 
 export function DashboardSettingsButton() {
   const { formatMessage, labels } = useMessages();

src/app/(main)/layout.tsx

@@ -1,14 +1,10 @@
 import { Metadata } from 'next';
 import App from './App';
 import NavBar from './NavBar';
-import Page from 'components/layout/Page';
+import Page from '@/components/layout/Page';
 import styles from './layout.module.css';
 
-export default function ({ children }) {
-  if (process.env.DISABLE_UI) {
-    return null;
-  }
-
+export default async function ({ children }) {
   return (
     <App>
       <main className={styles.layout}>

src/app/(main)/profile/DateRangeSetting.tsx

@@ -1,8 +1,8 @@
-import DateFilter from 'components/input/DateFilter';
+import DateFilter from '@/components/input/DateFilter';
 import { Button, Flexbox } from 'react-basics';
-import { useDateRange, useMessages } from 'components/hooks';
-import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import { DateRange } from 'lib/types';
+import { useDateRange, useMessages } from '@/components/hooks';
+import { DEFAULT_DATE_RANGE } from '@/lib/constants';
+import { DateRange } from '@/lib/types';
 import styles from './DateRangeSetting.module.css';
 
 export function DateRangeSetting() {

src/app/(main)/profile/LanguageSetting.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Button, Dropdown, Item, Flexbox } from 'react-basics';
-import { useLocale, useMessages } from 'components/hooks';
-import { DEFAULT_LOCALE } from 'lib/constants';
-import { languages } from 'lib/lang';
+import { useLocale, useMessages } from '@/components/hooks';
+import { DEFAULT_LOCALE } from '@/lib/constants';
+import { languages } from '@/lib/lang';
 import styles from './LanguageSetting.module.css';
 
 export function LanguageSetting() {

src/app/(main)/profile/PasswordChangeButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
-import PasswordEditForm from 'app/(main)/profile/PasswordEditForm';
-import Icons from 'components/icons';
-import { useMessages } from 'components/hooks';
+import PasswordEditForm from '@/app/(main)/profile/PasswordEditForm';
+import Icons from '@/components/icons';
+import { useMessages } from '@/components/hooks';
 
 export function PasswordChangeButton() {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/profile/PasswordEditForm.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
-import { useApi, useMessages } from 'components/hooks';
+import { useApi, useMessages } from '@/components/hooks';
 
 export function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/profile/ProfileHeader.tsx

@@ -1,5 +1,5 @@
-import PageHeader from 'components/layout/PageHeader';
-import { useMessages } from 'components/hooks';
+import PageHeader from '@/components/layout/PageHeader';
+import { useMessages } from '@/components/hooks';
 
 export function ProfileHeader() {
   const { formatMessage, labels } = useMessages();

src/app/(main)/profile/ProfileSettings.tsx

@@ -1,11 +1,11 @@
 import { Form, FormRow } from 'react-basics';
-import TimezoneSetting from 'app/(main)/profile/TimezoneSetting';
-import DateRangeSetting from 'app/(main)/profile/DateRangeSetting';
-import LanguageSetting from 'app/(main)/profile/LanguageSetting';
-import ThemeSetting from 'app/(main)/profile/ThemeSetting';
+import TimezoneSetting from '@/app/(main)/profile/TimezoneSetting';
+import DateRangeSetting from '@/app/(main)/profile/DateRangeSetting';
+import LanguageSetting from '@/app/(main)/profile/LanguageSetting';
+import ThemeSetting from '@/app/(main)/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
-import { useLogin, useMessages } from 'components/hooks';
-import { ROLES } from 'lib/constants';
+import { useLogin, useMessages } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 
 export function ProfileSettings() {
   const { user } = useLogin();

src/app/(main)/profile/ThemeSetting.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { Button, Icon } from 'react-basics';
-import { useTheme } from 'components/hooks';
-import Sun from 'assets/sun.svg';
-import Moon from 'assets/moon.svg';
+import { useTheme } from '@/components/hooks';
+import Sun from '@/assets/sun.svg';
+import Moon from '@/assets/moon.svg';
 import styles from './ThemeSetting.module.css';
 
 export function ThemeSetting() {

src/app/(main)/profile/TimezoneSetting.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
-import { useTimezone, useMessages } from 'components/hooks';
-import { getTimezone } from 'lib/date';
+import { useTimezone, useMessages } from '@/components/hooks';
+import { getTimezone } from '@/lib/date';
 import styles from './TimezoneSetting.module.css';
 
 const timezones = Intl.supportedValuesOf('timeZone');

src/app/(main)/reports/ReportDeleteButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { useApi, useMessages, useModified } from 'components/hooks';
-import ConfirmationForm from 'components/common/ConfirmationForm';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+import ConfirmationForm from '@/components/common/ConfirmationForm';
 
 export function ReportDeleteButton({
   reportId,
@@ -11,7 +11,7 @@ export function ReportDeleteButton({
   reportName: string;
   onDelete?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, isPending, error } = useMutation({
     mutationFn: reportId => del(`/reports/${reportId}`),
@@ -39,12 +39,7 @@ export function ReportDeleteButton({
       <Modal title={formatMessage(labels.deleteReport)}>
         {(close: () => void) => (
           <ConfirmationForm
-            message={
-              <FormattedMessage
-                {...messages.confirmDelete}
-                values={{ target: <b>{reportName}</b> }}
-              />
-            }
+            message={formatMessage(messages.confirmDelete, { target: <b>{reportName}</b> })}
             isLoading={isPending}
             error={error}
             onConfirm={handleConfirm.bind(null, close)}

src/app/(main)/reports/ReportsDataTable.tsx

@@ -1,6 +1,6 @@
-import { useReports } from 'components/hooks';
+import { useReports } from '@/components/hooks';
 import ReportsTable from './ReportsTable';
-import DataTable from 'components/common/DataTable';
+import DataTable from '@/components/common/DataTable';
 import { ReactNode } from 'react';
 
 export default function ReportsDataTable({

src/app/(main)/reports/ReportsHeader.tsx

@@ -1,8 +1,8 @@
-import PageHeader from 'components/layout/PageHeader';
+import PageHeader from '@/components/layout/PageHeader';
 import { Icon, Icons, Text } from 'react-basics';
-import { useLogin, useMessages, useTeamUrl } from 'components/hooks';
-import LinkButton from 'components/common/LinkButton';
-import { ROLES } from 'lib/constants';
+import { useLogin, useMessages, useTeamUrl } from '@/components/hooks';
+import LinkButton from '@/components/common/LinkButton';
+import { ROLES } from '@/lib/constants';
 
 export function ReportsHeader() {
   const { formatMessage, labels } = useMessages();

src/app/(main)/reports/ReportsPage.tsx

@@ -2,7 +2,7 @@
 import { Metadata } from 'next';
 import ReportsHeader from './ReportsHeader';
 import ReportsDataTable from './ReportsDataTable';
-import { useTeamUrl } from 'components/hooks';
+import { useTeamUrl } from '@/components/hooks';
 
 export default function ReportsPage() {
   const { teamId } = useTeamUrl();

src/app/(main)/reports/ReportsTable.tsx

@@ -1,7 +1,7 @@
 import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-import LinkButton from 'components/common/LinkButton';
-import { useMessages, useLogin, useTeamUrl } from 'components/hooks';
-import { REPORT_TYPES } from 'lib/constants';
+import LinkButton from '@/components/common/LinkButton';
+import { useMessages, useLogin, useTeamUrl } from '@/components/hooks';
+import { REPORT_TYPES } from '@/lib/constants';
 import ReportDeleteButton from './ReportDeleteButton';
 
 export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {

src/app/(main)/reports/[reportId]/BaseParameters.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import { FormRow } from 'react-basics';
-import { parseDateRange } from 'lib/date';
-import DateFilter from 'components/input/DateFilter';
-import WebsiteSelect from 'components/input/WebsiteSelect';
-import { useMessages, useTeamUrl, useWebsite } from 'components/hooks';
+import { parseDateRange } from '@/lib/date';
+import DateFilter from '@/components/input/DateFilter';
+import WebsiteSelect from '@/components/input/WebsiteSelect';
+import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
 import { ReportContext } from './Report';
 import styles from './BaseParameters.module.css';
 

src/app/(main)/reports/[reportId]/FieldAddForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
-import { REPORT_PARAMETERS } from 'lib/constants';
+import { REPORT_PARAMETERS } from '@/lib/constants';
 import PopupForm from './PopupForm';
 import FieldSelectForm from './FieldSelectForm';
 

src/app/(main)/reports/[reportId]/FieldAggregateForm.tsx

@@ -1,5 +1,5 @@
 import { Form, FormRow, Menu, Item } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 export default function FieldAggregateForm({
   name,

src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx

@@ -1,7 +1,7 @@
-import { useFilters, useFormat, useLocale, useMessages, useWebsiteValues } from 'components/hooks';
-import { OPERATORS } from 'lib/constants';
-import { isEqualsOperator } from 'lib/params';
 import { useMemo, useState } from 'react';
+import { useFilters, useFormat, useMessages, useWebsiteValues } from '@/components/hooks';
+import { OPERATORS } from '@/lib/constants';
+import { isEqualsOperator } from '@/lib/params';
 import {
   Button,
   Dropdown,
@@ -55,7 +55,6 @@ export default function FieldFilterEditForm({
   const [selected, setSelected] = useState(isEquals ? value : '');
   const { filters } = useFilters();
   const { formatValue } = useFormat();
-  const { locale } = useLocale();
   const isDisabled = !operator || (isEquals && !selected) || (!isEquals && !value);
   const {
     data: values = [],
@@ -80,29 +79,17 @@ export default function FieldFilterEditForm({
   };
 
   const formattedValues = useMemo(() => {
-    if (!values) {
-      return {};
-    }
-    const formatted = {};
-    const format = (val: string) => {
-      formatted[val] = formatValue(val, name);
-      return formatted[val];
-    };
+    return values.reduce((obj: { [x: string]: string }, { value }: { value: string }) => {
+      obj[value] = formatValue(value, name);
 
-    if (values?.length !== 1) {
-      const { compare } = new Intl.Collator(locale, { numeric: true });
-      values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
-    } else {
-      format(values[0]);
-    }
-
-    return formatted;
-  }, [formatValue, locale, name, values]);
+      return obj;
+    }, {});
+  }, [formatValue, name, values]);
 
   const filteredValues = useMemo(() => {
     return value
       ? values.filter((n: string | number) =>
-          formattedValues[n].toLowerCase().includes(value.toLowerCase()),
+          formattedValues[n]?.toLowerCase()?.includes(value.toLowerCase()),
         )
       : values;
   }, [value, formattedValues]);
@@ -226,7 +213,7 @@ const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
 
   return (
     <Menu className={styles.menu} variant="popup" onSelect={onSelect}>
-      {values?.map((value: any) => {
+      {values?.map(({ value }) => {
         return <Item key={value}>{formatValue(value, type)}</Item>;
       })}
     </Menu>

src/app/(main)/reports/[reportId]/FieldParameters.tsx

@@ -1,5 +1,5 @@
-import { useFields, useMessages } from 'components/hooks';
-import Icons from 'components/icons';
+import { useFields, useMessages } from '@/components/hooks';
+import Icons from '@/components/icons';
 import { useContext } from 'react';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
 import FieldSelectForm from '../[reportId]/FieldSelectForm';

src/app/(main)/reports/[reportId]/FieldSelectForm.tsx

@@ -1,5 +1,5 @@
 import { Menu, Item, Form, FormRow } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import styles from './FieldSelectForm.module.css';
 import { Key } from 'react';
 

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -1,13 +1,13 @@
 import { useContext } from 'react';
-import { useMessages, useFormat, useFilters, useFields } from 'components/hooks';
-import Icons from 'components/icons';
+import { useMessages, useFormat, useFilters, useFields } from '@/components/hooks';
+import Icons from '@/components/icons';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
 import FilterSelectForm from '../[reportId]/FilterSelectForm';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
 import { ReportContext } from './Report';
 import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
-import { isSearchOperator } from 'lib/params';
+import { isSearchOperator } from '@/lib/params';
 import styles from './FilterParameters.module.css';
 
 export function FilterParameters() {

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import { Icon } from 'react-basics';
-import Icons from 'components/icons';
-import Empty from 'components/common/Empty';
-import { useMessages } from 'components/hooks';
+import Icons from '@/components/icons';
+import Empty from '@/components/common/Empty';
+import { useMessages } from '@/components/hooks';
 import styles from './ParameterList.module.css';
 import classNames from 'classnames';
 

src/app/(main)/reports/[reportId]/Report.tsx

@@ -1,7 +1,7 @@
 import { createContext, ReactNode } from 'react';
 import { Loading } from 'react-basics';
 import classNames from 'classnames';
-import { useReport } from 'components/hooks';
+import { useReport } from '@/components/hooks';
 import styles from './Report.module.css';
 
 export const ReportContext = createContext(null);

src/app/(main)/reports/[reportId]/ReportHeader.tsx

@@ -1,10 +1,10 @@
 import { useContext } from 'react';
 import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
-import { useMessages, useApi, useNavigation, useTeamUrl } from 'components/hooks';
+import { useMessages, useApi, useNavigation, useTeamUrl } from '@/components/hooks';
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
-import { REPORT_TYPES } from 'lib/constants';
-import Breadcrumb from 'components/common/Breadcrumb';
+import { REPORT_TYPES } from '@/lib/constants';
+import Breadcrumb from '@/components/common/Breadcrumb';
 
 export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);

src/app/(main)/reports/[reportId]/ReportPage.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useReport } from 'components/hooks';
+import { useReport } from '@/components/hooks';
 import EventDataReport from '../event-data/EventDataReport';
 import FunnelReport from '../funnel/FunnelReport';
 import GoalReport from '../goals/GoalsReport';

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -1,12 +1,12 @@
-import Funnel from 'assets/funnel.svg';
-import Money from 'assets/money.svg';
-import Lightbulb from 'assets/lightbulb.svg';
-import Magnet from 'assets/magnet.svg';
-import Path from 'assets/path.svg';
-import Tag from 'assets/tag.svg';
-import Target from 'assets/target.svg';
-import { useMessages, useTeamUrl } from 'components/hooks';
-import PageHeader from 'components/layout/PageHeader';
+import Funnel from '@/assets/funnel.svg';
+import Money from '@/assets/money.svg';
+import Lightbulb from '@/assets/lightbulb.svg';
+import Magnet from '@/assets/magnet.svg';
+import Path from '@/assets/path.svg';
+import Tag from '@/assets/tag.svg';
+import Target from '@/assets/target.svg';
+import { useMessages, useTeamUrl } from '@/components/hooks';
+import PageHeader from '@/components/layout/PageHeader';
 import Link from 'next/link';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import styles from './ReportTemplates.module.css';

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
-import Empty from 'components/common/Empty';
-import Icons from 'components/icons';
-import { useApi, useMessages } from 'components/hooks';
-import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
+import Empty from '@/components/common/Empty';
+import Icons from '@/components/icons';
+import { useApi, useMessages } from '@/components/hooks';
+import { DATA_TYPES, REPORT_PARAMETERS } from '@/lib/constants';
 import { ReportContext } from '../[reportId]/Report';
 import FieldAddForm from '../[reportId]/FieldAddForm';
 import ParameterList from '../[reportId]/ParameterList';

src/app/(main)/reports/event-data/EventDataReport.tsx

@@ -4,7 +4,7 @@ import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
 import EventDataParameters from './EventDataParameters';
 import EventDataTable from './EventDataTable';
-import Nodes from 'assets/nodes.svg';
+import Nodes from '@/assets/nodes.svg';
 
 const defaultParameters = {
   type: 'event-data',

src/app/(main)/reports/event-data/EventDataTable.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { ReportContext } from '../[reportId]/Report';
 
 export function EventDataTable() {

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { ReportContext } from '../[reportId]/Report';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumber } from '@/lib/format';
 import styles from './FunnelChart.module.css';
 
 export interface FunnelChartProps {

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import {
   Icon,
   Form,
@@ -12,7 +12,7 @@ import {
   TextField,
   Button,
 } from 'react-basics';
-import Icons from 'components/icons';
+import Icons from '@/components/icons';
 import FunnelStepAddForm from './FunnelStepAddForm';
 import { ReportContext } from '../[reportId]/Report';
 import BaseParameters from '../[reportId]/BaseParameters';

src/app/(main)/reports/funnel/FunnelReport.tsx

@@ -4,8 +4,8 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import Funnel from 'assets/funnel.svg';
-import { REPORT_TYPES } from 'lib/constants';
+import Funnel from '@/assets/funnel.svg';
+import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
   type: REPORT_TYPES.funnel,

src/app/(main)/reports/funnel/FunnelStepAddForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from 'react-basics';
 import styles from './FunnelStepAddForm.module.css';
 

src/app/(main)/reports/goals/GoalsAddForm.tsx

@@ -1,4 +1,4 @@
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { useState } from 'react';
 import { Button, Dropdown, Flexbox, FormRow, Item, TextField } from 'react-basics';
 import styles from './GoalsAddForm.module.css';

src/app/(main)/reports/goals/GoalsChart.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { ReportContext } from '../[reportId]/Report';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumber } from '@/lib/format';
 import styles from './GoalsChart.module.css';
 
 export function GoalsChart({ className }: { className?: string; isLoading?: boolean }) {

src/app/(main)/reports/goals/GoalsParameters.tsx

@@ -1,6 +1,6 @@
-import { useMessages } from 'components/hooks';
-import Icons from 'components/icons';
-import { formatNumber } from 'lib/format';
+import { useMessages } from '@/components/hooks';
+import Icons from '@/components/icons';
+import { formatNumber } from '@/lib/format';
 import { useContext } from 'react';
 import {
   Button,

src/app/(main)/reports/goals/GoalsReport.tsx

@@ -4,8 +4,8 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import Target from 'assets/target.svg';
-import { REPORT_TYPES } from 'lib/constants';
+import Target from '@/assets/target.svg';
+import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
   type: REPORT_TYPES.goals,

src/app/(main)/reports/insights/InsightsParameters.tsx

@@ -1,4 +1,4 @@
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { useContext } from 'react';
 import { Form, FormButtons, SubmitButton } from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';

src/app/(main)/reports/insights/InsightsReport.tsx

@@ -4,8 +4,8 @@ import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
 import InsightsParameters from './InsightsParameters';
 import InsightsTable from './InsightsTable';
-import Lightbulb from 'assets/lightbulb.svg';
-import { REPORT_TYPES } from 'lib/constants';
+import Lightbulb from '@/assets/lightbulb.svg';
+import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
   type: REPORT_TYPES.insights,

src/app/(main)/reports/insights/InsightsTable.tsx

@@ -1,9 +1,9 @@
 import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
-import { useFormat, useMessages } from 'components/hooks';
+import { useFormat, useMessages } from '@/components/hooks';
 import { ReportContext } from '../[reportId]/Report';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import { formatShortTime } from 'lib/format';
+import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { formatShortTime } from '@/lib/format';
 
 export function InsightsTable() {
   const [fields, setFields] = useState([]);

src/app/(main)/reports/journey/JourneyParameters.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import {
   Dropdown,
   Form,

src/app/(main)/reports/journey/JourneyReport.tsx

@@ -5,8 +5,8 @@ import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
 import JourneyParameters from './JourneyParameters';
 import JourneyView from './JourneyView';
-import Path from 'assets/path.svg';
-import { REPORT_TYPES } from 'lib/constants';
+import Path from '@/assets/path.svg';
+import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
   type: REPORT_TYPES.journey,

src/app/(main)/reports/journey/JourneyView.tsx

@@ -2,11 +2,11 @@ import { useContext, useMemo, useState } from 'react';
 import { TextOverflow, TooltipPopup } from 'react-basics';
 import { firstBy } from 'thenby';
 import classNames from 'classnames';
-import { useEscapeKey, useMessages } from 'components/hooks';
-import { objectToArray } from 'lib/data';
+import { useEscapeKey, useMessages } from '@/components/hooks';
+import { objectToArray } from '@/lib/data';
 import { ReportContext } from '../[reportId]/Report';
 import styles from './JourneyView.module.css';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumber } from '@/lib/format';
 
 const NODE_HEIGHT = 60;
 const NODE_GAP = 10;

src/app/(main)/reports/retention/RetentionParameters.tsx

@@ -1,10 +1,10 @@
 import { useContext } from 'react';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
-import { MonthSelect } from 'components/input/MonthSelect';
+import { MonthSelect } from '@/components/input/MonthSelect';
 import BaseParameters from '../[reportId]/BaseParameters';
-import { parseDateRange } from 'lib/date';
+import { parseDateRange } from '@/lib/date';
 
 export function RetentionParameters() {
   const { report, runReport, isRunning, updateReport } = useContext(ReportContext);

src/app/(main)/reports/retention/RetentionReport.tsx

@@ -4,9 +4,9 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import Magnet from 'assets/magnet.svg';
-import { REPORT_TYPES } from 'lib/constants';
-import { parseDateRange } from 'lib/date';
+import Magnet from '@/assets/magnet.svg';
+import { REPORT_TYPES } from '@/lib/constants';
+import { parseDateRange } from '@/lib/date';
 import { endOfMonth, startOfMonth } from 'date-fns';
 
 const defaultParameters = {

src/app/(main)/reports/retention/RetentionTable.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
 import { ReportContext } from '../[reportId]/Report';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import { useMessages, useLocale } from 'components/hooks';
-import { formatDate } from 'lib/date';
+import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { useMessages, useLocale } from '@/components/hooks';
+import { formatDate } from '@/lib/date';
 import styles from './RetentionTable.module.css';
 
 const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];

src/app/(main)/reports/revenue/RevenueParameters.tsx

@@ -1,5 +1,5 @@
-import { useMessages } from 'components/hooks';
-import useRevenueValues from 'components/hooks/queries/useRevenueValues';
+import { useMessages } from '@/components/hooks';
+import useRevenueValues from '@/components/hooks/queries/useRevenueValues';
 import { useContext } from 'react';
 import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';

src/app/(main)/reports/revenue/RevenueReport.tsx

@@ -1,5 +1,5 @@
-import Money from 'assets/money.svg';
-import { REPORT_TYPES } from 'lib/constants';
+import Money from '@/assets/money.svg';
+import { REPORT_TYPES } from '@/lib/constants';
 import Report from '../[reportId]/Report';
 import ReportBody from '../[reportId]/ReportBody';
 import ReportHeader from '../[reportId]/ReportHeader';

src/app/(main)/reports/revenue/RevenueTable.tsx

@@ -1,9 +1,9 @@
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import { useMessages } from 'components/hooks';
+import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { useMessages } from '@/components/hooks';
 import { useContext } from 'react';
 import { GridColumn, GridTable } from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
-import { formatLongCurrency } from 'lib/format';
+import { formatLongCurrency } from '@/lib/format';
 
 export function RevenueTable() {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/revenue/RevenueView.tsx

@@ -1,16 +1,16 @@
 import classNames from 'classnames';
 import { colord } from 'colord';
-import BarChart from 'components/charts/BarChart';
-import PieChart from 'components/charts/PieChart';
-import TypeIcon from 'components/common/TypeIcon';
-import { useCountryNames, useLocale, useMessages } from 'components/hooks';
-import { GridRow } from 'components/layout/Grid';
-import ListTable from 'components/metrics/ListTable';
-import MetricCard from 'components/metrics/MetricCard';
-import MetricsBar from 'components/metrics/MetricsBar';
-import { renderDateLabels } from 'lib/charts';
-import { CHART_COLORS } from 'lib/constants';
-import { formatLongCurrency, formatLongNumber } from 'lib/format';
+import BarChart from '@/components/charts/BarChart';
+import PieChart from '@/components/charts/PieChart';
+import TypeIcon from '@/components/common/TypeIcon';
+import { useCountryNames, useLocale, useMessages } from '@/components/hooks';
+import { GridRow } from '@/components/layout/Grid';
+import ListTable from '@/components/metrics/ListTable';
+import MetricCard from '@/components/metrics/MetricCard';
+import MetricsBar from '@/components/metrics/MetricsBar';
+import { renderDateLabels } from '@/lib/charts';
+import { CHART_COLORS } from '@/lib/constants';
+import { formatLongCurrency, formatLongNumber } from '@/lib/format';
 import { useCallback, useContext, useMemo } from 'react';
 import { ReportContext } from '../[reportId]/Report';
 import RevenueTable from './RevenueTable';

src/app/(main)/reports/utm/UTMParameters.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import { Form, FormButtons, SubmitButton } from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
 import BaseParameters from '../[reportId]/BaseParameters';

src/app/(main)/reports/utm/UTMReport.tsx

@@ -5,8 +5,8 @@ import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
 import UTMParameters from './UTMParameters';
 import UTMView from './UTMView';
-import Tag from 'assets/tag.svg';
-import { REPORT_TYPES } from 'lib/constants';
+import Tag from '@/assets/tag.svg';
+import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
   type: REPORT_TYPES.utm,

src/app/(main)/reports/utm/UTMView.tsx

@@ -1,11 +1,11 @@
 import { useContext } from 'react';
 import { firstBy } from 'thenby';
 import { ReportContext } from '../[reportId]/Report';
-import { CHART_COLORS, UTM_PARAMS } from 'lib/constants';
-import PieChart from 'components/charts/PieChart';
-import ListTable from 'components/metrics/ListTable';
+import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
+import PieChart from '@/components/charts/PieChart';
+import ListTable from '@/components/metrics/ListTable';
 import styles from './UTMView.module.css';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 function toArray(data: { [key: string]: number } = {}) {
   return Object.keys(data)

src/app/(main)/settings/SettingsLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { ReactNode } from 'react';
-import { useLogin, useMessages } from 'components/hooks';
-import MenuLayout from 'components/layout/MenuLayout';
+import { useLogin, useMessages } from '@/components/hooks';
+import MenuLayout from '@/components/layout/MenuLayout';
 
 export default function SettingsLayout({ children }: { children: ReactNode }) {
   const { user } = useLogin();

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -1,4 +1,4 @@
-import { useApi, useMessages } from 'components/hooks';
+import { useApi, useMessages } from '@/components/hooks';
 import {
   Button,
   Form,

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -8,10 +8,10 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import { useApi, useMessages, useModified } from 'components/hooks';
+import { useApi, useMessages, useModified } from '@/components/hooks';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
-  const { formatMessage, labels, getMessage } = useMessages();
+  const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation({ mutationFn: (data: any) => post('/teams/join', data) });
   const ref = useRef(null);
@@ -28,7 +28,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error)}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
       <FormRow label={formatMessage(labels.accessCode)}>
         <FormInput name="accessCode" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -1,4 +1,4 @@
-import { useLocale, useLogin, useMessages, useModified } from 'components/hooks';
+import { useLocale, useLogin, useMessages, useModified } from '@/components/hooks';
 import { useRouter } from 'next/navigation';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import TeamDeleteForm from './TeamLeaveForm';

src/app/(main)/settings/teams/TeamLeaveForm.tsx

@@ -1,5 +1,5 @@
-import { useApi, useMessages, useModified } from 'components/hooks';
-import ConfirmationForm from 'components/common/ConfirmationForm';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+import ConfirmationForm from '@/components/common/ConfirmationForm';
 
 export function TeamLeaveForm({
   teamId,
@@ -14,7 +14,7 @@ export function TeamLeaveForm({
   onSave: () => void;
   onClose: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
     mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
@@ -34,9 +34,7 @@ export function TeamLeaveForm({
   return (
     <ConfirmationForm
       buttonLabel={formatMessage(labels.leave)}
-      message={
-        <FormattedMessage {...messages.confirmLeave} values={{ target: <b>{teamName}</b> }} />
-      }
+      message={formatMessage(messages.confirmLeave, { target: <b>{teamName}</b> })}
       onConfirm={handleConfirm}
       onClose={onClose}
       isLoading={isPending}

src/app/(main)/settings/teams/TeamsAddButton.tsx

@@ -1,8 +1,8 @@
 import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
-import Icons from 'components/icons';
-import { useMessages, useModified } from 'components/hooks';
+import Icons from '@/components/icons';
+import { useMessages, useModified } from '@/components/hooks';
 import TeamAddForm from './TeamAddForm';
-import { messages } from 'components/messages';
+import { messages } from '@/components/messages';
 
 export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
   const { formatMessage, labels } = useMessages();

src/app/(main)/settings/teams/TeamsDataTable.tsx

@@ -1,6 +1,6 @@
-import DataTable from 'components/common/DataTable';
-import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
-import { useLogin, useTeams } from 'components/hooks';
+import DataTable from '@/components/common/DataTable';
+import TeamsTable from '@/app/(main)/settings/teams/TeamsTable';
+import { useLogin, useTeams } from '@/components/hooks';
 import { ReactNode } from 'react';
 
 export function TeamsDataTable({

src/app/(main)/settings/teams/TeamsHeader.tsx

@@ -1,7 +1,7 @@
 import { Flexbox } from 'react-basics';
-import PageHeader from 'components/layout/PageHeader';
-import { ROLES } from 'lib/constants';
-import { useLogin, useMessages } from 'components/hooks';
+import PageHeader from '@/components/layout/PageHeader';
+import { ROLES } from '@/lib/constants';
+import { useLogin, useMessages } from '@/components/hooks';
 import TeamsJoinButton from './TeamsJoinButton';
 import TeamsAddButton from './TeamsAddButton';
 

src/app/(main)/settings/teams/TeamsJoinButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
-import Icons from 'components/icons';
-import { useMessages, useModified } from 'components/hooks';
+import Icons from '@/components/icons';
+import { useMessages, useModified } from '@/components/hooks';
 import TeamJoinForm from './TeamJoinForm';
 
 export function TeamsJoinButton() {

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,8 +1,8 @@
 import { GridColumn, GridTable, Icon, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import Icons from 'components/icons';
-import { ROLES } from 'lib/constants';
-import LinkButton from 'components/common/LinkButton';
+import { useMessages } from '@/components/hooks';
+import Icons from '@/components/icons';
+import { ROLES } from '@/lib/constants';
+import LinkButton from '@/components/common/LinkButton';
 
 export function TeamsTable({
   data = [],

src/app/(main)/settings/users/UserAddButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Text, Modal, Icons, ModalTrigger, useToasts } from 'react-basics';
 import UserAddForm from './UserAddForm';
-import { useMessages, useModified } from 'components/hooks';
+import { useMessages, useModified } from '@/components/hooks';
 
 export function UserAddButton({ onSave }: { onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/settings/users/UserAddForm.tsx

@@ -10,8 +10,8 @@ import {
   SubmitButton,
   Button,
 } from 'react-basics';
-import { useApi, useMessages } from 'components/hooks';
-import { ROLES } from 'lib/constants';
+import { useApi, useMessages } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 
 export function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();

src/app/(main)/settings/users/UserDeleteButton.tsx

@@ -1,5 +1,5 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { useMessages, useLogin } from 'components/hooks';
+import { useMessages, useLogin } from '@/components/hooks';
 import UserDeleteForm from './UserDeleteForm';
 
 export function UserDeleteButton({

src/app/(main)/settings/users/UserDeleteForm.tsx

@@ -1,8 +1,8 @@
-import { useApi, useMessages, useModified } from 'components/hooks';
-import ConfirmationForm from 'components/common/ConfirmationForm';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+import ConfirmationForm from '@/components/common/ConfirmationForm';
 
 export function UserDeleteForm({ userId, username, onSave, onClose }) {
-  const { FormattedMessage, messages, labels, formatMessage } = useMessages();
+  const { messages, labels, formatMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
   const { touch } = useModified();
@@ -19,9 +19,7 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
 
   return (
     <ConfirmationForm
-      message={
-        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
-      }
+      message={formatMessage(messages.confirmDelete, { target: <b>{username}</b> })}
       onConfirm={handleConfirm}
       onClose={onClose}
       buttonLabel={formatMessage(labels.delete)}

src/app/(main)/settings/users/UsersDataTable.tsx

@@ -1,5 +1,5 @@
-import DataTable from 'components/common/DataTable';
-import { useUsers } from 'components/hooks';
+import DataTable from '@/components/common/DataTable';
+import { useUsers } from '@/components/hooks';
 import UsersTable from './UsersTable';
 import { ReactNode } from 'react';
 

src/app/(main)/settings/users/UsersHeader.tsx

@@ -1,5 +1,5 @@
-import PageHeader from 'components/layout/PageHeader';
-import { useMessages } from 'components/hooks';
+import PageHeader from '@/components/layout/PageHeader';
+import { useMessages } from '@/components/hooks';
 import UserAddButton from './UserAddButton';
 
 export function UsersHeader({ onAdd }: { onAdd?: () => void }) {

src/app/(main)/settings/users/UsersTable.tsx

@@ -1,9 +1,9 @@
 import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
 import { formatDistance } from 'date-fns';
-import { ROLES } from 'lib/constants';
-import { useMessages, useLocale } from 'components/hooks';
+import { ROLES } from '@/lib/constants';
+import { useMessages, useLocale } from '@/components/hooks';
 import UserDeleteButton from './UserDeleteButton';
-import LinkButton from 'components/common/LinkButton';
+import LinkButton from '@/components/common/LinkButton';
 
 export function UsersTable({
   data = [],

src/app/(main)/settings/users/[userId]/UserEditForm.tsx

@@ -9,8 +9,8 @@ import {
   SubmitButton,
   PasswordField,
 } from 'react-basics';
-import { useApi, useLogin, useMessages } from 'components/hooks';
-import { ROLES } from 'lib/constants';
+import { useApi, useLogin, useMessages } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { useContext, useRef } from 'react';
 import { UserContext } from './UserProvider';
 

src/app/(main)/settings/users/[userId]/UserProvider.tsx

@@ -1,5 +1,5 @@
 import { createContext, ReactNode, useEffect } from 'react';
-import { useModified, useUser } from 'components/hooks';
+import { useModified, useUser } from '@/components/hooks';
 import { Loading } from 'react-basics';
 
 export const UserContext = createContext(null);

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -1,12 +1,12 @@
 import { Key, useContext, useState } from 'react';
 import { Item, Tabs, useToasts } from 'react-basics';
-import Icons from 'components/icons';
+import Icons from '@/components/icons';
 import UserEditForm from './UserEditForm';
-import PageHeader from 'components/layout/PageHeader';
-import { useMessages } from 'components/hooks';
+import PageHeader from '@/components/layout/PageHeader';
+import { useMessages } from '@/components/hooks';
 import UserWebsites from './UserWebsites';
 import { UserContext } from './UserProvider';
-import Breadcrumb from 'components/common/Breadcrumb';
+import Breadcrumb from '@/components/common/Breadcrumb';
 
 export function UserSettings({ userId }: { userId: string }) {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/settings/users/[userId]/UserWebsites.tsx

@@ -1,6 +1,6 @@
-import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import DataTable from 'components/common/DataTable';
-import { useWebsites } from 'components/hooks';
+import WebsitesTable from '@/app/(main)/settings/websites/WebsitesTable';
+import DataTable from '@/components/common/DataTable';
+import { useWebsites } from '@/components/hooks';
 
 export function UserWebsites({ userId }) {
   const queryResult = useWebsites({ userId });

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -1,4 +1,4 @@
-import { useMessages, useModified } from 'components/hooks';
+import { useMessages, useModified } from '@/components/hooks';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import WebsiteAddForm from './WebsiteAddForm';
 

src/app/(main)/settings/websites/WebsiteAddForm.tsx

@@ -7,9 +7,9 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { DOMAIN_REGEX } from 'lib/constants';
-import { useMessages } from 'components/hooks';
+import { useApi } from '@/components/hooks';
+import { DOMAIN_REGEX } from '@/lib/constants';
+import { useMessages } from '@/components/hooks';
 
 export function WebsiteAddForm({
   teamId,

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import DataTable from 'components/common/DataTable';
-import { useWebsites } from 'components/hooks';
+import WebsitesTable from '@/app/(main)/settings/websites/WebsitesTable';
+import DataTable from '@/components/common/DataTable';
+import { useWebsites } from '@/components/hooks';
 
 export function WebsitesDataTable({
   teamId,

src/app/(main)/settings/websites/WebsitesHeader.tsx

@@ -1,5 +1,5 @@
-import { useMessages } from 'components/hooks';
-import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from '@/components/hooks';
+import PageHeader from '@/components/layout/PageHeader';
 import WebsiteAddButton from './WebsiteAddButton';
 
 export interface WebsitesHeaderProps {

src/app/(main)/settings/websites/WebsitesSettingsPage.tsx

@@ -1,8 +1,8 @@
 'use client';
-import { useLogin } from 'components/hooks';
+import { useLogin } from '@/components/hooks';
 import WebsitesDataTable from './WebsitesDataTable';
 import WebsitesHeader from './WebsitesHeader';
-import { ROLES } from 'lib/constants';
+import { ROLES } from '@/lib/constants';
 
 export default function WebsitesSettingsPage({ teamId }: { teamId: string }) {
   const { user } = useLogin();

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
-import { useMessages, useTeamUrl } from 'components/hooks';
-import LinkButton from 'components/common/LinkButton';
+import { useMessages, useTeamUrl } from '@/components/hooks';
+import LinkButton from '@/components/common/LinkButton';
 
 export interface WebsitesTableProps {
   data: any[];