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',
+};