Typescript refactor.

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

@@ -0,0 +1,25 @@
+'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';
+
+export function ReportsHeader() {
+  const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+
+  const handleClick = () => router.push('/reports/create');
+
+  return (
+    <PageHeader title={formatMessage(labels.reports)}>
+      <Button variant="primary" onClick={handleClick}>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.createReport)}</Text>
+      </Button>
+    </PageHeader>
+  );
+}
+
+export default ReportsHeader;