From 9d9cdb735403ed1ed9f9d4f4a49796233de71f47 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 8 Nov 2023 00:07:58 +0800
Subject: [PATCH] refactor: adjust date filter position and display

---
 src/client/components/DateFilter.tsx              |  2 +-
 src/client/components/website/WebsiteOverview.tsx | 11 +++++++----
 src/client/pages/Dashboard.tsx                    |  5 ++++-
 src/client/pages/Website/Detail.tsx               |  2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/client/components/DateFilter.tsx b/src/client/components/DateFilter.tsx
index 6178e9d..bae8c28 100644
--- a/src/client/components/DateFilter.tsx
+++ b/src/client/components/DateFilter.tsx
@@ -105,7 +105,7 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
         open={showDropdown}
         onOpenChange={(open) => setShowDropdown(open)}
       >
-        <Button size="large">
+        <Button className="min-w-[150px] text-right" size="large">
           <Space>
             {label}
             <DownOutlined
diff --git a/src/client/components/website/WebsiteOverview.tsx b/src/client/components/website/WebsiteOverview.tsx
index f428d99..79b95e1 100644
--- a/src/client/components/website/WebsiteOverview.tsx
+++ b/src/client/components/website/WebsiteOverview.tsx
@@ -26,9 +26,10 @@ import { useNavigate } from 'react-router';
 
 export const WebsiteOverview: React.FC<{
   website: WebsiteInfo;
+  showDateFilter?: boolean;
   actions?: React.ReactNode;
 }> = React.memo((props) => {
-  const { website, actions } = props;
+  const { website, showDateFilter = false, actions } = props;
   const { startDate, endDate, unit, refresh } = useGlobalRangeDate();
   const navigate = useNavigate();
 
@@ -115,9 +116,11 @@ export const WebsiteOverview: React.FC<{
             onClick={handleRefresh}
           />
 
-          <div>
-            <DateFilter />
-          </div>
+          {showDateFilter && (
+            <div>
+              <DateFilter />
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/src/client/pages/Dashboard.tsx b/src/client/pages/Dashboard.tsx
index aff1c22..f917d23 100644
--- a/src/client/pages/Dashboard.tsx
+++ b/src/client/pages/Dashboard.tsx
@@ -12,6 +12,7 @@ import arrayMove from 'array-move';
 import SortableList, { SortableItem } from 'react-easy-sort';
 import { defaultErrorHandler, defaultSuccessHandler, trpc } from '../api/trpc';
 import { Link } from 'react-router-dom';
+import { DateFilter } from '../components/DateFilter';
 
 export const Dashboard: React.FC = React.memo(() => {
   const workspace = useCurrentWorkspace();
@@ -31,7 +32,9 @@ export const Dashboard: React.FC = React.memo(() => {
     <div className="py-4">
       <div className="h-20 flex items-center">
         <div className="text-2xl flex-1">Dashboard</div>
-        <div>
+        <div className="flex gap-4">
+          {!isEditLayout && <DateFilter />}
+
           {websiteList.length !== 0 && (
             <Button
               icon={<EditOutlined />}
diff --git a/src/client/pages/Website/Detail.tsx b/src/client/pages/Website/Detail.tsx
index 984b25a..48a95ae 100644
--- a/src/client/pages/Website/Detail.tsx
+++ b/src/client/pages/Website/Detail.tsx
@@ -38,7 +38,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
     <div className="py-6">
       <Card>
         <Card.Grid hoverable={false} className="!w-full">
-          <WebsiteOverview website={website} />
+          <WebsiteOverview website={website} showDateFilter={true} />
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
           <MetricsTable