Merge branch 'master' into master

db/clickhouse/migrations/02_add_visit_id.sql

@@ -0,0 +1,90 @@
+CREATE TABLE umami.website_event_join
+(
+    session_id UUID,
+    visit_id UUID,
+    created_at DateTime('UTC')
+)
+    engine = MergeTree
+        ORDER BY (session_id, created_at)
+        SETTINGS index_granularity = 8192;
+
+INSERT INTO umami.website_event_join
+SELECT DISTINCT
+    s.session_id,
+    generateUUIDv4() visit_id,
+    s.created_at
+FROM (SELECT DISTINCT session_id,
+        date_trunc('hour', created_at) created_at
+    FROM website_event) s;
+
+-- create new table
+CREATE TABLE umami.website_event_new
+(
+    website_id UUID,
+    session_id UUID,
+    visit_id UUID,
+    event_id UUID,
+    hostname LowCardinality(String),
+    browser LowCardinality(String),
+    os LowCardinality(String),
+    device LowCardinality(String),
+    screen LowCardinality(String),
+    language LowCardinality(String),
+    country LowCardinality(String),
+    subdivision1 LowCardinality(String),
+    subdivision2 LowCardinality(String),
+    city String,
+    url_path String,
+    url_query String,
+    referrer_path String,
+    referrer_query String,
+    referrer_domain String,
+    page_title String,
+    event_type UInt32,
+    event_name String,
+    created_at DateTime('UTC'),
+    job_id UUID
+)
+    engine = MergeTree
+        ORDER BY (website_id, session_id, created_at)
+        SETTINGS index_granularity = 8192;
+
+INSERT INTO umami.website_event_new
+SELECT we.website_id,
+    we.session_id,
+    j.visit_id,
+    we.event_id,
+    we.hostname,
+    we.browser,
+    we.os,
+    we.device,
+    we.screen,
+    we.language,
+    we.country,
+    we.subdivision1,
+    we.subdivision2,
+    we.city,
+    we.url_path,
+    we.url_query,
+    we.referrer_path,
+    we.referrer_query,
+    we.referrer_domain,
+    we.page_title,
+    we.event_type,
+    we.event_name,
+    we.created_at,
+    we.job_id
+FROM umami.website_event we
+JOIN umami.website_event_join j
+    ON we.session_id = j.session_id
+        and date_trunc('hour', we.created_at) = j.created_at
+
+RENAME TABLE umami.website_event TO umami.website_event_old;
+RENAME TABLE umami.website_event_new TO umami.website_event;
+
+/*
+
+ DROP TABLE umami.website_event_old
+ DROP TABLE umami.website_event_join
+
+ */

db/clickhouse/schema.sql

@@ -3,6 +3,7 @@ CREATE TABLE umami.website_event
 (
     website_id UUID,
     session_id UUID,
+    visit_id UUID,
     event_id UUID,
     --sessions
     hostname LowCardinality(String),

db/mysql/migrations/05_add_visit_id/migration.sql

@@ -0,0 +1,22 @@
+-- AlterTable
+ALTER TABLE `website_event` ADD COLUMN `visit_id` VARCHAR(36) NULL;
+
+UPDATE `website_event` we
+JOIN (SELECT DISTINCT
+        s.session_id,
+        s.visit_time,
+        BIN_TO_UUID(RANDOM_BYTES(16) & 0xffffffffffff0fff3fffffffffffffff | 0x00000000000040008000000000000000) uuid
+    FROM (SELECT DISTINCT session_id,
+            DATE_FORMAT(created_at, '%Y-%m-%d %H:00:00') visit_time
+        FROM `website_event`) s) a
+    ON we.session_id = a.session_id and DATE_FORMAT(we.created_at, '%Y-%m-%d %H:00:00') = a.visit_time
+SET we.visit_id = a.uuid
+WHERE we.visit_id IS NULL;
+
+ALTER TABLE `website_event` MODIFY `visit_id` VARCHAR(36) NOT NULL;
+
+-- CreateIndex
+CREATE INDEX `website_event_visit_id_idx` ON `website_event`(`visit_id`);
+
+-- CreateIndex
+CREATE INDEX `website_event_website_id_visit_id_created_at_idx` ON `website_event`(`website_id`, `visit_id`, `created_at`);

db/mysql/schema.prisma

@@ -92,6 +92,7 @@ model WebsiteEvent {
   id             String    @id() @map("event_id") @db.VarChar(36)
   websiteId      String    @map("website_id") @db.VarChar(36)
   sessionId      String    @map("session_id") @db.VarChar(36)
+  visitId        String    @map("visit_id") @db.VarChar(36)
   createdAt      DateTime? @default(now()) @map("created_at") @db.Timestamp(0)
   urlPath        String    @map("url_path") @db.VarChar(500)
   urlQuery       String?   @map("url_query") @db.VarChar(500)
@@ -107,6 +108,7 @@ model WebsiteEvent {
 
   @@index([createdAt])
   @@index([sessionId])
+  @@index([visitId])
   @@index([websiteId])
   @@index([websiteId, createdAt])
   @@index([websiteId, createdAt, urlPath])
@@ -115,6 +117,7 @@ model WebsiteEvent {
   @@index([websiteId, createdAt, pageTitle])
   @@index([websiteId, createdAt, eventName])
   @@index([websiteId, sessionId, createdAt])
+  @@index([websiteId, visitId, createdAt])
   @@map("website_event")
 }
 

db/postgresql/migrations/05_add_visit_id/migration.sql

@@ -0,0 +1,22 @@
+-- AlterTable
+ALTER TABLE "website_event" ADD COLUMN "visit_id" UUID NULL;
+
+UPDATE "website_event" we
+SET visit_id = a.uuid
+FROM (SELECT DISTINCT
+        s.session_id,
+        s.visit_time,
+        gen_random_uuid() uuid
+    FROM (SELECT DISTINCT session_id,
+            date_trunc('hour', created_at) visit_time
+        FROM "website_event") s) a
+WHERE we.session_id = a.session_id 
+    and date_trunc('hour', we.created_at) = a.visit_time;
+
+ALTER TABLE "website_event" ALTER COLUMN "visit_id" SET NOT NULL;
+
+-- CreateIndex
+CREATE INDEX "website_event_visit_id_idx" ON "website_event"("visit_id");
+
+-- CreateIndex
+CREATE INDEX "website_event_website_id_visit_id_created_at_idx" ON "website_event"("website_id", "visit_id", "created_at");

db/postgresql/schema.prisma

@@ -92,6 +92,7 @@ model WebsiteEvent {
   id             String    @id() @map("event_id") @db.Uuid
   websiteId      String    @map("website_id") @db.Uuid
   sessionId      String    @map("session_id") @db.Uuid
+  visitId        String    @map("visit_id") @db.Uuid
   createdAt      DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
   urlPath        String    @map("url_path") @db.VarChar(500)
   urlQuery       String?   @map("url_query") @db.VarChar(500)
@@ -107,6 +108,7 @@ model WebsiteEvent {
 
   @@index([createdAt])
   @@index([sessionId])
+  @@index([visitId])
   @@index([websiteId])
   @@index([websiteId, createdAt])
   @@index([websiteId, createdAt, urlPath])
@@ -115,6 +117,7 @@ model WebsiteEvent {
   @@index([websiteId, createdAt, pageTitle])
   @@index([websiteId, createdAt, eventName])
   @@index([websiteId, sessionId, createdAt])
+  @@index([websiteId, visitId, createdAt])
   @@map("website_event")
 }
 

next.config.js

@@ -14,6 +14,7 @@ const frameAncestors = process.env.ALLOWED_FRAME_URLS || '';
 const disableLogin = process.env.DISABLE_LOGIN || '';
 const disableUI = process.env.DISABLE_UI || '';
 const hostURL = process.env.HOST_URL || '';
+const privateMode = process.env.PRIVATE_MODE || '';
 
 const contentSecurityPolicy = [
   `default-src 'self'`,
@@ -120,6 +121,7 @@ const config = {
     disableLogin,
     disableUI,
     hostURL,
+    privateMode,
   },
   basePath,
   output: 'standalone',

package.json

@@ -66,7 +66,7 @@
   "dependencies": {
     "@clickhouse/client": "^0.2.2",
     "@fontsource/inter": "^4.5.15",
-    "@prisma/client": "5.10.2",
+    "@prisma/client": "5.11.0",
     "@prisma/extension-read-replicas": "^0.3.0",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.28.6",
@@ -98,11 +98,11 @@
     "maxmind": "^4.3.6",
     "md5": "^2.3.0",
     "moment-timezone": "^0.5.35",
-    "next": "14.1.3",
+    "next": "14.1.4",
     "next-basics": "^0.39.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
-    "prisma": "5.10.2",
+    "prisma": "5.11.0",
     "react": "^18.2.0",
     "react-basics": "^0.123.0",
     "react-beautiful-dnd": "^13.1.0",
@@ -115,7 +115,6 @@
     "request-ip": "^3.3.0",
     "semver": "^7.5.4",
     "thenby": "^1.3.4",
-    "timezone-support": "^2.0.2",
     "uuid": "^9.0.0",
     "yup": "^0.32.11",
     "zustand": "^4.3.8"

public/intl/messages/am-ET.json

@@ -41,7 +41,7 @@
       "value": "Add website"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/ar-SA.json

@@ -41,7 +41,7 @@
       "value": "إضافة موقع"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "مدير"

public/intl/messages/be-BY.json

@@ -41,7 +41,7 @@
       "value": "Дадаць сайт"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Адміністратар"

public/intl/messages/bn-BD.json

@@ -41,7 +41,7 @@
       "value": "ওয়েবসাইট যুক্ত করুন"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "অ্যাডমিন"

public/intl/messages/ca-ES.json

@@ -41,7 +41,7 @@
       "value": "Afegeix lloc web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrador"

public/intl/messages/cs-CZ.json

@@ -41,7 +41,7 @@
       "value": "Přidat web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrátor"

public/intl/messages/da-DK.json

@@ -41,7 +41,7 @@
       "value": "Tilføj hjemmeside"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/de-CH.json

@@ -41,7 +41,7 @@
       "value": "Websiite hinzuefüege"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/de-DE.json

@@ -41,7 +41,7 @@
       "value": "Website hinzufügen"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/el-GR.json

@@ -41,7 +41,7 @@
       "value": "Προσθήκη ιστότοπου"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Διαχειριστής"

public/intl/messages/en-GB.json

@@ -41,7 +41,7 @@
       "value": "Add website"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/en-US.json

@@ -41,7 +41,7 @@
       "value": "Add website"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/es-ES.json

@@ -41,7 +41,7 @@
       "value": "Nuevo sitio web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrador"

public/intl/messages/fa-IR.json

@@ -41,7 +41,7 @@
       "value": "افزودن وب‌سایت"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "مدیر"

public/intl/messages/fi-FI.json

@@ -41,7 +41,7 @@
       "value": "Lisää verkkosivu"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Järjestelmänvalvoja"

public/intl/messages/fo-FO.json

@@ -41,7 +41,7 @@
       "value": "Legg heimasíðu afturat"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Fyrisitari"

public/intl/messages/fr-FR.json

@@ -41,7 +41,7 @@
       "value": "Ajouter un site"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrateur"

public/intl/messages/ga-ES.json

@@ -41,7 +41,7 @@
       "value": "Engadir sitio web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administradora"

public/intl/messages/he-IL.json

@@ -41,7 +41,7 @@
       "value": "הוספת אתר"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "מנהל"

public/intl/messages/hi-IN.json

@@ -41,7 +41,7 @@
       "value": "वेबसाइट"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "प्रशासक"

public/intl/messages/hr-HR.json

@@ -41,7 +41,7 @@
       "value": "Dodaj web stranicu"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/hu-HU.json

@@ -41,7 +41,7 @@
       "value": "Weboldal hozzáadása"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Adminisztrátor"

public/intl/messages/id-ID.json

@@ -41,7 +41,7 @@
       "value": "Tambah situs web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Pengelola"

public/intl/messages/it-IT.json

@@ -41,7 +41,7 @@
       "value": "Aggiungi sito"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Amministratore"

public/intl/messages/ja-JP.json

@@ -41,7 +41,7 @@
       "value": "Webサイトの追加"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "管理者"

public/intl/messages/km-KH.json

@@ -41,7 +41,7 @@
       "value": "បន្ថែមគេហទំព័រ"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "អ្នកគ្រប់គ្រង"

public/intl/messages/ko-KR.json

@@ -41,7 +41,7 @@
       "value": "웹사이트 추가"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "관리자"

public/intl/messages/lt-LT.json

@@ -41,7 +41,7 @@
       "value": "Pridėti svetainę"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administratorius"

public/intl/messages/mn-MN.json

@@ -41,7 +41,7 @@
       "value": "Веб нэмэх"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Админ"

public/intl/messages/ms-MY.json

@@ -41,7 +41,7 @@
       "value": "Tambah laman web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Pentadbir"

public/intl/messages/my-MM.json

@@ -41,7 +41,7 @@
       "value": "ဝက်ဘ်ဆိုဒ်ထည့်မည်"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "အက်ဒမင်"

public/intl/messages/nb-NO.json

@@ -41,7 +41,7 @@
       "value": "Legg til nettsted"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/nl-NL.json

@@ -41,7 +41,7 @@
       "value": "Website koppelen"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Beheerder"

public/intl/messages/pl-PL.json

@@ -41,7 +41,7 @@
       "value": "Dodaj witrynę"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/pt-BR.json

@@ -41,7 +41,7 @@
       "value": "Adicionar site"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrador"

public/intl/messages/pt-PT.json

@@ -41,7 +41,7 @@
       "value": "Adicionar website"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrador"

public/intl/messages/ro-RO.json

@@ -41,7 +41,7 @@
       "value": "Adăugare site web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/ru-RU.json

@@ -41,7 +41,7 @@
       "value": "Добавить сайт"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Администратор"

public/intl/messages/si-LK.json

@@ -41,7 +41,7 @@
       "value": "වෙබ් අඩවිය එක් කරන්න"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/sk-SK.json

@@ -41,7 +41,7 @@
       "value": "Pridať web"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrátor"

public/intl/messages/sl-SI.json

@@ -41,7 +41,7 @@
       "value": "Dodaj spletno mesto"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administrator"

public/intl/messages/sv-SE.json

@@ -41,7 +41,7 @@
       "value": "Lägg till webbplats"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Administratör"

public/intl/messages/ta-IN.json

@@ -41,7 +41,7 @@
       "value": "வலைத்தளத்தைச் சேர்க்க"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "நிர்வாகியைச் சேர்க்க"

public/intl/messages/th-TH.json

@@ -41,7 +41,7 @@
       "value": "เพิ่มเว็บไซต์"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "ผู้ดูแลระบบ"

public/intl/messages/tr-TR.json

@@ -41,7 +41,7 @@
       "value": "Web sitesi ekle"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Yönetici"

public/intl/messages/uk-UA.json

@@ -41,7 +41,7 @@
       "value": "Додати сайт"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Адміністратор"

public/intl/messages/ur-PK.json

@@ -41,7 +41,7 @@
       "value": "ویب سائٹ کا اضافہ کریں"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "منتظم"

public/intl/messages/vi-VN.json

@@ -41,7 +41,7 @@
       "value": "Thêm website"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "Quản trị"

public/intl/messages/zh-CN.json

@@ -41,7 +41,7 @@
       "value": "添加网站"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "管理员"

public/intl/messages/zh-TW.json

@@ -41,7 +41,7 @@
       "value": "新增網站"
     }
   ],
-  "label.administrator": [
+  "label.admin": [
     {
       "type": 0,
       "value": "管理員"

src/app/(main)/NavBar.tsx

@@ -14,7 +14,7 @@ import styles from './NavBar.module.css';
 export function NavBar() {
   const { formatMessage, labels } = useMessages();
   const { pathname, router } = useNavigation();
-  const { renderTeamUrl } = useTeamUrl();
+  const { teamId, renderTeamUrl } = useTeamUrl();
 
   const cloudMode = !!process.env.cloudMode;
 
@@ -34,25 +34,38 @@ export function NavBar() {
       label: formatMessage(labels.settings),
       url: renderTeamUrl('/settings'),
       children: [
+        ...(teamId
+          ? [
+              {
+                label: formatMessage(labels.team),
+                url: renderTeamUrl('/settings/team'),
+              },
+            ]
+          : []),
         {
           label: formatMessage(labels.websites),
-          url: '/settings/websites',
+          url: renderTeamUrl('/settings/websites'),
-        },
-        {
-          label: formatMessage(labels.teams),
-          url: '/settings/teams',
-        },
-        {
-          label: formatMessage(labels.users),
-          url: '/settings/users',
-        },
-        {
-          label: formatMessage(labels.profile),
-          url: '/profile',
         },
+        ...(!teamId
+          ? [
+              {
+                label: formatMessage(labels.teams),
+                url: renderTeamUrl('/settings/teams'),
+              },
+              {
+                label: formatMessage(labels.users),
+                url: '/settings/users',
+              },
+            ]
+          : [
+              {
+                label: formatMessage(labels.members),
+                url: renderTeamUrl('/settings/members'),
+              },
+            ]),
       ],
     },
-    cloudMode && {
+    {
       label: formatMessage(labels.profile),
       url: '/profile',
     },
@@ -94,6 +107,7 @@ export function NavBar() {
         <ProfileButton />
       </div>
       <div className={styles.mobile}>
+        <TeamsButton onChange={handleTeamChange} showText={false} />
         <HamburgerButton menuItems={menuItems} />
       </div>
     </div>

src/app/(main)/UpdateNotice.module.css

@@ -1,14 +1,17 @@
 .notice {
   position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
   max-width: 800px;
   gap: 20px;
-  margin: 80px auto;
+  margin: 60px auto;
   align-self: center;
   background: var(--base50);
   padding: 20px;
   border: 1px solid var(--base300);
   border-radius: var(--border-radius);
-  z-index: var(--z-index-popup);
+  z-index: 9999;
   box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
 }
 

src/app/(main)/UpdateNotice.tsx

@@ -4,9 +4,9 @@ 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 styles from './UpdateNotice.module.css';
 import { useMessages } from 'components/hooks';
 import { usePathname } from 'next/navigation';
+import styles from './UpdateNotice.module.css';
 
 export function UpdateNotice({ user, config }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -16,8 +16,9 @@ export function UpdateNotice({ user, config }) {
   const allowUpdate =
     user?.isAdmin &&
     !config?.updatesDisabled &&
-    !config?.cloudMode &&
     !pathname.includes('/share/') &&
+    !process.env.cloudMode &&
+    !process.env.privateMode &&
     !dismissed;
 
   const updateCheck = useCallback(() => {

src/app/(main)/profile/DateRangeSetting.module.css

@@ -0,0 +1,3 @@
+.field {
+  width: 200px;
+}

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

@@ -3,6 +3,7 @@ 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 styles from './DateRangeSetting.module.css';
 
 export function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
@@ -13,8 +14,9 @@ export function DateRangeSetting() {
   const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
 
   return (
-    <Flexbox gap={10}>
+    <Flexbox gap={10} width={300}>
       <DateFilter
+        className={styles.field}
         value={value}
         startDate={dateRange.startDate}
         endDate={dateRange.endDate}

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

@@ -23,7 +23,7 @@ export function ProfileSettings() {
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.administrator);
+      return formatMessage(labels.admin);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);

src/app/(main)/profile/TimezoneSetting.module.css

@@ -1,3 +1,7 @@
+.dropdown {
+  width: 200px;
+}
+
 div.menu {
   max-height: 300px;
   width: 300px;

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

@@ -1,26 +1,29 @@
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
-import { listTimeZones } from 'timezone-support';
+import moment from 'moment-timezone';
 import { useTimezone, useMessages } from 'components/hooks';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';
 
+const timezones = moment.tz.names();
+
 export function TimezoneSetting() {
   const [search, setSearch] = useState('');
   const { formatMessage, labels } = useMessages();
-  const [timezone, saveTimezone] = useTimezone();
+  const { timezone, saveTimezone } = useTimezone();
   const options = search
-    ? listTimeZones().filter(n => n.toLowerCase().includes(search.toLowerCase()))
+    ? timezones.filter(n => n.toLowerCase().includes(search.toLowerCase()))
-    : listTimeZones();
+    : timezones;
 
   const handleReset = () => saveTimezone(getTimezone());
 
   return (
     <Flexbox gap={10}>
       <Dropdown
+        className={styles.dropdown}
         items={options}
         value={timezone}
-        onChange={saveTimezone}
+        onChange={(value: any) => saveTimezone(value)}
         menuProps={{ className: styles.menu }}
         allowSearch={true}
         onSearch={setSearch}

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

@@ -1,38 +0,0 @@
-.menu {
-  width: 360px;
-  max-height: 300px;
-  overflow: auto;
-}
-
-.item {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border-radius: var(--border-radius);
-}
-
-.item:hover {
-  background: var(--base75);
-}
-
-.type {
-  color: var(--font-color300);
-}
-
-.selected {
-  font-weight: bold;
-}
-
-.popup {
-  display: flex;
-}
-
-.filter {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.dropdown {
-  min-width: 60px;
-}

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

@@ -3,9 +3,6 @@ import { createPortal } from 'react-dom';
 import { REPORT_PARAMETERS } from 'lib/constants';
 import PopupForm from './PopupForm';
 import FieldSelectForm from './FieldSelectForm';
-import FieldAggregateForm from './FieldAggregateForm';
-import FieldFilterForm from './FieldFilterForm';
-import styles from './FieldAddForm.module.css';
 
 export function FieldAddForm({
   fields = [],
@@ -18,7 +15,11 @@ export function FieldAddForm({
   onAdd: (group: string, value: string) => void;
   onClose: () => void;
 }) {
-  const [selected, setSelected] = useState<{ name: string; type: string; value: string }>();
+  const [selected, setSelected] = useState<{
+    name: string;
+    type: string;
+    value: string;
+  }>();
 
   const handleSelect = (value: any) => {
     const { type } = value;
@@ -38,14 +39,8 @@ export function FieldAddForm({
   };
 
   return createPortal(
-    <PopupForm className={styles.popup}>
+    <PopupForm>
       {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
-      {selected && group === REPORT_PARAMETERS.fields && (
-        <FieldAggregateForm {...selected} onSelect={handleSave} />
-      )}
-      {selected && group === REPORT_PARAMETERS.filters && (
-        <FieldFilterForm {...selected} onSelect={handleSave} />
-      )}
     </PopupForm>,
     document.body,
   );

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

@@ -0,0 +1,36 @@
+.menu {
+  position: absolute;
+  max-width: 300px;
+  max-height: 210px;
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dropdown {
+  min-width: 200px;
+}
+
+.text {
+  min-width: 200px;
+}
+
+.selected {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  white-space: nowrap;
+  min-width: 200px;
+  font-weight: 900;
+  background: var(--base100);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+}
+
+.search {
+  position: relative;
+}

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

@@ -0,0 +1,224 @@
+import { useState, useMemo } from 'react';
+import {
+  Form,
+  FormRow,
+  Item,
+  Flexbox,
+  Dropdown,
+  Button,
+  SearchField,
+  TextField,
+  Text,
+  Icon,
+  Icons,
+  Menu,
+  Loading,
+} from 'react-basics';
+import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
+import { OPERATORS } from 'lib/constants';
+import { isEqualsOperator } from 'lib/params';
+import styles from './FieldFilterEditForm.module.css';
+
+export interface FieldFilterFormProps {
+  websiteId?: string;
+  name: string;
+  label?: string;
+  type: string;
+  startDate: Date;
+  endDate: Date;
+  operator?: string;
+  defaultValue?: string;
+  onChange?: (filter: { name: string; type: string; operator: string; value: string }) => void;
+  allowFilterSelect?: boolean;
+  isNew?: boolean;
+}
+
+export default function FieldFilterEditForm({
+  websiteId,
+  name,
+  label,
+  type,
+  startDate,
+  endDate,
+  operator: defaultOperator = 'eq',
+  defaultValue = '',
+  onChange,
+  allowFilterSelect = true,
+  isNew,
+}: FieldFilterFormProps) {
+  const { formatMessage, labels } = useMessages();
+  const [operator, setOperator] = useState(defaultOperator);
+  const [value, setValue] = useState(defaultValue);
+  const [showMenu, setShowMenu] = useState(false);
+  const isEquals = isEqualsOperator(operator);
+  const [search, setSearch] = useState('');
+  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 = [],
+    isLoading,
+    refetch,
+  } = useWebsiteValues({
+    websiteId,
+    type: name,
+    startDate,
+    endDate,
+    search,
+  });
+
+  const formattedValues = useMemo(() => {
+    if (!values) {
+      return {};
+    }
+    const formatted = {};
+    const format = (val: string) => {
+      formatted[val] = formatValue(val, name);
+      return formatted[val];
+    };
+
+    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]);
+
+  const filteredValues = useMemo(() => {
+    return value
+      ? values.filter((n: string | number) =>
+          formattedValues[n].toLowerCase().includes(value.toLowerCase()),
+        )
+      : values;
+  }, [value, formattedValues]);
+
+  const renderFilterValue = (value: any) => {
+    return filters.find((filter: { value: any }) => filter.value === value)?.label;
+  };
+
+  const handleAdd = () => {
+    onChange({ name, type, operator, value: isEquals ? selected : value });
+  };
+
+  const handleMenuSelect = (value: string) => {
+    setSelected(value);
+    setShowMenu(false);
+  };
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+  };
+
+  const handleReset = () => {
+    setSelected('');
+    setValue('');
+    setSearch('');
+    refetch();
+  };
+
+  const handleOperatorChange = (value: any) => {
+    setOperator(value);
+
+    if ([OPERATORS.equals, OPERATORS.notEquals].includes(value)) {
+      setValue('');
+    } else {
+      setSelected('');
+    }
+  };
+
+  const handleBlur = () => {
+    window.setTimeout(() => setShowMenu(false), 500);
+  };
+
+  return (
+    <Form>
+      <FormRow label={label} className={styles.filter}>
+        <Flexbox gap={10}>
+          {allowFilterSelect && (
+            <Dropdown
+              className={styles.dropdown}
+              items={filters.filter(f => f.type === type)}
+              value={operator}
+              renderValue={renderFilterValue}
+              onChange={handleOperatorChange}
+            >
+              {({ value, label }) => {
+                return <Item key={value}>{label}</Item>;
+              }}
+            </Dropdown>
+          )}
+          {selected && isEquals && (
+            <div className={styles.selected} onClick={handleReset}>
+              <Text>{formatValue(selected, name)}</Text>
+              <Icon>
+                <Icons.Close />
+              </Icon>
+            </div>
+          )}
+          {!selected && isEquals && (
+            <div className={styles.search}>
+              <SearchField
+                className={styles.text}
+                value={value}
+                placeholder={formatMessage(labels.enter)}
+                onChange={e => setValue(e.target.value)}
+                onSearch={handleSearch}
+                delay={500}
+                onFocus={() => setShowMenu(true)}
+                onBlur={handleBlur}
+              />
+              {showMenu && (
+                <ResultsMenu
+                  values={filteredValues}
+                  type={name}
+                  isLoading={isLoading}
+                  onSelect={handleMenuSelect}
+                />
+              )}
+            </div>
+          )}
+          {!selected && !isEquals && (
+            <TextField
+              className={styles.text}
+              value={value}
+              onChange={e => setValue(e.target.value)}
+            />
+          )}
+        </Flexbox>
+        <Button variant="primary" onClick={handleAdd} disabled={isDisabled}>
+          {formatMessage(isNew ? labels.add : labels.update)}
+        </Button>
+      </FormRow>
+    </Form>
+  );
+}
+
+const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
+  const { formatValue } = useFormat();
+  if (isLoading) {
+    return (
+      <Menu className={styles.menu} variant="popup">
+        <Item>
+          <Loading icon="dots" position="center" />
+        </Item>
+      </Menu>
+    );
+  }
+
+  if (!values?.length) {
+    return null;
+  }
+
+  return (
+    <Menu className={styles.menu} variant="popup" onSelect={onSelect}>
+      {values?.map((value: any) => {
+        return <Item key={value}>{formatValue(value, type)}</Item>;
+      })}
+    </Menu>
+  );
+};

src/app/(main)/reports/[reportId]/FieldFilterForm.module.css

@@ -1,24 +0,0 @@
-.popup {
-  display: flex;
-  max-width: 300px;
-  max-height: 210px;
-  overflow-x: hidden;
-}
-
-.popup > div {
-  overflow-y: auto;
-}
-
-.filter {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.dropdown {
-  min-width: 180px;
-}
-
-.text {
-  min-width: 180px;
-}

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

@@ -1,121 +0,0 @@
-import { useState, useMemo } from 'react';
-import {
-  Form,
-  FormRow,
-  Item,
-  Flexbox,
-  Dropdown,
-  Button,
-  TextField,
-  Menu,
-  Popup,
-  PopupTrigger,
-} from 'react-basics';
-import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
-import { safeDecodeURIComponent } from 'next-basics';
-import { OPERATORS } from 'lib/constants';
-import styles from './FieldFilterForm.module.css';
-
-export interface FieldFilterFormProps {
-  name: string;
-  label?: string;
-  type: string;
-  values?: any[];
-  onSelect?: (key: any) => void;
-  allowFilterSelect?: boolean;
-}
-
-export default function FieldFilterForm({
-  name,
-  label,
-  type,
-  values,
-  onSelect,
-  allowFilterSelect = true,
-}: FieldFilterFormProps) {
-  const { formatMessage, labels } = useMessages();
-  const [filter, setFilter] = useState('eq');
-  const [value, setValue] = useState('');
-  const { getFilters } = useFilters();
-  const { formatValue } = useFormat();
-  const { locale } = useLocale();
-  const filters = getFilters(type);
-
-  const formattedValues = useMemo(() => {
-    const formatted = {};
-    const format = (val: string) => {
-      formatted[val] = formatValue(val, name);
-      return formatted[val];
-    };
-    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]);
-
-  const filteredValues = useMemo(() => {
-    return value ? values.filter(n => n.includes(value)) : values;
-  }, [value, formattedValues]);
-
-  const renderFilterValue = value => {
-    return filters.find(f => f.value === value)?.label;
-  };
-
-  const handleAdd = () => {
-    onSelect({ name, type, filter, value });
-  };
-
-  const handleMenuSelect = value => {
-    setValue(value);
-  };
-
-  const showMenu =
-    [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) &&
-    !(filteredValues.length === 1 && filteredValues[0] === value);
-
-  return (
-    <Form>
-      <FormRow label={label} className={styles.filter}>
-        <Flexbox gap={10}>
-          {allowFilterSelect && (
-            <Dropdown
-              className={styles.dropdown}
-              items={filters}
-              value={filter}
-              renderValue={renderFilterValue}
-              onChange={(key: any) => setFilter(key)}
-            >
-              {({ value, label }) => {
-                return <Item key={value}>{label}</Item>;
-              }}
-            </Dropdown>
-          )}
-          <PopupTrigger>
-            <TextField
-              className={styles.text}
-              value={decodeURIComponent(value)}
-              onChange={e => setValue(e.target.value)}
-            />
-            {showMenu && (
-              <Popup className={styles.popup} alignment="end">
-                {filteredValues.length > 0 && (
-                  <Menu variant="popup" onSelect={handleMenuSelect}>
-                    {filteredValues.map(value => {
-                      return <Item key={value}>{safeDecodeURIComponent(value)}</Item>;
-                    })}
-                  </Menu>
-                )}
-              </Popup>
-            )}
-          </PopupTrigger>
-        </Flexbox>
-        <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
-          {formatMessage(labels.add)}
-        </Button>
-      </FormRow>
-    </Form>
-  );
-}

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

@@ -1,30 +1,18 @@
-import { useMessages } from 'components/hooks';
+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';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from './Report';
 
-export function InsightsFieldParameters() {
+export function FieldParameters() {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
   const { parameters } = report || {};
   const { fields } = parameters || {};
-
+  const { fields: fieldOptions } = useFields();
-  const fieldOptions = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'query', type: 'string', label: formatMessage(labels.query) },
-    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
-    { name: 'os', type: 'string', label: formatMessage(labels.os) },
-    { name: 'device', type: 'string', label: formatMessage(labels.device) },
-    { name: 'country', type: 'string', label: formatMessage(labels.country) },
-    { name: 'region', type: 'string', label: formatMessage(labels.region) },
-    { name: 'city', type: 'string', label: formatMessage(labels.city) },
-  ];
 
   const handleAdd = (value: { name: any }) => {
     if (!fields.find(({ name }) => name === value.name)) {
@@ -72,4 +60,4 @@ export function InsightsFieldParameters() {
   );
 }
 
-export default InsightsFieldParameters;
+export default FieldParameters;

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

@@ -15,7 +15,7 @@
   white-space: nowrap;
 }
 
-.filter {
+.op {
   color: var(--blue900);
   background-color: var(--blue100);
   font-size: 12px;
@@ -34,3 +34,7 @@
   border-radius: 5px;
   white-space: nowrap;
 }
+
+.edit {
+  margin-top: 20px;
+}

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

@@ -0,0 +1,136 @@
+import { useContext } from 'react';
+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 styles from './FilterParameters.module.css';
+
+export function FilterParameters() {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { parameters } = report || {};
+  const { websiteId, filters, dateRange } = parameters || {};
+  const { fields } = useFields();
+
+  const handleAdd = (value: { name: any }) => {
+    if (!filters.find(({ name }) => name === value.name)) {
+      updateReport({ parameters: { filters: filters.concat(value) } });
+    }
+  };
+
+  const handleRemove = (name: string) => {
+    updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
+  };
+
+  const handleChange = (close: () => void, filter: { name: any }) => {
+    updateReport({
+      parameters: {
+        filters: filters.map(f => {
+          if (filter.name === f.name) {
+            return filter;
+          }
+          return f;
+        }),
+      },
+    });
+    close();
+  };
+
+  const AddButton = () => {
+    return (
+      <PopupTrigger>
+        <Button size="sm">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Button>
+        <Popup position="bottom" alignment="start">
+          <PopupForm>
+            <FilterSelectForm
+              websiteId={websiteId}
+              fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
+              onChange={handleAdd}
+            />
+          </PopupForm>
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
+      <ParameterList>
+        {filters.map(
+          ({ name, operator, value }: { name: string; operator: string; value: string }) => {
+            const label = fields.find(f => f.name === name)?.label;
+            const isSearch = isSearchOperator(operator);
+
+            return (
+              <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
+                <FilterParameter
+                  startDate={dateRange.startDate}
+                  endDate={dateRange.endDate}
+                  websiteId={websiteId}
+                  name={name}
+                  label={label}
+                  operator={operator}
+                  value={isSearch ? value : formatValue(value, name)}
+                  onChange={handleChange}
+                />
+              </ParameterList.Item>
+            );
+          },
+        )}
+      </ParameterList>
+    </FormRow>
+  );
+}
+
+const FilterParameter = ({
+  websiteId,
+  name,
+  label,
+  operator,
+  value,
+  type = 'string',
+  startDate,
+  endDate,
+  onChange,
+}) => {
+  const { operatorLabels } = useFilters();
+
+  return (
+    <PopupTrigger>
+      <div className={styles.item}>
+        <div className={styles.label}>{label}</div>
+        <div className={styles.op}>{operatorLabels[operator]}</div>
+        <div className={styles.value}>{value}</div>
+      </div>
+      <Popup className={styles.edit} alignment="start">
+        {(close: any) => (
+          <PopupForm>
+            <FieldFilterEditForm
+              websiteId={websiteId}
+              name={name}
+              label={label}
+              type={type}
+              startDate={startDate}
+              endDate={endDate}
+              operator={operator}
+              defaultValue={value}
+              onChange={onChange.bind(null, close)}
+            />
+          </PopupForm>
+        )}
+      </Popup>
+    </PopupTrigger>
+  );
+};
+
+export default FilterParameters;

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

@@ -1,59 +1,41 @@
 import { useState } from 'react';
-import { Loading } from 'react-basics';
-import { subDays } from 'date-fns';
 import FieldSelectForm from './FieldSelectForm';
-import FieldFilterForm from './FieldFilterForm';
+import FieldFilterEditForm from './FieldFilterEditForm';
-import { useApi } from 'components/hooks';
+import { useDateRange } from 'components/hooks';
-
-function useValues(websiteId: string, type: string) {
-  const now = Date.now();
-  const { get, useQuery } = useApi();
-  const { data, error, isLoading } = useQuery({
-    queryKey: ['websites:values', websiteId, type],
-    queryFn: () =>
-      get(`/websites/${websiteId}/values`, {
-        type,
-        startAt: +subDays(now, 90),
-        endAt: now,
-      }),
-    enabled: !!(websiteId && type),
-  });
-
-  return { data, error, isLoading };
-}
 
 export interface FilterSelectFormProps {
-  websiteId: string;
+  websiteId?: string;
   fields: any[];
-  onSelect?: (key: any) => void;
+  onChange?: (filter: { name: string; type: string; operator: string; value: string }) => void;
   allowFilterSelect?: boolean;
 }
 
 export default function FilterSelectForm({
   websiteId,
   fields,
-  onSelect,
+  onChange,
   allowFilterSelect,
 }: FilterSelectFormProps) {
   const [field, setField] = useState<{ name: string; label: string; type: string }>();
-  const { data, isLoading } = useValues(websiteId, field?.name);
+  const [{ startDate, endDate }] = useDateRange(websiteId);
 
   if (!field) {
     return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />;
   }
 
-  if (isLoading) {
+  const { name, label, type } = field;
-    return <Loading position="center" icon="dots" />;
-  }
 
   return (
-    <FieldFilterForm
+    <FieldFilterEditForm
-      name={field?.name}
+      websiteId={websiteId}
-      label={field?.label}
+      name={name}
-      type={field?.type}
+      label={label}
-      values={data}
+      type={type}
-      onSelect={onSelect}
+      startDate={startDate}
+      endDate={endDate}
+      onChange={onChange}
       allowFilterSelect={allowFilterSelect}
+      isNew={true}
     />
   );
 }

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

@@ -4,6 +4,7 @@ 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';
 
 export interface ParameterListProps {
   children?: ReactNode;
@@ -20,9 +21,19 @@ export function ParameterList({ children }: ParameterListProps) {
   );
 }
 
-const Item = ({ children, onRemove }: { children?: ReactNode; onRemove?: () => void }) => {
+const Item = ({
+  children,
+  className,
+  onClick,
+  onRemove,
+}: {
+  children?: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  onRemove?: () => void;
+}) => {
   return (
-    <div className={styles.item}>
+    <div className={classNames(styles.item, className)} onClick={onClick}>
       {children}
       <Icon onClick={onRemove}>
         <Icons.Close />

src/app/(main)/reports/[reportId]/PopupForm.module.css

@@ -1,5 +1,4 @@
 .form {
-  position: absolute;
   background: var(--base50);
   min-width: 300px;
   padding: 20px;

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

@@ -13,7 +13,7 @@ export function Report({
   className,
 }: {
   reportId: string;
-  defaultParameters: { [key: string]: any };
+  defaultParameters: { type: string; parameters: { [key: string]: any } };
   children: ReactNode;
   className?: string;
 }) {

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

@@ -60,10 +60,9 @@ export function EventDataParameters() {
     }
   };
 
-  const handleRemove = (group: string, index: number) => {
+  const handleRemove = (group: string) => {
     const data = [...parameterData[group]];
-    data.splice(index, 1);
+    updateReport({ parameters: { [group]: data.filter(({ name }) => name !== group) } });
-    updateReport({ parameters: { [group]: data } });
   };
 
   const AddButton = ({ group, onAdd }) => {
@@ -104,29 +103,28 @@ export function EventDataParameters() {
               label={label}
               action={<AddButton group={group} onAdd={handleAdd} />}
             >
-              <ParameterList
+              <ParameterList>
-                items={parameterData[group]}
+                {parameterData[group].map(({ name, value }) => {
-                onRemove={index => handleRemove(group, index)}
-              >
-                {({ name, value }) => {
                   return (
-                    <div className={styles.parameter}>
+                    <ParameterList.Item key={name} onRemove={() => handleRemove(group)}>
-                      {group === REPORT_PARAMETERS.fields && (
+                      <div className={styles.parameter}>
-                        <>
+                        {group === REPORT_PARAMETERS.fields && (
-                          <div>{name}</div>
+                          <>
-                          <div className={styles.op}>{value}</div>
+                            <div>{name}</div>
-                        </>
+                            <div className={styles.op}>{value}</div>
-                      )}
+                          </>
-                      {group === REPORT_PARAMETERS.filters && (
+                        )}
-                        <>
+                        {group === REPORT_PARAMETERS.filters && (
-                          <div>{name}</div>
+                          <>
-                          <div className={styles.op}>{value[0]}</div>
+                            <div>{name}</div>
-                          <div>{value[1]}</div>
+                            <div className={styles.op}>{value[0]}</div>
-                        </>
+                            <div>{value[1]}</div>
-                      )}
+                          </>
-                    </div>
+                        )}
+                      </div>
+                    </ParameterList.Item>
                   );
-                }}
+                })}
               </ParameterList>
             </FormRow>
           );

src/app/(main)/reports/funnel/FunnelChart.module.css

@@ -37,12 +37,12 @@
 .card {
   display: grid;
   gap: 20px;
+  margin-top: 14px;
 }
 
 .header {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  font-weight: 700;
   gap: 20px;
 }
 
@@ -51,19 +51,16 @@
   align-items: center;
   justify-content: flex-end;
   background: var(--base900);
-  height: 50px;
+  height: 30px;
   border-radius: 5px;
   overflow: hidden;
   position: relative;
 }
 
 .label {
-  color: var(--base700);
+  color: var(--base600);
-}
+  font-weight: 700;
-
+  text-transform: uppercase;
-.value {
-  color: var(--base50);
-  margin-inline-end: 20px;
 }
 
 .track {
@@ -72,13 +69,33 @@
 }
 
 .info {
-  display: flex;
-  justify-content: space-between;
   text-transform: lowercase;
 }
 
 .item {
-  padding: 6px 10px;
+  font-size: 20px;
-  border-radius: 4px;
+  color: var(--base900);
-  border: 1px solid var(--base300);
+  font-weight: 700;
+}
+
+.metric {
+  color: var(--base700);
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 10px 0;
+  text-transform: lowercase;
+}
+
+.visitors {
+  color: var(--base900);
+  font-size: 24px;
+  font-weight: 900;
+  margin-right: 10px;
+}
+
+.percent {
+  font-size: 20px;
+  font-weight: 700;
+  align-self: flex-end;
 }

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

@@ -2,8 +2,8 @@ import { useContext } from 'react';
 import classNames from 'classnames';
 import { useMessages } from 'components/hooks';
 import { ReportContext } from '../[reportId]/Report';
-import styles from './FunnelChart.module.css';
 import { formatLongNumber } from 'lib/format';
+import styles from './FunnelChart.module.css';
 
 export interface FunnelChartProps {
   className?: string;
@@ -18,35 +18,33 @@ export function FunnelChart({ className }: FunnelChartProps) {
 
   return (
     <div className={classNames(styles.chart, className)}>
-      {data?.map(({ url, visitors, dropped, dropoff, remaining }, index: number) => {
+      {data?.map(({ type, value, visitors, dropped, dropoff, remaining }, index: number) => {
         return (
-          <div key={url} className={styles.step}>
+          <div key={index} className={styles.step}>
             <div className={styles.num}>{index + 1}</div>
             <div className={styles.card}>
               <div className={styles.header}>
-                <span className={styles.label}>{formatMessage(labels.viewedPage)}:</span>
+                <span className={styles.label}>
-                <span className={styles.item}>{url}</span>
+                  {formatMessage(type === 'url' ? labels.viewedPage : labels.triggeredEvent)}
+                </span>
+                <span className={styles.item}>{value}</span>
+              </div>
+              <div className={styles.metric}>
+                <div>
+                  <span className={styles.visitors}>{formatLongNumber(visitors)}</span>
+                  {formatMessage(labels.visitors)}
+                </div>
+                <div className={styles.percent}>{(remaining * 100).toFixed(2)}%</div>
               </div>
               <div className={styles.track}>
-                <div className={styles.bar} style={{ width: `${remaining * 100}%` }}>
+                <div className={styles.bar} style={{ width: `${remaining * 100}%` }}></div>
-                  <span className={styles.value}>
-                    {remaining > 0.1 && `${(remaining * 100).toFixed(2)}%`}
-                  </span>
-                </div>
               </div>
-              <div className={styles.info}>
+              {dropoff > 0 && (
-                <div>
+                <div className={styles.info}>
-                  <b>{formatLongNumber(visitors)}</b>
+                  <b>{formatLongNumber(dropped)}</b> {formatMessage(labels.visitorsDroppedOff)} (
-                  <span> {formatMessage(labels.visitors)}</span>
+                  {(dropoff * 100).toFixed(2)}%)
-                  <span> ({(remaining * 100).toFixed(2)}%)</span>
                 </div>
-                {dropoff > 0 && (
+              )}
-                  <div>
-                    <b>{formatLongNumber(dropped)}</b> {formatMessage(labels.visitorsDroppedOff)} (
-                    {(dropoff * 100).toFixed(2)}%)
-                  </div>
-                )}
-              </div>
             </div>
           </div>
         );

src/app/(main)/reports/funnel/FunnelParameters.module.css

@@ -0,0 +1,16 @@
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.type {
+  color: var(--base700);
+}
+
+.value {
+  display: flex;
+  align-self: center;
+  gap: 20px;
+}

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

@@ -10,50 +10,65 @@ import {
   Popup,
   SubmitButton,
   TextField,
+  Button,
 } from 'react-basics';
 import Icons from 'components/icons';
-import UrlAddForm from './UrlAddForm';
+import FunnelStepAddForm from './FunnelStepAddForm';
 import { ReportContext } from '../[reportId]/Report';
 import BaseParameters from '../[reportId]/BaseParameters';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';
+import styles from './FunnelParameters.module.css';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
 
   const { id, parameters } = report || {};
-  const { websiteId, dateRange, urls } = parameters || {};
+  const { websiteId, dateRange, steps } = parameters || {};
-  const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
+  const queryDisabled = !websiteId || !dateRange || steps?.length < 2;
 
   const handleSubmit = (data: any, e: any) => {
     e.stopPropagation();
     e.preventDefault();
+
     if (!queryDisabled) {
       runReport(data);
     }
   };
 
-  const handleAddUrl = (url: string) => {
+  const handleAddStep = (step: { type: string; value: string }) => {
-    updateReport({ parameters: { urls: parameters.urls.concat(url) } });
+    updateReport({ parameters: { steps: parameters.steps.concat(step) } });
   };
 
-  const handleRemoveUrl = (index: number, e: any) => {
+  const handleUpdateStep = (
-    e.stopPropagation();
+    close: () => void,
-    const urls = [...parameters.urls];
+    index: number,
-    urls.splice(index, 1);
+    step: { type: string; value: string },
-    updateReport({ parameters: { urls } });
+  ) => {
+    const steps = [...parameters.steps];
+    steps[index] = step;
+    updateReport({ parameters: { steps } });
+    close();
   };
 
-  const AddUrlButton = () => {
+  const handleRemoveStep = (index: number) => {
+    const steps = [...parameters.steps];
+    delete steps[index];
+    updateReport({ parameters: { steps: steps.filter(n => n) } });
+  };
+
+  const AddStepButton = () => {
     return (
       <PopupTrigger>
-        <Icon>
+        <Button>
-          <Icons.Plus />
+          <Icon>
-        </Icon>
+            <Icons.Plus />
-        <Popup position="right" alignment="start">
+          </Icon>
+        </Button>
+        <Popup alignment="start">
           <PopupForm>
-            <UrlAddForm onAdd={handleAddUrl} />
+            <FunnelStepAddForm onChange={handleAddStep} />
           </PopupForm>
         </Popup>
       </PopupTrigger>
@@ -71,11 +86,37 @@ export function FunnelParameters() {
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
-      <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
+      <FormRow label={formatMessage(labels.steps)} action={<AddStepButton />}>
-        <ParameterList
+        <ParameterList>
-          items={urls}
+          {steps.map((step: { type: string; value: string }, index: number) => {
-          onRemove={(index: number, e: any) => handleRemoveUrl(index, e)}
+            return (
-        />
+              <PopupTrigger key={index}>
+                <ParameterList.Item
+                  className={styles.item}
+                  onRemove={() => handleRemoveStep(index)}
+                >
+                  <div className={styles.value}>
+                    <div className={styles.type}>
+                      <Icon>{step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}</Icon>
+                    </div>
+                    <div>{step.value}</div>
+                  </div>
+                </ParameterList.Item>
+                <Popup alignment="start">
+                  {(close: () => void) => (
+                    <PopupForm>
+                      <FunnelStepAddForm
+                        type={step.type}
+                        value={step.value}
+                        onChange={handleUpdateStep.bind(null, close, index)}
+                      />
+                    </PopupForm>
+                  )}
+                </Popup>
+              </PopupTrigger>
+            );
+          })}
+        </ParameterList>
       </FormRow>
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>

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

@@ -9,7 +9,7 @@ import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
   type: REPORT_TYPES.funnel,
-  parameters: { window: 60, urls: [] },
+  parameters: { window: 60, steps: [] },
 };
 
 export default function FunnelReport({ reportId }: { reportId?: string }) {

src/app/(main)/reports/funnel/FunnelStepAddForm.module.css

@@ -0,0 +1,7 @@
+.dropdown {
+  width: 140px;
+}
+
+.input {
+  width: 200px;
+}

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

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { useMessages } from 'components/hooks';
+import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from 'react-basics';
+import styles from './FunnelStepAddForm.module.css';
+
+export interface FunnelStepAddFormProps {
+  type?: string;
+  value?: string;
+  onChange?: (step: { type: string; value: string }) => void;
+}
+
+export function FunnelStepAddForm({
+  type: defaultType = 'url',
+  value: defaultValue = '',
+  onChange,
+}: FunnelStepAddFormProps) {
+  const [type, setType] = useState(defaultType);
+  const [value, setValue] = useState(defaultValue);
+  const { formatMessage, labels } = useMessages();
+  const items = [
+    { label: formatMessage(labels.url), value: 'url' },
+    { label: formatMessage(labels.event), value: 'event' },
+  ];
+  const isDisabled = !type || !value;
+
+  const handleSave = () => {
+    onChange({ type, value });
+    setValue('');
+  };
+
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      handleSave();
+    }
+  };
+
+  const renderTypeValue = (value: any) => {
+    return items.find(item => item.value === value)?.label;
+  };
+
+  return (
+    <Flexbox direction="column" gap={10}>
+      <FormRow label={formatMessage(defaultValue ? labels.update : labels.add)}>
+        <Flexbox gap={10}>
+          <Dropdown
+            className={styles.dropdown}
+            items={items}
+            value={type}
+            renderValue={renderTypeValue}
+            onChange={(value: any) => setType(value)}
+          >
+            {({ value, label }) => {
+              return <Item key={value}>{label}</Item>;
+            }}
+          </Dropdown>
+          <TextField
+            className={styles.input}
+            value={value}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+        </Flexbox>
+      </FormRow>
+      <FormRow>
+        <Button variant="primary" onClick={handleSave} disabled={isDisabled}>
+          {formatMessage(defaultValue ? labels.update : labels.add)}
+        </Button>
+      </FormRow>
+    </Flexbox>
+  );
+}
+
+export default FunnelStepAddForm;

src/app/(main)/reports/funnel/UrlAddForm.module.css

@@ -1,14 +0,0 @@
-.form {
-  position: absolute;
-  background: var(--base50);
-  width: 300px;
-  padding: 30px;
-  margin-top: 10px;
-  border: 1px solid var(--base400);
-  border-radius: var(--border-radius);
-  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.input {
-  width: 100%;
-}

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

@@ -1,52 +0,0 @@
-import { useState } from 'react';
-import { useMessages } from 'components/hooks';
-import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
-import styles from './UrlAddForm.module.css';
-
-export interface UrlAddFormProps {
-  defaultValue?: string;
-  onAdd?: (url: string) => void;
-}
-
-export function UrlAddForm({ defaultValue = '', onAdd }: UrlAddFormProps) {
-  const [url, setUrl] = useState(defaultValue);
-  const { formatMessage, labels } = useMessages();
-
-  const handleSave = () => {
-    onAdd(url);
-    setUrl('');
-  };
-
-  const handleChange = e => {
-    setUrl(e.target.value);
-  };
-
-  const handleKeyDown = e => {
-    if (e.key === 'Enter') {
-      e.stopPropagation();
-      handleSave();
-    }
-  };
-
-  return (
-    <Form>
-      <FormRow label={formatMessage(labels.url)}>
-        <Flexbox gap={10}>
-          <TextField
-            className={styles.input}
-            value={url}
-            onChange={handleChange}
-            autoFocus={true}
-            autoComplete="off"
-            onKeyDown={handleKeyDown}
-          />
-          <Button variant="primary" onClick={handleSave}>
-            {formatMessage(labels.add)}
-          </Button>
-        </Flexbox>
-      </FormRow>
-    </Form>
-  );
-}
-
-export default UrlAddForm;

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

@@ -1,88 +0,0 @@
-import { useMessages, useFormat, useFilters } from 'components/hooks';
-import Icons from 'components/icons';
-import { useContext } from 'react';
-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 '../[reportId]/Report';
-import styles from './InsightsFilterParameters.module.css';
-import { safeDecodeURIComponent } from 'next-basics';
-import { OPERATORS } from 'lib/constants';
-
-export function InsightsFilterParameters() {
-  const { report, updateReport } = useContext(ReportContext);
-  const { formatMessage, labels } = useMessages();
-  const { formatValue } = useFormat();
-  const { filterLabels } = useFilters();
-  const { parameters } = report || {};
-  const { websiteId, filters } = parameters || {};
-
-  const fieldOptions = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'query', type: 'string', label: formatMessage(labels.query) },
-    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
-    { name: 'os', type: 'string', label: formatMessage(labels.os) },
-    { name: 'device', type: 'string', label: formatMessage(labels.device) },
-    { name: 'country', type: 'string', label: formatMessage(labels.country) },
-    { name: 'region', type: 'string', label: formatMessage(labels.region) },
-    { name: 'city', type: 'string', label: formatMessage(labels.city) },
-  ];
-
-  const handleAdd = (value: { name: any }) => {
-    if (!filters.find(({ name }) => name === value.name)) {
-      updateReport({ parameters: { filters: filters.concat(value) } });
-    }
-  };
-
-  const handleRemove = (name: string) => {
-    updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
-  };
-
-  const AddButton = () => {
-    return (
-      <PopupTrigger>
-        <Button size="sm">
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-        </Button>
-        <Popup position="bottom" alignment="start">
-          <PopupForm>
-            <FilterSelectForm
-              websiteId={websiteId}
-              fields={fieldOptions.filter(({ name }) => !filters.find(f => f.name === name))}
-              onSelect={handleAdd}
-            />
-          </PopupForm>
-        </Popup>
-      </PopupTrigger>
-    );
-  };
-
-  return (
-    <FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
-      <ParameterList>
-        {filters.map(({ name, filter, value }) => {
-          const label = fieldOptions.find(f => f.name === name)?.label;
-          const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter);
-          return (
-            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
-              <div className={styles.item}>
-                <div className={styles.label}>{label}</div>
-                <div className={styles.filter}>{filterLabels[filter]}</div>
-                <div className={styles.value}>
-                  {safeDecodeURIComponent(isEquals ? formatValue(value, name) : value)}
-                </div>
-              </div>
-            </ParameterList.Item>
-          );
-        })}
-      </ParameterList>
-    </FormRow>
-  );
-}
-
-export default InsightsFilterParameters;

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

@@ -3,8 +3,8 @@ import { useContext } from 'react';
 import { Form, FormButtons, SubmitButton } from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';
 import { ReportContext } from '../[reportId]/Report';
-import InsightsFieldParameters from './InsightsFieldParameters';
+import FieldParameters from '../[reportId]/FieldParameters';
-import InsightsFilterParameters from './InsightsFilterParameters';
+import FilterParameters from '../[reportId]/FilterParameters';
 
 export function InsightsParameters() {
   const { report, runReport, isRunning } = useContext(ReportContext);
@@ -22,8 +22,8 @@ export function InsightsParameters() {
   return (
     <Form values={parameters} onSubmit={handleSubmit}>
       <BaseParameters allowWebsiteSelect={!id} />
-      {parametersSelected && <InsightsFieldParameters />}
+      {parametersSelected && <FieldParameters />}
-      {parametersSelected && <InsightsFilterParameters />}
+      {parametersSelected && <FilterParameters />}
       <FormButtons>
         <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, Icon, Text } from 'react-basics';
+import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
 import { useLogin, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import LinkButton from 'components/common/LinkButton';
@@ -14,9 +14,10 @@ export function TeamWebsitesTable({
 }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       <GridColumn name="createdBy" label={formatMessage(labels.createdBy)}>

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

@@ -34,7 +34,7 @@ export function UserAddForm({ onSave, onClose }) {
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.administrator);
+      return formatMessage(labels.admin);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);
@@ -58,7 +58,7 @@ export function UserAddForm({ onSave, onClose }) {
           <Dropdown renderValue={renderValue}>
             <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
             <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-            <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
+            <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
           </Dropdown>
         </FormInput>
       </FormRow>

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

@@ -46,7 +46,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
       return formatMessage(labels.user);
     }
     if (value === ROLES.admin) {
-      return formatMessage(labels.administrator);
+      return formatMessage(labels.admin);
     }
     if (value === ROLES.viewOnly) {
       return formatMessage(labels.viewOnly);
@@ -76,7 +76,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
             <Dropdown renderValue={renderValue}>
               <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
               <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-              <Item key={ROLES.admin}>{formatMessage(labels.administrator)}</Item>
+              <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
             </Dropdown>
           </FormInput>
         </FormRow>

src/app/(main)/settings/websites/WebsitesTable.module.css

@@ -1,13 +0,0 @@
-@media screen and (max-width: 992px) {
-  .row {
-    flex-wrap: wrap;
-  }
-
-  .header .actions {
-    display: none;
-  }
-
-  .actions {
-    flex-basis: 100%;
-  }
-}

src/app/(main)/settings/websites/[websiteId]/ShareUrl.tsx

@@ -35,7 +35,7 @@ export function ShareUrl({
 
   const url = `${hostUrl || process.env.hostUrl || window?.location.origin}${
     process.env.basePath
-  }/share/${id}/${encodeURIComponent(domain)}`;
+  }/share/${id}/${domain}`;
 
   const handleGenerate = () => {
     setId(generateId());

src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx

@@ -6,7 +6,7 @@ import WebsiteChart from './WebsiteChart';
 import useDashboard from 'store/dashboard';
 import WebsiteHeader from './WebsiteHeader';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
-import { useMessages, useLocale } from 'components/hooks';
+import { useMessages, useLocale, useTeamUrl } from 'components/hooks';
 
 export default function WebsiteChartList({
   websites,
@@ -19,6 +19,7 @@ export default function WebsiteChartList({
 }) {
   const { formatMessage, labels } = useMessages();
   const { websiteOrder } = useDashboard();
+  const { renderTeamUrl } = useTeamUrl();
   const { dir } = useLocale();
 
   const ordered = useMemo(
@@ -35,7 +36,7 @@ export default function WebsiteChartList({
         return index < limit ? (
           <div key={id}>
             <WebsiteHeader websiteId={id} showLinks={false}>
-              <Link href={`/websites/${id}`}>
+              <Link href={renderTeamUrl(`/websites/${id}`)}>
                 <Button variant="primary">
                   <Text>{formatMessage(labels.viewDetails)}</Text>
                   <Icon>

src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx

@@ -13,20 +13,19 @@ import WebsiteTableView from './WebsiteTableView';
 export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
   const { data: website, isLoading, error } = useWebsite(websiteId);
   const pathname = usePathname();
-  const showLinks = !pathname.includes('/share/');
+  const { query } = useNavigation();
-
-  const {
-    query: { view, url, referrer, query, os, browser, device, country, region, city, title },
-  } = useNavigation();
 
   if (isLoading || error) {
     return <Page isLoading={isLoading} error={error} />;
   }
 
+  const showLinks = !pathname.includes('/share/');
+  const { view, ...params } = query;
+
   return (
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
-      <FilterTags params={{ url, referrer, query, os, browser, device, country, region, city, title }} />
+      <FilterTags websiteId={websiteId} params={params} />
       <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
       <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -44,7 +44,6 @@ export default function WebsiteExpandedView({
   const {
     router,
     renderUrl,
-    pathname,
     query: { view },
   } = useNavigation();
 
@@ -122,7 +121,12 @@ export default function WebsiteExpandedView({
   return (
     <div className={styles.layout}>
       <div className={styles.menu}>
-        <LinkButton href={pathname} className={styles.back} variant="quiet" scroll={false}>
+        <LinkButton
+          href={renderUrl({ view: undefined })}
+          className={styles.back}
+          variant="quiet"
+          scroll={false}
+        >
           <Icon rotate={dir === 'rtl' ? 0 : 180}>
             <Icons.ArrowRight />
           </Icon>

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.module.css

@@ -0,0 +1,3 @@
+.button {
+  font-weight: 700;
+}