Support event type filtering.

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

@@ -14,7 +14,7 @@ export function EventsDataTable({
 }) {
   const { formatMessage, labels } = useMessages();
   const [view, setView] = useState('all');
-  const query = useWebsiteEventsQuery(websiteId);
+  const query = useWebsiteEventsQuery(websiteId, { view });
 
   const buttons = [
     {

src/components/common/DataGrid.tsx

@@ -16,6 +16,7 @@ export interface DataGridProps {
   allowPaging?: boolean;
   autoFocus?: boolean;
   renderActions?: () => ReactNode;
+  renderEmpty?: () => ReactNode;
   children: ReactNode | ((data: any) => ReactNode);
 }
 
@@ -26,12 +27,13 @@ export function DataGrid({
   allowPaging = true,
   autoFocus,
   renderActions,
+  renderEmpty = () => <Empty />,
   children,
 }: DataGridProps) {
   const { formatMessage, labels } = useMessages();
   const { data, error, isLoading, isFetching } = query;
   const { router, updateParams, query: queryParams } = useNavigation();
-  const [search, setSearch] = useState(queryParams?.saerch || data?.search || '');
+  const [search, setSearch] = useState(queryParams?.search || data?.search || '');
 
   const handleSearch = (value: string) => {
     if (value !== search) {
@@ -47,13 +49,9 @@ export function DataGrid({
     [search],
   );
 
-  if (data?.data?.length === 0) {
-    return <Empty />;
-  }
-
   return (
     <Column gap="4" minHeight="300px">
-      {allowSearch && (data || search) && (
+      {allowSearch && (
         <Row alignItems="center" justifyContent="space-between">
           <SearchField
             value={search}
@@ -66,7 +64,13 @@ export function DataGrid({
           {renderActions?.()}
         </Row>
       )}
-      <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
+      <LoadingPanel
+        data={data}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        error={error}
+        renderEmpty={renderEmpty}
+      >
         {data && (
           <>
             <Column>{typeof children === 'function' ? children(data) : children}</Column>

src/components/hooks/queries/useWebsiteEventsQuery.ts

@@ -4,6 +4,11 @@ import { useDateParameters } from '../useDateParameters';
 import { usePagedQuery } from '../usePagedQuery';
 import { ReactQueryOptions } from '@/lib/types';
 
+const EVENT_TYPES = {
+  views: 1,
+  events: 2,
+};
+
 export function useWebsiteEventsQuery(
   websiteId: string,
   params?: Record<string, any>,
@@ -20,7 +25,7 @@ export function useWebsiteEventsQuery(
         ...date,
         ...filters,
         ...pageParams,
-        ...params,
+        eventType: EVENT_TYPES[params.view],
       }),
     enabled: !!websiteId,
     ...options,

src/components/input/TeamsButton.tsx

@@ -37,18 +37,18 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
   return (
     <MenuTrigger>
       <Pressable>
-        <SidebarItem
-          label={teamId ? team?.name : user.username}
-          icon={teamId ? <Users /> : <User />}
-        >
-          <Row alignItems="center" justifyContent="space-between" width="100%" gap>
+        <Row alignItems="center" justifyContent="space-between" width="100%" gap>
+          <SidebarItem
+            label={teamId ? team?.name : user.username}
+            icon={teamId ? <Users /> : <User />}
+          >
             {showText && (
               <Icon rotate={90} size="sm">
                 <Chevron />
               </Icon>
             )}
-          </Row>
-        </SidebarItem>
+          </SidebarItem>
+        </Row>
       </Pressable>
       <Popover placement="bottom start">
         <Box minWidth="300px">
@@ -60,20 +60,24 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
           >
             <MenuSection title={formatMessage(labels.myAccount)}>
               <MenuItem id={user.id}>
-                <Icon>
-                  <User />
-                </Icon>
-                <Text wrap="nowrap">{user.username}</Text>
+                <Row alignItems="center" gap>
+                  <Icon>
+                    <User />
+                  </Icon>
+                  <Text wrap="nowrap">{user.username}</Text>
+                </Row>
               </MenuItem>
             </MenuSection>
             <MenuSeparator />
             <MenuSection title={formatMessage(labels.teams)}>
               {data?.data?.map(({ id, name }) => (
                 <MenuItem key={id} id={id}>
-                  <Icon size="sm">
-                    <Users />
-                  </Icon>
-                  <Text wrap="nowrap">{name}</Text>
+                  <Row alignItems="center" gap>
+                    <Icon size="sm">
+                      <Users />
+                    </Icon>
+                    <Text wrap="nowrap">{name}</Text>
+                  </Row>
                 </MenuItem>
               ))}
             </MenuSection>

src/components/metrics/EventsTable.tsx

@@ -8,10 +8,6 @@ export interface EventsTableProps extends MetricsTableProps {
 export function EventsTable({ onLabelClick, ...props }: EventsTableProps) {
   const { formatMessage, labels } = useMessages();
 
-  const handleDataLoad = (data: any) => {
-    props.onDataLoad?.(data);
-  };
-
   const renderLabel = ({ x: label }) => {
     if (onLabelClick) {
       return (
@@ -30,7 +26,6 @@ export function EventsTable({ onLabelClick, ...props }: EventsTableProps) {
       title={formatMessage(labels.events)}
       type="event"
       metric={formatMessage(labels.actions)}
-      onDataLoad={handleDataLoad}
       renderLabel={renderLabel}
       allowDownload={false}
     />

src/lib/constants.ts

@@ -71,6 +71,7 @@ export const FILTER_COLUMNS = {
   language: 'language',
   event: 'event_name',
   tag: 'tag',
+  eventType: 'event_type',
 };
 
 export const COLLECTION_TYPE = {

src/lib/schema.ts

@@ -37,6 +37,7 @@ export const filterParams = {
   event: z.string().optional(),
   segment: z.string().optional(),
   cohort: z.string().optional(),
+  eventType: z.coerce.number().int().positive().optional(),
 };
 
 export const searchParams = {