Refactored settings. Updated sidebar.

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

@@ -0,0 +1,19 @@
+'use client';
+import { TeamsDataTable } from '@/app/(main)/teams/TeamsDataTable';
+import { TeamsHeader } from '@/app/(main)/teams/TeamsHeader';
+import { Column } from '@umami/react-zen';
+import { Panel } from '@/components/common/Panel';
+import { PageBody } from '@/components/common/PageBody';
+
+export function TeamsPage() {
+  return (
+    <PageBody>
+      <Column gap="6">
+        <TeamsHeader />
+        <Panel>
+          <TeamsDataTable />
+        </Panel>
+      </Column>
+    </PageBody>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { Eye, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
 import { MenuButton } from '@/components/input/MenuButton';
@@ -14,20 +14,21 @@ export function TeamsTable({
   showActions?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
+  const { renderUrl } = useNavigation();
 
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={`/settings/teams/${row.id}`}>{row.name}</Link>}
+        {(row: any) => <Link href={renderUrl(`/settings/teams/${row.id}`)}>{row.name}</Link>}
       </DataColumn>
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
-        {(row: any) => row.users.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
+        {(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}
+        {(row: any) => row?._count?.websites}
       </DataColumn>
       <DataColumn id="members" label={formatMessage(labels.members)} align="end">
-        {(row: any) => row._count.users}
+        {(row: any) => row?._count?.members}
       </DataColumn>
       {showActions ? (
         <DataColumn id="action" label=" " align="end">

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

@@ -13,7 +13,7 @@ import { TeamMembersDataTable } from './TeamMembersDataTable';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 
-export function TeamDetails({ teamId }: { teamId: string }) {
+export function TeamSettings({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
@@ -23,12 +23,12 @@ export function TeamDetails({ teamId }: { teamId: string }) {
   const isAdmin = pathname.includes('/admin');
 
   const isTeamOwner =
-    !!team?.teamUser?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
+    !!team?.members?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
     user.role !== ROLES.viewOnly;
 
   const canEdit =
     user.isAdmin ||
-    (!!team?.teamUser?.find(
+    (!!team?.members?.find(
       ({ userId, role }) =>
         (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
     ) &&

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

@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import { TeamsPage } from './TeamsPage';
+
+export default function () {
+  return <TeamsPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Teams',
+};