From 5f27ba149b86bfc848576eed59e8d6846c041b40 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Fri, 29 Aug 2025 00:17:59 -0700
Subject: [PATCH] New overview layout.

---
 .../[websiteId]/WebsiteExpandedView.tsx       | 22 ++++----
 .../websites/[websiteId]/WebsitePanels.tsx    | 52 ++++++++++---------
 src/components/common/LoadingPanel.tsx        |  4 +-
 .../metrics/MetricsExpandedTable.tsx          |  1 +
 src/components/metrics/WorldMap.tsx           |  8 +--
 5 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
index ed0fb806..28a0c001 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@@ -52,12 +52,12 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'referrer',
-          label: formatMessage(labels.referrers),
+          label: formatMessage(labels.referrer),
           path: updateParams({ view: 'referrer' }),
         },
         {
           id: 'channel',
-          label: formatMessage(labels.channels),
+          label: formatMessage(labels.channel),
           path: updateParams({ view: 'channel' }),
         },
         {
@@ -72,17 +72,17 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'country',
-          label: formatMessage(labels.countries),
+          label: formatMessage(labels.country),
           path: updateParams({ view: 'country' }),
         },
         {
           id: 'region',
-          label: formatMessage(labels.regions),
+          label: formatMessage(labels.region),
           path: updateParams({ view: 'region' }),
         },
         {
           id: 'city',
-          label: formatMessage(labels.cities),
+          label: formatMessage(labels.city),
           path: updateParams({ view: 'city' }),
         },
       ],
@@ -92,7 +92,7 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'browser',
-          label: formatMessage(labels.browsers),
+          label: formatMessage(labels.browser),
           path: updateParams({ view: 'browser' }),
         },
         {
@@ -102,17 +102,17 @@ export function WebsiteExpandedView({
         },
         {
           id: 'device',
-          label: formatMessage(labels.devices),
+          label: formatMessage(labels.device),
           path: updateParams({ view: 'device' }),
         },
         {
           id: 'language',
-          label: formatMessage(labels.languages),
+          label: formatMessage(labels.language),
           path: updateParams({ view: 'language' }),
         },
         {
           id: 'screen',
-          label: formatMessage(labels.screens),
+          label: formatMessage(labels.screen),
           path: updateParams({ view: 'screen' }),
         },
       ],
@@ -122,7 +122,7 @@ export function WebsiteExpandedView({
       items: [
         {
           id: 'event',
-          label: formatMessage(labels.events),
+          label: formatMessage(labels.event),
           path: updateParams({ view: 'event' }),
         },
         {
@@ -132,7 +132,7 @@ export function WebsiteExpandedView({
         },
         {
           id: 'tag',
-          label: formatMessage(labels.tags),
+          label: formatMessage(labels.tag),
           path: updateParams({ view: 'tag' }),
         },
       ],
diff --git a/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx b/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
index c0638b7f..97f8f953 100644
--- a/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
@@ -59,30 +59,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           </Tabs>
         </Panel>
       </GridRow>
-      <GridRow layout="two-one" {...rowProps}>
-        <Panel gridColumn="span 2" noPadding>
-          <WorldMap websiteId={websiteId} />
-        </Panel>
-        <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
-          <Tabs>
-            <TabList>
-              <Tab id="country">{formatMessage(labels.countries)}</Tab>
-              <Tab id="region">{formatMessage(labels.regions)}</Tab>
-              <Tab id="city">{formatMessage(labels.cities)}</Tab>
-            </TabList>
-            <TabPanel id="country">
-              <MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
-            </TabPanel>
-            <TabPanel id="region">
-              <MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
-            </TabPanel>
-            <TabPanel id="city">
-              <MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
-            </TabPanel>
-          </Tabs>
-        </Panel>
-      </GridRow>
+
       <GridRow layout="two" {...rowProps}>
         <Panel>
           <Heading size="2">{formatMessage(labels.environment)}</Heading>
@@ -103,6 +80,33 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
             </TabPanel>
           </Tabs>
         </Panel>
+
+        <Panel>
+          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Tabs>
+            <TabList>
+              <Tab id="country">{formatMessage(labels.countries)}</Tab>
+              <Tab id="region">{formatMessage(labels.regions)}</Tab>
+              <Tab id="city">{formatMessage(labels.cities)}</Tab>
+            </TabList>
+            <TabPanel id="country">
+              <MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
+            </TabPanel>
+            <TabPanel id="region">
+              <MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
+            </TabPanel>
+            <TabPanel id="city">
+              <MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
+            </TabPanel>
+          </Tabs>
+        </Panel>
+      </GridRow>
+
+      <GridRow layout="two-one" {...rowProps}>
+        <Panel gridColumn="span 2" noPadding>
+          <WorldMap websiteId={websiteId} />
+        </Panel>
+
         <Panel>
           <Heading size="2">{formatMessage(labels.traffic)}</Heading>
           <Row border="bottom" marginBottom="4" />
diff --git a/src/components/common/LoadingPanel.tsx b/src/components/common/LoadingPanel.tsx
index 786dd275..9caffee8 100644
--- a/src/components/common/LoadingPanel.tsx
+++ b/src/components/common/LoadingPanel.tsx
@@ -10,6 +10,7 @@ export interface LoadingPanelProps extends ColumnProps {
   isLoading?: boolean;
   isFetching?: boolean;
   loadingIcon?: 'dots' | 'spinner';
+  loadingPosition?: 'center' | 'page' | 'inline';
   renderEmpty?: () => ReactNode;
   children: ReactNode;
 }
@@ -21,6 +22,7 @@ export function LoadingPanel({
   isLoading,
   isFetching,
   loadingIcon = 'dots',
+  loadingPosition = 'page',
   renderEmpty = () => <Empty />,
   children,
   ...props
@@ -32,7 +34,7 @@ export function LoadingPanel({
       {/* Show loading spinner only if no data exists */}
       {(isLoading || isFetching) && (
         <Column position="relative" height="100%" {...props}>
-          <Loading icon={loadingIcon} position="page" />
+          <Loading icon={loadingIcon} position={loadingPosition} />
         </Column>
       )}
 
diff --git a/src/components/metrics/MetricsExpandedTable.tsx b/src/components/metrics/MetricsExpandedTable.tsx
index 35da0ee6..164a92ef 100644
--- a/src/components/metrics/MetricsExpandedTable.tsx
+++ b/src/components/metrics/MetricsExpandedTable.tsx
@@ -67,6 +67,7 @@ export function MetricsExpandedTable({
         isLoading={isLoading}
         error={error}
         height="100%"
+        loadingIcon="spinner"
       >
         <Column overflowY="auto" minHeight="0" height="100%" paddingRight="3" overflow="hidden">
           {items && (
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index 76ec1abc..5cc2d764 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import { colord } from 'colord';
 import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
 import {
-  useDateRange,
   useWebsiteMetricsQuery,
   useCountryNames,
   useLocale,
@@ -30,14 +29,11 @@ export function WorldMap({ websiteId, data, className, ...props }: WorldMapProps
   const { countryNames } = useCountryNames(locale);
   const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
   const unknownLabel = formatMessage(labels.unknown);
-  const {
-    dateRange: { startDate, endDate },
-  } = useDateRange(websiteId);
+
   const { data: mapData } = useWebsiteMetricsQuery(websiteId, {
     type: 'country',
-    startAt: +startDate,
-    endAt: +endDate,
   });
+
   const metrics = useMemo(
     () => (data || mapData ? percentFilter((data || mapData) as any[]) : []),
     [data, mapData],