New admin section.

This commit is contained in:
Mike Cao 2025-07-08 18:40:47 -07:00
parent b78ff3b477
commit ce1f6c3618
44 changed files with 515 additions and 157 deletions

View file

@ -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>
);
}

View file

@ -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>
);
}

View file

@ -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>
</>
);
}

View file

@ -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} />
</>
);
}

View file

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

View file

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

View file

@ -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>
);

View file

@ -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 = () => {};

View file

@ -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)}

View file

@ -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} />
)}

View file

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

View file

@ -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',

View file

@ -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>
);
}

View file

@ -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>
);
}

View file

@ -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>
</>
);
}

View file

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

View file

@ -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} />;
}}

View file

@ -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}

View file

@ -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));

View file

@ -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 }) =>

View file

@ -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>
);

View file

@ -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)}>

View file

@ -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>
);

View file

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

View file

@ -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} />;
}}

View file

@ -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);
}

View file

@ -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,
);

View file

@ -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,
);