wip

2026-02-18 18:28:23 +01:00
parent d1b39c4c93
commit 765e4aa107
24 changed files with 1332 additions and 200 deletions
--- a/apps/start/src/components/report/ReportSegment.tsx
+++ b/apps/start/src/components/report/ReportSegment.tsx
@@ -1,5 +1,8 @@
+import { chartSegments } from '@openpanel/constants';
+import { type IChartEventSegment, mapKeys } from '@openpanel/validation';
 import {
  ActivityIcon,
+  Building2Icon,
  ClockIcon,
  EqualApproximatelyIcon,
  type LucideIcon,
@@ -10,10 +13,7 @@ import {
  UserCheckIcon,
  UsersIcon,
 } from 'lucide-react';
-
-import { chartSegments } from '@openpanel/constants';
-import { type IChartEventSegment, mapKeys } from '@openpanel/validation';
-
+import { Button } from '../ui/button';
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -25,7 +25,6 @@ import {
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/utils/cn';
-import { Button } from '../ui/button';

 interface ReportChartTypeProps {
  className?: string;
@@ -46,6 +45,7 @@ export function ReportSegment({
    event: ActivityIcon,
    user: UsersIcon,
    session: ClockIcon,
+    group: Building2Icon,
    user_average: UserCheck2Icon,
    one_event_per_user: UserCheckIcon,
    property_sum: SigmaIcon,
@@ -58,9 +58,9 @@ export function ReportSegment({
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
-          variant="outline"
-          icon={Icons[value]}
          className={cn('justify-start text-sm', className)}
+          icon={Icons[value]}
+          variant="outline"
        >
          {items.find((item) => item.value === value)?.label}
        </Button>
@@ -74,13 +74,13 @@ export function ReportSegment({
            const Icon = Icons[item.value];
            return (
              <DropdownMenuItem
+                className="group"
                key={item.value}
                onClick={() => onChange(item.value)}
-                className="group"
              >
                {item.label}
                <DropdownMenuShortcut>
-                  <Icon className="size-4 group-hover:text-blue-500 group-hover:scale-125 transition-all group-hover:rotate-12" />
+                  <Icon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
                </DropdownMenuShortcut>
              </DropdownMenuItem>
            );
--- a/apps/start/src/components/report/sidebar/PropertiesCombobox.tsx
+++ b/apps/start/src/components/report/sidebar/PropertiesCombobox.tsx
@@ -1,3 +1,14 @@
+import type { IChartEvent } from '@openpanel/validation';
+import { useQuery } from '@tanstack/react-query';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  ArrowLeftIcon,
+  Building2Icon,
+  DatabaseIcon,
+  UserIcon,
+} from 'lucide-react';
+import VirtualList from 'rc-virtual-list';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
  DropdownMenu,
@@ -10,11 +21,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { useAppParams } from '@/hooks/use-app-params';
 import { useEventProperties } from '@/hooks/use-event-properties';
-import type { IChartEvent } from '@openpanel/validation';
-import { AnimatePresence, motion } from 'framer-motion';
-import { ArrowLeftIcon, DatabaseIcon, UserIcon } from 'lucide-react';
-import VirtualList from 'rc-virtual-list';
-import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { useTRPC } from '@/integrations/trpc/react';

 interface PropertiesComboboxProps {
  event?: IChartEvent;
@@ -40,15 +47,15 @@ function SearchHeader({
  return (
    <div className="row items-center gap-1">
      {!!onBack && (
-        <Button variant="ghost" size="icon" onClick={onBack}>
+        <Button onClick={onBack} size="icon" variant="ghost">
          <ArrowLeftIcon className="size-4" />
        </Button>
      )}
      <Input
+        autoFocus
+        onChange={(e) => onSearch(e.target.value)}
        placeholder="Search"
        value={value}
-        onChange={(e) => onSearch(e.target.value)}
-        autoFocus
      />
    </div>
  );
@@ -62,18 +69,24 @@ export function PropertiesCombobox({
  exclude = [],
 }: PropertiesComboboxProps) {
  const { projectId } = useAppParams();
+  const trpc = useTRPC();
  const [open, setOpen] = useState(false);
  const properties = useEventProperties({
    event: event?.name,
    projectId,
  });
-  const [state, setState] = useState<'index' | 'event' | 'profile'>('index');
+  const groupPropertiesQuery = useQuery(
+    trpc.group.properties.queryOptions({ projectId })
+  );
+  const [state, setState] = useState<'index' | 'event' | 'profile' | 'group'>(
+    'index'
+  );
  const [search, setSearch] = useState('');
  const [direction, setDirection] = useState<'forward' | 'backward'>('forward');

  useEffect(() => {
    if (!open) {
-      setState(!mode ? 'index' : mode === 'events' ? 'event' : 'profile');
+      setState(mode ? (mode === 'events' ? 'event' : 'profile') : 'index');
    }
  }, [open, mode]);

@@ -86,11 +99,21 @@ export function PropertiesCombobox({
    });
  };

-  // Mock data for the lists
+  // Fixed group properties: name, type, plus dynamic property keys
+  const groupActions = [
+    { value: 'group.name', label: 'name', description: 'group' },
+    { value: 'group.type', label: 'type', description: 'group' },
+    ...(groupPropertiesQuery.data ?? []).map((key) => ({
+      value: `group.properties.${key}`,
+      label: key,
+      description: 'group.properties',
+    })),
+  ].filter((a) => shouldShowProperty(a.value));
+
  const profileActions = properties
    .filter(
      (property) =>
-        property.startsWith('profile') && shouldShowProperty(property),
+        property.startsWith('profile') && shouldShowProperty(property)
    )
    .map((property) => ({
      value: property,
@@ -100,7 +123,7 @@ export function PropertiesCombobox({
  const eventActions = properties
    .filter(
      (property) =>
-        !property.startsWith('profile') && shouldShowProperty(property),
+        !property.startsWith('profile') && shouldShowProperty(property)
    )
    .map((property) => ({
      value: property,
@@ -108,7 +131,9 @@ export function PropertiesCombobox({
      description: property.split('.').slice(0, -1).join('.'),
    }));

-  const handleStateChange = (newState: 'index' | 'event' | 'profile') => {
+  const handleStateChange = (
+    newState: 'index' | 'event' | 'profile' | 'group'
+  ) => {
    setDirection(newState === 'index' ? 'backward' : 'forward');
    setState(newState);
  };
@@ -135,7 +160,7 @@ export function PropertiesCombobox({
          }}
        >
          Event properties
-          <DatabaseIcon className="size-4 group-hover:text-blue-500 group-hover:scale-125 transition-all group-hover:rotate-12" />
+          <DatabaseIcon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
        </DropdownMenuItem>
        <DropdownMenuItem
          className="group justify-between gap-2"
@@ -145,7 +170,17 @@ export function PropertiesCombobox({
          }}
        >
          Profile properties
-          <UserIcon className="size-4 group-hover:text-blue-500 group-hover:scale-125 transition-all group-hover:rotate-12" />
+          <UserIcon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="group justify-between gap-2"
+          onClick={(e) => {
+            e.preventDefault();
+            handleStateChange('group');
+          }}
+        >
+          Group properties
+          <Building2Icon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
        </DropdownMenuItem>
      </DropdownMenuGroup>
    );
@@ -155,7 +190,7 @@ export function PropertiesCombobox({
    const filteredActions = eventActions.filter(
      (action) =>
        action.label.toLowerCase().includes(search.toLowerCase()) ||
-        action.description.toLowerCase().includes(search.toLowerCase()),
+        action.description.toLowerCase().includes(search.toLowerCase())
    );

    return (
@@ -169,20 +204,20 @@ export function PropertiesCombobox({
        />
        <DropdownMenuSeparator />
        <VirtualList
-          height={300}
          data={filteredActions}
+          height={300}
          itemHeight={40}
          itemKey="id"
        >
          {(action) => (
            <motion.div
-              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
-              className="p-2 hover:bg-accent cursor-pointer rounded-md col gap-px"
+              className="col cursor-pointer gap-px rounded-md p-2 hover:bg-accent"
+              initial={{ opacity: 0, y: 10 }}
              onClick={() => handleSelect(action)}
            >
              <div className="font-medium">{action.label}</div>
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
                {action.description}
              </div>
            </motion.div>
@@ -196,7 +231,7 @@ export function PropertiesCombobox({
    const filteredActions = profileActions.filter(
      (action) =>
        action.label.toLowerCase().includes(search.toLowerCase()) ||
-        action.description.toLowerCase().includes(search.toLowerCase()),
+        action.description.toLowerCase().includes(search.toLowerCase())
    );

    return (
@@ -208,20 +243,59 @@ export function PropertiesCombobox({
        />
        <DropdownMenuSeparator />
        <VirtualList
-          height={300}
          data={filteredActions}
+          height={300}
          itemHeight={40}
          itemKey="id"
        >
          {(action) => (
            <motion.div
-              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
-              className="p-2 hover:bg-accent cursor-pointer rounded-md col gap-px"
+              className="col cursor-pointer gap-px rounded-md p-2 hover:bg-accent"
+              initial={{ opacity: 0, y: 10 }}
              onClick={() => handleSelect(action)}
            >
              <div className="font-medium">{action.label}</div>
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
+                {action.description}
+              </div>
+            </motion.div>
+          )}
+        </VirtualList>
+      </div>
+    );
+  };
+
+  const renderGroup = () => {
+    const filteredActions = groupActions.filter(
+      (action) =>
+        action.label.toLowerCase().includes(search.toLowerCase()) ||
+        action.description.toLowerCase().includes(search.toLowerCase())
+    );
+
+    return (
+      <div className="flex flex-col">
+        <SearchHeader
+          onBack={() => handleStateChange('index')}
+          onSearch={setSearch}
+          value={search}
+        />
+        <DropdownMenuSeparator />
+        <VirtualList
+          data={filteredActions}
+          height={Math.min(300, filteredActions.length * 40 + 8)}
+          itemHeight={40}
+          itemKey="value"
+        >
+          {(action) => (
+            <motion.div
+              animate={{ opacity: 1, y: 0 }}
+              className="col cursor-pointer gap-px rounded-md p-2 hover:bg-accent"
+              initial={{ opacity: 0, y: 10 }}
+              onClick={() => handleSelect(action)}
+            >
+              <div className="font-medium">{action.label}</div>
+              <div className="text-muted-foreground text-sm">
                {action.description}
              </div>
            </motion.div>
@@ -233,20 +307,20 @@ export function PropertiesCombobox({

  return (
    <DropdownMenu
-      open={open}
      onOpenChange={(open) => {
        setOpen(open);
      }}
+      open={open}
    >
      <DropdownMenuTrigger asChild>{children(setOpen)}</DropdownMenuTrigger>
-      <DropdownMenuContent className="max-w-80" align="start">
-        <AnimatePresence mode="wait" initial={false}>
+      <DropdownMenuContent align="start" className="max-w-80">
+        <AnimatePresence initial={false} mode="wait">
          {state === 'index' && (
            <motion.div
-              key="index"
-              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
+              initial={{ opacity: 0 }}
+              key="index"
              transition={{ duration: 0.05 }}
            >
              {renderIndex()}
@@ -254,10 +328,10 @@ export function PropertiesCombobox({
          )}
          {state === 'event' && (
            <motion.div
-              key="event"
-              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: direction === 'forward' ? -20 : 20 }}
+              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
+              key="event"
              transition={{ duration: 0.05 }}
            >
              {renderEvent()}
@@ -265,15 +339,26 @@ export function PropertiesCombobox({
          )}
          {state === 'profile' && (
            <motion.div
-              key="profile"
-              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: direction === 'forward' ? -20 : 20 }}
+              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
+              key="profile"
              transition={{ duration: 0.05 }}
            >
              {renderProfile()}
            </motion.div>
          )}
+          {state === 'group' && (
+            <motion.div
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: direction === 'forward' ? -20 : 20 }}
+              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
+              key="group"
+              transition={{ duration: 0.05 }}
+            >
+              {renderGroup()}
+            </motion.div>
+          )}
        </AnimatePresence>
      </DropdownMenuContent>
    </DropdownMenu>
--- a/apps/start/src/components/sidebar-project-menu.tsx
+++ b/apps/start/src/components/sidebar-project-menu.tsx
@@ -4,6 +4,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import {
  BellIcon,
  BookOpenIcon,
+  Building2Icon,
  ChartLineIcon,
  ChevronDownIcon,
  CogIcon,
@@ -62,6 +63,7 @@ export default function SidebarProjectMenu({
      <SidebarLink href={'/events'} icon={GanttChartIcon} label="Events" />
      <SidebarLink href={'/sessions'} icon={UsersIcon} label="Sessions" />
      <SidebarLink href={'/profiles'} icon={UserCircleIcon} label="Profiles" />
+      <SidebarLink href={'/groups'} icon={Building2Icon} label="Groups" />
      <div className="mt-4 mb-2 font-medium text-muted-foreground text-sm">
        Manage
      </div>
--- a/apps/start/src/routeTree.gen.ts
+++ b/apps/start/src/routeTree.gen.ts
@@ -48,6 +48,7 @@ import { Route as AppOrganizationIdProjectIdReferencesRouteImport } from './rout
 import { Route as AppOrganizationIdProjectIdRealtimeRouteImport } from './routes/_app.$organizationId.$projectId.realtime'
 import { Route as AppOrganizationIdProjectIdPagesRouteImport } from './routes/_app.$organizationId.$projectId.pages'
 import { Route as AppOrganizationIdProjectIdInsightsRouteImport } from './routes/_app.$organizationId.$projectId.insights'
+import { Route as AppOrganizationIdProjectIdGroupsRouteImport } from './routes/_app.$organizationId.$projectId.groups'
 import { Route as AppOrganizationIdProjectIdDashboardsRouteImport } from './routes/_app.$organizationId.$projectId.dashboards'
 import { Route as AppOrganizationIdProjectIdChatRouteImport } from './routes/_app.$organizationId.$projectId.chat'
 import { Route as AppOrganizationIdProfileTabsIndexRouteImport } from './routes/_app.$organizationId.profile._tabs.index'
@@ -63,6 +64,7 @@ import { Route as AppOrganizationIdProjectIdSessionsSessionIdRouteImport } from
 import { Route as AppOrganizationIdProjectIdReportsReportIdRouteImport } from './routes/_app.$organizationId.$projectId.reports_.$reportId'
 import { Route as AppOrganizationIdProjectIdProfilesTabsRouteImport } from './routes/_app.$organizationId.$projectId.profiles._tabs'
 import { Route as AppOrganizationIdProjectIdNotificationsTabsRouteImport } from './routes/_app.$organizationId.$projectId.notifications._tabs'
+import { Route as AppOrganizationIdProjectIdGroupsGroupIdRouteImport } from './routes/_app.$organizationId.$projectId.groups_.$groupId'
 import { Route as AppOrganizationIdProjectIdEventsTabsRouteImport } from './routes/_app.$organizationId.$projectId.events._tabs'
 import { Route as AppOrganizationIdProjectIdDashboardsDashboardIdRouteImport } from './routes/_app.$organizationId.$projectId.dashboards_.$dashboardId'
 import { Route as AppOrganizationIdProjectIdSettingsTabsIndexRouteImport } from './routes/_app.$organizationId.$projectId.settings._tabs.index'
@@ -350,6 +352,12 @@ const AppOrganizationIdProjectIdInsightsRoute =
    path: '/insights',
    getParentRoute: () => AppOrganizationIdProjectIdRoute,
  } as any)
+const AppOrganizationIdProjectIdGroupsRoute =
+  AppOrganizationIdProjectIdGroupsRouteImport.update({
+    id: '/groups',
+    path: '/groups',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
+  } as any)
 const AppOrganizationIdProjectIdDashboardsRoute =
  AppOrganizationIdProjectIdDashboardsRouteImport.update({
    id: '/dashboards',
@@ -443,6 +451,12 @@ const AppOrganizationIdProjectIdNotificationsTabsRoute =
    id: '/_tabs',
    getParentRoute: () => AppOrganizationIdProjectIdNotificationsRoute,
  } as any)
+const AppOrganizationIdProjectIdGroupsGroupIdRoute =
+  AppOrganizationIdProjectIdGroupsGroupIdRouteImport.update({
+    id: '/groups_/$groupId',
+    path: '/groups/$groupId',
+    getParentRoute: () => AppOrganizationIdProjectIdRoute,
+  } as any)
 const AppOrganizationIdProjectIdEventsTabsRoute =
  AppOrganizationIdProjectIdEventsTabsRouteImport.update({
    id: '/_tabs',
@@ -615,6 +629,7 @@ export interface FileRoutesByFullPath {
  '/$organizationId/': typeof AppOrganizationIdIndexRoute
  '/$organizationId/$projectId/chat': typeof AppOrganizationIdProjectIdChatRoute
  '/$organizationId/$projectId/dashboards': typeof AppOrganizationIdProjectIdDashboardsRoute
+  '/$organizationId/$projectId/groups': typeof AppOrganizationIdProjectIdGroupsRoute
  '/$organizationId/$projectId/insights': typeof AppOrganizationIdProjectIdInsightsRoute
  '/$organizationId/$projectId/pages': typeof AppOrganizationIdProjectIdPagesRoute
  '/$organizationId/$projectId/realtime': typeof AppOrganizationIdProjectIdRealtimeRoute
@@ -630,6 +645,7 @@ export interface FileRoutesByFullPath {
  '/$organizationId/$projectId/': typeof AppOrganizationIdProjectIdIndexRoute
  '/$organizationId/$projectId/dashboards/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
  '/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsTabsRouteWithChildren
+  '/$organizationId/$projectId/groups/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
  '/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsRouteWithChildren
  '/$organizationId/$projectId/profiles': typeof AppOrganizationIdProjectIdProfilesTabsRouteWithChildren
  '/$organizationId/$projectId/reports/$reportId': typeof AppOrganizationIdProjectIdReportsReportIdRoute
@@ -688,6 +704,7 @@ export interface FileRoutesByTo {
  '/$organizationId': typeof AppOrganizationIdIndexRoute
  '/$organizationId/$projectId/chat': typeof AppOrganizationIdProjectIdChatRoute
  '/$organizationId/$projectId/dashboards': typeof AppOrganizationIdProjectIdDashboardsRoute
+  '/$organizationId/$projectId/groups': typeof AppOrganizationIdProjectIdGroupsRoute
  '/$organizationId/$projectId/insights': typeof AppOrganizationIdProjectIdInsightsRoute
  '/$organizationId/$projectId/pages': typeof AppOrganizationIdProjectIdPagesRoute
  '/$organizationId/$projectId/realtime': typeof AppOrganizationIdProjectIdRealtimeRoute
@@ -703,6 +720,7 @@ export interface FileRoutesByTo {
  '/$organizationId/$projectId': typeof AppOrganizationIdProjectIdIndexRoute
  '/$organizationId/$projectId/dashboards/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
  '/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsTabsIndexRoute
+  '/$organizationId/$projectId/groups/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
  '/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsTabsIndexRoute
  '/$organizationId/$projectId/profiles': typeof AppOrganizationIdProjectIdProfilesTabsIndexRoute
  '/$organizationId/$projectId/reports/$reportId': typeof AppOrganizationIdProjectIdReportsReportIdRoute
@@ -760,6 +778,7 @@ export interface FileRoutesById {
  '/_app/$organizationId/': typeof AppOrganizationIdIndexRoute
  '/_app/$organizationId/$projectId/chat': typeof AppOrganizationIdProjectIdChatRoute
  '/_app/$organizationId/$projectId/dashboards': typeof AppOrganizationIdProjectIdDashboardsRoute
+  '/_app/$organizationId/$projectId/groups': typeof AppOrganizationIdProjectIdGroupsRoute
  '/_app/$organizationId/$projectId/insights': typeof AppOrganizationIdProjectIdInsightsRoute
  '/_app/$organizationId/$projectId/pages': typeof AppOrganizationIdProjectIdPagesRoute
  '/_app/$organizationId/$projectId/realtime': typeof AppOrganizationIdProjectIdRealtimeRoute
@@ -779,6 +798,7 @@ export interface FileRoutesById {
  '/_app/$organizationId/$projectId/dashboards_/$dashboardId': typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
  '/_app/$organizationId/$projectId/events': typeof AppOrganizationIdProjectIdEventsRouteWithChildren
  '/_app/$organizationId/$projectId/events/_tabs': typeof AppOrganizationIdProjectIdEventsTabsRouteWithChildren
+  '/_app/$organizationId/$projectId/groups_/$groupId': typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
  '/_app/$organizationId/$projectId/notifications': typeof AppOrganizationIdProjectIdNotificationsRouteWithChildren
  '/_app/$organizationId/$projectId/notifications/_tabs': typeof AppOrganizationIdProjectIdNotificationsTabsRouteWithChildren
  '/_app/$organizationId/$projectId/profiles': typeof AppOrganizationIdProjectIdProfilesRouteWithChildren
@@ -845,6 +865,7 @@ export interface FileRouteTypes {
    | '/$organizationId/'
    | '/$organizationId/$projectId/chat'
    | '/$organizationId/$projectId/dashboards'
+    | '/$organizationId/$projectId/groups'
    | '/$organizationId/$projectId/insights'
    | '/$organizationId/$projectId/pages'
    | '/$organizationId/$projectId/realtime'
@@ -860,6 +881,7 @@ export interface FileRouteTypes {
    | '/$organizationId/$projectId/'
    | '/$organizationId/$projectId/dashboards/$dashboardId'
    | '/$organizationId/$projectId/events'
+    | '/$organizationId/$projectId/groups/$groupId'
    | '/$organizationId/$projectId/notifications'
    | '/$organizationId/$projectId/profiles'
    | '/$organizationId/$projectId/reports/$reportId'
@@ -918,6 +940,7 @@ export interface FileRouteTypes {
    | '/$organizationId'
    | '/$organizationId/$projectId/chat'
    | '/$organizationId/$projectId/dashboards'
+    | '/$organizationId/$projectId/groups'
    | '/$organizationId/$projectId/insights'
    | '/$organizationId/$projectId/pages'
    | '/$organizationId/$projectId/realtime'
@@ -933,6 +956,7 @@ export interface FileRouteTypes {
    | '/$organizationId/$projectId'
    | '/$organizationId/$projectId/dashboards/$dashboardId'
    | '/$organizationId/$projectId/events'
+    | '/$organizationId/$projectId/groups/$groupId'
    | '/$organizationId/$projectId/notifications'
    | '/$organizationId/$projectId/profiles'
    | '/$organizationId/$projectId/reports/$reportId'
@@ -989,6 +1013,7 @@ export interface FileRouteTypes {
    | '/_app/$organizationId/'
    | '/_app/$organizationId/$projectId/chat'
    | '/_app/$organizationId/$projectId/dashboards'
+    | '/_app/$organizationId/$projectId/groups'
    | '/_app/$organizationId/$projectId/insights'
    | '/_app/$organizationId/$projectId/pages'
    | '/_app/$organizationId/$projectId/realtime'
@@ -1008,6 +1033,7 @@ export interface FileRouteTypes {
    | '/_app/$organizationId/$projectId/dashboards_/$dashboardId'
    | '/_app/$organizationId/$projectId/events'
    | '/_app/$organizationId/$projectId/events/_tabs'
+    | '/_app/$organizationId/$projectId/groups_/$groupId'
    | '/_app/$organizationId/$projectId/notifications'
    | '/_app/$organizationId/$projectId/notifications/_tabs'
    | '/_app/$organizationId/$projectId/profiles'
@@ -1378,6 +1404,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppOrganizationIdProjectIdInsightsRouteImport
      parentRoute: typeof AppOrganizationIdProjectIdRoute
    }
+    '/_app/$organizationId/$projectId/groups': {
+      id: '/_app/$organizationId/$projectId/groups'
+      path: '/groups'
+      fullPath: '/$organizationId/$projectId/groups'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
+    }
    '/_app/$organizationId/$projectId/dashboards': {
      id: '/_app/$organizationId/$projectId/dashboards'
      path: '/dashboards'
@@ -1490,6 +1523,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppOrganizationIdProjectIdNotificationsTabsRouteImport
      parentRoute: typeof AppOrganizationIdProjectIdNotificationsRoute
    }
+    '/_app/$organizationId/$projectId/groups_/$groupId': {
+      id: '/_app/$organizationId/$projectId/groups_/$groupId'
+      path: '/groups/$groupId'
+      fullPath: '/$organizationId/$projectId/groups/$groupId'
+      preLoaderRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdRouteImport
+      parentRoute: typeof AppOrganizationIdProjectIdRoute
+    }
    '/_app/$organizationId/$projectId/events/_tabs': {
      id: '/_app/$organizationId/$projectId/events/_tabs'
      path: '/events'
@@ -1875,6 +1915,7 @@ const AppOrganizationIdProjectIdSettingsRouteWithChildren =
 interface AppOrganizationIdProjectIdRouteChildren {
  AppOrganizationIdProjectIdChatRoute: typeof AppOrganizationIdProjectIdChatRoute
  AppOrganizationIdProjectIdDashboardsRoute: typeof AppOrganizationIdProjectIdDashboardsRoute
+  AppOrganizationIdProjectIdGroupsRoute: typeof AppOrganizationIdProjectIdGroupsRoute
  AppOrganizationIdProjectIdInsightsRoute: typeof AppOrganizationIdProjectIdInsightsRoute
  AppOrganizationIdProjectIdPagesRoute: typeof AppOrganizationIdProjectIdPagesRoute
  AppOrganizationIdProjectIdRealtimeRoute: typeof AppOrganizationIdProjectIdRealtimeRoute
@@ -1885,6 +1926,7 @@ interface AppOrganizationIdProjectIdRouteChildren {
  AppOrganizationIdProjectIdIndexRoute: typeof AppOrganizationIdProjectIdIndexRoute
  AppOrganizationIdProjectIdDashboardsDashboardIdRoute: typeof AppOrganizationIdProjectIdDashboardsDashboardIdRoute
  AppOrganizationIdProjectIdEventsRoute: typeof AppOrganizationIdProjectIdEventsRouteWithChildren
+  AppOrganizationIdProjectIdGroupsGroupIdRoute: typeof AppOrganizationIdProjectIdGroupsGroupIdRoute
  AppOrganizationIdProjectIdNotificationsRoute: typeof AppOrganizationIdProjectIdNotificationsRouteWithChildren
  AppOrganizationIdProjectIdProfilesRoute: typeof AppOrganizationIdProjectIdProfilesRouteWithChildren
  AppOrganizationIdProjectIdReportsReportIdRoute: typeof AppOrganizationIdProjectIdReportsReportIdRoute
@@ -1897,6 +1939,8 @@ const AppOrganizationIdProjectIdRouteChildren: AppOrganizationIdProjectIdRouteCh
    AppOrganizationIdProjectIdChatRoute: AppOrganizationIdProjectIdChatRoute,
    AppOrganizationIdProjectIdDashboardsRoute:
      AppOrganizationIdProjectIdDashboardsRoute,
+    AppOrganizationIdProjectIdGroupsRoute:
+      AppOrganizationIdProjectIdGroupsRoute,
    AppOrganizationIdProjectIdInsightsRoute:
      AppOrganizationIdProjectIdInsightsRoute,
    AppOrganizationIdProjectIdPagesRoute: AppOrganizationIdProjectIdPagesRoute,
@@ -1914,6 +1958,8 @@ const AppOrganizationIdProjectIdRouteChildren: AppOrganizationIdProjectIdRouteCh
      AppOrganizationIdProjectIdDashboardsDashboardIdRoute,
    AppOrganizationIdProjectIdEventsRoute:
      AppOrganizationIdProjectIdEventsRouteWithChildren,
+    AppOrganizationIdProjectIdGroupsGroupIdRoute:
+      AppOrganizationIdProjectIdGroupsGroupIdRoute,
    AppOrganizationIdProjectIdNotificationsRoute:
      AppOrganizationIdProjectIdNotificationsRouteWithChildren,
    AppOrganizationIdProjectIdProfilesRoute:
--- a/apps/start/src/routes/_app.$organizationId.$projectId.groups.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.groups.tsx
@@ -0,0 +1,146 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { Building2Icon } from 'lucide-react';
+import { parseAsString, useQueryState } from 'nuqs';
+import { PageContainer } from '@/components/page-container';
+import { PageHeader } from '@/components/page-header';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useSearchQueryState } from '@/hooks/use-search-query-state';
+import { useTRPC } from '@/integrations/trpc/react';
+import { formatDateTime } from '@/utils/date';
+import { createProjectTitle } from '@/utils/title';
+
+export const Route = createFileRoute('/_app/$organizationId/$projectId/groups')(
+  {
+    component: Component,
+    head: () => ({
+      meta: [{ title: createProjectTitle('Groups') }],
+    }),
+  }
+);
+
+function Component() {
+  const { projectId, organizationId } = Route.useParams();
+  const trpc = useTRPC();
+  const { search, setSearch, debouncedSearch } = useSearchQueryState();
+  const [typeFilter, setTypeFilter] = useQueryState(
+    'type',
+    parseAsString.withDefault('')
+  );
+
+  const typesQuery = useQuery(trpc.group.types.queryOptions({ projectId }));
+
+  const groupsQuery = useQuery(
+    trpc.group.list.queryOptions(
+      {
+        projectId,
+        search: debouncedSearch || undefined,
+        type: typeFilter || undefined,
+        take: 100,
+      },
+      { placeholderData: keepPreviousData }
+    )
+  );
+
+  const groups = groupsQuery.data?.data ?? [];
+  const types = typesQuery.data ?? [];
+
+  return (
+    <PageContainer>
+      <PageHeader
+        description="Groups represent companies, teams, or other entities that events belong to."
+        title="Groups"
+      />
+
+      <div className="mb-6 flex flex-wrap gap-3">
+        <Input
+          className="w-64"
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search groups..."
+          value={search}
+        />
+        {types.length > 0 && (
+          <Select
+            onValueChange={(v) => setTypeFilter(v === 'all' ? '' : v)}
+            value={typeFilter || 'all'}
+          >
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder="All types" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All types</SelectItem>
+              {types.map((t) => (
+                <SelectItem key={t} value={t}>
+                  {t}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+
+      {groups.length === 0 ? (
+        <div className="flex flex-col items-center justify-center gap-3 py-24 text-muted-foreground">
+          <Building2Icon className="size-10 opacity-30" />
+          <p className="text-sm">No groups found</p>
+        </div>
+      ) : (
+        <div className="card overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b bg-def-100">
+                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+                  Name
+                </th>
+                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+                  ID
+                </th>
+                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+                  Type
+                </th>
+                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
+                  Created
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {groups.map((group) => (
+                <tr
+                  className="border-b transition-colors last:border-0 hover:bg-def-100"
+                  key={`${group.projectId}-${group.id}`}
+                >
+                  <td className="px-4 py-3">
+                    <Link
+                      className="font-medium hover:underline"
+                      params={{ organizationId, projectId, groupId: group.id }}
+                      to="/$organizationId/$projectId/groups/$groupId"
+                    >
+                      {group.name}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3 font-mono text-muted-foreground text-xs">
+                    {group.id}
+                  </td>
+                  <td className="px-4 py-3">
+                    <Badge variant="outline">{group.type}</Badge>
+                  </td>
+                  <td className="px-4 py-3 text-muted-foreground">
+                    {formatDateTime(new Date(group.createdAt))}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </PageContainer>
+  );
+}
--- a/apps/start/src/routes/_app.$organizationId.$projectId.groups_.$groupId.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId.groups_.$groupId.tsx
@@ -0,0 +1,244 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { Building2Icon, UsersIcon } from 'lucide-react';
+import FullPageLoadingState from '@/components/full-page-loading-state';
+import { OverviewMetricCard } from '@/components/overview/overview-metric-card';
+import { WidgetHead, WidgetTitle } from '@/components/overview/overview-widget';
+import { PageContainer } from '@/components/page-container';
+import { PageHeader } from '@/components/page-header';
+import { ProfileActivity } from '@/components/profiles/profile-activity';
+import { Badge } from '@/components/ui/badge';
+import { KeyValueGrid } from '@/components/ui/key-value-grid';
+import { Widget, WidgetBody } from '@/components/widget';
+import { useTRPC } from '@/integrations/trpc/react';
+import { formatDateTime } from '@/utils/date';
+import { createProjectTitle } from '@/utils/title';
+
+export const Route = createFileRoute(
+  '/_app/$organizationId/$projectId/groups_/$groupId'
+)({
+  component: Component,
+  loader: async ({ context, params }) => {
+    await Promise.all([
+      context.queryClient.prefetchQuery(
+        context.trpc.group.byId.queryOptions({
+          id: params.groupId,
+          projectId: params.projectId,
+        })
+      ),
+      context.queryClient.prefetchQuery(
+        context.trpc.group.metrics.queryOptions({
+          id: params.groupId,
+          projectId: params.projectId,
+        })
+      ),
+      context.queryClient.prefetchQuery(
+        context.trpc.group.activity.queryOptions({
+          id: params.groupId,
+          projectId: params.projectId,
+        })
+      ),
+      context.queryClient.prefetchQuery(
+        context.trpc.group.members.queryOptions({
+          id: params.groupId,
+          projectId: params.projectId,
+        })
+      ),
+    ]);
+  },
+  pendingComponent: FullPageLoadingState,
+  head: () => ({
+    meta: [{ title: createProjectTitle('Group') }],
+  }),
+});
+
+function Component() {
+  const { projectId, organizationId, groupId } = Route.useParams();
+  const trpc = useTRPC();
+
+  const group = useSuspenseQuery(
+    trpc.group.byId.queryOptions({ id: groupId, projectId })
+  );
+
+  const metrics = useSuspenseQuery(
+    trpc.group.metrics.queryOptions({ id: groupId, projectId })
+  );
+
+  const activity = useSuspenseQuery(
+    trpc.group.activity.queryOptions({ id: groupId, projectId })
+  );
+
+  const members = useSuspenseQuery(
+    trpc.group.members.queryOptions({ id: groupId, projectId })
+  );
+
+  const g = group.data;
+  const m = metrics.data?.[0];
+
+  if (!g) {
+    return (
+      <PageContainer>
+        <div className="flex flex-col items-center justify-center gap-3 py-24 text-muted-foreground">
+          <Building2Icon className="size-10 opacity-30" />
+          <p className="text-sm">Group not found</p>
+        </div>
+      </PageContainer>
+    );
+  }
+
+  const properties = g.properties as Record<string, unknown>;
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title={
+          <div className="row min-w-0 items-center gap-3">
+            <Building2Icon className="size-6 shrink-0" />
+            <span className="truncate">{g.name}</span>
+            <Badge className="shrink-0" variant="outline">
+              {g.type}
+            </Badge>
+          </div>
+        }
+      >
+        <p className="font-mono text-muted-foreground text-sm">{g.id}</p>
+      </PageHeader>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        {/* Metrics */}
+        {m && (
+          <div className="col-span-1 md:col-span-2">
+            <div className="card grid grid-cols-2 overflow-hidden rounded-md md:grid-cols-4">
+              <OverviewMetricCard
+                data={[]}
+                id="totalEvents"
+                isLoading={false}
+                label="Total Events"
+                metric={{ current: m.totalEvents, previous: null }}
+                unit=""
+              />
+              <OverviewMetricCard
+                data={[]}
+                id="uniqueMembers"
+                isLoading={false}
+                label="Unique Members"
+                metric={{ current: m.uniqueProfiles, previous: null }}
+                unit=""
+              />
+              <OverviewMetricCard
+                data={[]}
+                id="firstSeen"
+                isLoading={false}
+                label="First Seen"
+                metric={{
+                  current: m.firstSeen ? new Date(m.firstSeen).getTime() : 0,
+                  previous: null,
+                }}
+                unit="timeAgo"
+              />
+              <OverviewMetricCard
+                data={[]}
+                id="lastSeen"
+                isLoading={false}
+                label="Last Seen"
+                metric={{
+                  current: m.lastSeen ? new Date(m.lastSeen).getTime() : 0,
+                  previous: null,
+                }}
+                unit="timeAgo"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Properties */}
+        <div className="col-span-1 md:col-span-2">
+          <Widget className="w-full">
+            <WidgetHead>
+              <div className="title">Group Information</div>
+            </WidgetHead>
+            <KeyValueGrid
+              className="border-0"
+              columns={3}
+              copyable
+              data={[
+                { name: 'id', value: g.id },
+                { name: 'name', value: g.name },
+                { name: 'type', value: g.type },
+                {
+                  name: 'createdAt',
+                  value: formatDateTime(new Date(g.createdAt)),
+                },
+                ...Object.entries(properties)
+                  .filter(([, v]) => v !== undefined && v !== '')
+                  .map(([k, v]) => ({
+                    name: k,
+                    value: String(v),
+                  })),
+              ]}
+            />
+          </Widget>
+        </div>
+
+        {/* Activity heatmap */}
+        <div className="col-span-1">
+          <ProfileActivity data={activity.data} />
+        </div>
+
+        {/* Members */}
+        <div className="col-span-1">
+          <Widget className="w-full">
+            <WidgetHead>
+              <WidgetTitle icon={UsersIcon}>Members</WidgetTitle>
+            </WidgetHead>
+            <WidgetBody>
+              {members.data.length === 0 ? (
+                <p className="py-4 text-center text-muted-foreground text-sm">
+                  No members found
+                </p>
+              ) : (
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="py-2 text-left font-medium text-muted-foreground">
+                        Profile
+                      </th>
+                      <th className="py-2 text-right font-medium text-muted-foreground">
+                        Events
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {members.data.map((member) => (
+                      <tr
+                        className="border-b last:border-0"
+                        key={member.profileId}
+                      >
+                        <td className="py-2">
+                          <Link
+                            className="font-mono text-xs hover:underline"
+                            params={{
+                              organizationId,
+                              projectId,
+                              profileId: member.profileId,
+                            }}
+                            to="/$organizationId/$projectId/profiles/$profileId"
+                          >
+                            {member.profileId}
+                          </Link>
+                        </td>
+                        <td className="py-2 text-right text-muted-foreground">
+                          {member.eventCount}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </WidgetBody>
+          </Widget>
+        </div>
+      </div>
+    </PageContainer>
+  );
+}
--- a/apps/start/src/utils/title.ts
+++ b/apps/start/src/utils/title.ts
@@ -10,7 +10,7 @@ const BASE_TITLE = 'OpenPanel.dev';
 export function createTitle(
  pageTitle: string,
  section?: string,
-  baseTitle = BASE_TITLE,
+  baseTitle = BASE_TITLE
 ): string {
  const parts = [pageTitle];
  if (section) {
@@ -25,7 +25,7 @@ export function createTitle(
 */
 export function createOrganizationTitle(
  pageTitle: string,
-  organizationName?: string,
+  organizationName?: string
 ): string {
  if (organizationName) {
    return createTitle(pageTitle, organizationName);
@@ -39,7 +39,7 @@ export function createOrganizationTitle(
 export function createProjectTitle(
  pageTitle: string,
  projectName?: string,
-  organizationName?: string,
+  organizationName?: string
 ): string {
  const parts = [pageTitle];
  if (projectName) {
@@ -59,7 +59,7 @@ export function createEntityTitle(
  entityName: string,
  entityType: string,
  projectName?: string,
-  organizationName?: string,
+  organizationName?: string
 ): string {
  const parts = [entityName, entityType];
  if (projectName) {
@@ -95,6 +95,9 @@ export const PAGE_TITLES = {
  PROFILES: 'Profiles',
  PROFILE_EVENTS: 'Profile events',
  PROFILE_DETAILS: 'Profile details',
+  // Groups
+  GROUPS: 'Groups',
+  GROUP_DETAILS: 'Group details',

  // Sub-sections
  CONVERSIONS: 'Conversions',