Breakdown report.

src/app/(main)/websites/[websiteId]/reports/breakdown/BreakdownPage.tsx

@@ -0,0 +1,97 @@
+'use client';
+import { useState } from 'react';
+import {
+  List,
+  ListItem,
+  Button,
+  Column,
+  Box,
+  Grid,
+  Text,
+  Icon,
+  Popover,
+  DialogTrigger,
+} from '@umami/react-zen';
+import { useDateRange, useMessages, useFields } from '@/components/hooks';
+import { SquarePlus, Chevron } from '@/components/icons';
+import { Panel } from '@/components/common/Panel';
+import { Breakdown } from './Breakdown';
+import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+
+export function BreakdownPage({ websiteId }: { websiteId: string }) {
+  const {
+    dateRange: { startDate, endDate },
+  } = useDateRange(websiteId);
+  const [fields, setFields] = useState([]);
+
+  return (
+    <Column gap>
+      <WebsiteControls websiteId={websiteId} />
+      <Box>
+        <FieldsButton value={fields} onChange={setFields} />
+      </Box>
+      <Panel height="900px" overflow="auto" allowFullscreen>
+        <Breakdown
+          websiteId={websiteId}
+          startDate={startDate}
+          endDate={endDate}
+          parameters={{ fields }}
+        />
+      </Panel>
+    </Column>
+  );
+}
+
+const FieldsButton = ({ value, onChange }) => {
+  const [selected, setSelected] = useState(value);
+  const [isOpen, setIsOpen] = useState(false);
+  const { formatMessage, labels } = useMessages();
+  const { fields } = useFields();
+
+  const handleChange = value => {
+    setSelected(value);
+  };
+
+  const handleApply = () => {
+    setIsOpen(false);
+    onChange?.(selected);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setSelected(value);
+  };
+
+  return (
+    <DialogTrigger>
+      <Button variant="quiet" onPress={() => setIsOpen(!isOpen)}>
+        <Icon>
+          <SquarePlus />
+        </Icon>
+        <Text>Fields</Text>
+        <Icon rotate={90}>
+          <Chevron />
+        </Icon>
+      </Button>
+      <Popover placement="bottom start" isOpen={isOpen}>
+        <Column width="300px" padding="2" border borderRadius shadow="3" backgroundColor gap>
+          <List value={selected} onChange={handleChange} selectionMode="multiple">
+            {fields.map(({ name, label }) => {
+              return (
+                <ListItem key={name} id={name}>
+                  {label}
+                </ListItem>
+              );
+            })}
+          </List>
+          <Grid columns="1fr 1fr" gap>
+            <Button onPress={handleClose}>{formatMessage(labels.cancel)}</Button>
+            <Button onPress={handleApply} variant="primary">
+              {formatMessage(labels.apply)}
+            </Button>
+          </Grid>
+        </Column>
+      </Popover>
+    </DialogTrigger>
+  );
+};