feat: add visitor map entry button in country list

src/client/components/website/MetricsTable.tsx

@@ -41,7 +41,7 @@ export const MetricsTable: React.FC<MetricsTableProps> = React.memo((props) => {
     {
       title: title[0],
       dataIndex: 'x',
-      render: (val) => val ?? <span className="italic">(None)</span>,
+      render: (val) => val ?? <span className="italic opacity-60">(None)</span>,
     },
     {
       title: title[1],

src/client/pages/Website/Detail.tsx

@@ -1,6 +1,6 @@
-import { Card } from 'antd';
+import { Button, Card } from 'antd';
 import React from 'react';
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { trpc } from '../../api/trpc';
 import { ErrorTip } from '../../components/ErrorTip';
 import { Loading } from '../../components/Loading';
@@ -9,6 +9,7 @@ import { MetricsTable } from '../../components/website/MetricsTable';
 import { WebsiteOverview } from '../../components/website/WebsiteOverview';
 import { useGlobalRangeDate } from '../../hooks/useGlobalRangeDate';
 import { useCurrentWorkspaceId } from '../../store/user';
+import { RightOutlined } from '@ant-design/icons';
 
 export const WebsiteDetail: React.FC = React.memo(() => {
   const { websiteId } = useParams();
@@ -18,6 +19,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
     websiteId: websiteId!,
   });
   const { startDate, endDate } = useGlobalRangeDate();
+  const navigate = useNavigate();
 
   if (!websiteId) {
     return <ErrorTip />;
@@ -93,6 +95,15 @@ export const WebsiteDetail: React.FC = React.memo(() => {
             startAt={startAt}
             endAt={endAt}
           />
+          <Button
+            size="small"
+            className="m-auto flex flex-row-reverse items-center mt-1"
+            styles={{ icon: { marginRight: 0, marginLeft: 8 } }}
+            icon={<RightOutlined className="m-0" />}
+            onClick={() => navigate(`/website/${websiteId}/map`)}
+          >
+            Visitor Map
+          </Button>
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
           <MetricsTable

src/client/pages/Website/Map.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { trpc } from '../../api/trpc';
 import { ErrorTip } from '../../components/ErrorTip';
 import { Loading } from '../../components/Loading';
@@ -7,6 +7,8 @@ import { NotFoundTip } from '../../components/NotFoundTip';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { WebsiteVisitorMap } from '../../components/website/WebsiteVisitorMap';
 import { DateFilter } from '../../components/DateFilter';
+import { LeftOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
 
 export const WebsiteVisitorMapPage: React.FC = React.memo(() => {
   const { websiteId } = useParams();
@@ -15,6 +17,7 @@ export const WebsiteVisitorMapPage: React.FC = React.memo(() => {
     workspaceId,
     websiteId: websiteId!,
   });
+  const navigate = useNavigate();
 
   if (!websiteId) {
     return <ErrorTip />;
@@ -30,7 +33,15 @@ export const WebsiteVisitorMapPage: React.FC = React.memo(() => {
 
   return (
     <div className="py-6">
-      <div className="pb-2 flex justify-end">
+      <div className="pb-2 flex items-center justify-between">
+        <Button
+          size="large"
+          icon={<LeftOutlined />}
+          onClick={() => navigate(`/website/${websiteId}`)}
+        />
+        <div>
+          <span className="font-bold">{website.name}</span>'s visitor map
+        </div>
         <DateFilter />
       </div>
       <WebsiteVisitorMap websiteId={websiteId} />