New admin section.

src/app/(main)/admin/teams/AdminTeamsDataTable.tsx

@@ -0,0 +1,19 @@
+import { DataGrid } from '@/components/common/DataGrid';
+import { useTeamsQuery } from '@/components/hooks';
+import { AdminTeamsTable } from './AdminTeamsTable';
+import { ReactNode } from 'react';
+
+export function AdminTeamsDataTable({
+  showActions,
+}: {
+  showActions?: boolean;
+  children?: ReactNode;
+}) {
+  const queryResult = useTeamsQuery();
+
+  return (
+    <DataGrid query={queryResult} allowSearch={true}>
+      {({ data }) => <AdminTeamsTable data={data} showActions={showActions} />}
+    </DataGrid>
+  );
+}

src/app/(main)/admin/teams/AdminTeamsPage.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { AdminTeamsDataTable } from './AdminTeamsDataTable';
+import { Column } from '@umami/react-zen';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { useMessages } from '@/components/hooks';
+
+export function AdminTeamsPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Column gap>
+      <SectionHeader title={formatMessage(labels.teams)} />
+      <AdminTeamsDataTable />
+    </Column>
+  );
+}

src/app/(main)/admin/teams/AdminTeamsTable.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { Row, Text, Icon, DataTable, DataColumn, MenuItem, Modal } from '@umami/react-zen';
+import Link from 'next/link';
+import { Trash } from '@/components/icons';
+import { useMessages } from '@/components/hooks';
+import { Edit } from '@/components/icons';
+import { MenuButton } from '@/components/input/MenuButton';
+import { DateDistance } from '@/components/common/DateDistance';
+
+export function AdminTeamsTable({
+  data = [],
+  showActions = true,
+}: {
+  data: any[];
+  showActions?: boolean;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const [deleteUser, setDeleteUser] = useState(null);
+
+  return (
+    <>
+      <DataTable data={data}>
+        <DataColumn id="name" label={formatMessage(labels.name)} width="2fr">
+          {(row: any) => <Link href={`/admin/teams/${row.id}`}>{row.name}</Link>}
+        </DataColumn>
+        <DataColumn id="websites" label={formatMessage(labels.members)}>
+          {(row: any) => row?._count?.teamUser}
+        </DataColumn>
+        <DataColumn id="members" label={formatMessage(labels.websites)}>
+          {(row: any) => row?._count?.website}
+        </DataColumn>
+        <DataColumn id="owner" label={formatMessage(labels.owner)} width="200px">
+          {(row: any) => (
+            <Text title={row?.teamUser?.[0]?.user?.username} truncate>
+              {row?.teamUser?.[0]?.user?.username}
+            </Text>
+          )}
+        </DataColumn>
+        <DataColumn id="created" label={formatMessage(labels.created)} width="160px">
+          {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+        </DataColumn>
+        {showActions && (
+          <DataColumn id="action" align="end" width="50px">
+            {(row: any) => {
+              const { id } = row;
+
+              return (
+                <MenuButton>
+                  <MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
+                    <Row alignItems="center" gap>
+                      <Icon>
+                        <Edit />
+                      </Icon>
+                      <Text>{formatMessage(labels.edit)}</Text>
+                    </Row>
+                  </MenuItem>
+                  <MenuItem
+                    id="delete"
+                    onAction={() => setDeleteUser(row)}
+                    data-test="link-button-delete"
+                  >
+                    <Row alignItems="center" gap>
+                      <Icon>
+                        <Trash />
+                      </Icon>
+                      <Text>{formatMessage(labels.delete)}</Text>
+                    </Row>
+                  </MenuItem>
+                </MenuButton>
+              );
+            }}
+          </DataColumn>
+        )}
+      </DataTable>
+      <Modal isOpen={!!deleteUser}></Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,10 @@
+'use client';
+import { TeamDetails } from '@/app/(main)/teams/[teamId]/settings/team/TeamDetails';
+
+export function AdminTeamPage({ teamId }: { teamId: string }) {
+  return (
+    <>
+      <TeamDetails teamId={teamId} />
+    </>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { AdminTeamPage } from './AdminTeamPage';
+import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { Metadata } from 'next';
+
+export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
+  const { teamId } = await params;
+
+  return (
+    <TeamProvider teamId={teamId}>
+      <AdminTeamPage teamId={teamId} />
+    </TeamProvider>
+  );
+}
+
+export const metadata: Metadata = {
+  title: 'Team',
+};

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

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

src/app/(main)/admin/users/UsersDataTable.tsx

@@ -7,7 +7,7 @@ export function UsersDataTable({ showActions }: { showActions?: boolean; childre
   const queryResult = useUsersQuery();
 
   return (
-    <DataGrid queryResult={queryResult} allowSearch={true}>
+    <DataGrid query={queryResult} allowSearch={true}>
       {({ data }) => <UsersTable data={data} showActions={showActions} />}
     </DataGrid>
   );

src/app/(main)/admin/users/UsersPage.tsx

@@ -5,7 +5,7 @@ import { SectionHeader } from '@/components/common/SectionHeader';
 import { useMessages } from '@/components/hooks';
 import { UserAddButton } from './UserAddButton';
 
-export function UsersSettingsPage() {
+export function UsersPage() {
   const { formatMessage, labels } = useMessages();
 
   const handleSave = () => {};

src/app/(main)/admin/users/UsersTable.tsx

@@ -1,22 +1,13 @@
 import { useState } from 'react';
-import {
-  Row,
-  Text,
-  Icon,
-  DataTable,
-  DataColumn,
-  MenuItem,
-  MenuSeparator,
-  Modal,
-} from '@umami/react-zen';
+import { Row, Text, Icon, DataTable, DataColumn, MenuItem, Modal } from '@umami/react-zen';
 import Link from 'next/link';
-import { formatDistance } from 'date-fns';
 import { ROLES } from '@/lib/constants';
 import { Trash } from '@/components/icons';
-import { useMessages, useLocale } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
 import { Edit } from '@/components/icons';
 import { MenuButton } from '@/components/input/MenuButton';
 import { UserDeleteForm } from './UserDeleteForm';
+import { DateDistance } from '@/components/common/DateDistance';
 
 export function UsersTable({
   data = [],
@@ -26,7 +17,6 @@ export function UsersTable({
   showActions?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { dateLocale } = useLocale();
   const [deleteUser, setDeleteUser] = useState(null);
 
   return (
@@ -42,17 +32,12 @@ export function UsersTable({
             )
           }
         </DataColumn>
-        <DataColumn id="created" label={formatMessage(labels.created)}>
-          {(row: any) =>
-            formatDistance(new Date(row.createdAt), new Date(), {
-              addSuffix: true,
-              locale: dateLocale,
-            })
-          }
-        </DataColumn>
-        <DataColumn id="websites" label={formatMessage(labels.websites)} width="100px">
+        <DataColumn id="websites" label={formatMessage(labels.websites)}>
           {(row: any) => row._count.websiteUser}
         </DataColumn>
+        <DataColumn id="created" label={formatMessage(labels.created)}>
+          {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+        </DataColumn>
         {showActions && (
           <DataColumn id="action" align="end" width="100px">
             {(row: any) => {
@@ -68,7 +53,6 @@ export function UsersTable({
                       <Text>{formatMessage(labels.edit)}</Text>
                     </Row>
                   </MenuItem>
-                  <MenuSeparator />
                   <MenuItem
                     id="delete"
                     onAction={() => setDeleteUser(row)}

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

@@ -1,12 +1,12 @@
 import { DataGrid } from '@/components/common/DataGrid';
-import { useWebsitesQuery } from '@/components/hooks';
+import { useUserWebsitesQuery } from '@/components/hooks';
 import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable';
 
 export function UserWebsites({ userId }) {
-  const queryResult = useWebsitesQuery({ userId });
+  const queryResult = useUserWebsitesQuery({ userId });
 
   return (
-    <DataGrid queryResult={queryResult}>
+    <DataGrid query={queryResult}>
       {({ data }) => (
         <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
       )}

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

@@ -8,5 +8,5 @@ export default async function ({ params }: { params: Promise<{ userId: string }>
 }
 
 export const metadata: Metadata = {
-  title: 'User Settings',
+  title: 'Users',
 };

src/app/(main)/admin/users/page.tsx

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import { UsersSettingsPage } from './UsersSettingsPage';
+import { UsersPage } from './UsersPage';
 
 export default function () {
-  return <UsersSettingsPage />;
+  return <UsersPage />;
 }
 export const metadata: Metadata = {
   title: 'Users',

src/app/(main)/admin/websites/AdminWebsitesDataTable.tsx

@@ -0,0 +1,13 @@
+import { DataGrid } from '@/components/common/DataGrid';
+import { useWebsitesQuery } from '@/components/hooks';
+import { AdminWebsitesTable } from './AdminWebsitesTable';
+
+export function AdminWebsitesDataTable() {
+  const query = useWebsitesQuery();
+
+  return (
+    <DataGrid query={query} allowSearch={true}>
+      {props => <AdminWebsitesTable {...props} />}
+    </DataGrid>
+  );
+}

src/app/(main)/admin/websites/AdminWebsitesPage.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { AdminWebsitesDataTable } from './AdminWebsitesDataTable';
+import { Column } from '@umami/react-zen';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { useMessages } from '@/components/hooks';
+
+export function AdminWebsitesPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Column gap>
+      <SectionHeader title={formatMessage(labels.websites)} />
+      <AdminWebsitesDataTable />
+    </Column>
+  );
+}

src/app/(main)/admin/websites/AdminWebsitesTable.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import Link from 'next/link';
+import { Row, Text, Icon, DataTable, DataColumn, MenuItem, Modal } from '@umami/react-zen';
+import { Trash, Users } from '@/components/icons';
+import { useMessages } from '@/components/hooks';
+import { Edit } from '@/components/icons';
+import { MenuButton } from '@/components/input/MenuButton';
+import { DateDistance } from '@/components/common/DateDistance';
+
+export function AdminWebsitesTable({ data = [] }: { data: any[] }) {
+  const { formatMessage, labels } = useMessages();
+  const [deleteUser, setDeleteUser] = useState(null);
+
+  return (
+    <>
+      <DataTable data={data}>
+        <DataColumn id="name" label={formatMessage(labels.name)}>
+          {(row: any) => (
+            <Text truncate>
+              <Link href={`/admin/websites/${row.id}`}>{row.name}</Link>
+            </Text>
+          )}
+        </DataColumn>
+        <DataColumn id="domain" label={formatMessage(labels.domain)}>
+          {(row: any) => <Text truncate>{row.domain}</Text>}
+        </DataColumn>
+        <DataColumn id="owner" label={formatMessage(labels.owner)}>
+          {(row: any) => {
+            if (row?.team) {
+              return (
+                <Row alignItems="center" gap>
+                  <Icon>
+                    <Users />
+                  </Icon>
+                  <Text truncate>
+                    <Link href={`/admin/teams/${row?.team?.id}`}>{row?.team?.name}</Link>
+                  </Text>
+                </Row>
+              );
+            }
+            return (
+              <Text truncate>
+                <Link href={`/admin/users/${row?.user?.id}`}>{row?.user?.username}</Link>
+              </Text>
+            );
+          }}
+        </DataColumn>
+        <DataColumn id="created" label={formatMessage(labels.created)} width="180px">
+          {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+        </DataColumn>
+        <DataColumn id="action" align="end" width="50px">
+          {(row: any) => {
+            const { id } = row;
+
+            return (
+              <MenuButton>
+                <MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
+                  <Row alignItems="center" gap>
+                    <Icon>
+                      <Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Row>
+                </MenuItem>
+                <MenuItem
+                  id="delete"
+                  onAction={() => setDeleteUser(row)}
+                  data-test="link-button-delete"
+                >
+                  <Row alignItems="center" gap>
+                    <Icon>
+                      <Trash />
+                    </Icon>
+                    <Text>{formatMessage(labels.delete)}</Text>
+                  </Row>
+                </MenuItem>
+              </MenuButton>
+            );
+          }}
+        </DataColumn>
+      </DataTable>
+      <Modal isOpen={!!deleteUser}></Modal>
+    </>
+  );
+}

src/app/(main)/admin/websites/page.tsx

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

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

@@ -1,6 +1,6 @@
 import { DataGrid } from '@/components/common/DataGrid';
 import { TeamsTable } from '@/app/(main)/settings/teams/TeamsTable';
-import { useLoginQuery, useTeamsQuery } from '@/components/hooks';
+import { useLoginQuery, useUserTeamsQuery } from '@/components/hooks';
 import { ReactNode } from 'react';
 
 export function TeamsDataTable({
@@ -13,10 +13,10 @@ export function TeamsDataTable({
   children?: ReactNode;
 }) {
   const { user } = useLoginQuery();
-  const queryResult = useTeamsQuery(user.id);
+  const queryResult = useUserTeamsQuery(user.id);
 
   return (
-    <DataGrid queryResult={queryResult} renderEmpty={() => children}>
+    <DataGrid query={queryResult} renderEmpty={() => children}>
       {({ data }) => {
         return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
       }}

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -1,6 +1,6 @@
 import { WebsitesTable } from './WebsitesTable';
 import { DataGrid } from '@/components/common/DataGrid';
-import { useWebsitesQuery } from '@/components/hooks';
+import { useUserWebsitesQuery } from '@/components/hooks';
 
 export function WebsitesDataTable({
   teamId,
@@ -13,10 +13,10 @@ export function WebsitesDataTable({
   allowView?: boolean;
   showActions?: boolean;
 }) {
-  const queryResult = useWebsitesQuery({ teamId });
+  const queryResult = useUserWebsitesQuery({ teamId });
 
   return (
-    <DataGrid queryResult={queryResult} allowSearch allowPaging>
+    <DataGrid query={queryResult} allowSearch allowPaging>
       {({ data }) => (
         <WebsitesTable
           teamId={teamId}

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

@@ -4,7 +4,7 @@ import {
   useLoginQuery,
   useMessages,
   useModified,
-  useTeamsQuery,
+  useUserTeamsQuery,
   useNavigation,
 } from '@/components/hooks';
 import { WebsiteDeleteForm } from './WebsiteDeleteForm';
@@ -19,11 +19,11 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
   const { touch } = useModified();
   const { teamId, renderUrl } = useNavigation();
   const router = useRouter();
-  const { result } = useTeamsQuery(user.id);
+  const { data } = useUserTeamsQuery(user.id);
   const canTransferWebsite =
     (
       !teamId &&
-      result.data.filter(({ teamUser }) =>
+      data.filter(({ teamUser }) =>
         teamUser.find(
           ({ role, userId }) =>
             [ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
@@ -31,7 +31,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
       )
     ).length > 0 ||
     (teamId &&
-      !!result?.data
+      !!data
         ?.find(({ id }) => id === teamId)
         ?.teamUser.find(({ role, userId }) => role === ROLES.teamOwner && userId === user.id));
 

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

@@ -10,7 +10,7 @@ import {
   ListItem,
   Text,
 } from '@umami/react-zen';
-import { useApi, useLoginQuery, useMessages, useTeamsQuery } from '@/components/hooks';
+import { useApi, useLoginQuery, useMessages, useUserTeamsQuery } from '@/components/hooks';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { ROLES } from '@/lib/constants';
 
@@ -31,7 +31,7 @@ export function WebsiteTransferForm({
   const { mutate, error } = useMutation({
     mutationFn: (data: any) => post(`/websites/${websiteId}/transfer`, data),
   });
-  const { result, query } = useTeamsQuery(user.id);
+  const { result, query } = useUserTeamsQuery(user.id);
   const isTeamWebsite = !!website?.teamId;
 
   const items = result.data.filter(({ teamUser }) =>

src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx

@@ -12,7 +12,7 @@ export function TeamMembersDataTable({
   const queryResult = useTeamMembersQuery(teamId);
 
   return (
-    <DataGrid queryResult={queryResult}>
+    <DataGrid query={queryResult}>
       {({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
     </DataGrid>
   );

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

@@ -48,7 +48,7 @@ export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?
               rules={{ required: formatMessage(labels.required) }}
             >
               {allowEdit && <TextField />}
-              {!allowEdit && team.name}
+              {!allowEdit && team?.name}
             </FormField>
             {!cloudMode && allowEdit && (
               <FormField name="accessCode" label={formatMessage(labels.accessCode)}>

src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx

@@ -12,7 +12,7 @@ export function TeamWebsitesDataTable({
   const queryResult = useTeamWebsitesQuery(teamId);
 
   return (
-    <DataGrid queryResult={queryResult}>
+    <DataGrid query={queryResult}>
       {({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
     </DataGrid>
   );

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

@@ -37,7 +37,7 @@ export function EventsDataTable({
 
   return (
     <DataGrid
-      queryResult={queryResult}
+      query={queryResult}
       allowSearch={true}
       autoFocus={false}
       allowPaging={true}

src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx

@@ -6,7 +6,7 @@ export function SessionsDataTable({ websiteId }: { websiteId?: string; teamId?:
   const queryResult = useWebsiteSessionsQuery(websiteId);
 
   return (
-    <DataGrid queryResult={queryResult} allowPaging allowSearch>
+    <DataGrid query={queryResult} allowPaging allowSearch>
       {({ data }) => {
         return <SessionsTable data={data} showDomain={!websiteId} />;
       }}

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

@@ -0,0 +1,54 @@
+import { z } from 'zod';
+import { parseRequest } from '@/lib/request';
+import { json, unauthorized } from '@/lib/response';
+import { pagingParams, searchParams } from '@/lib/schema';
+import { canViewAllTeams } from '@/lib/auth';
+import { getTeams } from '@/queries/prisma/team';
+
+export async function GET(request: Request) {
+  const schema = z.object({
+    ...pagingParams,
+    ...searchParams,
+  });
+
+  const { auth, query, error } = await parseRequest(request, schema);
+
+  if (error) {
+    return error();
+  }
+
+  if (!(await canViewAllTeams(auth))) {
+    return unauthorized();
+  }
+
+  const teams = await getTeams(
+    {
+      include: {
+        _count: {
+          select: {
+            teamUser: true,
+            website: true,
+          },
+        },
+        teamUser: {
+          select: {
+            user: {
+              omit: {
+                password: true,
+              },
+            },
+          },
+          where: {
+            role: 'team-owner',
+          },
+        },
+      },
+      orderBy: {
+        createdAt: 'desc',
+      },
+    },
+    query,
+  );
+
+  return json(teams);
+}

src/app/api/admin/users/route.ts

@@ -1,13 +1,14 @@
 import { z } from 'zod';
 import { parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
-import { pagingParams } from '@/lib/schema';
+import { pagingParams, searchParams } from '@/lib/schema';
 import { canViewUsers } from '@/lib/auth';
 import { getUsers } from '@/queries/prisma/user';
 
 export async function GET(request: Request) {
   const schema = z.object({
     ...pagingParams,
+    ...searchParams,
   });
 
   const { auth, query, error } = await parseRequest(request, schema);
@@ -31,6 +32,9 @@ export async function GET(request: Request) {
           },
         },
       },
+      orderBy: {
+        createdAt: 'desc',
+      },
     },
     query,
   );

src/app/api/admin/websites/route.ts

@@ -1,17 +1,15 @@
 import { z } from 'zod';
 import { parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
-import { pagingParams } from '@/lib/schema';
+import { pagingParams, searchParams } from '@/lib/schema';
 import { canViewAllWebsites } from '@/lib/auth';
 import { getWebsites } from '@/queries/prisma/website';
 import { ROLES } from '@/lib/constants';
 
 export async function GET(request: Request) {
   const schema = z.object({
-    userId: z.string().uuid(),
-    includeOwnedTeams: z.string().optional(),
-    includeAllTeams: z.string().optional(),
     ...pagingParams,
+    ...searchParams,
   });
 
   const { auth, query, error } = await parseRequest(request, schema);
@@ -24,46 +22,13 @@ export async function GET(request: Request) {
     return unauthorized();
   }
 
-  const { userId, includeOwnedTeams, includeAllTeams } = query;
-
   const websites = await getWebsites(
     {
-      where: {
-        OR: [
-          ...(userId && [{ userId }]),
-          ...(userId && includeOwnedTeams
-            ? [
-                {
-                  team: {
-                    deletedAt: null,
-                    teamUser: {
-                      some: {
-                        role: ROLES.teamOwner,
-                        userId,
-                      },
-                    },
-                  },
-                },
-              ]
-            : []),
-          ...(userId && includeAllTeams
-            ? [
-                {
-                  team: {
-                    deletedAt: null,
-                    teamUser: {
-                      some: {
-                        userId,
-                      },
-                    },
-                  },
-                },
-              ]
-            : []),
-        ],
-      },
       include: {
         user: {
+          where: {
+            deletedAt: null,
+          },
           select: {
             username: true,
             id: true,
@@ -82,6 +47,9 @@ export async function GET(request: Request) {
           },
         },
       },
+      orderBy: {
+        createdAt: 'desc',
+      },
     },
     query,
   );

src/components/common/DataGrid.tsx

@@ -1,13 +1,15 @@
-import { ReactNode, useState } from 'react';
+import { ReactNode, useState, useCallback } from 'react';
 import { SearchField, Row, Column } from '@umami/react-zen';
+import { UseQueryResult } from '@tanstack/react-query';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Pager } from '@/components/common/Pager';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { PageResult } from '@/lib/types';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
 export interface DataGridProps {
-  queryResult: any;
+  query: UseQueryResult<PageResult<any>, any>;
   searchDelay?: number;
   allowSearch?: boolean;
   allowPaging?: boolean;
@@ -17,7 +19,7 @@ export interface DataGridProps {
 }
 
 export function DataGrid({
-  queryResult,
+  query,
   searchDelay = 600,
   allowSearch,
   allowPaging = true,
@@ -26,20 +28,23 @@ export function DataGrid({
   children,
 }: DataGridProps) {
   const { formatMessage, labels } = useMessages();
-  const { data, error, isLoading, isFetching, setParams } = queryResult;
-  const { router, updateParams } = useNavigation();
-  const [search, setSearch] = useState('');
+  const { data, error, isLoading, isFetching } = query;
+  const { router, updateParams, query: queryParams } = useNavigation();
+  const [search, setSearch] = useState(queryParams?.saerch || data?.search || '');
 
-  const handleSearch = (search: string) => {
-    setSearch(search);
-    setParams(params => ({ ...params, search }));
-    router.push(updateParams({ search }));
+  const handleSearch = (value: string) => {
+    if (value !== search) {
+      setSearch(value);
+      router.push(updateParams({ search: value, page: 1 }));
+    }
   };
 
-  const handlePageChange = (page: number) => {
-    setParams(params => ({ ...params, page }));
-    router.push(updateParams({ page }));
-  };
+  const handlePageChange = useCallback(
+    (page: number) => {
+      router.push(updateParams({ search, page }));
+    },
+    [search],
+  );
 
   return (
     <Column gap="4" minHeight="300px">

src/components/common/LinkButton.tsx

@@ -17,13 +17,20 @@ export function LinkButton({
   scroll = true,
   target,
   children,
+  isDisabled,
   ...props
 }: LinkButtonProps) {
   const { dir } = useLocale();
 
   return (
-    <Button {...props} variant={variant} asChild>
-      <Link href={href} dir={dir} scroll={scroll} target={target}>
+    <Button {...props} variant={variant} isDisabled={isDisabled} asChild>
+      <Link
+        href={href}
+        dir={dir}
+        scroll={scroll}
+        target={target}
+        style={{ pointerEvents: isDisabled ? 'none' : undefined }}
+      >
         {children}
       </Link>
     </Button>

src/components/common/Pager.tsx

@@ -34,9 +34,14 @@ export function Pager({ page, pageSize, count, onPageChange }: PagerProps) {
 
   return (
     <Row alignItems="center" justifyContent="space-between" gap="3" flexGrow={1}>
-      <Text>{formatMessage(labels.numberOfRecords, { x: count })}</Text>
+      <Text>{formatMessage(labels.numberOfRecords, { x: count.toLocaleString() })}</Text>
       <Row alignItems="center" justifyContent="flex-end" gap="3">
-        <Text>{formatMessage(labels.pageOf, { current: page, total: maxPage })}</Text>
+        <Text>
+          {formatMessage(labels.pageOf, {
+            current: page.toLocaleString(),
+            total: maxPage.toLocaleString(),
+          })}
+        </Text>
         <Button onPress={() => handlePageChange(-1)} isDisabled={firstPage}>
           <Icon size="sm" rotate={180}>
             <Chevron />

src/components/hooks/index.ts

@@ -19,6 +19,8 @@ export * from './queries/useWebsiteSessionsWeeklyQuery';
 export * from './queries/useShareTokenQuery';
 export * from './queries/useTeamQuery';
 export * from './queries/useTeamsQuery';
+export * from './queries/useUserTeamsQuery';
+export * from './queries/useUserWebsitesQuery';
 export * from './queries/useTeamWebsitesQuery';
 export * from './queries/useTeamMembersQuery';
 export * from './queries/useUserQuery';

src/components/hooks/queries/useTeamsQuery.ts

@@ -1,15 +1,20 @@
 import { useApi } from '../useApi';
 import { useModified } from '../useModified';
+import { usePagedQuery } from '@/components/hooks';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useTeamsQuery(userId: string) {
-  const { get, useQuery } = useApi();
+export function useTeamsQuery(params?: Record<string, any>, options?: ReactQueryOptions) {
+  const { get } = useApi();
   const { modified } = useModified(`teams`);
 
-  return useQuery({
-    queryKey: ['teams', { userId, modified }],
-    queryFn: () => {
-      return get(`/users/${userId}/teams`, { userId });
+  return usePagedQuery({
+    queryKey: ['websites', { modified, ...params }],
+    queryFn: pageParams => {
+      return get(`/admin/teams`, {
+        ...params,
+        ...pageParams,
+      });
     },
-    enabled: !!userId,
+    ...options,
   });
 }

src/components/hooks/queries/useUserTeamsQuery.ts

@@ -0,0 +1,15 @@
+import { useApi } from '../useApi';
+import { useModified } from '../useModified';
+
+export function useUserTeamsQuery(userId: string) {
+  const { get, useQuery } = useApi();
+  const { modified } = useModified(`teams`);
+
+  return useQuery({
+    queryKey: ['teams', { userId, modified }],
+    queryFn: () => {
+      return get(`/users/${userId}/teams`, { userId });
+    },
+    enabled: !!userId,
+  });
+}

src/components/hooks/queries/useUserWebsitesQuery.ts

@@ -0,0 +1,26 @@
+import { useApi } from '../useApi';
+import { usePagedQuery } from '../usePagedQuery';
+import { useLoginQuery } from './useLoginQuery';
+import { useModified } from '../useModified';
+import { ReactQueryOptions } from '@/lib/types';
+
+export function useUserWebsitesQuery(
+  { userId, teamId }: { userId?: string; teamId?: string },
+  params?: Record<string, any>,
+  options?: ReactQueryOptions,
+) {
+  const { get } = useApi();
+  const { user } = useLoginQuery();
+  const { modified } = useModified(`websites`);
+
+  return usePagedQuery({
+    queryKey: ['websites', { userId, teamId, modified, ...params }],
+    queryFn: pageParams => {
+      return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId || user.id}/websites`, {
+        ...params,
+        ...pageParams,
+      });
+    },
+    ...options,
+  });
+}

src/components/hooks/queries/useUsersQuery.ts

@@ -8,9 +8,9 @@ export function useUsersQuery() {
 
   return usePagedQuery({
     queryKey: ['users', { modified }],
-    queryFn: (params: any) => {
+    queryFn: (pageParams: any) => {
       return get('/admin/users', {
-        ...params,
+        ...pageParams,
       });
     },
   });

src/components/hooks/queries/useWebsitesQuery.ts

@@ -1,24 +1,18 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
-import { useLoginQuery } from './useLoginQuery';
 import { useModified } from '../useModified';
 import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsitesQuery(
-  { userId, teamId }: { userId?: string; teamId?: string },
-  params?: Record<string, any>,
-  options?: ReactQueryOptions,
-) {
+export function useWebsitesQuery(params?: Record<string, any>, options?: ReactQueryOptions) {
   const { get } = useApi();
-  const { user } = useLoginQuery();
   const { modified } = useModified(`websites`);
 
   return usePagedQuery({
-    queryKey: ['websites', { userId, teamId, modified, ...params }],
+    queryKey: ['websites', { modified, ...params }],
     queryFn: pageParams => {
-      return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId || user.id}/websites`, {
-        ...params,
+      return get(`/admin/websites`, {
         ...pageParams,
+        ...params,
       });
     },
     ...options,

src/components/hooks/useNavigation.ts

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from '@/lib/url';
 
@@ -7,18 +8,31 @@ export function useNavigation() {
   const searchParams = useSearchParams();
   const [, teamId] = pathname.match(/\/teams\/([a-f0-9-]+)/) || [];
   const [, websiteId] = pathname.match(/\/websites\/([a-f0-9-]+)/) || [];
-  const query = Object.fromEntries(searchParams);
+  const [queryParams, setQueryParams] = useState(Object.fromEntries(searchParams));
 
   const updateParams = (params?: Record<string, string | number>) => {
-    return !params ? pathname : buildUrl(pathname, { ...query, ...params });
+    return !params ? pathname : buildUrl(pathname, { ...queryParams, ...params });
   };
 
+  useEffect(() => {
+    setQueryParams(Object.fromEntries(searchParams));
+  }, [searchParams.toString()]);
+
   const renderUrl = (path: string, params?: Record<string, string | number> | false) => {
     return buildUrl(
       teamId ? `/teams/${teamId}${path}` : path,
-      params === false ? {} : { ...query, ...params },
+      params === false ? {} : { ...queryParams, ...params },
     );
   };
 
-  return { router, pathname, searchParams, query, teamId, websiteId, updateParams, renderUrl };
+  return {
+    router,
+    pathname,
+    searchParams,
+    query: queryParams,
+    teamId,
+    websiteId,
+    updateParams,
+    renderUrl,
+  };
 }

src/components/hooks/usePagedQuery.ts

@@ -1,28 +1,27 @@
-import { UseQueryOptions } from '@tanstack/react-query';
-import { useState } from 'react';
+import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 import { useApi } from './useApi';
 import { useNavigation } from './useNavigation';
+import { PageResult } from '@/lib/types';
 
-export function usePagedQuery({
+export function usePagedQuery<TData = any, TError = Error>({
   queryKey,
   queryFn,
   ...options
-}: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }) {
-  const { query: queryParams } = useNavigation();
-  const [params, setParams] = useState({
-    search: queryParams?.search ?? '',
-    page: queryParams?.page ?? '1',
-  });
-
+}: Omit<
+  UseQueryOptions<PageResult<TData>, TError, PageResult<TData>, readonly unknown[]>,
+  'queryFn' | 'queryKey'
+> & {
+  queryKey: readonly unknown[];
+  queryFn: (params?: object) => Promise<PageResult<TData>> | PageResult<TData>;
+}): UseQueryResult<PageResult<TData>, TError> {
+  const {
+    query: { page, search },
+  } = useNavigation();
   const { useQuery } = useApi();
 
-  return {
-    ...useQuery({
-      queryKey: [{ ...queryKey, ...params }],
-      queryFn: () => queryFn(params),
-      ...options,
-    }),
-    params,
-    setParams,
-  };
+  return useQuery<PageResult<TData>, TError>({
+    queryKey: [...queryKey, page, search] as const,
+    queryFn: () => queryFn({ page, search }),
+    ...options,
+  });
 }

src/components/input/TeamsButton.tsx

@@ -13,7 +13,7 @@ import {
   Row,
   Box,
 } from '@umami/react-zen';
-import { useLoginQuery, useMessages, useTeamsQuery, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useUserTeamsQuery, useNavigation } from '@/components/hooks';
 import { Chevron, User, Users } from '@/components/icons';
 
 export function TeamsButton({
@@ -25,7 +25,7 @@ export function TeamsButton({
 }) {
   const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
-  const { data } = useTeamsQuery(user.id);
+  const { data } = useUserTeamsQuery(user.id);
   const { teamId } = useNavigation();
   const router = useRouter();
   const team = data?.data?.find(({ id }) => id === teamId);

src/components/input/WebsiteSelect.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Select, SelectProps, ListItem } from '@umami/react-zen';
-import { useWebsitesQuery, useMessages } from '@/components/hooks';
+import { useUserWebsitesQuery, useMessages } from '@/components/hooks';
 
 export function WebsiteSelect({
   websiteId,
@@ -18,7 +18,7 @@ export function WebsiteSelect({
   const [search, setSearch] = useState('');
   const [selectedId, setSelectedId] = useState(websiteId);
 
-  const { data, isLoading } = useWebsitesQuery({ teamId }, { search, pageSize: 5 });
+  const { data, isLoading } = useUserWebsitesQuery({ teamId }, { search, pageSize: 5 });
 
   const handleSelect = (value: any) => {
     setSelectedId(value);

src/lib/auth.ts

@@ -288,6 +288,10 @@ export async function canCreateTeamWebsite({ user }: Auth, teamId: string) {
   return teamUser && hasPermission(teamUser.role, PERMISSIONS.websiteCreate);
 }
 
+export async function canViewAllTeams({ user }: Auth) {
+  return user.isAdmin;
+}
+
 export async function canCreateUser({ user }: Auth) {
   return user.isAdmin;
 }

src/lib/clickhouse.ts

@@ -149,7 +149,7 @@ async function pagedRawQuery(
   queryParams: Record<string, any>,
   filters: QueryFilters,
 ) {
-  const { page = 1, pageSize, orderBy, sortDescending = false } = filters;
+  const { page = 1, pageSize, orderBy, sortDescending = false, search } = filters;
   const size = +pageSize || DEFAULT_PAGE_SIZE;
   const offset = +size * (+page - 1);
   const direction = sortDescending ? 'desc' : 'asc';
@@ -167,7 +167,7 @@ async function pagedRawQuery(
 
   const data = await rawQuery(`${query}${statements}`, queryParams);
 
-  return { data, count, page: +page, pageSize: size, orderBy };
+  return { data, count, page: +page, pageSize: size, orderBy, search };
 }
 
 async function rawQuery<T = unknown>(

src/lib/prisma.ts

@@ -197,7 +197,7 @@ async function rawQuery(sql: string, data: object): Promise<any> {
 }
 
 async function pagedQuery<T>(model: string, criteria: T, filters?: QueryFilters) {
-  const { page = 1, pageSize, orderBy, sortDescending = false } = filters || {};
+  const { page = 1, pageSize, orderBy, sortDescending = false, search } = filters || {};
   const size = +pageSize || DEFAULT_PAGE_SIZE;
 
   const data = await client[model].findMany({
@@ -216,7 +216,7 @@ async function pagedQuery<T>(model: string, criteria: T, filters?: QueryFilters)
 
   const count = await client[model].count({ where: (criteria as any).where });
 
-  return { data, count, page: +page, pageSize: size, orderBy };
+  return { data, count, page: +page, pageSize: size, orderBy, search };
 }
 
 async function pagedRawQuery(