Merge branch 'dev' into feat/ume-660-implement-visitor-id

.gitignore

@@ -22,6 +22,7 @@ node_modules
 # misc
 .DS_Store
 .idea
+.yarn
 *.iml
 *.log
 .vscode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Umami Software, Inc. <hello@umami.is>",
   "license": "MIT",
@@ -69,7 +69,7 @@
     "@prisma/client": "5.10.2",
     "@prisma/extension-read-replicas": "^0.3.0",
     "@react-spring/web": "^9.7.3",
-    "@tanstack/react-query": "^5.12.2",
+    "@tanstack/react-query": "^5.28.6",
     "@umami/prisma-client": "^0.14.0",
     "@umami/redis-client": "^0.18.0",
     "chalk": "^4.1.1",
@@ -176,6 +176,6 @@
     "tar": "^6.1.2",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.4.3"
   }
 }

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'),
         },
+        ...(!teamId
+          ? [
               {
                 label: formatMessage(labels.teams),
-          url: '/settings/teams',
+                url: renderTeamUrl('/settings/teams'),
               },
               {
                 label: formatMessage(labels.users),
                 url: '/settings/users',
               },
+            ]
+          : [
               {
-          label: formatMessage(labels.profile),
+                label: formatMessage(labels.members),
-          url: '/profile',
+                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)/profile/LanguageSetting.tsx

@@ -20,7 +20,7 @@ export function LanguageSetting() {
 
   const handleReset = () => saveLocale(DEFAULT_LOCALE);
 
-  const renderValue = (value: string | number) => languages[value].label;
+  const renderValue = (value: string | number) => languages?.[value]?.label;
 
   return (
     <Flexbox gap={10}>

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

@@ -4,8 +4,7 @@ import { REPORT_PARAMETERS } from 'lib/constants';
 import PopupForm from './PopupForm';
 import FieldSelectForm from './FieldSelectForm';
 import FieldAggregateForm from './FieldAggregateForm';
-import FieldFilterForm from './FieldFilterForm';
+import FieldFilterEditForm from './FieldFilterEditForm';
-import styles from './FieldAddForm.module.css';
 
 export function FieldAddForm({
   fields = [],
@@ -38,13 +37,13 @@ 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} />
+        <FieldFilterEditForm {...selected} onChange={handleSave} />
       )}
     </PopupForm>,
     document.body,

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

@@ -1,8 +1,8 @@
 .popup {
   display: flex;
   max-width: 300px;
-  max-height: 400px;
+  max-height: 210px;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .popup > div {
@@ -19,6 +19,6 @@
   min-width: 180px;
 }
 
-.menu {
+.text {
-  min-width: 200px;
+  min-width: 180px;
 }

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

@@ -0,0 +1,153 @@
+import { useState, useMemo } from 'react';
+import {
+  Form,
+  FormRow,
+  Item,
+  Flexbox,
+  Dropdown,
+  Button,
+  TextField,
+  Menu,
+  Popup,
+  PopupTrigger,
+  Loading,
+} from 'react-basics';
+import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
+import { safeDecodeURIComponent } from 'next-basics';
+import { OPERATORS } from 'lib/constants';
+import styles from './FieldFilterEditForm.module.css';
+
+export interface FieldFilterFormProps {
+  websiteId?: string;
+  name: string;
+  label?: string;
+  type: string;
+  defaultValue?: string;
+  onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
+  allowFilterSelect?: boolean;
+  isNew?: boolean;
+}
+
+export default function FieldFilterEditForm({
+  websiteId,
+  name,
+  label,
+  type,
+  defaultValue,
+  onChange,
+  allowFilterSelect = true,
+  isNew,
+}: FieldFilterFormProps) {
+  const { formatMessage, labels } = useMessages();
+  const [filter, setFilter] = useState('eq');
+  const [value, setValue] = useState(defaultValue ?? '');
+  const { getFilters } = useFilters();
+  const { formatValue } = useFormat();
+  const { locale } = useLocale();
+  const filters = getFilters(type);
+  const { data: values = [], isLoading } = useWebsiteValues(websiteId, name);
+
+  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 => formattedValues[n].toLowerCase().includes(value.toLowerCase()))
+      : values;
+  }, [value, formattedValues]);
+
+  const renderFilterValue = value => {
+    return filters.find(f => f.value === value)?.label;
+  };
+
+  const handleAdd = () => {
+    onChange({ name, type, filter, value });
+  };
+
+  const handleMenuSelect = value => {
+    setValue(value);
+  };
+
+  const showMenu =
+    [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) &&
+    !(filteredValues?.length === 1 && filteredValues[0] === formattedValues[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)}
+              placeholder={formatMessage(labels.enter)}
+              onChange={e => setValue(e.target.value)}
+            />
+            {showMenu && (
+              <Popup className={styles.popup} alignment="start">
+                <ResultsMenu
+                  values={filteredValues}
+                  type={name}
+                  isLoading={isLoading}
+                  onSelect={handleMenuSelect}
+                />
+              </Popup>
+            )}
+          </PopupTrigger>
+        </Flexbox>
+        <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
+          {isNew ? formatMessage(labels.add) : formatMessage(labels.update)}
+        </Button>
+      </FormRow>
+    </Form>
+  );
+}
+
+const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
+  const { formatValue } = useFormat();
+  if (isLoading) {
+    return <Loading icon="dots" position="center" />;
+  }
+
+  if (!values?.length) {
+    return null;
+  }
+
+  return (
+    <Menu variant="popup" onSelect={onSelect}>
+      {values?.map(value => {
+        return <Item key={value}>{safeDecodeURIComponent(formatValue(value, type))}</Item>;
+      })}
+    </Menu>
+  );
+};

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

@@ -1,102 +0,0 @@
-import { useState, useMemo } from 'react';
-import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
-import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
-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 [search, setSearch] = useState('');
-
-  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 search ? values.filter(n => n.includes(search)) : values;
-  }, [search, formattedValues]);
-
-  const renderFilterValue = value => {
-    return filters.find(f => f.value === value)?.label;
-  };
-
-  const renderValue = value => {
-    return formattedValues[value];
-  };
-
-  const handleAdd = () => {
-    onSelect({ name, type, filter, 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>
-          )}
-          <Dropdown
-            className={styles.dropdown}
-            popupProps={{ className: styles.popup }}
-            menuProps={{ className: styles.menu }}
-            items={filteredValues}
-            value={value}
-            renderValue={renderValue}
-            onChange={(key: any) => setValue(key)}
-            allowSearch={true}
-            onSearch={setSearch}
-          >
-            {(value: string) => {
-              return <Item key={value}>{formattedValues[value]}</Item>;
-            }}
-          </Dropdown>
-        </Flexbox>
-        <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
-          {formatMessage(labels.add)}
-        </Button>
-      </FormRow>
-    </Form>
-  );
-}

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

@@ -0,0 +1,63 @@
+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';
+
+export function FieldParameters() {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { parameters } = report || {};
+  const { fields } = parameters || {};
+  const { fields: fieldOptions } = useFields();
+
+  const handleAdd = (value: { name: any }) => {
+    if (!fields.find(({ name }) => name === value.name)) {
+      updateReport({ parameters: { fields: fields.concat(value) } });
+    }
+  };
+
+  const handleRemove = (name: string) => {
+    updateReport({ parameters: { fields: fields.filter(f => f.name !== name) } });
+  };
+
+  const AddButton = () => {
+    return (
+      <PopupTrigger>
+        <Button size="sm">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Button>
+        <Popup position="bottom" alignment="start">
+          <PopupForm>
+            <FieldSelectForm
+              fields={fieldOptions.filter(({ name }) => !fields.find(f => f.name === name))}
+              onSelect={handleAdd}
+              showType={false}
+            />
+          </PopupForm>
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <FormRow label={formatMessage(labels.fields)} action={<AddButton />}>
+      <ParameterList>
+        {fields.map(({ name }) => {
+          return (
+            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
+              {fieldOptions.find(f => f.name === name)?.label}
+            </ParameterList.Item>
+          );
+        })}
+      </ParameterList>
+    </FormRow>
+  );
+}
+
+export default FieldParameters;

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

@@ -0,0 +1,40 @@
+.item {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.label {
+  color: var(--base800);
+  border: 1px solid var(--base300);
+  font-weight: 900;
+  padding: 2px 8px;
+  border-radius: 5px;
+  white-space: nowrap;
+}
+
+.filter {
+  color: var(--blue900);
+  background-color: var(--blue100);
+  font-size: 12px;
+  font-weight: 900;
+  padding: 2px 8px;
+  border-radius: 5px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.value {
+  color: var(--base900);
+  background-color: var(--base100);
+  font-weight: 900;
+  padding: 2px 8px;
+  border-radius: 5px;
+  white-space: nowrap;
+}
+
+.edit {
+  margin-top: 20px;
+}

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

@@ -0,0 +1,113 @@
+import { useContext } from 'react';
+import { safeDecodeURIComponent } from 'next-basics';
+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 { OPERATORS } from 'lib/constants';
+import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
+import styles from './FilterParameters.module.css';
+
+export function FilterParameters() {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { filterLabels } = useFilters();
+  const { parameters } = report || {};
+  const { websiteId, filters } = 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 = filter => {
+    updateReport({
+      parameters: {
+        filters: filters.map(f => {
+          if (filter.name === f.name) {
+            return filter;
+          }
+          return f;
+        }),
+      },
+    });
+  };
+
+  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, filter, value }: { name: string; filter: string; value: string }) => {
+          const label = fields.find(f => f.name === name)?.label;
+          const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any);
+          return (
+            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
+              <FilterParameter
+                name={name}
+                label={label}
+                filter={filterLabels[filter]}
+                value={isEquals ? formatValue(value, name) : value}
+                onChange={handleChange}
+              />
+            </ParameterList.Item>
+          );
+        })}
+      </ParameterList>
+    </FormRow>
+  );
+}
+
+const FilterParameter = ({ name, label, filter, value, type = 'string', onChange }) => {
+  return (
+    <PopupTrigger>
+      <div className={styles.item}>
+        <div className={styles.label}>{label}</div>
+        <div className={styles.filter}>{filter}</div>
+        <div className={styles.value}>{safeDecodeURIComponent(value)}</div>
+      </div>
+      <Popup className={styles.edit} alignment="start">
+        <PopupForm>
+          <FieldFilterEditForm
+            name={name}
+            label={label}
+            type={type}
+            defaultValue={value}
+            onChange={onChange}
+          />
+        </PopupForm>
+      </Popup>
+    </PopupTrigger>
+  );
+};
+
+export default FilterParameters;

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

@@ -1,59 +1,37 @@
 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';
-
-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;
-  items: any[];
+  fields: any[];
-  onSelect?: (key: any) => void;
+  onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
   allowFilterSelect?: boolean;
 }
 
 export default function FilterSelectForm({
   websiteId,
-  items,
+  fields,
-  onSelect,
+  onChange,
   allowFilterSelect,
 }: FilterSelectFormProps) {
   const [field, setField] = useState<{ name: string; label: string; type: string }>();
-  const { data, isLoading } = useValues(websiteId, field?.name);
 
   if (!field) {
-    return <FieldSelectForm fields={items} onSelect={setField} showType={false} />;
+    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}
+      onChange={onChange}
       allowFilterSelect={allowFilterSelect}
+      isNew={true}
     />
   );
 }

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

@@ -13,9 +13,4 @@
   border: 1px solid var(--base400);
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 1px var(--base400);
-  gap: 10px;
-}
-
-.icon {
-  align-self: center;
 }

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

@@ -1,40 +1,44 @@
 import { ReactNode } from 'react';
-import { Icon, TooltipPopup } from 'react-basics';
+import { Icon } from 'react-basics';
 import Icons from 'components/icons';
 import Empty from 'components/common/Empty';
 import { useMessages } from 'components/hooks';
 import styles from './ParameterList.module.css';
 
 export interface ParameterListProps {
-  items: any[];
+  children?: ReactNode;
-  children?: ReactNode | ((item: any) => ReactNode);
-  onRemove: (index: number, e: any) => void;
 }
 
-export function ParameterList({ items = [], children, onRemove }: ParameterListProps) {
+export function ParameterList({ children }: ParameterListProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <div className={styles.list}>
-      {!items.length && <Empty message={formatMessage(labels.none)} />}
+      {!children && <Empty message={formatMessage(labels.none)} />}
-      {items.map((item, index) => {
+      {children}
-        return (
-          <div key={index} className={styles.item}>
-            {typeof children === 'function' ? children(item) : item}
-            <TooltipPopup
-              className={styles.icon}
-              label={formatMessage(labels.remove)}
-              position="right"
-            >
-              <Icon onClick={onRemove.bind(null, index)}>
-                <Icons.Close />
-              </Icon>
-            </TooltipPopup>
-          </div>
-        );
-      })}
     </div>
   );
 }
 
+const Item = ({
+  children,
+  onClick,
+  onRemove,
+}: {
+  children?: ReactNode;
+  onClick?: () => void;
+  onRemove?: () => void;
+}) => {
+  return (
+    <div className={styles.item} onClick={onClick}>
+      {children}
+      <Icon onClick={onRemove}>
+        <Icons.Close />
+      </Icon>
+    </div>
+  );
+};
+
+ParameterList.Item = Item;
+
 export default ParameterList;

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

@@ -2,4 +2,5 @@
   display: grid;
   grid-template-rows: max-content 1fr;
   grid-template-columns: max-content 1fr;
+  margin-bottom: 60px;
 }

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,12 +103,10 @@ 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 (
+                    <ParameterList.Item key={name} onRemove={() => handleRemove(group)}>
                       <div className={styles.parameter}>
                         {group === REPORT_PARAMETERS.fields && (
                           <>
@@ -125,8 +122,9 @@ export function EventDataParameters() {
                           </>
                         )}
                       </div>
+                    </ParameterList.Item>
                   );
-                }}
+                })}
               </ParameterList>
             </FormRow>
           );

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

@@ -38,11 +38,9 @@ export function FunnelParameters() {
     updateReport({ parameters: { urls: parameters.urls.concat(url) } });
   };
 
-  const handleRemoveUrl = (index: number, e: any) => {
+  const handleRemoveUrl = (url: string) => {
-    e.stopPropagation();
     const urls = [...parameters.urls];
-    urls.splice(index, 1);
+    updateReport({ parameters: { urls: urls.filter(n => n.url !== url) } });
-    updateReport({ parameters: { urls } });
   };
 
   const AddUrlButton = () => {
@@ -72,10 +70,11 @@ export function FunnelParameters() {
         </FormInput>
       </FormRow>
       <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
-        <ParameterList
+        <ParameterList>
-          items={urls}
+          {urls.map(url => {
-          onRemove={(index: number, e: any) => handleRemoveUrl(index, e)}
+            return <ParameterList.Item key={url} onRemove={() => handleRemoveUrl(url)} />;
-        />
+          })}
+        </ParameterList>
       </FormRow>
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>

src/app/(main)/reports/insights/InsightsParameters.module.css

@@ -1,17 +0,0 @@
-.parameter {
-  display: flex;
-  gap: 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.op {
-  font-weight: bold;
-}
-
-.popup {
-  margin-top: -10px;
-  margin-inline-start: 30px;
-}

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

@@ -1,136 +1,29 @@
-import { useFilters, useFormat, useMessages } from 'components/hooks';
+import { useMessages } from 'components/hooks';
-import Icons from 'components/icons';
 import { useContext } from 'react';
-import {
+import { Form, FormButtons, SubmitButton } from 'react-basics';
-  Form,
-  FormButtons,
-  FormRow,
-  Icon,
-  Popup,
-  PopupTrigger,
-  SubmitButton,
-  TooltipPopup,
-} from 'react-basics';
 import BaseParameters from '../[reportId]/BaseParameters';
-import FieldSelectForm from '../[reportId]/FieldSelectForm';
-import FilterSelectForm from '../[reportId]/FilterSelectForm';
-import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[reportId]/PopupForm';
 import { ReportContext } from '../[reportId]/Report';
-import styles from './InsightsParameters.module.css';
+import FieldParameters from '../[reportId]/FieldParameters';
+import FilterParameters from '../[reportId]/FilterParameters';
 
 export function InsightsParameters() {
-  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, isRunning } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
-  const { formatValue } = useFormat();
-  const { filterLabels } = useFilters();
   const { id, parameters } = report || {};
   const { websiteId, dateRange, fields, filters } = parameters || {};
   const { startDate, endDate } = dateRange || {};
   const parametersSelected = websiteId && startDate && endDate;
   const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
 
-  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 parameterGroups = [
-    { id: 'fields', label: formatMessage(labels.fields) },
-    { id: 'filters', label: formatMessage(labels.filters) },
-  ];
-
-  const parameterData = {
-    fields,
-    filters,
-  };
-
   const handleSubmit = (values: any) => {
     runReport(values);
   };
 
-  const handleAdd = (id: string | number, value: { name: any }) => {
-    const data = parameterData[id];
-
-    if (!data.find(({ name }) => name === value.name)) {
-      updateReport({ parameters: { [id]: data.concat(value) } });
-    }
-  };
-
-  const handleRemove = (id: string, index: number) => {
-    const data = [...parameterData[id]];
-    data.splice(index, 1);
-    updateReport({ parameters: { [id]: data } });
-  };
-
-  const AddButton = ({ id, onAdd }) => {
-    return (
-      <PopupTrigger>
-        <TooltipPopup label={formatMessage(labels.add)} position="top">
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-        </TooltipPopup>
-        <Popup position="bottom" alignment="start" className={styles.popup}>
-          <PopupForm>
-            {id === 'fields' && (
-              <FieldSelectForm
-                fields={fieldOptions}
-                onSelect={onAdd.bind(null, id)}
-                showType={false}
-              />
-            )}
-            {id === 'filters' && (
-              <FilterSelectForm
-                websiteId={websiteId}
-                items={fieldOptions}
-                onSelect={onAdd.bind(null, id)}
-              />
-            )}
-          </PopupForm>
-        </Popup>
-      </PopupTrigger>
-    );
-  };
-
   return (
     <Form values={parameters} onSubmit={handleSubmit}>
       <BaseParameters allowWebsiteSelect={!id} />
-      {parametersSelected &&
+      {parametersSelected && <FieldParameters />}
-        parameterGroups.map(({ id, label }) => {
+      {parametersSelected && <FilterParameters />}
-          return (
-            <FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
-              <ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
-                {({ name, filter, value }) => {
-                  return (
-                    <div className={styles.parameter}>
-                      {id === 'fields' && (
-                        <>
-                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
-                        </>
-                      )}
-                      {id === 'filters' && (
-                        <>
-                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
-                          <div className={styles.op}>{filterLabels[filter]}</div>
-                          <div>{formatValue(value, name)}</div>
-                        </>
-                      )}
-                    </div>
-                  );
-                }}
-              </ParameterList>
-            </FormRow>
-          );
-        })}
       <FormButtons>
         <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}

src/app/(main)/reports/utm/UTMView.module.css

@@ -1,5 +1,5 @@
 .title {
-  font-size: 18px;
+  font-size: 24px;
   line-height: 36px;
   font-weight: 700;
 }

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

@@ -7,7 +7,7 @@ import ListTable from 'components/metrics/ListTable';
 import styles from './UTMView.module.css';
 import { useMessages } from 'components/hooks';
 
-function toArray(data: { [key: string]: number }) {
+function toArray(data: { [key: string]: number } = {}) {
   return Object.keys(data)
     .map(key => {
       return { name: key, value: data[key] };
@@ -26,8 +26,8 @@ export default function UTMView() {
 
   return (
     <div>
-      {UTM_PARAMS.map(key => {
+      {UTM_PARAMS.map(param => {
-        const items = toArray(data[key]);
+        const items = toArray(data[param]);
         const chartData = {
           labels: items.map(({ name }) => name),
           datasets: [
@@ -42,9 +42,9 @@ export default function UTMView() {
         }, 0);
 
         return (
-          <div key={key} className={styles.row}>
+          <div key={param} className={styles.row}>
             <div>
-              <div className={styles.title}>{key}</div>
+              <div className={styles.title}>{param.replace(/^utm_/, '')}</div>
               <ListTable
                 metric={formatMessage(labels.views)}
                 data={items.map(({ name, value }) => ({

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/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)/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]/WebsiteFilterButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
 import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
-import { useMessages, useNavigation } from 'components/hooks';
+import { useFields, useMessages, useNavigation } from 'components/hooks';
 
 export function WebsiteFilterButton({
   websiteId,
@@ -12,17 +12,7 @@ export function WebsiteFilterButton({
 }) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl, router } = useNavigation();
-
+  const { fields } = useFields();
-  const fieldOptions = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { 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 handleAddFilter = ({ name, value }) => {
     router.push(renderUrl({ [name]: value }));
@@ -42,8 +32,8 @@ export function WebsiteFilterButton({
             <PopupForm>
               <FilterSelectForm
                 websiteId={websiteId}
-                items={fieldOptions}
+                fields={fields}
-                onSelect={value => {
+                onChange={value => {
                   handleAddFilter(value);
                   close();
                 }}

src/components/charts/Chart.tsx

@@ -111,7 +111,7 @@ export function Chart({
     } else {
       const { index } = item;
       const meta = chart.current.getDatasetMeta(0);
-      const hidden = !!meta.data[index].hidden;
+      const hidden = !!meta?.data?.[index]?.hidden;
 
       meta.data[index].hidden = !hidden;
       chart.current.legend.legendItems[index].hidden = !hidden;

src/components/common/Breadcrumb.module.css

@@ -1,5 +1,5 @@
 .bar {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--base600);

src/components/hooks/index.ts

@@ -16,10 +16,12 @@ export * from './queries/useWebsite';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEvents';
 export * from './queries/useWebsiteMetrics';
+export * from './queries/useWebsiteValues';
 export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';
 export * from './useEscapeKey';
+export * from './useFields';
 export * from './useFilters';
 export * from './useForceUpdate';
 export * from './useFormat';

src/components/hooks/queries/useFilterQuery.ts

@@ -7,7 +7,7 @@ export function useFilterQuery<T = any>({
   queryKey,
   queryFn,
   ...options
-}: UseQueryOptions): FilterQueryResult<T> {
+}: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }): FilterQueryResult<T> {
   const [params, setParams] = useState<T | SearchFilter>({
     query: '',
     page: 1,

src/components/hooks/queries/useWebsiteValues.ts

@@ -0,0 +1,20 @@
+import { useApi } from 'components/hooks';
+import { subDays } from 'date-fns';
+
+export function useWebsiteValues(websiteId: string, type: string) {
+  const now = Date.now();
+  const { get, useQuery } = useApi();
+
+  return useQuery({
+    queryKey: ['websites:values', websiteId, type],
+    queryFn: () =>
+      get(`/websites/${websiteId}/values`, {
+        type,
+        startAt: +subDays(now, 90),
+        endAt: now,
+      }),
+    enabled: !!(websiteId && type),
+  });
+}
+
+export default useWebsiteValues;

src/components/hooks/useFields.ts

@@ -0,0 +1,22 @@
+import { useMessages } from './useMessages';
+
+export function useFields() {
+  const { formatMessage, labels } = useMessages();
+
+  const fields = [
+    { 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) },
+  ];
+
+  return { fields };
+}
+
+export default useFields;

src/components/hooks/useFilters.ts

@@ -22,7 +22,7 @@ export function useFilters() {
   };
 
   const typeFilters = {
-    string: [OPERATORS.equals, OPERATORS.notEquals],
+    string: [OPERATORS.equals, OPERATORS.notEquals, OPERATORS.contains, OPERATORS.doesNotContain],
     array: [OPERATORS.contains, OPERATORS.doesNotContain],
     boolean: [OPERATORS.true, OPERATORS.false],
     number: [

src/components/hooks/useNavigation.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { buildUrl } from 'next-basics';
+import { buildUrl, safeDecodeURIComponent } from 'next-basics';
 
 export function useNavigation(): {
   pathname: string;
@@ -16,7 +16,7 @@ export function useNavigation(): {
     const obj = {};
 
     for (const [key, value] of params.entries()) {
-      obj[key] = decodeURIComponent(value);
+      obj[key] = safeDecodeURIComponent(value);
     }
 
     return obj;

src/components/input/DateFilter.tsx

@@ -32,18 +32,14 @@ export function DateFilter({
   const { locale } = useLocale();
 
   const options = [
-    { label: formatMessage(labels.today), value: '1day' },
+    { label: formatMessage(labels.today), value: '0day' },
     {
       label: formatMessage(labels.lastHours, { x: 24 }),
       value: '24hour',
     },
-    {
-      label: formatMessage(labels.yesterday),
-      value: '-1day',
-    },
     {
       label: formatMessage(labels.thisWeek),
-      value: '1week',
+      value: '0week',
       divider: true,
     },
     {
@@ -52,7 +48,7 @@ export function DateFilter({
     },
     {
       label: formatMessage(labels.thisMonth),
-      value: '1month',
+      value: '0month',
       divider: true,
     },
     {
@@ -63,7 +59,15 @@ export function DateFilter({
       label: formatMessage(labels.lastDays, { x: 90 }),
       value: '90day',
     },
-    { label: formatMessage(labels.thisYear), value: '1year' },
+    { label: formatMessage(labels.thisYear), value: '0year', divider: true },
+    {
+      label: formatMessage(labels.lastMonths, { x: 6 }),
+      value: '6month',
+    },
+    {
+      label: formatMessage(labels.lastMonths, { x: 12 }),
+      value: '12month',
+    },
     showAllTime && {
       label: formatMessage(labels.allTime),
       value: 'all',

src/components/input/TeamsButton.tsx

@@ -7,9 +7,11 @@ import styles from './TeamsButton.module.css';
 
 export function TeamsButton({
   className,
+  showText = true,
   onChange,
 }: {
   className?: string;
+  showText?: boolean;
   onChange?: (value: string) => void;
 }) {
   const { user } = useLogin();
@@ -31,7 +33,7 @@ export function TeamsButton({
     <PopupTrigger>
       <Button className={classNames(styles.button, className)} variant="quiet">
         <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
-        <Text>{teamId ? team?.name : user.username}</Text>
+        {showText && <Text>{teamId ? team?.name : user.username}</Text>}
         <Icon>
           <Icons.ChevronDown />
         </Icon>

src/components/messages.ts

@@ -110,6 +110,7 @@ export const labels = defineMessages({
   yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
   thisWeek: { id: 'label.this-week', defaultMessage: 'This week' },
   lastDays: { id: 'label.last-days', defaultMessage: 'Last {x} days' },
+  lastMonths: { id: 'label.last-months', defaultMessage: 'Last {x} months' },
   thisMonth: { id: 'label.this-month', defaultMessage: 'This month' },
   thisYear: { id: 'label.this-year', defaultMessage: 'This year' },
   allTime: { id: 'label.all-time', defaultMessage: 'All time' },
@@ -147,6 +148,7 @@ export const labels = defineMessages({
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
   add: { id: 'label.add', defaultMessage: 'Add' },
+  update: { id: 'label.update', defaultMessage: 'Update' },
   window: { id: 'label.window', defaultMessage: 'Window' },
   runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
   field: { id: 'label.field', defaultMessage: 'Field' },

src/components/metrics/Legend.tsx

@@ -1,4 +1,5 @@
 import { StatusLight } from 'react-basics';
+import { safeDecodeURIComponent } from 'next-basics';
 import { colord } from 'colord';
 import classNames from 'classnames';
 import { LegendItem } from 'chart.js/auto';
@@ -31,7 +32,7 @@ export function Legend({
             onClick={() => onClick(item)}
           >
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
-              <span className={locale}>{text}</span>
+              <span className={locale}>{safeDecodeURIComponent(text)}</span>
             </StatusLight>
           </div>
         );

src/lang/nl-NL.json

@@ -2,86 +2,86 @@
   "label.access-code": "Toegangscode",
   "label.actions": "Acties",
   "label.activity-log": "Activiteiten logboek",
-  "label.add": "Add",
+  "label.add": "Toevoegen",
-  "label.add-description": "Add description",
+  "label.add-description": "Omschrijving toevoegen",
   "label.add-member": "Add member",
   "label.add-website": "Website koppelen",
   "label.administrator": "Beheerder",
-  "label.after": "After",
+  "label.after": "Na",
   "label.all": "Alles",
   "label.all-time": "Onbeperkt",
   "label.analytics": "Analytics",
-  "label.average": "Average",
+  "label.average": "Gemiddelde",
   "label.average-visit-time": "Gemiddelde bezoektijd",
   "label.back": "Terug",
-  "label.before": "Before",
+  "label.before": "Voor",
   "label.bounce-rate": "Bouncepercentage",
-  "label.breakdown": "Breakdown",
+  "label.breakdown": "Opsplitsen",
   "label.browser": "Browser",
   "label.browsers": "Browsers",
   "label.cancel": "Annuleren",
   "label.change-password": "Wachtwoord wijzigen",
   "label.cities": "Steden",
-  "label.city": "City",
+  "label.city": "Stad",
   "label.clear-all": "Filters wissen",
   "label.confirm": "Bevestigen",
   "label.confirm-password": "Wachtwoord bevestigen",
-  "label.contains": "Contains",
+  "label.contains": "Bevat",
   "label.continue": "Doorgaan",
   "label.countries": "Landen",
-  "label.country": "Country",
+  "label.country": "Land",
-  "label.create": "Create",
+  "label.create": "Aanmaken",
-  "label.create-report": "Create report",
+  "label.create-report": "Rapport aanmaken",
   "label.create-team": "Team aanmaken",
   "label.create-user": "Gebruiker maken",
   "label.created": "Gemaakt",
-  "label.created-by": "Created By",
+  "label.created-by": "Gemaakt Door",
   "label.current-password": "Huidig wachtwoord",
   "label.custom-range": "Aangepast bereik",
   "label.dashboard": "Overzicht",
   "label.data": "Gegevens",
-  "label.date": "Date",
+  "label.date": "Datum",
   "label.date-range": "Datumbereik",
-  "label.day": "Day",
+  "label.day": "Dag",
   "label.default-date-range": "Standaard bereik",
   "label.delete": "Verwijderen",
-  "label.delete-report": "Delete report",
+  "label.delete-report": "Rapport verwijderen",
   "label.delete-team": "Team verwijderen",
   "label.delete-user": "Verwijder gebruiker",
   "label.delete-website": "Website verwijderen",
-  "label.description": "Description",
+  "label.description": "Omschrijving",
   "label.desktop": "Computer",
   "label.details": "Informatie",
-  "label.device": "Device",
+  "label.device": "Apparaat",
   "label.devices": "Apparaten",
   "label.dismiss": "Negeren",
-  "label.does-not-contain": "Does not contain",
+  "label.does-not-contain": "Bevat geen",
   "label.domain": "Domein",
-  "label.dropoff": "Dropoff",
+  "label.dropoff": "Uitval",
   "label.edit": "Bewerken",
   "label.edit-dashboard": "Dashboard aanpassen",
-  "label.edit-member": "Edit member",
+  "label.edit-member": "Gebruiker aanpassen",
   "label.enable-share-url": "Sta delen via openbare URL toe",
-  "label.event": "Event",
+  "label.event": "Gebeurtenis",
-  "label.event-data": "Event data",
+  "label.event-data": "Datum gebeurtenis",
   "label.events": "Gebeurtenissen",
-  "label.false": "False",
+  "label.false": "Onwaar",
-  "label.field": "Field",
+  "label.field": "Veld",
-  "label.fields": "Fields",
+  "label.fields": "Velden",
   "label.filter": "Filter",
   "label.filter-combined": "Gecombineerd",
   "label.filter-raw": "Ruw",
   "label.filters": "Filters",
   "label.funnel": "Funnel",
-  "label.funnel-description": "Understand the conversion and drop-off rate of users.",
+  "label.funnel-description": "Ontdek de conversie- en uitvalpercentages van gebruikers.",
-  "label.greater-than": "Greater than",
+  "label.greater-than": "Groter dan",
-  "label.greater-than-equals": "Greater than or equals",
+  "label.greater-than-equals": "Groter of gelijk aan",
-  "label.insights": "Insights",
+  "label.insights": "Inzichten",
-  "label.insights-description": "Dive deeper into your data by using segments and filters.",
+  "label.insights-description": "Verken je gegevens verder door segmenten en filters te gebruiken.",
   "label.is": "Is",
-  "label.is-not": "Is not",
+  "label.is-not": "Is niet",
-  "label.is-not-set": "Is not set",
+  "label.is-not-set": "Is niet ingesteld",
-  "label.is-set": "Is set",
+  "label.is-set": "Is ingesteld",
   "label.join": "Lid worden",
   "label.join-team": "Word lid van een team",
   "label.language": "Taal",
@@ -91,30 +91,30 @@
   "label.last-hours": "Laatste {x} uur",
   "label.leave": "Verlaten",
   "label.leave-team": "Verlaat team",
-  "label.less-than": "Less than",
+  "label.less-than": "Minder dan",
-  "label.less-than-equals": "Less than or equals",
+  "label.less-than-equals": "Minder of gelijk aan",
   "label.login": "Inloggen",
   "label.logout": "Uitloggen",
-  "label.manage": "Manage",
+  "label.manage": "Beheren",
   "label.max": "Max",
-  "label.member": "Member",
+  "label.member": "Gebruiker",
   "label.members": "Gebruikers",
   "label.min": "Min",
   "label.mobile": "Mobiel",
   "label.more": "Toon meer",
-  "label.my-account": "My account",
+  "label.my-account": "Mijn profiel",
-  "label.my-websites": "My websites",
+  "label.my-websites": "Mijn websites",
   "label.name": "Naam",
   "label.new-password": "Nieuw wachtwoord",
   "label.none": "Geen",
   "label.number-of-records": "{x} {x, plural, one {record} other {records}}",
   "label.ok": "OK",
   "label.os": "OS",
-  "label.overview": "Overview",
+  "label.overview": "Overzicht",
   "label.owner": "Eigenaar",
-  "label.page-of": "Page {current} of {total}",
+  "label.page-of": "Pagina {current} van {total}",
   "label.page-views": "Paginaweergaven",
-  "label.pageTitle": "Page title",
+  "label.pageTitle": "Pagina titel",
   "label.pages": "Pagina's",
   "label.password": "Wachtwoord",
   "label.powered-by": "mogelijk gemaakt door {name}",
@@ -127,37 +127,37 @@
   "label.referrers": "Verwijzers",
   "label.refresh": "Vernieuwen",
   "label.regenerate": "Opnieuw genereren",
-  "label.region": "Region",
+  "label.region": "Regio",
   "label.regions": "Regio's",
   "label.remove": "Verwijderen",
-  "label.remove-member": "Remove member",
+  "label.remove-member": "Gebruiker verwijderen",
-  "label.reports": "Reports",
+  "label.reports": "Rapporten",
   "label.required": "Verplicht",
   "label.reset": "Opnieuw instellen",
   "label.reset-website": "Statistieken opnieuw instellen",
-  "label.retention": "Retention",
+  "label.retention": "Retentie",
-  "label.retention-description": "Measure your website stickiness by tracking how often users return.",
+  "label.retention-description": "Meet de retentie van je website door door bij te houden hoe vaak gebruikers terugkeren.",
   "label.role": "Gebruikersrol",
-  "label.run-query": "Run query",
+  "label.run-query": "Query uitvoeren",
   "label.save": "Opslaan",
   "label.screens": "Schermen",
-  "label.search": "Search",
+  "label.search": "Zoeken",
-  "label.select": "Select",
+  "label.select": "Selecteer",
-  "label.select-date": "Select date",
+  "label.select-date": "Datum selecteren",
-  "label.select-role": "Select role",
+  "label.select-role": "Rol selecteren",
   "label.select-website": "Website selecteren",
   "label.sessions": "Sessies",
   "label.settings": "Instellingen",
   "label.share-url": "URL delen",
   "label.single-day": "Enkele dag",
-  "label.sum": "Sum",
+  "label.sum": "Som",
   "label.tablet": "Tablet",
   "label.team": "Team",
   "label.team-id": "Team ID",
   "label.team-member": "Teamlid",
-  "label.team-name": "Team name",
+  "label.team-name": "Teamnaam",
   "label.team-owner": "Teameigenaar",
-  "label.team-view-only": "Team view only",
+  "label.team-view-only": "Team alleen lezen",
   "label.team-websites": "Team websites",
   "label.teams": "Teams",
   "label.theme": "Thema",
@@ -168,26 +168,26 @@
   "label.title": "Titel",
   "label.today": "Vandaag",
   "label.toggle-charts": "Grafieken tonen/verbergen",
-  "label.total": "Total",
+  "label.total": "Totaal",
-  "label.total-records": "Total records",
+  "label.total-records": "Totaal records",
   "label.tracking-code": "Volgcode",
   "label.transfer": "Transfer",
   "label.transfer-website": "Transfer website",
-  "label.true": "True",
+  "label.true": "Waar",
   "label.type": "Type",
   "label.unique": "Unique",
   "label.unique-visitors": "Unieke bezoekers",
   "label.unknown": "Onbekend",
-  "label.untitled": "Untitled",
+  "label.untitled": "Ongetiteld",
   "label.url": "URL",
-  "label.urls": "URLs",
+  "label.urls": "URL's",
   "label.user": "Gebruiker",
   "label.username": "Gebruikersnaam",
   "label.users": "Gebruikers",
-  "label.value": "Value",
+  "label.value": "Waarde",
   "label.view": "Weergave",
   "label.view-details": "Meer details",
-  "label.view-only": "View only",
+  "label.view-only": "Alleen inzien",
   "label.views": "Weergaven",
   "label.visitors": "Bezoekers",
   "label.website": "Website",
@@ -195,31 +195,31 @@
   "label.websites": "Websites",
   "label.window": "Window",
   "label.yesterday": "Gisteren",
-  "message.action-confirmation": "Type {confirmation} in the box below to confirm.",
+  "message.action-confirmation": "Typ {confirmation} in het veld hieronder om te bevestigen.",
   "message.active-users": "{x} actieve {x, plural, one {bezoeker} other {bezoekers}}",
   "message.confirm-delete": "Weet je zeker dat je {target} wilt verwijderen?",
   "message.confirm-leave": "Weet je zeker dat je {target} wilt verlaten?",
-  "message.confirm-remove": "Are you sure you want to remove {target}?",
+  "message.confirm-remove": "Weet je zeker dat je {target} wilt verwijderen?",
   "message.confirm-reset": "Weet je zeker dat je de statistieken van {target} opnieuw wilt instellen?",
-  "message.delete-team-warning": "Deleting a team will also delete all team websites.",
+  "message.delete-team-warning": "Als een team wordt verwijderd, worden ook alle websites van dat team verwijderd.",
-  "message.delete-website-warning": "Alle verwante gegezens zullen ook verwijderd worden.",
+  "message.delete-website-warning": "Alle verwante gegevens zullen ook verwijderd worden.",
   "message.error": "Er is iets misgegaan.",
   "message.event-log": "{event} op {url}",
   "message.go-to-settings": "Naar instellingen",
   "message.incorrect-username-password": "Incorrecte gebruikersnaam/wachtwoord.",
   "message.invalid-domain": "Ongeldig domein",
   "message.min-password-length": "Minimale lengte van {n} tekens",
-  "message.new-version-available": "A new version of Umami {version} is available!",
+  "message.new-version-available": "Een nieuwe versie van Umami {version} is beschikbaar!",
   "message.no-data-available": "Geen gegevens beschikbaar.",
-  "message.no-event-data": "No event data is available.",
+  "message.no-event-data": "Geen gegevens over de gebeurtenis beschikbaar.",
   "message.no-match-password": "Wachtwoorden komen niet overeen",
-  "message.no-results-found": "No results were found.",
+  "message.no-results-found": "Geen resultaten gevonden.",
   "message.no-team-websites": "Er zijn geen websites gekoppeld aan dit team.",
   "message.no-teams": "Er zijn nog geen teams aangemaakt.",
   "message.no-users": "Er zijn geen gebruikers.",
   "message.no-websites-configured": "Je hebt geen websites ingesteld.",
   "message.page-not-found": "Pagina niet gevonden.",
-  "message.reset-website": "To reset this website, type {confirmation} in the box below to confirm.",
+  "message.reset-website": "Typ {confirmation} in het veld hieronder om te bevestigen dat je de website wilt resetten.",
   "message.reset-website-warning": "Alle bijhorende statistieken van deze website worden verwijderd, maar jouw volgcode blijft gelden.",
   "message.saved": "Opslaan succesvol.",
   "message.share-url": "Met deze URL kan {target} openbaar gedeeld worden.",
@@ -227,12 +227,12 @@
   "message.team-not-found": "Team niet gevonden.",
   "message.team-websites-info": "Websites kunnen door iedereen in het team worden bekeken.",
   "message.tracking-code": "Volgcode",
-  "message.transfer-team-website-to-user": "Transfer this website to your account?",
+  "message.transfer-team-website-to-user": "Deze website toevoegen aan je account?",
-  "message.transfer-user-website-to-team": "Select the team to transfer this website to.",
+  "message.transfer-user-website-to-team": "Selecteer het team om deze website aan toe te voegen.",
-  "message.transfer-website": "Transfer website ownership to your account or another team.",
+  "message.transfer-website": "Draag het eigenaarschap van de website over naar jouw account, of een ander team.",
-  "message.triggered-event": "Triggered event",
+  "message.triggered-event": "Getriggerde gebeurtenis",
-  "message.user-deleted": "Gebruiker verwijderd.",
+  "message.user-deleted": "Gebruiker verwijderd",
-  "message.viewed-page": "Viewed page",
+  "message.viewed-page": "Bekeken pagina",
   "message.visitor-log": "Bezoeker uit {country} met {browser} op een {os} {device}",
-  "message.visitors-dropped-off": "Visitors dropped off"
+  "message.visitors-dropped-off": "Afgehaakte bezoekers"
 }

src/lib/clickhouse.ts

@@ -69,6 +69,8 @@ function mapFilter(column: string, filter: string, name: string, type: string =
       return `${column} != {${name}:${type}}`;
     case OPERATORS.contains:
       return `positionCaseInsensitive(${column}, {${name}:${type}}) > 0`;
+    case OPERATORS.doesNotContain:
+      return `positionCaseInsensitive(${column}, {${name}:${type}}) = 0`;
     default:
       return '';
   }

src/lib/constants.ts

@@ -228,7 +228,7 @@ export const URL_LENGTH = 500;
 export const PAGE_TITLE_LENGTH = 500;
 export const EVENT_NAME_LENGTH = 50;
 
-export const UTM_PARAMS = ['source', 'medium', 'campaign', 'term', 'content'];
+export const UTM_PARAMS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
 
 export const DESKTOP_OS = [
   'BeOS',

src/lib/date.ts

@@ -151,107 +151,52 @@ export function parseDateRange(value: string | object, locale = 'en-US'): DateRa
   const dateLocale = getDateLocale(locale);
   const { num, unit } = parseDateValue(value);
 
-  if (num === 1) {
   switch (unit) {
-      case 'day':
-        return {
-          startDate: startOfDay(now),
-          endDate: endOfDay(now),
-          unit: 'hour',
-          num: +num,
-          offset: 0,
-          value,
-        };
-      case 'week':
-        return {
-          startDate: startOfWeek(now, { locale: dateLocale }),
-          endDate: endOfWeek(now, { locale: dateLocale }),
-          unit: 'day',
-          num: +num,
-          offset: 0,
-          value,
-        };
-      case 'month':
-        return {
-          startDate: startOfMonth(now),
-          endDate: endOfMonth(now),
-          unit: 'day',
-          num: +num,
-          offset: 0,
-          value,
-        };
-      case 'year':
-        return {
-          startDate: startOfYear(now),
-          endDate: endOfYear(now),
-          unit: 'month',
-          num: +num,
-          offset: 0,
-          value,
-        };
-    }
-  }
-
-  if (num === -1) {
-    switch (unit) {
-      case 'day':
-        return {
-          startDate: subDays(startOfDay(now), 1),
-          endDate: subDays(endOfDay(now), 1),
-          unit: 'hour',
-          num: +num,
-          offset: 0,
-          value,
-        };
-      case 'week':
-        return {
-          startDate: subDays(startOfWeek(now, { locale: dateLocale }), 7),
-          endDate: subDays(endOfWeek(now, { locale: dateLocale }), 1),
-          unit: 'day',
-          num: +num,
-          offset: 0,
-          value,
-        };
-      case 'month':
-        return {
-          startDate: subMonths(startOfMonth(now), 1),
-          endDate: subMonths(endOfMonth(now), 1),
-          unit: 'day',
-          num: +num,
-          offset: 0,
-          value,
-        };
-      case 'year':
-        return {
-          startDate: subYears(startOfYear(now), 1),
-          endDate: subYears(endOfYear(now), 1),
-          unit: 'month',
-          num: +num,
-          offset: 0,
-          value,
-        };
-    }
-  }
-
-  switch (unit) {
-    case 'day':
-      return {
-        startDate: subDays(startOfDay(now), +num - 1),
-        endDate: endOfDay(now),
-        num: +num,
-        offset: 0,
-        unit,
-        value,
-      };
     case 'hour':
       return {
-        startDate: subHours(startOfHour(now), +num - 1),
+        startDate: subHours(startOfHour(now), num),
         endDate: endOfHour(now),
-        num: +num,
         offset: 0,
+        num: num || 1,
         unit,
         value,
       };
+    case 'day':
+      return {
+        startDate: subDays(startOfDay(now), num),
+        endDate: subDays(endOfDay(now), num ? 1 : 0),
+        unit: num ? 'day' : 'hour',
+        offset: 0,
+        num: num || 1,
+        value,
+      };
+    case 'week':
+      return {
+        startDate: subWeeks(startOfWeek(now, { locale: dateLocale }), num),
+        endDate: subWeeks(endOfWeek(now, { locale: dateLocale }), num),
+        unit: 'day',
+        offset: 0,
+        num: num || 1,
+        value,
+      };
+    case 'month':
+      return {
+        startDate: subMonths(startOfMonth(now), num),
+        endDate: subMonths(endOfMonth(now), num ? 1 : 0),
+        unit: num ? 'month' : 'day',
+        offset: 0,
+        num: num || 1,
+        value,
+      };
+    case 'year':
+      return {
+        startDate: subYears(startOfYear(now), num),
+        endDate: subYears(endOfYear(now), num),
+        unit: 'month',
+        offset: 0,
+        num: num || 1,
+        value,
+      };
   }
 }
 

src/lib/prisma.ts

@@ -100,6 +100,8 @@ function mapFilter(column: string, filter: string, name: string, type = 'varchar
       return `${column} != {{${name}::${type}}}`;
     case OPERATORS.contains:
       return `${column} like {{${name}::${type}}}`;
+    case OPERATORS.doesNotContain:
+      return `${column} not like {{${name}::${type}}}`;
     default:
       return '';
   }

src/queries/analytics/reports/getUTM.ts

@@ -1,6 +1,7 @@
 import clickhouse from 'lib/clickhouse';
 import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
 import prisma from 'lib/prisma';
+import { safeDecodeURIComponent } from 'next-basics';
 
 export async function getUTM(
   ...args: [
@@ -44,6 +45,7 @@ async function relationalQuery(
     where website_id = {{websiteId::uuid}}
       and created_at between {{startDate}} and {{endDate}}
       and url_query is not null
+      and event_type = 1
     group by 1
     `,
     {
@@ -82,6 +84,7 @@ async function clickhouseQuery(
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime64} and {endDate:DateTime64}
       and url_query != ''
+      and event_type = 1
     group by 1
     `,
     {
@@ -92,29 +95,27 @@ async function clickhouseQuery(
   ).then(result => parseParameters(result as any[]));
 }
 
-function parseParameters(result: any[]) {
+function parseParameters(data: any[]) {
-  return Object.values(result).reduce((data, { url_query, num }) => {
+  return data.reduce((obj, { url_query, num }) => {
-    const params = url_query.split('&').map(n => decodeURIComponent(n));
+    try {
+      const searchParams = new URLSearchParams(url_query);
 
-    for (const param of params) {
+      for (const [key, value] of searchParams) {
-      const [key, value] = param.split('=');
+        if (key.match(/^utm_(\w+)$/)) {
-
+          const name = safeDecodeURIComponent(value);
-      const match = key.match(/^utm_(\w+)$/);
+          if (!obj[key]) {
-
+            obj[key] = { [name]: +num };
-      if (match) {
+          } else if (!obj[key][name]) {
-        const group = match[1];
+            obj[key][name] = +num;
-        const name = decodeURIComponent(value);
-
-        if (!data[group]) {
-          data[group] = { [name]: +num };
-        } else if (!data[group][name]) {
-          data[group][name] = +num;
           } else {
-          data[group][name] += +num;
+            obj[key][name] += +num;
           }
         }
       }
+    } catch {
+      // Ignore
+    }
 
-    return data;
+    return obj;
   }, {});
 }

yarn.lock

@@ -2718,17 +2718,17 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tanstack/query-core@5.25.0":
+"@tanstack/query-core@5.28.6":
-  version "5.25.0"
+  version "5.28.6"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.25.0.tgz#e08ed0a9fad34c8005d1a282e57280031ac50cdc"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.28.6.tgz#a3bdb108f9f8d4e2ba3163068dbe6ff55b905a81"
-  integrity sha512-vlobHP64HTuSE68lWF1mEhwSRC5Q7gaT+a/m9S+ItuN+ruSOxe1rFnR9j0ACWQ314BPhBEVKfBQ6mHL0OWfdbQ==
+  integrity sha512-hnhotV+DnQtvtR3jPvbQMPNMW4KEK0J4k7c609zJ8muiNknm+yoDyMHmxTWM5ZnlZpsz0zOxYFr+mzRJNHWJsA==
 
-"@tanstack/react-query@^5.12.2":
+"@tanstack/react-query@^5.28.6":
-  version "5.25.0"
+  version "5.28.6"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.25.0.tgz#f4dac794cf10dd956aa56dbbdf67049a5ba2669d"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.28.6.tgz#0d52b0a98a1d842debf9c65496e20a9981a23bc4"
-  integrity sha512-u+n5R7mLO7RmeiIonpaCRVXNRWtZEef/aVZ/XGWRPa7trBIvGtzlfo0Ah7ZtnTYfrKEVwnZ/tzRCBcoiqJ/tFw==
+  integrity sha512-/DdYuDBSsA21Qbcder1R8Cr/3Nx0ZnA2lgtqKsLMvov8wL4+g0HBz/gWYZPlIsof7iyfQafyhg4wUVUsS3vWZw==
   dependencies:
-    "@tanstack/query-core" "5.25.0"
+    "@tanstack/query-core" "5.28.6"
 
 "@trysound/sax@0.2.0":
   version "0.2.0"
@@ -5829,9 +5829,9 @@ flatted@^3.2.9:
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 follow-redirects@^1.15.2:
-  version "1.15.4"
+  version "1.15.6"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
-  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -10354,7 +10354,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10430,7 +10439,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11024,10 +11040,10 @@ typescript@^4.0, typescript@^4.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
-typescript@^5.1.6:
+typescript@^5.4.3:
-  version "5.4.2"
+  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff"
-  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
+  integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
 
 ufo@^1.0.0, ufo@^1.2.0, ufo@^1.3.0, ufo@^1.3.1, ufo@^1.3.2:
   version "1.3.2"
@@ -11333,7 +11349,7 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -11351,6 +11367,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"