watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-13 17:15:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Zen components conversion.

Browse source
This commit is contained in:
Mike Cao 2025-03-07 03:11:58 -08:00
parent aac1a12e51
commit 5999bf6256
142 changed files with 1235 additions and 1454 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/app/(main)/reports/ReportDeleteButton.tsx
View file

@ -1,4 +1,4 @@
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
import { useApi, useMessages, useModified } from '@/components/hooks';
import { ConfirmationForm } from '@/components/common/ConfirmationForm';
@ -29,25 +29,29 @@ export function ReportDeleteButton({
};
return (
<ModalTrigger>
<DialogTrigger>
<Button>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal title={formatMessage(labels.deleteReport)}>
{(close: () => void) => (
<ConfirmationForm
message={formatMessage(messages.confirmDelete, { target: <b>{reportName}</b> })}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.delete)}
/>
)}
<Modal>
<Dialog title={formatMessage(labels.deleteReport)}>
{({ close }) => (
<ConfirmationForm
message={formatMessage(messages.confirmDelete, {
target: <b key="report-name">{reportName}</b>,
})}
isLoading={isPending}
error={error}
onConfirm={handleConfirm.bind(null, close)}
onClose={close}
buttonLabel={formatMessage(labels.delete)}
/>
)}
</Dialog>
</Modal>
</ModalTrigger>
</DialogTrigger>
);
}

6
src/app/(main)/reports/ReportsDataTable.tsx
View file

@ -1,7 +1,7 @@
import { useReports } from '@/components/hooks';
import { ReportsTable } from './ReportsTable';
import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react';
import { useReports } from '@/components/hooks';
import { DataGrid } from '@/components/common/DataGrid';
import { ReportsTable } from './ReportsTable';
export function ReportsDataTable({
websiteId,

2
src/app/(main)/reports/ReportsHeader.tsx
View file

@ -1,5 +1,5 @@
import { PageHeader } from '@/components/layout/PageHeader';
import { Icon, Icons, Text } from 'react-basics';
import { Icon, Icons, Text } from '@umami/react-zen';
import { useLogin, useMessages, useTeamUrl } from '@/components/hooks';
import { LinkButton } from '@/components/common/LinkButton';
import { ROLES } from '@/lib/constants';

34
src/app/(main)/reports/ReportsTable.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
import { Icon, Icons, Text, DataTable, DataColumn, Row } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { useMessages, useLogin, useTeamUrl } from '@/components/hooks';
import { REPORT_TYPES } from '@/lib/constants';
@ -10,39 +10,39 @@ export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomai
const { renderTeamUrl } = useTeamUrl();
return (
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="description" label={formatMessage(labels.description)} />
<GridColumn name="type" label={formatMessage(labels.type)}>
{row => {
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)} />
<DataColumn id="description" label={formatMessage(labels.description)} />
<DataColumn id="type" label={formatMessage(labels.type)}>
{(row: any) => {
return formatMessage(
labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === row.type)],
);
}}
</GridColumn>
</DataColumn>
{showDomain && (
<GridColumn name="domain" label={formatMessage(labels.domain)}>
{row => row?.website?.domain}
</GridColumn>
<DataColumn id="domain" label={formatMessage(labels.domain)}>
{(row: any) => row?.website?.domain}
</DataColumn>
)}
<GridColumn name="action" label="" alignment="end">
{row => {
<DataColumn id="action" label="" align="end">
{(row: any) => {
const { id, name, userId, website } = row;
return (
<>
<Row gap="3">
{(user.id === userId || user.id === website?.userId) && (
<ReportDeleteButton reportId={id} reportName={name} />
)}
<LinkButton href={renderTeamUrl(`/reports/${id}`)}>
<Icon>
<Icons.ArrowRight />
<Icons.Arrow />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
</>
</Row>
);
}}
</GridColumn>
</GridTable>
</DataColumn>
</DataTable>
);
}

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

@ -1,5 +1,5 @@
import { useContext } from 'react';
import { FormRow } from 'react-basics';
import { Column, Label } from '@umami/react-zen';
import { parseDateRange } from '@/lib/date';
import { DateFilter } from '@/components/input/DateFilter';
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
@ -40,16 +40,18 @@ export function BaseParameters({
return (
<>
{showWebsiteSelect && (
<FormRow label={formatMessage(labels.website)}>
<Column>
<Label>{formatMessage(labels.website)}</Label>
{allowWebsiteSelect ? (
<WebsiteSelect teamId={teamId} websiteId={websiteId} onSelect={handleWebsiteSelect} />
) : (
name
)}
</FormRow>
</Column>
)}
{showDateSelect && (
<FormRow label={formatMessage(labels.dateRange)} className={styles.dropdown}>
<Column className={styles.dropdown}>
<Label>{formatMessage(labels.dateRange)}</Label>
{allowDateSelect && (
<DateFilter
value={value}
@ -58,7 +60,7 @@ export function BaseParameters({
onChange={handleDateChange}
/>
)}
</FormRow>
</Column>
)}
</>
);

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

@ -1,4 +1,4 @@
import { Form, FormRow, Menu, Item } from 'react-basics';
import { Form, FormRow, Menu, Item } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
export function FieldAggregateForm({

47
src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
View file

@ -4,19 +4,21 @@ import { OPERATORS } from '@/lib/constants';
import { isEqualsOperator } from '@/lib/params';
import {
Button,
Dropdown,
Column,
Row,
Select,
Flexbox,
Form,
FormRow,
Icon,
Icons,
Item,
Loading,
Menu,
MenuItem,
ListItem,
SearchField,
Text,
TextField,
} from 'react-basics';
Label,
} from '@umami/react-zen';
import styles from './FieldFilterEditForm.module.css';
export interface FieldFilterFormProps {
@ -94,10 +96,6 @@ export function FieldFilterEditForm({
: values;
}, [value, formattedValues]);
const renderFilterValue = (value: any) => {
return filters.find((filter: { value: any }) => filter.value === value)?.label;
};
const handleAdd = () => {
onChange({ name, type, operator, value: isEquals ? selected : value });
};
@ -133,21 +131,21 @@ export function FieldFilterEditForm({
};
return (
<Form>
<FormRow label={label} className={styles.filter}>
<Column>
<Row className={styles.filter}>
<Label>{label}</Label>
<Flexbox gap={10}>
{allowFilterSelect && (
<Dropdown
<Select
className={styles.dropdown}
items={filterDropdownItems(name)}
value={operator}
renderValue={renderFilterValue}
onChange={handleOperatorChange}
>
{({ value, label }) => {
return <Item key={value}>{label}</Item>;
{({ value, label }: any) => {
return <ListItem key={value}>{label}</ListItem>;
}}
</Dropdown>
</Select>
)}
{selected && isEquals && (
<div className={styles.selected} onClick={handleReset}>
@ -163,7 +161,6 @@ export function FieldFilterEditForm({
className={styles.text}
value={value}
placeholder={formatMessage(labels.enter)}
onChange={e => setValue(e.target.value)}
onSearch={handleSearch}
delay={500}
onFocus={() => setShowMenu(true)}
@ -187,11 +184,11 @@ export function FieldFilterEditForm({
/>
)}
</Flexbox>
<Button variant="primary" onClick={handleAdd} disabled={isDisabled}>
<Button variant="primary" onPress={handleAdd} isDisabled={isDisabled}>
{formatMessage(isNew ? labels.add : labels.update)}
</Button>
</FormRow>
</Form>
</Row>
</Column>
);
}
@ -199,10 +196,10 @@ const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
const { formatValue } = useFormat();
if (isLoading) {
return (
<Menu className={styles.menu} variant="popup">
<Item>
<Menu className={styles.menu}>
<MenuItem>
<Loading icon="dots" position="center" />
</Item>
</MenuItem>
</Menu>
);
}
@ -212,9 +209,9 @@ const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
}
return (
<Menu className={styles.menu} variant="popup" onSelect={onSelect}>
<Menu className={styles.menu} onSelectionChange={onSelect}>
{values?.map(({ value }) => {
return <Item key={value}>{formatValue(value, type)}</Item>;
return <MenuItem key={value}>{formatValue(value, type)}</MenuItem>;
})}
</Menu>
);

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

@ -1,7 +1,7 @@
import { useFields, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { useContext } from 'react';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import { Button, FormRow, Icon, Popup, PopupTrigger } from '@umami/react-zen';
import { FieldSelectForm } from '../[reportId]/FieldSelectForm';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';

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

@ -1,4 +1,4 @@
import { Menu, Item, Form, FormRow } from 'react-basics';
import { List, ListItem, Label, Column } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import styles from './FieldSelectForm.module.css';
import { Key } from 'react';
@ -13,19 +13,18 @@ export function FieldSelectForm({ fields = [], onSelect, showType = true }: Fiel
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>
<Column>
<Label>{formatMessage(labels.fields)}</Label>
<List onSelectionChange={key => onSelect(fields[key as any])}>
{fields.map(({ name, label, type }: any, index: Key) => {
return (
<ListItem key={index} className={styles.item}>
<div>{label || name}</div>
{showType && type && <div className={styles.type}>{type}</div>}
</ListItem>
);
})}
</List>
</Column>
);
}

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

@ -1,7 +1,7 @@
import { useContext } from 'react';
import { useMessages, useFormat, useFilters, useFields } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import { Button, FormRow, Icon, Popup, PopupTrigger } from '@umami/react-zen';
import { FilterSelectForm } from '../[reportId]/FilterSelectForm';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';

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

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { Icon } from 'react-basics';
import { Icon } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { Empty } from '@/components/common/Empty';
import { useMessages } from '@/components/hooks';

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

@ -1,5 +1,5 @@
import { createContext, ReactNode } from 'react';
import { Loading } from 'react-basics';
import { Loading } from '@umami/react-zen';
import classNames from 'classnames';
import { useReport } from '@/components/hooks';
import styles from './Report.module.css';

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

@ -1,5 +1,5 @@
import { useContext } from 'react';
import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
import { Icon, LoadingButton, InlineEditField, useToast } from '@umami/react-zen';
import { useMessages, useApi, useNavigation, useTeamUrl } from '@/components/hooks';
import { ReportContext } from './Report';
import styles from './ReportHeader.module.css';
@ -9,7 +9,7 @@ import { Breadcrumb } from '@/components/common/Breadcrumb';
export function ReportHeader({ icon }) {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts();
const { toast } = useToast();
const { router } = useNavigation();
const { renderTeamUrl } = useTeamUrl();
@ -29,14 +29,14 @@ export function ReportHeader({ icon }) {
if (!report.id) {
create(report, {
onSuccess: async ({ id }) => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
toast(formatMessage(messages.saved));
router.push(renderTeamUrl(`/reports/${id}`));
},
});
} else {
update(report, {
onSuccess: async () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
toast(formatMessage(messages.saved));
},
});
}
@ -94,7 +94,7 @@ export function ReportHeader({ icon }) {
variant="primary"
isLoading={isCreating || isUpdating}
disabled={!websiteId || !dateRange?.value || !name}
onClick={handleSave}
onPress={handleSave}
>
{formatMessage(labels.save)}
</LoadingButton>

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

@ -1,7 +1,7 @@
import { useContext, useState } from 'react';
import { ReportContext } from './Report';
import styles from './ReportMenu.module.css';
import { Icon, Icons } from 'react-basics';
import { Icon, Icons } from '@umami/react-zen';
import classNames from 'classnames';
export function ReportMenu({ children }) {

32
src/app/(main)/reports/create/ReportTemplates.module.css
View file

@ -1,32 +0,0 @@
.reports {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 20px;
}
.report {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
border: 1px solid var(--base500);
border-radius: var(--border-radius);
}
.title {
display: flex;
gap: 10px;
align-items: center;
font-size: var(--font-size-lg);
font-weight: 700;
}
.description {
flex: 1;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}

43
src/app/(main)/reports/create/ReportTemplates.tsx
View file

@ -1,9 +1,8 @@
import { Button, Icon, Text } from '@umami/react-zen';
import { Icon, Text, Row, Column, Grid } from '@umami/react-zen';
import { useMessages, useTeamUrl } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader';
import Link from 'next/link';
import styles from './ReportTemplates.module.css';
import { LinkButton } from '@/components/common/LinkButton';
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
const { formatMessage, labels } = useMessages();
@ -57,13 +56,13 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
return (
<>
{showHeader && <PageHeader title={formatMessage(labels.reports)} />}
<div className={styles.reports}>
<Grid columns="repeat(3, minmax(200px, 1fr))" gap="3">
{reports.map(({ title, description, url, icon }) => {
return (
<ReportItem key={title} icon={icon} title={title} description={description} url={url} />
);
})}
</div>
</Grid>
</>
);
}
@ -72,22 +71,22 @@ function ReportItem({ title, description, url, icon }) {
const { formatMessage, labels } = useMessages();
return (
<div className={styles.report}>
<div className={styles.title}>
<Icon size="lg">{icon}</Icon>
<Text>{title}</Text>
</div>
<div className={styles.description}>{description}</div>
<div className={styles.buttons}>
<Link href={url}>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.create)}</Text>
</Button>
</Link>
</div>
</div>
<Column gap="6" padding="6" borderSize="1" borderRadius="3" justifyContent="space-between">
<Row gap="3" alignItems="center">
<Icon size="md">{icon}</Icon>
<Text size="5" weight="bold">
{title}
</Text>
</Row>
<Text>{description}</Text>
<Row justifyContent="flex-end">
<LinkButton href={url} variant="primary">
<Icon fillColor="currentColor">
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.create)}</Text>
</LinkButton>
</Row>
</Column>
);
}

10
src/app/(main)/reports/event-data/EventDataParameters.tsx
View file

@ -1,5 +1,13 @@
import { useContext } from 'react';
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
import {
Form,
FormRow,
FormButtons,
SubmitButton,
PopupTrigger,
Icon,
Popup,
} from '@umami/react-zen';
import { Empty } from '@/components/common/Empty';
import { Icons } from '@/components/icons';
import { useApi, useMessages } from '@/components/hooks';

2
src/app/(main)/reports/event-data/EventDataTable.tsx
View file

@ -1,5 +1,5 @@
import { useContext } from 'react';
import { GridTable, GridColumn } from 'react-basics';
import { GridTable, GridColumn } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { ReportContext } from '../[reportId]/Report';

2
src/app/(main)/reports/funnel/FunnelParameters.tsx
View file

@ -11,7 +11,7 @@ import {
SubmitButton,
TextField,
Button,
} from 'react-basics';
} from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { FunnelStepAddForm } from './FunnelStepAddForm';
import { ReportContext } from '../[reportId]/Report';

2
src/app/(main)/reports/funnel/FunnelStepAddForm.tsx
View file

@ -1,6 +1,6 @@
import { useState } from 'react';
import { useMessages } from '@/components/hooks';
import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from 'react-basics';
import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from '@umami/react-zen';
import styles from './FunnelStepAddForm.module.css';
export interface FunnelStepAddFormProps {

2
src/app/(main)/reports/goals/GoalsAddForm.tsx
View file

@ -1,6 +1,6 @@
import { useMessages } from '@/components/hooks';
import { useState } from 'react';
import { Button, Dropdown, Flexbox, FormRow, Item, TextField } from 'react-basics';
import { Button, Dropdown, Flexbox, FormRow, Item, TextField } from '@umami/react-zen';
import styles from './GoalsAddForm.module.css';
export function GoalsAddForm({

2
src/app/(main)/reports/goals/GoalsParameters.tsx
View file

@ -12,7 +12,7 @@ import {
Popup,
PopupTrigger,
SubmitButton,
} from 'react-basics';
} from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';

2
src/app/(main)/reports/insights/InsightsParameters.tsx
View file

@ -1,6 +1,6 @@
import { useMessages } from '@/components/hooks';
import { useContext } from 'react';
import { Form, FormButtons, SubmitButton } from 'react-basics';
import { Form, FormButtons, SubmitButton } from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ReportContext } from '../[reportId]/Report';
import { FieldParameters } from '../[reportId]/FieldParameters';

2
src/app/(main)/reports/insights/InsightsTable.tsx
View file

@ -1,5 +1,5 @@
import { useContext, useEffect, useState } from 'react';
import { GridTable, GridColumn } from 'react-basics';
import { GridTable, GridColumn } from '@umami/react-zen';
import { useFormat, useMessages } from '@/components/hooks';
import { ReportContext } from '../[reportId]/Report';
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';

2
src/app/(main)/reports/journey/JourneyParameters.tsx
View file

@ -9,7 +9,7 @@ import {
Item,
SubmitButton,
TextField,
} from 'react-basics';
} from '@umami/react-zen';
import { ReportContext } from '../[reportId]/Report';
import { BaseParameters } from '../[reportId]/BaseParameters';

2
src/app/(main)/reports/journey/JourneyView.tsx
View file

@ -1,5 +1,5 @@
import { useContext, useMemo, useState } from 'react';
import { TextOverflow, TooltipPopup } from 'react-basics';
import { TextOverflow, TooltipPopup } from '@umami/react-zen';
import { firstBy } from 'thenby';
import classNames from 'classnames';
import { useEscapeKey, useMessages } from '@/components/hooks';

11
src/app/(main)/reports/retention/RetentionParameters.tsx
View file

@ -1,8 +1,7 @@
import { useContext } from 'react';
import { useMessages } from '@/components/hooks';
import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
import { ReportContext } from '../[reportId]/Report';
import { MonthSelect } from '@/components/input/MonthSelect';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { parseDateRange } from '@/lib/date';
@ -31,13 +30,11 @@ export function RetentionParameters() {
return (
<Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<BaseParameters showDateSelect={false} allowWebsiteSelect={!id} />
<FormRow label={formatMessage(labels.date)}>
<MonthSelect date={startDate} onChange={handleDateChange} />
</FormRow>
<FormButtons>
<SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
<FormSubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
{formatMessage(labels.runQuery)}
</SubmitButton>
</FormSubmitButton>
</FormButtons>
</Form>
);

10
src/app/(main)/reports/revenue/RevenueParameters.tsx
View file

@ -1,7 +1,15 @@
import { useMessages } from '@/components/hooks';
import { useRevenueValues } from '@/components/hooks/queries/useRevenueValues';
import { useContext } from 'react';
import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
import {
Dropdown,
Form,
FormButtons,
FormInput,
FormRow,
Item,
SubmitButton,
} from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
import { ReportContext } from '../[reportId]/Report';

2
src/app/(main)/reports/revenue/RevenueTable.tsx
View file

@ -1,7 +1,7 @@
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
import { useMessages } from '@/components/hooks';
import { useContext } from 'react';
import { GridColumn, GridTable } from 'react-basics';
import { GridColumn, GridTable } from '@umami/react-zen';
import { ReportContext } from '../[reportId]/Report';
import { formatLongCurrency } from '@/lib/format';

2
src/app/(main)/reports/utm/UTMParameters.tsx
View file

@ -1,6 +1,6 @@
import { useContext } from 'react';
import { useMessages } from '@/components/hooks';
import { Form, FormButtons, SubmitButton } from 'react-basics';
import { Form, FormButtons, SubmitButton } from '@umami/react-zen';
import { ReportContext } from '../[reportId]/Report';
import { BaseParameters } from '../[reportId]/BaseParameters';