Report updates.

components/input/LanguageButton.js

@@ -10,7 +10,8 @@ export function LanguageButton() {
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
   function handleSelect(value) {
-    saveLocale(value);
+    //saveLocale(value);
+    console.log('WTFFFF');
   }
 
   return (

components/layout/NavBar.js

@@ -18,9 +18,8 @@ export function NavBar() {
 
   const links = [
     { label: formatMessage(labels.dashboard), url: '/dashboard' },
-    { label: formatMessage(labels.reports), url: '/reports' },
     { label: formatMessage(labels.realtime), url: '/realtime' },
-    { label: formatMessage(labels.reports), url: '/reports/funnel' },
+    { label: formatMessage(labels.reports), url: '/reports' },
     !cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
   ].filter(n => n);
 

components/layout/PageHeader.js

@@ -1,9 +1,10 @@
+import classNames from 'classnames';
 import React from 'react';
 import styles from './PageHeader.module.css';
 
-export function PageHeader({ title, children }) {
+export function PageHeader({ title, children, className }) {
   return (
-    <div className={styles.header}>
+    <div className={classNames(styles.header, className)}>
       <div className={styles.title}>{title}</div>
       <div className={styles.actions}>{children}</div>
     </div>

components/messages.js

@@ -80,7 +80,8 @@ export const labels = defineMessages({
   countries: { id: 'label.countries', defaultMessage: 'Countries' },
   languages: { id: 'label.languages', defaultMessage: 'Languages' },
   events: { id: 'label.events', defaultMessage: 'Events' },
-  query: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
+  query: { id: 'label.query', defaultMessage: 'Query' },
+  queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
   back: { id: 'label.back', defaultMessage: 'Back' },
   visitors: { id: 'label.visitors', defaultMessage: 'Visitors' },
   filterCombined: { id: 'label.filter-combined', defaultMessage: 'Combined' },
@@ -121,6 +122,8 @@ export const labels = defineMessages({
   regions: { id: 'label.regions', defaultMessage: 'Regions' },
   reports: { id: 'label.reports', defaultMessage: 'Reports' },
   eventData: { id: 'label.event-data', defaultMessage: 'Event data' },
+  funnel: { id: 'label.funnel', defaultMessage: 'Funnel' },
+  urls: { id: 'label.urls', defaultMessage: 'URLs' },
 });
 
 export const messages = defineMessages({

components/pages/reports/EventDataReport.js

@@ -1,33 +0,0 @@
-import { useState } from 'react';
-import { Form, FormRow, FormInput, TextField } from 'react-basics';
-import AppLayout from 'components/layout/AppLayout';
-import Report from './Report';
-import ReportHeader from './ReportHeader';
-import useMessages from 'hooks/useMessages';
-import Nodes from 'assets/nodes.svg';
-import styles from './reports.module.css';
-
-export default function EventDataReport({ websiteId, data }) {
-  const [values, setValues] = useState({ query: '' });
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <AppLayout>
-      <Report>
-        <ReportHeader title={formatMessage(labels.eventData)} icon={<Nodes />} />
-        <div className={styles.container}>
-          <div className={styles.menu}>
-            <Form>
-              <FormRow label="Properties">
-                <FormInput name="query">
-                  <TextField value={values.query} />
-                </FormInput>
-              </FormRow>
-            </Form>
-          </div>
-          <div className={styles.content}></div>
-        </div>
-      </Report>
-    </AppLayout>
-  );
-}

components/pages/reports/Report.js

@@ -1,5 +1,12 @@
 import Page from 'components/layout/Page';
+import styles from './reports.module.css';
 
-export default function Report({ children, ...props }) {
-  return <Page {...props}>{children}</Page>;
+export function Report({ children, ...props }) {
+  return (
+    <Page {...props} className={styles.container}>
+      {children}
+    </Page>
+  );
 }
+
+export default Report;

components/pages/reports/ReportBody.js

@@ -0,0 +1,7 @@
+import styles from './reports.module.css';
+
+export function ReportBody({ children }) {
+  return <div className={styles.body}>{children}</div>;
+}
+
+export default ReportBody;

components/pages/reports/ReportForm.js

@@ -1,28 +0,0 @@
-import useMessages from 'hooks/useMessages';
-import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
-
-export function FunnelForm() {
-  const { formatMessage, labels } = useMessages();
-
-  const handleSubmit = () => {};
-
-  return (
-    <>
-      <Form onSubmit={handleSubmit}>
-        <FormRow label={formatMessage(labels.website)}>
-          <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
-            <TextField />
-          </FormInput>
-        </FormRow>
-
-        <FormButtons>
-          <SubmitButton variant="primary" disabled={false}>
-            Save
-          </SubmitButton>
-        </FormButtons>
-      </Form>
-    </>
-  );
-}
-
-export default FunnelForm;

components/pages/reports/ReportForm.module.css

@@ -1,19 +0,0 @@
-.filter {
-  min-width: 200px;
-}
-
-.hiddenInput {
-  visibility: hidden;
-  min-height: 0px;
-  max-height: 0px;
-}
-
-.hidden {
-  visibility: hidden;
-  min-height: 0px;
-  max-height: 0px;
-}
-
-.urlFormRow label {
-  min-width: 80px;
-}

components/pages/reports/ReportHeader.js

@@ -1,32 +1,50 @@
-import { useState } from 'react';
-import { Flexbox, Icon, Text } from 'react-basics';
+import { Flexbox, Icon, LoadingButton, Text, useToast } from 'react-basics';
 import WebsiteSelect from 'components/input/WebsiteSelect';
 import PageHeader from 'components/layout/PageHeader';
 import DateFilter from 'components/input/DateFilter';
 import { parseDateRange } from 'lib/date';
+import { updateReport } from 'store/reports';
+import { useMessages, useApi } from 'hooks';
+import styles from './reports.module.css';
 
-export default function ReportHeader({ title, icon }) {
-  const [websiteId, setWebsiteId] = useState();
-  const [dateRange, setDateRange] = useState({});
-  const { value, startDate, endDate } = dateRange;
+export function ReportHeader({ report, icon }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { toast, showToast } = useToast();
+  const { post, useMutation } = useApi();
+  const { mutate, isLoading } = useMutation(data => post(`/reports`, data));
 
-  const handleSelect = id => {
-    setWebsiteId(id);
+  const { id, websiteId, name, parameters } = report || {};
+  const { value, startDate, endDate } = parameters?.dateRange || {};
+
+  console.log('REPORT HEADER', report);
+
+  const handleSelect = websiteId => {
+    updateReport(id, { websiteId });
   };
 
-  const handleDateChange = value => setDateRange(parseDateRange(value));
+  const handleDateChange = value => {
+    updateReport(id, { parameters: { dateRange: { ...parseDateRange(value) } } });
+  };
+
+  const handleSave = async () => {
+    mutate(report, {
+      onSuccess: async () => {
+        showToast({ message: formatMessage(messages.saved), variant: 'success' });
+      },
+    });
+  };
 
   const Title = () => {
     return (
       <>
-        <Icon size="xl">{icon}</Icon>
-        <Text>{title}</Text>
+        <Icon size="lg">{icon}</Icon>
+        <Text>{name}</Text>
       </>
     );
   };
 
   return (
-    <PageHeader title={<Title />}>
+    <PageHeader title={<Title />} className={styles.header}>
       <Flexbox gap={20}>
         <DateFilter
           value={value}
@@ -36,7 +54,18 @@ export default function ReportHeader({ title, icon }) {
           showAllTime
         />
         <WebsiteSelect websiteId={websiteId} onSelect={handleSelect} />
+        <LoadingButton
+          variant="primary"
+          loading={isLoading}
+          disabled={!websiteId || !value}
+          onClick={handleSave}
+        >
+          {formatMessage(labels.save)}
+        </LoadingButton>
       </Flexbox>
+      {toast}
     </PageHeader>
   );
 }
+
+export default ReportHeader;

components/pages/reports/ReportList.js

@@ -5,7 +5,7 @@ import PageHeader from 'components/layout/PageHeader';
 import Funnel from 'assets/funnel.svg';
 import Nodes from 'assets/nodes.svg';
 import Lightbulb from 'assets/lightbulb.svg';
-import styles from './ReportsList.module.css';
+import styles from './ReportList.module.css';
 
 const reports = [
   {
@@ -28,7 +28,7 @@ const reports = [
   },
 ];
 
-function Report({ title, description, url, icon }) {
+function ReportItem({ title, description, url, icon }) {
   return (
     <div className={styles.report}>
       <div className={styles.title}>
@@ -50,17 +50,19 @@ function Report({ title, description, url, icon }) {
   );
 }
 
-export default function ReportsList() {
+export function ReportList() {
   return (
     <Page>
       <PageHeader title="Reports" />
       <div className={styles.reports}>
         {reports.map(({ title, description, url, icon }) => {
           return (
-            <Report key={title} icon={icon} title={title} description={description} url={url} />
+            <ReportItem key={title} icon={icon} title={title} description={description} url={url} />
           );
         })}
       </div>
     </Page>
   );
 }
+
+export default ReportList;

components/pages/reports/ReportMenu.js

@@ -0,0 +1,7 @@
+import styles from './reports.module.css';
+
+export function ReportMenu({ children }) {
+  return <div className={styles.menu}>{children}</div>;
+}
+
+export default ReportMenu;

components/pages/reports/event-data/EventDataReport.js

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { Form, FormRow, FormInput, TextField } from 'react-basics';
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import useMessages from 'hooks/useMessages';
+import Nodes from 'assets/nodes.svg';
+import styles from '../reports.module.css';
+
+export default function EventDataReport({ websiteId, data }) {
+  const [values, setValues] = useState({ query: '' });
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Report>
+      <ReportHeader title={formatMessage(labels.eventData)} icon={<Nodes />} />
+      <div className={styles.container}>
+        <div className={styles.menu}>
+          <Form>
+            <FormRow label="Properties">
+              <FormInput name="query">
+                <TextField value={values.query} />
+              </FormInput>
+            </FormRow>
+          </Form>
+        </div>
+        <div className={styles.content}></div>
+      </div>
+    </Report>
+  );
+}

components/pages/reports/funnel/FunnelForm.js

@@ -1,118 +0,0 @@
-import DateFilter from 'components/input/DateFilter';
-import WebsiteSelect from 'components/input/WebsiteSelect';
-import useMessages from 'hooks/useMessages';
-import { parseDateRange } from 'lib/date';
-import { useState } from 'react';
-import {
-  Button,
-  Form,
-  FormButtons,
-  FormInput,
-  FormRow,
-  SubmitButton,
-  TextField,
-} from 'react-basics';
-import styles from './FunnelForm.module.css';
-
-export function FunnelForm({ onSearch }) {
-  const { formatMessage, labels } = useMessages();
-  const [dateRange, setDateRange] = useState('');
-  const [startAt, setStartAt] = useState();
-  const [endAt, setEndAt] = useState();
-  const [urls, setUrls] = useState(['/', '/docs/getting-started', '/docs/intall']);
-  const [websiteId, setWebsiteId] = useState('');
-  const [window, setWindow] = useState(60);
-
-  const handleSubmit = async data => {
-    onSearch(data);
-  };
-
-  const handleDateChange = value => {
-    const { startDate, endDate } = parseDateRange(value);
-
-    setDateRange(value);
-    setStartAt(startDate.getTime());
-    setEndAt(endDate.getTime());
-  };
-
-  const handleAddUrl = () => setUrls([...urls, '']);
-
-  const handleRemoveUrl = i => {
-    const nextUrls = [...urls];
-    nextUrls.splice(i, 1);
-    setUrls(nextUrls);
-  };
-
-  const handleWindowChange = value => setWindow(value.target.value);
-
-  const handleUrlChange = (value, i) => {
-    const nextUrls = [...urls];
-
-    nextUrls[i] = value.target.value;
-    setUrls(nextUrls);
-  };
-
-  return (
-    <>
-      <Form
-        values={{
-          websiteId,
-          startAt,
-          endAt,
-          urls,
-          window,
-        }}
-        onSubmit={handleSubmit}
-      >
-        <FormRow label={formatMessage(labels.website)}>
-          <WebsiteSelect websiteId={websiteId} onSelect={value => setWebsiteId(value)} />
-          <FormInput name="websiteId" rules={{ required: formatMessage(labels.required) }}>
-            <TextField value={websiteId} className={styles.hiddenInput} />
-          </FormInput>
-        </FormRow>
-        <FormRow label="Date">
-          <DateFilter
-            className={styles.filter}
-            value={dateRange}
-            alignment="start"
-            onChange={handleDateChange}
-            isF
-          />
-          <FormInput
-            name="startAt"
-            className={styles.hiddenInput}
-            rules={{ required: formatMessage(labels.required) }}
-          >
-            <TextField value={startAt} />
-          </FormInput>
-          <FormInput name="endAt" rules={{ required: formatMessage(labels.required) }}>
-            <TextField value={endAt} className={styles.hiddenInput} />
-          </FormInput>
-        </FormRow>
-        <FormRow label="Window (minutes)">
-          <FormInput
-            name="window"
-            rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
-          >
-            <TextField value={window} onChange={handleWindowChange} />
-          </FormInput>
-        </FormRow>
-        <Button onClick={handleAddUrl}>Add URL</Button>
-        {urls.map((a, i) => (
-          <FormRow className={styles.urlFormRow} key={`url${i}`} label={`URL ${i + 1}`}>
-            <TextField value={urls[i]} onChange={value => handleUrlChange(value, i)} />
-            <Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
-          </FormRow>
-        ))}
-
-        <FormButtons>
-          <SubmitButton variant="primary" disabled={false}>
-            Query
-          </SubmitButton>
-        </FormButtons>
-      </Form>
-    </>
-  );
-}
-
-export default FunnelForm;

components/pages/reports/funnel/FunnelForm.module.css

@@ -1,13 +0,0 @@
-.filter {
-  min-width: 200px;
-}
-
-.hiddenInput {
-  visibility: hidden;
-  min-height: 0px;
-  max-height: 0px;
-}
-
-.urlFormRow label {
-  min-width: 80px;
-}

components/pages/reports/funnel/FunnelPage.js

@@ -1,36 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import Page from 'components/layout/Page';
-import PageHeader from 'components/layout/PageHeader';
-import ReportsLayout from 'components/layout/ReportsLayout';
-import useApi from 'hooks/useApi';
-import { useState } from 'react';
-import FunnelChart from './FunnelChart';
-import FunnelTable from './FunnelTable';
-import FunnelForm from './FunnelForm';
-
-export default function FunnelPage() {
-  const { post } = useApi();
-  const { mutate } = useMutation(data => post('/reports/funnel', data));
-  const [data, setData] = useState([{}]);
-  const [setFormData] = useState();
-
-  function handleOnSearch(data) {
-    setFormData(data);
-
-    mutate(data, {
-      onSuccess: async data => {
-        setData(data);
-      },
-    });
-  }
-
-  return (
-    <ReportsLayout filter={<FunnelForm onSearch={handleOnSearch} />} header={'test'}>
-      <Page>
-        <PageHeader title="Funnel Report"></PageHeader>
-        <FunnelChart data={data} />
-        <FunnelTable data={data} />
-      </Page>
-    </ReportsLayout>
-  );
-}

components/pages/reports/funnel/FunnelParameters.js

@@ -0,0 +1,67 @@
+import { useMessages } from 'hooks';
+import {
+  Icon,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  PopupTrigger,
+  Popup,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+import Icons from 'components/icons';
+import { updateReport } from 'store/reports';
+import { useRef } from 'react';
+import styles from './FunnelParameters.module.css';
+
+export function FunnelParameters({ report }) {
+  const { formatMessage, labels } = useMessages();
+  const ref = useRef(null);
+  const { id, websiteId, parameters, isLoading } = report || {};
+
+  const handleSubmit = values => {
+    console.log({ values });
+    updateReport(id, { parameters: values, isLoading: false });
+  };
+
+  console.log('PARAMETERS', parameters);
+
+  return (
+    <>
+      <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
+        <FormRow label="Window (minutes)">
+          <FormInput
+            name="window"
+            rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
+          >
+            <TextField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label={formatMessage(labels.urls)} action={<AddURLButton />}>
+          hi
+        </FormRow>
+        <FormButtons>
+          <SubmitButton variant="primary" disabled={!websiteId} loading={isLoading}>
+            {formatMessage(labels.query)}
+          </SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}
+
+function AddURLButton() {
+  return (
+    <PopupTrigger>
+      <Icon>
+        <Icons.Plus />
+      </Icon>
+      <Popup className={styles.popup} position="right" alignment="start">
+        HALLO
+      </Popup>
+    </PopupTrigger>
+  );
+}
+
+export default FunnelParameters;

components/pages/reports/funnel/FunnelParameters.module.css

@@ -0,0 +1,7 @@
+.popup {
+  background: var(--base50);
+  padding: 20px;
+  margin-left: 10px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+}

components/pages/reports/funnel/FunnelReport.js

@@ -0,0 +1,28 @@
+import FunnelChart from './FunnelChart';
+import FunnelTable from './FunnelTable';
+import FunnelParameters from './FunnelParameters';
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import Funnel from 'assets/funnel.svg';
+import { useReport } from 'hooks';
+
+export default function FunnelReport({ reportId }) {
+  const report = useReport(reportId);
+
+  console.log('REPORT', { report });
+
+  return (
+    <Report>
+      <ReportHeader icon={<Funnel />} report={report} />
+      <ReportMenu>
+        <FunnelParameters report={report} />
+      </ReportMenu>
+      <ReportBody>
+        <FunnelChart report={report} />
+        <FunnelTable report={report} />
+      </ReportBody>
+    </Report>
+  );
+}

components/pages/reports/reports.module.css

@@ -1,14 +1,24 @@
 .container {
   display: grid;
-  grid-template-rows: 1fr;
+  grid-template-rows: max-content 1fr;
   grid-template-columns: max-content 1fr;
 }
 
+.header {
+  grid-row: 1 / 2;
+  grid-column: 1 / 3;
+}
+
 .menu {
   width: 300px;
+  padding-right: 20px;
+  border-right: 1px solid var(--base300);
+  grid-row: 2/3;
   grid-column: 1 / 2;
 }
 
-.content {
+.body {
+  padding-left: 20px;
+  grid-row: 2/3;
   grid-column: 2 / 3;
 }