Updated events/sessions pages. Added DateDistance component.

This commit is contained in:
Mike Cao 2025-06-30 21:34:56 -07:00
parent 8b64029409
commit 5b300f1ff5
13 changed files with 44 additions and 35 deletions

View file

@ -2,12 +2,8 @@
import { useState } from 'react';
import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
import { SessionsDataTable } from './SessionsDataTable';
import { SessionsMetricsBar } from './SessionsMetricsBar';
import { SessionProperties } from './SessionProperties';
import { WorldMap } from '@/components/metrics/WorldMap';
import { GridRow } from '@/components/common/GridRow';
import { useMessages } from '@/components/hooks';
import { SessionsWeekly } from './SessionsWeekly';
import { Panel } from '@/components/common/Panel';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
@ -18,15 +14,6 @@ export function SessionsPage({ websiteId }) {
return (
<Column gap="3">
<WebsiteControls websiteId={websiteId} />
<SessionsMetricsBar websiteId={websiteId} />
<GridRow layout="two-one">
<Panel gridColumn="span 2" noPadding>
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<SessionsWeekly websiteId={websiteId} />
</Panel>
</GridRow>
<Panel>
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>

View file

@ -1,11 +1,11 @@
import Link from 'next/link';
import { DataColumn, DataTable } from '@umami/react-zen';
import { useFormat, useMessages, useTimezone } from '@/components/hooks';
import { useFormat, useMessages } from '@/components/hooks';
import { Avatar } from '@/components/common/Avatar';
import { TypeIcon } from '@/components/common/TypeIcon';
import { DateDistance } from '@/components/common/DateDistance';
export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
const { formatTimezoneDate } = useTimezone();
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
@ -50,7 +50,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
)}
</DataColumn>
<DataColumn id="lastAt" label={formatMessage(labels.lastSeen)}>
{(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
{(row: any) => <DateDistance date={new Date(row.createdAt)} />}
</DataColumn>
</DataTable>
);