watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 07:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

63
src/app/(main)/admin/AdminLayout.tsx
View file

@ -2,9 +2,8 @@
import { ReactNode } from 'react';
import { Grid, Column } from '@umami/react-zen';
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import { User, Users, Globe } from '@/components/icons';
import { SideMenu } from '@/components/common/SideMenu';
import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
import { PageBody } from '@/components/common/PageBody';
export function AdminLayout({ children }: { children: ReactNode }) {
@ -18,37 +17,45 @@ export function AdminLayout({ children }: { children: ReactNode }) {
const items = [
{
id: 'users',
label: formatMessage(labels.users),
url: '/admin/users',
},
{
id: 'websites',
label: formatMessage(labels.websites),
url: '/admin/websites',
},
{
id: 'teams',
label: formatMessage(labels.teams),
url: '/admin/teams',
label: formatMessage(labels.application),
items: [
{
id: 'users',
label: formatMessage(labels.users),
path: '/admin/users',
icon: <User />,
},
{
id: 'websites',
label: formatMessage(labels.websites),
path: '/admin/websites',
icon: <Globe />,
},
{
id: 'teams',
label: formatMessage(labels.teams),
path: '/admin/teams',
icon: <Users />,
},
],
},
];
const value = items.find(({ url }) => pathname.includes(url))?.id;
const selectedKey = items
.flatMap(e => e.items)
?.find(({ path }) => path && pathname.startsWith(path))?.id;
return (
<PageBody>
<Column gap="6">
<PageHeader title={formatMessage(labels.admin)} />
<Grid columns="200px 1fr" gap>
<Column>
<SideMenu items={items} selectedKey={value} />
</Column>
<Column>
<Panel minHeight="300px">{children}</Panel>
</Column>
</Grid>
<Grid columns="auto 1fr" width="100%" height="100%">
<Column height="100%" border="right" backgroundColor>
<SideMenu
items={items}
title={formatMessage(labels.admin)}
selectedKey={selectedKey}
allowMinimize={false}
/>
</Column>
</PageBody>
<PageBody>{children}</PageBody>
</Grid>
);
}

11
src/app/(main)/admin/teams/AdminTeamsPage.tsx
View file

@ -1,16 +1,19 @@
'use client';
import { AdminTeamsDataTable } from './AdminTeamsDataTable';
import { Column } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
export function AdminTeamsPage() {
const { formatMessage, labels } = useMessages();
return (
<Column gap>
<SectionHeader title={formatMessage(labels.teams)} />
<AdminTeamsDataTable />
<Column gap="6">
<PageHeader title={formatMessage(labels.teams)} />
<Panel>
<AdminTeamsDataTable />
</Panel>
</Column>
);
}

4
src/app/(main)/admin/teams/AdminTeamsTable.tsx
View file

@ -32,7 +32,9 @@ export function AdminTeamsTable({
<DataColumn id="owner" label={formatMessage(labels.owner)} width="200px">
{(row: any) => (
<Text title={row?.teamUser?.[0]?.user?.username} truncate>
{row?.teamUser?.[0]?.user?.username}
<Link href={`/admin/users/${row?.teamUser?.[0]?.user?.id}`}>
{row?.teamUser?.[0]?.user?.username}
</Link>
</Text>
)}
</DataColumn>

2
src/app/(main)/admin/teams/[teamId]/AdminTeamPage.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
import { TeamProvider } from '@/app/(main)/settings/teams/[teamId]/TeamProvider';
export function AdminTeamPage({ teamId }: { teamId: string }) {
return (

13
src/app/(main)/admin/users/UsersPage.tsx
View file

@ -1,9 +1,10 @@
'use client';
import { UsersDataTable } from './UsersDataTable';
import { Column } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
import { UserAddButton } from './UserAddButton';
import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
export function UsersPage() {
const { formatMessage, labels } = useMessages();
@ -11,11 +12,13 @@ export function UsersPage() {
const handleSave = () => {};
return (
<Column gap>
<SectionHeader title={formatMessage(labels.users)}>
<Column gap="6">
<PageHeader title={formatMessage(labels.users)}>
<UserAddButton onSave={handleSave} />
</SectionHeader>
<UsersDataTable />
</PageHeader>
<Panel>
<UsersDataTable />
</Panel>
</Column>
);
}

10
src/app/(main)/admin/users/[userId]/UserHeader.tsx Normal file
View file

@ -0,0 +1,10 @@
import { useContext } from 'react';
import { User } from '@/components/icons';
import { PageHeader } from '@/components/common/PageHeader';
import { UserContext } from '@/app/(main)/admin/users/[userId]/UserProvider';
export function UserHeader() {
const user = useContext(UserContext);
return <PageHeader title={user?.username} icon={<User />} />;
}

10
src/app/(main)/admin/users/[userId]/UserPage.tsx
View file

@ -1,11 +1,19 @@
'use client';
import { Column } from '@umami/react-zen';
import { UserSettings } from './UserSettings';
import { UserProvider } from './UserProvider';
import { UserHeader } from '@/app/(main)/admin/users/[userId]/UserHeader';
import { Panel } from '@/components/common/Panel';
export function UserPage({ userId }: { userId: string }) {
return (
<UserProvider userId={userId}>
<UserSettings userId={userId} />
<Column gap="6">
<UserHeader />
<Panel>
<UserSettings userId={userId} />
</Panel>
</Column>
</UserProvider>
);
}

12
src/app/(main)/admin/users/[userId]/UserSettings.tsx
View file

@ -1,19 +1,13 @@
import { useContext } from 'react';
import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { User } from '@/components/icons';
import { Column, Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { UserEditForm } from './UserEditForm';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
import { UserWebsites } from './UserWebsites';
import { UserContext } from './UserProvider';
export function UserSettings({ userId }: { userId: string }) {
const { formatMessage, labels } = useMessages();
const user = useContext(UserContext);
return (
<>
<SectionHeader title={user?.username} icon={<User />} />
<Column gap="6">
<Tabs>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
@ -26,6 +20,6 @@ export function UserSettings({ userId }: { userId: string }) {
<UserWebsites userId={userId} />
</TabPanel>
</Tabs>
</>
</Column>
);
}

11
src/app/(main)/admin/websites/AdminWebsitesPage.tsx
View file

@ -1,16 +1,19 @@
'use client';
import { AdminWebsitesDataTable } from './AdminWebsitesDataTable';
import { Column } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
export function AdminWebsitesPage() {
const { formatMessage, labels } = useMessages();
return (
<Column gap>
<SectionHeader title={formatMessage(labels.websites)} />
<AdminWebsitesDataTable />
<Column gap="6">
<PageHeader title={formatMessage(labels.websites)} />
<Panel>
<AdminWebsitesDataTable />
</Panel>
</Column>
);
}

2
src/app/(main)/admin/websites/AdminWebsitesTable.tsx
View file

@ -55,7 +55,7 @@ export function AdminWebsitesTable({ data = [] }: { data: any[] }) {
return (
<MenuButton>
<MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
<MenuItem href={`/admin/websites/${id}`} data-test="link-button-edit">
<Row alignItems="center" gap>
<Icon>
<Edit />

5
src/app/(main)/admin/websites/[websiteId]/AdminWebsitePage.tsx
View file

@ -1,11 +1,14 @@
'use client';
import { WebsiteSettings } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettings';
import { WebsiteProvider } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { Panel } from '@/components/common/Panel';
export function AdminWebsitePage({ websiteId }: { websiteId: string }) {
return (
<WebsiteProvider websiteId={websiteId}>
<WebsiteSettings websiteId={websiteId} />
<Panel>
<WebsiteSettings websiteId={websiteId} />
</Panel>
</WebsiteProvider>
);
}

4
src/app/(main)/admin/websites/[websiteId]/page.tsx
View file

@ -1,10 +1,10 @@
import { AdminWebsitePage } from './AdminWebsitePage';
import { Metadata } from 'next';
import { WebsiteSettingsPage } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage';
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
return <AdminWebsitePage websiteId={websiteId} />;
return <WebsiteSettingsPage websiteId={websiteId} />;
}
export const metadata: Metadata = {