Merge branch 'dev' into jajaja

# Conflicts:
#	db/mysql/schema.prisma
#	package.json
#	pnpm-lock.yaml
#	src/app/(main)/reports/[reportId]/ReportBody.tsx
#	src/app/(main)/reports/[reportId]/ReportPage.tsx
#	src/app/(main)/reports/utm/UTMView.tsx
#	src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
#	src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
#	src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
#	src/app/api/reports/[reportId]/route.ts
#	src/app/api/websites/[websiteId]/metrics/route.ts
#	src/components/hooks/queries/useReport.ts
#	src/components/icons.ts
#	src/components/messages.ts
#	src/components/metrics/MetricsTable.module.css
#	src/components/metrics/MetricsTable.tsx
#	src/queries/sql/events/getEventMetrics.ts
#	src/queries/sql/reports/getUTM.ts

src/components/input/DownloadButton.tsx

@@ -0,0 +1,42 @@
+import Papa from 'papaparse';
+import { Button, Icon, TooltipTrigger, Tooltip } from '@umami/react-zen';
+import { Download } from '@/components/icons';
+import { useMessages } from '@/components/hooks';
+
+export function DownloadButton({
+  filename = 'data',
+  data,
+}: {
+  filename?: string;
+  data?: any;
+  onClick?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+
+  const handleClick = async () => {
+    downloadCsv(`${filename}.csv`, Papa.unparse(data));
+  };
+
+  return (
+    <TooltipTrigger delay={0}>
+      <Button variant="quiet" onClick={handleClick} isDisabled={!data}>
+        <Icon>
+          <Download />
+        </Icon>
+      </Button>
+      <Tooltip>{formatMessage(labels.download)}</Tooltip>
+    </TooltipTrigger>
+  );
+}
+
+function downloadCsv(filename: string, data: any) {
+  const blob = new Blob([data], { type: 'text/csv' });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+
+  URL.revokeObjectURL(url);
+}

src/components/input/ExportButton.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { Icon, Tooltip, TooltipTrigger, LoadingButton } from '@umami/react-zen';
+import { Download } from '@/components/icons';
+import { useMessages, useApi } from '@/components/hooks';
+import { useSearchParams } from 'next/navigation';
+import { useDateParameters } from '@/components/hooks/useDateParameters';
+import { useFilterParameters } from '@/components/hooks/useFilterParameters';
+
+export function ExportButton({ websiteId }: { websiteId: string }) {
+  const { formatMessage, labels } = useMessages();
+  const [isLoading, setIsLoading] = useState(false);
+  const date = useDateParameters(websiteId);
+  const filters = useFilterParameters();
+  const searchParams = useSearchParams();
+  const { get } = useApi();
+
+  const handleClick = async () => {
+    setIsLoading(true);
+
+    const { zip } = await get(`/websites/${websiteId}/export`, {
+      ...date,
+      ...filters,
+      ...searchParams,
+      format: 'json',
+    });
+
+    await loadZip(zip);
+
+    setIsLoading(false);
+  };
+
+  return (
+    <TooltipTrigger delay={0}>
+      <LoadingButton
+        variant="quiet"
+        showText={!isLoading}
+        isLoading={isLoading}
+        onClick={handleClick}
+      >
+        <Icon>
+          <Download />
+        </Icon>
+      </LoadingButton>
+      <Tooltip>{formatMessage(labels.download)}</Tooltip>
+    </TooltipTrigger>
+  );
+}
+
+async function loadZip(zip: string) {
+  const binary = atob(zip);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+
+  const blob = new Blob([bytes], { type: 'application/zip' });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'download.zip';
+  a.click();
+  URL.revokeObjectURL(url);
+}

src/components/input/WebsiteDateFilter.tsx

@@ -12,6 +12,7 @@ import { isAfter } from 'date-fns';
 import { Chevron, Close, Compare } from '@/components/icons';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { DateFilter } from './DateFilter';
+import { ExportButton } from '@/components/input/ExportButton';
 
 export function WebsiteDateFilter({
   websiteId,
@@ -99,6 +100,7 @@ export function WebsiteDateFilter({
             <Icon fillColor>{compare ? <Close /> : <Compare />}</Icon>
           </Button>
           <Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
+          <ExportButton websiteId={websiteId} />
         </TooltipTrigger>
       )}
     </Row>

src/components/input/WebsiteSelect.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Select, SelectProps, ListItem } from '@umami/react-zen';
+import { Select, SelectProps, ListItem, Text } from '@umami/react-zen';
 import { useUserWebsitesQuery, useWebsiteQuery, useNavigation } from '@/components/hooks';
 import { ButtonProps } from 'react-basics';
 
@@ -38,7 +38,11 @@ export function WebsiteSelect({
       searchValue={search}
       onSearch={handleSearch}
       onChange={handleSelect}
-      renderValue={() => website?.name}
+      renderValue={() => (
+        <Text truncate style={{ maxWidth: 160 }}>
+          {website?.name}
+        </Text>
+      )}
     >
       {({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
     </Select>