Changed route ids to be more explicit.

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

@@ -0,0 +1,62 @@
+import { useContext } from 'react';
+import { FormRow } from 'react-basics';
+import { parseDateRange } from 'lib/date';
+import DateFilter from 'components/input/DateFilter';
+import WebsiteSelect from 'components/input/WebsiteSelect';
+import { useMessages } from 'components/hooks';
+import { ReportContext } from './Report';
+
+export interface BaseParametersProps {
+  showWebsiteSelect?: boolean;
+  allowWebsiteSelect?: boolean;
+  showDateSelect?: boolean;
+  allowDateSelect?: boolean;
+}
+
+export function BaseParameters({
+  showWebsiteSelect = true,
+  allowWebsiteSelect = true,
+  showDateSelect = true,
+  allowDateSelect = true,
+}: BaseParametersProps) {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+
+  const { parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const { value, startDate, endDate } = dateRange || {};
+
+  const handleWebsiteSelect = (websiteId: string) => {
+    updateReport({ websiteId, parameters: { websiteId } });
+  };
+
+  const handleDateChange = (value: string) => {
+    updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
+  };
+
+  return (
+    <>
+      {showWebsiteSelect && (
+        <FormRow label={formatMessage(labels.website)}>
+          {allowWebsiteSelect && (
+            <WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
+          )}
+        </FormRow>
+      )}
+      {showDateSelect && (
+        <FormRow label={formatMessage(labels.dateRange)}>
+          {allowDateSelect && (
+            <DateFilter
+              value={value}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={handleDateChange}
+            />
+          )}
+        </FormRow>
+      )}
+    </>
+  );
+}
+
+export default BaseParameters;

src/app/(main)/reports/[reportId]/FieldAddForm.module.css

@@ -0,0 +1,38 @@
+.menu {
+  width: 360px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: var(--border-radius);
+}
+
+.item:hover {
+  background: var(--base75);
+}
+
+.type {
+  color: var(--font-color300);
+}
+
+.selected {
+  font-weight: bold;
+}
+
+.popup {
+  display: flex;
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dropdown {
+  min-width: 60px;
+}

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

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { REPORT_PARAMETERS } from 'lib/constants';
+import PopupForm from './PopupForm';
+import FieldSelectForm from './FieldSelectForm';
+import FieldAggregateForm from './FieldAggregateForm';
+import FieldFilterForm from './FieldFilterForm';
+import styles from './FieldAddForm.module.css';
+
+export function FieldAddForm({
+  fields = [],
+  group,
+  onAdd,
+  onClose,
+}: {
+  fields?: any[];
+  group: string;
+  onAdd: (group: string, value: string) => void;
+  onClose: () => void;
+}) {
+  const [selected, setSelected] = useState<{ name: string; type: string; value: string }>();
+
+  const handleSelect = (value: any) => {
+    const { type } = value;
+
+    if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
+      value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
+      handleSave(value);
+      return;
+    }
+
+    setSelected(value);
+  };
+
+  const handleSave = (value: any) => {
+    onAdd(group, value);
+    onClose();
+  };
+
+  return createPortal(
+    <PopupForm className={styles.popup}>
+      {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
+      {selected && group === REPORT_PARAMETERS.fields && (
+        <FieldAggregateForm {...selected} onSelect={handleSave} />
+      )}
+      {selected && group === REPORT_PARAMETERS.filters && (
+        <FieldFilterForm {...selected} onSelect={handleSave} />
+      )}
+    </PopupForm>,
+    document.body,
+  );
+}
+
+export default FieldAddForm;

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

@@ -0,0 +1,53 @@
+import { Form, FormRow, Menu, Item } from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export default function FieldAggregateForm({
+  name,
+  type,
+  onSelect,
+}: {
+  name: string;
+  type: string;
+  onSelect: (key: any) => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+
+  const options = {
+    number: [
+      { label: formatMessage(labels.sum), value: 'sum' },
+      { label: formatMessage(labels.average), value: 'average' },
+      { label: formatMessage(labels.min), value: 'min' },
+      { label: formatMessage(labels.max), value: 'max' },
+    ],
+    date: [
+      { label: formatMessage(labels.min), value: 'min' },
+      { label: formatMessage(labels.max), value: 'max' },
+    ],
+    string: [
+      { label: formatMessage(labels.total), value: 'total' },
+      { label: formatMessage(labels.unique), value: 'unique' },
+    ],
+    uuid: [
+      { label: formatMessage(labels.total), value: 'total' },
+      { label: formatMessage(labels.unique), value: 'unique' },
+    ],
+  };
+
+  const items = options[type];
+
+  const handleSelect = (value: any) => {
+    onSelect({ name, type, value });
+  };
+
+  return (
+    <Form>
+      <FormRow label={name}>
+        <Menu onSelect={handleSelect}>
+          {items.map(({ label, value }) => {
+            return <Item key={value}>{label}</Item>;
+          })}
+        </Menu>
+      </FormRow>
+    </Form>
+  );
+}

src/app/(main)/reports/[reportId]/FieldFilterForm.module.css

@@ -0,0 +1,22 @@
+.selected {
+  font-weight: bold;
+}
+
+.popup {
+  display: flex;
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dropdown {
+  min-width: 180px;
+}
+
+.menu {
+  min-width: 360px;
+  max-height: 300px;
+}

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

@@ -0,0 +1,97 @@
+import { useState, useMemo } from 'react';
+import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
+import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
+import styles from './FieldFilterForm.module.css';
+
+export interface FieldFilterFormProps {
+  name: string;
+  label?: string;
+  type: string;
+  values?: any[];
+  onSelect?: (key: any) => void;
+  allowFilterSelect?: boolean;
+}
+
+export default function FieldFilterForm({
+  name,
+  label,
+  type,
+  values,
+  onSelect,
+  allowFilterSelect = true,
+}: FieldFilterFormProps) {
+  const { formatMessage, labels } = useMessages();
+  const [filter, setFilter] = useState('eq');
+  const [value, setValue] = useState();
+  const { getFilters } = useFilters();
+  const { formatValue } = useFormat();
+  const { locale } = useLocale();
+  const filters = getFilters(type);
+
+  const formattedValues = useMemo(() => {
+    const formatted = {};
+    const format = (val: string) => {
+      formatted[val] = formatValue(val, name);
+      return formatted[val];
+    };
+    if (values.length !== 1) {
+      const { compare } = new Intl.Collator(locale, { numeric: true });
+      values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
+    } else {
+      format(values[0]);
+    }
+    return formatted;
+  }, [formatValue, locale, name, values]);
+
+  const renderFilterValue = value => {
+    return filters.find(f => f.value === value)?.label;
+  };
+
+  const renderValue = value => {
+    return formattedValues[value];
+  };
+
+  const handleAdd = () => {
+    onSelect({ name, type, filter, value });
+  };
+
+  return (
+    <Form>
+      <FormRow label={label} className={styles.filter}>
+        <Flexbox gap={10}>
+          {allowFilterSelect && (
+            <Dropdown
+              className={styles.dropdown}
+              items={filters}
+              value={filter}
+              renderValue={renderFilterValue}
+              onChange={(key: any) => setFilter(key)}
+            >
+              {({ value, label }) => {
+                return <Item key={value}>{label}</Item>;
+              }}
+            </Dropdown>
+          )}
+          <Dropdown
+            className={styles.dropdown}
+            menuProps={{ className: styles.menu }}
+            items={values}
+            value={value}
+            renderValue={renderValue}
+            onChange={(key: any) => setValue(key)}
+            style={{
+              minWidth: '250px',
+            }}
+          >
+            {(value: string) => {
+              return <Item key={value}>{formattedValues[value]}</Item>;
+            }}
+          </Dropdown>
+        </Flexbox>
+        <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
+          {formatMessage(labels.add)}
+        </Button>
+      </FormRow>
+    </Form>
+  );
+}

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

@@ -0,0 +1,20 @@
+.menu {
+  width: 360px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: var(--border-radius);
+}
+
+.item:hover {
+  background: var(--base75);
+}
+
+.type {
+  color: var(--font-color300);
+}

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

@@ -0,0 +1,35 @@
+import { Menu, Item, Form, FormRow } from 'react-basics';
+import { useMessages } from 'components/hooks';
+import styles from './FieldSelectForm.module.css';
+import { Key } from 'react';
+
+export interface FieldSelectFormProps {
+  fields?: any[];
+  onSelect?: (key: any) => void;
+  showType?: boolean;
+}
+
+export default function FieldSelectForm({
+  fields = [],
+  onSelect,
+  showType = true,
+}: FieldSelectFormProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Form>
+      <FormRow label={formatMessage(labels.fields)}>
+        <Menu className={styles.menu} onSelect={key => onSelect(fields[key as any])}>
+          {fields.map(({ name, label, type }: any, index: Key) => {
+            return (
+              <Item key={index} className={styles.item}>
+                <div>{label || name}</div>
+                {showType && type && <div className={styles.type}>{type}</div>}
+              </Item>
+            );
+          })}
+        </Menu>
+      </FormRow>
+    </Form>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { Loading } from 'react-basics';
+import { subDays } from 'date-fns';
+import FieldSelectForm from './FieldSelectForm';
+import FieldFilterForm from './FieldFilterForm';
+import { useApi } from 'components/hooks';
+
+function useValues(websiteId: string, type: string) {
+  const now = Date.now();
+  const { get, useQuery } = useApi();
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['websites:values', websiteId, type],
+    queryFn: () =>
+      get(`/websites/${websiteId}/values`, {
+        type,
+        startAt: +subDays(now, 90),
+        endAt: now,
+      }),
+    enabled: !!(websiteId && type),
+  });
+
+  return { data, error, isLoading };
+}
+
+export interface FilterSelectFormProps {
+  websiteId: string;
+  items: any[];
+  onSelect?: (key: any) => void;
+  allowFilterSelect?: boolean;
+}
+
+export default function FilterSelectForm({
+  websiteId,
+  items,
+  onSelect,
+  allowFilterSelect,
+}: FilterSelectFormProps) {
+  const [field, setField] = useState<{ name: string; label: string; type: string }>();
+  const { data, isLoading } = useValues(websiteId, field?.name);
+
+  if (!field) {
+    return <FieldSelectForm fields={items} onSelect={setField} showType={false} />;
+  }
+
+  if (isLoading) {
+    return <Loading position="center" icon="dots" />;
+  }
+
+  return (
+    <FieldFilterForm
+      name={field?.name}
+      label={field?.label}
+      type={field?.type}
+      values={data}
+      onSelect={onSelect}
+      allowFilterSelect={allowFilterSelect}
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  box-shadow: 1px 1px 1px var(--base400);
+  gap: 10px;
+}
+
+.icon {
+  align-self: center;
+}

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { Icon, TooltipPopup } from 'react-basics';
+import Icons from 'components/icons';
+import Empty from 'components/common/Empty';
+import { useMessages } from 'components/hooks';
+import styles from './ParameterList.module.css';
+
+export interface ParameterListProps {
+  items: any[];
+  children?: ReactNode | ((item: any) => ReactNode);
+  onRemove: (index: number, e: any) => void;
+}
+
+export function ParameterList({ items = [], children, onRemove }: ParameterListProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <div className={styles.list}>
+      {!items.length && <Empty message={formatMessage(labels.none)} />}
+      {items.map((item, index) => {
+        return (
+          <div key={index} className={styles.item}>
+            {typeof children === 'function' ? children(item) : item}
+            <TooltipPopup
+              className={styles.icon}
+              label={formatMessage(labels.remove)}
+              position="right"
+            >
+              <Icon onClick={onRemove.bind(null, index)}>
+                <Icons.Close />
+              </Icon>
+            </TooltipPopup>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ParameterList;

src/app/(main)/reports/[reportId]/PopupForm.module.css

@@ -0,0 +1,10 @@
+.form {
+  position: absolute;
+  background: var(--base50);
+  min-width: 300px;
+  padding: 20px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}

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

@@ -0,0 +1,25 @@
+import { CSSProperties, ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './PopupForm.module.css';
+
+export function PopupForm({
+  className,
+  style,
+  children,
+}: {
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={classNames(styles.form, className)}
+      style={style}
+      onClick={e => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default PopupForm;

src/app/(main)/reports/[reportId]/Report.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: max-content 1fr;
+}

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

@@ -0,0 +1,31 @@
+'use client';
+import { createContext, ReactNode } from 'react';
+import { Loading } from 'react-basics';
+import { useReport } from 'components/hooks';
+import styles from './Report.module.css';
+import classNames from 'classnames';
+
+export const ReportContext = createContext(null);
+
+export interface ReportProps {
+  reportId: string;
+  defaultParameters: { [key: string]: any };
+  children: ReactNode;
+  className?: string;
+}
+
+export function Report({ reportId, defaultParameters, children, className }: ReportProps) {
+  const report = useReport(reportId, defaultParameters);
+
+  if (!report) {
+    return reportId ? <Loading position="page" /> : null;
+  }
+
+  return (
+    <ReportContext.Provider value={report}>
+      <div className={classNames(styles.container, className)}>{children}</div>
+    </ReportContext.Provider>
+  );
+}
+
+export default Report;

src/app/(main)/reports/[reportId]/ReportBody.module.css

@@ -0,0 +1,5 @@
+.body {
+  padding-left: 20px;
+  grid-row: 2/3;
+  grid-column: 2 / 3;
+}

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

@@ -0,0 +1,15 @@
+import styles from './ReportBody.module.css';
+import { useContext } from 'react';
+import { ReportContext } from './Report';
+
+export function ReportBody({ children }) {
+  const { report } = useContext(ReportContext);
+
+  if (!report) {
+    return null;
+  }
+
+  return <div className={styles.body}>{children}</div>;
+}
+
+export default ReportBody;

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

@@ -0,0 +1,29 @@
+'use client';
+import FunnelReport from '../funnel/FunnelReport';
+import EventDataReport from '../event-data/EventDataReport';
+import InsightsReport from '../insights/InsightsReport';
+import RetentionReport from '../retention/RetentionReport';
+import { useApi } from 'components/hooks';
+
+const reports = {
+  funnel: FunnelReport,
+  'event-data': EventDataReport,
+  insights: InsightsReport,
+  retention: RetentionReport,
+};
+
+export default function ReportDetails({ reportId }: { reportId: string }) {
+  const { get, useQuery } = useApi();
+  const { data: report } = useQuery({
+    queryKey: ['reports', reportId],
+    queryFn: () => get(`/reports/${reportId}`),
+  });
+
+  if (!report) {
+    return null;
+  }
+
+  const ReportComponent = reports[report.type];
+
+  return <ReportComponent reportId={reportId} />;
+}

src/app/(main)/reports/[reportId]/ReportHeader.module.css

@@ -0,0 +1,36 @@
+.header {
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  align-items: center;
+  grid-row: 1 / 2;
+  grid-column: 1 / 3;
+  margin: 20px 0 40px 0;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 24px;
+  font-weight: 700;
+  gap: 20px;
+  height: 60px;
+}
+
+.type {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--base600);
+}
+
+.description {
+  color: var(--font-color300);
+  max-width: 500px;
+  height: 30px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,97 @@
+import { useContext } from 'react';
+import { useRouter } from 'next/navigation';
+import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
+import { useMessages, useApi } from 'components/hooks';
+import { ReportContext } from './Report';
+import styles from './ReportHeader.module.css';
+import { REPORT_TYPES } from 'lib/constants';
+
+export function ReportHeader({ icon }) {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels, messages } = useMessages();
+  const { showToast } = useToasts();
+  const { post, useMutation } = useApi();
+  const router = useRouter();
+  const { mutate: create, isPending: isCreating } = useMutation({
+    mutationFn: (data: any) => post(`/reports`, data),
+  });
+  const { mutate: update, isPending: isUpdating } = useMutation({
+    mutationFn: (data: any) => post(`/reports/${data.id}`, data),
+  });
+
+  const { name, description, parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const defaultName = formatMessage(labels.untitled);
+
+  const handleSave = async () => {
+    if (!report.id) {
+      create(report, {
+        onSuccess: async ({ id }) => {
+          showToast({ message: formatMessage(messages.saved), variant: 'success' });
+          router.push(`/reports/${id}`);
+        },
+      });
+    } else {
+      update(report, {
+        onSuccess: async () => {
+          showToast({ message: formatMessage(messages.saved), variant: 'success' });
+        },
+      });
+    }
+  };
+
+  const handleNameChange = (name: string) => {
+    updateReport({ name: name || defaultName });
+  };
+
+  const handleDescriptionChange = (description: string) => {
+    updateReport({ description });
+  };
+
+  if (!report) {
+    return null;
+  }
+
+  return (
+    <div className={styles.header}>
+      <div>
+        <div className={styles.type}>
+          {formatMessage(
+            labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
+          )}
+        </div>
+        <div className={styles.title}>
+          <Icon size="lg">{icon}</Icon>
+          <InlineEditField
+            key={name}
+            name="name"
+            value={name}
+            placeholder={defaultName}
+            onCommit={handleNameChange}
+          />
+        </div>
+        <div className={styles.description}>
+          <InlineEditField
+            key={description}
+            name="description"
+            value={description}
+            placeholder={`+ ${formatMessage(labels.addDescription)}`}
+            onCommit={handleDescriptionChange}
+          />
+        </div>
+      </div>
+      <div className={styles.actions}>
+        <LoadingButton
+          variant="primary"
+          isLoading={isCreating || isUpdating}
+          disabled={!websiteId || !dateRange?.value || !name}
+          onClick={handleSave}
+        >
+          {formatMessage(labels.save)}
+        </LoadingButton>
+      </div>
+    </div>
+  );
+}
+
+export default ReportHeader;

src/app/(main)/reports/[reportId]/ReportMenu.module.css

@@ -0,0 +1,7 @@
+.menu {
+  width: 300px;
+  padding-right: 20px;
+  border-right: 1px solid var(--base300);
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+}

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

@@ -0,0 +1,15 @@
+import styles from './ReportMenu.module.css';
+import { useContext } from 'react';
+import { ReportContext } from './Report';
+
+export function ReportMenu({ children }) {
+  const { report } = useContext(ReportContext);
+
+  if (!report) {
+    return null;
+  }
+
+  return <div className={styles.menu}>{children}</div>;
+}
+
+export default ReportMenu;

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

@@ -0,0 +1,14 @@
+import ReportDetails from './ReportDetails';
+import { Metadata } from 'next';
+
+export default function ReportDetailsPage({ params: { reportId } }) {
+  if (!reportId) {
+    return null;
+  }
+
+  return <ReportDetails reportId={reportId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Reports | umami',
+};