Refactor filter handling for queries.

src/app/(main)/console/[websiteId]/TestConsolePage.tsx

@@ -2,6 +2,7 @@
 import { Button, Grid, Column, Heading } from '@umami/react-zen';
 import Link from 'next/link';
 import Script from 'next/script';
+import { Panel } from '@/components/common/Panel';
 import { PageBody } from '@/components/common/PageBody';
 import { EventsChart } from '@/components/metrics/EventsChart';
 import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
@@ -115,87 +116,91 @@ export function TestConsolePage({ websiteId }: { websiteId: string }) {
           src={`${process.env.basePath || ''}/script.js`}
           data-cache="true"
         />
-        <Grid columns="1fr 1fr 1fr" gap>
-          <Column gap>
-            <Heading>Page links</Heading>
-            <div>
-              <Link href={`/console/${websiteId}?page=1`}>page one</Link>
-            </div>
-            <div>
-              <Link href={`/console/${websiteId}?page=2 `}>page two</Link>
-            </div>
-            <div>
-              <a href="https://www.google.com" data-umami-event="external-link-direct">
-                external link (direct)
-              </a>
-            </div>
-            <div>
-              <a
-                href="https://www.google.com"
-                data-umami-event="external-link-tab"
-                target="_blank"
-                rel="noreferrer"
-              >
-                external link (tab)
-              </a>
-            </div>
-          </Column>
-          <Column gap>
-            <Heading>Click events</Heading>
-            <Button id="send-event-button" data-umami-event="button-click" variant="primary">
-              Send event
-            </Button>
-            <Button
-              id="send-event-data-button"
-              data-umami-event="button-click"
-              data-umami-event-name="bob"
-              data-umami-event-id="123"
-              variant="primary"
-            >
-              Send event with data
-            </Button>
-            <Button
-              id="generate-revenue-button"
-              data-umami-event="checkout-cart"
-              data-umami-event-revenue={(Math.random() * 10000).toFixed(2).toString()}
-              data-umami-event-currency="USD"
-              variant="primary"
-            >
-              Generate revenue data
-            </Button>
-            <Button
-              id="button-with-div-button"
-              data-umami-event="button-click"
-              data-umami-event-name={'bob'}
-              data-umami-event-id="123"
-              variant="primary"
-            >
-              <div>Button with div</div>
-            </Button>
-            <div data-umami-event="div-click">DIV with attribute</div>
-            <div data-umami-event="div-click-one">
-              <div data-umami-event="div-click-two">
-                <div data-umami-event="div-click-three">Nested DIV</div>
+        <Panel>
+          <Grid columns="1fr 1fr 1fr" gap>
+            <Column gap>
+              <Heading>Page links</Heading>
+              <div>
+                <Link href={`/console/${websiteId}?page=1`}>page one</Link>
               </div>
-            </div>
-          </Column>
-          <Column gap>
-            <Heading>Javascript events</Heading>
-            <Button id="manual-button" variant="primary" onClick={handleRunScript}>
-              Run script
-            </Button>
-            <Button id="manual-button" variant="primary" onClick={handleRunIdentify}>
-              Run identify
-            </Button>
-            <Button id="manual-button" variant="primary" onClick={handleRunRevenue}>
-              Revenue script
-            </Button>
-          </Column>
-        </Grid>
+              <div>
+                <Link href={`/console/${websiteId}?page=2 `}>page two</Link>
+              </div>
+              <div>
+                <a href="https://www.google.com" data-umami-event="external-link-direct">
+                  external link (direct)
+                </a>
+              </div>
+              <div>
+                <a
+                  href="https://www.google.com"
+                  data-umami-event="external-link-tab"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  external link (tab)
+                </a>
+              </div>
+            </Column>
+            <Column gap>
+              <Heading>Click events</Heading>
+              <Button id="send-event-button" data-umami-event="button-click" variant="primary">
+                Send event
+              </Button>
+              <Button
+                id="send-event-data-button"
+                data-umami-event="button-click"
+                data-umami-event-name="bob"
+                data-umami-event-id="123"
+                variant="primary"
+              >
+                Send event with data
+              </Button>
+              <Button
+                id="generate-revenue-button"
+                data-umami-event="checkout-cart"
+                data-umami-event-revenue={(Math.random() * 10000).toFixed(2).toString()}
+                data-umami-event-currency="USD"
+                variant="primary"
+              >
+                Generate revenue data
+              </Button>
+              <Button
+                id="button-with-div-button"
+                data-umami-event="button-click"
+                data-umami-event-name={'bob'}
+                data-umami-event-id="123"
+                variant="primary"
+              >
+                <div>Button with div</div>
+              </Button>
+              <div data-umami-event="div-click">DIV with attribute</div>
+              <div data-umami-event="div-click-one">
+                <div data-umami-event="div-click-two">
+                  <div data-umami-event="div-click-three">Nested DIV</div>
+                </div>
+              </div>
+            </Column>
+            <Column gap>
+              <Heading>Javascript events</Heading>
+              <Button id="manual-button" variant="primary" onClick={handleRunScript}>
+                Run script
+              </Button>
+              <Button id="manual-button" variant="primary" onClick={handleRunIdentify}>
+                Run identify
+              </Button>
+              <Button id="manual-button" variant="primary" onClick={handleRunRevenue}>
+                Revenue script
+              </Button>
+            </Column>
+          </Grid>
+        </Panel>
         <Heading>Pageviews</Heading>
         <WebsiteChart websiteId={websiteId} />
         <Heading>Events</Heading>
-        <EventsChart websiteId={websiteId} />
+        <Panel>
+          <EventsChart websiteId={websiteId} />
+        </Panel>
       </Column>
     </PageBody>
   );

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

@@ -24,7 +24,7 @@ export function PasswordEditForm({ onSave, onClose }) {
     });
   };
 
-  const samePassword = (value: string, values: { [key: string]: any }) => {
+  const samePassword = (value: string, values: Record<string, any>) => {
     if (value !== values.newPassword) {
       return formatMessage(messages.noMatchPassword);
     }

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

@@ -1,9 +1,9 @@
 import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable';
 import { DataGrid } from '@/components/common/DataGrid';
-import { useWebsites } from '@/components/hooks';
+import { useWebsitesQuery } from '@/components/hooks';
 
 export function UserWebsites({ userId }) {
-  const queryResult = useWebsites({ userId });
+  const queryResult = useWebsitesQuery({ userId });
 
   return (
     <DataGrid queryResult={queryResult}>

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable';
 import { DataGrid } from '@/components/common/DataGrid';
-import { useWebsites } from '@/components/hooks';
+import { useWebsitesQuery } from '@/components/hooks';
 
 export function WebsitesDataTable({
   teamId,
@@ -16,10 +16,10 @@ export function WebsitesDataTable({
   showActions?: boolean;
   children?: ReactNode;
 }) {
-  const queryResult = useWebsites({ teamId });
+  const queryResult = useWebsitesQuery({ teamId });
 
   return (
-    <DataGrid queryResult={queryResult} renderEmpty={() => children}>
+    <DataGrid queryResult={queryResult} renderEmpty={() => children} allowSearch allowPaging>
       {({ data }) => (
         <WebsitesTable
           teamId={teamId}

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

@@ -31,7 +31,7 @@ export function WebsitesTable({
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={renderUrl(`/websites/${row.id}`)}>{row.name}</Link>}
+        {(row: any) => <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>}
       </DataColumn>
       <DataColumn id="domain" label={formatMessage(labels.domain)} />
       {showActions && (

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

@@ -3,7 +3,6 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PageviewsChart } from '@/components/metrics/PageviewsChart';
 import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
 import { useDateRange } from '@/components/hooks';
-import { Panel } from '@/components/common/Panel';
 
 export function WebsiteChart({
   websiteId,
@@ -48,16 +47,14 @@ export function WebsiteChart({
   }, [data, startDate, endDate, unit]);
 
   return (
-    <Panel height="520px">
-      <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
-        <PageviewsChart
-          key={value}
-          data={chartData}
-          minDate={startDate}
-          maxDate={endDate}
-          unit={unit}
-        />
-      </LoadingPanel>
-    </Panel>
+    <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
+      <PageviewsChart
+        key={value}
+        data={chartData}
+        minDate={startDate}
+        maxDate={endDate}
+        unit={unit}
+      />
+    </LoadingPanel>
   );
 }

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

@@ -1,6 +1,7 @@
 'use client';
 import { Column } from '@umami/react-zen';
 import { useNavigation } from '@/components/hooks';
+import { Panel } from '@/components/common/Panel';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteExpandedView } from './WebsiteExpandedView';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
@@ -16,8 +17,10 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} allowCompare={true} />
-      <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
-      <WebsiteChart websiteId={websiteId} compareMode={compare} />
+      <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
+      <Panel>
+        <WebsiteChart websiteId={websiteId} compareMode={compare} />
+      </Panel>
       {!view && !compare && <WebsiteTableView websiteId={websiteId} />}
       {view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
       {compare && <WebsiteCompareTables websiteId={websiteId} />}

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

@@ -11,13 +11,12 @@ import {
 import { Fragment } from 'react';
 import { More, Share, Edit } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { InputItem } from '@/lib/types';
 
 export function WebsiteMenu({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { router, updateParams, renderUrl } = useNavigation();
 
-  const menuItems: InputItem[] = [
+  const menuItems = [
     { id: 'share', label: formatMessage(labels.share), icon: <Share /> },
     { id: 'edit', label: formatMessage(labels.edit), icon: <Edit />, seperator: true },
   ];

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

@@ -3,26 +3,18 @@ import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatShortTime, formatLongNumber } from '@/lib/format';
 import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
-import { useWebsites } from '@/store/websites';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function WebsiteMetricsBar({
   websiteId,
-  showChange = false,
-  compareMode = false,
 }: {
   websiteId: string;
   showChange?: boolean;
   compareMode?: boolean;
-  showFilter?: boolean;
 }) {
   const { dateRange } = useDateRange(websiteId);
   const { formatMessage, labels } = useMessages();
-  const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
-  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(
-    websiteId,
-    compareMode && dateCompare,
-  );
+  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(websiteId);
   const isAllTime = dateRange.value === 'all';
 
   const { pageviews, visitors, visits, bounces, totaltime, previous } = data || {};
@@ -87,8 +79,7 @@ export function WebsiteMetricsBar({
               change={change}
               formatValue={formatValue}
               reverseColors={reverseColors}
-              showChange={!isAllTime && (compareMode || showChange)}
-              showPrevious={!isAllTime && compareMode}
+              showChange={!isAllTime}
             />
           );
         })}

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

@@ -9,7 +9,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 
 export function GoalsPage({ websiteId }: { websiteId: string }) {
-  const { result, query } = useReportsQuery({ websiteId, type: 'goal' });
+  const { data, isLoading, error } = useReportsQuery({ websiteId, type: 'goal' });
   const {
     dateRange: { startDate, endDate },
   } = useDateRange(websiteId);
@@ -20,14 +20,16 @@ export function GoalsPage({ websiteId }: { websiteId: string }) {
       <SectionHeader>
         <GoalAddButton websiteId={websiteId} />
       </SectionHeader>
-      <LoadingPanel data={result?.data} isLoading={query?.isLoading} error={query?.error}>
-        <Grid columns="1fr 1fr" gap>
-          {result?.data?.map((report: any) => (
-            <Panel key={report.id}>
-              <Goal {...report} startDate={startDate} endDate={endDate} />
-            </Panel>
-          ))}
-        </Grid>
+      <LoadingPanel data={data} isLoading={isLoading} error={error}>
+        {data && (
+          <Grid columns="1fr 1fr" gap>
+            {data['data'].map((report: any) => (
+              <Panel key={report.id}>
+                <Goal {...report} startDate={startDate} endDate={endDate} />
+              </Panel>
+            ))}
+          </Grid>
+        )}
       </LoadingPanel>
     </Column>
   );

src/app/(main)/websites/[websiteId]/reports/utm/UTM.tsx

@@ -73,7 +73,7 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
   );
 }
 
-function toArray(data: { [key: string]: number } = {}) {
+function toArray(data: Record<string, number> = {}) {
   return Object.keys(data)
     .map(key => {
       return { name: key, value: data[key] };

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

@@ -14,7 +14,7 @@ export function SessionsDataTable({
   const queryResult = useWebsiteSessionsQuery(websiteId);
 
   return (
-    <DataGrid queryResult={queryResult} allowSearch={true} renderEmpty={() => children}>
+    <DataGrid queryResult={queryResult} renderEmpty={() => children} allowPaging>
       {({ data }) => <SessionsTable data={data} showDomain={!websiteId} />}
     </DataGrid>
   );

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

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import { Icon, TextField, Column, Row, Label, Text } from '@umami/react-zen';
-import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from '@/components/hooks';
+import { useFormat, useLocale, useMessages, useRegionNames } from '@/components/hooks';
 import { TypeIcon } from '@/components/common/TypeIcon';
 import { Location, KeyRound, Calendar } from '@/components/icons';
+import { DateDistance } from '@/components/common/DateDistance';
 
 export function SessionInfo({ data }) {
   const { locale } = useLocale();
-  const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
   const { getRegionName } = useRegionNames(locale);
@@ -22,11 +22,11 @@ export function SessionInfo({ data }) {
       </Info>
 
       <Info label={formatMessage(labels.lastSeen)} icon={<Calendar />}>
-        {formatTimezoneDate(data?.lastAt, 'PPPPpp')}
+        <DateDistance date={new Date(data.lastAt)} />
       </Info>
 
       <Info label={formatMessage(labels.firstSeen)} icon={<Calendar />}>
-        {formatTimezoneDate(data?.firstAt, 'PPPPpp')}
+        <DateDistance date={new Date(data.firstAt)} />
       </Info>
 
       <Info