New reports screens.

pages/reports/create.js

@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import ReportTemplates from 'components/pages/reports/ReportTemplates';
+import { useMessages } from 'hooks';
+
+export default function ReportsPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={formatMessage(labels.reports)}>
+      <ReportTemplates />
+    </AppLayout>
+  );
+}

pages/reports/index.js

@@ -1,21 +1,13 @@
-import { useState } from 'react';
-import { Item, Tabs } from 'react-basics';
 import AppLayout from 'components/layout/AppLayout';
-import ReportList from 'components/pages/reports/ReportList';
 import useMessages from 'hooks/useMessages';
+import ReportsList from 'components/pages/reports/ReportsList';
 
 export default function ReportsPage() {
-  const [tab, setTab] = useState('create');
   const { formatMessage, labels } = useMessages();
 
   return (
     <AppLayout title={formatMessage(labels.reports)}>
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="create">{formatMessage(labels.reports)}</Item>
-        <Item key="saved">{formatMessage(labels.save)}</Item>
-      </Tabs>
-      {tab === 'create' && <ReportList />}
-      {tab === 'saved' && <h1>My reports</h1>}
+      <ReportsList />
     </AppLayout>
   );
 }