Merge remote-tracking branch 'origin/dev' into dev

src/app/(main)/admin/users/[userId]/UserEditForm.tsx

@@ -30,7 +30,11 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={getMessage(error?.code)} values={user}>
+    <Form
+      onSubmit={handleSubmit}
+      error={getMessage(error?.code)}
+      values={{ ...user, password: '' }}
+    >
       <FormField name="username" label={formatMessage(labels.username)}>
         <TextField data-test="input-username" />
       </FormField>

src/app/(main)/links/LinksDataTable.tsx

@@ -2,13 +2,13 @@ import { DataGrid } from '@/components/common/DataGrid';
 import { useLinksQuery, useNavigation } from '@/components/hooks';
 import { LinksTable } from './LinksTable';
 
-export function LinksDataTable() {
+export function LinksDataTable({ showActions = false }: { showActions?: boolean }) {
   const { teamId } = useNavigation();
   const query = useLinksQuery({ teamId });
 
   return (
     <DataGrid query={query} allowSearch={true} autoFocus={false} allowPaging={true}>
-      {({ data }) => <LinksTable data={data} />}
+      {({ data }) => <LinksTable data={data} showActions={showActions} />}
     </DataGrid>
   );
 }

src/app/(main)/links/LinksPage.tsx

@@ -4,21 +4,30 @@ import { LinksDataTable } from '@/app/(main)/links/LinksDataTable';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { LinkAddButton } from './LinkAddButton';
 
 export function LinksPage() {
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const { teamId } = useNavigation();
+  const { data } = useTeamMembersQuery(teamId);
+
+  const showActions =
+    (teamId &&
+      data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly)
+        .length > 0) ||
+    (!teamId && user.role !== ROLES.viewOnly);
 
   return (
     <PageBody>
       <Column gap="6" margin="2">
         <PageHeader title={formatMessage(labels.links)}>
-          <LinkAddButton teamId={teamId} />
+          {showActions && <LinkAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>
-          <LinksDataTable />
+          <LinksDataTable showActions={showActions} />
         </Panel>
       </Column>
     </PageBody>

src/app/(main)/links/LinksTable.tsx

@@ -6,7 +6,11 @@ import { useMessages, useNavigation, useSlug } from '@/components/hooks';
 import { LinkDeleteButton } from './LinkDeleteButton';
 import { LinkEditButton } from './LinkEditButton';
 
-export function LinksTable(props: DataTableProps) {
+export interface LinksTableProps extends DataTableProps {
+  showActions?: boolean;
+}
+
+export function LinksTable({ showActions, ...props }: LinksTableProps) {
   const { formatMessage, labels } = useMessages();
   const { websiteId, renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('link');
@@ -36,16 +40,18 @@ export function LinksTable(props: DataTableProps) {
       <DataColumn id="created" label={formatMessage(labels.created)} width="200px">
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
-      <DataColumn id="action" align="end" width="100px">
-        {({ id, name }: any) => {
-          return (
-            <Row>
-              <LinkEditButton linkId={id} />
-              <LinkDeleteButton linkId={id} websiteId={websiteId} name={name} />
-            </Row>
-          );
-        }}
-      </DataColumn>
+      {showActions && (
+        <DataColumn id="action" align="end" width="100px">
+          {({ id, name }: any) => {
+            return (
+              <Row>
+                <LinkEditButton linkId={id} />
+                <LinkDeleteButton linkId={id} websiteId={websiteId} name={name} />
+              </Row>
+            );
+          }}
+        </DataColumn>
+      )}
     </DataTable>
   );
 }

src/app/(main)/pixels/PixelsDataTable.tsx

@@ -2,13 +2,13 @@ import { DataGrid } from '@/components/common/DataGrid';
 import { useNavigation, usePixelsQuery } from '@/components/hooks';
 import { PixelsTable } from './PixelsTable';
 
-export function PixelsDataTable() {
+export function PixelsDataTable({ showActions = false }: { showActions?: boolean }) {
   const { teamId } = useNavigation();
   const query = usePixelsQuery({ teamId });
 
   return (
     <DataGrid query={query} allowSearch={true} autoFocus={false} allowPaging={true}>
-      {({ data }) => <PixelsTable data={data} />}
+      {({ data }) => <PixelsTable data={data} showActions={showActions} />}
     </DataGrid>
   );
 }

src/app/(main)/pixels/PixelsPage.tsx

@@ -3,22 +3,31 @@ import { Column } from '@umami/react-zen';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { PixelAddButton } from './PixelAddButton';
 import { PixelsDataTable } from './PixelsDataTable';
 
 export function PixelsPage() {
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const { teamId } = useNavigation();
+  const { data } = useTeamMembersQuery(teamId);
+
+  const showActions =
+    (teamId &&
+      data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly)
+        .length > 0) ||
+    (!teamId && user.role !== ROLES.viewOnly);
 
   return (
     <PageBody>
       <Column gap="6" margin="2">
         <PageHeader title={formatMessage(labels.pixels)}>
-          <PixelAddButton teamId={teamId} />
+          {showActions && <PixelAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>
-          <PixelsDataTable />
+          <PixelsDataTable showActions={showActions} />
         </Panel>
       </Column>
     </PageBody>

src/app/(main)/pixels/PixelsTable.tsx

@@ -6,7 +6,11 @@ import { useMessages, useNavigation, useSlug } from '@/components/hooks';
 import { PixelDeleteButton } from './PixelDeleteButton';
 import { PixelEditButton } from './PixelEditButton';
 
-export function PixelsTable(props: DataTableProps) {
+export interface PixelsTableProps extends DataTableProps {
+  showActions?: boolean;
+}
+
+export function PixelsTable({ showActions, ...props }: PixelsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('pixel');
@@ -31,18 +35,20 @@ export function PixelsTable(props: DataTableProps) {
       <DataColumn id="created" label={formatMessage(labels.created)}>
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
-      <DataColumn id="action" align="end" width="100px">
-        {(row: any) => {
-          const { id, name } = row;
+      {showActions && (
+        <DataColumn id="action" align="end" width="100px">
+          {(row: any) => {
+            const { id, name } = row;
 
-          return (
-            <Row>
-              <PixelEditButton pixelId={id} />
-              <PixelDeleteButton pixelId={id} name={name} />
-            </Row>
-          );
-        }}
-      </DataColumn>
+            return (
+              <Row>
+                <PixelEditButton pixelId={id} />
+                <PixelDeleteButton pixelId={id} name={name} />
+              </Row>
+            );
+          }}
+        </DataColumn>
+      )}
     </DataTable>
   );
 }

src/app/(main)/websites/WebsitesPage.tsx

@@ -3,22 +3,31 @@ import { Column } from '@umami/react-zen';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { WebsiteAddButton } from './WebsiteAddButton';
 import { WebsitesDataTable } from './WebsitesDataTable';
 
 export function WebsitesPage() {
+  const { user } = useLoginQuery();
   const { teamId } = useNavigation();
   const { formatMessage, labels } = useMessages();
+  const { data } = useTeamMembersQuery(teamId);
+
+  const showActions =
+    (teamId &&
+      data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly)
+        .length > 0) ||
+    (!teamId && user.role !== ROLES.viewOnly);
 
   return (
     <PageBody>
       <Column gap="6" margin="2">
         <PageHeader title={formatMessage(labels.websites)}>
-          <WebsiteAddButton teamId={teamId} />
+          {showActions && <WebsiteAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>
-          <WebsitesDataTable teamId={teamId} />
+          <WebsitesDataTable teamId={teamId} showActions={showActions} />
         </Panel>
       </Column>
     </PageBody>

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

@@ -1,12 +1,18 @@
 'use client';
 import { Column, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
-import { type Key, useState } from 'react';
+import locale from 'date-fns/locale/af';
+import { type Key, useMemo, useState } from 'react';
 import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 import { useMessages } from '@/components/hooks';
+import { useEventStatsQuery } from '@/components/hooks/queries/useEventStatsQuery';
 import { EventsChart } from '@/components/metrics/EventsChart';
+import { MetricCard } from '@/components/metrics/MetricCard';
+import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
+import { formatLongNumber } from '@/lib/format';
 import { getItem, setItem } from '@/lib/storage';
 import { EventProperties } from './EventProperties';
 import { EventsDataTable } from './EventsDataTable';
@@ -15,16 +21,61 @@ const KEY_NAME = 'umami.events.tab';
 
 export function EventsPage({ websiteId }) {
   const [tab, setTab] = useState(getItem(KEY_NAME) || 'chart');
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
+  const { data, isLoading, isFetching, error } = useEventStatsQuery({
+    websiteId,
+  });
 
   const handleSelect = (value: Key) => {
     setItem(KEY_NAME, value);
     setTab(value);
   };
 
+  const metrics = useMemo(() => {
+    if (!data) return [];
+
+    const { events, visitors, visits, uniqueEvents } = data || {};
+
+    return [
+      {
+        value: visitors,
+        label: formatMessage(labels.visitors),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: visits,
+        label: formatMessage(labels.visits),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: events,
+        label: formatMessage(labels.events),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: uniqueEvents,
+        label: formatMessage(labels.uniqueEvents),
+        formatValue: formatLongNumber,
+      },
+    ] as any;
+  }, [data, locale]);
+
   return (
     <Column gap="3">
       <WebsiteControls websiteId={websiteId} />
+      <LoadingPanel
+        data={metrics}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        error={getErrorMessage(error)}
+        minHeight="136px"
+      >
+        <MetricsBar>
+          {metrics?.map(({ label, value, formatValue }) => {
+            return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
+          })}
+        </MetricsBar>
+      </LoadingPanel>
       <Panel>
         <Tabs selectedKey={tab} onSelectionChange={key => handleSelect(key)}>
           <TabList>

src/app/api/websites/[websiteId]/events/stats/route.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod';
+import { getQueryFilters, parseRequest } from '@/lib/request';
+import { json, unauthorized } from '@/lib/response';
+import { dateRangeParams, filterParams } from '@/lib/schema';
+import { canViewWebsite } from '@/permissions';
+import { getWebsiteEventStats } from '@/queries/sql/events/getWebsiteEventStats';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ websiteId: string }> },
+) {
+  const schema = z.object({
+    ...dateRangeParams,
+    ...filterParams,
+  });
+
+  const { auth, query, error } = await parseRequest(request, schema);
+
+  if (error) {
+    return error();
+  }
+
+  const { websiteId } = await params;
+
+  if (!(await canViewWebsite(auth, websiteId))) {
+    return unauthorized();
+  }
+
+  const filters = await getQueryFilters(query, websiteId);
+
+  const data = await getWebsiteEventStats(websiteId, filters);
+
+  return json({ data });
+}