design dark mode layout panel page

components/panel/dashboard/Cards.js

@@ -7,21 +7,21 @@ function Cards({ data, loading }) {
   const list = [
     {
       text: "تعداد کل بیماران",
-      bg_color: "bg-[#E5E9FF]",
+      bg_color: "bg-[#E5E9FF] dark:bg-[#5559CE]",
       value: data.number_of_patients,
       label: "نفر",
       icon: <PeopleBlueP />,
     },
     {
       text: "نوبت های امروز",
-      bg_color: "bg-[rgba(20,204,38,0.14)]",
+      bg_color: "bg-[rgba(20,204,38,0.14)] dark:bg-[#009D79]",
       value: data.today_turns,
       label: "نوبت",
       icon: <CalendarTickGreenP />,
     },
     {
       text: "پرداختی ها",
-      bg_color: "bg-[#FFD8C5]",
+      bg_color: "bg-[#FFD8C5] dark:bg-[#F17732]",
       value: data.payments,
       label: "تومان",
       icon: <CardOrangeP />,
@@ -32,7 +32,8 @@ function Cards({ data, loading }) {
     <ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-[16px]">
       {list.map((item, idx) => (
         <li
-          className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[4px] border border-solid border-[#EFEFEF] bg-[#FFF]"
+          className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[8px] border 
+          border-solid border-[#EFEFEF] bg-[#FFF] dark:bg-[#222433] dark:border-transparent"
           key={idx}
         >
           <div