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

Panels redesign.

Browse source
This commit is contained in:
Mike Cao 2025-03-25 14:47:51 -07:00
parent 7886c3f393
commit f5bc3dc6c2
58 changed files with 530 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
View file

@ -4,11 +4,12 @@ import { SessionsDataTable } from './SessionsDataTable';
import { SessionsMetricsBar } from './SessionsMetricsBar';
import { SessionProperties } from './SessionProperties';
import { WorldMap } from '@/components/metrics/WorldMap';
import { GridRow } from '@/components/layout/Grid';
import { TabList, Tab, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/layout/GridRow';
import { TabList, Tab, Tabs, TabPanel } from '@umami/react-zen';
import { useState } from 'react';
import { useMessages } from '@/components/hooks';
import { SessionsWeekly } from './SessionsWeekly';
import { Panel } from '@/components/layout/Panel';
export function SessionsPage({ websiteId }) {
const [tab, setTab] = useState('activity');
@ -18,22 +19,28 @@ export function SessionsPage({ websiteId }) {
<>
<WebsiteHeader websiteId={websiteId} />
<SessionsMetricsBar websiteId={websiteId} />
<GridRow columns="two-one">
<WorldMap websiteId={websiteId} />
<SessionsWeekly websiteId={websiteId} />
<GridRow layout="two-one">
<Panel padding="0">
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<SessionsWeekly websiteId={websiteId} />
</Panel>
</GridRow>
<Tabs
selectedKey={tab}
onSelectionChange={(value: any) => setTab(value)}
style={{ marginBottom: 30 }}
>
<TabList>
<Tab key="activity">{formatMessage(labels.activity)}</Tab>
<Tab key="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
</Tabs>
{tab === 'activity' && <SessionsDataTable websiteId={websiteId} />}
{tab === 'properties' && <SessionProperties websiteId={websiteId} />}
<Panel marginY="6">
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="activity">{formatMessage(labels.activity)}</Tab>
<Tab id="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
<TabPanel id="activity">
<SessionsDataTable websiteId={websiteId} />
</TabPanel>
<TabPanel id="properties">
<SessionProperties websiteId={websiteId} />
</TabPanel>
</Tabs>
</Panel>
</>
);
}