Renamed (app) folder to (main).

src/app/(main)/reports/create/ReportTemplates.js

@@ -0,0 +1,73 @@
+'use client';
+import Link from 'next/link';
+import { Button, Icons, Text, Icon } from 'react-basics';
+import PageHeader from 'components/layout/PageHeader';
+import Funnel from 'assets/funnel.svg';
+import Lightbulb from 'assets/lightbulb.svg';
+import Magnet from 'assets/magnet.svg';
+import styles from './ReportTemplates.module.css';
+import { useMessages } from 'components/hooks';
+
+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>
+  );
+}
+
+export function ReportTemplates({ showHeader = true }) {
+  const { formatMessage, labels } = useMessages();
+
+  const reports = [
+    {
+      title: formatMessage(labels.insights),
+      description: formatMessage(labels.insightsDescription),
+      url: '/reports/insights',
+      icon: <Lightbulb />,
+    },
+    {
+      title: formatMessage(labels.funnel),
+      description: formatMessage(labels.funnelDescription),
+      url: '/reports/funnel',
+      icon: <Funnel />,
+    },
+    {
+      title: formatMessage(labels.retention),
+      description: formatMessage(labels.retentionDescription),
+      url: '/reports/retention',
+      icon: <Magnet />,
+    },
+  ];
+
+  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>
+    </>
+  );
+}
+
+export default ReportTemplates;

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

@@ -0,0 +1,32 @@
+.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;
+}

src/app/(main)/reports/create/page.tsx

@@ -0,0 +1,10 @@
+import ReportTemplates from './ReportTemplates';
+import { Metadata } from 'next';
+
+export default function ReportsCreatePage() {
+  return <ReportTemplates />;
+}
+
+export const metadata: Metadata = {
+  title: 'Create Report | umami',
+};