Fixed field parameters.

src/app/(main)/Nav.tsx

@@ -45,13 +45,13 @@ export function Nav(props: any) {
       <SideNavSection>
         {links.map(({ href, label, icon }) => {
           return (
-            <Link key={href} href={href}>
+            <Link key={href} href={href} role="button">
               <SideNavItem label={label} icon={icon} isSelected={pathname.startsWith(href)} />
             </Link>
           );
         })}
       </SideNavSection>
-      <SideNavSection alignSelf="end"></SideNavSection>
+      <SideNavSection alignSelf="end">{``}</SideNavSection>
     </SideNav>
   );
 }

src/app/(main)/reports/[reportId]/FieldParameters.tsx

@@ -11,9 +11,10 @@ export function FieldParameters() {
   const { fields } = parameters || {};
   const { fields: fieldOptions } = useFields();
 
-  const handleAdd = (value: { name: any }) => {
-    if (!fields.find(({ name }) => name === value.name)) {
-      updateReport({ parameters: { fields: fields.concat(value) } });
+  const handleAdd = (value: string) => {
+    if (!fields.find(({ name }) => name === value)) {
+      const field = fieldOptions.find(({ name }) => name === value);
+      updateReport({ parameters: { fields: fields.concat(field) } });
     }
   };
 
@@ -21,30 +22,24 @@ export function FieldParameters() {
     updateReport({ parameters: { fields: fields.filter(f => f.name !== name) } });
   };
 
-  const AddButton = () => {
-    return (
-      <MenuTrigger>
-        <Button variant="quiet">
-          <Icon size="sm">
-            <Icons.Plus />
-          </Icon>
-        </Button>
-        <Popover placement="right top">
-          <FieldSelectForm
-            fields={fieldOptions.filter(({ name }) => !fields.find(f => f.name === name))}
-            onSelect={handleAdd}
-            showType={false}
-          />
-        </Popover>
-      </MenuTrigger>
-    );
-  };
-
   return (
     <Column gap="3">
       <Row justifyContent="space-between">
         <Label>{formatMessage(labels.fields)}</Label>
-        <AddButton />
+        <MenuTrigger>
+          <Button variant="quiet">
+            <Icon size="sm">
+              <Icons.Plus />
+            </Icon>
+          </Button>
+          <Popover placement="right top">
+            <FieldSelectForm
+              fields={fieldOptions.filter(({ name }) => !fields.find(f => f.name === name))}
+              onSelect={handleAdd}
+              showType={false}
+            />
+          </Popover>
+        </MenuTrigger>
       </Row>
       <ParameterList>
         {fields.map(({ name }) => {

src/app/(main)/reports/[reportId]/FieldSelectForm.tsx

@@ -1,10 +1,9 @@
-import { Menu, MenuItem, Text, MenuSection } from '@umami/react-zen';
+import { Menu, MenuItem, Text, MenuSection, Row } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import { Key } from 'react';
 
 export interface FieldSelectFormProps {
   fields?: any[];
-  onSelect?: (key: any) => void;
+  onSelect?: (value: any) => void;
   showType?: boolean;
 }
 
@@ -12,13 +11,15 @@ export function FieldSelectForm({ fields = [], onSelect, showType = true }: Fiel
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Menu onSelectionChange={key => onSelect(fields[key as any])}>
+    <Menu>
       <MenuSection title={formatMessage(labels.fields)}>
-        {fields.map(({ name, label, type }: any, index: Key) => {
+        {fields.map(({ name, label, type }) => {
           return (
-            <MenuItem key={index}>
-              <Text>{label || name}</Text>
-              {showType && type && <Text color="muted">{type}</Text>}
+            <MenuItem key={name} id={name} onAction={() => onSelect(name)}>
+              <Row alignItems="center" justifyContent="space-between">
+                <Text>{label || name}</Text>
+                {showType && type && <Text color="muted">{type}</Text>}
+              </Row>
             </MenuItem>
           );
         })}

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -8,8 +8,8 @@ import {
   Icon,
   Popover,
   MenuTrigger,
-  Focusable,
   Text,
+  Pressable,
 } from '@umami/react-zen';
 import { FilterSelectForm } from '../[reportId]/FilterSelectForm';
 import { ParameterList } from '../[reportId]/ParameterList';
@@ -48,32 +48,26 @@ export function FilterParameters() {
     close();
   };
 
-  const AddButton = () => {
-    return (
-      <MenuTrigger>
-        <Button variant="quiet">
-          <Icon size="sm">
-            <Icons.Plus />
-          </Icon>
-        </Button>
-        <Popover placement="right top">
-          <FilterSelectForm
-            websiteId={websiteId}
-            fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
-            startDate={dateRange?.startDate}
-            endDate={dateRange?.endDate}
-            onChange={handleAdd}
-          />
-        </Popover>
-      </MenuTrigger>
-    );
-  };
-
   return (
     <Column gap="3">
       <Row justifyContent="space-between">
         <Label>{formatMessage(labels.filters)}</Label>
-        <AddButton />
+        <MenuTrigger>
+          <Button variant="quiet">
+            <Icon size="sm">
+              <Icons.Plus />
+            </Icon>
+          </Button>
+          <Popover placement="right top">
+            <FilterSelectForm
+              websiteId={websiteId}
+              fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
+              startDate={dateRange?.startDate}
+              endDate={dateRange?.endDate}
+              onChange={handleAdd}
+            />
+          </Popover>
+        </MenuTrigger>
       </Row>
       <ParameterList>
         {filters.map(
@@ -117,15 +111,15 @@ const FilterParameter = ({
 
   return (
     <MenuTrigger>
-      <Focusable>
-        <Row gap="3" alignItems="center">
+      <Pressable>
+        <Row role="button" gap="3" alignItems="center">
           <Text>{label}</Text>
           <Text size="2" transform="uppercase">
             {operatorLabels[operator]}
           </Text>
           <Text weight="bold">{value}</Text>
         </Row>
-      </Focusable>
+      </Pressable>
       <Popover placement="right top">
         {(close: any) => (
           <FieldFilterEditForm

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -12,7 +12,7 @@ export function ParameterList({ children }: ParameterListProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column>
+    <Column gap="3">
       {!children && <Empty message={formatMessage(labels.none)} />}
       {children}
     </Column>
@@ -40,6 +40,7 @@ const Item = ({
       border
       borderRadius="2"
       paddingLeft="3"
+      shadow="2"
     >
       {icon && <Icon>{icon}</Icon>}
       <Text>{children}</Text>

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

@@ -1,4 +1,4 @@
-import { Button, Icon, Icons, Box, MenuTrigger, Popover, Text } from '@umami/react-zen';
+import { Button, Icon, Icons, MenuTrigger, Popover, Text } from '@umami/react-zen';
 import { FilterSelectForm } from '@/app/(main)/reports/[reportId]/FilterSelectForm';
 import { useFields, useMessages, useNavigation, useDateRange } from '@/components/hooks';
 import { OPERATOR_PREFIXES } from '@/lib/constants';
@@ -34,21 +34,19 @@ export function WebsiteFilterButton({
         </Icon>
         {showText && <Text>{formatMessage(labels.filter)}</Text>}
       </Button>
-      <Popover placement="bottom end">
+      <Popover placement="bottom start">
         {({ close }: any) => {
           return (
-            <Box padding="3" backgroundColor="1">
-              <FilterSelectForm
-                websiteId={websiteId}
-                fields={fields}
-                startDate={startDate}
-                endDate={endDate}
-                onChange={value => {
-                  handleAddFilter(value);
-                  close();
-                }}
-              />
-            </Box>
+            <FilterSelectForm
+              websiteId={websiteId}
+              fields={fields}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={value => {
+                handleAddFilter(value);
+                close();
+              }}
+            />
           );
         }}
       </Popover>

src/components/common/Panel.tsx

@@ -2,5 +2,15 @@ import { Box } from '@umami/react-zen';
 import type { BoxProps } from '@umami/react-zen/Box';
 
 export function Panel(props: BoxProps) {
-  return <Box padding="6" border borderRadius="3" backgroundColor="solid" shadow="4" {...props} />;
+  return (
+    <Box
+      padding="6"
+      border
+      borderRadius="3"
+      backgroundColor
+      shadow="4"
+      position="relative"
+      {...props}
+    />
+  );
 }

src/components/input/DateFilter.tsx

@@ -1,4 +1,4 @@
-import { useState, Key } from 'react';
+import { useState, Key, Fragment } from 'react';
 import { Icon, Modal, Select, Text, Row, ListItem, ListSeparator, Dialog } from '@umami/react-zen';
 import { endOfYear, isSameDay } from 'date-fns';
 import { DatePickerForm } from '@/components/metrics/DatePickerForm';
@@ -101,12 +101,12 @@ export function DateFilter({
       >
         {options.map(({ label, value, divider }: any) => {
           return (
-            <>
+            <Fragment key={label}>
               {divider && <ListSeparator />}
-              <ListItem key={value} id={value}>
+              <ListItem key={label} id={value}>
                 {label}
               </ListItem>
-            </>
+            </Fragment>
           );
         })}
       </Select>

src/components/metrics/MetricCard.module.css

@@ -1,6 +1,5 @@
 .card {
   border-right: 1px solid var(--border-color);
-  padding: 0 50px;
 }
 
 .card:last-child {

src/components/metrics/MetricCard.tsx

@@ -34,8 +34,12 @@ export const MetricCard = ({
   const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } });
 
   return (
-    <Column className={styles.card} justifyContent="center">
-      {showLabel && <Text weight="bold">{label}</Text>}
+    <Column className={styles.card} justifyContent="center" paddingX="8">
+      {showLabel && (
+        <Text weight="bold" wrap="nowrap">
+          {label}
+        </Text>
+      )}
       <Text size="8" weight="bold" wrap="nowrap">
         <AnimatedDiv title={value?.toString()}>{props?.x?.to(x => formatValue(x))}</AnimatedDiv>
       </Text>