Admin section updates.

This commit is contained in:
Mike Cao 2025-07-10 20:04:17 -07:00
parent 87449ece9e
commit 1b81074752
20 changed files with 274 additions and 647 deletions

View file

@ -1,12 +1,15 @@
import { useContext, useState } from 'react';
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { SectionHeader } from '@/components/common/SectionHeader';
import { ROLES } from '@/lib/constants';
import { useContext, useState } from 'react';
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { Users } from '@/components/icons';
import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
import { TeamManage } from './TeamManage';
import { TeamEditForm } from './TeamEditForm';
import { TeamWebsitesDataTable } from '@/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable';
import { TeamMembersDataTable } from '@/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable';
export function TeamDetails({ teamId }: { teamId: string }) {
const team = useContext(TeamContext);
@ -26,17 +29,25 @@ export function TeamDetails({ teamId }: { teamId: string }) {
return (
<Column gap>
<SectionHeader title={team?.name}>
<SectionHeader title={team?.name} icon={<Users />}>
{!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
</SectionHeader>
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="members">{formatMessage(labels.members)}</Tab>
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
{isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
</TabList>
<TabPanel id="details">
<TeamEditForm teamId={teamId} allowEdit={canEdit} />
</TabPanel>
<TabPanel id="members">
<TeamMembersDataTable teamId={teamId} allowEdit />
</TabPanel>
<TabPanel id="websites">
<TeamWebsitesDataTable teamId={teamId} allowEdit />
</TabPanel>
<TabPanel id="manage">
<TeamManage teamId={teamId} />
</TabPanel>

View file

@ -6,6 +6,7 @@ import {
TextField,
Button,
useToast,
Text,
} from '@umami/react-zen';
import { getRandomChars } from '@/lib/crypto';
import { useContext } from 'react';
@ -47,8 +48,7 @@ export function TeamEditForm({ teamId, allowEdit }: { teamId: string; allowEdit?
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
{allowEdit && <TextField />}
{!allowEdit && team?.name}
{allowEdit ? <TextField /> : <Text>{team?.name}</Text>}
</FormField>
{!cloudMode && allowEdit && (
<FormField name="accessCode" label={formatMessage(labels.accessCode)}>