Renamed query hooks. Fixed conversion bugs.

2026-02-21 21:15:35 +01:00 · 2025-03-22 03:48:18 -07:00 · 2025-03-22 03:48:18 -07:00 · 7886c3f393
commit 7886c3f393
parent adca3c36d0
110 changed files with 423 additions and 489 deletions
--- a/src/app/(main)/websites/WebsitesPage.tsx
+++ b/src/app/(main)/websites/WebsitesPage.tsx
@ -1,10 +1,10 @@
 'use client';
 import { WebsitesHeader } from '@/app/(main)/settings/websites/WebsitesHeader';
 import { WebsitesDataTable } from '@/app/(main)/settings/websites/WebsitesDataTable';
-import { useTeamUrl } from '@/components/hooks';
+import { useNavigation } from '@/components/hooks';

 export function WebsitesPage() {
-  const { teamId } = useTeamUrl();
+  const { teamId } = useNavigation();

  return (
    <>
--- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { PageviewsChart } from '@/components/metrics/PageviewsChart';
-import { useWebsitePageviews } from '@/components/hooks/queries/useWebsitePageviews';
+import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
 import { useDateRange } from '@/components/hooks';

 export function WebsiteChart({
@ -12,7 +12,10 @@ export function WebsiteChart({
 }) {
  const { dateRange, dateCompare } = useDateRange(websiteId);
  const { startDate, endDate, unit, value } = dateRange;
-  const { data, isLoading } = useWebsitePageviews(websiteId, compareMode ? dateCompare : undefined);
+  const { data, isLoading } = useWebsitePageviewsQuery(
+    websiteId,
+    compareMode ? dateCompare : undefined,
+  );
  const { pageviews, sessions, compare } = (data || {}) as any;

  const chartData = useMemo(() => {
--- a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
@ -5,7 +5,7 @@ import { WebsiteChart } from './WebsiteChart';
 import { useDashboard } from '@/store/dashboard';
 import { WebsiteHeader } from './WebsiteHeader';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';

 export function WebsiteChartList({
@ -19,7 +19,7 @@ export function WebsiteChartList({
 }) {
  const { formatMessage, labels } = useMessages();
  const { websiteOrder, websiteActive } = useDashboard();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();

  const ordered = useMemo(() => {
    return websites
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.module.css
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.module.css
@ -1,62 +0,0 @@
-.header {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 20px 0px;
-}
-
-.title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  font-size: 24px;
-  font-weight: 700;
-  overflow: hidden;
-  height: 60px;
-}
-
-.actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 30px;
-  min-height: 0;
-  margin-left: auto;
-}
-
-.selected {
-  font-weight: bold;
-}
-
-.links {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-@media only screen and (max-width: 768px) {
-  .header {
-    grid-template-columns: 1fr;
-  }
-
-  .links {
-    justify-content: space-evenly;
-    flex: 1;
-    border-bottom: 1px solid var(--base300);
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-  }
-
-  .label {
-    display: none;
-  }
-
-  .icon,
-  .icon svg {
-    width: 20px;
-    height: 20px;
-  }
-}
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@ -1,99 +1,31 @@
 import { ReactNode } from 'react';
-import { Button, Icon, Text } from '@umami/react-zen';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import classNames from 'classnames';
+import { Row, Heading } from '@umami/react-zen';
 import { Favicon } from '@/components/common/Favicon';
-import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { useWebsiteQuery } from '@/components/hooks';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
-import styles from './WebsiteHeader.module.css';
+import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';

 export function WebsiteHeader({
  websiteId,
-  showLinks = true,
  children,
 }: {
  websiteId: string;
-  showLinks?: boolean;
  children?: ReactNode;
 }) {
-  const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
-  const pathname = usePathname();
-  const { data: website } = useWebsite(websiteId);
+  const { data: website } = useWebsiteQuery(websiteId);
  const { name, domain } = website || {};

-  const links = [
-    {
-      label: formatMessage(labels.overview),
-      icon: <Icons.Overview />,
-      path: '',
-    },
-    {
-      label: formatMessage(labels.events),
-      icon: <Icons.Lightning />,
-      path: '/events',
-    },
-    {
-      label: formatMessage(labels.sessions),
-      icon: <Icons.User />,
-      path: '/sessions',
-    },
-    {
-      label: formatMessage(labels.realtime),
-      icon: <Icons.Clock />,
-      path: '/realtime',
-    },
-    {
-      label: formatMessage(labels.compare),
-      icon: <Icons.Compare />,
-      path: '/compare',
-    },
-    {
-      label: formatMessage(labels.reports),
-      icon: <Icons.Reports />,
-      path: '/reports',
-    },
-  ];
-
  return (
-    <div className={styles.header}>
-      <div className={styles.title}>
+    <>
+      <Row alignItems="center" gap="3" marginY="6">
        <Favicon domain={domain} />
-        <Text>{name}</Text>
-        <ActiveUsers websiteId={websiteId} />
-      </div>
-      <div className={styles.actions}>
-        {showLinks && (
-          <div className={styles.links}>
-            {links.map(({ label, icon, path }) => {
-              const selected = path
-                ? pathname.includes(path)
-                : pathname.match(/^\/websites\/[\w-]+$/);
-
-              return (
-                <Link
-                  key={label}
-                  href={renderTeamUrl(`/websites/${websiteId}${path}`)}
-                  shallow={true}
-                >
-                  <Button
-                    variant="quiet"
-                    className={classNames({
-                      [styles.selected]: selected,
-                    })}
-                  >
-                    <Icon className={styles.icon}>{icon}</Icon>
-                    <Text className={styles.label}>{label}</Text>
-                  </Button>
-                </Link>
-              );
-            })}
-          </div>
-        )}
+        <Heading>
+          {name}
+          <ActiveUsers websiteId={websiteId} />
+        </Heading>
        {children}
-      </div>
-    </div>
+      </Row>
+      <WebsiteTabs websiteId={websiteId} />
+    </>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@ -5,7 +5,7 @@ import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatShortTime, formatLongNumber } from '@/lib/format';
-import { useWebsiteStats } from '@/components/hooks/queries/useWebsiteStats';
+import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
 import { useWebsites, setWebsiteDateCompare } from '@/store/websites';
 import { WebsiteFilterButton } from './WebsiteFilterButton';
 import styles from './WebsiteMetricsBar.module.css';
@ -26,8 +26,8 @@ export function WebsiteMetricsBar({
  const { dateRange } = useDateRange(websiteId);
  const { formatMessage, labels } = useMessages();
  const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
-  const { ref, isSticky } = useSticky({ enabled: sticky });
-  const { data, isLoading, isFetched, error } = useWebsiteStats(
+  const { ref } = useSticky({ enabled: sticky });
+  const { data, isLoading, isFetched, error } = useWebsiteStatsQuery(
    websiteId,
    compareMode && dateCompare,
  );
@ -82,13 +82,7 @@ export function WebsiteMetricsBar({
  ];

  return (
-    <div
-      ref={ref}
-      className={classNames(styles.container, {
-        [styles.sticky]: sticky,
-        [styles.isSticky]: sticky && isSticky,
-      })}
-    >
+    <div ref={ref} className={classNames(styles.container)}>
      <div>
        <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
          {metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
--- a/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
@ -1,6 +1,6 @@
 'use client';
 import { createContext, ReactNode, useEffect } from 'react';
-import { useModified, useWebsite } from '@/components/hooks';
+import { useModified, useWebsiteQuery } from '@/components/hooks';
 import { Loading } from '@umami/react-zen';

 export const WebsiteContext = createContext(null);
@ -13,7 +13,7 @@ export function WebsiteProvider({
  children: ReactNode;
 }) {
  const { modified } = useModified(`website:${websiteId}`);
-  const { data: website, isFetching, isLoading, refetch } = useWebsite(websiteId);
+  const { data: website, isFetching, isLoading, refetch } = useWebsiteQuery(websiteId);

  useEffect(() => {
    if (modified) {
--- a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
@ -0,0 +1,58 @@
+import { Tabs, TabList, Tab, Icon, Text, Row } from '@umami/react-zen';
+import { Icons } from '@/components/icons';
+import { useMessages, useNavigation } from '@/components/hooks';
+
+export function WebsiteTabs({ websiteId }: { websiteId: string }) {
+  const { formatMessage, labels } = useMessages();
+  const { renderTeamUrl } = useNavigation();
+
+  const links = [
+    {
+      label: formatMessage(labels.overview),
+      icon: <Icons.Overview />,
+      path: '',
+    },
+    {
+      label: formatMessage(labels.events),
+      icon: <Icons.Lightning />,
+      path: '/events',
+    },
+    {
+      label: formatMessage(labels.sessions),
+      icon: <Icons.User />,
+      path: '/sessions',
+    },
+    {
+      label: formatMessage(labels.realtime),
+      icon: <Icons.Clock />,
+      path: '/realtime',
+    },
+    {
+      label: formatMessage(labels.compare),
+      icon: <Icons.Compare />,
+      path: '/compare',
+    },
+    {
+      label: formatMessage(labels.reports),
+      icon: <Icons.Reports />,
+      path: '/reports',
+    },
+  ].map((link, index) => ({ ...link, id: index }));
+
+  return (
+    <Tabs>
+      <TabList items={links}>
+        {({ label, icon, path }) => {
+          return (
+            <Tab key={path} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
+              <Row gap="3" alignItems="center">
+                <Icon fillColor="currentColor">{icon}</Icon>
+                <Text>{label}</Text>
+              </Row>
+            </Tab>
+          );
+        }}
+      </TabList>
+    </Tabs>
+  );
+}
--- a/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
@ -1,5 +1,9 @@
-import { GridColumn, GridTable } from '@umami/react-zen';
-import { useEventDataProperties, useEventDataValues, useMessages } from '@/components/hooks';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import {
+  useEventDataPropertiesQuery,
+  useEventDataValuesQuery,
+  useMessages,
+} from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PieChart } from '@/components/charts/PieChart';
 import { useState } from 'react';
@ -10,8 +14,8 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
  const [propertyName, setPropertyName] = useState('');
  const [eventName, setEventName] = useState('');
  const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useEventDataProperties(websiteId);
-  const { data: values } = useEventDataValues(websiteId, eventName, propertyName);
+  const { data, isLoading, isFetched, error } = useEventDataPropertiesQuery(websiteId);
+  const { data: values } = useEventDataValuesQuery(websiteId, eventName, propertyName);
  const chartData =
    propertyName && values
      ? {
@ -34,23 +38,23 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
  return (
    <LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
      <div className={styles.container}>
-        <GridTable data={data} cardMode={false} className={styles.table}>
-          <GridColumn name="eventName" label={formatMessage(labels.name)}>
+        <DataTable data={data} cardMode={false} className={styles.table}>
+          <DataColumn name="eventName" label={formatMessage(labels.name)}>
            {row => (
              <div className={styles.link} onClick={() => handleRowClick(row)}>
                {row.eventName}
              </div>
            )}
-          </GridColumn>
-          <GridColumn name="propertyName" label={formatMessage(labels.property)}>
+          </DataColumn>
+          <DataColumn name="propertyName" label={formatMessage(labels.property)}>
            {row => (
              <div className={styles.link} onClick={() => handleRowClick(row)}>
                {row.propertyName}
              </div>
            )}
-          </GridColumn>
-          <GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
-        </GridTable>
+          </DataColumn>
+          <DataColumn name="total" label={formatMessage(labels.count)} alignment="end" />
+        </DataTable>
        {propertyName && (
          <div className={styles.chart}>
            <div className={styles.title}>{propertyName}</div>
--- a/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
@ -1,4 +1,4 @@
-import { useWebsiteEvents } from '@/components/hooks';
+import { useWebsiteEventsQuery } from '@/components/hooks';
 import { EventsTable } from './EventsTable';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';
@ -10,7 +10,7 @@ export function EventsDataTable({
  teamId?: string;
  children?: ReactNode;
 }) {
-  const queryResult = useWebsiteEvents(websiteId);
+  const queryResult = useWebsiteEventsQuery(websiteId);

  return (
    <DataGrid queryResult={queryResult} allowSearch={true} autoFocus={false}>
--- a/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { useWebsiteSessionStats } from '@/components/hooks/queries/useWebsiteSessionStats';
+import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
@ -8,7 +8,7 @@ import { Flexbox } from '@umami/react-zen';

 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
  const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);

  return (
    <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
--- a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
@ -6,7 +6,7 @@ import { EventsChart } from '@/components/metrics/EventsChart';
 import { GridRow } from '@/components/layout/Grid';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { useMessages } from '@/components/hooks';
-import { Item, Tabs } from '@umami/react-zen';
+import { TabList, Tab, Tabs } from '@umami/react-zen';
 import { useState } from 'react';
 import { EventProperties } from './EventProperties';

@ -30,11 +30,13 @@ export function EventsPage({ websiteId }) {
      <div>
        <Tabs
          selectedKey={tab}
-          onSelect={(value: any) => setTab(value)}
+          onSelectionChange={(value: any) => setTab(value)}
          style={{ marginBottom: 30 }}
        >
-          <Item key="activity">{formatMessage(labels.activity)}</Item>
-          <Item key="properties">{formatMessage(labels.properties)}</Item>
+          <TabList>
+            <Tab key="activity">{formatMessage(labels.activity)}</Tab>
+            <Tab key="properties">{formatMessage(labels.properties)}</Tab>
+          </TabList>
        </Tabs>
        {tab === 'activity' && <EventsDataTable websiteId={websiteId} />}
        {tab === 'properties' && <EventProperties websiteId={websiteId} />}
--- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
@ -1,5 +1,5 @@
-import { GridTable, GridColumn, Icon } from '@umami/react-zen';
-import { useMessages, useTeamUrl, useTimezone } from '@/components/hooks';
+import { DataTable, DataColumn, Icon } from '@umami/react-zen';
+import { useMessages, useNavigation, useTimezone } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
@ -8,23 +8,23 @@ import { Icons } from '@/components/icons';
 export function EventsTable({ data = [] }) {
  const { formatTimezoneDate } = useTimezone();
  const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();

  if (data.length === 0) {
    return <Empty />;
  }

  return (
-    <GridTable data={data}>
-      <GridColumn name="session" label={formatMessage(labels.session)} width={'100px'}>
-        {row => (
+    <DataTable data={data}>
+      <DataColumn id="session" label={formatMessage(labels.session)}>
+        {(row: any) => (
          <Link href={renderTeamUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
            <Avatar seed={row.sessionId} size={64} />
          </Link>
        )}
-      </GridColumn>
-      <GridColumn name="event" label={formatMessage(labels.event)}>
-        {row => {
+      </DataColumn>
+      <DataColumn id="event" label={formatMessage(labels.event)}>
+        {(row: any) => {
          return (
            <>
              <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
@ -33,10 +33,10 @@ export function EventsTable({ data = [] }) {
            </>
          );
        }}
-      </GridColumn>
-      <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
-        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
-      </GridColumn>
-    </GridTable>
+      </DataColumn>
+      <DataColumn id="created" label={formatMessage(labels.created)}>
+        {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
+      </DataColumn>
+    </DataTable>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
@ -1,5 +1,4 @@
 import { Key, useContext, useState } from 'react';
-import { ButtonGroup, Button, Flexbox } from '@umami/react-zen';
 import thenby from 'thenby';
 import { percentFilter } from '@/lib/filters';
 import { ListTable } from '@/components/metrics/ListTable';
@ -7,6 +6,7 @@ import { FILTER_PAGES, FILTER_REFERRERS } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
 import { RealtimeData } from '@/lib/types';
 import { WebsiteContext } from '../WebsiteProvider';
+import { FilterButtons } from '@/components/common/FilterButtons';

 export function RealtimeUrls({ data }: { data: RealtimeData }) {
  const website = useContext(WebsiteContext);
@ -17,10 +17,12 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {

  const buttons = [
    {
+      id: 1,
      label: formatMessage(labels.referrers),
      key: FILTER_REFERRERS,
    },
    {
+      id: 2,
      label: formatMessage(labels.pages),
      key: FILTER_PAGES,
    },
@ -61,11 +63,7 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {

  return (
    <>
-      <Flexbox justifyContent="center">
-        <ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
-          {({ key, label }) => <Button key={key}>{label}</Button>}
-        </ButtonGroup>
-      </Flexbox>
+      <FilterButtons items={buttons} onSelect={setFilter} />
      {filter === FILTER_REFERRERS && (
        <ListTable
          title={formatMessage(labels.referrers)}
--- a/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
@ -4,7 +4,7 @@ import { Grid, GridRow } from '@/components/layout/Grid';
 import { Page } from '@/components/layout/Page';
 import { RealtimeChart } from '@/components/metrics/RealtimeChart';
 import { WorldMap } from '@/components/metrics/WorldMap';
-import { useRealtime } from '@/components/hooks';
+import { useRealtimeQuery } from '@/components/hooks';
 import { RealtimeLog } from './RealtimeLog';
 import { RealtimeHeader } from './RealtimeHeader';
 import { RealtimeUrls } from './RealtimeUrls';
@ -13,7 +13,7 @@ import { WebsiteHeader } from '../WebsiteHeader';
 import { percentFilter } from '@/lib/filters';

 export function WebsiteRealtimePage({ websiteId }) {
-  const { data, isLoading, error } = useRealtime(websiteId);
+  const { data, isLoading, error } = useRealtimeQuery(websiteId);

  if (isLoading || error) {
    return <Page isLoading={isLoading} error={error} />;
--- a/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
@ -1,13 +1,13 @@
 'use client';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from '@umami/react-zen';
-import { useMessages, useTeamUrl } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { WebsiteHeader } from '../WebsiteHeader';
 import { ReportsDataTable } from '@/app/(main)/reports/ReportsDataTable';

 export function WebsiteReportsPage({ websiteId }) {
  const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl } = useNavigation();

  return (
    <>
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
@ -1,5 +1,9 @@
-import { GridColumn, GridTable } from '@umami/react-zen';
-import { useSessionDataProperties, useSessionDataValues, useMessages } from '@/components/hooks';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import {
+  useSessionDataPropertiesQuery,
+  useSessionDataValuesQuery,
+  useMessages,
+} from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PieChart } from '@/components/charts/PieChart';
 import { useState } from 'react';
@ -9,8 +13,8 @@ import styles from './SessionProperties.module.css';
 export function SessionProperties({ websiteId }: { websiteId: string }) {
  const [propertyName, setPropertyName] = useState('');
  const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useSessionDataProperties(websiteId);
-  const { data: values } = useSessionDataValues(websiteId, propertyName);
+  const { data, isLoading, isFetched, error } = useSessionDataPropertiesQuery(websiteId);
+  const { data: values } = useSessionDataValuesQuery(websiteId, propertyName);
  const chartData =
    propertyName && values
      ? {
@ -28,16 +32,16 @@ export function SessionProperties({ websiteId }: { websiteId: string }) {
  return (
    <LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
      <div className={styles.container}>
-        <GridTable data={data} cardMode={false} className={styles.table}>
-          <GridColumn name="propertyName" label={formatMessage(labels.property)}>
-            {row => (
+        <DataTable data={data} className={styles.table}>
+          <DataColumn id="propertyName" label={formatMessage(labels.property)}>
+            {(row: any) => (
              <div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
                {row.propertyName}
              </div>
            )}
-          </GridColumn>
-          <GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
-        </GridTable>
+          </DataColumn>
+          <DataColumn id="total" label={formatMessage(labels.count)} align="end" />
+        </DataTable>
        {propertyName && (
          <div className={styles.chart}>
            <div className={styles.title}>{propertyName}</div>
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
@ -1,4 +1,4 @@
-import { useWebsiteSessions } from '@/components/hooks';
+import { useWebsiteSessionsQuery } from '@/components/hooks';
 import { SessionsTable } from './SessionsTable';
 import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';
@ -11,7 +11,7 @@ export function SessionsDataTable({
  teamId?: string;
  children?: ReactNode;
 }) {
-  const queryResult = useWebsiteSessions(websiteId);
+  const queryResult = useWebsiteSessionsQuery(websiteId);

  return (
    <DataGrid queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { useWebsiteSessionStats } from '@/components/hooks/queries/useWebsiteSessionStats';
+import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
@ -8,7 +8,7 @@ import { Flexbox } from '@umami/react-zen';

 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
  const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);

  return (
    <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
@ -5,7 +5,7 @@ import { SessionsMetricsBar } from './SessionsMetricsBar';
 import { SessionProperties } from './SessionProperties';
 import { WorldMap } from '@/components/metrics/WorldMap';
 import { GridRow } from '@/components/layout/Grid';
-import { Item, Tabs } from '@umami/react-zen';
+import { TabList, Tab, Tabs } from '@umami/react-zen';
 import { useState } from 'react';
 import { useMessages } from '@/components/hooks';
 import { SessionsWeekly } from './SessionsWeekly';
@ -22,9 +22,15 @@ export function SessionsPage({ websiteId }) {
        <WorldMap websiteId={websiteId} />
        <SessionsWeekly websiteId={websiteId} />
      </GridRow>
-      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
-        <Item key="activity">{formatMessage(labels.activity)}</Item>
-        <Item key="properties">{formatMessage(labels.properties)}</Item>
+      <Tabs
+        selectedKey={tab}
+        onSelectionChange={(value: any) => setTab(value)}
+        style={{ marginBottom: 30 }}
+      >
+        <TabList>
+          <Tab key="activity">{formatMessage(labels.activity)}</Tab>
+          <Tab key="properties">{formatMessage(labels.properties)}</Tab>
+        </TabList>
      </Tabs>
      {tab === 'activity' && <SessionsDataTable websiteId={websiteId} />}
      {tab === 'properties' && <SessionProperties websiteId={websiteId} />}
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { GridColumn, GridTable } from '@umami/react-zen';
+import { DataColumn, DataTable } from '@umami/react-zen';
 import { useFormat, useMessages, useTimezone } from '@/components/hooks';
 import { Avatar } from '@/components/common/Avatar';
 import styles from './SessionsTable.module.css';
@ -11,48 +11,48 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
  const { formatValue } = useFormat();

  return (
-    <GridTable data={data}>
-      <GridColumn name="id" label={formatMessage(labels.session)} width="100px">
-        {row => (
+    <DataTable data={data}>
+      <DataColumn id="id" label={formatMessage(labels.session)}>
+        {(row: any) => (
          <Link href={`sessions/${row.id}`} className={styles.link}>
            <Avatar key={row.id} seed={row.id} size={64} />
          </Link>
        )}
-      </GridColumn>
-      <GridColumn name="visits" label={formatMessage(labels.visits)} width="100px" />
-      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" />
-      <GridColumn name="country" label={formatMessage(labels.country)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="visits" label={formatMessage(labels.visits)} />
+      <DataColumn id="views" label={formatMessage(labels.views)} />
+      <DataColumn id="country" label={formatMessage(labels.country)}>
+        {(row: any) => (
          <TypeIcon type="country" value={row.country}>
            {formatValue(row.country, 'country')}
          </TypeIcon>
        )}
-      </GridColumn>
-      <GridColumn name="city" label={formatMessage(labels.city)} />
-      <GridColumn name="browser" label={formatMessage(labels.browser)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="city" label={formatMessage(labels.city)} />
+      <DataColumn id="browser" label={formatMessage(labels.browser)}>
+        {(row: any) => (
          <TypeIcon type="browser" value={row.browser}>
            {formatValue(row.browser, 'browser')}
          </TypeIcon>
        )}
-      </GridColumn>
-      <GridColumn name="os" label={formatMessage(labels.os)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="os" label={formatMessage(labels.os)}>
+        {(row: any) => (
          <TypeIcon type="os" value={row.os}>
            {formatValue(row.os, 'os')}
          </TypeIcon>
        )}
-      </GridColumn>
-      <GridColumn name="device" label={formatMessage(labels.device)}>
-        {row => (
+      </DataColumn>
+      <DataColumn id="device" label={formatMessage(labels.device)}>
+        {(row: any) => (
          <TypeIcon type="device" value={row.device}>
            {formatValue(row.device, 'device')}
          </TypeIcon>
        )}
-      </GridColumn>
-      <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
-        {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
-      </GridColumn>
-    </GridTable>
+      </DataColumn>
+      <DataColumn id="lastAt" label={formatMessage(labels.lastSeen)}>
+        {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
+      </DataColumn>
+    </DataTable>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@ -1,13 +1,13 @@
 import { format, startOfDay, addHours } from 'date-fns';
-import { useLocale, useMessages, useWebsiteSessionsWeekly } from '@/components/hooks';
+import { useLocale, useMessages, useWebsiteSessionsWeeklyQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { getDayOfWeekAsDate } from '@/lib/date';
 import styles from './SessionsWeekly.module.css';
 import classNames from 'classnames';
-import { TooltipPopup } from '@umami/react-zen';
+import { Tooltip, TooltipTrigger } from '@umami/react-zen';

 export function SessionsWeekly({ websiteId }: { websiteId: string }) {
-  const { data, ...props } = useWebsiteSessionsWeekly(websiteId);
+  const { data, ...props } = useWebsiteSessionsWeeklyQuery(websiteId);
  const { dateLocale } = useLocale();
  const { labels, formatMessage } = useMessages();
  const { weekStartsOn } = dateLocale.options;
@ -67,15 +67,13 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
                  return (
                    <div key={j} className={classNames(styles.cell)}>
                      {hour > 0 && (
-                        <TooltipPopup
-                          label={`${formatMessage(labels.visitors)}: ${hour}`}
-                          position="right"
-                        >
+                        <TooltipTrigger>
                          <div
                            className={styles.block}
                            style={{ opacity: pct, transform: `scale(${pct})` }}
                          />
-                        </TooltipPopup>
+                          <Tooltip>{`${formatMessage(labels.visitors)}: ${hour}`}</Tooltip>
+                        </TooltipTrigger>
                      )}
                    </div>
                  );
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
@ -1,7 +1,7 @@
 import { isSameDay } from 'date-fns';
 import { Loading, Icon, StatusLight } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
-import { useSessionActivity, useTimezone } from '@/components/hooks';
+import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
 import styles from './SessionActivity.module.css';
 import { Fragment } from 'react';

@ -17,7 +17,7 @@ export function SessionActivity({
  endDate: Date;
 }) {
  const { formatTimezoneDate } = useTimezone();
-  const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate);
+  const { data, isLoading } = useSessionActivityQuery(websiteId, sessionId, startDate, endDate);

  if (isLoading) {
    return <Loading position="page" />;
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
@ -1,5 +1,5 @@
 import { TextOverflow } from '@umami/react-zen';
-import { useMessages, useSessionData } from '@/components/hooks';
+import { useMessages, useSessionDataQuery } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { DATA_TYPES } from '@/lib/constants';
 import styles from './SessionData.module.css';
@ -7,7 +7,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';

 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
  const { formatMessage, labels } = useMessages();
-  const { data, ...query } = useSessionData(websiteId, sessionId);
+  const { data, ...query } = useSessionDataQuery(websiteId, sessionId);

  return (
    <>
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
@ -1,7 +1,7 @@
 'use client';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useWebsiteSession } from '@/components/hooks';
+import { useWebsiteSessionQuery } from '@/components/hooks';
 import { WebsiteHeader } from '../../WebsiteHeader';
 import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
@ -16,7 +16,7 @@ export function SessionDetailsPage({
  websiteId: string;
  sessionId: string;
 }) {
-  const { data, ...query } = useWebsiteSession(websiteId, sessionId);
+  const { data, ...query } = useWebsiteSessionQuery(websiteId, sessionId);

  return (
    <LoadingPanel {...query} loadingIcon="spinner" data={data}>