Refactored queries.

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>
   );
 }