feat: QuickLab ecosystem integration with cross-navigation, patient appointments, and lab admin dashboard

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,6 +2,7 @@
 
 - [ ] QuickClinic
 - [ ] QuickMed
+- [ ] QuickLab
 
 ## Change Type
 

client/src/App.jsx

@@ -60,6 +60,9 @@ function AppInner() {
           return <PatientRoutes />;
         case 'doctor':
           return <DoctorRoutes />;
+        case 'lab_admin':
+        case 'lab_staff':
+          return <QuickLabRoutes />;
         default:
           // Fallback for unknown roles
           navigate('/', { replace: true });

client/src/components/Patient/PatientDesktopNavbar.jsx

@@ -5,10 +5,23 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 
 import SearchBar from './SearchBar';
+import { useState, useRef, useEffect } from 'react';
 
 const PatientDesktopNavbar = () => {
   const navigate = useNavigate();
   const { logout } = useAuth();
+  const [isExploreOpen, setIsExploreOpen] = useState(false);
+  const exploreRef = useRef(null);
+
+  useEffect(() => {
+    const onDocClick = (e) => {
+      if (exploreRef.current && !exploreRef.current.contains(e.target)) {
+        setIsExploreOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
 
   const handleLogout = async () => {
     try {
@@ -72,6 +85,38 @@ const PatientDesktopNavbar = () => {
             <span>Profile</span>
           </button>
 
+          {/* Explore Dropdown */}
+          <div className="relative" ref={exploreRef}>
+            <button
+              onClick={() => setIsExploreOpen((v) => !v)}
+              className="flex items-center text-gray-700 hover:text-blue-600 transition-colors px-3 py-2 rounded-md hover:bg-gray-50"
+            >
+              <span>Explore</span>
+            </button>
+            {isExploreOpen && (
+              <div className="absolute right-0 mt-2 w-40 bg-white border border-gray-200 rounded-lg shadow-lg py-2">
+                <button
+                  onClick={() => {
+                    setIsExploreOpen(false);
+                    navigate('/quick-med');
+                  }}
+                  className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+                >
+                  Quick Med
+                </button>
+                <button
+                  onClick={() => {
+                    setIsExploreOpen(false);
+                    navigate('/quick-lab');
+                  }}
+                  className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+                >
+                  Quick Lab
+                </button>
+              </div>
+            )}
+          </div>
+
           {/* Notification Bell Icon */}
           <button
             onClick={() => navigate('/patient/notifications')}

client/src/components/Patient/PatientMobileNavigation.jsx

@@ -18,6 +18,7 @@ const PatientMobileNavigation = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isExploreOpen, setIsExploreOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const { logout } = useAuth();
 
@@ -59,7 +60,7 @@ const PatientMobileNavigation = () => {
       {/* Rest of the component remains the same */}
       {/* Mobile Bottom Navigation */}
       <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50">
-        <div className="flex justify-around items-center h-16">
+        <div className="flex justify-around items-center h-16 relative">
           {bottomNavItems.map((item) => {
             const Icon = item.icon;
             const isActive = isActivePath(item.path);
@@ -76,6 +77,35 @@ const PatientMobileNavigation = () => {
               </button>
             );
           })}
+          {/* Explore toggle */}
+          <button
+            onClick={() => setIsExploreOpen((v) => !v)}
+            className="flex flex-col items-center justify-center flex-1 h-full text-gray-600"
+          >
+            <span className="text-xs mt-1">Explore</span>
+          </button>
+          {isExploreOpen && (
+            <div className="absolute bottom-16 right-4 bg-white border border-gray-200 rounded-lg shadow-lg py-2 w-40">
+              <button
+                onClick={() => {
+                  setIsExploreOpen(false);
+                  navigate('/quick-med');
+                }}
+                className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+              >
+                Quick Med
+              </button>
+              <button
+                onClick={() => {
+                  setIsExploreOpen(false);
+                  navigate('/quick-lab');
+                }}
+                className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+              >
+                Quick Lab
+              </button>
+            </div>
+          )}
         </div>
       </nav>
       {/* Rest of the hamburger menu and other components */}

client/src/components/auth/AuthButton.jsx

@@ -1,7 +1,5 @@
 import { Loader2 } from 'lucide-react';
 
-import Loading from '../ui/Loading';
-
 export const AuthButton = ({
   children,
   isLoading = false,
@@ -12,12 +10,11 @@ export const AuthButton = ({
   variant = 'primary',
 }) => {
   const baseClasses =
-    'w-full flex justify-center items-center gap-2 px-8 py-4 border border-transparent rounded-xl text-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-[1.02] active:scale-[0.98]';
+    'w-full flex justify-center items-center gap-2 px-4 py-3 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
 
   const variantClasses = {
-    primary:
-      'text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:ring-blue-500 shadow-lg hover:shadow-xl',
-    secondary: 'text-blue-700 bg-blue-50 border-blue-200 hover:bg-blue-100 focus:ring-blue-500',
+    primary: 'text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
+    secondary: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:ring-gray-500',
   };
 
   const isDisabled = disabled || isLoading;
@@ -31,7 +28,8 @@ export const AuthButton = ({
     >
       {isLoading ? (
         <>
-          <Loading />
+          <Loader2 className="w-5 h-5 animate-spin" />
+          <span>Please wait...</span>
         </>
       ) : (
         children

client/src/components/auth/ErrorMessage.jsx

@@ -1,13 +1,31 @@
-import { AlertCircle } from 'lucide-react';
+import { AlertCircle, X } from 'lucide-react';
+import { useState } from 'react';
 
 export const ErrorMessage = ({ error, className = '' }) => {
-  if (!error) return null;
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  if (!error || isDismissed) return null;
+
   return (
-    <div
-      className={`bg-red-50 border border-red-200 rounded-xl p-4 flex items-start gap-3 ${className}`}
-    >
-      <AlertCircle className="h-5 w-5 text-red-500 mt-0.5 flex-shrink-0" />
-      <p className="text-sm text-red-800 font-medium">{error}</p>
+    <div className={`animate-slideDown ${className}`}>
+      <div className="relative p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800">
+        <div className="flex items-start gap-3">
+          <div className="flex-shrink-0">
+            <div className="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/40 flex items-center justify-center">
+              <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400" />
+            </div>
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-red-800 dark:text-red-200">{error}</p>
+          </div>
+          <button
+            onClick={() => setIsDismissed(true)}
+            className="flex-shrink-0 text-red-400 hover:text-red-600 dark:hover:text-red-300 transition-colors focus:outline-none"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
     </div>
   );
 };

client/src/components/auth/PasswordInput.jsx

@@ -1,4 +1,4 @@
-import { Eye, EyeOff, Lock } from 'lucide-react';
+import { Eye, EyeOff } from 'lucide-react';
 
 export const PasswordInput = ({
   id,
@@ -13,38 +13,38 @@ export const PasswordInput = ({
   error = null,
 }) => {
   return (
-    <div className="space-y-2">
-      {label && (
-        <label htmlFor={id} className="block text-sm font-medium text-gray-700">
-          {label} {required && <span className="text-red-500">*</span>}
-        </label>
-      )}
+    <div>
       <div className="relative">
-        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-          <Lock className="h-5 w-5 text-gray-400" />
-        </div>
         <input
           id={id}
           name={name}
           type={showPassword ? 'text' : 'password'}
+          autoComplete={name === 'password' ? 'current-password' : 'new-password'}
+          required={required}
           value={value}
           onChange={onChange}
+          className={`
+            block w-full px-4 py-3 pr-11 border rounded-lg
+            focus:ring-2 focus:ring-blue-500 focus:border-transparent
+            transition-colors
+            ${
+              error
+                ? 'border-red-300 bg-red-50 dark:bg-red-900/10'
+                : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900'
+            }
+            text-gray-900 dark:text-white placeholder:text-gray-400
+          `}
           placeholder={placeholder}
-          required={required}
-          className={`w-full pl-12 pr-12 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${
-            error ? 'border-red-500 focus:ring-red-500' : ''
-          }`}
         />
         <button
           type="button"
           onClick={() => setShowPassword(!showPassword)}
-          className="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 transition-colors"
-          aria-label={showPassword ? 'Hide password' : 'Show password'}
+          className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
         >
           {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
         </button>
       </div>
-      {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
+      {error && <p className="text-sm text-red-600 dark:text-red-400 mt-1">{error}</p>}
     </div>
   );
 };

client/src/components/public/DesktopNavbar.jsx

@@ -1,9 +1,22 @@
 import { FiLogIn, FiMapPin, FiUser } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
+import { useState, useRef, useEffect } from 'react';
 import SearchBar from './SearchBar';
 
 const Navbar = () => {
   const navigate = useNavigate();
+  const [isExploreOpen, setIsExploreOpen] = useState(false);
+  const exploreRef = useRef(null);
+
+  useEffect(() => {
+    const onDocClick = (e) => {
+      if (exploreRef.current && !exploreRef.current.contains(e.target)) {
+        setIsExploreOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
 
   return (
     <nav className="bg-white shadow-md sticky top-0 z-50 hidden md:block">
@@ -37,6 +50,37 @@ const Navbar = () => {
               <FiUser className="mr-2" />
               <span className="whitespace-nowrap">Doctors</span>
             </button>
+            {/* Explore Dropdown */}
+            <div className="relative" ref={exploreRef}>
+              <button
+                onClick={() => setIsExploreOpen((v) => !v)}
+                className="flex items-center text-gray-700 hover:text-blue-600 transition-colors px-3 py-2 rounded-md hover:bg-gray-50"
+              >
+                <span className="whitespace-nowrap">Explore</span>
+              </button>
+              {isExploreOpen && (
+                <div className="absolute right-0 mt-2 w-40 bg-white border border-gray-200 rounded-lg shadow-lg py-2">
+                  <button
+                    onClick={() => {
+                      setIsExploreOpen(false);
+                      navigate('/quick-med');
+                    }}
+                    className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+                  >
+                    Quick Med
+                  </button>
+                  <button
+                    onClick={() => {
+                      setIsExploreOpen(false);
+                      navigate('/quick-lab');
+                    }}
+                    className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+                  >
+                    Quick Lab
+                  </button>
+                </div>
+              )}
+            </div>
             <button
               onClick={() => navigate('/login')}
               className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-2 rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all flex items-center shadow-sm"

client/src/components/public/MobileBottomBar.jsx

@@ -1,12 +1,14 @@
 import { FiLogIn, FiMapPin, FiSearch, FiUser } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 
 const MobileNavigation = () => {
   const navigate = useNavigate();
+  const [isExploreOpen, setIsExploreOpen] = useState(false);
   return (
     <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50">
       {/* Bottom Navigation */}
-      <div className="flex justify-around py-2">
+      <div className="flex justify-around py-2 relative">
         <button
           onClick={() => navigate('/nearby')}
           className="flex flex-col items-center text-gray-600 p-2"
@@ -28,6 +30,35 @@ const MobileNavigation = () => {
           <FiSearch size={20} />
           <span className="text-xs mt-1">Search</span>
         </button>
+        {/* Explore toggle */}
+        <button
+          onClick={() => setIsExploreOpen((v) => !v)}
+          className="flex flex-col items-center text-gray-600 p-2"
+        >
+          <span className="text-xs mt-1">Explore</span>
+        </button>
+        {isExploreOpen && (
+          <div className="absolute bottom-16 right-4 bg-white border border-gray-200 rounded-lg shadow-lg py-2 w-40">
+            <button
+              onClick={() => {
+                setIsExploreOpen(false);
+                navigate('/quick-med');
+              }}
+              className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+            >
+              Quick Med
+            </button>
+            <button
+              onClick={() => {
+                setIsExploreOpen(false);
+                navigate('/quick-lab');
+              }}
+              className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50"
+            >
+              Quick Lab
+            </button>
+          </div>
+        )}
         <button
           onClick={() => navigate('/login')}
           className="flex flex-col items-center text-gray-600 p-2"