Merge branch 'dev' into boards

# Conflicts:
#	.gitignore
#	package.json
#	pnpm-lock.yaml
#	prisma/migrations/16_boards/migration.sql
#	prisma/schema.prisma
#	src/app/(main)/MobileNav.tsx
#	src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
#	src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx
#	src/components/common/SideMenu.tsx
#	src/lib/types.ts

prisma/migrations/15_add_share/migration.sql

@@ -2,6 +2,7 @@
 CREATE TABLE "share" (
     "share_id" UUID NOT NULL,
     "entity_id" UUID NOT NULL,
+    "name" VARCHAR(200) NOT NULL,
     "share_type" INTEGER NOT NULL,
     "slug" VARCHAR(100) NOT NULL,
     "parameters" JSONB NOT NULL,
@@ -11,9 +12,6 @@ CREATE TABLE "share" (
     CONSTRAINT "share_pkey" PRIMARY KEY ("share_id")
 );
 
--- CreateIndex
-CREATE UNIQUE INDEX "share_share_id_key" ON "share"("share_id");
-
 -- CreateIndex
 CREATE UNIQUE INDEX "share_slug_key" ON "share"("slug");
 
@@ -21,12 +19,13 @@ CREATE UNIQUE INDEX "share_slug_key" ON "share"("slug");
 CREATE INDEX "share_entity_id_idx" ON "share"("entity_id");
 
 -- MigrateData
-INSERT INTO "share" (share_id, entity_id, share_type, slug, parameters, created_at)
+INSERT INTO "share" (share_id, entity_id, name, share_type, slug, parameters, created_at)
 SELECT gen_random_uuid(),
        website_id,
+       name,
        1,
        share_id,
-       '{}'::jsonb,
+       '{"overview":true}'::jsonb,
        now()
 FROM "website"
 WHERE share_id IS NOT NULL;

prisma/migrations/17_remove_duplicate_key/migration.sql

@@ -0,0 +1,29 @@
+-- DropIndex
+DROP INDEX "link_link_id_key";
+
+-- DropIndex
+DROP INDEX "pixel_pixel_id_key";
+
+-- DropIndex
+DROP INDEX "report_report_id_key";
+
+-- DropIndex
+DROP INDEX "revenue_revenue_id_key";
+
+-- DropIndex
+DROP INDEX "segment_segment_id_key";
+
+-- DropIndex
+DROP INDEX "session_session_id_key";
+
+-- DropIndex
+DROP INDEX "team_team_id_key";
+
+-- DropIndex
+DROP INDEX "team_user_team_user_id_key";
+
+-- DropIndex
+DROP INDEX "user_user_id_key";
+
+-- DropIndex
+DROP INDEX "website_website_id_key";

scripts/build-geo.js

@@ -3,7 +3,7 @@ import 'dotenv/config';
 import fs from 'node:fs';
 import path from 'node:path';
 import https from 'https';
-import tar from 'tar';
+import { list } from 'tar';
 import zlib from 'zlib';
 
 if (process.env.VERCEL && !process.env.BUILD_GEO) {
@@ -40,7 +40,7 @@ const isDirectMmdb = url.endsWith('.mmdb');
 const downloadCompressed = url =>
   new Promise(resolve => {
     https.get(url, res => {
-      resolve(res.pipe(zlib.createGunzip({})).pipe(tar.t()));
+      resolve(res.pipe(zlib.createGunzip({})).pipe(list()));
     });
   });
 

src/app/(main)/admin/teams/AdminTeamsPage.tsx

@@ -3,14 +3,19 @@ import { Column } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 import { useMessages } from '@/components/hooks';
+import { TeamsAddButton } from '../../teams/TeamsAddButton';
 import { AdminTeamsDataTable } from './AdminTeamsDataTable';
 
 export function AdminTeamsPage() {
   const { formatMessage, labels } = useMessages();
 
+  const handleSave = () => {};
+
   return (
     <Column gap="6" margin="2">
-      <PageHeader title={formatMessage(labels.teams)} />
+      <PageHeader title={formatMessage(labels.teams)}>
+        <TeamsAddButton onSave={handleSave} isAdmin={true} />
+      </PageHeader>
       <Panel>
         <AdminTeamsDataTable />
       </Panel>

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

@@ -10,6 +10,7 @@ import {
   TextField,
 } from '@umami/react-zen';
 import { useMessages, useUpdateQuery } from '@/components/hooks';
+import { messages } from '@/components/messages';
 import { ROLES } from '@/lib/constants';
 
 export function UserAddForm({ onSave, onClose }) {
@@ -37,7 +38,10 @@ export function UserAddForm({ onSave, onClose }) {
       <FormField
         label={formatMessage(labels.password)}
         name="password"
-        rules={{ required: formatMessage(labels.required) }}
+        rules={{
+          required: formatMessage(labels.required),
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
+        }}
       >
         <PasswordField autoComplete="new-password" data-test="input-password" />
       </FormField>

src/app/(main)/links/LinksDataTable.tsx

@@ -2,13 +2,13 @@ import { DataGrid } from '@/components/common/DataGrid';
 import { useLinksQuery, useNavigation } from '@/components/hooks';
 import { LinksTable } from './LinksTable';
 
-export function LinksDataTable() {
+export function LinksDataTable({ showActions = false }: { showActions?: boolean }) {
   const { teamId } = useNavigation();
   const query = useLinksQuery({ teamId });
 
   return (
     <DataGrid query={query} allowSearch={true} autoFocus={false} allowPaging={true}>
-      {({ data }) => <LinksTable data={data} />}
+      {({ data }) => <LinksTable data={data} showActions={showActions} />}
     </DataGrid>
   );
 }

src/app/(main)/links/LinksPage.tsx

@@ -4,21 +4,30 @@ import { LinksDataTable } from '@/app/(main)/links/LinksDataTable';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { LinkAddButton } from './LinkAddButton';
 
 export function LinksPage() {
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const { teamId } = useNavigation();
+  const { data } = useTeamMembersQuery(teamId);
+
+  const showActions =
+    (teamId &&
+      data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly)
+        .length > 0) ||
+    (!teamId && user.role !== ROLES.viewOnly);
 
   return (
     <PageBody>
       <Column gap="6" margin="2">
         <PageHeader title={formatMessage(labels.links)}>
-          <LinkAddButton teamId={teamId} />
+          {showActions && <LinkAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>
-          <LinksDataTable />
+          <LinksDataTable showActions={showActions} />
         </Panel>
       </Column>
     </PageBody>

src/app/(main)/links/LinksTable.tsx

@@ -6,7 +6,11 @@ import { useMessages, useNavigation, useSlug } from '@/components/hooks';
 import { LinkDeleteButton } from './LinkDeleteButton';
 import { LinkEditButton } from './LinkEditButton';
 
-export function LinksTable(props: DataTableProps) {
+export interface LinksTableProps extends DataTableProps {
+  showActions?: boolean;
+}
+
+export function LinksTable({ showActions, ...props }: LinksTableProps) {
   const { formatMessage, labels } = useMessages();
   const { websiteId, renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('link');
@@ -36,16 +40,18 @@ export function LinksTable(props: DataTableProps) {
       <DataColumn id="created" label={formatMessage(labels.created)} width="200px">
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
-      <DataColumn id="action" align="end" width="100px">
-        {({ id, name }: any) => {
-          return (
-            <Row>
-              <LinkEditButton linkId={id} />
-              <LinkDeleteButton linkId={id} websiteId={websiteId} name={name} />
-            </Row>
-          );
-        }}
-      </DataColumn>
+      {showActions && (
+        <DataColumn id="action" align="end" width="100px">
+          {({ id, name }: any) => {
+            return (
+              <Row>
+                <LinkEditButton linkId={id} />
+                <LinkDeleteButton linkId={id} websiteId={websiteId} name={name} />
+              </Row>
+            );
+          }}
+        </DataColumn>
+      )}
     </DataTable>
   );
 }

src/app/(main)/pixels/PixelsDataTable.tsx

@@ -2,13 +2,13 @@ import { DataGrid } from '@/components/common/DataGrid';
 import { useNavigation, usePixelsQuery } from '@/components/hooks';
 import { PixelsTable } from './PixelsTable';
 
-export function PixelsDataTable() {
+export function PixelsDataTable({ showActions = false }: { showActions?: boolean }) {
   const { teamId } = useNavigation();
   const query = usePixelsQuery({ teamId });
 
   return (
     <DataGrid query={query} allowSearch={true} autoFocus={false} allowPaging={true}>
-      {({ data }) => <PixelsTable data={data} />}
+      {({ data }) => <PixelsTable data={data} showActions={showActions} />}
     </DataGrid>
   );
 }

src/app/(main)/pixels/PixelsPage.tsx

@@ -3,22 +3,31 @@ import { Column } from '@umami/react-zen';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { PixelAddButton } from './PixelAddButton';
 import { PixelsDataTable } from './PixelsDataTable';
 
 export function PixelsPage() {
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const { teamId } = useNavigation();
+  const { data } = useTeamMembersQuery(teamId);
+
+  const showActions =
+    (teamId &&
+      data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly)
+        .length > 0) ||
+    (!teamId && user.role !== ROLES.viewOnly);
 
   return (
     <PageBody>
       <Column gap="6" margin="2">
         <PageHeader title={formatMessage(labels.pixels)}>
-          <PixelAddButton teamId={teamId} />
+          {showActions && <PixelAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>
-          <PixelsDataTable />
+          <PixelsDataTable showActions={showActions} />
         </Panel>
       </Column>
     </PageBody>

src/app/(main)/pixels/PixelsTable.tsx

@@ -6,7 +6,11 @@ import { useMessages, useNavigation, useSlug } from '@/components/hooks';
 import { PixelDeleteButton } from './PixelDeleteButton';
 import { PixelEditButton } from './PixelEditButton';
 
-export function PixelsTable(props: DataTableProps) {
+export interface PixelsTableProps extends DataTableProps {
+  showActions?: boolean;
+}
+
+export function PixelsTable({ showActions, ...props }: PixelsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('pixel');
@@ -31,18 +35,20 @@ export function PixelsTable(props: DataTableProps) {
       <DataColumn id="created" label={formatMessage(labels.created)}>
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
-      <DataColumn id="action" align="end" width="100px">
-        {(row: any) => {
-          const { id, name } = row;
+      {showActions && (
+        <DataColumn id="action" align="end" width="100px">
+          {(row: any) => {
+            const { id, name } = row;
 
-          return (
-            <Row>
-              <PixelEditButton pixelId={id} />
-              <PixelDeleteButton pixelId={id} name={name} />
-            </Row>
-          );
-        }}
-      </DataColumn>
+            return (
+              <Row>
+                <PixelEditButton pixelId={id} />
+                <PixelDeleteButton pixelId={id} name={name} />
+              </Row>
+            );
+          }}
+        </DataColumn>
+      )}
     </DataTable>
   );
 }

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

@@ -7,8 +7,17 @@ import {
   TextField,
 } from '@umami/react-zen';
 import { useMessages, useUpdateQuery } from '@/components/hooks';
+import { UserSelect } from '@/components/input/UserSelect';
 
-export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
+export function TeamAddForm({
+  onSave,
+  onClose,
+  isAdmin,
+}: {
+  onSave: () => void;
+  onClose: () => void;
+  isAdmin: boolean;
+}) {
   const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutateAsync, error, isPending } = useUpdateQuery('/teams');
 
@@ -26,6 +35,11 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
       <FormField name="name" label={formatMessage(labels.name)}>
         <TextField autoComplete="off" />
       </FormField>
+      {isAdmin && (
+        <FormField name="ownerId" label={formatMessage(labels.teamOwner)}>
+          <UserSelect buttonProps={{ style: { outline: 'none' } }} />
+        </FormField>
+      )}
       <FormButtons>
         <Button isDisabled={isPending} onPress={onClose}>
           {formatMessage(labels.cancel)}

src/app/(main)/teams/TeamMemberAddForm.tsx

@@ -0,0 +1,76 @@
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormField,
+  FormSubmitButton,
+  ListItem,
+  Select,
+} from '@umami/react-zen';
+import { useMessages, useUpdateQuery } from '@/components/hooks';
+import { UserSelect } from '@/components/input/UserSelect';
+import { ROLES } from '@/lib/constants';
+
+const roles = [ROLES.teamManager, ROLES.teamMember, ROLES.teamViewOnly];
+
+export function TeamMemberAddForm({
+  teamId,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels, getErrorMessage } = useMessages();
+  const { mutateAsync, error, isPending } = useUpdateQuery(`/teams/${teamId}/users`);
+
+  const handleSubmit = async (data: any) => {
+    await mutateAsync(data, {
+      onSuccess: async () => {
+        onSave?.();
+        onClose?.();
+      },
+    });
+  };
+
+  const renderRole = role => {
+    switch (role) {
+      case ROLES.teamManager:
+        return formatMessage(labels.manager);
+      case ROLES.teamMember:
+        return formatMessage(labels.member);
+      case ROLES.teamViewOnly:
+        return formatMessage(labels.viewOnly);
+    }
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
+      <FormField
+        name="userId"
+        label={formatMessage(labels.username)}
+        rules={{ required: 'Required' }}
+      >
+        <UserSelect teamId={teamId} />
+      </FormField>
+      <FormField name="role" label={formatMessage(labels.role)} rules={{ required: 'Required' }}>
+        <Select items={roles} renderValue={value => renderRole(value as any)}>
+          {roles.map(value => (
+            <ListItem key={value} id={value}>
+              {renderRole(value)}
+            </ListItem>
+          ))}
+        </Select>
+      </FormField>
+      <FormButtons>
+        <Button isDisabled={isPending} onPress={onClose}>
+          {formatMessage(labels.cancel)}
+        </Button>
+        <FormSubmitButton variant="primary" isDisabled={isPending}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

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

@@ -4,7 +4,13 @@ import { Plus } from '@/components/icons';
 import { messages } from '@/components/messages';
 import { TeamAddForm } from './TeamAddForm';
 
-export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
+export function TeamsAddButton({
+  onSave,
+  isAdmin = false,
+}: {
+  onSave?: () => void;
+  isAdmin?: boolean;
+}) {
   const { formatMessage, labels } = useMessages();
   const { toast } = useToast();
   const { touch } = useModified();
@@ -25,7 +31,7 @@ export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.createTeam)} style={{ width: 400 }}>
-          {({ close }) => <TeamAddForm onSave={handleSave} onClose={close} />}
+          {({ close }) => <TeamAddForm onSave={handleSave} onClose={close} isAdmin={isAdmin} />}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/teams/TeamsMemberAddButton.tsx

@@ -0,0 +1,40 @@
+import { Button, Dialog, DialogTrigger, Icon, Modal, Text, useToast } from '@umami/react-zen';
+import { useMessages, useModified } from '@/components/hooks';
+import { Plus } from '@/components/icons';
+import { messages } from '@/components/messages';
+import { TeamMemberAddForm } from './TeamMemberAddForm';
+
+export function TeamsMemberAddButton({
+  teamId,
+  onSave,
+}: {
+  teamId: string;
+  onSave?: () => void;
+  isAdmin?: boolean;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const handleSave = async () => {
+    toast(formatMessage(messages.saved));
+    touch('teams:members');
+    onSave?.();
+  };
+
+  return (
+    <DialogTrigger>
+      <Button>
+        <Icon>
+          <Plus />
+        </Icon>
+        <Text>{formatMessage(labels.addMember)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.addMember)} style={{ width: 400 }}>
+          {({ close }) => <TeamMemberAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/app/(main)/teams/[teamId]/TeamSettings.tsx

@@ -1,10 +1,12 @@
-import { Column } from '@umami/react-zen';
+import { Column, Heading, Row } from '@umami/react-zen';
 import { TeamLeaveButton } from '@/app/(main)/teams/TeamLeaveButton';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useLoginQuery, useNavigation, useTeam } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeam } from '@/components/hooks';
 import { Users } from '@/components/icons';
+import { labels } from '@/components/messages';
 import { ROLES } from '@/lib/constants';
+import { TeamsMemberAddButton } from '../TeamsMemberAddButton';
 import { TeamEditForm } from './TeamEditForm';
 import { TeamManage } from './TeamManage';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
@@ -13,6 +15,7 @@ export function TeamSettings({ teamId }: { teamId: string }) {
   const team: any = useTeam();
   const { user } = useLoginQuery();
   const { pathname } = useNavigation();
+  const { formatMessage } = useMessages();
 
   const isAdmin = pathname.includes('/admin');
 
@@ -37,6 +40,10 @@ export function TeamSettings({ teamId }: { teamId: string }) {
         <TeamEditForm teamId={teamId} allowEdit={canEdit} showAccessCode={canEdit} />
       </Panel>
       <Panel>
+        <Row alignItems="center" justifyContent="space-between">
+          <Heading size="2">{formatMessage(labels.members)}</Heading>
+          {isAdmin && <TeamsMemberAddButton teamId={teamId} />}
+        </Row>
         <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
       </Panel>
       {isTeamOwner && (

src/app/(main)/websites/WebsitesPage.tsx

@@ -3,22 +3,31 @@ import { Column } from '@umami/react-zen';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { WebsiteAddButton } from './WebsiteAddButton';
 import { WebsitesDataTable } from './WebsitesDataTable';
 
 export function WebsitesPage() {
+  const { user } = useLoginQuery();
   const { teamId } = useNavigation();
   const { formatMessage, labels } = useMessages();
+  const { data } = useTeamMembersQuery(teamId);
+
+  const showActions =
+    (teamId &&
+      data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly)
+        .length > 0) ||
+    (!teamId && user.role !== ROLES.viewOnly);
 
   return (
     <PageBody>
       <Column gap="6" margin="2">
         <PageHeader title={formatMessage(labels.websites)}>
-          <WebsiteAddButton teamId={teamId} />
+          {showActions && <WebsiteAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>
-          <WebsitesDataTable teamId={teamId} />
+          <WebsitesDataTable teamId={teamId} showActions={showActions} />
         </Panel>
       </Column>
     </PageBody>

src/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm.tsx

@@ -1,6 +1,6 @@
-import { Button, Column, Grid, List, ListItem } from '@umami/react-zen';
+import { Button, Column, Grid, List, ListItem, ListSection } from '@umami/react-zen';
 import { useState } from 'react';
-import { useFields, useMessages } from '@/components/hooks';
+import { type FieldGroup, useFields, useMessages } from '@/components/hooks';
 
 export function FieldSelectForm({
   selectedFields = [],
@@ -13,7 +13,7 @@ export function FieldSelectForm({
 }) {
   const [selected, setSelected] = useState(selectedFields);
   const { formatMessage, labels } = useMessages();
-  const { fields } = useFields();
+  const { fields, groupLabels } = useFields();
 
   const handleChange = (value: string[]) => {
     setSelected(value);
@@ -24,17 +24,38 @@ export function FieldSelectForm({
     onClose();
   };
 
+  const groupedFields = fields
+    .filter(field => field.name !== 'event')
+    .reduce(
+      (acc, field) => {
+        const group = field.group;
+        if (!acc[group]) {
+          acc[group] = [];
+        }
+        acc[group].push(field);
+        return acc;
+      },
+      {} as Record<FieldGroup, typeof fields>,
+    );
+
   return (
     <Column gap="6">
-      <List value={selected} onChange={handleChange} selectionMode="multiple">
-        {fields.map(({ name, label }) => {
-          return (
-            <ListItem key={name} id={name}>
-              {label}
-            </ListItem>
-          );
-        })}
-      </List>
+      <Column gap="3" overflowY="auto" maxHeight="400px">
+        <List value={selected} onChange={handleChange} selectionMode="multiple">
+          {groupLabels.map(({ key: groupKey, label }) => {
+            const groupFields = groupedFields[groupKey];
+            return (
+              <ListSection key={groupKey} title={label}>
+                {groupFields.map(field => (
+                  <ListItem key={field.name} id={field.name}>
+                    {field.filterLabel}
+                  </ListItem>
+                ))}
+              </ListSection>
+            );
+          })}
+        </List>
+      </Column>
       <Grid columns="1fr 1fr" gap>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
         <Button onPress={handleApply} variant="primary">

src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx

@@ -1,6 +1,6 @@
 import { Box, Column, Dialog, Grid, Icon, ProgressBar, Row, Text } from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useMessages, useResultQuery } from '@/components/hooks';
+import { useMessages, useNavigation, useResultQuery } from '@/components/hooks';
 import { File, User } from '@/components/icons';
 import { ReportEditButton } from '@/components/input/ReportEditButton';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
@@ -20,6 +20,8 @@ type FunnelResult = {
 
 export function Funnel({ id, name, type, parameters, websiteId }) {
   const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
   const { data, error, isLoading } = useResultQuery(type, {
     websiteId,
     ...parameters,
@@ -36,21 +38,22 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
               </Text>
             </Row>
           </Column>
-          <Column>
-            <ReportEditButton id={id} name={name} type={type}>
-              {({ close }) => {
-                return (
-                  <Dialog
-                    title={formatMessage(labels.funnel)}
-                    variant="modal"
-                    style={{ minHeight: 300, minWidth: 400 }}
-                  >
-                    <FunnelEditForm id={id} websiteId={websiteId} onClose={close} />
-                  </Dialog>
-                );
-              }}
-            </ReportEditButton>
-          </Column>
+          {!isSharePage && (
+            <Column>
+              <ReportEditButton id={id} name={name} type={type}>
+                {({ close }) => {
+                  return (
+                    <Dialog
+                      title={formatMessage(labels.funnel)}
+                      style={{ minHeight: 300, minWidth: 400 }}
+                    >
+                      <FunnelEditForm id={id} websiteId={websiteId} onClose={close} />
+                    </Dialog>
+                  );
+                }}
+              </ReportEditButton>
+            </Column>
+          )}
         </Grid>
         {data?.map(
           (

src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage.tsx

@@ -4,7 +4,7 @@ import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteContro
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { useDateRange, useReportsQuery } from '@/components/hooks';
+import { useDateRange, useNavigation, useReportsQuery } from '@/components/hooks';
 import { Funnel } from './Funnel';
 import { FunnelAddButton } from './FunnelAddButton';
 
@@ -13,13 +13,17 @@ export function FunnelsPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
 
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
-      <SectionHeader>
-        <FunnelAddButton websiteId={websiteId} />
-      </SectionHeader>
+      {!isSharePage && (
+        <SectionHeader>
+          <FunnelAddButton websiteId={websiteId} />
+        </SectionHeader>
+      )}
       <LoadingPanel data={data} isLoading={isLoading} error={error}>
         {data && (
           <Grid gap>

src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx

@@ -1,6 +1,6 @@
 import { Column, Dialog, Grid, Icon, ProgressBar, Row, Text } from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useMessages, useResultQuery } from '@/components/hooks';
+import { useMessages, useNavigation, useResultQuery } from '@/components/hooks';
 import { File, User } from '@/components/icons';
 import { ReportEditButton } from '@/components/input/ReportEditButton';
 import { Lightning } from '@/components/svg';
@@ -25,6 +25,8 @@ export type GoalData = { num: number; total: number };
 
 export function Goal({ id, name, type, parameters, websiteId, startDate, endDate }: GoalProps) {
   const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
   const { data, error, isLoading, isFetching } = useResultQuery<GoalData>(type, {
     websiteId,
     startDate,
@@ -45,21 +47,23 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
                 </Text>
               </Row>
             </Column>
-            <Column>
-              <ReportEditButton id={id} name={name} type={type}>
-                {({ close }) => {
-                  return (
-                    <Dialog
-                      title={formatMessage(labels.goal)}
-                      variant="modal"
-                      style={{ minHeight: 300, minWidth: 400 }}
-                    >
-                      <GoalEditForm id={id} websiteId={websiteId} onClose={close} />
-                    </Dialog>
-                  );
-                }}
-              </ReportEditButton>
-            </Column>
+            {!isSharePage && (
+              <Column>
+                <ReportEditButton id={id} name={name} type={type}>
+                  {({ close }) => {
+                    return (
+                      <Dialog
+                        title={formatMessage(labels.goal)}
+                        variant="modal"
+                        style={{ minHeight: 300, minWidth: 400 }}
+                      >
+                        <GoalEditForm id={id} websiteId={websiteId} onClose={close} />
+                      </Dialog>
+                    );
+                  }}
+                </ReportEditButton>
+              </Column>
+            )}
           </Grid>
           <Row alignItems="center" justifyContent="space-between" gap>
             <Text color="muted">

src/app/(main)/websites/[websiteId]/(reports)/goals/GoalsPage.tsx

@@ -4,7 +4,7 @@ import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteContro
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { useDateRange, useReportsQuery } from '@/components/hooks';
+import { useDateRange, useNavigation, useReportsQuery } from '@/components/hooks';
 import { Goal } from './Goal';
 import { GoalAddButton } from './GoalAddButton';
 
@@ -13,13 +13,17 @@ export function GoalsPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
 
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
-      <SectionHeader>
-        <GoalAddButton websiteId={websiteId} />
-      </SectionHeader>
+      {!isSharePage && (
+        <SectionHeader>
+          <GoalAddButton websiteId={websiteId} />
+        </SectionHeader>
+      )}
       <LoadingPanel data={data} isLoading={isLoading} error={error}>
         {data && (
           <Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>

src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx

@@ -21,9 +21,15 @@ export interface JourneyProps {
   steps: number;
   startStep?: string;
   endStep?: string;
+  view: string;
 }
 
-export function Journey({ websiteId, steps, startStep, endStep }: JourneyProps) {
+const EVENT_TYPES = {
+  views: 1,
+  events: 2,
+};
+
+export function Journey({ websiteId, steps, startStep, endStep, view }: JourneyProps) {
   const [selectedNode, setSelectedNode] = useState(null);
   const [activeNode, setActiveNode] = useState(null);
   const { formatMessage, labels } = useMessages();
@@ -32,6 +38,8 @@ export function Journey({ websiteId, steps, startStep, endStep }: JourneyProps)
     steps,
     startStep,
     endStep,
+    view,
+    eventType: EVENT_TYPES[view],
   });
 
   useEscapeKey(() => setSelectedNode(null));

src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx

@@ -1,9 +1,10 @@
 'use client';
-import { Column, Grid, ListItem, SearchField, Select } from '@umami/react-zen';
+import { Column, Grid, ListItem, Row, SearchField, Select } from '@umami/react-zen';
 import { useState } from 'react';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { Panel } from '@/components/common/Panel';
 import { useDateRange, useMessages } from '@/components/hooks';
+import { FilterButtons } from '@/components/input/FilterButtons';
 import { Journey } from './Journey';
 
 const JOURNEY_STEPS = [2, 3, 4, 5, 6, 7];
@@ -14,10 +15,26 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
+  const [view, setView] = useState('all');
   const [steps, setSteps] = useState(DEFAULT_STEP);
   const [startStep, setStartStep] = useState('');
   const [endStep, setEndStep] = useState('');
 
+  const buttons = [
+    {
+      id: 'all',
+      label: formatMessage(labels.all),
+    },
+    {
+      id: 'views',
+      label: formatMessage(labels.views),
+    },
+    {
+      id: 'events',
+      label: formatMessage(labels.events),
+    },
+  ];
+
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
@@ -52,6 +69,9 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
           />
         </Column>
       </Grid>
+      <Row justifyContent="flex-end">
+        <FilterButtons items={buttons} value={view} onChange={setView} />
+      </Row>
       <Panel height="900px" allowFullscreen>
         <Journey
           websiteId={websiteId}
@@ -60,6 +80,7 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
           steps={steps}
           startStep={startStep}
           endStep={endStep}
+          view={view}
         />
       </Panel>
     </Column>

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

@@ -21,30 +21,28 @@ export function WebsiteChart({
   const { pageviews, sessions, compare } = (data || {}) as any;
 
   const chartData = useMemo(() => {
-    if (data) {
-      const result = {
-        pageviews,
-        sessions,
-      };
+    if (!data) {
+      return { pageviews: [], sessions: [] };
+    }
 
-      if (compare) {
-        result.compare = {
-          pageviews: result.pageviews.map(({ x }, i) => ({
+    return {
+      pageviews,
+      sessions,
+      ...(compare && {
+        compare: {
+          pageviews: pageviews.map(({ x }, i) => ({
             x,
             y: compare.pageviews[i]?.y,
             d: compare.pageviews[i]?.x,
           })),
-          sessions: result.sessions.map(({ x }, i) => ({
+          sessions: sessions.map(({ x }, i) => ({
             x,
             y: compare.sessions[i]?.y,
             d: compare.sessions[i]?.x,
           })),
-        };
-      }
-
-      return result;
-    }
-    return { pageviews: [], sessions: [] };
+        },
+      }),
+    };
   }, [data, startDate, endDate, unit]);
 
   return (

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

@@ -15,6 +15,7 @@ export function WebsiteControls({
 }: {
   websiteId: string;
   allowFilter?: boolean;
+  allowBounceFilter?: boolean;
   allowDateFilter?: boolean;
   allowMonthFilter?: boolean;
   allowDownload?: boolean;
@@ -23,8 +24,8 @@ export function WebsiteControls({
   return (
     <Column gap>
       <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap>
-        <Row alignItems="center" justifyContent="flex-start">
-          {allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
+        <Row alignItems="center" justifyContent="flex-start" gap="4">
+          {allowFilter && <WebsiteFilterButton websiteId={websiteId} />}
         </Row>
         <Row alignItems="center" justifyContent={{ xs: 'flex-start', md: 'flex-end' }}>
           {allowDateFilter && (

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

@@ -4,10 +4,14 @@ import {
   AppWindow,
   Cpu,
   Earth,
+  Fingerprint,
   Globe,
+  KeyRound,
   Landmark,
   Languages,
   Laptop,
+  Layers,
+  Link2,
   LogIn,
   LogOut,
   MapPin,
@@ -15,9 +19,11 @@ import {
   Monitor,
   Network,
   Search,
+  Send,
   Share2,
   SquareSlash,
   Tag,
+  Target,
   Type,
 } from '@/components/icons';
 import { Lightning } from '@/components/svg';
@@ -154,6 +160,41 @@ export function WebsiteExpandedMenu({
         },
       ].filter(filterExcluded),
     },
+    {
+      label: formatMessage(labels.utm),
+      items: [
+        {
+          id: 'utmSource',
+          label: formatMessage(labels.source),
+          path: updateParams({ view: 'utmSource' }),
+          icon: <Link2 />,
+        },
+        {
+          id: 'utmMedium',
+          label: formatMessage(labels.medium),
+          path: updateParams({ view: 'utmMedium' }),
+          icon: <Send />,
+        },
+        {
+          id: 'utmCampaign',
+          label: formatMessage(labels.campaign),
+          path: updateParams({ view: 'utmCampaign' }),
+          icon: <Target />,
+        },
+        {
+          id: 'utmContent',
+          label: formatMessage(labels.content),
+          path: updateParams({ view: 'utmContent' }),
+          icon: <Layers />,
+        },
+        {
+          id: 'utmTerm',
+          label: formatMessage(labels.term),
+          path: updateParams({ view: 'utmTerm' }),
+          icon: <KeyRound />,
+        },
+      ].filter(filterExcluded),
+    },
     {
       label: formatMessage(labels.other),
       items: [
@@ -169,6 +210,12 @@ export function WebsiteExpandedMenu({
           path: updateParams({ view: 'hostname' }),
           icon: <Network />,
         },
+        {
+          id: 'distinctId',
+          label: formatMessage(labels.distinctId),
+          path: updateParams({ view: 'distinctId' }),
+          icon: <Fingerprint />,
+        },
         {
           id: 'tag',
           label: formatMessage(labels.tag),

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

@@ -1,15 +1,18 @@
-import { Row } from '@umami/react-zen';
-import { WebsiteShareForm } from '@/app/(main)/websites/[websiteId]/settings/WebsiteShareForm';
+import { Icon, Row, Text } from '@umami/react-zen';
 import { Favicon } from '@/components/common/Favicon';
-import { IconLabel } from '@/components/common/IconLabel';
 import { LinkButton } from '@/components/common/LinkButton';
 import { PageHeader } from '@/components/common/PageHeader';
 import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
-import { Edit, Share } from '@/components/icons';
-import { DialogButton } from '@/components/input/DialogButton';
+import { Edit } from '@/components/icons';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 
-export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
+export function WebsiteHeader({
+  showActions,
+  allowLink = true,
+}: {
+  showActions?: boolean;
+  allowLink?: boolean;
+}) {
   const website = useWebsite();
   const { renderUrl, pathname } = useNavigation();
   const isSettings = pathname.endsWith('/settings');
@@ -24,32 +27,20 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
     <PageHeader
       title={website.name}
       icon={<Favicon domain={website.domain} />}
-      titleHref={renderUrl(`/websites/${website.id}`, false)}
+      titleHref={allowLink ? renderUrl(`/websites/${website.id}`, false) : undefined}
     >
       <Row alignItems="center" gap="6" wrap="wrap">
         <ActiveUsers websiteId={website.id} />
 
         {showActions && (
-          <Row alignItems="center" gap>
-            <ShareButton websiteId={website?.id} shareId={website?.shareId} />
-            <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
-              <IconLabel icon={<Edit />}>{formatMessage(labels.edit)}</IconLabel>
-            </LinkButton>
-          </Row>
+          <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
+            <Icon>
+              <Edit />
+            </Icon>
+            <Text>{formatMessage(labels.edit)}</Text>
+          </LinkButton>
         )}
       </Row>
     </PageHeader>
   );
 }
-
-const ShareButton = ({ websiteId, shareId }) => {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <DialogButton icon={<Share />} label={formatMessage(labels.share)} width="800px">
-      {({ close }) => {
-        return <WebsiteShareForm websiteId={websiteId} shareId={shareId} onClose={close} />;
-      }}
-    </DialogButton>
-  );
-};

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

@@ -9,11 +9,10 @@ import { WebsiteNav } from './WebsiteNav';
 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
+      <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%">
         <Column
           display={{ xs: 'none', lg: 'flex' }}
           width="240px"
-          height="100%"
           border="right"
           backgroundColor
           marginRight="2"

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

@@ -10,7 +10,7 @@ import {
 } from '@umami/react-zen';
 import { Fragment } from 'react';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { Edit, More, Share } from '@/components/icons';
+import { Edit, MoreHorizontal, Share } from '@/components/icons';
 
 export function WebsiteMenu({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
@@ -33,7 +33,7 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
     <MenuTrigger>
       <Button variant="quiet">
         <Icon>
-          <More />
+          <MoreHorizontal />
         </Icon>
       </Button>
       <Popover placement="bottom">

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

@@ -7,14 +7,18 @@ import { formatLongNumber, formatShortTime } from '@/lib/format';
 
 export function WebsiteMetricsBar({
   websiteId,
+  compareMode,
 }: {
   websiteId: string;
   showChange?: boolean;
   compareMode?: boolean;
 }) {
-  const { isAllTime } = useDateRange();
+  const { isAllTime, dateCompare } = useDateRange();
   const { formatMessage, labels, getErrorMessage } = useMessages();
-  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(websiteId);
+  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery({
+    websiteId,
+    compare: compareMode ? dateCompare?.compare : undefined,
+  });
 
   const { pageviews, visitors, visits, bounces, totaltime, comparison } = data || {};
 

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

@@ -29,6 +29,8 @@ export function WebsiteNav({
       event: undefined,
       compare: undefined,
       view: undefined,
+      unit: undefined,
+      excludeBounce: undefined,
     });
 
   const items = [

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

@@ -1,7 +1,8 @@
 'use client';
-import { Column } from '@umami/react-zen';
+import { Column, Row } from '@umami/react-zen';
 import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
 import { Panel } from '@/components/common/Panel';
+import { UnitFilter } from '@/components/input/UnitFilter';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteControls } from './WebsiteControls';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
@@ -10,9 +11,12 @@ import { WebsitePanels } from './WebsitePanels';
 export function WebsitePage({ websiteId }: { websiteId: string }) {
   return (
     <Column gap>
-      <WebsiteControls websiteId={websiteId} />
+      <WebsiteControls websiteId={websiteId} allowBounceFilter={true} />
       <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
       <Panel minHeight="520px">
+        <Row justifyContent="end">
+          <UnitFilter />
+        </Row>
         <WebsiteChart websiteId={websiteId} />
       </Panel>
       <WebsitePanels websiteId={websiteId} />

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

@@ -1,15 +1,13 @@
 import { Grid, Heading, Row, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
 import { GridRow } from '@/components/common/GridRow';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
-import { EventsChart } from '@/components/metrics/EventsChart';
+import { useMessages } from '@/components/hooks';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { WeeklyTraffic } from '@/components/metrics/WeeklyTraffic';
 import { WorldMap } from '@/components/metrics/WorldMap';
 
 export function WebsitePanels({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { pathname } = useNavigation();
   const tableProps = {
     websiteId,
     limit: 10,
@@ -18,7 +16,6 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
     metric: formatMessage(labels.visitors),
   };
   const rowProps = { minHeight: '570px' };
-  const isSharePage = pathname.includes('/share/');
 
   return (
     <Grid gap="3">
@@ -116,25 +113,6 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           <WeeklyTraffic websiteId={websiteId} />
         </Panel>
       </GridRow>
-      {isSharePage && (
-        <GridRow layout="two-one" {...rowProps}>
-          <Panel>
-            <Heading size="2">{formatMessage(labels.events)}</Heading>
-            <Row border="bottom" marginBottom="4" />
-            <MetricsTable
-              websiteId={websiteId}
-              type="event"
-              title={formatMessage(labels.event)}
-              metric={formatMessage(labels.count)}
-              limit={15}
-              filterLink={false}
-            />
-          </Panel>
-          <Panel gridColumn={{ xs: 'span 1', md: 'span 2' }}>
-            <EventsChart websiteId={websiteId} />
-          </Panel>
-        </GridRow>
-      )}
     </Grid>
   );
 }

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

@@ -10,7 +10,7 @@ export function ComparePage({ websiteId }: { websiteId: string }) {
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} allowCompare={true} />
-      <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
+      <WebsiteMetricsBar websiteId={websiteId} compareMode={true} showChange={true} />
       <Panel minHeight="520px">
         <WebsiteChart websiteId={websiteId} compareMode={true} />
       </Panel>

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

@@ -88,11 +88,41 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
       label: formatMessage(labels.events),
       path: renderPath('event'),
     },
+    {
+      id: 'utmSource',
+      label: formatMessage(labels.utmSource),
+      path: renderPath('utmSource'),
+    },
+    {
+      id: 'utmMedium',
+      label: formatMessage(labels.utmMedium),
+      path: renderPath('utmMedium'),
+    },
+    {
+      id: 'utmCampaign',
+      label: formatMessage(labels.utmCampaign),
+      path: renderPath('utmCampaign'),
+    },
+    {
+      id: 'utmContent',
+      label: formatMessage(labels.utmContent),
+      path: renderPath('utmContent'),
+    },
+    {
+      id: 'utmTerm',
+      label: formatMessage(labels.utmTerm),
+      path: renderPath('utmTerm'),
+    },
     {
       id: 'hostname',
       label: formatMessage(labels.hostname),
       path: renderPath('hostname'),
     },
+    {
+      id: 'distinctId',
+      label: formatMessage(labels.distinctId),
+      path: renderPath('distinctId'),
+    },
     {
       id: 'tag',
       label: formatMessage(labels.tags),

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

@@ -1,12 +1,18 @@
 'use client';
 import { Column, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
-import { type Key, useState } from 'react';
+import locale from 'date-fns/locale/af';
+import { type Key, useMemo, useState } from 'react';
 import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 import { useMessages } from '@/components/hooks';
+import { useEventStatsQuery } from '@/components/hooks/queries/useEventStatsQuery';
 import { EventsChart } from '@/components/metrics/EventsChart';
+import { MetricCard } from '@/components/metrics/MetricCard';
+import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
+import { formatLongNumber } from '@/lib/format';
 import { getItem, setItem } from '@/lib/storage';
 import { EventProperties } from './EventProperties';
 import { EventsDataTable } from './EventsDataTable';
@@ -15,16 +21,61 @@ const KEY_NAME = 'umami.events.tab';
 
 export function EventsPage({ websiteId }) {
   const [tab, setTab] = useState(getItem(KEY_NAME) || 'chart');
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
+  const { data, isLoading, isFetching, error } = useEventStatsQuery({
+    websiteId,
+  });
 
   const handleSelect = (value: Key) => {
     setItem(KEY_NAME, value);
     setTab(value);
   };
 
+  const metrics = useMemo(() => {
+    if (!data) return [];
+
+    const { events, visitors, visits, uniqueEvents } = data || {};
+
+    return [
+      {
+        value: visitors,
+        label: formatMessage(labels.visitors),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: visits,
+        label: formatMessage(labels.visits),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: events,
+        label: formatMessage(labels.events),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: uniqueEvents,
+        label: formatMessage(labels.uniqueEvents),
+        formatValue: formatLongNumber,
+      },
+    ] as any;
+  }, [data, locale]);
+
   return (
     <Column gap="3">
       <WebsiteControls websiteId={websiteId} />
+      <LoadingPanel
+        data={metrics}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        error={getErrorMessage(error)}
+        minHeight="136px"
+      >
+        <MetricsBar>
+          {metrics?.map(({ label, value, formatValue }) => {
+            return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
+          })}
+        </MetricsBar>
+      </LoadingPanel>
       <Panel>
         <Tabs selectedKey={tab} onSelectionChange={key => handleSelect(key)}>
           <TabList>

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

@@ -25,6 +25,19 @@ export function EventsTable(props: DataTableProps) {
   const { updateParams } = useNavigation();
   const { formatValue } = useFormat();
 
+  const renderLink = (label: string, hostname: string) => {
+    return (
+      <a
+        href={`//${hostname}${label}`}
+        style={{ fontWeight: 'bold' }}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {label}
+      </a>
+    );
+  };
+
   return (
     <DataTable {...props}>
       <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
@@ -43,7 +56,7 @@ export function EventsTable(props: DataTableProps) {
                 title={row.eventName || row.urlPath}
                 truncate
               >
-                {row.eventName || row.urlPath}
+                {row.eventName || renderLink(row.urlPath, row.hostname)}
               </Text>
               {row.hasData > 0 && <PropertiesButton websiteId={row.websiteId} eventId={row.id} />}
             </Row>

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

@@ -75,8 +75,9 @@ export function RealtimeLog({ data }: { data: any }) {
     os: string;
     country: string;
     device: string;
+    hostname: string;
   }) => {
-    const { __type, eventName, urlPath, browser, os, country, device } = log;
+    const { __type, eventName, urlPath, browser, os, country, device, hostname } = log;
 
     if (__type === TYPE_EVENT) {
       return (
@@ -87,7 +88,8 @@ export function RealtimeLog({ data }: { data: any }) {
             url: (
               <a
                 key="a"
-                href={`//${website?.domain}${urlPath}`}
+                href={`//${hostname}${urlPath}`}
+                style={{ fontWeight: 'bold' }}
                 target="_blank"
                 rel="noreferrer noopener"
               >
@@ -101,7 +103,12 @@ export function RealtimeLog({ data }: { data: any }) {
 
     if (__type === TYPE_PAGEVIEW) {
       return (
-        <a href={`//${website?.domain}${urlPath}`} target="_blank" rel="noreferrer noopener">
+        <a
+          href={`//${hostname}${urlPath}`}
+          style={{ fontWeight: 'bold' }}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
           {urlPath}
         </a>
       );

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

@@ -39,10 +39,23 @@ export function SessionActivity({
   const { isMobile } = useMobile();
   let lastDay = null;
 
+  const renderLink = (label: string, hostname: string) => {
+    return (
+      <a
+        href={`//${hostname}${label}`}
+        style={{ fontWeight: 'bold' }}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {label}
+      </a>
+    );
+  };
+
   return (
     <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Column gap>
-        {data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hasData }) => {
+        {data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hostname, hasData }) => {
           const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
           lastDay = createdAt;
 
@@ -61,7 +74,7 @@ export function SessionActivity({
                       : formatMessage(labels.viewedPage)}
                   </Text>
                   <Text weight="bold" style={{ maxWidth: isMobile ? '400px' : null }} truncate>
-                    {eventName || urlPath}
+                    {eventName || renderLink(urlPath, hostname)}
                   </Text>
                   {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
                 </Row>

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

@@ -0,0 +1,57 @@
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { useDeleteQuery, useMessages, useModified } from '@/components/hooks';
+import { Trash } from '@/components/icons';
+import { DialogButton } from '@/components/input/DialogButton';
+import { messages } from '@/components/messages';
+
+export function ShareDeleteButton({
+  shareId,
+  slug,
+  onSave,
+}: {
+  shareId: string;
+  slug: string;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels, getErrorMessage, FormattedMessage } = useMessages();
+  const { mutateAsync, isPending, error } = useDeleteQuery(`/share/id/${shareId}`);
+  const { touch } = useModified();
+
+  const handleConfirm = async (close: () => void) => {
+    await mutateAsync(null, {
+      onSuccess: () => {
+        touch('shares');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <DialogButton
+      icon={<Trash />}
+      title={formatMessage(labels.confirm)}
+      variant="quiet"
+      width="400px"
+    >
+      {({ close }) => (
+        <ConfirmationForm
+          message={
+            <FormattedMessage
+              {...messages.confirmRemove}
+              values={{
+                target: <b>{slug}</b>,
+              }}
+            />
+          }
+          isLoading={isPending}
+          error={getErrorMessage(error)}
+          onConfirm={handleConfirm.bind(null, close)}
+          onClose={close}
+          buttonLabel={formatMessage(labels.delete)}
+          buttonVariant="danger"
+        />
+      )}
+    </DialogButton>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { useMessages } from '@/components/hooks';
+import { Edit } from '@/components/icons';
+import { DialogButton } from '@/components/input/DialogButton';
+import { ShareEditForm } from './ShareEditForm';
+
+export function ShareEditButton({ shareId }: { shareId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DialogButton icon={<Edit />} title={formatMessage(labels.share)} variant="quiet" width="600px">
+      {({ close }) => {
+        return <ShareEditForm shareId={shareId} onClose={close} />;
+      }}
+    </DialogButton>
+  );
+}

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

@@ -0,0 +1,171 @@
+import {
+  Button,
+  Checkbox,
+  Column,
+  Form,
+  FormField,
+  FormSubmitButton,
+  Grid,
+  Label,
+  Loading,
+  Row,
+  Text,
+  TextField,
+} from '@umami/react-zen';
+import { useEffect, useState } from 'react';
+import { useApi, useConfig, useMessages, useModified } from '@/components/hooks';
+import { SHARE_NAV_ITEMS } from './constants';
+
+export function ShareEditForm({
+  shareId,
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  shareId?: string;
+  websiteId?: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels, getErrorMessage } = useMessages();
+  const { cloudMode } = useConfig();
+  const { get, post } = useApi();
+  const { touch } = useModified();
+  const { modified } = useModified('shares');
+  const [share, setShare] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(!!shareId);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<any>(null);
+
+  const isEditing = !!shareId;
+
+  const getUrl = (slug: string) => {
+    if (cloudMode) {
+      return `${process.env.cloudUrl}/share/${slug}`;
+    }
+    return `${window?.location.origin}${process.env.basePath || ''}/share/${slug}`;
+  };
+
+  useEffect(() => {
+    if (!shareId) return;
+
+    const loadShare = async () => {
+      setIsLoading(true);
+      try {
+        const data = await get(`/share/id/${shareId}`);
+        setShare(data);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadShare();
+  }, [shareId, modified]);
+
+  const handleSubmit = async (data: any) => {
+    const parameters: Record<string, boolean> = {};
+    SHARE_NAV_ITEMS.forEach(section => {
+      section.items.forEach(item => {
+        parameters[item.id] = data[item.id] ?? false;
+      });
+    });
+
+    setIsPending(true);
+    setError(null);
+
+    try {
+      if (isEditing) {
+        await post(`/share/id/${shareId}`, {
+          name: data.name,
+          slug: share.slug,
+          parameters,
+        });
+      } else {
+        await post(`/websites/${websiteId}/shares`, {
+          name: data.name,
+          parameters,
+        });
+      }
+      touch('shares');
+      onSave?.();
+      onClose?.();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  if (isLoading) {
+    return <Loading placement="absolute" />;
+  }
+
+  const url = isEditing ? getUrl(share?.slug || '') : null;
+
+  // Build default values from share parameters
+  const defaultValues: Record<string, any> = {
+    name: share?.name || '',
+  };
+  SHARE_NAV_ITEMS.forEach(section => {
+    section.items.forEach(item => {
+      const defaultSelected = item.id === 'overview' || item.id === 'events';
+      defaultValues[item.id] = share?.parameters?.[item.id] ?? defaultSelected;
+    });
+  });
+
+  // Get all item ids for validation
+  const allItemIds = SHARE_NAV_ITEMS.flatMap(section => section.items.map(item => item.id));
+
+  return (
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={defaultValues}>
+      {({ watch }) => {
+        const values = watch();
+        const hasSelection = allItemIds.some(id => values[id]);
+
+        return (
+          <Column gap="6">
+            {url && (
+              <Column>
+                <Label>{formatMessage(labels.shareUrl)}</Label>
+                <TextField value={url} isReadOnly allowCopy />
+              </Column>
+            )}
+            <FormField
+              label={formatMessage(labels.name)}
+              name="name"
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField autoComplete="off" autoFocus={!isEditing} />
+            </FormField>
+            <Grid columns="repeat(auto-fit, minmax(150px, 1fr))" gap="3">
+              {SHARE_NAV_ITEMS.map(section => (
+                <Column key={section.section} gap="3">
+                  <Text weight="bold">{formatMessage((labels as any)[section.section])}</Text>
+                  <Column gap="1">
+                    {section.items.map(item => (
+                      <FormField key={item.id} name={item.id}>
+                        <Checkbox>{formatMessage((labels as any)[item.label])}</Checkbox>
+                      </FormField>
+                    ))}
+                  </Column>
+                </Column>
+              ))}
+            </Grid>
+            <Row justifyContent="flex-end" paddingTop="3" gap="3">
+              {onClose && (
+                <Button isDisabled={isPending} onPress={onClose}>
+                  {formatMessage(labels.cancel)}
+                </Button>
+              )}
+              <FormSubmitButton
+                variant="primary"
+                isDisabled={isPending || !hasSelection || !values.name}
+              >
+                {formatMessage(labels.save)}
+              </FormSubmitButton>
+            </Row>
+          </Column>
+        );
+      }}
+    </Form>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
+import { DateDistance } from '@/components/common/DateDistance';
+import { ExternalLink } from '@/components/common/ExternalLink';
+import { useConfig, useMessages, useMobile } from '@/components/hooks';
+import { ShareDeleteButton } from './ShareDeleteButton';
+import { ShareEditButton } from './ShareEditButton';
+
+export function SharesTable(props: DataTableProps) {
+  const { formatMessage, labels } = useMessages();
+  const { cloudMode } = useConfig();
+  const { isMobile } = useMobile();
+
+  const getUrl = (slug: string) => {
+    if (cloudMode) {
+      return `${process.env.cloudUrl}/share/${slug}`;
+    }
+    return `${window?.location.origin}${process.env.basePath || ''}/share/${slug}`;
+  };
+
+  return (
+    <DataTable {...props}>
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {({ name }: any) => name}
+      </DataColumn>
+      <DataColumn id="slug" label={formatMessage(labels.shareUrl)} width="2fr">
+        {({ slug }: any) => {
+          const url = getUrl(slug);
+          return (
+            <ExternalLink href={url} prefetch={false}>
+              {url}
+            </ExternalLink>
+          );
+        }}
+      </DataColumn>
+      {!isMobile && (
+        <DataColumn id="created" label={formatMessage(labels.created)}>
+          {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+        </DataColumn>
+      )}
+      <DataColumn id="action" align="end" width="100px">
+        {({ id, slug }: any) => {
+          return (
+            <Row>
+              <ShareEditButton shareId={id} />
+              <ShareDeleteButton shareId={id} slug={slug} />
+            </Row>
+          );
+        }}
+      </DataColumn>
+    </DataTable>
+  );
+}

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

@@ -1,14 +1,11 @@
 import { Column } from '@umami/react-zen';
 import { Panel } from '@/components/common/Panel';
-import { useWebsite } from '@/components/hooks';
 import { WebsiteData } from './WebsiteData';
 import { WebsiteEditForm } from './WebsiteEditForm';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
 
 export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
-  const website = useWebsite();
-
   return (
     <Column gap="6">
       <Panel>
@@ -18,7 +15,7 @@ export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal
         <WebsiteTrackingCode websiteId={websiteId} />
       </Panel>
       <Panel>
-        <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
+        <WebsiteShareForm websiteId={websiteId} />
       </Panel>
       <Panel>
         <WebsiteData websiteId={websiteId} />

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

@@ -1,93 +1,47 @@
-import {
-  Button,
-  Column,
-  Form,
-  FormButtons,
-  FormSubmitButton,
-  Label,
-  Row,
-  Switch,
-  TextField,
-} from '@umami/react-zen';
-import { RefreshCcw } from 'lucide-react';
-import { useState } from 'react';
-import { IconLabel } from '@/components/common/IconLabel';
-import { useConfig, useMessages, useUpdateQuery } from '@/components/hooks';
-import { getRandomChars } from '@/lib/generate';
-
-const generateId = () => getRandomChars(16);
+import { Column, Heading, Row, Text } from '@umami/react-zen';
+import { Plus } from 'lucide-react';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { useMessages, useWebsiteSharesQuery } from '@/components/hooks';
+import { DialogButton } from '@/components/input/DialogButton';
+import { ShareEditForm } from './ShareEditForm';
+import { SharesTable } from './SharesTable';
 
 export interface WebsiteShareFormProps {
   websiteId: string;
-  shareId?: string;
-  onSave?: () => void;
-  onClose?: () => void;
 }
 
-export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: WebsiteShareFormProps) {
-  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
-  const [currentId, setCurrentId] = useState(shareId);
-  const { mutateAsync, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
-  const { cloudMode } = useConfig();
+export function WebsiteShareForm({ websiteId }: WebsiteShareFormProps) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { data, error, isLoading } = useWebsiteSharesQuery({ websiteId });
 
-  const getUrl = (shareId: string) => {
-    if (cloudMode) {
-      return `${process.env.cloudUrl}/share/${shareId}`;
-    }
-
-    return `${window?.location.origin}${process.env.basePath || ''}/share/${shareId}`;
-  };
-
-  const url = getUrl(currentId);
-
-  const handleGenerate = () => {
-    setCurrentId(generateId());
-  };
-
-  const handleSwitch = () => {
-    setCurrentId(currentId ? null : generateId());
-  };
-
-  const handleSave = async () => {
-    const data = {
-      shareId: currentId,
-    };
-    await mutateAsync(data, {
-      onSuccess: async () => {
-        toast(formatMessage(messages.saved));
-        touch(`website:${websiteId}`);
-        onSave?.();
-        onClose?.();
-      },
-    });
-  };
+  const shares = data?.data || [];
+  const hasShares = shares.length > 0;
 
   return (
-    <Form onSubmit={handleSave} error={getErrorMessage(error)} values={{ url }}>
-      <Column gap>
-        <Switch isSelected={!!currentId} onChange={handleSwitch}>
-          {formatMessage(labels.enableShareUrl)}
-        </Switch>
-        {currentId && (
-          <Row alignItems="flex-end" gap>
-            <Column flexGrow={1}>
-              <Label>{formatMessage(labels.shareUrl)}</Label>
-              <TextField value={url} isReadOnly allowCopy />
-            </Column>
-            <Column>
-              <Button onPress={handleGenerate}>
-                <IconLabel icon={<RefreshCcw />} label={formatMessage(labels.regenerate)} />
-              </Button>
-            </Column>
-          </Row>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
+      <Column gap="4">
+        <Row justifyContent="space-between" alignItems="center">
+          <Heading>{formatMessage(labels.share)}</Heading>
+          <DialogButton
+            icon={<Plus size={16} />}
+            label={formatMessage(labels.add)}
+            title={formatMessage(labels.share)}
+            variant="primary"
+            width="600px"
+          >
+            {({ close }) => <ShareEditForm websiteId={websiteId} onClose={close} />}
+          </DialogButton>
+        </Row>
+        {hasShares ? (
+          <>
+            <Text>{formatMessage(messages.shareUrl)}</Text>
+
+            <SharesTable data={shares} />
+          </>
+        ) : (
+          <Text color="muted">{formatMessage(messages.noDataAvailable)}</Text>
         )}
-        <FormButtons justifyContent="flex-end">
-          <Row alignItems="center" gap>
-            {onClose && <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>}
-            <FormSubmitButton isDisabled={false}>{formatMessage(labels.save)}</FormSubmitButton>
-          </Row>
-        </FormButtons>
       </Column>
-    </Form>
+    </LoadingPanel>
   );
 }

src/app/(main)/websites/[websiteId]/settings/constants.ts

@@ -0,0 +1,30 @@
+export const SHARE_NAV_ITEMS = [
+  {
+    section: 'traffic',
+    items: [
+      { id: 'overview', label: 'overview' },
+      { id: 'events', label: 'events' },
+      { id: 'sessions', label: 'sessions' },
+      { id: 'realtime', label: 'realtime' },
+      { id: 'compare', label: 'compare' },
+      { id: 'breakdown', label: 'breakdown' },
+    ],
+  },
+  {
+    section: 'behavior',
+    items: [
+      { id: 'goals', label: 'goals' },
+      { id: 'funnels', label: 'funnels' },
+      { id: 'journeys', label: 'journeys' },
+      { id: 'retention', label: 'retention' },
+    ],
+  },
+  {
+    section: 'growth',
+    items: [
+      { id: 'utm', label: 'utm' },
+      { id: 'revenue', label: 'revenue' },
+      { id: 'attribution', label: 'attribution' },
+    ],
+  },
+];

src/app/api/auth/logout/route.ts

@@ -1,7 +1,14 @@
 import redis from '@/lib/redis';
+import { parseRequest } from '@/lib/request';
 import { ok } from '@/lib/response';
 
 export async function POST(request: Request) {
+  const { error } = await parseRequest(request);
+
+  if (error) {
+    return error();
+  }
+
   if (redis.enabled) {
     const token = request.headers.get('authorization')?.split(' ')?.[1];
 

src/app/api/auth/sso/route.ts

@@ -1,7 +1,7 @@
 import { saveAuth } from '@/lib/auth';
 import redis from '@/lib/redis';
 import { parseRequest } from '@/lib/request';
-import { json } from '@/lib/response';
+import { json, serverError } from '@/lib/response';
 
 export async function POST(request: Request) {
   const { auth, error } = await parseRequest(request);
@@ -10,9 +10,13 @@ export async function POST(request: Request) {
     return error();
   }
 
-  if (redis.enabled) {
-    const token = await saveAuth({ userId: auth.user.id }, 86400);
-
-    return json({ user: auth.user, token });
+  if (!redis.enabled) {
+    return serverError({
+      message: 'Redis is disabled',
+    });
   }
+
+  const token = await saveAuth({ userId: auth.user.id }, 86400);
+
+  return json({ user: auth.user, token });
 }

src/app/api/reports/journey/route.ts

@@ -12,11 +12,16 @@ export async function POST(request: Request) {
   }
 
   const { websiteId, parameters, filters } = body;
+  const { eventType } = parameters;
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
+  if (eventType) {
+    filters.eventType = eventType;
+  }
+
   const queryFilters = await getQueryFilters(filters, websiteId);
 
   const data = await getJourney(websiteId, parameters, queryFilters);

src/app/api/send/route.ts

@@ -1,10 +1,10 @@
-import { startOfHour, startOfMonth } from 'date-fns';
+import { startOfHour } from 'date-fns';
 import { isbot } from 'isbot';
 import { serializeError } from 'serialize-error';
 import { z } from 'zod';
 import clickhouse from '@/lib/clickhouse';
 import { COLLECTION_TYPE, EVENT_TYPE } from '@/lib/constants';
-import { hash, secret, uuid } from '@/lib/crypto';
+import { getSalt, hash, secret, uuid } from '@/lib/crypto';
 import { getClientInfo, hasBlockedIp } from '@/lib/detect';
 import { createToken, parseToken } from '@/lib/jwt';
 import { fetchWebsite } from '@/lib/load';
@@ -130,7 +130,8 @@ export async function POST(request: Request) {
     const createdAt = timestamp ? new Date(timestamp * 1000) : new Date();
     const now = Math.floor(Date.now() / 1000);
 
-    const sessionSalt = hash(startOfMonth(createdAt).toUTCString());
+    const saltRotation = process.env.SALT_ROTATION || 'month';
+    const sessionSalt = getSalt(saltRotation, createdAt);
     const visitSalt = hash(startOfHour(createdAt).toUTCString());
 
     const sessionId = id ? uuid(sourceId, id) : uuid(sourceId, ip, userAgent, sessionSalt);

src/app/api/share/[slug]/route.ts

@@ -1,7 +1,47 @@
+import { ROLES } from '@/lib/constants';
 import { secret } from '@/lib/crypto';
 import { createToken } from '@/lib/jwt';
+import prisma from '@/lib/prisma';
+import redis from '@/lib/redis';
 import { json, notFound } from '@/lib/response';
-import { getShareByCode } from '@/queries/prisma';
+import type { WhiteLabel } from '@/lib/types';
+import { getShareByCode, getWebsite } from '@/queries/prisma';
+
+async function getAccountId(website: { userId?: string; teamId?: string }): Promise<string | null> {
+  if (website.userId) {
+    return website.userId;
+  }
+
+  if (website.teamId) {
+    const teamOwner = await prisma.client.teamUser.findFirst({
+      where: {
+        teamId: website.teamId,
+        role: ROLES.teamOwner,
+      },
+      select: {
+        userId: true,
+      },
+    });
+
+    return teamOwner?.userId || null;
+  }
+
+  return null;
+}
+
+async function getWhiteLabel(accountId: string): Promise<WhiteLabel | null> {
+  if (!redis.enabled) {
+    return null;
+  }
+
+  const data = await redis.client.get(`white-label:${accountId}`);
+
+  if (data) {
+    return data as WhiteLabel;
+  }
+
+  return null;
+}
 
 export async function GET(_request: Request, { params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
@@ -12,8 +52,25 @@ export async function GET(_request: Request, { params }: { params: Promise<{ slu
     return notFound();
   }
 
-  const data = { shareId: share.id };
-  const token = createToken(data, secret());
+  const website = await getWebsite(share.entityId);
 
-  return json({ ...data, token });
+  const data: Record<string, any> = {
+    shareId: share.id,
+    websiteId: share.entityId,
+    parameters: share.parameters,
+  };
+
+  data.token = createToken(data, secret());
+
+  const accountId = await getAccountId(website);
+
+  if (accountId) {
+    const whiteLabel = await getWhiteLabel(accountId);
+
+    if (whiteLabel) {
+      data.whiteLabel = whiteLabel;
+    }
+  }
+
+  return json(data);
 }

src/app/api/share/id/[shareId]/route.ts

@@ -25,6 +25,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ shar
 
 export async function POST(request: Request, { params }: { params: Promise<{ shareId: string }> }) {
   const schema = z.object({
+    name: z.string().max(200),
     slug: z.string().max(100),
     parameters: anyObjectParam,
   });
@@ -36,7 +37,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ sha
   }
 
   const { shareId } = await params;
-  const { slug, parameters } = body;
+  const { name, slug, parameters } = body;
 
   const share = await getShare(shareId);
 
@@ -49,6 +50,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ sha
   }
 
   const result = await updateShare(shareId, {
+    name,
     slug,
     parameters,
   } as any);

src/app/api/share/route.ts

@@ -1,5 +1,6 @@
 import z from 'zod';
 import { uuid } from '@/lib/crypto';
+import { getRandomChars } from '@/lib/generate';
 import { parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { anyObjectParam } from '@/lib/schema';
@@ -10,7 +11,8 @@ export async function POST(request: Request) {
   const schema = z.object({
     entityId: z.uuid(),
     shareType: z.coerce.number().int(),
-    slug: z.string().max(100),
+    name: z.string().max(200),
+    slug: z.string().max(100).optional(),
     parameters: anyObjectParam,
   });
 
@@ -20,7 +22,8 @@ export async function POST(request: Request) {
     return error();
   }
 
-  const { entityId, shareType, slug, parameters } = body;
+  const { entityId, shareType, name, slug, parameters } = body;
+  const shareParameters = parameters ?? {};
 
   if (!(await canUpdateEntity(auth, entityId))) {
     return unauthorized();
@@ -30,8 +33,9 @@ export async function POST(request: Request) {
     id: uuid(),
     entityId,
     shareType,
-    slug,
-    parameters,
+    name,
+    slug: slug || getRandomChars(16),
+    parameters: shareParameters,
   });
 
   return json(share);

src/app/api/teams/route.ts

@@ -28,6 +28,7 @@ export async function GET(request: Request) {
 export async function POST(request: Request) {
   const schema = z.object({
     name: z.string().max(50),
+    ownerId: z.uuid().optional(),
   });
 
   const { auth, body, error } = await parseRequest(request, schema);
@@ -40,7 +41,7 @@ export async function POST(request: Request) {
     return unauthorized();
   }
 
-  const { name } = body;
+  const { name, ownerId } = body;
 
   const team = await createTeam(
     {
@@ -48,7 +49,7 @@ export async function POST(request: Request) {
       name,
       accessCode: `team_${getRandomChars(16)}`,
     },
-    auth.user.id,
+    ownerId ?? auth.user.id,
   );
 
   return json(team);

src/app/api/users/[userId]/route.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import { hashPassword } from '@/lib/password';
 import { parseRequest } from '@/lib/request';
-import { badRequest, json, ok, unauthorized } from '@/lib/response';
+import { badRequest, json, notFound, ok, unauthorized } from '@/lib/response';
 import { userRoleParam } from '@/lib/schema';
 import { canDeleteUser, canUpdateUser, canViewUser } from '@/permissions';
 import { deleteUser, getUser, getUserByUsername, updateUser } from '@/queries/prisma';
@@ -27,7 +27,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ user
 export async function POST(request: Request, { params }: { params: Promise<{ userId: string }> }) {
   const schema = z.object({
     username: z.string().max(255).optional(),
-    password: z.string().max(255).optional(),
+    password: z.string().min(8).max(255).optional(),
     role: userRoleParam.optional(),
   });
 
@@ -47,6 +47,10 @@ export async function POST(request: Request, { params }: { params: Promise<{ use
 
   const user = await getUser(userId);
 
+  if (!user) {
+    return notFound();
+  }
+
   const data: any = {};
 
   if (password) {

src/app/api/users/route.ts

@@ -4,6 +4,7 @@ import { uuid } from '@/lib/crypto';
 import { hashPassword } from '@/lib/password';
 import { parseRequest } from '@/lib/request';
 import { badRequest, json, unauthorized } from '@/lib/response';
+import { userRoleParam } from '@/lib/schema';
 import { canCreateUser } from '@/permissions';
 import { createUser, getUserByUsername } from '@/queries/prisma';
 
@@ -11,8 +12,8 @@ export async function POST(request: Request) {
   const schema = z.object({
     id: z.uuid().optional(),
     username: z.string().max(255),
-    password: z.string(),
-    role: z.string().regex(/admin|user|view-only/i),
+    password: z.string().min(8).max(255),
+    role: userRoleParam,
   });
 
   const { auth, body, error } = await parseRequest(request, schema);

src/app/api/websites/[websiteId]/events/stats/route.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod';
+import { getQueryFilters, parseRequest } from '@/lib/request';
+import { json, unauthorized } from '@/lib/response';
+import { dateRangeParams, filterParams } from '@/lib/schema';
+import { canViewWebsite } from '@/permissions';
+import { getWebsiteEventStats } from '@/queries/sql/events/getWebsiteEventStats';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ websiteId: string }> },
+) {
+  const schema = z.object({
+    ...dateRangeParams,
+    ...filterParams,
+  });
+
+  const { auth, query, error } = await parseRequest(request, schema);
+
+  if (error) {
+    return error();
+  }
+
+  const { websiteId } = await params;
+
+  if (!(await canViewWebsite(auth, websiteId))) {
+    return unauthorized();
+  }
+
+  const filters = await getQueryFilters(query, websiteId);
+
+  const data = await getWebsiteEventStats(websiteId, filters);
+
+  return json({ data });
+}

src/app/api/websites/[websiteId]/route.ts

@@ -1,9 +1,17 @@
 import { z } from 'zod';
-import { SHARE_ID_REGEX } from '@/lib/constants';
+import { ENTITY_TYPE } from '@/lib/constants';
+import { uuid } from '@/lib/crypto';
 import { parseRequest } from '@/lib/request';
 import { badRequest, json, ok, serverError, unauthorized } from '@/lib/response';
 import { canDeleteWebsite, canUpdateWebsite, canViewWebsite } from '@/permissions';
-import { deleteWebsite, getWebsite, updateWebsite } from '@/queries/prisma';
+import {
+  createShare,
+  deleteSharesByEntityId,
+  deleteWebsite,
+  getShareByEntityId,
+  getWebsite,
+  updateWebsite,
+} from '@/queries/prisma';
 
 export async function GET(
   request: Request,
@@ -33,7 +41,7 @@ export async function POST(
   const schema = z.object({
     name: z.string().optional(),
     domain: z.string().optional(),
-    shareId: z.string().regex(SHARE_ID_REGEX).nullable().optional(),
+    shareId: z.string().max(50).nullable().optional(),
   });
 
   const { auth, body, error } = await parseRequest(request, schema);
@@ -50,11 +58,29 @@ export async function POST(
   }
 
   try {
-    const website = await updateWebsite(websiteId, { name, domain, shareId });
+    const website = await updateWebsite(websiteId, { name, domain });
 
-    return Response.json(website);
+    if (shareId === null) {
+      await deleteSharesByEntityId(website.id);
+    }
+
+    const share = shareId
+      ? await createShare({
+          id: uuid(),
+          entityId: websiteId,
+          shareType: ENTITY_TYPE.website,
+          name: website.name,
+          slug: shareId,
+          parameters: { overview: true, events: true },
+        })
+      : await getShareByEntityId(websiteId);
+
+    return json({
+      ...website,
+      shareId: share?.slug ?? null,
+    });
   } catch (e: any) {
-    if (e.message.toLowerCase().includes('unique constraint') && e.message.includes('share_id')) {
+    if (e.message.toLowerCase().includes('unique constraint')) {
       return badRequest({ message: 'That share ID is already taken.' });
     }
 

src/app/api/websites/[websiteId]/segments/route.ts

@@ -2,7 +2,7 @@ import { z } from 'zod';
 import { uuid } from '@/lib/crypto';
 import { getQueryFilters, parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
-import { anyObjectParam, searchParams, segmentTypeParam } from '@/lib/schema';
+import { searchParams, segmentParamSchema, segmentTypeParam } from '@/lib/schema';
 import { canUpdateWebsite, canViewWebsite } from '@/permissions';
 import { createSegment, getWebsiteSegments } from '@/queries/prisma';
 
@@ -42,7 +42,7 @@ export async function POST(
   const schema = z.object({
     type: segmentTypeParam,
     name: z.string().max(200),
-    parameters: anyObjectParam,
+    parameters: segmentParamSchema,
   });
 
   const { auth, body, error } = await parseRequest(request, schema);

src/app/api/websites/[websiteId]/shares/route.ts

@@ -0,0 +1,77 @@
+import { z } from 'zod';
+import { ENTITY_TYPE } from '@/lib/constants';
+import { uuid } from '@/lib/crypto';
+import { getRandomChars } from '@/lib/generate';
+import { parseRequest } from '@/lib/request';
+import { json, unauthorized } from '@/lib/response';
+import { anyObjectParam, filterParams, pagingParams } from '@/lib/schema';
+import { canUpdateWebsite, canViewWebsite } from '@/permissions';
+import { createShare, getSharesByEntityId } from '@/queries/prisma';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ websiteId: string }> },
+) {
+  const schema = z.object({
+    ...filterParams,
+    ...pagingParams,
+  });
+
+  const { auth, query, error } = await parseRequest(request, schema);
+
+  if (error) {
+    return error();
+  }
+
+  const { websiteId } = await params;
+  const { page, pageSize, search } = query;
+
+  if (!(await canViewWebsite(auth, websiteId))) {
+    return unauthorized();
+  }
+
+  const data = await getSharesByEntityId(websiteId, {
+    page,
+    pageSize,
+    search,
+  });
+
+  return json(data);
+}
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ websiteId: string }> },
+) {
+  const schema = z.object({
+    name: z.string().max(200),
+    parameters: anyObjectParam.optional(),
+  });
+
+  const { auth, body, error } = await parseRequest(request, schema);
+
+  if (error) {
+    return error();
+  }
+
+  const { websiteId } = await params;
+  const { name, parameters } = body;
+  const shareParameters = parameters ?? {};
+
+  if (!(await canUpdateWebsite(auth, websiteId))) {
+    return unauthorized();
+  }
+
+  const slug = getRandomChars(16);
+
+  const share = await createShare({
+    id: uuid(),
+    entityId: websiteId,
+    shareType: ENTITY_TYPE.website,
+    name,
+    slug,
+    parameters: shareParameters,
+  });
+
+  return json(share);
+}

src/app/api/websites/[websiteId]/stats/route.ts

@@ -31,9 +31,11 @@ export async function GET(
 
   const data = await getWebsiteStats(websiteId, filters);
 
-  const compare = filters.compare ?? 'prev';
-
-  const { startDate, endDate } = getCompareDate(compare, filters.startDate, filters.endDate);
+  const { startDate, endDate } = getCompareDate(
+    filters.compare ?? 'prev',
+    filters.startDate,
+    filters.endDate,
+  );
 
   const comparison = await getWebsiteStats(websiteId, {
     ...filters,

src/app/api/websites/route.ts

@@ -1,11 +1,12 @@
 import { z } from 'zod';
+import { ENTITY_TYPE } from '@/lib/constants';
 import { uuid } from '@/lib/crypto';
 import { fetchAccount } from '@/lib/load';
 import { getQueryFilters, parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { pagingParams, searchParams } from '@/lib/schema';
 import { canCreateTeamWebsite, canCreateWebsite } from '@/permissions';
-import { createWebsite, getWebsiteCount } from '@/queries/prisma';
+import { createShare, createWebsite, getWebsiteCount } from '@/queries/prisma';
 import { getAllUserWebsitesIncludingTeamOwner, getUserWebsites } from '@/queries/prisma/website';
 
 const CLOUD_WEBSITE_LIMIT = 3;
@@ -72,7 +73,6 @@ export async function POST(request: Request) {
     createdBy: auth.user.id,
     name,
     domain,
-    shareId,
     teamId,
   };
 
@@ -82,5 +82,19 @@ export async function POST(request: Request) {
 
   const website = await createWebsite(data);
 
-  return json(website);
+  const share = shareId
+    ? await createShare({
+        id: uuid(),
+        entityId: website.id,
+        shareType: ENTITY_TYPE.website,
+        name: website.name,
+        slug: shareId,
+        parameters: { overview: true, events: true },
+      })
+    : null;
+
+  return json({
+    ...website,
+    shareId: share?.slug ?? null,
+  });
 }

src/app/share/ShareProvider.tsx

@@ -0,0 +1,77 @@
+'use client';
+import { Loading } from '@umami/react-zen';
+import { usePathname, useRouter } from 'next/navigation';
+import { createContext, type ReactNode, useEffect } from 'react';
+import { useShareTokenQuery } from '@/components/hooks';
+import type { WhiteLabel } from '@/lib/types';
+
+export interface ShareData {
+  shareId: string;
+  slug: string;
+  websiteId: string;
+  parameters: any;
+  token: string;
+  whiteLabel?: WhiteLabel;
+}
+
+export const ShareContext = createContext<ShareData>(null);
+
+const ALL_SECTION_IDS = [
+  'overview',
+  'events',
+  'sessions',
+  'realtime',
+  'compare',
+  'breakdown',
+  'goals',
+  'funnels',
+  'journeys',
+  'retention',
+  'utm',
+  'revenue',
+  'attribution',
+];
+
+function getSharePath(pathname: string) {
+  const segments = pathname.split('/');
+  const firstSegment = segments[3];
+
+  // If first segment looks like a domain name, skip it
+  if (firstSegment?.includes('.')) {
+    return segments[4];
+  }
+
+  return firstSegment;
+}
+
+export function ShareProvider({ slug, children }: { slug: string; children: ReactNode }) {
+  const { share, isLoading, isFetching } = useShareTokenQuery(slug);
+  const router = useRouter();
+  const pathname = usePathname();
+  const path = getSharePath(pathname);
+
+  const allowedSections = share?.parameters
+    ? ALL_SECTION_IDS.filter(id => share.parameters[id] !== false)
+    : [];
+
+  const shouldRedirect =
+    allowedSections.length === 1 &&
+    allowedSections[0] !== 'overview' &&
+    (path === undefined || path === '' || path === 'overview');
+
+  useEffect(() => {
+    if (shouldRedirect) {
+      router.replace(`/share/${slug}/${allowedSections[0]}`);
+    }
+  }, [shouldRedirect, slug, allowedSections, router]);
+
+  if (isFetching && isLoading) {
+    return <Loading placement="absolute" />;
+  }
+
+  if (!share || shouldRedirect) {
+    return null;
+  }
+
+  return <ShareContext.Provider value={{ ...share, slug }}>{children}</ShareContext.Provider>;
+}

src/app/share/[...shareId]/Footer.tsx

@@ -1,12 +0,0 @@
-import { Row, Text } from '@umami/react-zen';
-import { CURRENT_VERSION, HOMEPAGE_URL } from '@/lib/constants';
-
-export function Footer() {
-  return (
-    <Row as="footer" paddingY="6" justifyContent="flex-end">
-      <a href={HOMEPAGE_URL} target="_blank">
-        <Text weight="bold">umami</Text> {`v${CURRENT_VERSION}`}
-      </a>
-    </Row>
-  );
-}

src/app/share/[...shareId]/Header.tsx

@@ -1,24 +0,0 @@
-import { Icon, Row, Text, ThemeButton } from '@umami/react-zen';
-import { LanguageButton } from '@/components/input/LanguageButton';
-import { PreferencesButton } from '@/components/input/PreferencesButton';
-import { Logo } from '@/components/svg';
-
-export function Header() {
-  return (
-    <Row as="header" justifyContent="space-between" alignItems="center" paddingY="3">
-      <a href="https://umami.is" target="_blank" rel="noopener">
-        <Row alignItems="center" gap>
-          <Icon>
-            <Logo />
-          </Icon>
-          <Text weight="bold">umami</Text>
-        </Row>
-      </a>
-      <Row alignItems="center" gap>
-        <ThemeButton />
-        <LanguageButton />
-        <PreferencesButton />
-      </Row>
-    </Row>
-  );
-}

src/app/share/[...shareId]/SharePage.tsx

@@ -1,41 +0,0 @@
-'use client';
-import { Column, useTheme } from '@umami/react-zen';
-import { useEffect } from 'react';
-import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
-import { WebsitePage } from '@/app/(main)/websites/[websiteId]/WebsitePage';
-import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
-import { PageBody } from '@/components/common/PageBody';
-import { useShareTokenQuery } from '@/components/hooks';
-import { Footer } from './Footer';
-import { Header } from './Header';
-
-export function SharePage({ shareId }) {
-  const { shareToken, isLoading } = useShareTokenQuery(shareId);
-  const { setTheme } = useTheme();
-
-  useEffect(() => {
-    const url = new URL(window?.location?.href);
-    const theme = url.searchParams.get('theme');
-
-    if (theme === 'light' || theme === 'dark') {
-      setTheme(theme);
-    }
-  }, []);
-
-  if (isLoading || !shareToken) {
-    return null;
-  }
-
-  return (
-    <Column backgroundColor="2">
-      <PageBody gap>
-        <Header />
-        <WebsiteProvider websiteId={shareToken.websiteId}>
-          <WebsiteHeader showActions={false} />
-          <WebsitePage websiteId={shareToken.websiteId} />
-        </WebsiteProvider>
-        <Footer />
-      </PageBody>
-    </Column>
-  );
-}

src/app/share/[...shareId]/page.tsx

@@ -1,7 +0,0 @@
-import { SharePage } from './SharePage';
-
-export default async function ({ params }: { params: Promise<{ shareId: string[] }> }) {
-  const { shareId } = await params;
-
-  return <SharePage shareId={shareId[0]} />;
-}

src/app/share/[slug]/[[...path]]/ShareNav.tsx

@@ -0,0 +1,206 @@
+import { Button, Column, Icon, Row, Text, ThemeButton } from '@umami/react-zen';
+import { SideMenu } from '@/components/common/SideMenu';
+import { useMessages, useNavigation, useShare } from '@/components/hooks';
+import { AlignEndHorizontal, Clock, Eye, PanelLeft, Sheet, Tag, User } from '@/components/icons';
+import { LanguageButton } from '@/components/input/LanguageButton';
+import { PreferencesButton } from '@/components/input/PreferencesButton';
+import { Funnel, Lightning, Logo, Magnet, Money, Network, Path, Target } from '@/components/svg';
+
+export function ShareNav({
+  collapsed,
+  onCollapse,
+  onItemClick,
+}: {
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  onItemClick?: () => void;
+}) {
+  const share = useShare();
+  const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+  const { slug, parameters, whiteLabel } = share;
+
+  const logoUrl = whiteLabel?.url || 'https://umami.is';
+  const logoName = whiteLabel?.name || 'umami';
+  const logoImage = whiteLabel?.image;
+
+  const renderPath = (path: string) => `/share/${slug}${path}`;
+
+  const allItems = [
+    {
+      section: 'traffic',
+      label: formatMessage(labels.traffic),
+      items: [
+        {
+          id: 'overview',
+          label: formatMessage(labels.overview),
+          icon: <Eye />,
+          path: renderPath(''),
+        },
+        {
+          id: 'events',
+          label: formatMessage(labels.events),
+          icon: <Lightning />,
+          path: renderPath('/events'),
+        },
+        {
+          id: 'sessions',
+          label: formatMessage(labels.sessions),
+          icon: <User />,
+          path: renderPath('/sessions'),
+        },
+        {
+          id: 'realtime',
+          label: formatMessage(labels.realtime),
+          icon: <Clock />,
+          path: renderPath('/realtime'),
+        },
+        {
+          id: 'compare',
+          label: formatMessage(labels.compare),
+          icon: <AlignEndHorizontal />,
+          path: renderPath('/compare'),
+        },
+        {
+          id: 'breakdown',
+          label: formatMessage(labels.breakdown),
+          icon: <Sheet />,
+          path: renderPath('/breakdown'),
+        },
+      ],
+    },
+    {
+      section: 'behavior',
+      label: formatMessage(labels.behavior),
+      items: [
+        {
+          id: 'goals',
+          label: formatMessage(labels.goals),
+          icon: <Target />,
+          path: renderPath('/goals'),
+        },
+        {
+          id: 'funnels',
+          label: formatMessage(labels.funnels),
+          icon: <Funnel />,
+          path: renderPath('/funnels'),
+        },
+        {
+          id: 'journeys',
+          label: formatMessage(labels.journeys),
+          icon: <Path />,
+          path: renderPath('/journeys'),
+        },
+        {
+          id: 'retention',
+          label: formatMessage(labels.retention),
+          icon: <Magnet />,
+          path: renderPath('/retention'),
+        },
+      ],
+    },
+    {
+      section: 'growth',
+      label: formatMessage(labels.growth),
+      items: [
+        {
+          id: 'utm',
+          label: formatMessage(labels.utm),
+          icon: <Tag />,
+          path: renderPath('/utm'),
+        },
+        {
+          id: 'revenue',
+          label: formatMessage(labels.revenue),
+          icon: <Money />,
+          path: renderPath('/revenue'),
+        },
+        {
+          id: 'attribution',
+          label: formatMessage(labels.attribution),
+          icon: <Network />,
+          path: renderPath('/attribution'),
+        },
+      ],
+    },
+  ];
+
+  // Filter items based on parameters
+  const items = allItems
+    .map(section => ({
+      label: section.label,
+      items: section.items.filter(item => parameters[item.id] === true),
+    }))
+    .filter(section => section.items.length > 0);
+
+  const selectedKey = items
+    .flatMap(e => e.items)
+    .find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
+
+  const isMobile = !!onItemClick;
+
+  return (
+    <Column
+      position={isMobile ? undefined : 'fixed'}
+      padding="3"
+      width={isMobile ? '100%' : collapsed ? '60px' : '240px'}
+      maxHeight="100dvh"
+      height="100dvh"
+      border={isMobile ? undefined : 'right'}
+      borderColor={isMobile ? undefined : '4'}
+    >
+      <Row as="header" gap alignItems="center" justifyContent="space-between">
+        {!collapsed && (
+          <a href={logoUrl} target="_blank" rel="noopener" style={{ marginLeft: 12 }}>
+            <Row alignItems="center" gap>
+              {logoImage ? (
+                <img src={logoImage} alt={logoName} style={{ height: 24 }} />
+              ) : (
+                <Icon>
+                  <Logo />
+                </Icon>
+              )}
+              <Text weight="bold">{logoName}</Text>
+            </Row>
+          </a>
+        )}
+        {!onItemClick && (
+          <Button variant="quiet" onPress={() => onCollapse?.(!collapsed)}>
+            <Icon color="muted">
+              <PanelLeft />
+            </Icon>
+          </Button>
+        )}
+      </Row>
+      {!collapsed && (
+        <Column flexGrow={1} overflowY="auto">
+          <SideMenu
+            items={items}
+            selectedKey={selectedKey}
+            allowMinimize={false}
+            onItemClick={onItemClick}
+          />
+        </Column>
+      )}
+      <Column
+        flexGrow={collapsed ? 1 : undefined}
+        justifyContent="flex-end"
+        alignItems={collapsed ? 'center' : undefined}
+      >
+        {collapsed ? (
+          <Column gap="2" alignItems="center">
+            <ThemeButton />
+            <LanguageButton />
+            <PreferencesButton />
+          </Column>
+        ) : (
+          <Row>
+            <ThemeButton />
+            <LanguageButton />
+            <PreferencesButton />
+          </Row>
+        )}
+      </Column>
+    </Column>
+  );
+}

src/app/share/[slug]/[[...path]]/SharePage.tsx

@@ -0,0 +1,103 @@
+'use client';
+import { Column, Grid, Row, useTheme } from '@umami/react-zen';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { AttributionPage } from '@/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage';
+import { BreakdownPage } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage';
+import { FunnelsPage } from '@/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage';
+import { GoalsPage } from '@/app/(main)/websites/[websiteId]/(reports)/goals/GoalsPage';
+import { JourneysPage } from '@/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage';
+import { RetentionPage } from '@/app/(main)/websites/[websiteId]/(reports)/retention/RetentionPage';
+import { RevenuePage } from '@/app/(main)/websites/[websiteId]/(reports)/revenue/RevenuePage';
+import { UTMPage } from '@/app/(main)/websites/[websiteId]/(reports)/utm/UTMPage';
+import { ComparePage } from '@/app/(main)/websites/[websiteId]/compare/ComparePage';
+import { EventsPage } from '@/app/(main)/websites/[websiteId]/events/EventsPage';
+import { RealtimePage } from '@/app/(main)/websites/[websiteId]/realtime/RealtimePage';
+import { SessionsPage } from '@/app/(main)/websites/[websiteId]/sessions/SessionsPage';
+import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
+import { WebsitePage } from '@/app/(main)/websites/[websiteId]/WebsitePage';
+import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
+import { PageBody } from '@/components/common/PageBody';
+import { useShare } from '@/components/hooks';
+import { MobileMenuButton } from '@/components/input/MobileMenuButton';
+import { ShareNav } from './ShareNav';
+
+const PAGE_COMPONENTS: Record<string, React.ComponentType<{ websiteId: string }>> = {
+  '': WebsitePage,
+  overview: WebsitePage,
+  events: EventsPage,
+  sessions: SessionsPage,
+  realtime: RealtimePage,
+  compare: ComparePage,
+  breakdown: BreakdownPage,
+  goals: GoalsPage,
+  funnels: FunnelsPage,
+  journeys: JourneysPage,
+  retention: RetentionPage,
+  utm: UTMPage,
+  revenue: RevenuePage,
+  attribution: AttributionPage,
+};
+
+function getSharePath(pathname: string) {
+  const segments = pathname.split('/');
+  const firstSegment = segments[3];
+
+  // If first segment looks like a domain name, skip it
+  if (firstSegment?.includes('.')) {
+    return segments[4];
+  }
+
+  return firstSegment;
+}
+
+export function SharePage() {
+  const [navCollapsed, setNavCollapsed] = useState(false);
+  const share = useShare();
+  const { setTheme } = useTheme();
+  const pathname = usePathname();
+  const path = getSharePath(pathname);
+  const { websiteId, parameters = {} } = share;
+
+  useEffect(() => {
+    const url = new URL(window?.location?.href);
+    const theme = url.searchParams.get('theme');
+
+    if (theme === 'light' || theme === 'dark') {
+      setTheme(theme);
+    }
+  }, []);
+
+  // Check if the requested path is allowed
+  const pageKey = path || '';
+  const isAllowed = pageKey === '' || pageKey === 'overview' || parameters[pageKey] !== false;
+
+  if (!isAllowed) {
+    return null;
+  }
+
+  const PageComponent = PAGE_COMPONENTS[pageKey] || WebsitePage;
+
+  return (
+    <Grid columns={{ xs: '1fr', lg: `${navCollapsed ? '60px' : '240px'} 1fr` }} width="100%">
+      <Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap padding="3">
+        <MobileMenuButton>
+          {({ close }) => {
+            return <ShareNav onItemClick={close} />;
+          }}
+        </MobileMenuButton>
+      </Row>
+      <Column display={{ xs: 'none', lg: 'flex' }} marginRight="2">
+        <ShareNav collapsed={navCollapsed} onCollapse={setNavCollapsed} />
+      </Column>
+      <PageBody gap>
+        <WebsiteProvider websiteId={websiteId}>
+          <Column>
+            <WebsiteHeader showActions={false} />
+            <PageComponent websiteId={websiteId} />
+          </Column>
+        </WebsiteProvider>
+      </PageBody>
+    </Grid>
+  );
+}

src/app/share/[slug]/[[...path]]/page.tsx

@@ -0,0 +1,5 @@
+import { SharePage } from './SharePage';
+
+export default function () {
+  return <SharePage />;
+}

src/app/share/[slug]/layout.tsx

@@ -0,0 +1,13 @@
+import { ShareProvider } from '@/app/share/ShareProvider';
+
+export default async function ({
+  params,
+  children,
+}: {
+  params: Promise<{ slug: string }>;
+  children: React.ReactNode;
+}) {
+  const { slug } = await params;
+
+  return <ShareProvider slug={slug}>{children}</ShareProvider>;
+}

src/components/common/PageBody.tsx

@@ -31,6 +31,7 @@ export function PageBody({
     <Column
       {...props}
       width="100%"
+      minHeight="100vh"
       paddingBottom="6"
       maxWidth={maxWidth}
       paddingX={{ xs: '3', md: '6' }}

src/components/hooks/context/useShare.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { ShareContext } from '@/app/share/ShareProvider';
+
+export function useShare() {
+  return useContext(ShareContext);
+}

src/components/hooks/index.ts

@@ -4,6 +4,7 @@
 export * from './context/useBoard';
 export * from './context/useLink';
 export * from './context/usePixel';
+export * from './context/useShare';
 export * from './context/useTeam';
 export * from './context/useUser';
 export * from './context/useWebsite';
@@ -54,6 +55,7 @@ export * from './queries/useWebsiteSegmentsQuery';
 export * from './queries/useWebsiteSessionQuery';
 export * from './queries/useWebsiteSessionStatsQuery';
 export * from './queries/useWebsiteSessionsQuery';
+export * from './queries/useWebsiteSharesQuery';
 export * from './queries/useWebsiteStatsQuery';
 export * from './queries/useWebsitesQuery';
 export * from './queries/useWebsiteValuesQuery';

src/components/hooks/queries/useEventStatsQuery.ts

@@ -0,0 +1,37 @@
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useDateParameters } from '@/components/hooks/useDateParameters';
+import { useApi } from '../useApi';
+import { useFilterParameters } from '../useFilterParameters';
+
+export interface EventStatsData {
+  events: number;
+  visitors: number;
+  visits: number;
+  uniqueEvents: number;
+}
+
+type EventStatsApiResponse = {
+  data: EventStatsData;
+};
+
+export function useEventStatsQuery(
+  { websiteId }: { websiteId: string },
+  options?: UseQueryOptions<EventStatsApiResponse, Error, EventStatsData>,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt } = useDateParameters();
+  const filters = useFilterParameters();
+
+  return useQuery<EventStatsApiResponse, Error, EventStatsData>({
+    queryKey: ['websites:events:stats', { websiteId, startAt, endAt, ...filters }],
+    queryFn: () =>
+      get(`/websites/${websiteId}/events/stats`, {
+        startAt,
+        endAt,
+        ...filters,
+      }),
+    select: response => response.data,
+    enabled: !!websiteId,
+    ...options,
+  });
+}

src/components/hooks/queries/useResultQuery.ts

@@ -10,7 +10,7 @@ export function useResultQuery<T = any>(
 ) {
   const { websiteId, ...parameters } = params;
   const { post, useQuery } = useApi();
-  const { startDate, endDate, timezone } = useDateParameters();
+  const { startDate, endDate, timezone, unit } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<T>({
@@ -22,6 +22,7 @@ export function useResultQuery<T = any>(
         startDate,
         endDate,
         timezone,
+        unit,
         ...params,
         ...filters,
       },
@@ -35,6 +36,7 @@ export function useResultQuery<T = any>(
           startDate,
           endDate,
           timezone,
+          unit,
           ...parameters,
         },
       }),

src/components/hooks/queries/useShareTokenQuery.ts

@@ -1,25 +1,22 @@
-import { setShareToken, useApp } from '@/store/app';
+import { setShare, setShareToken, useApp } from '@/store/app';
 import { useApi } from '../useApi';
 
-const selector = (state: { shareToken: string }) => state.shareToken;
+const selector = state => state.share;
 
-export function useShareTokenQuery(slug: string): {
-  shareToken: any;
-  isLoading?: boolean;
-  error?: Error;
-} {
-  const shareToken = useApp(selector);
+export function useShareTokenQuery(slug: string) {
+  const share = useApp(selector);
   const { get, useQuery } = useApi();
-  const { isLoading, error } = useQuery({
+  const query = useQuery({
     queryKey: ['share', slug],
     queryFn: async () => {
       const data = await get(`/share/${slug}`);
 
-      setShareToken(data);
+      setShare(data);
+      setShareToken({ token: data?.token });
 
       return data;
     },
   });
 
-  return { shareToken, isLoading, error };
+  return { share, ...query };
 }

src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts

@@ -19,7 +19,7 @@ export function useWebsiteExpandedMetricsQuery(
   options?: ReactQueryOptions<WebsiteExpandedMetricsData>,
 ) {
   const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const { startAt, endAt } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<WebsiteExpandedMetricsData>({
@@ -29,8 +29,6 @@ export function useWebsiteExpandedMetricsQuery(
         websiteId,
         startAt,
         endAt,
-        unit,
-        timezone,
         ...filters,
         ...params,
       },
@@ -39,8 +37,6 @@ export function useWebsiteExpandedMetricsQuery(
       get(`/websites/${websiteId}/metrics/expanded`, {
         startAt,
         endAt,
-        unit,
-        timezone,
         ...filters,
         ...params,
       }),

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -15,7 +15,7 @@ export function useWebsiteMetricsQuery(
   options?: ReactQueryOptions<WebsiteMetricsData>,
 ) {
   const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const { startAt, endAt } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<WebsiteMetricsData>({
@@ -25,8 +25,6 @@ export function useWebsiteMetricsQuery(
         websiteId,
         startAt,
         endAt,
-        unit,
-        timezone,
         ...filters,
         ...params,
       },
@@ -35,8 +33,6 @@ export function useWebsiteMetricsQuery(
       get(`/websites/${websiteId}/metrics`, {
         startAt,
         endAt,
-        unit,
-        timezone,
         ...filters,
         ...params,
       }),

src/components/hooks/queries/useWebsiteSharesQuery.ts

@@ -0,0 +1,20 @@
+import type { ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useModified } from '../useModified';
+import { usePagedQuery } from '../usePagedQuery';
+
+export function useWebsiteSharesQuery(
+  { websiteId }: { websiteId: string },
+  options?: ReactQueryOptions,
+) {
+  const { modified } = useModified('shares');
+  const { get } = useApi();
+
+  return usePagedQuery({
+    queryKey: ['websiteShares', { websiteId, modified }],
+    queryFn: pageParams => {
+      return get(`/websites/${websiteId}/shares`, pageParams);
+    },
+    ...options,
+  });
+}

src/components/hooks/queries/useWebsiteStatsQuery.ts

@@ -1,6 +1,5 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useDateParameters } from '@/components/hooks/useDateParameters';
-import { useDateRange } from '@/components/hooks/useDateRange';
 import { useApi } from '../useApi';
 import { useFilterParameters } from '../useFilterParameters';
 
@@ -20,21 +19,16 @@ export interface WebsiteStatsData {
 }
 
 export function useWebsiteStatsQuery(
-  websiteId: string,
+  { websiteId, compare }: { websiteId: string; compare?: string },
   options?: UseQueryOptions<WebsiteStatsData, Error, WebsiteStatsData>,
 ) {
   const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
-  const { compare } = useDateRange();
+  const { startAt, endAt } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<WebsiteStatsData>({
-    queryKey: [
-      'websites:stats',
-      { websiteId, startAt, endAt, unit, timezone, compare, ...filters },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/stats`, { startAt, endAt, unit, timezone, compare, ...filters }),
+    queryKey: ['websites:stats', { websiteId, compare, startAt, endAt, ...filters }],
+    queryFn: () => get(`/websites/${websiteId}/stats`, { compare, startAt, endAt, ...filters }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWeeklyTrafficQuery.ts

@@ -12,13 +12,12 @@ export function useWeeklyTrafficQuery(websiteId: string, params?: Record<string,
   return useQuery({
     queryKey: [
       'sessions',
-      { websiteId, modified, startAt, endAt, unit, timezone, ...params, ...filters },
+      { websiteId, modified, startAt, endAt, timezone, ...params, ...filters },
     ],
     queryFn: () => {
       return get(`/websites/${websiteId}/sessions/weekly`, {
         startAt,
         endAt,
-        unit,
         timezone,
         ...params,
         ...filters,

src/components/hooks/useDateRange.ts

@@ -7,13 +7,13 @@ import { getItem } from '@/lib/storage';
 
 export function useDateRange(options: { ignoreOffset?: boolean; timezone?: string } = {}) {
   const {
-    query: { date = '', offset = 0, compare = 'prev' },
+    query: { date = '', unit = '', offset = 0, compare = 'prev' },
   } = useNavigation();
   const { locale } = useLocale();
-
   const dateRange = useMemo(() => {
     const dateRangeObject = parseDateRange(
       date || getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE,
+      unit,
       locale,
       options.timezone,
     );
@@ -21,12 +21,13 @@ export function useDateRange(options: { ignoreOffset?: boolean; timezone?: strin
     return !options.ignoreOffset && offset
       ? getOffsetDateRange(dateRangeObject, +offset)
       : dateRangeObject;
-  }, [date, offset, options]);
+  }, [date, unit, offset, options]);
 
   const dateCompare = getCompareDate(compare, dateRange.startDate, dateRange.endDate);
 
   return {
     date,
+    unit,
     offset,
     compare,
     isAllTime: date.endsWith(`:all`),

src/components/hooks/useFields.ts

@@ -1,23 +1,142 @@
 import { useMessages } from './useMessages';
 
+export type FieldGroup = 'url' | 'sources' | 'location' | 'environment' | 'utm' | 'other';
+
+export interface Field {
+  name: string;
+  filterLabel: string;
+  label: string;
+  group: FieldGroup;
+}
+
 export function useFields() {
   const { formatMessage, labels } = useMessages();
 
-  const fields = [
-    { name: 'path', type: 'string', label: formatMessage(labels.path) },
-    { name: 'query', type: 'string', label: formatMessage(labels.query) },
-    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
-    { 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) },
-    { name: 'hostname', type: 'string', label: formatMessage(labels.hostname) },
-    { name: 'tag', type: 'string', label: formatMessage(labels.tag) },
-    { name: 'event', type: 'string', label: formatMessage(labels.event) },
+  const fields: Field[] = [
+    {
+      name: 'path',
+      filterLabel: formatMessage(labels.path),
+      label: formatMessage(labels.path),
+      group: 'url',
+    },
+    {
+      name: 'query',
+      filterLabel: formatMessage(labels.query),
+      label: formatMessage(labels.query),
+      group: 'url',
+    },
+    {
+      name: 'title',
+      filterLabel: formatMessage(labels.pageTitle),
+      label: formatMessage(labels.pageTitle),
+      group: 'url',
+    },
+    {
+      name: 'referrer',
+      filterLabel: formatMessage(labels.referrer),
+      label: formatMessage(labels.referrer),
+      group: 'sources',
+    },
+    {
+      name: 'country',
+      filterLabel: formatMessage(labels.country),
+      label: formatMessage(labels.country),
+      group: 'location',
+    },
+    {
+      name: 'region',
+      filterLabel: formatMessage(labels.region),
+      label: formatMessage(labels.region),
+      group: 'location',
+    },
+    {
+      name: 'city',
+      filterLabel: formatMessage(labels.city),
+      label: formatMessage(labels.city),
+      group: 'location',
+    },
+    {
+      name: 'browser',
+      filterLabel: formatMessage(labels.browser),
+      label: formatMessage(labels.browser),
+      group: 'environment',
+    },
+    {
+      name: 'os',
+      filterLabel: formatMessage(labels.os),
+      label: formatMessage(labels.os),
+      group: 'environment',
+    },
+    {
+      name: 'device',
+      filterLabel: formatMessage(labels.device),
+      label: formatMessage(labels.device),
+      group: 'environment',
+    },
+    {
+      name: 'utmSource',
+      filterLabel: formatMessage(labels.source),
+      label: formatMessage(labels.utmSource),
+      group: 'utm',
+    },
+    {
+      name: 'utmMedium',
+      filterLabel: formatMessage(labels.medium),
+      label: formatMessage(labels.utmMedium),
+      group: 'utm',
+    },
+    {
+      name: 'utmCampaign',
+      filterLabel: formatMessage(labels.campaign),
+      label: formatMessage(labels.utmCampaign),
+      group: 'utm',
+    },
+    {
+      name: 'utmContent',
+      filterLabel: formatMessage(labels.content),
+      label: formatMessage(labels.utmContent),
+      group: 'utm',
+    },
+    {
+      name: 'utmTerm',
+      filterLabel: formatMessage(labels.term),
+      label: formatMessage(labels.utmTerm),
+      group: 'utm',
+    },
+    {
+      name: 'hostname',
+      filterLabel: formatMessage(labels.hostname),
+      label: formatMessage(labels.hostname),
+      group: 'other',
+    },
+    {
+      name: 'distinctId',
+      filterLabel: formatMessage(labels.distinctId),
+      label: formatMessage(labels.distinctId),
+      group: 'other',
+    },
+    {
+      name: 'tag',
+      filterLabel: formatMessage(labels.tag),
+      label: formatMessage(labels.tag),
+      group: 'other',
+    },
+    {
+      name: 'event',
+      filterLabel: formatMessage(labels.event),
+      label: formatMessage(labels.event),
+      group: 'other',
+    },
   ];
 
-  return { fields };
+  const groupLabels: { key: FieldGroup; label: string }[] = [
+    { key: 'url', label: formatMessage(labels.url) },
+    { key: 'sources', label: formatMessage(labels.sources) },
+    { key: 'location', label: formatMessage(labels.location) },
+    { key: 'environment', label: formatMessage(labels.environment) },
+    { key: 'utm', label: formatMessage(labels.utm) },
+    { key: 'other', label: formatMessage(labels.other) },
+  ];
+
+  return { fields, groupLabels };
 }

src/components/hooks/useFilterParameters.ts

@@ -18,11 +18,18 @@ export function useFilterParameters() {
       event,
       tag,
       hostname,
+      distinctId,
+      utmSource,
+      utmMedium,
+      utmCampaign,
+      utmContent,
+      utmTerm,
       page,
       pageSize,
       search,
       segment,
       cohort,
+      excludeBounce,
     },
   } = useNavigation();
 
@@ -42,9 +49,16 @@ export function useFilterParameters() {
       event,
       tag,
       hostname,
+      distinctId,
+      utmSource,
+      utmMedium,
+      utmCampaign,
+      utmContent,
+      utmTerm,
       search,
       segment,
       cohort,
+      excludeBounce,
     };
   }, [
     path,
@@ -61,10 +75,17 @@ export function useFilterParameters() {
     event,
     tag,
     hostname,
+    distinctId,
+    utmSource,
+    utmMedium,
+    utmCampaign,
+    utmContent,
+    utmTerm,
     page,
     pageSize,
     search,
     segment,
     cohort,
+    excludeBounce,
   ]);
 }

src/components/input/BounceFilter.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { Checkbox, Row } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks/useMessages';
+import { useNavigation } from '@/components/hooks/useNavigation';
+
+export function BounceFilter() {
+  const { router, query, updateParams } = useNavigation();
+  const { formatMessage, labels } = useMessages();
+  const isSelected = query.excludeBounce === 'true';
+
+  const handleChange = (value: boolean) => {
+    if (value) {
+      router.push(updateParams({ excludeBounce: 'true' }));
+    } else {
+      router.push(updateParams({ excludeBounce: undefined }));
+    }
+  };
+
+  return (
+    <Row alignItems="center" gap>
+      <Checkbox isSelected={isSelected} onChange={handleChange}>
+        {formatMessage(labels.excludeBounce)}
+      </Checkbox>
+    </Row>
+  );
+}

src/components/input/FieldFilters.tsx

@@ -5,8 +5,10 @@ import {
   Icon,
   List,
   ListItem,
+  ListSection,
   Menu,
   MenuItem,
+  MenuSection,
   MenuTrigger,
   Popover,
   Row,
@@ -15,7 +17,7 @@ import { endOfDay, subMonths } from 'date-fns';
 import type { Key } from 'react';
 import { Empty } from '@/components/common/Empty';
 import { FilterRecord } from '@/components/common/FilterRecord';
-import { useFields, useMessages, useMobile } from '@/components/hooks';
+import { type FieldGroup, useFields, useMessages, useMobile } from '@/components/hooks';
 import { Plus } from '@/components/icons';
 
 export interface FieldFiltersProps {
@@ -27,11 +29,25 @@ export interface FieldFiltersProps {
 
 export function FieldFilters({ websiteId, value, exclude = [], onChange }: FieldFiltersProps) {
   const { formatMessage, messages } = useMessages();
-  const { fields } = useFields();
+  const { fields, groupLabels } = useFields();
   const startDate = subMonths(endOfDay(new Date()), 6);
   const endDate = endOfDay(new Date());
   const { isMobile } = useMobile();
 
+  const groupedFields = fields
+    .filter(({ name }) => !exclude.includes(name))
+    .reduce(
+      (acc, field) => {
+        const group = field.group;
+        if (!acc[group]) {
+          acc[group] = [];
+        }
+        acc[group].push(field);
+        return acc;
+      },
+      {} as Record<FieldGroup, typeof fields>,
+    );
+
   const updateFilter = (name: string, props: Record<string, any>) => {
     onChange(value.map(filter => (filter.name === name ? { ...filter, ...props } : filter)));
   };
@@ -66,32 +82,44 @@ export function FieldFilters({ websiteId, value, exclude = [], onChange }: Field
               onAction={handleAdd}
               style={{ maxHeight: 'calc(100vh - 2rem)', overflowY: 'auto' }}
             >
-              {fields
-                .filter(({ name }) => !exclude.includes(name))
-                .map(field => {
-                  const isDisabled = !!value.find(({ name }) => name === field.name);
-                  return (
-                    <MenuItem key={field.name} id={field.name} isDisabled={isDisabled}>
-                      {field.label}
-                    </MenuItem>
-                  );
-                })}
+              {groupLabels.map(({ key: groupKey, label }) => {
+                const groupFields = groupedFields[groupKey];
+                return (
+                  <MenuSection key={groupKey} title={label}>
+                    {groupFields.map(field => {
+                      const isDisabled = !!value.find(({ name }) => name === field.name);
+                      return (
+                        <MenuItem key={field.name} id={field.name} isDisabled={isDisabled}>
+                          {field.filterLabel}
+                        </MenuItem>
+                      );
+                    })}
+                  </MenuSection>
+                );
+              })}
             </Menu>
           </Popover>
         </MenuTrigger>
       </Row>
       <Column display={{ xs: 'none', md: 'flex' }} border="right" paddingRight="3" marginRight="6">
         <List onAction={handleAdd}>
-          {fields
-            .filter(({ name }) => !exclude.includes(name))
-            .map(field => {
-              const isDisabled = !!value.find(({ name }) => name === field.name);
-              return (
-                <ListItem key={field.name} id={field.name} isDisabled={isDisabled}>
-                  {field.label}
-                </ListItem>
-              );
-            })}
+          {groupLabels.map(({ key: groupKey, label }) => {
+            const groupFields = groupedFields[groupKey];
+            if (!groupFields || groupFields.length === 0) return null;
+
+            return (
+              <ListSection key={groupKey} title={label}>
+                {groupFields.map(field => {
+                  const isDisabled = !!value.find(({ name }) => name === field.name);
+                  return (
+                    <ListItem key={field.name} id={field.name} isDisabled={isDisabled}>
+                      {field.filterLabel}
+                    </ListItem>
+                  );
+                })}
+              </ListSection>
+            );
+          })}
         </List>
       </Column>
       <Column overflow="auto" gapY="4" style={{ contain: 'layout' }}>

src/components/input/FilterEditForm.tsx

@@ -22,6 +22,7 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
   const [currentCohort, setCurrentCohort] = useState(cohort);
   const { isMobile } = useMobile();
   const excludeFilters = pathname.includes('/pixels') || pathname.includes('/links');
+  const excludeEvent = !pathname.endsWith('/events');
 
   const handleReset = () => {
     setCurrentFilters([]);
@@ -61,7 +62,13 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
               websiteId={websiteId}
               value={currentFilters}
               onChange={setCurrentFilters}
-              exclude={excludeFilters ? ['path', 'title', 'hostname', 'tag', 'event'] : []}
+              exclude={
+                excludeFilters
+                  ? ['path', 'title', 'hostname', 'distinctId', 'tag', 'event']
+                  : excludeEvent
+                    ? ['event']
+                    : []
+              }
             />
           </TabPanel>
           <TabPanel id="segments">

src/components/input/MobileMenuButton.tsx

@@ -10,7 +10,7 @@ export function MobileMenuButton(props: DialogProps) {
         </Icon>
       </Button>
       <Modal placement="left" offset="80px">
-        <Dialog variant="sheet" {...props} />
+        <Dialog variant="sheet" {...props} style={{ width: 'auto' }} />
       </Modal>
     </DialogTrigger>
   );

src/components/input/UnitFilter.tsx

@@ -0,0 +1,71 @@
+import { ListItem, Row, Select } from '@umami/react-zen';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
+import { getItem } from '@/lib/storage';
+
+export function UnitFilter() {
+  const { formatMessage, labels } = useMessages();
+  const { router, query, updateParams } = useNavigation();
+
+  const DATE_RANGE_UNIT_CONFIG = {
+    '0week': {
+      defaultUnit: 'day',
+      availableUnits: ['day', 'hour'],
+    },
+    '7day': {
+      defaultUnit: 'day',
+      availableUnits: ['day', 'hour'],
+    },
+    '0month': {
+      defaultUnit: 'day',
+      availableUnits: ['day', 'hour'],
+    },
+    '30day': {
+      defaultUnit: 'day',
+      availableUnits: ['day', 'hour'],
+    },
+    '90day': {
+      defaultUnit: 'day',
+      availableUnits: ['day', 'month'],
+    },
+    '6month': {
+      defaultUnit: 'month',
+      availableUnits: ['month', 'day'],
+    },
+  };
+
+  const unitConfig =
+    DATE_RANGE_UNIT_CONFIG[query.date || getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE];
+
+  if (!unitConfig) {
+    return null;
+  }
+
+  const handleChange = (value: string) => {
+    router.push(updateParams({ unit: value }));
+  };
+
+  const options = unitConfig.availableUnits.map(unit => ({
+    id: unit,
+    label: formatMessage(labels[unit]),
+  }));
+
+  const selectedUnit = query.unit ?? unitConfig.defaultUnit;
+
+  return (
+    <Row>
+      <Select
+        value={selectedUnit}
+        onChange={handleChange}
+        popoverProps={{ placement: 'bottom right' }}
+        style={{ width: 100 }}
+      >
+        {options.map(({ id, label }) => (
+          <ListItem key={id} id={id}>
+            {label}
+          </ListItem>
+        ))}
+      </Select>
+    </Row>
+  );
+}

src/components/input/UserSelect.tsx

@@ -0,0 +1,71 @@
+import { ListItem, Row, Select, type SelectProps, Text } from '@umami/react-zen';
+import { useMemo, useState } from 'react';
+import { Empty } from '@/components/common/Empty';
+import { useMessages, useTeamMembersQuery, useUsersQuery } from '@/components/hooks';
+
+export function UserSelect({
+  teamId,
+  onChange,
+  ...props
+}: {
+  teamId?: string;
+} & SelectProps) {
+  const { formatMessage, messages } = useMessages();
+  const { data: users, isLoading: usersLoading } = useUsersQuery();
+  const { data: teamMembers, isLoading: teamMembersLoading } = useTeamMembersQuery(teamId);
+  const [username, setUsername] = useState<string>();
+  const [search, setSearch] = useState('');
+
+  const listItems = useMemo(() => {
+    if (!users) {
+      return [];
+    }
+    if (!teamId || !teamMembers) {
+      return users.data;
+    }
+    const teamMemberIds = teamMembers.data.map(({ userId }) => userId);
+    return users.data.filter(({ id }) => !teamMemberIds.includes(id));
+  }, [users, teamMembers, teamId]);
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+  };
+
+  const handleOpenChange = () => {
+    setSearch('');
+  };
+
+  const handleChange = (id: string) => {
+    setUsername(listItems.find(item => item.id === id)?.username);
+    onChange(id);
+  };
+
+  const renderValue = () => {
+    return (
+      <Row maxWidth="160px">
+        <Text truncate>{username}</Text>
+      </Row>
+    );
+  };
+
+  return (
+    <Select
+      {...props}
+      items={listItems}
+      value={username}
+      isLoading={usersLoading || (teamId && teamMembersLoading)}
+      allowSearch={true}
+      searchValue={search}
+      onSearch={handleSearch}
+      onChange={handleChange}
+      onOpenChange={handleOpenChange}
+      renderValue={renderValue}
+      listProps={{
+        renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
+        style: { maxHeight: 'calc(42vh - 65px)' },
+      }}
+    >
+      {({ id, username }: any) => <ListItem key={id}>{username}</ListItem>}
+    </Select>
+  );
+}

src/components/input/WebsiteDateFilter.tsx

@@ -31,9 +31,11 @@ export function WebsiteDateFilter({
   const showCompare = allowCompare && !isAllTime;
 
   const websiteDateRange = useDateRangeQuery(websiteId);
+  const { startDate, endDate } = websiteDateRange;
+  const hasData = startDate && endDate;
 
   const handleChange = (date: string) => {
-    if (date === 'all') {
+    if (date === 'all' && hasData) {
       router.push(
         updateParams({
           date: `${getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate)}:all`,
@@ -41,7 +43,7 @@ export function WebsiteDateFilter({
         }),
       );
     } else {
-      router.push(updateParams({ date, offset: undefined }));
+      router.push(updateParams({ date, offset: undefined, unit: undefined }));
     }
   };
 
@@ -78,7 +80,7 @@ export function WebsiteDateFilter({
         <DateFilter
           value={dateValue}
           onChange={handleChange}
-          showAllTime={showAllTime}
+          showAllTime={hasData && showAllTime}
           renderDate={+offset !== 0}
         />
       </Row>

src/components/input/WebsiteFilterButton.tsx

@@ -1,3 +1,5 @@
+import { Checkbox, Row } from '@umami/react-zen';
+import { useState } from 'react';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { ListFilter } from '@/components/icons';
 import { DialogButton } from '@/components/input/DialogButton';
@@ -12,12 +14,20 @@ export function WebsiteFilterButton({
   alignment?: 'end' | 'center' | 'start';
 }) {
   const { formatMessage, labels } = useMessages();
-  const { updateParams, router } = useNavigation();
+  const { updateParams, pathname, router, query } = useNavigation();
+  const [excludeBounce, setExcludeBounce] = useState(!!query.excludeBounce);
+  const isOverview =
+    /^\/teams\/[^/]+\/websites\/[^/]+$/.test(pathname) || /^\/share\/[^/]+$/.test(pathname);
 
   const handleChange = ({ filters, segment, cohort }: any) => {
     const params = filtersArrayToObject(filters);
 
-    const url = updateParams({ ...params, segment, cohort });
+    const url = updateParams({
+      ...params,
+      segment,
+      cohort,
+      excludeBounce: excludeBounce ? 'true' : undefined,
+    });
 
     router.push(url);
   };
@@ -25,7 +35,22 @@ export function WebsiteFilterButton({
   return (
     <DialogButton icon={<ListFilter />} label={formatMessage(labels.filter)} variant="outline">
       {({ close }) => {
-        return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;
+        return (
+          <>
+            {isOverview && (
+              <Row position="absolute" top="30px" right="30px">
+                <Checkbox
+                  value={excludeBounce ? 'true' : ''}
+                  onChange={setExcludeBounce}
+                  style={{ marginTop: '3px' }}
+                >
+                  {formatMessage(labels.excludeBounce)}
+                </Checkbox>
+              </Row>
+            )}
+            <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />
+          </>
+        );
       }}
     </DialogButton>
   );

src/components/input/WebsiteSelect.tsx

@@ -26,7 +26,7 @@ export function WebsiteSelect({
   const { user } = useLoginQuery();
   const { data, isLoading } = useUserWebsitesQuery(
     { userId: user?.id, teamId },
-    { search, pageSize: 10, includeTeams },
+    { search, pageSize: 20, includeTeams },
   );
   const listItems: { id: string; name: string }[] = data?.data || [];
 

src/components/messages.ts

@@ -43,6 +43,7 @@ export const labels = defineMessages({
   joinTeam: { id: 'label.join-team', defaultMessage: 'Join team' },
   settings: { id: 'label.settings', defaultMessage: 'Settings' },
   owner: { id: 'label.owner', defaultMessage: 'Owner' },
+  url: { id: 'label.url', defaultMessage: 'URL' },
   teamOwner: { id: 'label.team-owner', defaultMessage: 'Team owner' },
   teamManager: { id: 'label.team-manager', defaultMessage: 'Team manager' },
   teamMember: { id: 'label.team-member', defaultMessage: 'Team member' },
@@ -111,6 +112,7 @@ export const labels = defineMessages({
   event: { id: 'label.event', defaultMessage: 'Event' },
   events: { id: 'label.events', defaultMessage: 'Events' },
   eventName: { id: 'label.event-name', defaultMessage: 'Event name' },
+  excludeBounce: { id: 'label.exclude-bounce', defaultMessage: 'Exclude bounces' },
   query: { id: 'label.query', defaultMessage: 'Query' },
   queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
   back: { id: 'label.back', defaultMessage: 'Back' },
@@ -146,6 +148,7 @@ export const labels = defineMessages({
   poweredBy: { id: 'label.powered-by', defaultMessage: 'Powered by {name}' },
   pageViews: { id: 'label.page-views', defaultMessage: 'Page views' },
   uniqueVisitors: { id: 'label.unique-visitors', defaultMessage: 'Unique visitors' },
+  uniqueEvents: { id: 'label.unique-events', defaultMessage: 'Unique Events' },
   bounceRate: { id: 'label.bounce-rate', defaultMessage: 'Bounce rate' },
   viewsPerVisit: { id: 'label.views-per-visit', defaultMessage: 'Views per visit' },
   visitDuration: { id: 'label.visit-duration', defaultMessage: 'Visit duration' },
@@ -243,9 +246,22 @@ export const labels = defineMessages({
   device: { id: 'label.device', defaultMessage: 'Device' },
   pageTitle: { id: 'label.pageTitle', defaultMessage: 'Page title' },
   tag: { id: 'label.tag', defaultMessage: 'Tag' },
+  source: { id: 'label.source', defaultMessage: 'Source' },
+  medium: { id: 'label.medium', defaultMessage: 'Medium' },
+  campaign: { id: 'label.campaign', defaultMessage: 'Campaign' },
+  content: { id: 'label.content', defaultMessage: 'Content' },
+  term: { id: 'label.term', defaultMessage: 'Term' },
+  utmSource: { id: 'label.utm-source', defaultMessage: 'UTM source' },
+  utmMedium: { id: 'label.utm-medium', defaultMessage: 'UTM medium' },
+  utmCampaign: { id: 'label.utm-campaign', defaultMessage: 'UTM campaign' },
+  utmContent: { id: 'label.utm-content', defaultMessage: 'UTM content' },
+  utmTerm: { id: 'label.utm-term', defaultMessage: 'UTM term' },
   segment: { id: 'label.segment', defaultMessage: 'Segment' },
   cohort: { id: 'label.cohort', defaultMessage: 'Cohort' },
+  minute: { id: 'label.minute', defaultMessage: 'Minute' },
+  hour: { id: 'label.hour', defaultMessage: 'Hour' },
   day: { id: 'label.day', defaultMessage: 'Day' },
+  month: { id: 'label.month', defaultMessage: 'Month' },
   date: { id: 'label.date', defaultMessage: 'Date' },
   pageOf: { id: 'label.page-of', defaultMessage: 'Page {current} of {total}' },
   create: { id: 'label.create', defaultMessage: 'Create' },
@@ -306,9 +322,7 @@ export const labels = defineMessages({
   channel: { id: 'label.channel', defaultMessage: 'Channel' },
   channels: { id: 'label.channels', defaultMessage: 'Channels' },
   sources: { id: 'label.sources', defaultMessage: 'Sources' },
-  medium: { id: 'label.medium', defaultMessage: 'Medium' },
   campaigns: { id: 'label.campaigns', defaultMessage: 'Campaigns' },
-  content: { id: 'label.content', defaultMessage: 'Content' },
   terms: { id: 'label.terms', defaultMessage: 'Terms' },
   direct: { id: 'label.direct', defaultMessage: 'Direct' },
   referral: { id: 'label.referral', defaultMessage: 'Referral' },

src/components/metrics/MetricCard.tsx

@@ -25,7 +25,7 @@ export const MetricCard = ({
   showChange = false,
 }: MetricCardProps) => {
   const diff = value - change;
-  const pct = ((value - diff) / diff) * 100;
+  const pct = diff !== 0 ? ((value - diff) / diff) * 100 : value !== 0 ? 100 : 0;
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
   const changeProps = useSpring({ x: Number(pct) || 0, from: { x: 0 } });
 

src/index.ts

@@ -19,11 +19,13 @@ export * from '@/app/(main)/teams/TeamAddForm';
 export * from '@/app/(main)/teams/TeamJoinForm';
 export * from '@/app/(main)/teams/TeamLeaveButton';
 export * from '@/app/(main)/teams/TeamLeaveForm';
+export * from '@/app/(main)/teams/TeamMemberAddForm';
 export * from '@/app/(main)/teams/TeamProvider';
 export * from '@/app/(main)/teams/TeamsAddButton';
 export * from '@/app/(main)/teams/TeamsDataTable';
 export * from '@/app/(main)/teams/TeamsHeader';
 export * from '@/app/(main)/teams/TeamsJoinButton';
+export * from '@/app/(main)/teams/TeamsMemberAddButton';
 export * from '@/app/(main)/teams/TeamsTable';
 export * from '@/app/(main)/websites/[websiteId]/settings/WebsiteData';
 export * from '@/app/(main)/websites/[websiteId]/settings/WebsiteDeleteForm';

src/lang/fi-FI.json

@@ -37,7 +37,7 @@
   "label.compare-dates": "Vertaa päivämääriä",
   "label.confirm": "Vahvista",
   "label.confirm-password": "Vahvista salasana",
-  "label.contains": "Contains",
+  "label.contains": "Sisältää",
   "label.content": "Sisältö",
   "label.continue": "Jatka",
   "label.conversion": "Konversio",
@@ -96,7 +96,7 @@
   "label.false": "Epätosi",
   "label.field": "Kenttä",
   "label.fields": "Kentät",
-  "label.filter": "Filter",
+  "label.filter": "Suodatin",
   "label.filter-combined": "Yhdistetty",
   "label.filter-raw": "Käsittelemätön",
   "label.filters": "Suodattimet",
@@ -151,7 +151,7 @@
   "label.members": "Jäsenet",
   "label.min": "Minimi",
   "label.mobile": "Puhelin",
-  "label.model": "Model",
+  "label.model": "Malli",
   "label.more": "Lisää",
   "label.my-account": "Oma tili",
   "label.my-websites": "Omat verkkosivut",
@@ -184,9 +184,9 @@
   "label.paths": "Polut",
   "label.pixels": "Pikselit",
   "label.powered-by": "Voimanlähteenä {name}",
-  "label.previous": "Previous",
-  "label.previous-period": "Previous period",
-  "label.previous-year": "Previous year",
+  "label.previous": "Edellinen",
+  "label.previous-period": "Edellinen ajanjakso",
+  "label.previous-year": "Edellinen vuosi",
   "label.profile": "Profiili",
   "label.properties": "Ominaisuudet",
   "label.property": "Ominaisuus",
@@ -195,16 +195,16 @@
   "label.query-parameters": "Kyselyn parametrit",
   "label.realtime": "Juuri nyt",
   "label.referral": "Viittaus",
-  "label.referrer": "Referrer",
+  "label.referrer": "Viittaaja",
   "label.referrers": "Viittaajat",
   "label.refresh": "Päivitä",
-  "label.regenerate": "Regenerate",
-  "label.region": "Region",
-  "label.regions": "Regions",
+  "label.regenerate": "Luo uudelleen",
+  "label.region": "Alue",
+  "label.regions": "Alueet",
   "label.remaining": "Jäljellä",
-  "label.remove": "Remove",
-  "label.remove-member": "Remove member",
-  "label.reports": "Reports",
+  "label.remove": "Poista",
+  "label.remove-member": "Poista jäsen",
+  "label.reports": "Raportit",
   "label.required": "Vaaditaan",
   "label.reset": "Nollaa",
   "label.reset-website": "Nollaa tilastot",
@@ -212,19 +212,19 @@
   "label.retention-description": "Measure your website stickiness by tracking how often users return.",
   "label.revenue": "Tulot",
   "label.revenue-description": "Katso tulosi ajan mittaan.",
-  "label.role": "Role",
-  "label.run-query": "Run query",
+  "label.role": "Rooli",
+  "label.run-query": "Suorita kysely",
   "label.save": "Tallenna",
   "label.screens": "Näytöt",
-  "label.search": "Search",
-  "label.select": "Select",
-  "label.select-date": "Select date",
+  "label.search": "Haku",
+  "label.select": "Valitse",
+  "label.select-date": "Valitse päivämäärä",
   "label.select-filter": "Valitse suodatin",
-  "label.select-role": "Select role",
-  "label.select-website": "Select website",
+  "label.select-role": "Valitse rooli",
+  "label.select-website": "Valitse verkkosivu",
   "label.session": "Istunto",
   "label.session-data": "Istuntotiedot",
-  "label.sessions": "Sessions",
+  "label.sessions": "Istunnot",
   "label.settings": "Asetukset",
   "label.share": "Jaa",
   "label.share-url": "Jaa URL",
@@ -233,107 +233,107 @@
   "label.sources": "Lähteet",
   "label.start-step": "Aloitusvaihe",
   "label.steps": "Vaiheet",
-  "label.sum": "Sum",
+  "label.sum": "Summa",
   "label.tablet": "Tabletti",
   "label.tag": "Tunniste",
   "label.tags": "Tunnisteet",
-  "label.team": "Team",
-  "label.team-id": "Team ID",
-  "label.team-manager": "Team manager",
-  "label.team-member": "Team member",
-  "label.team-name": "Team name",
-  "label.team-owner": "Team owner",
+  "label.team": "Tiimi",
+  "label.team-id": "Tiimin ID",
+  "label.team-manager": "Tiimin johtaja",
+  "label.team-member": "Tiimin jäsen",
+  "label.team-name": "Tiimin nimi",
+  "label.team-owner": "Tiimin omistaja",
   "label.team-settings": "Tiimin asetukset",
   "label.team-view-only": "Team view only",
-  "label.team-websites": "Team websites",
-  "label.teams": "Teams",
+  "label.team-websites": "Tiimin verkkosivut",
+  "label.teams": "Tiimit",
   "label.terms": "Ehdot",
   "label.theme": "Teema",
   "label.this-month": "Tämä kuukausi",
   "label.this-week": "Tämä viikko",
   "label.this-year": "Tämä vuosi",
   "label.timezone": "Aikavyöhyke",
-  "label.title": "Title",
+  "label.title": "Otsikko",
   "label.today": "Tänään",
   "label.toggle-charts": "Kytke kaaviot päälle/pois",
-  "label.total": "Total",
-  "label.total-records": "Total records",
+  "label.total": "Yhteensä",
+  "label.total-records": "Tietueita yhteensä",
   "label.tracking-code": "Seurantakoodi",
-  "label.transactions": "Transactions",
-  "label.transfer": "Transfer",
-  "label.transfer-website": "Transfer website",
-  "label.true": "True",
-  "label.type": "Type",
-  "label.unique": "Unique",
+  "label.transactions": "Transaktiot",
+  "label.transfer": "Siirrä",
+  "label.transfer-website": "Siirrä verkkosivu",
+  "label.true": "Tosi",
+  "label.type": "Tyyppi",
+  "label.unique": "Uniikki",
   "label.unique-visitors": "Yksittäiset kävijät",
-  "label.uniqueCustomers": "Unique Customers",
+  "label.uniqueCustomers": "Uniikit asiakkaat",
   "label.unknown": "Tuntematon",
-  "label.untitled": "Untitled",
-  "label.update": "Update",
-  "label.user": "User",
+  "label.untitled": "Nimetön",
+  "label.update": "Päivitä",
+  "label.user": "Käyttäjä",
   "label.username": "Käyttäjänimi",
-  "label.users": "Users",
+  "label.users": "Käyttäjät",
   "label.utm": "UTM",
-  "label.utm-description": "Track your campaigns through UTM parameters.",
-  "label.value": "Value",
-  "label.view": "View",
+  "label.utm-description": "Seuraa kampanjoitasi UTM-parametrien avulla.",
+  "label.value": "Arvo",
+  "label.view": "Näytä",
   "label.view-details": "Katso tiedot",
-  "label.view-only": "View only",
+  "label.view-only": "Vain katselu",
   "label.views": "Näyttökerrat",
-  "label.views-per-visit": "Views per visit",
+  "label.views-per-visit": "Katselukerrat vierailua kohti",
   "label.visit-duration": "Keskimääräinen vierailuaika",
   "label.visitors": "Vierailijat",
-  "label.visits": "Visits",
-  "label.website": "Website",
-  "label.website-id": "Website ID",
+  "label.visits": "Vierailut",
+  "label.website": "Verkkosivu",
+  "label.website-id": "Verkkosivun ID",
   "label.websites": "Verkkosivut",
-  "label.window": "Window",
-  "label.yesterday": "Yesterday",
-  "label.behavior": "Behavior",
-  "message.action-confirmation": "Type {confirmation} in the box below to confirm.",
+  "label.window": "Ikkuna",
+  "label.yesterday": "Eilen",
+  "label.behavior": "Käyttäytyminen",
+  "message.action-confirmation": "Kirjoita {confirmation} alla olevaan kenttään vahvistaaksesi.",
   "message.active-users": "{x} {x, plural, one {vierailija} other {vierailijaa}}",
-  "message.bad-request": "Bad request",
-  "message.collected-data": "Collected data",
+  "message.bad-request": "Virheellinen pyyntö",
+  "message.collected-data": "Kerätty data",
   "message.confirm-delete": "Haluatko varmasti poistaa sivuston {target}?",
-  "message.confirm-leave": "Are you sure you want to leave {target}?",
-  "message.confirm-remove": "Are you sure you want to remove {target}?",
+  "message.confirm-leave": "Haluatko varmasti poistua {target}?",
+  "message.confirm-remove": "Haluatko varmasti poistaa {target}?",
   "message.confirm-reset": "Haluatko varmasti poistaa sivuston {target} tilastot?",
-  "message.delete-team-warning": "Deleting a team will also delete all team websites.",
+  "message.delete-team-warning": "Tiimin poistaminen poistaa myös kaikki tiimin sivustot.",
   "message.delete-website-warning": "Kaikki siihen liittyvät tiedot poistetaan.",
   "message.error": "Jotain meni pieleen.",
   "message.event-log": "{event} on {url}",
-  "message.forbidden": "Forbidden",
+  "message.forbidden": "Kielletty",
   "message.go-to-settings": "Mene asetuksiin",
   "message.incorrect-username-password": "Väärä käyttäjänimi/salasana.",
   "message.invalid-domain": "Virheellinen verkkotunnus",
-  "message.min-password-length": "Minimum length of {n} characters",
-  "message.new-version-available": "A new version of Umami {version} is available!",
+  "message.min-password-length": "Vähimmäispituus {n} merkkiä",
+  "message.new-version-available": "Umamista on saatavilla uusi versio {version}!",
   "message.no-data-available": "Tietoja ei ole käytettävissä.",
-  "message.no-event-data": "No event data is available.",
+  "message.no-event-data": "Tapahtumatietoja ei ole saatavilla.",
   "message.no-match-password": "Salasanat eivät täsmää",
-  "message.no-results-found": "No results were found.",
-  "message.no-team-websites": "This team does not have any websites.",
-  "message.no-teams": "You have not created any teams.",
-  "message.no-users": "There are no users.",
+  "message.no-results-found": "Tuloksia ei löytynyt.",
+  "message.no-team-websites": "Tällä tiimillä ei ole verkkosivustoja.",
+  "message.no-teams": "Et ole luonut yhtään tiimiä.",
+  "message.no-users": "Käyttäjiä ei ole.",
   "message.no-websites-configured": "Sinulla ei ole määritettyjä verkkosivustoja.",
-  "message.not-found": "Not found",
-  "message.nothing-selected": "Nothing selected.",
+  "message.not-found": "Ei löytynyt",
+  "message.nothing-selected": "Mitään ei ole valittu.",
   "message.page-not-found": "Sivua ei löydetty.",
-  "message.reset-website": "To reset this website, type {confirmation} in the box below to confirm.",
+  "message.reset-website": "Nollaa verkkosivusto kirjoittamalla {confirmation} alla olevaan kenttään vahvistaaksesi.",
   "message.reset-website-warning": "Kaikki sivuston tilastot poistetaan, mutta seurantakoodi pysyy muuttumattomana.",
   "message.saved": "Tallennettu onnistuneesti.",
-  "message.sever-error": "Server error",
+  "message.sever-error": "Palvelinvirhe",
   "message.share-url": "Tämä on julkisesti jaettu URL sivustolle {target}.",
-  "message.team-already-member": "You are already a member of the team.",
-  "message.team-not-found": "Team not found.",
-  "message.team-websites-info": "Websites can be viewed by anyone on the team.",
+  "message.team-already-member": "Olet jo tiimissä.",
+  "message.team-not-found": "Tiimiä ei löydetty.",
+  "message.team-websites-info": "Verkkosivuja voi tarkastella kuka tahansa tiimin jäsen.",
   "message.tracking-code": "Seurantakoodi",
-  "message.transfer-team-website-to-user": "Transfer this website to your account?",
-  "message.transfer-user-website-to-team": "Select the team to transfer this website to.",
-  "message.transfer-website": "Transfer website ownership to your account or another team.",
-  "message.triggered-event": "Triggered event",
-  "message.unauthorized": "Unauthorized",
-  "message.user-deleted": "User deleted.",
-  "message.viewed-page": "Viewed page",
+  "message.transfer-team-website-to-user": "Siirretäänkö tämä verkkosivu tilillesi?",
+  "message.transfer-user-website-to-team": "Valitse tiimi, johon verkkosivusto siirretään.",
+  "message.transfer-website": "Siirrä verkkosivusto tiliisi tai toiselle tiimille.",
+  "message.triggered-event": "Laukaistu tapahtuma",
+  "message.unauthorized": "Ei oikeuksia",
+  "message.user-deleted": "Käyttäjä poistettu.",
+  "message.viewed-page": "Katsottu sivu",
   "message.visitor-log": "Vierailija maasta {country} selaimella {browser} laitteella {os} {device}"
 }

src/lib/__tests__/detect.test.ts

@@ -18,5 +18,5 @@ test('getIpAddress: Standard header', () => {
 });
 
 test('getIpAddress: No header', () => {
-  expect(getIpAddress(new Headers())).toEqual(null);
+  expect(getIpAddress(new Headers())).toEqual(undefined);
 });