Added metrics bar and date range to sessions.

This commit is contained in:
Mike Cao 2024-08-07 00:10:25 -07:00
parent 36663bd52d
commit b9068c0050
44 changed files with 859 additions and 739 deletions

View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
import { GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useMessages } from 'components/hooks';
import Icons from 'components/icons';
import { ROLES } from 'lib/constants';
@ -13,10 +13,9 @@ export function TeamsTable({
showActions?: boolean;
}) {
const { formatMessage, labels } = useMessages();
const breakpoint = useBreakpoint();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="owner" label={formatMessage(labels.owner)}>
{row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}

View file

@ -1,4 +1,4 @@
import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
import { formatDistance } from 'date-fns';
import { ROLES } from 'lib/constants';
import { useMessages, useLocale } from 'components/hooks';
@ -14,10 +14,9 @@ export function UsersTable({
}) {
const { formatMessage, labels } = useMessages();
const { dateLocale } = useLocale();
const breakpoint = useBreakpoint();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
<GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
{row =>

View file

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
import { useMessages, useTeamUrl } from 'components/hooks';
import LinkButton from 'components/common/LinkButton';
@ -20,7 +20,6 @@ export function WebsitesTable({
children,
}: WebsitesTableProps) {
const { formatMessage, labels } = useMessages();
const breakpoint = useBreakpoint();
const { renderTeamUrl } = useTeamUrl();
if (!data?.length) {
@ -28,7 +27,7 @@ export function WebsitesTable({
}
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
{showActions && (