Converted UTM report to a view.

src/components/common/FilterRecord.tsx

@@ -38,7 +38,7 @@ export function FilterRecord({
         <Row gap alignItems="center">
           <Select
             items={operators.filter(({ type }) => type === 'string')}
-            selectedKey={operator}
+            value={operator}
             onSelectionChange={value => onSelect?.(name, value)}
           >
             {({ name, label }: any) => {

src/components/hooks/index.ts

@@ -21,6 +21,7 @@ export * from './queries/useTeamWebsitesQuery';
 export * from './queries/useTeamMembersQuery';
 export * from './queries/useUserQuery';
 export * from './queries/useUsersQuery';
+export * from './queries/useUTMQuery';
 export * from './queries/useWebsiteQuery';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEventsQuery';

src/components/hooks/queries/useUTMQuery.ts

@@ -0,0 +1,20 @@
+import { useApi } from '../useApi';
+import { useFilterParams } from '../useFilterParams';
+import { UseQueryOptions } from '@tanstack/react-query';
+
+export function useUTMQuery(
+  websiteId: string,
+  queryParams?: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
+  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
+) {
+  const { get, useQuery } = useApi();
+  const filterParams = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['utm', websiteId, { ...filterParams, ...queryParams }],
+    queryFn: () =>
+      get(`/websites/${websiteId}/utm`, { websiteId, ...filterParams, ...queryParams }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}

src/components/input/FilterBar.tsx

@@ -23,22 +23,8 @@ export function FilterBar() {
   }
 
   return (
-    <Row
-      theme="dark"
-      backgroundColor="1"
-      gap
-      alignItems="center"
-      justifyContent="space-between"
-      paddingY="2"
-      paddingLeft="3"
-      paddingRight="2"
-      border
-      borderRadius="2"
-    >
-      <Row alignItems="center" gap="3" wrap="wrap" paddingX="2">
-        <Text color="11" weight="bold">
-          {formatMessage(labels.filters)}
-        </Text>
+    <Row gap alignItems="center" justifyContent="space-between" paddingY="3">
+      <Row alignItems="center" gap="3" wrap="wrap">
         {Object.keys(filters).map(key => {
           const filter = filters[key];
           const { name, label, operator, value } = filter;
@@ -51,9 +37,9 @@ export function FilterBar() {
               padding
               backgroundColor
               borderRadius
-              shadow="1"
               alignItems="center"
               justifyContent="space-between"
+              theme="dark"
             >
               <Row alignItems="center" gap="4">
                 <Row alignItems="center" gap="2">

src/components/input/WebsiteDateFilter.tsx

@@ -95,7 +95,7 @@ export function WebsiteDateFilter({
       {!isAllTime && showCompare && (
         <TooltipTrigger delay={0}>
           <Button variant="quiet" onPress={handleCompare}>
-            <Icon fillColor="currentColor">{compare ? <Icons.Close /> : <Icons.Compare />}</Icon>
+            <Icon fillColor>{compare ? <Icons.Close /> : <Icons.Compare />}</Icon>
           </Button>
           <Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
         </TooltipTrigger>

src/components/messages.ts

@@ -318,6 +318,7 @@ export const labels = defineMessages({
   apply: { id: 'label.apply', defaultMessage: 'Apply' },
   links: { id: 'label.links', defaultMessage: 'Links' },
   pixels: { id: 'label.pixels', defaultMessage: 'Pixels' },
+  addBoard: { id: 'label.add-board', defaultMessage: 'Add board' },
 });
 
 export const messages = defineMessages({

src/components/metrics/ActiveUsers.tsx

@@ -28,7 +28,9 @@ export function ActiveUsers({
 
   return (
     <StatusLight variant="success">
-      <Text size="2">{formatMessage(messages.activeUsers, { x: count })}</Text>
+      <Text size="2" weight="bold">
+        {formatMessage(messages.activeUsers, { x: count })}
+      </Text>
     </StatusLight>
   );
 }