New admin section.

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