94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
import { Button, Icon, Text } 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';
|
|
|
|
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
|
|
const { formatMessage, labels } = useMessages();
|
|
const { renderTeamUrl } = useTeamUrl();
|
|
|
|
const reports = [
|
|
{
|
|
title: formatMessage(labels.insights),
|
|
description: formatMessage(labels.insightsDescription),
|
|
url: renderTeamUrl('/reports/insights'),
|
|
icon: <Icons.Lightbulb />,
|
|
},
|
|
{
|
|
title: formatMessage(labels.funnel),
|
|
description: formatMessage(labels.funnelDescription),
|
|
url: renderTeamUrl('/reports/funnel'),
|
|
icon: <Icons.Funnel />,
|
|
},
|
|
{
|
|
title: formatMessage(labels.retention),
|
|
description: formatMessage(labels.retentionDescription),
|
|
url: renderTeamUrl('/reports/retention'),
|
|
icon: <Icons.Magnet />,
|
|
},
|
|
{
|
|
title: formatMessage(labels.utm),
|
|
description: formatMessage(labels.utmDescription),
|
|
url: renderTeamUrl('/reports/utm'),
|
|
icon: <Icons.Tag />,
|
|
},
|
|
{
|
|
title: formatMessage(labels.goals),
|
|
description: formatMessage(labels.goalsDescription),
|
|
url: renderTeamUrl('/reports/goals'),
|
|
icon: <Icons.Target />,
|
|
},
|
|
{
|
|
title: formatMessage(labels.journey),
|
|
description: formatMessage(labels.journeyDescription),
|
|
url: renderTeamUrl('/reports/journey'),
|
|
icon: <Icons.Path />,
|
|
},
|
|
{
|
|
title: formatMessage(labels.revenue),
|
|
description: formatMessage(labels.revenueDescription),
|
|
url: renderTeamUrl('/reports/revenue'),
|
|
icon: <Icons.Money />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{showHeader && <PageHeader title={formatMessage(labels.reports)} />}
|
|
<div className={styles.reports}>
|
|
{reports.map(({ title, description, url, icon }) => {
|
|
return (
|
|
<ReportItem key={title} icon={icon} title={title} description={description} url={url} />
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|