Merge branch 'dev' of https://github.com/umami-software/umami into dev

# Conflicts:
#	src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx
#	src/app/(main)/websites/[websiteId]/replays/ReplaysTable.tsx
#	src/app/(main)/websites/[websiteId]/replays/[sessionId]/ReplayPlayback.tsx
#	src/queries/sql/replays/saveReplayChunk.ts
#	src/recorder/index.js

Author: mikecao

db/clickhouse/migrations/10_add_session_recording.sql

@@ -4,6 +4,7 @@ CREATE TABLE umami.session_replay
     replay_id UUID,
     website_id UUID,
     session_id UUID,
+    visit_id UUID,
     chunk_index UInt32,
     events String CODEC(ZSTD(3)),
     event_count UInt32,
@@ -13,5 +14,5 @@ CREATE TABLE umami.session_replay
 )
 ENGINE = MergeTree()
 PARTITION BY toYYYYMM(created_at)
-ORDER BY (replay_id, website_id, session_id, chunk_index)
+ORDER BY (replay_id, website_id, session_id, visit_id, chunk_index)
 SETTINGS index_granularity = 8192;

db/clickhouse/schema.sql

@@ -361,6 +361,7 @@ CREATE TABLE umami.session_replay
     replay_id UUID,
     website_id UUID,
     session_id UUID,
+    visit_id UUID,
     chunk_index UInt32,
     events String CODEC(ZSTD(3)),
     event_count UInt32,
@@ -370,5 +371,5 @@ CREATE TABLE umami.session_replay
 )
 ENGINE = MergeTree()
 PARTITION BY toYYYYMM(created_at)
-ORDER BY (replay_id, website_id, session_id, chunk_index)
+ORDER BY (replay_id, website_id, session_id, visit_id, chunk_index)
 SETTINGS index_granularity = 8192;

prisma/migrations/19_add_session_recording/migration.sql

@@ -7,6 +7,7 @@ CREATE TABLE "session_replay" (
     "replay_id" UUID NOT NULL,
     "website_id" UUID NOT NULL,
     "session_id" UUID NOT NULL,
+    "visit_id" UUID NOT NULL,
     "chunk_index" INTEGER NOT NULL,
     "events" BYTEA NOT NULL,
     "event_count" INTEGER NOT NULL,
@@ -21,5 +22,6 @@ CREATE TABLE "session_replay" (
 CREATE INDEX "session_replay_website_id_idx" ON "session_replay"("website_id");
 CREATE INDEX "session_replay_session_id_idx" ON "session_replay"("session_id");
 CREATE INDEX "session_replay_website_id_session_id_idx" ON "session_replay"("website_id", "session_id");
+CREATE INDEX "session_replay_website_id_visit_id_idx" ON "session_replay"("website_id", "visit_id");
 CREATE INDEX "session_replay_website_id_created_at_idx" ON "session_replay"("website_id", "created_at");
 CREATE INDEX "session_replay_session_id_chunk_index_idx" ON "session_replay"("session_id", "chunk_index");

prisma/schema.prisma

@@ -399,6 +399,7 @@ model SessionReplay {
   @@index([sessionId])
   @@index([visitId])
   @@index([websiteId, sessionId])
+  @@index([websiteId, visitId])
   @@index([websiteId, createdAt])
   @@index([sessionId, chunkIndex])
   @@map("session_replay")

public/intl/messages/en-US.json

@@ -251,6 +251,7 @@
     "remove": "Remove",
     "remove-member": "Remove member",
     "replay": "Replay",
+    "replay-id": "Replay ID",
     "replay-enabled": "Replay enabled",
     "replays": "Replays",
     "reports": "Reports",
@@ -332,6 +333,8 @@
     "unique": "Unique",
     "unique-events": "Unique events",
     "unique-visitors": "Unique visitors",
+    "aov": "AOV",
+    "arpu": "ARPU",
     "uniqueCustomers": "Unique Customers",
     "unknown": "Unknown",
     "untitled": "Untitled",

src/app/(main)/websites/[websiteId]/(reports)/revenue/Revenue.tsx

@@ -44,7 +44,7 @@ export function Revenue({ websiteId, startDate, endDate, unit }: RevenueProps) {
   const metrics = useMemo(() => {
     if (!data) return [];
 
-    const { sum, count, average, unique_count, comparison } = data.total;
+    const { sum, count, average, unique_count, arpu, comparison } = data.total;
 
     return [
       {
@@ -55,10 +55,16 @@ export function Revenue({ websiteId, startDate, endDate, unit }: RevenueProps) {
       },
       {
         value: average,
-        label: t(labels.average),
+        label: t(labels.aov),
         change: comparison ? average - comparison.average : 0,
         formatValue: (n: number) => formatLongCurrency(n, currency),
       },
+      {
+        value: arpu,
+        label: t(labels.arpu),
+        change: comparison ? arpu - (comparison.arpu ?? 0) : 0,
+        formatValue: (n: number) => formatLongCurrency(n, currency),
+      },
       {
         value: count,
         label: t(labels.transactions),

src/app/(main)/websites/[websiteId]/(reports)/revenue/RevenueTable.tsx

@@ -86,14 +86,14 @@ export function EventsTable(props: DataTableProps) {
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="device" label={t(labels.device)} width="120px">
+      <DataColumn id="device" label={t(labels.device)} width="140px">
         {(row: any) => (
           <TypeIcon type="device" value={row.device}>
             {formatValue(row.device, 'device')}
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="created" width="160px" align="end">
+      <DataColumn id="created" width="140px" label={t(labels.created)}>
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
     </DataTable>

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

@@ -1,41 +1,41 @@
 'use client';
-import { Button, Column, Dialog, Icon, Modal, Row } from '@umami/react-zen';
-import { X } from 'lucide-react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { buildPath } from '@/lib/url';
-import { ReplayPlayback } from './[sessionId]/ReplayPlayback';
+import { Column, Dialog, Modal, type ModalProps } from '@umami/react-zen';
+import { ReplayPlayback } from '@/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayback';
+import { useNavigation } from '@/components/hooks';
 
-export function ReplayModal({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const closeModal = () => {
-    const query = Object.fromEntries(searchParams.entries());
-    delete query.session;
+export interface ReplayModalProps extends ModalProps {
+  websiteId: string;
+}
 
-    router.push(buildPath(`/websites/${websiteId}/replays`, query));
-  };
+export function ReplayModal({ websiteId, ...props }: ReplayModalProps) {
+  const {
+    router,
+    query: { replay },
+    updateParams,
+  } = useNavigation();
 
   const handleOpenChange = (isOpen: boolean) => {
     if (!isOpen) {
-      closeModal();
+      router.push(updateParams({ replay: undefined }));
     }
   };
 
   return (
-    <Modal placement="bottom" offset="80px" isOpen onOpenChange={handleOpenChange} isDismissable>
+    <Modal
+      placement="bottom"
+      offset="80px"
+      isOpen={!!replay}
+      onOpenChange={handleOpenChange}
+      isDismissable
+      {...props}
+    >
       <Column height="100%" maxWidth="1320px" style={{ margin: '0 auto' }}>
-        <Dialog variant="sheet" className="rounded-lg">
-          <Column padding="10">
-            <Row justifyContent="flex-end">
-              <Button onPress={closeModal} variant="quiet">
-                <Icon>
-                  <X />
-                </Icon>
-              </Button>
-            </Row>
-            <ReplayPlayback websiteId={websiteId} sessionId={sessionId} />
-          </Column>
+        <Dialog variant="sheet">
+          {({ close }) => (
+            <Column padding="6">
+              <ReplayPlayback websiteId={websiteId} replayId={replay} onClose={close} />
+            </Column>
+          )}
         </Dialog>
       </Column>
     </Modal>

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

@@ -8,7 +8,7 @@ export function ReplaysDataTable({ websiteId }: { websiteId: string }) {
   return (
     <DataGrid query={queryResult} allowPaging allowSearch>
       {({ data }) => {
-        return <ReplaysTable data={data} websiteId={websiteId} />;
+        return <ReplaysTable data={data} />;
       }}
     </DataGrid>
   );