Refactored queries.

src/app/(main)/reports/ReportsDataTable.tsx

@@ -3,8 +3,14 @@ import { useReports } from 'components/hooks';
 import ReportsTable from './ReportsTable';
 import DataTable from 'components/common/DataTable';
 
-export default function ReportsDataTable({ websiteId }: { websiteId?: string }) {
-  const queryResult = useReports(websiteId);
+export default function ReportsDataTable({
+  websiteId,
+  teamId,
+}: {
+  websiteId?: string;
+  teamId?: string;
+}) {
+  const queryResult = useReports({ websiteId, teamId });
 
   return (
     <DataTable queryResult={queryResult}>

src/app/(main)/reports/ReportsHeader.tsx

@@ -1,23 +1,21 @@
 'use client';
 import PageHeader from 'components/layout/PageHeader';
-import { Button, Icon, Icons, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
-import { useRouter } from 'next/navigation';
+import { Icon, Icons, Text } from 'react-basics';
+import { useMessages, useNavigation } from 'components/hooks';
+import LinkButton from 'components/common/LinkButton';
 
 export function ReportsHeader() {
   const { formatMessage, labels } = useMessages();
-  const router = useRouter();
-
-  const handleClick = () => router.push('/reports/create');
+  const { renderTeamUrl } = useNavigation();
 
   return (
     <PageHeader title={formatMessage(labels.reports)}>
-      <Button variant="primary" onClick={handleClick}>
+      <LinkButton href={renderTeamUrl('/reports/create')} variant="primary">
         <Icon>
           <Icons.Plus />
         </Icon>
         <Text>{formatMessage(labels.createReport)}</Text>
-      </Button>
+      </LinkButton>
     </PageHeader>
   );
 }

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

@@ -6,7 +6,7 @@ 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';
+import { useMessages, useNavigation } from 'components/hooks';
 
 function ReportItem({ title, description, url, icon }) {
   const { formatMessage, labels } = useMessages();
@@ -32,26 +32,27 @@ function ReportItem({ title, description, url, icon }) {
   );
 }
 
-export function ReportTemplates({ showHeader = true }) {
+export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
   const { formatMessage, labels } = useMessages();
+  const { renderTeamUrl } = useNavigation();
 
   const reports = [
     {
       title: formatMessage(labels.insights),
       description: formatMessage(labels.insightsDescription),
-      url: '/reports/insights',
+      url: renderTeamUrl('/reports/insights'),
       icon: <Lightbulb />,
     },
     {
       title: formatMessage(labels.funnel),
       description: formatMessage(labels.funnelDescription),
-      url: '/reports/funnel',
+      url: renderTeamUrl('/reports/funnel'),
       icon: <Funnel />,
     },
     {
       title: formatMessage(labels.retention),
       description: formatMessage(labels.retentionDescription),
-      url: '/reports/retention',
+      url: renderTeamUrl('/reports/retention'),
       icon: <Magnet />,
     },
   ];

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

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