diff --git a/src/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm.tsx b/src/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm.tsx index 28e33682a..fbad47491 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm.tsx @@ -1,6 +1,6 @@ -import { Button, Column, Grid, List, ListItem } from '@umami/react-zen'; +import { Button, Column, Grid, List, ListItem, ListSection } from '@umami/react-zen'; import { useState } from 'react'; -import { useFields, useMessages } from '@/components/hooks'; +import { type FieldGroup, useFields, useMessages } from '@/components/hooks'; export function FieldSelectForm({ selectedFields = [], @@ -13,7 +13,7 @@ export function FieldSelectForm({ }) { const [selected, setSelected] = useState(selectedFields); const { formatMessage, labels } = useMessages(); - const { fields } = useFields(); + const { fields, groupLabels } = useFields(); const handleChange = (value: string[]) => { setSelected(value); @@ -24,17 +24,38 @@ export function FieldSelectForm({ onClose(); }; + const groupedFields = fields + .filter(field => field.name !== 'event') + .reduce( + (acc, field) => { + const group = field.group; + if (!acc[group]) { + acc[group] = []; + } + acc[group].push(field); + return acc; + }, + {} as Record, + ); + return ( - - {fields.map(({ name, label }) => { - return ( - - {label} - - ); - })} - + + + {groupLabels.map(({ key: groupKey, label }) => { + const groupFields = groupedFields[groupKey]; + return ( + + {groupFields.map(field => ( + + {field.filterLabel} + + ))} + + ); + })} + +