Added download functionality.

src/app/(main)/reports/[reportId]/ReportBody.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react';
 import { ReportContext } from './Report';
 import styles from './ReportBody.module.css';
+import { DownloadButton } from '@/components/input/DownloadButton';
 
 export function ReportBody({ children }) {
   const { report } = useContext(ReportContext);
@@ -9,7 +10,12 @@ export function ReportBody({ children }) {
     return null;
   }
 
-  return <div className={styles.body}>{children}</div>;
+  return (
+    <div className={styles.body}>
+      <DownloadButton filename={report.name} data={report.data} />
+      {children}
+    </div>
+  );
 }
 
 export default ReportBody;

src/app/(main)/reports/[reportId]/ReportPage.tsx

@@ -31,5 +31,9 @@ export default function ReportPage({ reportId }: { reportId: string }) {
 
   const ReportComponent = reports[report.type];
 
+  if (!ReportComponent) {
+    return null;
+  }
+
   return <ReportComponent reportId={reportId} />;
 }

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -1,6 +1,6 @@
 import { Dropdown, Item } from 'react-basics';
 import classNames from 'classnames';
-import { useDateRange, useMessages, useSticky } from '@/components/hooks';
+import { useDateRange, useMessages, useNavigation, useSticky } from '@/components/hooks';
 import WebsiteDateFilter from '@/components/input/WebsiteDateFilter';
 import MetricCard from '@/components/metrics/MetricCard';
 import MetricsBar from '@/components/metrics/MetricsBar';
@@ -8,6 +8,7 @@ import { formatShortTime, formatLongNumber } from '@/lib/format';
 import useWebsiteStats from '@/components/hooks/queries/useWebsiteStats';
 import useStore, { setWebsiteDateCompare } from '@/store/websites';
 import WebsiteFilterButton from './WebsiteFilterButton';
+import { ExportButton } from '@/components/input/ExportButton';
 import styles from './WebsiteMetricsBar.module.css';
 
 export function WebsiteMetricsBar({
@@ -31,6 +32,9 @@ export function WebsiteMetricsBar({
     websiteId,
     compareMode && dateCompare,
   );
+  const {
+    query: { view },
+  } = useNavigation();
   const isAllTime = dateRange.value === 'all';
 
   const { pageviews, visitors, visits, bounces, totaltime } = data || {};
@@ -109,7 +113,10 @@ export function WebsiteMetricsBar({
         </MetricsBar>
       </div>
       <div className={styles.actions}>
-        {showFilter && <WebsiteFilterButton websiteId={websiteId} />}
+        <div>
+          {showFilter && <WebsiteFilterButton websiteId={websiteId} />}
+          {!view && <ExportButton websiteId={websiteId} />}
+        </div>
         <WebsiteDateFilter websiteId={websiteId} showAllTime={!compareMode} />
         {compareMode && (
           <div className={styles.vs}>

src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx

@@ -14,6 +14,7 @@ export default function WebsiteTableView({ websiteId }: { websiteId: string }) {
   const pathname = usePathname();
   const tableProps = {
     websiteId,
+    allowDownload: false,
     limit: 10,
   };
   const isSharePage = pathname.includes('/share/');