New overview layout.

package.json

@@ -74,15 +74,15 @@
     "@date-fns/utc": "^1.2.0",
     "@dicebear/collection": "^9.2.3",
     "@dicebear/core": "^9.2.3",
-    "@fontsource/inter": "^4.5.15",
+    "@fontsource/inter": "^5.2.6",
     "@hello-pangea/dnd": "^17.0.0",
     "@prisma/adapter-pg": "^6.15.0",
     "@prisma/client": "^6.15.0",
     "@prisma/extension-read-replicas": "^0.4.1",
-    "@react-spring/web": "^9.7.3",
+    "@react-spring/web": "^10.0.1",
     "@svgr/cli": "^8.1.0",
     "@tanstack/react-query": "^5.85.5",
-    "@umami/react-zen": "^0.169.0",
+    "@umami/react-zen": "^0.171.0",
     "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^3.0.2",
     "chalk": "^5.6.0",
@@ -97,10 +97,10 @@
     "debug": "^4.3.4",
     "del": "^6.0.0",
     "detect-browser": "^5.2.0",
-    "dotenv": "^10.0.0",
+    "dotenv": "^17.2.1",
     "eslint-plugin-promise": "^6.1.1",
-    "fs-extra": "^10.0.1",
-    "immer": "^9.0.12",
+    "fs-extra": "^11.3.1",
+    "immer": "^10.1.1",
     "ipaddr.js": "^2.0.1",
     "is-ci": "^3.0.1",
     "is-docker": "^3.0.0",
@@ -109,8 +109,8 @@
     "jsonwebtoken": "^9.0.2",
     "jszip": "^3.10.1",
     "kafkajs": "^2.1.0",
-    "lucide-react": "^0.540.0",
-    "maxmind": "^4.3.28",
+    "lucide-react": "^0.542.0",
+    "maxmind": "^5.0.0",
     "md5": "^2.3.0",
     "next": "15.5.2",
     "node-fetch": "^3.2.8",
@@ -131,7 +131,7 @@
     "serialize-error": "^12.0.0",
     "thenby": "^1.3.4",
     "uuid": "^11.1.0",
-    "zod": "^3.25.76",
+    "zod": "^4.1.5",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
@@ -143,15 +143,15 @@
     "@rollup/plugin-node-resolve": "^15.2.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.4",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.18.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.3.0",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.8",
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "cypress": "^13.6.6",
     "esbuild": "^0.25.8",
     "eslint": "^8.33.0",
@@ -164,9 +164,9 @@
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.5.3",
     "extract-react-intl-messages": "^4.1.1",
-    "husky": "^8.0.3",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
-    "lint-staged": "^14.0.1",
+    "lint-staged": "^16.1.5",
     "postcss": "^8.5.6",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^15.1.0",
@@ -187,6 +187,6 @@
     "tar": "^6.1.2",
     "ts-jest": "^29.4.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.5.3"
+    "typescript": "^5.9.2"
   }
 }

src/app/(main)/settings/preferences/LanguageSetting.tsx

@@ -33,7 +33,7 @@ export function LanguageSetting() {
         allowSearch
         onSearch={setSearch}
         onOpenChange={handleOpen}
-        listProps={{ style: { maxHeight: '300px' } }}
+        listProps={{ style: { maxHeight: 300 } }}
       >
         {items.map(item => (
           <ListItem key={item} id={item}>

src/app/(main)/settings/preferences/TimezoneSetting.tsx

@@ -29,7 +29,7 @@ export function TimezoneSetting() {
         allowSearch={true}
         onSearch={setSearch}
         onOpenChange={handleOpen}
-        listProps={{ style: { maxHeight: '300px' } }}
+        listProps={{ style: { maxHeight: 300 } }}
       >
         {items.map((item: any) => (
           <ListItem key={item} id={item}>

src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.tsx

@@ -7,7 +7,7 @@ import { useDateRange, useMessages } from '@/components/hooks';
 
 export function AttributionPage({ websiteId }: { websiteId: string }) {
   const [model, setModel] = useState('first-click');
-  const [type, setType] = useState('page');
+  const [type, setType] = useState('path');
   const [step, setStep] = useState('/');
   const { formatMessage, labels } = useMessages();
   const {
@@ -36,7 +36,7 @@ export function AttributionPage({ websiteId }: { websiteId: string }) {
             defaultValue={type}
             onChange={setType}
           >
-            <ListItem id="page">{formatMessage(labels.page)}</ListItem>
+            <ListItem id="path">{formatMessage(labels.page)}</ListItem>
             <ListItem id="event">{formatMessage(labels.event)}</ListItem>
           </Select>
         </Column>

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

@@ -56,7 +56,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
             { type, value, visitors, previous, dropped, dropoff, remaining }: FunnelResult,
             index: number,
           ) => {
-            const isPage = type === 'page';
+            const isPage = type === 'path';
             return (
               <Grid key={index} columns="auto 1fr" gap="6">
                 <Column alignItems="center" position="relative">
@@ -92,7 +92,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
                   </Row>
                   <Row alignItems="center" justifyContent="space-between" gap>
                     <Row alignItems="center" gap>
-                      <Icon>{type === 'page' ? <File /> : <Lightning />}</Icon>
+                      <Icon>{type === 'path' ? <File /> : <Lightning />}</Icon>
                       <Text>{value}</Text>
                     </Row>
                     <Row alignItems="center" gap>

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

@@ -55,7 +55,7 @@ export function FunnelEditForm({
   const defaultValues = {
     name: data?.name || '',
     window: data?.parameters?.window || 60,
-    steps: data?.parameters?.steps || [{ type: 'page', value: '/' }],
+    steps: data?.parameters?.steps || [{ type: 'path', value: '/' }],
   };
 
   return (
@@ -91,7 +91,7 @@ export function FunnelEditForm({
                             onChange={field.onChange}
                           >
                             <Grid columns="1fr 1fr" flexGrow={1} gap>
-                              <Radio id="page" value="page">
+                              <Radio id="path" value="path">
                                 <Icon>
                                   <File />
                                 </Icon>
@@ -130,7 +130,7 @@ export function FunnelEditForm({
               })}
               <Row>
                 <Button
-                  onPress={() => append({ type: 'page', value: '/' })}
+                  onPress={() => append({ type: 'path', value: '/' })}
                   isDisabled={fields.length >= FUNNEL_STEPS_MAX}
                 >
                   <Icon>

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

@@ -30,7 +30,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
     endDate,
     ...parameters,
   });
-  const isPage = parameters?.type === 'page';
+  const isPage = parameters?.type === 'path';
 
   return (
     <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
@@ -68,7 +68,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
           </Row>
           <Row alignItems="center" justifyContent="space-between" gap>
             <Row alignItems="center" gap>
-              <Icon>{parameters.type === 'page' ? <File /> : <Lightning />}</Icon>
+              <Icon>{parameters.type === 'path' ? <File /> : <Lightning />}</Icon>
               <Text>{parameters.value}</Text>
             </Row>
             <Row alignItems="center" gap>

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

@@ -16,9 +16,10 @@ export function GoalAddButton({ websiteId }: { websiteId: string }) {
       </Button>
       <Modal>
         <Dialog
+          aria-label="add goal"
           variant="modal"
           title={formatMessage(labels.goal)}
-          style={{ minHeight: 375, minWidth: 400 }}
+          style={{ minWidth: 800, minHeight: 300 }}
         >
           {({ close }) => <GoalEditForm websiteId={websiteId} onClose={close} />}
         </Dialog>

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

@@ -6,14 +6,13 @@ import {
   FormButtons,
   FormSubmitButton,
   Button,
-  RadioGroup,
-  Radio,
-  Text,
-  Icon,
   Loading,
+  Column,
+  Label,
 } from '@umami/react-zen';
 import { useMessages, useReportQuery, useUpdateQuery } from '@/components/hooks';
-import { File, Lightning } from '@/components/icons';
+import { LookupField } from '@/components/input/LookupField';
+import { ActionSelect } from '@/components/input/ActionSelect';
 
 export function GoalEditForm({
   id,
@@ -27,13 +26,12 @@ export function GoalEditForm({
   onClose?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
-
   const { data } = useReportQuery(id);
   const { mutate, error, isPending, touch } = useUpdateQuery(`/reports${id ? `/${id}` : ''}`);
 
-  const handleSubmit = async ({ name, ...parameters }) => {
+  const handleSubmit = async (formData: Record<string, any>) => {
     mutate(
-      { ...data, id, name, type: 'goal', websiteId, parameters },
+      { ...formData, type: 'goal', websiteId },
       {
         onSuccess: async () => {
           if (id) touch(`report:${id}`);
@@ -50,15 +48,15 @@ export function GoalEditForm({
   }
 
   const defaultValues = {
-    name: data?.name || '',
-    type: data?.parameters?.type || 'page',
-    value: data?.parameters?.value || '',
+    name: '',
+    parameters: { type: 'path', value: '' },
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={defaultValues}>
+    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={data || defaultValues}>
       {({ watch }) => {
-        const watchType = watch('type');
+        const type = watch('parameters.type');
+
         return (
           <>
             <FormField
@@ -68,35 +66,30 @@ export function GoalEditForm({
             >
               <TextField autoFocus />
             </FormField>
+            <Column>
+              <Label>{formatMessage(labels.action)}</Label>
+              <Grid columns="260px 1fr" gap>
+                <Column>
                   <FormField
-              name="type"
-              label={formatMessage(labels.type)}
+                    name="parameters.type"
                     rules={{ required: formatMessage(labels.required) }}
                   >
-              <RadioGroup orientation="horizontal" variant="box">
-                <Grid columns="1fr 1fr" flexGrow={1} gap>
-                  <Radio value="page">
-                    <Icon>
-                      <File />
-                    </Icon>
-                    <Text>{formatMessage(labels.page)}</Text>
-                  </Radio>
-                  <Radio value="event">
-                    <Icon>
-                      <Lightning />
-                    </Icon>
-                    <Text>{formatMessage(labels.event)}</Text>
-                  </Radio>
+                    <ActionSelect />
+                  </FormField>
+                </Column>
+                <Column>
+                  <FormField
+                    name="parameters.value"
+                    rules={{ required: formatMessage(labels.required) }}
+                  >
+                    {({ field }) => {
+                      return <LookupField websiteId={websiteId} type={type} {...field} />;
+                    }}
+                  </FormField>
+                </Column>
               </Grid>
-              </RadioGroup>
-            </FormField>
-            <FormField
-              name="value"
-              label={formatMessage(watchType === 'event' ? labels.eventName : labels.path)}
-              rules={{ required: formatMessage(labels.required) }}
-            >
-              <TextField />
-            </FormField>
+            </Column>
+
             <FormButtons>
               <Button onPress={onClose} isDisabled={isPending}>
                 {formatMessage(labels.cancel)}

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

@@ -52,12 +52,12 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'referrer',
-          label: formatMessage(labels.referrers),
+          label: formatMessage(labels.referrer),
           path: updateParams({ view: 'referrer' }),
         },
         {
           id: 'channel',
-          label: formatMessage(labels.channels),
+          label: formatMessage(labels.channel),
           path: updateParams({ view: 'channel' }),
         },
         {
@@ -72,17 +72,17 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'country',
-          label: formatMessage(labels.countries),
+          label: formatMessage(labels.country),
           path: updateParams({ view: 'country' }),
         },
         {
           id: 'region',
-          label: formatMessage(labels.regions),
+          label: formatMessage(labels.region),
           path: updateParams({ view: 'region' }),
         },
         {
           id: 'city',
-          label: formatMessage(labels.cities),
+          label: formatMessage(labels.city),
           path: updateParams({ view: 'city' }),
         },
       ],
@@ -92,7 +92,7 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'browser',
-          label: formatMessage(labels.browsers),
+          label: formatMessage(labels.browser),
           path: updateParams({ view: 'browser' }),
         },
         {
@@ -102,17 +102,17 @@ export function WebsiteExpandedView({
         },
         {
           id: 'device',
-          label: formatMessage(labels.devices),
+          label: formatMessage(labels.device),
           path: updateParams({ view: 'device' }),
         },
         {
           id: 'language',
-          label: formatMessage(labels.languages),
+          label: formatMessage(labels.language),
           path: updateParams({ view: 'language' }),
         },
         {
           id: 'screen',
-          label: formatMessage(labels.screens),
+          label: formatMessage(labels.screen),
           path: updateParams({ view: 'screen' }),
         },
       ],
@@ -122,7 +122,7 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'event',
-          label: formatMessage(labels.events),
+          label: formatMessage(labels.event),
           path: updateParams({ view: 'event' }),
         },
         {
@@ -132,7 +132,7 @@ export function WebsiteExpandedView({
         },
         {
           id: 'tag',
-          label: formatMessage(labels.tags),
+          label: formatMessage(labels.tag),
           path: updateParams({ view: 'tag' }),
         },
       ],

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

@@ -1,7 +1,7 @@
 import { Button, Icon, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
 import { ListFilter } from '@/components/icons';
 import { FilterEditForm } from '@/components/input/FilterEditForm';
-import { useMessages, useNavigation, useFilters } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { filtersArrayToObject } from '@/lib/params';
 
 export function WebsiteFilterButton({
@@ -14,17 +14,12 @@ export function WebsiteFilterButton({
   showText?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const {
-    replaceParams,
-    router,
-    query: { segment },
-  } = useNavigation();
-  const { filters } = useFilters();
+  const { replaceParams, router } = useNavigation();
 
-  const handleChange = ({ filters, segment }) => {
+  const handleChange = ({ filters, segment, cohort }: any) => {
     const params = filtersArrayToObject(filters);
 
-    const url = replaceParams({ ...params, segment });
+    const url = replaceParams({ ...params, segment, cohort });
 
     router.push(url);
   };
@@ -40,15 +35,7 @@ export function WebsiteFilterButton({
       <Modal>
         <Dialog title={formatMessage(labels.filters)} style={{ width: 800, minHeight: 600 }}>
           {({ close }) => {
-            return (
-              <FilterEditForm
-                websiteId={websiteId}
-                filters={filters}
-                segmentId={segment}
-                onChange={handleChange}
-                onClose={close}
-              />
-            );
+            return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;
           }}
         </Dialog>
       </Modal>

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

@@ -11,7 +11,7 @@ import { WebsiteControls } from './WebsiteControls';
 export function WebsitePage({ websiteId }: { websiteId: string }) {
   const {
     router,
-    query: { view, compare },
+    query: { view },
     updateParams,
   } = useNavigation();
   const handleClose = (close: () => void) => {
@@ -30,7 +30,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
       <WebsiteControls websiteId={websiteId} />
       <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
       <Panel minHeight="520px">
-        <WebsiteChart websiteId={websiteId} compareMode={compare} />
+        <WebsiteChart websiteId={websiteId} />
       </Panel>
       <WebsitePanels websiteId={websiteId} />
       <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>

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

@@ -15,7 +15,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
     showMore: true,
     metric: formatMessage(labels.visitors),
   };
-  const rowProps = { minHeight: 570 };
+  const rowProps = { minHeight: '570px' };
 
   return (
     <Grid gap="3">
@@ -59,30 +59,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           </Tabs>
         </Panel>
       </GridRow>
-      <GridRow layout="two-one" {...rowProps}>
-        <Panel gridColumn="span 2" noPadding>
-          <WorldMap websiteId={websiteId} />
-        </Panel>
-        <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
-          <Tabs>
-            <TabList>
-              <Tab id="country">{formatMessage(labels.countries)}</Tab>
-              <Tab id="region">{formatMessage(labels.regions)}</Tab>
-              <Tab id="city">{formatMessage(labels.cities)}</Tab>
-            </TabList>
-            <TabPanel id="country">
-              <MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
-            </TabPanel>
-            <TabPanel id="region">
-              <MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
-            </TabPanel>
-            <TabPanel id="city">
-              <MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
-            </TabPanel>
-          </Tabs>
-        </Panel>
-      </GridRow>
+
       <GridRow layout="two" {...rowProps}>
         <Panel>
           <Heading size="2">{formatMessage(labels.environment)}</Heading>
@@ -103,6 +80,33 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
             </TabPanel>
           </Tabs>
         </Panel>
+
+        <Panel>
+          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Tabs>
+            <TabList>
+              <Tab id="country">{formatMessage(labels.countries)}</Tab>
+              <Tab id="region">{formatMessage(labels.regions)}</Tab>
+              <Tab id="city">{formatMessage(labels.cities)}</Tab>
+            </TabList>
+            <TabPanel id="country">
+              <MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
+            </TabPanel>
+            <TabPanel id="region">
+              <MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
+            </TabPanel>
+            <TabPanel id="city">
+              <MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
+            </TabPanel>
+          </Tabs>
+        </Panel>
+      </GridRow>
+
+      <GridRow layout="two-one" {...rowProps}>
+        <Panel gridColumn="span 2" noPadding>
+          <WorldMap websiteId={websiteId} />
+        </Panel>
+
         <Panel>
           <Heading size="2">{formatMessage(labels.traffic)}</Heading>
           <Row border="bottom" marginBottom="4" />

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

@@ -15,10 +15,7 @@ export function CohortAddButton({ websiteId }: { websiteId: string }) {
         <Text>{formatMessage(labels.cohort)}</Text>
       </Button>
       <Modal>
-        <Dialog
-          title={formatMessage(labels.cohort)}
-          style={{ width: 800, minHeight: 300, maxHeight: '90vh' }}
-        >
+        <Dialog title={formatMessage(labels.cohort)} style={{ width: 800, minHeight: 300 }}>
           {({ close }) => {
             return <CohortEditForm websiteId={websiteId} onClose={close} />;
           }}

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

@@ -18,10 +18,7 @@ export function CohortEditButton({
 
   return (
     <ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
-      <Dialog
-        title={formatMessage(labels.cohort)}
-        style={{ width: 800, minHeight: 300, maxHeight: '90vh' }}
-      >
+      <Dialog title={formatMessage(labels.cohort)} style={{ width: 800, minHeight: 300 }}>
         {({ close }) => {
           return (
             <CohortEditForm

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

@@ -8,23 +8,13 @@ import {
   Label,
   Loading,
   Column,
-  ComboBox,
-  Select,
-  ListItem,
   Grid,
-  useDebounce,
 } from '@umami/react-zen';
-import {
-  useMessages,
-  useUpdateQuery,
-  useWebsiteCohortQuery,
-  useWebsiteValuesQuery,
-} from '@/components/hooks';
+import { useMessages, useUpdateQuery, useWebsiteCohortQuery } from '@/components/hooks';
 import { DateFilter } from '@/components/input/DateFilter';
 import { FieldFilters } from '@/components/input/FieldFilters';
-import { SetStateAction, useMemo, useState } from 'react';
-import { endOfDay, subMonths } from 'date-fns';
-import { Empty } from '@/components/common/Empty';
+import { LookupField } from '@/components/input/LookupField';
+import { ActionSelect } from '@/components/input/ActionSelect';
 
 export function CohortEditForm({
   cohortId,
@@ -40,21 +30,8 @@ export function CohortEditForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const [action, setAction] = useState('path');
-  const [search, setSearch] = useState('');
-  const searchValue = useDebounce(search, 300);
   const { data } = useWebsiteCohortQuery(websiteId, cohortId);
   const { formatMessage, labels, messages } = useMessages();
-  const startDate = subMonths(endOfDay(new Date()), 6);
-  const endDate = endOfDay(new Date());
-
-  const { data: searchResults, isLoading } = useWebsiteValuesQuery({
-    websiteId,
-    type: action,
-    search: searchValue,
-    startDate,
-    endDate,
-  });
 
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     `/websites/${websiteId}/segments${cohortId ? `/${cohortId}` : ''}`,
@@ -63,10 +40,6 @@ export function CohortEditForm({
     },
   );
 
-  const items: string[] = useMemo(() => {
-    return searchResults?.map(({ value }) => value) || [];
-  }, [searchResults]);
-
   const handleSubmit = async (formData: any) => {
     mutate(formData, {
       onSuccess: async () => {
@@ -78,22 +51,21 @@ export function CohortEditForm({
     });
   };
 
-  const handleSearch = (value: SetStateAction<string>) => {
-    setSearch(value);
-  };
-
   if (cohortId && !data) {
     return <Loading position="page" />;
   }
 
+  const defaultValues = {
+    parameters: { filters, dateRange: '30day', action: { type: 'path', value: '' } },
+  };
+
   return (
-    <Form
-      error={error}
-      onSubmit={handleSubmit}
-      defaultValues={
-        data || { parameters: { filters, dateRange: '30day', action: { type: 'path' } } }
-      }
-    >
+    <Form error={error} onSubmit={handleSubmit} defaultValues={data || defaultValues}>
+      {({ watch }) => {
+        const type = watch('parameters.action.type');
+
+        return (
+          <>
             <FormField
               name="name"
               label={formatMessage(labels.name)}
@@ -110,10 +82,7 @@ export function CohortEditForm({
                     name="parameters.action.type"
                     rules={{ required: formatMessage(labels.required) }}
                   >
-              <Select onSelectionChange={(value: any) => setAction(value)}>
-                <ListItem id="path">{formatMessage(labels.viewedPage)}</ListItem>
-                <ListItem id="event">{formatMessage(labels.triggeredEvent)}</ListItem>
-              </Select>
+                    <ActionSelect />
                   </FormField>
                 </Column>
                 <Column>
@@ -122,33 +91,7 @@ export function CohortEditForm({
                     rules={{ required: formatMessage(labels.required) }}
                   >
                     {({ field }) => {
-                return (
-                  <ComboBox
-                    aria-label="action"
-                    items={items}
-                    inputValue={field?.value}
-                    onInputChange={value => {
-                      handleSearch(value);
-                      field?.onChange?.(value);
-                    }}
-                    formValue="text"
-                    allowsEmptyCollection
-                    allowsCustomValue
-                    renderEmptyState={() =>
-                      isLoading ? (
-                        <Loading position="center" icon="dots" />
-                      ) : (
-                        <Empty message={formatMessage(messages.noResultsFound)} />
-                      )
-                    }
-                  >
-                    {items.map(item => (
-                      <ListItem key={item} id={item}>
-                        {item}
-                      </ListItem>
-                    ))}
-                  </ComboBox>
-                );
+                      return <LookupField websiteId={websiteId} type={type} {...field} />;
                     }}
                   </FormField>
                 </Column>
@@ -157,14 +100,20 @@ export function CohortEditForm({
 
             <Column width="260px">
               <Label>{formatMessage(labels.dateRange)}</Label>
-        <FormField name="parameters.dateRange" rules={{ required: formatMessage(labels.required) }}>
+              <FormField
+                name="parameters.dateRange"
+                rules={{ required: formatMessage(labels.required) }}
+              >
                 <DateFilter placement="bottom start" />
               </FormField>
             </Column>
 
             <Column>
               <Label>{formatMessage(labels.filters)}</Label>
-        <FormField name="parameters.filters" rules={{ required: formatMessage(labels.required) }}>
+              <FormField
+                name="parameters.filters"
+                rules={{ required: formatMessage(labels.required) }}
+              >
                 <FieldFilters websiteId={websiteId} exclude={['path', 'event']} />
               </FormField>
             </Column>
@@ -177,6 +126,9 @@ export function CohortEditForm({
                 {formatMessage(labels.save)}
               </FormSubmitButton>
             </FormButtons>
+          </>
+        );
+      }}
     </Form>
   );
 }

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

@@ -15,10 +15,7 @@ export function SegmentAddButton({ websiteId }: { websiteId: string }) {
         <Text>{formatMessage(labels.segment)}</Text>
       </Button>
       <Modal>
-        <Dialog
-          title={formatMessage(labels.segment)}
-          style={{ width: 800, minHeight: 300, maxHeight: '90vh' }}
-        >
+        <Dialog title={formatMessage(labels.segment)} style={{ width: 800, minHeight: 300 }}>
           {({ close }) => {
             return <SegmentEditForm websiteId={websiteId} onClose={close} />;
           }}

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

@@ -1,8 +1,8 @@
+import { Dialog } from '@umami/react-zen';
 import { ActionButton } from '@/components/input/ActionButton';
 import { Edit } from '@/components/icons';
-import { Dialog } from '@umami/react-zen';
-import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
 import { useMessages } from '@/components/hooks';
+import { SegmentEditForm } from './SegmentEditForm';
 import { Filter } from '@/lib/types';
 
 export function SegmentEditButton({
@@ -18,10 +18,7 @@ export function SegmentEditButton({
 
   return (
     <ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
-      <Dialog
-        title={formatMessage(labels.segment)}
-        style={{ width: 800, minHeight: 300, maxHeight: '90vh' }}
-      >
+      <Dialog title={formatMessage(labels.segment)} style={{ width: 800, minHeight: 300 }}>
         {({ close }) => {
           return (
             <SegmentEditForm

src/app/api/reports/[reportId]/route.ts

@@ -51,7 +51,7 @@ export async function POST(
     type,
     name,
     description,
-    parameters: parameters,
+    parameters,
   } as any);
 
   return json(result);

src/components/common/LoadingPanel.tsx

@@ -10,6 +10,7 @@ export interface LoadingPanelProps extends ColumnProps {
   isLoading?: boolean;
   isFetching?: boolean;
   loadingIcon?: 'dots' | 'spinner';
+  loadingPosition?: 'center' | 'page' | 'inline';
   renderEmpty?: () => ReactNode;
   children: ReactNode;
 }
@@ -21,6 +22,7 @@ export function LoadingPanel({
   isLoading,
   isFetching,
   loadingIcon = 'dots',
+  loadingPosition = 'page',
   renderEmpty = () => <Empty />,
   children,
   ...props
@@ -32,7 +34,7 @@ export function LoadingPanel({
       {/* Show loading spinner only if no data exists */}
       {(isLoading || isFetching) && (
         <Column position="relative" height="100%" {...props}>
-          <Loading icon={loadingIcon} position="page" />
+          <Loading icon={loadingIcon} position={loadingPosition} />
         </Column>
       )}
 

src/components/input/ActionButton.tsx

@@ -7,7 +7,7 @@ export function ActionButton({
   title,
   children,
 }: {
-  onSave?: () => void;
+  onClick?: () => void;
   icon?: ReactNode;
   title?: string;
   children?: ReactNode;

src/components/input/ActionSelect.tsx

@@ -0,0 +1,18 @@
+import { Select, ListItem } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+
+export interface ActionSelectProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export function ActionSelect({ value = 'path', onChange }: ActionSelectProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Select value={value} onChange={onChange}>
+      <ListItem id="path">{formatMessage(labels.viewedPage)}</ListItem>
+      <ListItem id="event">{formatMessage(labels.triggeredEvent)}</ListItem>
+    </Select>
+  );
+}

src/components/input/CurrencySelect.tsx

@@ -14,7 +14,7 @@ export function CurrencySelect({ value, onChange }) {
       value={value}
       defaultValue={value}
       onChange={onChange}
-      listProps={{ style: { maxHeight: '300px' } }}
+      listProps={{ style: { maxHeight: 300 } }}
       onSearch={setSearch}
       allowSearch
     >

src/components/input/FilterBar.tsx

@@ -30,8 +30,8 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
     query: { segment, cohort },
   } = useNavigation();
   const { filters, operatorLabels } = useFilters();
-  const { data, isLoading } = useWebsiteSegmentQuery(websiteId, segment);
-  const canSave = filters.length > 0 && !segment && !cohort;
+  const { data, isLoading } = useWebsiteSegmentQuery(websiteId, segment || cohort);
+  const canSaveSegment = filters.length > 0 && !segment && !cohort;
 
   const handleCloseFilter = (param: string) => {
     router.push(updateParams({ [param]: undefined }));
@@ -41,11 +41,11 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
     router.push(replaceParams());
   };
 
-  const handleSegmentRemove = () => {
-    router.push(updateParams({ segment: undefined }));
+  const handleSegmentRemove = (type: string) => {
+    router.push(updateParams({ [type]: undefined }));
   };
 
-  if (!filters.length && !segment) {
+  if (!filters.length && !segment && !cohort) {
     return null;
   }
 
@@ -58,7 +58,16 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
             label={formatMessage(labels.segment)}
             value={data?.name || segment}
             operator={operatorLabels.eq}
-            onRemove={handleSegmentRemove}
+            onRemove={() => handleSegmentRemove('segment')}
+          />
+        )}
+        {cohort && !isLoading && (
+          <FilterItem
+            name="cohort"
+            label={formatMessage(labels.cohort)}
+            value={data?.name || cohort}
+            operator={operatorLabels.eq}
+            onRemove={() => handleSegmentRemove('cohort')}
           />
         )}
         {filters.map(filter => {
@@ -79,7 +88,7 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
       </Row>
       <Row alignItems="center">
         <DialogTrigger>
-          {canSave && (
+          {canSaveSegment && (
             <TooltipTrigger delay={0}>
               <Button variant="zero">
                 <Icon>

src/components/input/FilterEditForm.tsx

@@ -1,40 +1,43 @@
 import { useState } from 'react';
 import { Column, Tabs, TabList, Tab, TabPanel, Row, Button } from '@umami/react-zen';
-import { useMessages } from '@/components/hooks';
+import { useFilters, useMessages, useNavigation } from '@/components/hooks';
 import { FieldFilters } from '@/components/input/FieldFilters';
 import { SegmentFilters } from '@/components/input/SegmentFilters';
 
 export interface FilterEditFormProps {
   websiteId?: string;
-  filters: any[];
-  segmentId?: string;
-  onChange?: (params: { filters: any[]; segment: any }) => void;
+  onChange?: (params: { filters: any[]; segment?: string; cohort?: string }) => void;
   onClose?: () => void;
 }
 
-export function FilterEditForm({
-  websiteId,
-  filters = [],
-  segmentId,
-  onChange,
-  onClose,
-}: FilterEditFormProps) {
+export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormProps) {
+  const {
+    query: { segment, cohort },
+  } = useNavigation();
+  const { filters } = useFilters();
   const { formatMessage, labels } = useMessages();
   const [currentFilters, setCurrentFilters] = useState(filters);
-  const [currentSegment, setCurrentSegment] = useState(segmentId);
+  const [currentSegment, setCurrentSegment] = useState(segment);
+  const [currentCohort, setCurrentCohort] = useState(cohort);
 
   const handleReset = () => {
     setCurrentFilters([]);
-    setCurrentSegment(null);
+    setCurrentSegment(undefined);
+    setCurrentCohort(undefined);
   };
 
   const handleSave = () => {
-    onChange?.({ filters: currentFilters.filter(f => f.value), segment: currentSegment });
+    onChange?.({
+      filters: currentFilters.filter(f => f.value),
+      segment: currentSegment,
+      cohort: currentCohort,
+    });
     onClose?.();
   };
 
-  const handleSegmentChange = (id: string) => {
-    setCurrentSegment(id);
+  const handleSegmentChange = (id: string, type: string) => {
+    setCurrentSegment(type === 'segment' ? id : undefined);
+    setCurrentCohort(type === 'cohort' ? id : undefined);
   };
 
   return (
@@ -43,6 +46,7 @@ export function FilterEditForm({
         <TabList>
           <Tab id="fields">{formatMessage(labels.fields)}</Tab>
           <Tab id="segments">{formatMessage(labels.segments)}</Tab>
+          <Tab id="cohorts">{formatMessage(labels.cohorts)}</Tab>
         </TabList>
         <TabPanel id="fields">
           <FieldFilters websiteId={websiteId} value={currentFilters} onChange={setCurrentFilters} />
@@ -51,7 +55,15 @@ export function FilterEditForm({
           <SegmentFilters
             websiteId={websiteId}
             segmentId={currentSegment}
-            onSave={handleSegmentChange}
+            onChange={handleSegmentChange}
+          />
+        </TabPanel>
+        <TabPanel id="cohorts" style={{ height: 400 }}>
+          <SegmentFilters
+            type="cohort"
+            websiteId={websiteId}
+            segmentId={currentCohort}
+            onChange={handleSegmentChange}
           />
         </TabPanel>
       </Tabs>

src/components/input/LookupField.tsx

@@ -0,0 +1,65 @@
+import { SetStateAction, useMemo, useState } from 'react';
+import { endOfDay, subMonths } from 'date-fns';
+import { ComboBox, ListItem, Loading, useDebounce, ComboBoxProps } from '@umami/react-zen';
+import { Empty } from '@/components/common/Empty';
+import { useMessages, useWebsiteValuesQuery } from '@/components/hooks';
+
+export interface LookupFieldProps extends ComboBoxProps {
+  websiteId: string;
+  type: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function LookupField({ websiteId, type, value, onChange, ...props }: LookupFieldProps) {
+  const { formatMessage, messages } = useMessages();
+  const [search, setSearch] = useState(value);
+  const searchValue = useDebounce(search, 300);
+  const startDate = subMonths(endOfDay(new Date()), 6);
+  const endDate = endOfDay(new Date());
+
+  const { data, isLoading } = useWebsiteValuesQuery({
+    websiteId,
+    type,
+    search: searchValue,
+    startDate,
+    endDate,
+  });
+
+  const items: string[] = useMemo(() => {
+    return data?.map(({ value }) => value) || [];
+  }, [data]);
+
+  const handleSearch = (value: SetStateAction<string>) => {
+    setSearch(value);
+  };
+
+  return (
+    <ComboBox
+      aria-label="LookupField"
+      {...props}
+      items={items}
+      inputValue={value}
+      onInputChange={value => {
+        handleSearch(value);
+        onChange?.(value);
+      }}
+      formValue="text"
+      allowsEmptyCollection
+      allowsCustomValue
+      renderEmptyState={() =>
+        isLoading ? (
+          <Loading position="center" icon="dots" />
+        ) : (
+          <Empty message={formatMessage(messages.noResultsFound)} />
+        )
+      }
+    >
+      {items.map(item => (
+        <ListItem key={item} id={item}>
+          {item}
+        </ListItem>
+      ))}
+    </ComboBox>
+  );
+}

src/components/input/SegmentFilters.tsx

@@ -5,14 +5,20 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 export interface SegmentFiltersProps {
   websiteId: string;
   segmentId: string;
-  onSave?: (data: any) => void;
+  type?: string;
+  onChange?: (id: string, type: string) => void;
 }
 
-export function SegmentFilters({ websiteId, segmentId, onSave }: SegmentFiltersProps) {
-  const { data, isLoading, isFetching } = useWebsiteSegmentsQuery(websiteId, { type: 'segment' });
+export function SegmentFilters({
+  websiteId,
+  segmentId,
+  type = 'segment',
+  onChange,
+}: SegmentFiltersProps) {
+  const { data, isLoading, isFetching } = useWebsiteSegmentsQuery(websiteId, { type });
 
   const handleChange = (id: string) => {
-    onSave?.(id);
+    onChange?.(id, type);
   };
 
   return (

src/components/metrics/MetricsExpandedTable.tsx

@@ -67,6 +67,7 @@ export function MetricsExpandedTable({
         isLoading={isLoading}
         error={error}
         height="100%"
+        loadingIcon="spinner"
       >
         <Column overflowY="auto" minHeight="0" height="100%" paddingRight="3" overflow="hidden">
           {items && (

src/components/metrics/MetricsTable.tsx

@@ -68,7 +68,13 @@ export function MetricsTable({
   };
 
   return (
-    <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
+    <LoadingPanel
+      data={data}
+      isFetching={isFetching}
+      isLoading={isLoading}
+      error={error}
+      minHeight="380px"
+    >
       {data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}
       {showMore && limit && (
         <Row justifyContent="center">

src/components/metrics/WorldMap.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import { colord } from 'colord';
 import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
 import {
-  useDateRange,
   useWebsiteMetricsQuery,
   useCountryNames,
   useLocale,
@@ -30,14 +29,11 @@ export function WorldMap({ websiteId, data, className, ...props }: WorldMapProps
   const { countryNames } = useCountryNames(locale);
   const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
   const unknownLabel = formatMessage(labels.unknown);
-  const {
-    dateRange: { startDate, endDate },
-  } = useDateRange(websiteId);
+
   const { data: mapData } = useWebsiteMetricsQuery(websiteId, {
     type: 'country',
-    startAt: +startDate,
-    endAt: +endDate,
   });
+
   const metrics = useMemo(
     () => (data || mapData ? percentFilter((data || mapData) as any[]) : []),
     [data, mapData],

src/lib/schema.ts

@@ -101,57 +101,6 @@ export const reportTypeParam = z.enum([
   'utm',
 ]);
 
-export const dateRangeSchema = z.object({ ...dateRangeParams }).superRefine((data, ctx) => {
-  const hasTimestamps = data.startAt !== undefined && data.endAt !== undefined;
-  const hasDates = data.startDate !== undefined && data.endDate !== undefined;
-
-  if (!hasTimestamps && !hasDates) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'You must provide either startAt & endAt or startDate & endDate.',
-    });
-  }
-
-  if (hasTimestamps && hasDates) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'Provide either startAt & endAt or startDate & endDate, not both.',
-    });
-  }
-
-  if (data.startAt !== undefined && data.endAt === undefined) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'If you provide startAt, you must also provide endAt.',
-      path: ['endAt'],
-    });
-  }
-
-  if (data.endAt !== undefined && data.startAt === undefined) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'If you provide endAt, you must also provide startAt.',
-      path: ['startAt'],
-    });
-  }
-
-  if (data.startDate !== undefined && data.endDate === undefined) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'If you provide startDate, you must also provide endDate.',
-      path: ['endDate'],
-    });
-  }
-
-  if (data.endDate !== undefined && data.startDate === undefined) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'If you provide endDate, you must also provide startDate.',
-      path: ['startDate'],
-    });
-  }
-});
-
 export const goalReportSchema = z.object({
   type: z.literal('goal'),
   parameters: z
@@ -180,7 +129,7 @@ export const funnelReportSchema = z.object({
     steps: z
       .array(
         z.object({
-          type: z.enum(['page', 'event']),
+          type: z.enum(['path', 'event']),
           value: z.string(),
         }),
       )
@@ -233,7 +182,7 @@ export const attributionReportSchema = z.object({
     startDate: z.coerce.date(),
     endDate: z.coerce.date(),
     model: z.enum(['first-click', 'last-click']),
-    type: z.enum(['page', 'event']),
+    type: z.enum(['path', 'event']),
     step: z.string(),
     currency: z.string().optional(),
   }),
@@ -253,6 +202,7 @@ export const reportBaseSchema = z.object({
   type: reportTypeParam,
   name: z.string().max(200),
   description: z.string().max(500).optional(),
+  parameters: z.object({}).passthrough(),
 });
 
 export const reportTypeSchema = z.discriminatedUnion('type', [
@@ -266,7 +216,7 @@ export const reportTypeSchema = z.discriminatedUnion('type', [
   breakdownReportSchema,
 ]);
 
-export const reportSchema = z.intersection(reportBaseSchema, reportTypeSchema);
+export const reportSchema = reportBaseSchema;
 
 export const reportResultSchema = z.intersection(
   z.object({

src/queries/sql/reports/getAttribution.ts

@@ -40,8 +40,8 @@ async function relationalQuery(
 ): Promise<AttributionResult> {
   const { model, type, currency } = parameters;
   const { rawQuery, parseFilters } = prisma;
-  const eventType = type === 'page' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
-  const column = type === 'page' ? 'url_path' : 'event_name';
+  const eventType = type === 'path' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
+  const column = type === 'path' ? 'url_path' : 'event_name';
   const { filterQuery, joinSessionQuery, cohortQuery, queryParams } = parseFilters({
     ...filters,
     ...parameters,
@@ -266,8 +266,8 @@ async function clickhouseQuery(
 ): Promise<AttributionResult> {
   const { model, type, currency } = parameters;
   const { rawQuery, parseFilters } = clickhouse;
-  const eventType = type === 'page' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
-  const column = type === 'page' ? 'url_path' : 'event_name';
+  const eventType = type === 'path' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
+  const column = type === 'path' ? 'url_path' : 'event_name';
   const { filterQuery, cohortQuery, queryParams } = parseFilters({
     ...filters,
     ...parameters,

src/queries/sql/reports/getFunnel.ts

@@ -54,7 +54,7 @@ async function relationalQuery(
       (pv, cv, i) => {
         const levelNumber = i + 1;
         const startSum = i > 0 ? 'union ' : '';
-        const isURL = cv.type === 'page';
+        const isURL = cv.type === 'path';
         const column = isURL ? 'url_path' : 'event_name';
 
         let operator = '=';
@@ -161,7 +161,7 @@ async function clickhouseQuery(
         const levelNumber = i + 1;
         const startSum = i > 0 ? 'union all ' : '';
         const startFilter = i > 0 ? 'or' : '';
-        const isURL = cv.type === 'page';
+        const isURL = cv.type === 'path';
         const column = isURL ? 'url_path' : 'event_name';
 
         let operator = '=';

src/queries/sql/reports/getGoal.ts

@@ -29,8 +29,8 @@ async function relationalQuery(
 ) {
   const { startDate, endDate, type, value } = parameters;
   const { rawQuery, parseFilters } = prisma;
-  const eventType = type === 'page' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
-  const column = type === 'page' ? 'url_path' : 'event_name';
+  const eventType = type === 'path' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
+  const column = type === 'path' ? 'url_path' : 'event_name';
   const { filterQuery, dateQuery, joinSessionQuery, cohortQuery, queryParams } = parseFilters({
     ...filters,
     websiteId,
@@ -71,8 +71,8 @@ async function clickhouseQuery(
 ) {
   const { startDate, endDate, type, value } = parameters;
   const { rawQuery, parseFilters } = clickhouse;
-  const eventType = type === 'page' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
-  const column = type === 'page' ? 'url_path' : 'event_name';
+  const eventType = type === 'path' ? EVENT_TYPE.pageView : EVENT_TYPE.customEvent;
+  const column = type === 'path' ? 'url_path' : 'event_name';
   const { filterQuery, dateQuery, cohortQuery, queryParams } = parseFilters({
     ...filters,
     websiteId,

src/queries/sql/sessions/getWebsiteSessions.ts

@@ -106,7 +106,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
       ${getDateStringSQL('min(created_at)')} as firstAt,
       ${getDateStringSQL('max(created_at)')} as lastAt,
       uniq(visit_id) as visits,
-      sumIf(views, event_type = 1) as views,
+      sumIf(1, event_type = 1) as views,
       lastAt as createdAt
     from website_event
     ${cohortQuery}