Updated edit permissions on settings components.

pnpm-lock.yaml

@@ -364,6 +364,45 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
 
+  dist:
+    dependencies:
+      chart.js:
+        specifier: ^4.5.0
+        version: 4.5.0
+      chartjs-adapter-date-fns:
+        specifier: ^3.0.0
+        version: 3.0.0(chart.js@4.5.0)(date-fns@2.30.0)
+      colord:
+        specifier: ^2.9.2
+        version: 2.9.3
+      jsonwebtoken:
+        specifier: ^9.0.2
+        version: 9.0.2
+      lucide-react:
+        specifier: ^0.542.0
+        version: 0.542.0(react@19.1.1)
+      pure-rand:
+        specifier: ^7.0.1
+        version: 7.0.1
+      react-simple-maps:
+        specifier: ^2.3.0
+        version: 2.3.0(prop-types@15.8.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react-use-measure:
+        specifier: ^2.0.4
+        version: 2.1.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react-window:
+        specifier: ^1.8.6
+        version: 1.8.11(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      serialize-error:
+        specifier: ^12.0.0
+        version: 12.0.0
+      thenby:
+        specifier: ^1.3.4
+        version: 1.3.4
+      uuid:
+        specifier: ^11.1.0
+        version: 11.1.0
+
 packages:
 
   '@ampproject/remapping@2.3.0':
@@ -5235,6 +5274,11 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  lucide-react@0.542.0:
+    resolution: {integrity: sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lucide-react@0.543.0:
     resolution: {integrity: sha512-fpVfuOQO0V3HBaOA1stIiP/A2fPCXHIleRZL16Mx3HmjTYwNSbimhnFBygs2CAfU1geexMX5ItUcWBGUaqw5CA==}
     peerDependencies:
@@ -13350,6 +13394,10 @@ snapshots:
     dependencies:
       react: 19.1.1
 
+  lucide-react@0.542.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
   lucide-react@0.543.0(react@19.1.1):
     dependencies:
       react: 19.1.1

src/app/(main)/settings/SettingsLayout.tsx

@@ -43,7 +43,7 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
 
   const selectedKey = items
     .flatMap(e => e.items)
-    .find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
+    .find(({ path }) => path && pathname.includes(path.split('?')[0]))?.id;
 
   return (
     <Grid columns="auto 1fr" width="100%" height="100%">

src/app/(main)/settings/teams/TeamsSettingsPage.tsx

@@ -9,7 +9,7 @@ export function TeamsSettingsPage() {
     <Column gap="6">
       <TeamsHeader />
       <Panel>
-        <TeamsDataTable showActions={true} />
+        <TeamsDataTable />
       </Panel>
     </Column>
   );

src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx

@@ -3,16 +3,13 @@ import { Column } from '@umami/react-zen';
 import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
 import { WebsiteSettings } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettings';
 import { WebsiteSettingsHeader } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettingsHeader';
-import { Panel } from '@/components/common/Panel';
 
 export function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
       <Column gap="6" margin="2">
         <WebsiteSettingsHeader />
-        <Panel>
-          <WebsiteSettings websiteId={websiteId} />
-        </Panel>
+        <WebsiteSettings websiteId={websiteId} />
       </Column>
     </WebsiteProvider>
   );

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

@@ -6,12 +6,11 @@ import {
   Button,
   FormSubmitButton,
 } from '@umami/react-zen';
-import { useMessages, useModified, useUpdateQuery } from '@/components/hooks';
+import { useMessages, useUpdateQuery } from '@/components/hooks';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels, getErrorMessage } = useMessages();
-  const { mutate, error } = useUpdateQuery('/teams/join');
-  const { touch } = useModified();
+  const { mutate, error, isPending, touch } = useUpdateQuery('/teams/join');
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -34,7 +33,9 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
       </FormField>
       <FormButtons>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
-        <FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
+        <FormSubmitButton variant="primary" isLoading={isPending} isDisabled={isPending}>
+          {formatMessage(labels.join)}
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

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

@@ -1,17 +1,13 @@
-import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
+import { DataColumn, DataTable } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import { Eye, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
-import { MenuButton } from '@/components/input/MenuButton';
 import { ReactNode } from 'react';
 
 export function TeamsTable({
   data = [],
-  showActions = false,
   renderLink,
 }: {
   data: any[];
-  showActions?: boolean;
   renderLink?: (row: any) => ReactNode;
 }) {
   const { formatMessage, labels } = useMessages();
@@ -30,34 +26,6 @@ export function TeamsTable({
       <DataColumn id="members" label={formatMessage(labels.members)} align="end">
         {(row: any) => row?._count?.members}
       </DataColumn>
-      {showActions ? (
-        <DataColumn id="action" label=" " align="end">
-          {(row: any) => {
-            const { id } = row;
-
-            return (
-              <MenuButton>
-                <MenuItem href={`/teams/${id}`}>
-                  <Row alignItems="center" gap>
-                    <Icon>
-                      <Eye />
-                    </Icon>
-                    <Text>{formatMessage(labels.view)}</Text>
-                  </Row>
-                </MenuItem>
-                <MenuItem href={`/settings/teams/${id}`}>
-                  <Row alignItems="center" gap>
-                    <Icon>
-                      <Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </Row>
-                </MenuItem>
-              </MenuButton>
-            );
-          }}
-        </DataColumn>
-      ) : null}
     </DataTable>
   );
 }

src/app/(main)/teams/[teamId]/TeamEditForm.tsx

@@ -14,10 +14,12 @@ const generateId = () => `team_${getRandomChars(16)}`;
 export function TeamEditForm({
   teamId,
   allowEdit,
+  showAccessCode,
   onSave,
 }: {
   teamId: string;
   allowEdit?: boolean;
+  showAccessCode?: boolean;
   onSave?: () => void;
 }) {
   const team = useTeam();
@@ -51,9 +53,11 @@ export function TeamEditForm({
             >
               <TextField isReadOnly={!allowEdit} />
             </FormField>
-            <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
-              <TextField isReadOnly allowCopy />
-            </FormField>
+            {showAccessCode && (
+              <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
+                <TextField isReadOnly allowCopy />
+              </FormField>
+            )}
             {allowEdit && (
               <FormButtons justifyContent="space-between">
                 <Button onPress={() => setValue('accessCode', generateId(), { shouldDirty: true })}>

src/app/(main)/teams/[teamId]/TeamMembersPage.tsx

@@ -1,25 +0,0 @@
-'use client';
-import { TeamMembersDataTable } from './TeamMembersDataTable';
-import { SectionHeader } from '@/components/common/SectionHeader';
-import { useLoginQuery, useMessages, useTeam } from '@/components/hooks';
-import { ROLES } from '@/lib/constants';
-import { Column } from '@umami/react-zen';
-
-export function TeamMembersPage({ teamId }: { teamId: string }) {
-  const team = useTeam();
-  const { user } = useLoginQuery();
-  const { formatMessage, labels } = useMessages();
-
-  const canEdit =
-    team?.members?.find(
-      ({ userId, role }) =>
-        (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
-    ) && user.role !== ROLES.viewOnly;
-
-  return (
-    <Column gap>
-      <SectionHeader title={formatMessage(labels.members)} />
-      <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
-    </Column>
-  );
-}

src/app/(main)/teams/[teamId]/TeamSettings.tsx

@@ -1,23 +1,20 @@
-import { useState } from 'react';
-import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
+import Link from 'next/link';
+import { Column, Icon, Text, Row } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation, useTeam } from '@/components/hooks';
-
 import { ROLES } from '@/lib/constants';
-import { Users } from '@/components/icons';
+import { Users, Arrow } from '@/components/icons';
 import { TeamLeaveButton } from '@/app/(main)/teams/TeamLeaveButton';
 import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
-import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
   const team: any = useTeam();
-  const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
-  const { query, pathname } = useNavigation();
-  const [tab, setTab] = useState(query?.tab || 'details');
+  const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
 
   const isAdmin = pathname.includes('/admin');
 
@@ -34,32 +31,32 @@ export function TeamSettings({ teamId }: { teamId: string }) {
       user.role !== ROLES.viewOnly);
 
   return (
-    <Column gap="6">
-      <PageHeader title={team?.name} icon={<Users />}>
-        {!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
-      </PageHeader>
-      <Panel>
-        <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
-          <TabList>
-            <Tab id="details">{formatMessage(labels.details)}</Tab>
-            <Tab id="members">{formatMessage(labels.members)}</Tab>
-            <Tab id="websites">{formatMessage(labels.websites)}</Tab>
-            {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
-          </TabList>
-          <TabPanel id="details" style={{ width: 500 }}>
-            <TeamEditForm teamId={teamId} allowEdit={canEdit} />
-          </TabPanel>
-          <TabPanel id="members">
-            <TeamMembersDataTable teamId={teamId} allowEdit />
-          </TabPanel>
-          <TabPanel id="websites">
-            <TeamWebsitesDataTable teamId={teamId} allowEdit />
-          </TabPanel>
-          <TabPanel id="manage">
+    <>
+      <Link href="/settings/teams">
+        <Row marginTop="2" alignItems="center" gap>
+          <Icon rotate={180}>
+            <Arrow />
+          </Icon>
+          <Text>{formatMessage(labels.teams)}</Text>
+        </Row>
+      </Link>
+
+      <Column gap="6">
+        <PageHeader title={team?.name} icon={<Users />}>
+          {!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
+        </PageHeader>
+        <Panel>
+          <TeamEditForm teamId={teamId} allowEdit={canEdit} showAccessCode={canEdit} />
+        </Panel>
+        <Panel>
+          <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
+        </Panel>
+        {isTeamOwner && (
+          <Panel>
             <TeamManage teamId={teamId} />
-          </TabPanel>
-        </Tabs>
-      </Panel>
-    </Column>
+          </Panel>
+        )}
+      </Column>
+    </>
   );
 }

src/app/(main)/websites/[websiteId]/settings/WebsiteEditForm.tsx

@@ -5,7 +5,7 @@ import { DOMAIN_REGEX } from '@/lib/constants';
 export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
   const website = useWebsite();
   const { formatMessage, labels, messages, getErrorMessage } = useMessages();
-  const { mutate, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
+  const { mutate, error, touch, toast, isPending } = useUpdateQuery(`/websites/${websiteId}`);
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -45,7 +45,12 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
         <TextField />
       </FormField>
       <FormButtons>
-        <FormSubmitButton data-test="button-submit" variant="primary">
+        <FormSubmitButton
+          data-test="button-submit"
+          variant="primary"
+          isLoading={isPending}
+          isDisabled={isPending}
+        >
           {formatMessage(labels.save)}
         </FormSubmitButton>
       </FormButtons>

src/app/(main)/websites/[websiteId]/settings/WebsiteSettings.tsx

@@ -1,34 +1,28 @@
-import { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
-import { useMessages, useWebsite } from '@/components/hooks';
+import { Column } from '@umami/react-zen';
+import { useWebsite } from '@/components/hooks';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
 import { WebsiteData } from './WebsiteData';
 import { WebsiteEditForm } from './WebsiteEditForm';
+import { Panel } from '@/components/common/Panel';
 
 export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
   const website = useWebsite();
-  const { formatMessage, labels } = useMessages();
 
   return (
-    <Tabs>
-      <TabList>
-        <Tab id="details">{formatMessage(labels.details)}</Tab>
-        <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
-        <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
-        <Tab id="manage">{formatMessage(labels.manage)}</Tab>
-      </TabList>
-      <TabPanel id="details" style={{ width: 500 }}>
+    <Column gap="6">
+      <Panel>
         <WebsiteEditForm websiteId={websiteId} />
-      </TabPanel>
-      <TabPanel id="tracking">
+      </Panel>
+      <Panel>
         <WebsiteTrackingCode websiteId={websiteId} />
-      </TabPanel>
-      <TabPanel id="share" style={{ width: 500 }}>
+      </Panel>
+      <Panel>
         <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
-      </TabPanel>
-      <TabPanel id="manage">
+      </Panel>
+      <Panel>
         <WebsiteData websiteId={websiteId} />
-      </TabPanel>
-    </Tabs>
+      </Panel>
+    </Column>
   );
 }

src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx

@@ -1,4 +1,4 @@
-import { TextField, Text, Column } from '@umami/react-zen';
+import { TextField, Text, Column, Label } from '@umami/react-zen';
 import { useMessages, useConfig } from '@/components/hooks';
 
 const SCRIPT_NAME = 'script.js';
@@ -10,7 +10,7 @@ export function WebsiteTrackingCode({
   websiteId: string;
   hostUrl?: string;
 }) {
-  const { formatMessage, messages } = useMessages();
+  const { formatMessage, messages, labels } = useMessages();
   const config = useConfig();
 
   const trackerScriptName =
@@ -26,7 +26,8 @@ export function WebsiteTrackingCode({
 
   return (
     <Column gap>
-      <Text>{formatMessage(messages.trackingCode)}</Text>
+      <Label>{formatMessage(labels.trackingCode)}</Label>
+      <Text color="muted">{formatMessage(messages.trackingCode)}</Text>
       <TextField value={code} isReadOnly allowCopy asTextArea resize="none" />
     </Column>
   );

src/app/api/teams/join/route.ts

@@ -1,6 +1,5 @@
 import { z } from 'zod';
-import { unauthorized, json, badRequest, notFound } from '@/lib/response';
-import { canCreateTeam } from '@/permissions';
+import { json, badRequest, notFound } from '@/lib/response';
 import { parseRequest } from '@/lib/request';
 import { ROLES } from '@/lib/constants';
 import { createTeamUser, findTeam, getTeamUser } from '@/queries';
@@ -16,10 +15,6 @@ export async function POST(request: Request) {
     return error();
   }
 
-  if (!(await canCreateTeam(auth))) {
-    return unauthorized();
-  }
-
   const { accessCode } = body;
 
   const team = await findTeam({
@@ -29,7 +24,7 @@ export async function POST(request: Request) {
   });
 
   if (!team) {
-    return notFound({ message: 'Team not found.' });
+    return notFound({ message: 'Team not found.', code: 'team-not-found' });
   }
 
   const teamUser = await getTeamUser(team.id, auth.user.id);

src/app/logout/LogoutPage.tsx

@@ -8,23 +8,18 @@ import { removeClientAuthToken } from '@/lib/client';
 export function LogoutPage() {
   const router = useRouter();
   const { post } = useApi();
-  const disabled = process.env.cloudUrl;
 
   useEffect(() => {
     async function logout() {
       await post('/auth/logout');
-    }
-
-    if (!disabled) {
-      removeClientAuthToken();
-
-      logout();
 
       router.push('/login');
-
-      return () => setUser(null);
     }
-  }, [disabled, router, post]);
+
+    removeClientAuthToken();
+    setUser(null);
+    logout();
+  }, [router, post]);
 
   return null;
 }

src/components/input/SettingsButton.tsx

@@ -10,7 +10,7 @@ import {
   MenuSection,
 } from '@umami/react-zen';
 import { useMessages, useLoginQuery, useNavigation, useConfig } from '@/components/hooks';
-import { LogOut, LockKeyhole, Settings } from '@/components/icons';
+import { LogOut, LockKeyhole, Settings, UserCircle } from '@/components/icons';
 
 export function SettingsButton() {
   const { formatMessage, labels } = useMessages();
@@ -33,7 +33,7 @@ export function SettingsButton() {
     <MenuTrigger>
       <Button data-test="button-profile" variant="quiet" autoFocus={false}>
         <Icon>
-          <Settings />
+          <UserCircle />
         </Icon>
       </Button>
       <Popover placement="bottom end">