Renamed id routes for API.

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

@@ -1,6 +1,6 @@
 import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
-import { useMessages, useLogin } from 'components/hooks';
+import { useMessages, useLogin, useNavigation } from 'components/hooks';
 import { REPORT_TYPES } from 'lib/constants';
 import ReportDeleteButton from './ReportDeleteButton';
 
@@ -8,6 +8,7 @@ export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomai
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
   const breakpoint = useBreakpoint();
+  const { renderTeamUrl } = useNavigation();
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@@ -33,7 +34,7 @@ export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomai
               {(user.id === userId || user.id === website?.userId) && (
                 <ReportDeleteButton reportId={id} reportName={name} />
               )}
-              <LinkButton href={`/reports/${id}`}>
+              <LinkButton href={renderTeamUrl(`/reports/${id}`)}>
                 <Icon>
                   <Icons.ArrowRight />
                 </Icon>

src/app/(main)/settings/teams/[teamId]/TeamWebsitesTable.tsx

@@ -17,7 +17,7 @@ export function TeamWebsitesTable({
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       <GridColumn name="action" label=" " alignment="end">
         {row => {
-          const { id: websiteId } = row;
+          const { websiteId } = row;
           return (
             <Link href={`/websites/${websiteId}`}>
               <Button>

src/app/(main)/teams/[teamId]/reports/TeamReports.tsx

@@ -1,16 +1,17 @@
 'use client';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages, useNavigation } from 'components/hooks';
 import ReportsDataTable from 'app/(main)/reports/ReportsDataTable';
 
 export function TeamReports({ websiteId }) {
   const { formatMessage, labels } = useMessages();
+  const { renderTeamUrl } = useNavigation();
 
   return (
     <>
       <Flexbox alignItems="center" justifyContent="end">
-        <Link href={`/reports/create`}>
+        <Link href={renderTeamUrl(`/reports/create`)}>
           <Button variant="primary">
             <Icon>
               <Icons.Plus />