Fixed 'use client' usage.

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

@@ -0,0 +1,6 @@
+'use client';
+import ReportTemplates from './ReportTemplates';
+
+export default function ReportCreatePage() {
+  return <ReportTemplates />;
+}

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

@@ -1,4 +1,3 @@
-'use client';
 import Link from 'next/link';
 import { Button, Icons, Text, Icon } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
@@ -8,30 +7,6 @@ import Magnet from 'assets/magnet.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages, useTeamUrl } 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 }: { showHeader?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl } = useTeamUrl();
@@ -71,4 +46,28 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
   );
 }
 
+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 default ReportTemplates;

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

@@ -1,8 +1,8 @@
-import ReportTemplates from './ReportTemplates';
+import ReportCreatePage from './ReportCreatePage';
 import { Metadata } from 'next';
 
-export default function ReportsCreatePage() {
-  return <ReportTemplates />;
+export default function () {
+  return <ReportCreatePage />;
 }
 
 export const metadata: Metadata = {