Fixed properties queries.

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -1,14 +1,5 @@
 import { useMessages, useModified } from '@/components/hooks';
-import {
-  Button,
-  Icon,
-  Modal,
-  Dialog,
-  DialogTrigger,
-  Text,
-  Column,
-  useToast,
-} from '@umami/react-zen';
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
 import { Plus } from '@/components/icons';
 import { WebsiteAddForm } from './WebsiteAddForm';
 
@@ -33,11 +24,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.addWebsite)} style={{ width: 400 }}>
-          {({ close }) => (
-            <Column width="300px">
-              <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
-            </Column>
-          )}
+          {({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/settings/websites/WebsitesSettingsPage.tsx

@@ -1,21 +1,15 @@
 'use client';
 import { Column } from '@umami/react-zen';
-import { useLoginQuery, useMessages } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
 import { WebsitesDataTable } from './WebsitesDataTable';
-import { ROLES } from '@/lib/constants';
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { WebsiteAddButton } from './WebsiteAddButton';
 
 export function WebsitesSettingsPage({ teamId }: { teamId: string }) {
-  const { user } = useLoginQuery();
-  const canCreate = user.role !== ROLES.viewOnly;
   const { formatMessage, labels } = useMessages();
 
   return (
     <Column gap>
-      <SectionHeader title={formatMessage(labels.websites)}>
-        {canCreate && <WebsiteAddButton teamId={teamId} />}
-      </SectionHeader>
+      <SectionHeader title={formatMessage(labels.websites)} />
       <WebsitesDataTable teamId={teamId} />
     </Column>
   );

src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx

@@ -4,14 +4,12 @@ import { Column } from '@umami/react-zen';
 import { WebsiteProvider } from './WebsiteProvider';
 import { PageBody } from '@/components/common/PageBody';
 import { WebsiteHeader } from './WebsiteHeader';
-import { WebsiteTabs } from './WebsiteTabs';
 
 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
       <PageBody>
         <WebsiteHeader />
-        <WebsiteTabs />
         <Column>{children}</Column>
       </PageBody>
     </WebsiteProvider>

src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx

@@ -13,8 +13,8 @@ export function EventsDataTable({
   children?: ReactNode;
 }) {
   const { formatMessage, labels } = useMessages();
-  const query = useWebsiteEventsQuery(websiteId);
   const [view, setView] = useState('all');
+  const query = useWebsiteEventsQuery(websiteId);
 
   const buttons = [
     {

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -1,5 +1,5 @@
 import { DataTable, DataColumn, Icon, Row } from '@umami/react-zen';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useFormat, useMessages, useNavigation } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
@@ -10,6 +10,7 @@ import { TypeIcon } from '@/components/common/TypeIcon';
 export function EventsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl } = useNavigation();
+  const { formatValue } = useFormat();
 
   if (data.length === 0) {
     return <Empty />;
@@ -20,7 +21,10 @@ export function EventsTable({ data = [] }) {
       <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
         {(row: any) => {
           return (
-            <Row alignItems="center" gap="2">
+            <Row alignItems="center" gap>
+              <Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
+                <Avatar seed={row.sessionId} size={32} />
+              </Link>
               <Icon>{row.eventName ? <Bolt /> : <Eye />}</Icon>
               {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
               <strong>{row.eventName || row.urlPath}</strong>
@@ -28,22 +32,30 @@ export function EventsTable({ data = [] }) {
           );
         }}
       </DataColumn>
-      <DataColumn id="created" width="1fr" align="end">
+      <DataColumn id="location" label={formatMessage(labels.location)}>
         {(row: any) => (
-          <Row alignItems="center" gap>
-            <DateDistance date={new Date(row.createdAt)} />
-            <Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
-              <Avatar seed={row.sessionId} size={32} />
-            </Link>
-            <Row alignItems="center" gap="1">
-              <TypeIcon type="country" value={row.country} />
-              <TypeIcon type="browser" value={row.browser} />
-              <TypeIcon type="os" value={row.os} />
-              <TypeIcon type="device" value={row.device} />
-            </Row>
-          </Row>
+          <TypeIcon type="country" value={row.country}>
+            {row.city ? `${row.city}, ` : ''} {formatValue(row.country, 'country')}
+          </TypeIcon>
         )}
       </DataColumn>
+      <DataColumn id="browser" label={formatMessage(labels.browser)}>
+        {(row: any) => (
+          <TypeIcon type="browser" value={row.browser}>
+            {formatValue(row.browser, 'browser')}
+          </TypeIcon>
+        )}
+      </DataColumn>
+      <DataColumn id="device" label={formatMessage(labels.device)}>
+        {(row: any) => (
+          <TypeIcon type="device" value={row.device}>
+            {formatValue(row.device, 'device')}
+          </TypeIcon>
+        )}
+      </DataColumn>
+      <DataColumn id="created" width="160px" align="end">
+        {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+      </DataColumn>
     </DataTable>
   );
 }

src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx

@@ -14,7 +14,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
       <DataColumn id="id" label={formatMessage(labels.session)} width="100px">
         {(row: any) => (
           <Link href={`sessions/${row.id}`}>
-            <Avatar seed={row.id} size={48} />
+            <Avatar seed={row.id} size={32} />
           </Link>
         )}
       </DataColumn>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx

@@ -13,7 +13,7 @@ import {
 } from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Bolt, Eye, FileText } from '@/components/icons';
-import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
+import { useMessages, useSessionActivityQuery, useTimezone } from '@/components/hooks';
 import { EventData } from '@/components/metrics/EventData';
 
 export function SessionActivity({
@@ -27,6 +27,7 @@ export function SessionActivity({
   startDate: Date;
   endDate: Date;
 }) {
+  const { formatMessage, labels } = useMessages();
   const { formatTimezoneDate } = useTimezone();
   const { data, isLoading, error } = useSessionActivityQuery(
     websiteId,
@@ -50,9 +51,14 @@ export function SessionActivity({
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
                   {formatTimezoneDate(createdAt, 'pp')}
                 </StatusLight>
-                <Row alignItems="center" gap>
+                <Row alignItems="center" gap="2">
                   <Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
-                  <Text>{eventName || urlPath}</Text>
+                  <Text>
+                    {eventName
+                      ? formatMessage(labels.triggeredEvent)
+                      : formatMessage(labels.viewedPage)}
+                  </Text>
+                  <Text weight="bold">{eventName || urlPath}</Text>
                   {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
                 </Row>
               </Row>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx

@@ -44,6 +44,13 @@ export function SessionInfo({ data }) {
         {data?.city}
       </Info>
 
+      <Info
+        label={formatMessage(labels.browser)}
+        icon={<TypeIcon type="browser" value={data?.browser} />}
+      >
+        {formatValue(data?.browser, 'browser')}
+      </Info>
+
       <Info
         label={formatMessage(labels.os)}
         icon={<TypeIcon type="os" value={data?.os?.toLowerCase()?.replaceAll(/\W/g, '-')} />}
@@ -57,13 +64,6 @@ export function SessionInfo({ data }) {
       >
         {formatValue(data?.device, 'device')}
       </Info>
-
-      <Info
-        label={formatMessage(labels.browser)}
-        icon={<TypeIcon type="browser" value={data?.browser} />}
-      >
-        {formatValue(data?.browser, 'browser')}
-      </Info>
     </Column>
   );
 }