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,10 +7,13 @@ 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}>
+      <Grid width="100%" height="100%">
+        <Column margin="2">
           <PageBody gap>
             <LinkHeader />
             <LinkControls linkId={linkId} />
@@ -20,6 +23,8 @@ export function LinkPage({ linkId }: { linkId: string }) {
             </Panel>
             <LinkPanels linkId={linkId} />
           </PageBody>
+        </Column>
+      </Grid>
     </LinkProvider>
   );
 }

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

@@ -7,10 +7,13 @@ 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}>
+      <Grid width="100%" height="100%">
+        <Column margin="2">
           <PageBody gap>
             <PixelHeader />
             <PixelControls pixelId={pixelId} />
@@ -20,6 +23,8 @@ export function PixelPage({ pixelId }: { pixelId: string }) {
             </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,
       });