lab staff dark mode done

frontend/src/components/ui/lab-staff/Dialog.jsx

@@ -1,24 +1,58 @@
-// Dialog.js
 import React, { useState } from 'react';
+import { useDarkMode } from "../../../helpers/DarkModeContext";
 
 export const Dialog = ({ children }) => <div>{children}</div>;
 
 export const DialogTrigger = ({ asChild, children }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const child = React.cloneElement(children, { onClick: () => setIsOpen(!isOpen) });
+  const child = React.cloneElement(children, {
+    onClick: () => setIsOpen(!isOpen),
+  });
   return <>{child}</>;
 };
 
-export const DialogContent = ({ children }) => (
-  <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-30">
-    <div className="bg-white rounded-lg p-6 max-w-lg w-full">{children}</div>
-  </div>
-);
+export const DialogContent = ({ children }) => {
+  const { darkMode } = useDarkMode();
+
+  return (
+    <div
+      className={`fixed inset-0 flex items-center justify-center transition-all duration-300 ${
+        darkMode ? "bg-black bg-opacity-70" : "bg-gray-800 bg-opacity-30"
+      }`}
+    >
+      <div
+        className={`rounded-lg p-6 max-w-lg w-full shadow-lg transition-all duration-300 ${
+          darkMode ? "bg-gray-800 text-white border border-gray-700" : "bg-white"
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
 
-export const DialogHeader = ({ children }) => (
-  <div className="mb-4">{children}</div>
-);
+export const DialogHeader = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <div
+      className={`mb-4 ${
+        darkMode ? "border-b border-gray-700" : "border-b border-gray-300"
+      }`}
+    >
+      {children}
+    </div>
+  );
+};
 
-export const DialogTitle = ({ children }) => (
-  <h2 className="text-xl font-bold">{children}</h2>
-);
+export const DialogTitle = ({ children }) => {
+  const { darkMode } = useDarkMode();
+  return (
+    <h2
+      className={`text-xl font-bold ${
+        darkMode ? "text-white" : "text-gray-800"
+      }`}
+    >
+      {children}
+    </h2>
+  );
+};

frontend/src/components/ui/lab-staff/common/Sidebar.jsx

@@ -1,62 +1,63 @@
 import { Link, useLocation } from "react-router-dom";
-import { Home, User, CalendarDays, FileText, PieChart, Settings, Clipboard, TestTube } from "lucide-react"; // Icon importlarını unutmayın
-import { useParams } from "react-router-dom";
+import { Home, User, CalendarDays, FileText, PieChart, Settings, TestTube } from "lucide-react";
 import { useSelector } from "react-redux";
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 import { useEffect, useState } from "react";
 
 export default function Sidebar() {
-    const location = useLocation(); 
-
-    const isActive = (path) => location.pathname === path;
+    const location = useLocation();
+    const { darkMode } = useDarkMode();
     const { userId } = useSelector((state) => state.auth);
 
-    const [currentPath, setCurrentPath] = useState(location.pathname); // Sayfa değişim kontrolü
-
     const links = [
         {
-          to: `/labtechnician/${userId}/tests`,
-          label: "Tests",
-          icon: TestTube,
+            to: `/labtechnician/${userId}/tests`,
+            label: "Tests",
+            icon: TestTube,
         },
         {
-          to: `/labtechnician/${userId}/settings`,
-          label: "Settings",
-          icon: Settings,
+            to: `/labtechnician/${userId}/settings`,
+            label: "Settings",
+            icon: Settings,
         },
-      ];
+    ];
 
-          // Eğer pathname değişirse "soft refresh" yap
-    useEffect(() => {
-      if (location.pathname !== currentPath) {
-          setCurrentPath(location.pathname); // Path güncelleniyor
-          window.location.reload(); // Sayfa yenileniyor
-      }
-  }, [location.pathname]);
-
     return (
-        <aside className="w-64 bg-white shadow-md hidden md:block">
-      <div className="p-4">
-        <h2 className="text-2xl font-bold text-gray-800">Hospital System</h2>
-      </div>
-      <nav className="mt-6">
-        {links.map((link, index) => {
-          const Icon = link.icon; 
-          return (
-            <Link
-              key={index}
-              to={link.to}
-              className={`flex items-center px-4 py-2 mt-2 ${
-                isActive(link.to)
-                  ? "text-gray-800 bg-gray-200 font-bold"
-                  : "text-gray-600 hover:bg-gray-100"
-              }`}
-            >
-              <Icon className="w-5 h-5 mr-2" />
-              {link.label}
-            </Link>
-          );
-        })}
-      </nav>
-    </aside>
+        <aside
+            className={`w-64 shadow-md hidden md:block transition-all duration-300 ${
+                darkMode ? "bg-gray-900 text-white border-r border-gray-700" : "bg-white text-gray-800 border-r border-gray-200"
+            }`}
+        >
+            <div className="p-4">
+                <h2 className={`text-2xl font-bold ${darkMode ? "text-white" : "text-gray-800"}`}>
+                    Hospital System
+                </h2>
+            </div>
+            <nav className="mt-6">
+                {links.map((link, index) => {
+                    const Icon = link.icon;
+                    const isActive = location.pathname === link.to;
+
+                    return (
+                        <Link
+                            key={index}
+                            to={link.to}
+                            className={`flex items-center px-4 py-2 mt-2 rounded-md transition-all duration-300 ${
+                                isActive
+                                    ? darkMode
+                                        ? "bg-gray-800 text-white font-bold"
+                                        : "bg-gray-200 text-gray-800 font-bold"
+                                    : darkMode
+                                    ? "text-gray-400 hover:bg-gray-800 hover:text-white"
+                                    : "text-gray-600 hover:bg-gray-100"
+                            }`}
+                        >
+                            <Icon className="w-5 h-5 mr-2" />
+                            {link.label}
+                        </Link>
+                    );
+                })}
+            </nav>
+        </aside>
     );
 }

frontend/src/components/ui/lab-staff/tests/Button.jsx

@@ -1,13 +1,14 @@
-// Button.js
 import React from 'react';
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
 export const Button = ({ children, onClick, variant = 'default', size = 'md' }) => {
-  const baseStyle = 'inline-flex items-center justify-center rounded-md';
+  const { darkMode } = useDarkMode();
+  const baseStyle = 'inline-flex items-center justify-center rounded-md transition-all duration-300';
   const sizeStyle = size === 'sm' ? 'px-2 py-1 text-sm' : 'px-4 py-2';
   const variantStyle =
     variant === 'outline'
-      ? 'border border-gray-300 text-gray-700 hover:bg-gray-100'
-      : 'bg-gray-600 text-white hover:bg-gray-700';
+      ? `${darkMode ? 'border border-gray-500 text-gray-300 hover:bg-gray-700' : 'border border-gray-300 text-gray-700 hover:bg-gray-100'}`
+      : `${darkMode ? 'bg-blue-700 text-white hover:bg-blue-800' : 'bg-blue-600 text-white hover:bg-blue-700'}`;
 
   return (
     <button className={`${baseStyle} ${sizeStyle} ${variantStyle}`} onClick={onClick}>

frontend/src/components/ui/lab-staff/tests/Card.jsx

@@ -1,43 +1,64 @@
-import React from "react";
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
-export function Card({ children, className }) {
+export function Card({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`bg-white shadow rounded-lg p-4 ${className || ""}`}>
+    <div
+      className={`rounded-lg p-6 shadow-lg transition-all duration-300 ${
+        darkMode
+          ? "bg-gray-800 text-white border border-gray-700"
+          : "bg-white text-gray-900 border border-gray-200"
+      } ${className}`}
+    >
       {children}
     </div>
   );
 }
 
-export function CardHeader({ children, className }) {
+export function CardHeader({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`border-b pb-2 ${className || ""}`}>
+    <div
+      className={`pb-4 mb-4 border-b transition-all duration-300 ${
+        darkMode ? "bg-gray-800 border-gray-700" : "border-gray-200"
+      } ${className}`}
+    >
       {children}
     </div>
   );
 }
 
-export function CardTitle({ children, className }) {
-  return (
-    <h2 className={`text-xl font-bold ${className || ""}`}>{children}</h2>
-  );
+export function CardContent({ children, className = "" }) {
+  return <div className={className}>{children}</div>;
 }
 
-export function CardDescription({ children, className }) {
+export function CardFooter({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <p className={`text-gray-600 ${className || ""}`}>{children}</p>
+    <div
+      className={`pt-4 mt-4 border-t transition-all duration-300 ${
+        darkMode ? "bg-gray-800 border-gray-700" : "border-gray-200"
+      } ${className}`}
+    >
+      {children}
+    </div>
   );
 }
 
-export function CardContent({ children, className }) {
+export function CardTitle({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`mt-4 ${className || ""}`}>{children}</div>
+    <h2 className={`text-2xl font-bold transition-all duration-300 ${
+      darkMode ? "bg-gray-800 text-white" : "text-gray-900"
+    } ${className}`}>{children}</h2>
   );
 }
 
-export function CardFooter({ children, className }) {
+export function CardDescription({ children, className = "" }) {
+  const { darkMode } = useDarkMode();
   return (
-    <div className={`border-t pt-2 mt-4 ${className || ""}`}>
-      {children}
-    </div>
+    <p className={`transition-all duration-300 ${
+      darkMode ? "bg-gray-800 text-gray-400" : "text-gray-600"
+    } ${className}`}>{children}</p>
   );
 }

frontend/src/components/ui/lab-staff/tests/Dialog.jsx

@@ -1,60 +1,58 @@
 import React, { useState } from 'react';
+import { useDarkMode } from "../../../../helpers/DarkModeContext";
 
-export const Dialog = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+export const Dialog = ({ children }) => <div>{children}</div>;
 
-  const openDialog = () => setIsOpen(true);
-  const closeDialog = () => setIsOpen(false);
+export const DialogTrigger = ({ asChild, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const child = React.cloneElement(children, {
+    onClick: () => setIsOpen(!isOpen),
+  });
+  return <>{child}</>;
+};
 
+export const DialogContent = ({ children }) => {
+  const { darkMode } = useDarkMode();
+
   return (
-    <>
-      {React.Children.map(children, (child) =>
-        React.cloneElement(child, { isOpen, openDialog, closeDialog })
-      )}
-    </>
+    <div
+      className={`fixed inset-0 flex items-center justify-center transition-all duration-300 ${
+        darkMode ? "bg-black bg-opacity-70" : "bg-gray-800 bg-opacity-30"
+      }`}
+    >
+      <div
+        className={`rounded-lg p-6 max-w-lg w-full shadow-lg transition-all duration-300 ${
+          darkMode ? "bg-gray-800 text-white border border-gray-700" : "bg-white"
+        }`}
+      >
+        {children}
+      </div>
+    </div>
   );
 };
 
-export const DialogTrigger = ({ asChild, children, openDialog }) => {
-  if (asChild) {
-    return React.cloneElement(children, {
-      onClick: (e) => {
-        console.log("Trigger clicked");
-        openDialog();
-        children.props.onClick?.(e); // Var olan `onClick` olayını da çağır
-      },
-    });
-  }
+export const DialogHeader = ({ children }) => {
+  const { darkMode } = useDarkMode();
   return (
-    <button onClick={openDialog}>
+    <div
+      className={`mb-4 ${
+        darkMode ? "border-b border-gray-700" : "border-b border-gray-300"
+      }`}
+    >
       {children}
-    </button>
+    </div>
   );
 };
 
-export const DialogContent = ({ isOpen, closeDialog, children }) => {
-  console.log("Dialog open status:", isOpen); // Debug log
-  if (!isOpen) return null;
-
+export const DialogTitle = ({ children }) => {
+  const { darkMode } = useDarkMode();
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="bg-white rounded-md shadow-lg w-full max-w-lg p-6 relative">
-        {children}
-        <button
-          onClick={closeDialog}
-          className="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
-        >
-          &times;
-        </button>
-      </div>
-    </div>
+    <h2
+      className={`text-xl font-bold ${
+        darkMode ? "text-white" : "text-gray-800"
+      }`}
+    >
+      {children}
+    </h2>
   );
 };
-
-export const DialogHeader = ({ children }) => (
-  <div className="mb-4 border-b pb-2">{children}</div>
-);
-
-export const DialogTitle = ({ children }) => (
-  <h2 className="text-lg font-bold text-gray-800">{children}</h2>
-);