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

# Conflicts:
#	src/app/(main)/teams/TeamsDataTable.tsx
#	src/app/(main)/teams/TeamsJoinButton.tsx
#	src/app/(main)/teams/[teamId]/TeamSettings.tsx

pnpm-lock.yaml

@@ -364,8 +364,6 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
 
-  dist: {}
-
 packages:
 
   '@ampproject/remapping@2.3.0':

src/app/(main)/links/[linkId]/LinkPage.tsx

@@ -7,19 +7,24 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
 import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar';
 import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls';
 import { LinkPanels } from '@/app/(main)/links/[linkId]/LinkPanels';
+import { Column, Grid } from '@umami/react-zen';
 
 export function LinkPage({ linkId }: { linkId: string }) {
   return (
     <LinkProvider linkId={linkId}>
-      <PageBody gap>
-        <LinkHeader />
-        <LinkControls linkId={linkId} />
-        <LinkMetricsBar linkId={linkId} showChange={true} />
-        <Panel>
-          <WebsiteChart websiteId={linkId} />
-        </Panel>
-        <LinkPanels linkId={linkId} />
-      </PageBody>
+      <Grid width="100%" height="100%">
+        <Column margin="2">
+          <PageBody gap>
+            <LinkHeader />
+            <LinkControls linkId={linkId} />
+            <LinkMetricsBar linkId={linkId} showChange={true} />
+            <Panel>
+              <WebsiteChart websiteId={linkId} />
+            </Panel>
+            <LinkPanels linkId={linkId} />
+          </PageBody>
+        </Column>
+      </Grid>
     </LinkProvider>
   );
 }

src/app/(main)/pixels/[pixelId]/PixelPage.tsx

@@ -7,19 +7,24 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
 import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar';
 import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls';
 import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels';
+import { Column, Grid } from '@umami/react-zen';
 
 export function PixelPage({ pixelId }: { pixelId: string }) {
   return (
     <PixelProvider pixelId={pixelId}>
-      <PageBody gap>
-        <PixelHeader />
-        <PixelControls pixelId={pixelId} />
-        <PixelMetricsBar pixelId={pixelId} showChange={true} />
-        <Panel>
-          <WebsiteChart websiteId={pixelId} />
-        </Panel>
-        <PixelPanels pixelId={pixelId} />
-      </PageBody>
+      <Grid width="100%" height="100%">
+        <Column margin="2">
+          <PageBody gap>
+            <PixelHeader />
+            <PixelControls pixelId={pixelId} />
+            <PixelMetricsBar pixelId={pixelId} showChange={true} />
+            <Panel>
+              <WebsiteChart websiteId={pixelId} />
+            </Panel>
+            <PixelPanels pixelId={pixelId} />
+          </PageBody>
+        </Column>
+      </Grid>
     </PixelProvider>
   );
 }

src/app/(main)/teams/TeamsDataTable.tsx

@@ -1,7 +1,7 @@
-import Link from 'next/link';
 import { DataGrid } from '@/components/common/DataGrid';
-import { TeamsTable } from './TeamsTable';
 import { useLoginQuery, useNavigation, useUserTeamsQuery } from '@/components/hooks';
+import Link from 'next/link';
+import { TeamsTable } from './TeamsTable';
 
 export function TeamsDataTable() {
   const { user } = useLoginQuery();

src/app/(main)/teams/TeamsTable.tsx

@@ -20,12 +20,12 @@ export function TeamsTable({
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
         {(row: any) => row?.members?.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
       </DataColumn>
-      <DataColumn id="websites" label={formatMessage(labels.websites)} align="end">
-        {(row: any) => row?._count?.websites}
-      </DataColumn>
       <DataColumn id="members" label={formatMessage(labels.members)} align="end">
         {(row: any) => row?._count?.members}
       </DataColumn>
+      <DataColumn id="websites" label={formatMessage(labels.websites)} align="end">
+        {(row: any) => row?._count?.websites}
+      </DataColumn>
     </DataTable>
   );
 }

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

@@ -19,7 +19,7 @@ export function CohortsTable({ data = [] }) {
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
         {(row: any) => (
-          <Link href={renderUrl(`/websites/${websiteId}?cohort=${row.id}`)}>{row.name}</Link>
+          <Link href={renderUrl(`/websites/${websiteId}?cohort=${row.id}`, false)}>{row.name}</Link>
         )}
       </DataColumn>
       <DataColumn id="created" label={formatMessage(labels.created)}>

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

@@ -18,7 +18,9 @@ export function SegmentsTable({ data = [] }) {
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
         {(row: any) => (
-          <Link href={renderUrl(`/websites/${websiteId}?segment=${row.id}`)}>{row.name}</Link>
+          <Link href={renderUrl(`/websites/${websiteId}?segment=${row.id}`, false)}>
+            {row.name}
+          </Link>
         )}
       </DataColumn>
       <DataColumn id="created" label={formatMessage(labels.created)}>

src/components/icons.ts

@@ -10,4 +10,5 @@ export {
   Network as NetworkSvg,
   Path as PathSvg,
   Target as TargetSvg,
+  AddUser as AddUserSvg,
 } from '@/components/svg';

src/lib/constants.ts

@@ -127,12 +127,12 @@ export const DATA_TYPES = {
 
 export const ROLES = {
   admin: 'admin',
-  teamManager: 'team-manager',
-  teamMember: 'team-member',
-  teamOwner: 'team-owner',
-  teamViewOnly: 'team-view-only',
   user: 'user',
   viewOnly: 'view-only',
+  teamOwner: 'team-owner',
+  teamManager: 'team-manager',
+  teamMember: 'team-member',
+  teamViewOnly: 'team-view-only',
 } as const;
 
 export const PERMISSIONS = {

src/lib/request.ts

@@ -119,7 +119,7 @@ export async function getQueryFilters(
       }));
 
       cohortFilters.push({
-        name: cohortParams.action.type,
+        name: `cohort_${cohortParams.action.type}`,
         operator: 'eq',
         value: cohortParams.action.value,
       });