watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-24 14:35:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

New settings layouts. Segment management screen.

Browse source
This commit is contained in:
Mike Cao 2025-08-07 05:14:35 -07:00
parent 2dbcf63eeb
commit eb7b6978d3
70 changed files with 762 additions and 499 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/app/(main)/settings/teams/[teamId]/TeamDetails.tsx
View file

@ -1,8 +1,8 @@
import { useContext, useState } from 'react';
import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { TeamContext } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import { SectionHeader } from '@/components/common/SectionHeader';
import { ROLES } from '@/lib/constants';
import { Users } from '@/components/icons';
import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
@ -10,6 +10,8 @@ import { TeamManage } from './TeamManage';
import { TeamEditForm } from './TeamEditForm';
import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
import { TeamMembersDataTable } from './TeamMembersDataTable';
import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
export function TeamDetails({ teamId }: { teamId: string }) {
const team = useContext(TeamContext);
@ -33,30 +35,32 @@ export function TeamDetails({ teamId }: { teamId: string }) {
user.role !== ROLES.viewOnly);
return (
<Column gap>
<SectionHeader title={team?.name} icon={<Users />}>
<Column gap="6">
<PageHeader title={team?.name} icon={<Users />}>
{!isTeamOwner && !isAdmin && <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" style={{ width: 500 }}>
<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>
</Tabs>
</PageHeader>
<Panel>
<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" style={{ width: 500 }}>
<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>
</Tabs>
</Panel>
</Column>
);
}