From 8438b715387f6c583a62c243d846217232f406e9 Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Sat, 28 Sep 2024 11:10:14 +0330
Subject: [PATCH] dark mode side bar panel page

---
 components/icons/LocationP.js                |  2 ++
 components/layoutPanel/header/icons/Theme.js |  5 ++--
 components/layoutPanel/userDetail/Date.js    | 30 +++++++++++++++++++-
 components/layoutPanel/userDetail/Head.js    | 18 +++++++-----
 components/layoutPanel/userDetail/index.js   |  2 +-
 components/panel/addDoctor/index.js          |  2 +-
 6 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/components/icons/LocationP.js b/components/icons/LocationP.js
index c40ba08..6da1b97 100644
--- a/components/icons/LocationP.js
+++ b/components/icons/LocationP.js
@@ -9,11 +9,13 @@ function LocationP() {
     >
       <path
         d="M11.9999 13.4304C13.723 13.4304 15.1199 12.0336 15.1199 10.3104C15.1199 8.5873 13.723 7.19043 11.9999 7.19043C10.2768 7.19043 8.87988 8.5873 8.87988 10.3104C8.87988 12.0336 10.2768 13.4304 11.9999 13.4304Z"
+        className="stroke-[#7E7E7E] dark:stroke-[#A1A1A1]"
         stroke="#7E7E7E"
         strokeWidth="1.5"
       />
       <path
         d="M3.61995 8.49C5.58995 -0.169998 18.42 -0.159997 20.38 8.5C21.53 13.58 18.37 17.88 15.6 20.54C13.59 22.48 10.41 22.48 8.38995 20.54C5.62995 17.88 2.46995 13.57 3.61995 8.49Z"
+        className="stroke-[#7E7E7E] dark:stroke-[#A1A1A1]"
         stroke="#7E7E7E"
         strokeWidth="1.5"
       />
diff --git a/components/layoutPanel/header/icons/Theme.js b/components/layoutPanel/header/icons/Theme.js
index cb1ed37..aa600c4 100644
--- a/components/layoutPanel/header/icons/Theme.js
+++ b/components/layoutPanel/header/icons/Theme.js
@@ -7,9 +7,8 @@ function Theme() {
   const [mounted, setMounted] = useState(false);
   const { theme, setTheme, resolvedTheme } = useTheme();
 
-  console.log(theme);
-
   useState(() => setMounted(true), []);
+
   return (
     <Button
       className="
@@ -20,7 +19,7 @@ function Theme() {
               !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
           "
       //   onClick={handleThemeSwitch}
-      onClick={() => setTheme(theme === 'light' ? 'dark' : "light")}
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       variant="outlined"
     >
       <MoonP />
diff --git a/components/layoutPanel/userDetail/Date.js b/components/layoutPanel/userDetail/Date.js
index e8fdea9..274b2af 100644
--- a/components/layoutPanel/userDetail/Date.js
+++ b/components/layoutPanel/userDetail/Date.js
@@ -5,7 +5,35 @@ import { DatePicker } from "jalaali-react-date-picker";
 function Date() {
   return (
     <div className="flex justify-center">
-      <DatePicker nextIcon={<></>} prevIcon={<></>} />
+      <DatePicker
+        nextIcon={<></>}
+        prevIcon={<></>}
+        dayLabelRender={(e) => (
+          <div className="day-label-bar-inner-rtl">
+            <div className="day-label-item !text-[10px] font-semibold">
+              شنبه
+            </div>
+            <div className="day-label-item !text-[10px] font-semibold">
+              ۱ شنبه
+            </div>
+            <div className="day-label-item !text-[10px] font-semibold">
+              ۲ شنبه
+            </div>
+            <div className="day-label-item !text-[10px] font-semibold">
+              ۳ شنبه
+            </div>
+            <div className="day-label-item !text-[10px] font-semibold">
+              ۴ شنبه
+            </div>
+            <div className="day-label-item !text-[10px] font-semibold">
+              ۵ شنبه
+            </div>
+            <div className="day-label-item !text-[10px] font-semibold">
+              جمعه
+            </div>
+          </div>
+        )}
+      />
     </div>
   );
 }
diff --git a/components/layoutPanel/userDetail/Head.js b/components/layoutPanel/userDetail/Head.js
index 52797f7..4150779 100644
--- a/components/layoutPanel/userDetail/Head.js
+++ b/components/layoutPanel/userDetail/Head.js
@@ -14,7 +14,7 @@ function Head({ data, loading }) {
       </CircularLoading>
       <div className={loading ? "mt-[8px] mb-[4px]" : ""}>
         <TextLoading width={60} height={18} loading={loading}>
-          <p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px]">
+          <p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px] dark:text-[#fafafa]">
             {data.name}
           </p>
         </TextLoading>
@@ -22,25 +22,29 @@ function Head({ data, loading }) {
       <div className="flex items-center justify-center gap-[8px]">
         <LocationP />
         <TextLoading width={55} height={16} loading={loading}>
-          <p className="text-[#7E7E7E] text-[14px] font-normal">
+          <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
             نماینده شهر اهواز
           </p>
         </TextLoading>
       </div>
       <div className="flex items-center justify-center my-[16px]">
         <div className="flex flex-col items-center justify-center">
-          <p className="text-[#9B9B9B] text-[14px] font-normal">کل بیماران</p>
+          <p className="text-[#9B9B9B] text-[14px] font-normal dark:text-[#A1A1A1]">
+            کل بیماران
+          </p>
           <TextLoading width={55} height={16} loading={loading}>
-            <p className="text-[#3B3B3B] text-[14px] font-medium">
+            <p className="text-[#3B3B3B] text-[14px] font-medium dark:text-[#A1A1A1]">
               {data.all_patients}
             </p>
           </TextLoading>
         </div>
-        <span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px]"></span>
+        <span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px] dark:bg-[#343645]"></span>
         <div className="flex flex-col items-center justify-center">
-          <p className="text-[#9B9B9B] text-[14px] font-normal">کل نوبت ها</p>
+          <p className="text-[#9B9B9B] text-[14px] font-normal dark:text-[#A1A1A1]">
+            کل نوبت ها
+          </p>
           <TextLoading width={55} height={16} loading={loading}>
-            <p className="text-[#3B3B3B] text-[14px] font-medium">
+            <p className="text-[#3B3B3B] text-[14px] font-medium dark:text-[#A1A1A1]">
               {data.total_turns}
             </p>
           </TextLoading>
diff --git a/components/layoutPanel/userDetail/index.js b/components/layoutPanel/userDetail/index.js
index 05dfc1f..98ed43f 100644
--- a/components/layoutPanel/userDetail/index.js
+++ b/components/layoutPanel/userDetail/index.js
@@ -10,7 +10,7 @@ function UserDetail({ data, loading }) {
         g-[#FFF] py-[40px] px-[16px] bg-[#FFF] dark:bg-[#222433] dark:border-transparent"
       >
         <Head data={data} loading={loading} />
-        <span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px]"></span>
+        <span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px] dark:bg-[#343645]"></span>
         <Date />
         <Activities data={data} loading={loading} />
       </div>
diff --git a/components/panel/addDoctor/index.js b/components/panel/addDoctor/index.js
index dc82eaa..100efa9 100644
--- a/components/panel/addDoctor/index.js
+++ b/components/panel/addDoctor/index.js
@@ -21,7 +21,7 @@ const listTab = [
 ];
 
 function AddDoctorPage() {
-  const [value, setValue] = useState(3);
+  const [value, setValue] = useState(0);
   const [open, setOpen] = useState(false);
 
   const handleChange = (event, newValue) => setValue(newValue);