watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 23:27:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Updated tables. Added MenuButton.

Browse source
This commit is contained in:
Mike Cao 2025-05-07 04:10:27 -07:00
parent 92b283486e
commit a15c7cd596
27 changed files with 334 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -79,7 +79,7 @@
"@prisma/extension-read-replicas": "^0.4.1", "@prisma/extension-read-replicas": "^0.4.1",
"@react-spring/web": "^9.7.3", "@react-spring/web": "^9.7.3",
"@tanstack/react-query": "^5.74.11", "@tanstack/react-query": "^5.74.11",
"@umami/react-zen": "^0.90.0", "@umami/react-zen": "^0.96.0",
"@umami/redis-client": "^0.27.0", "@umami/redis-client": "^0.27.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"chalk": "^4.1.1", "chalk": "^4.1.1",

18
pnpm-lock.yaml generated
View file

@ -39,8 +39,8 @@ importers:
specifier: ^5.74.11 specifier: ^5.74.11
version: 5.74.11(react@19.1.0) version: 5.74.11(react@19.1.0)
'@umami/react-zen': '@umami/react-zen':
specifier: ^0.90.0 specifier: ^0.96.0
version: 0.90.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0)) version: 0.96.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))
'@umami/redis-client': '@umami/redis-client':
specifier: ^0.27.0 specifier: ^0.27.0
version: 0.27.0 version: 0.27.0
@ -2992,8 +2992,8 @@ packages:
resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==} resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
engines: {node: ^16.0.0 || >=18.0.0} engines: {node: ^16.0.0 || >=18.0.0}
'@umami/react-zen@0.90.0': '@umami/react-zen@0.96.0':
resolution: {integrity: sha512-Hj0/GSQPUtiRwq1ri3nX+anWp5udNQmrKZcHOH/j1B3z4KL/AW+llYyXqP9loG1N+NgEzW66P791Pac8Wo7qpw==} resolution: {integrity: sha512-ojY3sOehvGbYN29fHrPHyBlsrrjOFJdlftlYTsPQSbX/25SiD1Sk6/WqcY/YEJZS71gZyklc4yjd/EKSZgxJqw==}
'@umami/redis-client@0.27.0': '@umami/redis-client@0.27.0':
resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==} resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
@ -6350,8 +6350,8 @@ packages:
peerDependencies: peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19 react: ^16.8.0 || ^17 || ^18 || ^19
react-hook-form@7.56.1: react-hook-form@7.56.2:
resolution: {integrity: sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ==} resolution: {integrity: sha512-vpfuHuQMF/L6GpuQ4c3ZDo+pRYxIi40gQqsCmmfUBwm+oqvBhKhwghCuj2o00YCgSfU6bR9KC/xnQGWm3Gr08A==}
engines: {node: '>=18.0.0'} engines: {node: '>=18.0.0'}
peerDependencies: peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19 react: ^16.8.0 || ^17 || ^18 || ^19
@ -10784,7 +10784,7 @@ snapshots:
'@typescript-eslint/types': 6.21.0 '@typescript-eslint/types': 6.21.0
eslint-visitor-keys: 3.4.3 eslint-visitor-keys: 3.4.3
'@umami/react-zen@0.90.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))': '@umami/react-zen@0.96.0(@babel/core@7.26.10)(@types/react@19.1.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))':
dependencies: dependencies:
'@fontsource/jetbrains-mono': 5.2.5 '@fontsource/jetbrains-mono': 5.2.5
'@internationalized/date': 3.8.0 '@internationalized/date': 3.8.0
@ -10798,7 +10798,7 @@ snapshots:
react: 19.1.0 react: 19.1.0
react-aria-components: 1.8.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) react-aria-components: 1.8.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
react-dom: 19.1.0(react@19.1.0) react-dom: 19.1.0(react@19.1.0)
react-hook-form: 7.56.1(react@19.1.0) react-hook-form: 7.56.2(react@19.1.0)
react-icons: 5.5.0(react@19.1.0) react-icons: 5.5.0(react@19.1.0)
thenby: 1.3.4 thenby: 1.3.4
zustand: 5.0.4(@types/react@19.1.2)(immer@9.0.21)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0)) zustand: 5.0.4(@types/react@19.1.2)(immer@9.0.21)(react@19.1.0)(use-sync-external-store@1.5.0(react@19.1.0))
@ -14702,7 +14702,7 @@ snapshots:
dependencies: dependencies:
react: 19.1.0 react: 19.1.0
react-hook-form@7.56.1(react@19.1.0): react-hook-form@7.56.2(react@19.1.0):
dependencies: dependencies:
react: 19.1.0 react: 19.1.0

20
src/app/(main)/MenuBar.tsx
View file

@ -6,9 +6,13 @@ import type { RowProps } from '@umami/react-zen/Row';
import useGlobalState from '@/components/hooks/useGlobalState'; import useGlobalState from '@/components/hooks/useGlobalState';
import { Lucide } from '@/components/icons'; import { Lucide } from '@/components/icons';
import { WebsiteSelect } from '@/components/input/WebsiteSelect'; import { WebsiteSelect } from '@/components/input/WebsiteSelect';
import { useNavigation } from '@/components/hooks';
export function MenuBar(props: RowProps) { export function MenuBar(props: RowProps) {
const [isCollapsed, setCollapsed] = useGlobalState('sidenav-collapsed'); const [isCollapsed, setCollapsed] = useGlobalState('sidenav-collapsed');
const { websiteId } = useNavigation();
const handleSelect = () => {};
return ( return (
<Row <Row
@ -27,11 +31,17 @@ export function MenuBar(props: RowProps) {
<Lucide.PanelLeft /> <Lucide.PanelLeft />
</Icon> </Icon>
</Button> </Button>
<TeamsButton /> <Row alignItems="center" gap="1">
<Icon> <TeamsButton />
<Lucide.Slash /> {websiteId && (
</Icon> <>
<WebsiteSelect /> <Icon strokeColor="7" rotate={-25}>
<Lucide.Slash />
</Icon>
<WebsiteSelect variant="quiet" websiteId={websiteId} onSelect={handleSelect} />
</>
)}
</Row>
</Row> </Row>
<Row alignItems="center" justifyContent="flex-end"> <Row alignItems="center" justifyContent="flex-end">
<ThemeButton /> <ThemeButton />

2
src/app/(main)/settings/profile/LanguageSetting.tsx
View file

@ -19,7 +19,7 @@ export function LanguageSetting() {
const handleReset = () => saveLocale(DEFAULT_LOCALE); const handleReset = () => saveLocale(DEFAULT_LOCALE);
const handleOpen = isOpen => { const handleOpen = (isOpen: boolean) => {
if (isOpen) { if (isOpen) {
setSearch(''); setSearch('');
} }

4
src/app/(main)/settings/profile/PasswordChangeButton.tsx
View file

@ -1,6 +1,6 @@
import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen'; import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
import { PasswordEditForm } from './PasswordEditForm'; import { PasswordEditForm } from './PasswordEditForm';
import { Icons } from '@/components/icons'; import { Lucide } from '@/components/icons';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
export function PasswordChangeButton() { export function PasswordChangeButton() {
@ -15,7 +15,7 @@ export function PasswordChangeButton() {
<DialogTrigger> <DialogTrigger>
<Button> <Button>
<Icon fillColor="currentColor"> <Icon fillColor="currentColor">
<Icons.Lock /> <Lucide.LockKeyhole />
</Icon> </Icon>
<Text>{formatMessage(labels.changePassword)}</Text> <Text>{formatMessage(labels.changePassword)}</Text>
</Button> </Button>

10
src/app/(main)/settings/profile/ThemeSetting.tsx
View file

@ -1,5 +1,5 @@
import { Row, Button, Icon, useTheme } from '@umami/react-zen'; import { Row, Button, Icon, useTheme } from '@umami/react-zen';
import { Icons } from '@/components/icons'; import { Lucide } from '@/components/icons';
export function ThemeSetting() { export function ThemeSetting() {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
@ -10,13 +10,13 @@ export function ThemeSetting() {
variant={theme === 'light' ? 'primary' : 'secondary'} variant={theme === 'light' ? 'primary' : 'secondary'}
onPress={() => setTheme('light')} onPress={() => setTheme('light')}
> >
<Icon fillColor="currentColor"> <Icon>
<Icons.Sun /> <Lucide.Sun />
</Icon> </Icon>
</Button> </Button>
<Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}> <Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}>
<Icon fillColor="currentColor"> <Icon>
<Icons.Moon /> <Lucide.Moon />
</Icon> </Icon>
</Button> </Button>
</Row> </Row>

6
src/app/(main)/settings/teams/TeamAddForm.tsx
View file

@ -30,12 +30,12 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
<TextField autoComplete="off" /> <TextField autoComplete="off" />
</FormField> </FormField>
<FormButtons> <FormButtons>
<FormSubmitButton variant="primary" isDisabled={isPending}>
{formatMessage(labels.save)}
</FormSubmitButton>
<Button isDisabled={isPending} onPress={onClose}> <Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)} {formatMessage(labels.cancel)}
</Button> </Button>
<FormSubmitButton variant="primary" isDisabled={isPending}>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons> </FormButtons>
</Form> </Form>
); );

2
src/app/(main)/settings/teams/TeamJoinForm.tsx
View file

@ -34,8 +34,8 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
<TextField autoComplete="off" /> <TextField autoComplete="off" />
</FormField> </FormField>
<FormButtons> <FormButtons>
<FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button> <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
</FormButtons> </FormButtons>
</Form> </Form>
); );

28
src/app/(main)/settings/teams/TeamsTable.tsx
View file

@ -1,8 +1,8 @@
import { DataColumn, DataTable, Icon, Text } from '@umami/react-zen'; import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons'; import { Icons } from '@/components/icons';
import { ROLES } from '@/lib/constants'; import { ROLES } from '@/lib/constants';
import { LinkButton } from '@/components/common/LinkButton'; import { MenuButton } from '@/components/input/MenuButton';
export function TeamsTable({ export function TeamsTable({
data = [], data = [],
@ -32,12 +32,24 @@ export function TeamsTable({
const { id } = row; const { id } = row;
return ( return (
<LinkButton href={`/teams/${id}/settings`}> <MenuButton>
<Icon> <MenuItem href={`/teams/${id}`}>
<Icons.Arrow /> <Row alignItems="center" gap>
</Icon> <Icon>
<Text>{formatMessage(labels.view)}</Text> <Icons.Arrow />
</LinkButton> </Icon>
<Text>{formatMessage(labels.view)}</Text>
</Row>
</MenuItem>
<MenuItem href={`/teams/${id}/settings`}>
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
</MenuButton>
); );
}} }}
</DataColumn> </DataColumn>

6
src/app/(main)/settings/users/UserAddForm.tsx
View file

@ -62,12 +62,12 @@ export function UserAddForm({ onSave, onClose }) {
</Select> </Select>
</FormField> </FormField>
<FormButtons> <FormButtons>
<FormSubmitButton variant="primary" data-test="button-submit" isDisabled={false}>
{formatMessage(labels.save)}
</FormSubmitButton>
<Button isDisabled={isPending} onPress={onClose}> <Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)} {formatMessage(labels.cancel)}
</Button> </Button>
<FormSubmitButton variant="primary" data-test="button-submit" isDisabled={false}>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons> </FormButtons>
</Form> </Form>
); );

2
src/app/(main)/settings/users/UserDeleteForm.tsx
View file

@ -23,7 +23,7 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
return ( return (
<ConfirmationForm <ConfirmationForm
message={formatMessage(messages.confirmDelete, { message={formatMessage(messages.confirmDelete, {
target: <b key={messages.confirmDelete.id}>{username}</b>, target: <b key={messages.confirmDelete.id}>&nbsp;{username}</b>,
})} })}
onConfirm={handleConfirm} onConfirm={handleConfirm}
onClose={onClose} onClose={onClose}

129
src/app/(main)/settings/users/UsersTable.tsx
View file

@ -1,9 +1,22 @@
import { Row, Button, Text, Icon, Icons, DataTable, DataColumn } from '@umami/react-zen'; import {
import Link from 'next/link'; Row,
Text,
Icon,
Icons,
DataTable,
DataColumn,
MenuItem,
MenuSeparator,
Modal,
Dialog,
} from '@umami/react-zen';
import { formatDistance } from 'date-fns'; import { formatDistance } from 'date-fns';
import { ROLES } from '@/lib/constants'; import { ROLES } from '@/lib/constants';
import { useMessages, useLocale } from '@/components/hooks'; import { useMessages, useLocale } from '@/components/hooks';
import { UserDeleteButton } from './UserDeleteButton'; import { MenuButton } from '@/components/input/MenuButton';
import Link from 'next/link';
import { useState } from 'react';
import { UserDeleteForm } from '@/app/(main)/settings/users/UserDeleteForm';
export function UsersTable({ export function UsersTable({
data = [], data = [],
@ -14,48 +27,78 @@ export function UsersTable({
}) { }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { dateLocale } = useLocale(); const { dateLocale } = useLocale();
const [deleteUser, setDeleteUser] = useState(null);
const handleDelete = () => {};
return ( return (
<DataTable data={data}> <>
<DataColumn id="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} /> <DataTable data={data}>
<DataColumn id="role" label={formatMessage(labels.role)} style={{ maxWidth: 60 }}> <DataColumn id="username" label={formatMessage(labels.username)} width="2fr">
{(row: any) => {(row: any) => <Link href={`/settings/users/${row.id}`}>{row.username}</Link>}
formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
)
}
</DataColumn>
<DataColumn id="created" label={formatMessage(labels.created)} style={{ maxWidth: 60 }}>
{(row: any) =>
formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
locale: dateLocale,
})
}
</DataColumn>
<DataColumn id="websites" label={formatMessage(labels.websites)} style={{ maxWidth: 60 }}>
{(row: any) => row._count.websiteUser}
</DataColumn>
{showActions && (
<DataColumn id="action" align="end">
{(row: any) => {
const { id, username } = row;
return (
<Row gap="3">
<UserDeleteButton userId={id} username={username} />
<Button asChild>
<Link href={`/settings/users/${id}`} data-test="link-button-edit">
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Link>
</Button>
</Row>
);
}}
</DataColumn> </DataColumn>
)} <DataColumn id="role" label={formatMessage(labels.role)}>
</DataTable> {(row: any) =>
formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
)
}
</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">
{(row: any) => row._count.websiteUser}
</DataColumn>
{showActions && (
<DataColumn id="action" align="end" width="100px">
{(row: any) => {
const { id } = row;
return (
<MenuButton>
<MenuItem href={`/settings/users/${id}`} data-test="link-button-edit">
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
<MenuSeparator />
<MenuItem id="delete" onAction={() => setDeleteUser(row)}>
<Row alignItems="center" gap>
<Icon>
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Row>
</MenuItem>
</MenuButton>
);
}}
</DataColumn>
)}
</DataTable>
<Modal isOpen={!!deleteUser}>
<Dialog title={formatMessage(labels.deleteUser)}>
{({ close }) => (
<UserDeleteForm
userId={deleteUser?.id}
username={deleteUser?.username}
onSave={handleDelete}
onClose={() => {
close();
setDeleteUser(null);
}}
/>
)}
</Dialog>
</Modal>
</>
); );
} }

39
src/app/(main)/settings/websites/WebsitesTable.tsx
View file

@ -1,7 +1,8 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Row, Text, Icon, Icons, DataTable, DataColumn, Button } from '@umami/react-zen'; import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-zen';
import Link from 'next/link';
import { useMessages, useNavigation } from '@/components/hooks'; import { useMessages, useNavigation } from '@/components/hooks';
import { MenuButton } from '@/components/input/MenuButton';
import { Lucide } from '@/components/icons';
export interface WebsitesTableProps { export interface WebsitesTableProps {
data: any[]; data: any[];
@ -36,28 +37,28 @@ export function WebsitesTable({
const websiteId = row.id; const websiteId = row.id;
return ( return (
<Row gap="3"> <MenuButton>
{allowEdit && ( {allowEdit && (
<Button asChild> <MenuItem href={renderTeamUrl(`/websites/${websiteId}`)}>
<Link href={renderTeamUrl(`/settings/websites/${websiteId}`)}> <Row alignItems="center" gap>
<Icon data-test="link-button-edit">
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Link>
</Button>
)}
{allowView && (
<Button asChild>
<Link href={renderTeamUrl(`/websites/${websiteId}`)}>
<Icon data-test="link-button-view"> <Icon data-test="link-button-view">
<Icons.Arrow /> <Lucide.Eye />
</Icon> </Icon>
<Text>{formatMessage(labels.view)}</Text> <Text>{formatMessage(labels.view)}</Text>
</Link> </Row>
</Button> </MenuItem>
)} )}
</Row> {allowView && (
<MenuItem href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
<Row alignItems="center" gap>
<Icon data-test="link-button-edit">
<Lucide.SquarePen />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
)}
</MenuButton>
); );
}} }}
</DataColumn> </DataColumn>

1
src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx
View file

@ -57,7 +57,6 @@ export function WebsiteTransferForm({
}; };
const handleChange = (key: Key) => { const handleChange = (key: Key) => {
console.log('KEY', key);
setTeamId(key as string); setTeamId(key as string);
}; };

17
src/app/(main)/teams/[teamId]/settings/members/TeamMemberEditButton.tsx
View file

@ -1,6 +1,7 @@
import { useMessages, useModified } from '@/components/hooks'; import { useMessages, useModified } from '@/components/hooks';
import { import {
Button, Row,
Pressable,
Icon, Icon,
Icons, Icons,
Modal, Modal,
@ -34,12 +35,14 @@ export function TeamMemberEditButton({
return ( return (
<DialogTrigger> <DialogTrigger>
<Button> <Pressable>
<Icon> <Row alignItems="center" gap>
<Icons.Edit /> <Icon>
</Icon> <Icons.Edit />
<Text>{formatMessage(labels.edit)}</Text> </Icon>
</Button> <Text>{formatMessage(labels.edit)}</Text>
</Row>
</Pressable>
<Modal> <Modal>
<Dialog title={formatMessage(labels.editMember)}> <Dialog title={formatMessage(labels.editMember)}>
{({ close }) => ( {({ close }) => (

23
src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx
View file

@ -1,8 +1,9 @@
import { DataColumn, DataTable } from '@umami/react-zen'; import { DataColumn, DataTable, MenuItem } from '@umami/react-zen';
import { useMessages, useLoginQuery } from '@/components/hooks'; import { useMessages, useLoginQuery } from '@/components/hooks';
import { ROLES } from '@/lib/constants'; import { ROLES } from '@/lib/constants';
import { TeamMemberRemoveButton } from './TeamMemberRemoveButton'; import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
import { TeamMemberEditButton } from './TeamMemberEditButton'; import { TeamMemberEditButton } from './TeamMemberEditButton';
import { MenuButton } from '@/components/input/MenuButton';
export function TeamMembersTable({ export function TeamMembersTable({
data = [], data = [],
@ -37,14 +38,18 @@ export function TeamMembersTable({
allowEdit && allowEdit &&
row?.role !== ROLES.teamOwner && row?.role !== ROLES.teamOwner &&
user?.id !== row?.user?.id && ( user?.id !== row?.user?.id && (
<> <MenuButton>
<TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} /> <MenuItem>
<TeamMemberRemoveButton <TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
teamId={teamId} </MenuItem>
userId={row?.user?.id} <MenuItem>
userName={row?.user?.username} <TeamMemberRemoveButton
/> teamId={teamId}
</> userId={row?.user?.id}
userName={row?.user?.username}
/>
</MenuItem>
</MenuButton>
) )
); );
}} }}

35
src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx
View file

@ -1,7 +1,7 @@
import { DataColumn, DataTable, Icon, Text } from '@umami/react-zen'; import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
import { useLoginQuery, useMessages } from '@/components/hooks'; import { useLoginQuery, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons'; import { Icons } from '@/components/icons';
import { LinkButton } from '@/components/common/LinkButton'; import { MenuButton } from '@/components/input/MenuButton';
export function TeamWebsitesTable({ export function TeamWebsitesTable({
teamId, teamId,
@ -25,23 +25,28 @@ export function TeamWebsitesTable({
<DataColumn id="action" label=" " align="end"> <DataColumn id="action" label=" " align="end">
{(row: any) => { {(row: any) => {
const { id: websiteId } = row; const { id: websiteId } = row;
return ( return (
<> <MenuButton>
{allowEdit && (teamId || user?.isAdmin) && ( <MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
<LinkButton href={`/teams/${teamId}/settings/websites/${websiteId}`}> <Row alignItems="center" gap>
<Icon> <Icon>
<Icons.Edit /> <Icons.Arrow />
</Icon> </Icon>
<Text>{formatMessage(labels.edit)}</Text> <Text>{formatMessage(labels.view)}</Text>
</LinkButton> </Row>
</MenuItem>
{allowEdit && (teamId || user?.isAdmin) && (
<MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
</MenuItem>
)} )}
<LinkButton href={`/teams/${teamId}/websites/${websiteId}`}> </MenuButton>
<Icon>
<Icons.Arrow />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
</>
); );
}} }}
</DataColumn> </DataColumn>

28
src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
View file

@ -53,72 +53,72 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
const items = [ const items = [
{ {
key: 'url', id: 'url',
label: formatMessage(labels.pages), label: formatMessage(labels.pages),
url: renderUrl({ view: 'url' }), url: renderUrl({ view: 'url' }),
}, },
{ {
key: 'referrer', id: 'referrer',
label: formatMessage(labels.referrers), label: formatMessage(labels.referrers),
url: renderUrl({ view: 'referrer' }), url: renderUrl({ view: 'referrer' }),
}, },
{ {
key: 'browser', id: 'browser',
label: formatMessage(labels.browsers), label: formatMessage(labels.browsers),
url: renderUrl({ view: 'browser' }), url: renderUrl({ view: 'browser' }),
}, },
{ {
key: 'os', id: 'os',
label: formatMessage(labels.os), label: formatMessage(labels.os),
url: renderUrl({ view: 'os' }), url: renderUrl({ view: 'os' }),
}, },
{ {
key: 'device', id: 'device',
label: formatMessage(labels.devices), label: formatMessage(labels.devices),
url: renderUrl({ view: 'device' }), url: renderUrl({ view: 'device' }),
}, },
{ {
key: 'country', id: 'country',
label: formatMessage(labels.countries), label: formatMessage(labels.countries),
url: renderUrl({ view: 'country' }), url: renderUrl({ view: 'country' }),
}, },
{ {
key: 'region', id: 'region',
label: formatMessage(labels.regions), label: formatMessage(labels.regions),
url: renderUrl({ view: 'region' }), url: renderUrl({ view: 'region' }),
}, },
{ {
key: 'city', id: 'city',
label: formatMessage(labels.cities), label: formatMessage(labels.cities),
url: renderUrl({ view: 'city' }), url: renderUrl({ view: 'city' }),
}, },
{ {
key: 'language', id: 'language',
label: formatMessage(labels.languages), label: formatMessage(labels.languages),
url: renderUrl({ view: 'language' }), url: renderUrl({ view: 'language' }),
}, },
{ {
key: 'screen', id: 'screen',
label: formatMessage(labels.screens), label: formatMessage(labels.screens),
url: renderUrl({ view: 'screen' }), url: renderUrl({ view: 'screen' }),
}, },
{ {
key: 'event', id: 'event',
label: formatMessage(labels.events), label: formatMessage(labels.events),
url: renderUrl({ view: 'event' }), url: renderUrl({ view: 'event' }),
}, },
{ {
key: 'query', id: 'query',
label: formatMessage(labels.queryParameters), label: formatMessage(labels.queryParameters),
url: renderUrl({ view: 'query' }), url: renderUrl({ view: 'query' }),
}, },
{ {
key: 'host', id: 'host',
label: formatMessage(labels.hosts), label: formatMessage(labels.hosts),
url: renderUrl({ view: 'host' }), url: renderUrl({ view: 'host' }),
}, },
{ {
key: 'tag', id: 'tag',
label: formatMessage(labels.tags), label: formatMessage(labels.tags),
url: renderUrl({ view: 'tag' }), url: renderUrl({ view: 'tag' }),
}, },

47
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -17,6 +17,7 @@ import { RegionsTable } from '@/components/metrics/RegionsTable';
import { ScreenTable } from '@/components/metrics/ScreenTable'; import { ScreenTable } from '@/components/metrics/ScreenTable';
import { TagsTable } from '@/components/metrics/TagsTable'; import { TagsTable } from '@/components/metrics/TagsTable';
import { ChannelsTable } from '@/components/metrics/ChannelsTable'; import { ChannelsTable } from '@/components/metrics/ChannelsTable';
import { Panel } from '@/components/common/Panel';
const views = { const views = {
url: PagesTable, url: PagesTable,
@ -134,27 +135,29 @@ export function WebsiteExpandedView({
const DetailsComponent = views[view] || (() => null); const DetailsComponent = views[view] || (() => null);
return ( return (
<Grid columns="auto 1fr" gap="6" marginTop="6"> <Panel>
<Column gap="6" width="200px"> <Grid columns="auto 1fr" gap="6">
<LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}> <Column gap="6" width="200px" border="right" paddingRight="3">
<Icon rotate={180}> <LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}>
<Icons.Arrow /> <Icon rotate={180}>
</Icon> <Icons.Arrow />
<Text>{formatMessage(labels.back)}</Text> </Icon>
</LinkButton> <Text>{formatMessage(labels.back)}</Text>
<SideMenu items={items} selectedKey={view} /> </LinkButton>
</Column> <SideMenu items={items} selectedKey={view} />
<Column> </Column>
<DetailsComponent <Column>
websiteId={websiteId} <DetailsComponent
domainName={domainName} websiteId={websiteId}
animate={false} domainName={domainName}
virtualize={true} animate={false}
itemCount={25} virtualize={true}
allowFilter={true} itemCount={25}
allowSearch={true} allowFilter={true}
/> allowSearch={true}
</Column> />
</Grid> </Column>
</Grid>
</Panel>
); );
} }

33
src/components/charts/BarChart.tsx
View file

@ -49,10 +49,11 @@ export function BarChart({
const [tooltip, setTooltip] = useState(null); const [tooltip, setTooltip] = useState(null);
const { theme } = useTheme(); const { theme } = useTheme();
const { locale } = useLocale(); const { locale } = useLocale();
const { colors } = getThemeColors(theme); const { colors } = useMemo(() => getThemeColors(theme), [theme]);
const options: any = useMemo(() => { const options: any = useMemo(() => {
return { return {
__id: new Date().getTime(),
scales: { scales: {
x: { x: {
type: XAxisType, type: XAxisType,
@ -98,21 +99,21 @@ export function BarChart({
const handleTooltip = ({ tooltip }: { tooltip: any }) => { const handleTooltip = ({ tooltip }: { tooltip: any }) => {
const { opacity, labelColors, dataPoints } = tooltip; const { opacity, labelColors, dataPoints } = tooltip;
if (opacity) { setTooltip(
setTooltip({ opacity
title: formatDate( ? {
new Date(dataPoints[0].raw?.d || dataPoints[0].raw?.x || dataPoints[0].raw), title: formatDate(
dateFormats[unit], new Date(dataPoints[0].raw?.d || dataPoints[0].raw?.x || dataPoints[0].raw),
locale, dateFormats[unit],
), locale,
color: labelColors?.[0]?.backgroundColor, ),
value: currency color: labelColors?.[0]?.backgroundColor,
? formatLongCurrency(dataPoints[0].raw.y, currency) value: currency
: `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`, ? formatLongCurrency(dataPoints[0].raw.y, currency)
}); : `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`,
} else { }
setTooltip(null); : null,
} );
}; };
return ( return (

12
src/components/common/SideMenu.tsx
View file

@ -1,17 +1,21 @@
import { Text, List, ListItem } from '@umami/react-zen'; import { ReactNode } from 'react';
import { Text, List, ListItem, Icon, Row } from '@umami/react-zen';
export interface SideMenuProps { export interface SideMenuProps {
items: { id: string; label: string; url: string }[]; items: { id: string; label: string; url: string; icon?: ReactNode }[];
selectedKey?: string; selectedKey?: string;
} }
export function SideMenu({ items, selectedKey }: SideMenuProps) { export function SideMenu({ items, selectedKey }: SideMenuProps) {
return ( return (
<List> <List>
{items.map(({ id, label, url }) => { {items.map(({ id, label, url, icon }) => {
return ( return (
<ListItem key={id} id={id} href={url}> <ListItem key={id} id={id} href={url}>
<Text weight={id === selectedKey ? 'bold' : 'regular'}>{label}</Text> <Row alignItems="center" gap>
{icon && <Icon>{icon}</Icon>}
<Text weight={id === selectedKey ? 'bold' : 'regular'}>{label}</Text>
</Row>
</ListItem> </ListItem>
); );
})} })}

5
src/components/hooks/useNavigation.ts
View file

@ -6,7 +6,8 @@ export function useNavigation() {
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const params = useSearchParams(); const params = useSearchParams();
const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || []; const [, teamId] = pathname.match(/\/teams\/([a-f0-9-]+)/) || [];
const [, websiteId] = pathname.match(/\/websites\/([a-f0-9-]+)/) || [];
const query = useMemo<{ [key: string]: any }>(() => { const query = useMemo<{ [key: string]: any }>(() => {
const obj = {}; const obj = {};
@ -26,5 +27,5 @@ export function useNavigation() {
return teamId ? `/teams/${teamId}${url}` : url; return teamId ? `/teams/${teamId}${url}` : url;
} }
return { pathname, query, router, renderUrl, renderTeamUrl, teamId }; return { pathname, query, router, renderUrl, renderTeamUrl, teamId, websiteId };
} }

6
src/components/input/DateFilter.tsx
View file

@ -22,7 +22,6 @@ export function DateFilter({
value, value,
onChange, onChange,
showAllTime = false, showAllTime = false,
...props
}: DateFilterProps) { }: DateFilterProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const [showPicker, setShowPicker] = useState(false); const [showPicker, setShowPicker] = useState(false);
@ -93,7 +92,7 @@ export function DateFilter({
}; };
const renderValue = ({ defaultChildren }) => { const renderValue = ({ defaultChildren }) => {
return value.startsWith('range') ? ( return value?.startsWith('range') ? (
<DateDisplay startDate={startDate} endDate={endDate} /> <DateDisplay startDate={startDate} endDate={endDate} />
) : ( ) : (
defaultChildren defaultChildren
@ -103,10 +102,9 @@ export function DateFilter({
return ( return (
<> <>
<Select <Select
{...props}
selectedKey={value} selectedKey={value}
placeholder={formatMessage(labels.selectDate)} placeholder={formatMessage(labels.selectDate)}
onSelectionChange={handleChange} onChange={handleChange}
renderValue={renderValue} renderValue={renderValue}
> >
{options.map(({ label, value, divider }: any) => { {options.map(({ label, value, divider }: any) => {

30
src/components/input/MenuButton.tsx Normal file
View file

@ -0,0 +1,30 @@
import { ReactNode, Key } from 'react';
import { DialogTrigger, Button, Menu, Popover, Icon } from '@umami/react-zen';
import { Lucide } from '@/components/icons';
export function MenuButton({
children,
onAction,
}: {
children: ReactNode;
onAction?: (action: string) => void;
}) {
const handleAction = (key: Key) => {
onAction?.(key.toString());
};
return (
<DialogTrigger>
<Button variant="outline">
<Icon>
<Lucide.Ellipsis />
</Icon>
</Button>
<Popover>
<Menu onAction={handleAction} style={{ minWidth: '140px' }}>
{children}
</Menu>
</Popover>
</DialogTrigger>
);
}

2
src/components/input/TeamsButton.tsx
View file

@ -45,7 +45,7 @@ export function TeamsButton({
<Button className={className} variant="quiet"> <Button className={className} variant="quiet">
<Row alignItems="center" gap="3"> <Row alignItems="center" gap="3">
<Icon>{teamId ? <Users /> : <User />}</Icon> <Icon>{teamId ? <Users /> : <User />}</Icon>
{showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>} {showText && <Text>{teamId ? team?.name : user.username}</Text>}
<Icon rotate={90} size="xs"> <Icon rotate={90} size="xs">
<Icons.Chevron /> <Icons.Chevron />
</Icon> </Icon>

25
src/components/input/WebsiteSelect.tsx
View file

@ -1,19 +1,23 @@
import { useState, Key } from 'react'; import { useState } from 'react';
import { Select, ListItem } from '@umami/react-zen'; import { Select, ListItem } from '@umami/react-zen';
import { useWebsites, useMessages } from '@/components/hooks'; import { useWebsites, useMessages } from '@/components/hooks';
import type { SelectProps } from '@umami/react-zen/Select';
export function WebsiteSelect({ export function WebsiteSelect({
websiteId, websiteId,
teamId, teamId,
variant,
onSelect, onSelect,
...props
}: { }: {
websiteId?: string; websiteId?: string;
teamId?: string; teamId?: string;
variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
onSelect?: (key: any) => void; onSelect?: (key: any) => void;
}) { } & SelectProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [selectedId, setSelectedId] = useState<Key>(websiteId); const [selectedId, setSelectedId] = useState(websiteId);
const queryResult = useWebsites({ teamId }, { search, pageSize: 5 }); const queryResult = useWebsites({ teamId }, { search, pageSize: 5 });
@ -26,15 +30,20 @@ export function WebsiteSelect({
setSearch(value); setSearch(value);
}; };
const items = queryResult?.result?.data as any[];
return ( return (
<Select <Select
items={queryResult?.result?.data as any[]} {...props}
value={selectedId as string} items={items}
onChange={handleSelect} value={selectedId}
placeholder={formatMessage(labels.selectWebsite)} placeholder={formatMessage(labels.selectWebsite)}
allowSearch={true}
onSearch={handleSearch}
isLoading={queryResult.query.isLoading} isLoading={queryResult.query.isLoading}
buttonProps={{ variant }}
allowSearch={true}
searchValue={search}
onSearch={handleSearch}
onChange={handleSelect}
> >
{({ id, name }: any) => <ListItem key={id}>{name}</ListItem>} {({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
</Select> </Select>

9
src/components/metrics/PageviewsChart.tsx
View file

@ -1,4 +1,4 @@
import { useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import { useTheme } from '@umami/react-zen'; import { useTheme } from '@umami/react-zen';
import { BarChart, BarChartProps } from '@/components/charts/BarChart'; import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { useLocale, useMessages } from '@/components/hooks'; import { useLocale, useMessages } from '@/components/hooks';
@ -28,8 +28,8 @@ export function PageviewsChart({
}: PageviewsChartProps) { }: PageviewsChartProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { theme } = useTheme(); const { theme } = useTheme();
const { colors } = getThemeColors(theme);
const { locale } = useLocale(); const { locale } = useLocale();
const { colors } = useMemo(() => getThemeColors(theme), [theme]);
const chartData = useMemo(() => { const chartData = useMemo(() => {
if (!data) { if (!data) {
@ -37,6 +37,7 @@ export function PageviewsChart({
} }
return { return {
__id: new Date().getTime(),
datasets: [ datasets: [
{ {
label: formatMessage(labels.visitors), label: formatMessage(labels.visitors),
@ -78,6 +79,8 @@ export function PageviewsChart({
}; };
}, [data, locale]); }, [data, locale]);
const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]);
return ( return (
<BarChart <BarChart
{...props} {...props}
@ -85,7 +88,7 @@ export function PageviewsChart({
unit={unit} unit={unit}
isLoading={isLoading} isLoading={isLoading}
isAllTime={isAllTime} isAllTime={isAllTime}
renderXLabel={renderDateLabels(unit, locale)} renderXLabel={renderXLabel}
/> />
); );
} }