From 8cc6f197b2b3a1a65b77dc9667f3aee14f3baae8 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Tue, 16 Dec 2025 10:04:40 +0530
Subject: [PATCH 01/44] adds service files for quicklab

---
 client/src/service/labAdminService.js       | 34 ++++++++++++++++
 client/src/service/labAppointmentService.js | 19 +++++++++
 client/src/service/labPublicService.js      | 11 ++++++
 client/src/service/labReportService.js      | 28 +++++++++++++
 client/src/service/labStaffService.js       | 44 +++++++++++++++++++++
 5 files changed, 136 insertions(+)
 create mode 100644 client/src/service/labAdminService.js
 create mode 100644 client/src/service/labAppointmentService.js
 create mode 100644 client/src/service/labPublicService.js
 create mode 100644 client/src/service/labReportService.js
 create mode 100644 client/src/service/labStaffService.js

diff --git a/client/src/service/labAdminService.js b/client/src/service/labAdminService.js
new file mode 100644
index 0000000..28d14f8
--- /dev/null
+++ b/client/src/service/labAdminService.js
@@ -0,0 +1,34 @@
+import apiService from './apiservice';
+import { createFormDataFromObject } from '../utility/formDataHelper';
+
+export const createLabAdminProfile = (data) => apiService.post('/lab-admin/profile', data);
+
+export const createLab = (labData, logoFile, photoFiles = []) => {
+  const formData = createFormDataFromObject(labData, { logo: logoFile, photos: photoFiles });
+  return apiService.post('/lab-admin/lab', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+};
+
+export const searchLabStaff = (query) =>
+  apiService.get('/lab-admin/staff/search', { params: query });
+export const addStaffToLab = (staffId) => apiService.post('/lab-admin/staff/add', { staffId });
+export const removeStaffFromLab = (staffId) => apiService.delete(`/lab-admin/staff/${staffId}`);
+export const getLabStaff = () => apiService.get('/lab-admin/staff');
+
+export const addLabTest = (testData) => apiService.post('/lab-admin/tests', testData);
+export const updateLabTest = (testId, updates) =>
+  apiService.put(`/lab-admin/tests/${testId}`, updates);
+export const getLabInfo = () => apiService.get('/lab-admin/lab/info');
+
+export default {
+  createLabAdminProfile,
+  createLab,
+  searchLabStaff,
+  addStaffToLab,
+  removeStaffFromLab,
+  getLabStaff,
+  addLabTest,
+  updateLabTest,
+  getLabInfo,
+};
diff --git a/client/src/service/labAppointmentService.js b/client/src/service/labAppointmentService.js
new file mode 100644
index 0000000..4e66749
--- /dev/null
+++ b/client/src/service/labAppointmentService.js
@@ -0,0 +1,19 @@
+import apiService from './apiservice';
+
+export const bookLabAppointment = (payload) => apiService.post('/lab-appointment/book', payload);
+export const getPatientLabAppointments = (params = {}) =>
+  apiService.get('/lab-appointment/patient', { params });
+export const getLabAppointments = (params = {}) =>
+  apiService.get('/lab-appointment/lab', { params });
+export const assignStaffForCollection = (appointmentId, staffId) =>
+  apiService.put(`/lab-appointment/${appointmentId}/assign-staff`, { staffId });
+export const updateLabAppointmentStatus = (appointmentId, status) =>
+  apiService.put(`/lab-appointment/${appointmentId}/status`, { status });
+
+export default {
+  bookLabAppointment,
+  getPatientLabAppointments,
+  getLabAppointments,
+  assignStaffForCollection,
+  updateLabAppointmentStatus,
+};
diff --git a/client/src/service/labPublicService.js b/client/src/service/labPublicService.js
new file mode 100644
index 0000000..4ccf0a6
--- /dev/null
+++ b/client/src/service/labPublicService.js
@@ -0,0 +1,11 @@
+import apiService from './apiservice';
+
+export const searchLabs = (params = {}) => apiService.get('/lab/search', { params });
+export const getLabDetails = (labId) => apiService.get(`/lab/${labId}`);
+export const getLabTests = (labId) => apiService.get(`/lab/${labId}/tests`);
+
+export default {
+  searchLabs,
+  getLabDetails,
+  getLabTests,
+};
diff --git a/client/src/service/labReportService.js b/client/src/service/labReportService.js
new file mode 100644
index 0000000..3163581
--- /dev/null
+++ b/client/src/service/labReportService.js
@@ -0,0 +1,28 @@
+import apiService from './apiservice';
+
+export const uploadLabReport = (appointmentId, file, testResults) => {
+  const formData = new FormData();
+  if (file) {
+    formData.append('reportFile', file);
+  }
+  if (testResults) {
+    formData.append('testResults', JSON.stringify(testResults));
+  }
+  return apiService.post(`/lab-report/upload/${appointmentId}`, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+};
+
+export const getPatientLabReports = () => apiService.get('/lab-report/patient');
+export const getDoctorPatientReports = () => apiService.get('/lab-report/doctor');
+export const addDoctorRemarks = (reportId, remarks) =>
+  apiService.put(`/lab-report/${reportId}/remarks`, { remarks });
+export const getReportDetails = (reportId) => apiService.get(`/lab-report/${reportId}`);
+
+export default {
+  uploadLabReport,
+  getPatientLabReports,
+  getDoctorPatientReports,
+  addDoctorRemarks,
+  getReportDetails,
+};
diff --git a/client/src/service/labStaffService.js b/client/src/service/labStaffService.js
new file mode 100644
index 0000000..16ab6d1
--- /dev/null
+++ b/client/src/service/labStaffService.js
@@ -0,0 +1,44 @@
+import apiService from './apiservice';
+import { createFormDataFromObject } from '../utility/formDataHelper';
+
+export const createStaffProfile = (profileData, profilePicture) => {
+  const formData = createFormDataFromObject(profileData, { photos: [], logo: null });
+  if (profilePicture) {
+    formData.append('profilePicture', profilePicture);
+  }
+  return apiService.post('/lab-staff/profile', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+};
+
+export const updateStaffProfile = (updates, profilePicture) => {
+  const formData = createFormDataFromObject(updates, { photos: [], logo: null });
+  if (profilePicture) {
+    formData.append('profilePicture', profilePicture);
+  }
+  return apiService.put('/lab-staff/profile', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+};
+
+export const getStaffProfile = () => apiService.get('/lab-staff/profile');
+export const checkStaffProfileExists = () => apiService.get('/lab-staff/profile/check');
+export const getMyAssignments = (params = {}) =>
+  apiService.get('/lab-staff/assignments', { params });
+export const getAssignmentDetails = (appointmentId) =>
+  apiService.get(`/lab-staff/assignments/${appointmentId}`);
+export const updateMyAssignmentStatus = (appointmentId, status, notes) =>
+  apiService.put(`/lab-staff/assignments/${appointmentId}/status`, { status, notes });
+export const completeAssignment = (appointmentId, notes) =>
+  apiService.post(`/lab-staff/assignments/${appointmentId}/complete`, { notes });
+
+export default {
+  createStaffProfile,
+  updateStaffProfile,
+  getStaffProfile,
+  checkStaffProfileExists,
+  getMyAssignments,
+  getAssignmentDetails,
+  updateMyAssignmentStatus,
+  completeAssignment,
+};

From a0f0ffdd9d4a6357e54881d8b773714d44346f12 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Tue, 16 Dec 2025 11:15:11 +0530
Subject: [PATCH 02/44] modifis login and register page for lab admin and lab
 staff

---
 client/src/App.jsx                            |   3 +
 client/src/components/auth/AuthButton.jsx     |  12 +-
 client/src/components/auth/ErrorMessage.jsx   |  32 +-
 client/src/components/auth/PasswordInput.jsx  |  34 +-
 client/src/pages/public/LoginPage.jsx         | 242 ++++++++----
 client/src/pages/public/RegisterPage.jsx      | 344 +++++++++++++-----
 client/src/pages/quicklab/LabAdminAddLab.jsx  | 341 +++++++++++++++++
 .../quicklab/LabAdminProfileComplete.jsx      | 239 ++++++++++++
 client/src/routes/QuickLabRoutes.jsx          |  52 ++-
 .../routes/guards/LabAdminPreventGuard.jsx    |  67 ++++
 .../src/routes/guards/LabAdminSetupGuard.jsx  |  67 ++++
 client/src/service/labAdminService.js         |  16 +
 client/src/utility/getDashboardPath.js        |   3 +
 .../QuickLab/labAdminController.js            |  98 ++++-
 server/Routes/QuickLab/labAdminRoutes.js      |   9 +
 15 files changed, 1345 insertions(+), 214 deletions(-)
 create mode 100644 client/src/pages/quicklab/LabAdminAddLab.jsx
 create mode 100644 client/src/pages/quicklab/LabAdminProfileComplete.jsx
 create mode 100644 client/src/routes/guards/LabAdminPreventGuard.jsx
 create mode 100644 client/src/routes/guards/LabAdminSetupGuard.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index c96cd82..65ae8c2 100644
--- a/client/src/App.jsx
+++ b/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 });
diff --git a/client/src/components/auth/AuthButton.jsx b/client/src/components/auth/AuthButton.jsx
index 5846e7f..e039b0b 100644
--- a/client/src/components/auth/AuthButton.jsx
+++ b/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
diff --git a/client/src/components/auth/ErrorMessage.jsx b/client/src/components/auth/ErrorMessage.jsx
index 7218ff6..edb012d 100644
--- a/client/src/components/auth/ErrorMessage.jsx
+++ b/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>
   );
 };
diff --git a/client/src/components/auth/PasswordInput.jsx b/client/src/components/auth/PasswordInput.jsx
index 539fedf..12dc115 100644
--- a/client/src/components/auth/PasswordInput.jsx
+++ b/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>
   );
 };
diff --git a/client/src/pages/public/LoginPage.jsx b/client/src/pages/public/LoginPage.jsx
index e413536..9cfd739 100644
--- a/client/src/pages/public/LoginPage.jsx
+++ b/client/src/pages/public/LoginPage.jsx
@@ -1,19 +1,24 @@
-import { Mail } from 'lucide-react';
+import { Mail, ArrowRight, Shield } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { AuthButton } from '../../components/auth/AuthButton.jsx';
-import { AuthLayout } from '../../components/auth/AuthLayout.jsx';
 import { ErrorMessage } from '../../components/auth/ErrorMessage.jsx';
 import { PasswordInput } from '../../components/auth/PasswordInput.jsx';
 import { useAuth } from '../../context/authContext.jsx';
 
 const LoginPage = ({ error, setError }) => {
-  const [formData, setFormData] = useState({ email: '', password: '' });
+  const navigate = useNavigate();
+  const { user, login, isAuthenticated } = useAuth();
+
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+  });
+
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
   const [fieldErrors, setFieldErrors] = useState({});
-  const { login, isAuthenticated, user } = useAuth();
-  const navigate = useNavigate();
 
   useEffect(() => {
     if (isAuthenticated && user) {
@@ -22,19 +27,27 @@ const LoginPage = ({ error, setError }) => {
           navigate('/doctor-dashboard');
           break;
         case 'admin':
-          navigate('/admin/complete-profile');
+          navigate('/admin-dashboard');
+          break;
+        case 'lab_admin':
+          navigate('/lab-admin/dashboard');
+          break;
+        case 'lab_staff':
+          navigate('/lab-staff/dashboard');
           break;
         default:
           navigate('/patient-dashboard');
       }
     }
-  }, [isAuthenticated, navigate]);
+  }, [isAuthenticated, navigate, user]);
 
   const validateForm = () => {
     const errors = {};
     if (!formData.email) errors.email = 'Email is required';
-    else if (!/\S+@\S+\.\S+/.test(formData.email)) errors.email = 'Email is invalid';
+    else if (!/\S+@\S+\.\S+/.test(formData.email)) errors.email = 'Invalid email address';
+
     if (!formData.password) errors.password = 'Password is required';
+
     setFieldErrors(errors);
     return Object.keys(errors).length === 0;
   };
@@ -48,102 +61,171 @@ const LoginPage = ({ error, setError }) => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
     if (!validateForm()) return;
 
     setIsLoading(true);
-    setError(''); // Clear any existing errors
+    setError('');
 
-    // Call the login function and handle the result
     const result = await login({
       email: formData.email,
       password: formData.password,
     });
 
     if (!result.success) {
-      setError(result.error || 'Login failed. Please try again.');
+      setError(result.error || 'Invalid credentials. Please try again.');
     }
-
     setIsLoading(false);
   };
 
   return (
-    <AuthLayout>
-      <div className="space-y-6">
-        <div className="text-center">
-          <h2 className="text-3xl font-bold text-gray-900">Welcome Back</h2>
-          <p className="mt-2 text-sm text-gray-600">Sign in to your account</p>
-        </div>
-
-        <ErrorMessage error={error} />
-
-        <form onSubmit={handleSubmit} className="space-y-6">
-          {/* Email Input */}
-          <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-              Email Address
-            </label>
-            <div className="relative">
-              <input
-                id="email"
-                name="email"
-                type="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                  fieldErrors.email ? 'border-red-500' : 'border-gray-300'
-                }`}
-                placeholder="Enter your email"
-              />
-              <Mail className="absolute left-3 top-3.5 h-5 w-5 text-gray-400" />
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+      {/* Left Side - Form */}
+      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 py-12">
+        <div className="w-full max-w-md space-y-8">
+          {/* Header */}
+          <div className="text-center">
+            <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-blue-600 mb-6">
+              <Shield className="w-8 h-8 text-white" />
             </div>
-            {fieldErrors.email && <p className="mt-1 text-sm text-red-600">{fieldErrors.email}</p>}
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">
+              Sign in to Quick Clinic
+            </h1>
+            <p className="mt-3 text-base text-gray-600 dark:text-gray-400">
+              Access your healthcare dashboard
+            </p>
           </div>
 
-          {/* Password Input */}
-          <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
-              Password
-            </label>
-            <PasswordInput
-              id="password"
-              name="password"
-              value={formData.password}
-              onChange={handleInputChange}
-              showPassword={showPassword}
-              setShowPassword={setShowPassword}
-              error={fieldErrors.password}
-              placeholder="Enter your password"
-            />
-            {fieldErrors.password && (
-              <p className="mt-1 text-sm text-red-600">{fieldErrors.password}</p>
-            )}
+          {/* Form */}
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-8">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <ErrorMessage error={error} />
+
+              {/* Email */}
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                >
+                  Email
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  className={`
+                    block w-full px-4 py-3 border rounded-lg
+                    focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                    transition-colors
+                    ${
+                      fieldErrors.email
+                        ? '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="name@company.com"
+                />
+                {fieldErrors.email && (
+                  <p className="text-sm text-red-600 dark:text-red-400 mt-1">{fieldErrors.email}</p>
+                )}
+              </div>
+
+              {/* Password */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <label
+                    htmlFor="password"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                  >
+                    Password
+                  </label>
+                  <Link
+                    to="/forgot-password"
+                    className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400"
+                  >
+                    Forgot password?
+                  </Link>
+                </div>
+                <PasswordInput
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  showPassword={showPassword}
+                  setShowPassword={setShowPassword}
+                  required
+                  error={fieldErrors.password}
+                  placeholder="Enter your password"
+                />
+              </div>
+
+              {/* Remember Me */}
+              <div className="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  checked={rememberMe}
+                  onChange={(e) => setRememberMe(e.target.checked)}
+                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <label
+                  htmlFor="remember-me"
+                  className="ml-2 text-sm text-gray-700 dark:text-gray-300"
+                >
+                  Remember me for 30 days
+                </label>
+              </div>
+
+              {/* Submit */}
+              <AuthButton type="submit" isLoading={isLoading} disabled={isLoading}>
+                Sign in
+              </AuthButton>
+            </form>
           </div>
 
-          {/* Forgot Password Link */}
-          <div className="text-right">
-            <Link to="/forgot-password" className="text-sm text-blue-600 hover:text-blue-500">
-              Forgot password?
+          {/* Sign Up Link */}
+          <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+            Don't have an account?{' '}
+            <Link
+              to="/register"
+              className="font-semibold text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400"
+            >
+              Create account
             </Link>
-          </div>
-
-          {/* Submit Button */}
-          <AuthButton type="submit" isLoading={isLoading} className="w-full">
-            {isLoading ? 'Signing In...' : 'Sign In'}
-          </AuthButton>
+          </p>
+        </div>
+      </div>
 
-          {/* Register Link */}
-          <div className="text-center">
-            <p className="text-sm text-gray-600">
-              Don't have an account?{' '}
-              <Link to="/register" className="text-blue-600 hover:text-blue-500 font-medium">
-                Create one
-              </Link>
-            </p>
+      {/* Right Side - Branding */}
+      <div className="hidden lg:flex flex-1 bg-gradient-to-br from-blue-600 to-blue-800 items-center justify-center p-12">
+        <div className="max-w-md text-white space-y-6">
+          <h2 className="text-4xl font-bold">Welcome back to Quick Clinic</h2>
+          <p className="text-lg text-blue-100">
+            Manage appointments, access medical reports, and connect with your healthcare team—all
+            in one secure platform.
+          </p>
+          <div className="space-y-4 pt-4">
+            <div className="flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-white"></div>
+              <span className="text-blue-50">Secure & encrypted</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-white"></div>
+              <span className="text-blue-50">24/7 access to your health data</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-white"></div>
+              <span className="text-blue-50">HIPAA compliant</span>
+            </div>
           </div>
-        </form>
+        </div>
       </div>
-    </AuthLayout>
+    </div>
   );
 };
 
diff --git a/client/src/pages/public/RegisterPage.jsx b/client/src/pages/public/RegisterPage.jsx
index 142302d..43b5395 100644
--- a/client/src/pages/public/RegisterPage.jsx
+++ b/client/src/pages/public/RegisterPage.jsx
@@ -1,8 +1,7 @@
-import { Check, Mail, Shield, Stethoscope, User } from 'lucide-react';
+import { Check, Mail, Shield, Stethoscope, User, Microscope, FlaskConical } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { AuthButton } from '../../components/auth/AuthButton.jsx';
-import { AuthLayout } from '../../components/auth/AuthLayout.jsx';
 import { ErrorMessage } from '../../components/auth/ErrorMessage.jsx';
 import { PasswordInput } from '../../components/auth/PasswordInput.jsx';
 import { useAuth } from '../../context/authContext.jsx';
@@ -17,6 +16,7 @@ const RegisterPage = ({ error, setError }) => {
     confirmPassword: '',
     role: 'patient',
   });
+
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -31,19 +31,26 @@ const RegisterPage = ({ error, setError }) => {
         case 'admin':
           navigate('/admin/complete-profile');
           break;
+        case 'lab_admin':
+          navigate('/quick-lab/lab-admin/dashboard');
+          break;
+        case 'lab_staff':
+          navigate('/quick-lab/lab-staff/dashboard');
+          break;
         default:
           navigate('/patient-dashboard');
       }
     }
-  }, [isAuthenticated, navigate]);
+  }, [isAuthenticated, navigate, user]);
 
   const validateForm = () => {
     const errors = {};
     if (!formData.email) errors.email = 'Email is required';
-    else if (!/\S+@\S+\.\S+/.test(formData.email)) errors.email = 'Email is invalid';
+    else if (!/\S+@\S+\.\S+/.test(formData.email)) errors.email = 'Invalid email address';
+
     if (!formData.password) errors.password = 'Password is required';
-    else if (formData.password.length < 8)
-      errors.password = 'Password must be at least 8 characters';
+    else if (formData.password.length < 8) errors.password = 'Must be at least 8 characters';
+
     if (formData.password !== formData.confirmPassword)
       errors.confirmPassword = 'Passwords do not match';
 
@@ -70,116 +77,251 @@ const RegisterPage = ({ error, setError }) => {
       password: formData.password,
       role: formData.role,
     });
+
     if (!result.success) {
-      console.log(result);
       setError(result.error || 'Registration failed. Please try again.');
     }
     setIsLoading(false);
   };
 
   const roleOptions = [
-    { value: 'patient', label: 'Patient', icon: User, color: 'blue' },
-    { value: 'doctor', label: 'Doctor', icon: Stethoscope, color: 'green' },
-    { value: 'admin', label: 'Admin', icon: Shield, color: 'purple' },
+    {
+      value: 'patient',
+      label: 'Patient',
+      icon: User,
+      description: 'Book appointments & manage health records',
+    },
+    {
+      value: 'doctor',
+      label: 'Doctor',
+      icon: Stethoscope,
+      description: 'Manage consultations & patient care',
+    },
+    {
+      value: 'admin',
+      label: 'Administrator',
+      icon: Shield,
+      description: 'Oversee clinic operations',
+    },
+    {
+      value: 'lab_admin',
+      label: 'Lab Administrator',
+      icon: Microscope,
+      description: 'Manage laboratory operations',
+    },
+    {
+      value: 'lab_staff',
+      label: 'Lab Staff',
+      icon: FlaskConical,
+      description: 'Process tests & upload results',
+    },
   ];
 
   return (
-    <AuthLayout
-      title="Create Your Account"
-      subtitle="Join Quick Clinic to manage your health with ease."
-    >
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <ErrorMessage error={error} />
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">I am a:</label>
-          <div className="grid grid-cols-3 gap-3">
-            {roleOptions.map((option) => (
-              <label
-                key={option.value}
-                htmlFor={option.value}
-                className={`relative flex flex-col items-center justify-center p-3 rounded-xl border-2 cursor-pointer transition-all ${formData.role === option.value ? `border-${option.color}-500 bg-${option.color}-50` : 'border-gray-200 hover:border-gray-300'}`}
-              >
-                <input
-                  type="radio"
-                  id={option.value}
-                  name="role"
-                  value={option.value}
-                  checked={formData.role === option.value}
-                  onChange={handleInputChange}
-                  className="sr-only"
-                />
-                <option.icon
-                  className={`w-6 h-6 mb-1 ${formData.role === option.value ? `text-${option.color}-600` : 'text-gray-500'}`}
-                />
-                <span className="text-sm font-medium text-gray-800">{option.label}</span>
-                {formData.role === option.value && (
-                  <Check
-                    className={`w-5 h-5 text-white bg-${option.color}-500 rounded-full p-1 absolute top-1 right-1`}
-                  />
-                )}
-              </label>
-            ))}
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex overflow-hidden">
+      {/* Left Side - Branding */}
+      <div className="hidden lg:flex flex-1 bg-gradient-to-br from-blue-600 to-blue-800 items-center justify-center p-8">
+        <div className="max-w-md text-white space-y-4">
+          <h2 className="text-3xl font-bold">Join Quick Clinic</h2>
+          <p className="text-base text-blue-100">
+            One unified platform for patients, doctors, administrators, and laboratory staff.
+          </p>
+          <div className="space-y-3 pt-2">
+            <div className="flex items-center gap-3">
+              <div className="w-1.5 h-1.5 rounded-full bg-white"></div>
+              <span className="text-sm text-blue-50">Role-based access control</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-1.5 h-1.5 rounded-full bg-white"></div>
+              <span className="text-sm text-blue-50">Enterprise-grade security</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-1.5 h-1.5 rounded-full bg-white"></div>
+              <span className="text-sm text-blue-50">Seamless healthcare management</span>
+            </div>
           </div>
         </div>
+      </div>
 
-        <div className="relative">
-          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-            <Mail className="h-5 w-5 text-gray-400" />
+      {/* Right Side - Form */}
+      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 py-6">
+        <div className="w-full max-w-2xl">
+          {/* Header - Compact */}
+          <div className="text-center mb-6">
+            <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-blue-600 mb-4">
+              <Shield className="w-6 h-6 text-white" />
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white tracking-tight">
+              Create your account
+            </h1>
+            <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+              Get started with Quick Clinic today
+            </p>
           </div>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            value={formData.email}
-            onChange={handleInputChange}
-            placeholder="Email Address"
-            required
-            className={`w-full pl-12 pr-4 py-3 border rounded-xl focus:ring-2 focus:border-transparent transition-all ${fieldErrors.email ? 'border-red-500 ring-red-500' : 'border-gray-300 focus:ring-blue-500'}`}
-          />
-        </div>
-        {fieldErrors.email && (
-          <p className="text-sm text-red-600 -mt-4 ml-2">{fieldErrors.email}</p>
-        )}
-
-        <PasswordInput
-          id="password"
-          name="password"
-          value={formData.password}
-          onChange={handleInputChange}
-          placeholder="Create Password"
-          showPassword={showPassword}
-          setShowPassword={setShowPassword}
-          error={fieldErrors.password}
-          required
-        />
-
-        <PasswordInput
-          id="confirmPassword"
-          name="confirmPassword"
-          value={formData.confirmPassword}
-          onChange={handleInputChange}
-          placeholder="Confirm Password"
-          showPassword={showConfirmPassword}
-          setShowPassword={setShowConfirmPassword}
-          error={fieldErrors.confirmPassword}
-          required
-        />
-
-        <div className="pt-2">
-          <AuthButton type="submit" isLoading={isLoading} disabled={isLoading}>
-            Create Account
-          </AuthButton>
-        </div>
 
-        <p className="text-center text-sm text-gray-600">
-          Already have an account?{' '}
-          <Link to="/login" className="font-semibold text-blue-600 hover:text-blue-500">
-            Sign In
-          </Link>
-        </p>
-      </form>
-    </AuthLayout>
+          {/* Form - Compact */}
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <ErrorMessage error={error} />
+
+              {/* Role Selection - Compact Grid */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Select your role
+                </label>
+                <div className="grid grid-cols-5 gap-2">
+                  {roleOptions.map((role) => {
+                    const Icon = role.icon;
+                    const isSelected = formData.role === role.value;
+
+                    return (
+                      <button
+                        key={role.value}
+                        type="button"
+                        onClick={() => setFormData((prev) => ({ ...prev, role: role.value }))}
+                        className={`
+                          relative p-3 rounded-lg border-2 text-center transition-all group
+                          ${
+                            isSelected
+                              ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                              : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                          }
+                        `}
+                        title={role.description}
+                      >
+                        {isSelected && (
+                          <div className="absolute -top-1 -right-1">
+                            <Check className="w-4 h-4 text-white bg-blue-600 rounded-full p-0.5" />
+                          </div>
+                        )}
+                        <Icon
+                          className={`w-5 h-5 mx-auto mb-1 ${isSelected ? 'text-blue-600' : 'text-gray-400'}`}
+                        />
+                        <div className="text-xs font-medium text-gray-900 dark:text-white">
+                          {role.label}
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Email & Passwords in 2 Columns */}
+              <div className="grid grid-cols-2 gap-4">
+                {/* Email */}
+                <div className="col-span-2">
+                  <label
+                    htmlFor="email"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
+                  >
+                    Email
+                  </label>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    className={`
+                      block w-full px-3 py-2.5 border rounded-lg text-sm
+                      focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                      transition-colors
+                      ${
+                        fieldErrors.email
+                          ? '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="name@company.com"
+                  />
+                  {fieldErrors.email && (
+                    <p className="text-xs text-red-600 dark:text-red-400 mt-1">
+                      {fieldErrors.email}
+                    </p>
+                  )}
+                </div>
+
+                {/* Password */}
+                <div>
+                  <label
+                    htmlFor="password"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
+                  >
+                    Password
+                  </label>
+                  <PasswordInput
+                    id="password"
+                    name="password"
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    showPassword={showPassword}
+                    setShowPassword={setShowPassword}
+                    required
+                    error={fieldErrors.password}
+                    placeholder="Min. 8 characters"
+                    compact
+                  />
+                </div>
+
+                {/* Confirm Password */}
+                <div>
+                  <label
+                    htmlFor="confirmPassword"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
+                  >
+                    Confirm password
+                  </label>
+                  <PasswordInput
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    value={formData.confirmPassword}
+                    onChange={handleInputChange}
+                    showPassword={showConfirmPassword}
+                    setShowPassword={setShowConfirmPassword}
+                    required
+                    error={fieldErrors.confirmPassword}
+                    placeholder="Re-enter password"
+                    compact
+                  />
+                </div>
+              </div>
+
+              {/* Terms - Compact */}
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                By creating an account, you agree to our{' '}
+                <Link to="/terms" className="text-blue-600 hover:text-blue-500">
+                  Terms
+                </Link>{' '}
+                and{' '}
+                <Link to="/privacy" className="text-blue-600 hover:text-blue-500">
+                  Privacy Policy
+                </Link>
+                .
+              </p>
+
+              {/* Submit - Compact */}
+              <AuthButton type="submit" isLoading={isLoading} disabled={isLoading}>
+                Create account
+              </AuthButton>
+            </form>
+          </div>
+
+          {/* Sign In Link - Compact */}
+          <p className="text-center text-sm text-gray-600 dark:text-gray-400 mt-4">
+            Already have an account?{' '}
+            <Link
+              to="/login"
+              className="font-semibold text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400"
+            >
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/client/src/pages/quicklab/LabAdminAddLab.jsx b/client/src/pages/quicklab/LabAdminAddLab.jsx
new file mode 100644
index 0000000..1c33ea2
--- /dev/null
+++ b/client/src/pages/quicklab/LabAdminAddLab.jsx
@@ -0,0 +1,341 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Building2, Phone, Mail, Globe, MapPin, Upload, Image } from 'lucide-react';
+import Loading from '../../components/ui/Loading';
+import { createLab } from '../../service/labAdminService';
+import '../../quicklab.css';
+
+const initialState = {
+  name: '',
+  description: '',
+  contact: {
+    phone: '',
+    email: '',
+    website: '',
+  },
+  address: {
+    formattedAddress: '',
+    city: '',
+    state: '',
+    zipCode: '',
+    country: '',
+  },
+  generalHomeCollectionFee: '',
+};
+
+export default function LabAdminAddLab() {
+  const navigate = useNavigate();
+  const [form, setForm] = useState(initialState);
+  const [logoFile, setLogoFile] = useState(null);
+  const [photoFiles, setPhotoFiles] = useState([]);
+  const [logoPreview, setLogoPreview] = useState(null);
+  const [photoPreviews, setPhotoPreviews] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleInputChange = (path, value) => {
+    setForm((prev) => {
+      // Safe deep clone for nested updates
+      const updated = JSON.parse(JSON.stringify(prev));
+      const keys = path.split('.');
+      let target = updated;
+      keys.slice(0, -1).forEach((k) => {
+        target[k] = target[k] || {};
+        target = target[k];
+      });
+      target[keys[keys.length - 1]] = value;
+      return updated;
+    });
+  };
+
+  const handleLogoChange = (e) => {
+    const file = e.target.files?.[0];
+    setLogoFile(file || null);
+    setLogoPreview(file ? URL.createObjectURL(file) : null);
+  };
+
+  const handlePhotosChange = (e) => {
+    const files = Array.from(e.target.files || []);
+    setPhotoFiles(files);
+    setPhotoPreviews(files.map((file) => URL.createObjectURL(file)));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      if (!form.name.trim() || !form.contact.phone.trim()) {
+        setError('Lab name and contact phone are required.');
+        setLoading(false);
+        return;
+      }
+
+      const payload = {
+        ...form,
+        generalHomeCollectionFee: form.generalHomeCollectionFee
+          ? Number(form.generalHomeCollectionFee)
+          : undefined,
+      };
+
+      await createLab(payload, logoFile, photoFiles);
+      navigate('/quick-lab/dashboard', { replace: true });
+    } catch (err) {
+      setError(err?.response?.data?.message || 'Failed to create lab');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white px-4 py-8 md:py-12">
+      <div className="max-w-5xl mx-auto">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-lab-yellow-100 mb-4">
+            <Building2 className="w-6 h-6 text-lab-yellow-700" />
+          </div>
+          <h1 className="text-3xl md:text-4xl font-bold text-lab-black-900 mb-2">Add Your Lab</h1>
+          <p className="text-lab-black-600 text-base max-w-2xl mx-auto">
+            Provide your lab details so patients and doctors can find and trust your services.
+          </p>
+        </div>
+
+        <div className="card-quicklab bg-white border border-lab-black-100 shadow-lg">
+          {error && (
+            <div className="mb-6 p-4 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-lab-black-800" htmlFor="name">
+                  Lab Name <span className="text-red-500">*</span>
+                </label>
+                <div className="relative">
+                  <input
+                    id="name"
+                    type="text"
+                    value={form.name}
+                    onChange={(e) => handleInputChange('name', e.target.value)}
+                    className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent"
+                    placeholder="QuickLab Diagnostics"
+                    required
+                  />
+                  <Building2 className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-lab-black-800" htmlFor="phone">
+                  Contact Phone <span className="text-red-500">*</span>
+                </label>
+                <div className="relative">
+                  <input
+                    id="phone"
+                    type="tel"
+                    value={form.contact.phone}
+                    onChange={(e) => handleInputChange('contact.phone', e.target.value)}
+                    className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent"
+                    placeholder="+1 (555) 000-0000"
+                    required
+                  />
+                  <Phone className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-lab-black-800" htmlFor="description">
+                Description
+              </label>
+              <textarea
+                id="description"
+                value={form.description}
+                onChange={(e) => handleInputChange('description', e.target.value)}
+                className="w-full min-h-[120px] rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent p-3"
+                placeholder="Briefly describe your lab, specialties, or services"
+              />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-lab-black-800" htmlFor="email">
+                  Contact Email
+                </label>
+                <div className="relative">
+                  <input
+                    id="email"
+                    type="email"
+                    value={form.contact.email}
+                    onChange={(e) => handleInputChange('contact.email', e.target.value)}
+                    className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent"
+                    placeholder="lab@example.com"
+                  />
+                  <Mail className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-lab-black-800" htmlFor="website">
+                  Website
+                </label>
+                <div className="relative">
+                  <input
+                    id="website"
+                    type="url"
+                    value={form.contact.website}
+                    onChange={(e) => handleInputChange('contact.website', e.target.value)}
+                    className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent"
+                    placeholder="https://yourlab.com"
+                  />
+                  <Globe className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-lab-black-800" htmlFor="fee">
+                  Home Collection Fee
+                </label>
+                <input
+                  id="fee"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={form.generalHomeCollectionFee}
+                  onChange={(e) => handleInputChange('generalHomeCollectionFee', e.target.value)}
+                  className="w-full rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent p-3"
+                  placeholder="e.g., 10"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-lab-black-800" htmlFor="address">
+                Address
+              </label>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="relative">
+                  <input
+                    id="address"
+                    type="text"
+                    value={form.address.formattedAddress}
+                    onChange={(e) => handleInputChange('address.formattedAddress', e.target.value)}
+                    className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent"
+                    placeholder="Street & number"
+                  />
+                  <MapPin className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+                </div>
+                <input
+                  type="text"
+                  placeholder="City"
+                  value={form.address.city}
+                  onChange={(e) => handleInputChange('address.city', e.target.value)}
+                  className="w-full rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent p-3"
+                />
+                <input
+                  type="text"
+                  placeholder="State/Province"
+                  value={form.address.state}
+                  onChange={(e) => handleInputChange('address.state', e.target.value)}
+                  className="w-full rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent p-3"
+                />
+                <div className="grid grid-cols-2 gap-3">
+                  <input
+                    type="text"
+                    placeholder="ZIP/Postal"
+                    value={form.address.zipCode}
+                    onChange={(e) => handleInputChange('address.zipCode', e.target.value)}
+                    className="w-full rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent p-3"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Country"
+                    value={form.address.country}
+                    onChange={(e) => handleInputChange('address.country', e.target.value)}
+                    className="w-full rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent p-3"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-lab-black-800">Logo</label>
+                <div className="flex items-center gap-4">
+                  <label className="flex-1 flex items-center justify-center px-4 py-3 border-2 border-dashed border-lab-yellow-400 rounded-lg cursor-pointer hover:bg-lab-yellow-50 transition-colors">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleLogoChange}
+                    />
+                    <span className="flex items-center gap-2 text-lab-black-800 text-sm font-medium">
+                      <Upload className="w-5 h-5 text-lab-yellow-600" /> Upload logo
+                    </span>
+                  </label>
+                  {logoPreview && (
+                    <img
+                      src={logoPreview}
+                      alt="Logo preview"
+                      className="w-14 h-14 rounded-lg border-2 border-lab-yellow-400 object-cover"
+                    />
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-lab-black-800">Photos</label>
+                <label className="flex items-center justify-center px-4 py-3 border-2 border-dashed border-lab-yellow-400 rounded-lg cursor-pointer hover:bg-lab-yellow-50 transition-colors">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    className="hidden"
+                    onChange={handlePhotosChange}
+                  />
+                  <span className="flex items-center gap-2 text-lab-black-800 text-sm font-medium">
+                    <Image className="w-5 h-5 text-lab-yellow-600" /> Upload photos
+                  </span>
+                </label>
+                {photoPreviews.length > 0 && (
+                  <div className="grid grid-cols-5 gap-2">
+                    {photoPreviews.map((src, idx) => (
+                      <img
+                        key={idx}
+                        src={src}
+                        alt={`Preview ${idx + 1}`}
+                        className="w-full h-16 object-cover rounded-lg border border-lab-black-200"
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full btn-quicklab-primary py-3 font-semibold rounded-lg transition-all disabled:opacity-70 disabled:cursor-not-allowed hover:shadow-lg"
+            >
+              {loading ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loading />
+                  Saving Lab...
+                </span>
+              ) : (
+                'Save Lab & Continue'
+              )}
+            </button>
+
+            <p className="text-xs text-lab-black-500 text-center">
+              You can update these details later from your dashboard.
+            </p>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/quicklab/LabAdminProfileComplete.jsx b/client/src/pages/quicklab/LabAdminProfileComplete.jsx
new file mode 100644
index 0000000..5e965aa
--- /dev/null
+++ b/client/src/pages/quicklab/LabAdminProfileComplete.jsx
@@ -0,0 +1,239 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Upload, User, Phone } from 'lucide-react';
+import Loading from '../../components/ui/Loading';
+import { createLabAdminProfile } from '../../service/labAdminService';
+import '../../quicklab.css';
+
+export default function LabAdminProfileComplete() {
+  const navigate = useNavigate();
+
+  const [fields, setFields] = useState({
+    firstName: '',
+    lastName: '',
+    phoneNumber: '',
+    profilePicture: null,
+  });
+  const [profilePreview, setProfilePreview] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleChange = (e) => {
+    const { name, value, files } = e.target;
+    if (name === 'profilePicture' && files && files[0]) {
+      setFields((f) => ({
+        ...f,
+        profilePicture: files[0],
+      }));
+      setProfilePreview(URL.createObjectURL(files[0]));
+    } else {
+      setFields((f) => ({
+        ...f,
+        [name]: value,
+      }));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const { firstName, lastName, phoneNumber } = fields;
+      if (!firstName || !lastName || !phoneNumber) {
+        setError('Please fill out all required fields');
+        setLoading(false);
+        return;
+      }
+
+      const profileData = { firstName, lastName, phoneNumber };
+      await createLabAdminProfile(profileData);
+      navigate('/quick-lab/add-lab', { replace: true });
+    } catch (err) {
+      setError(err?.response?.data?.message || 'Failed to complete profile');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white px-4 py-8 md:py-12">
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-lab-yellow-100 mb-4">
+            <User className="w-6 h-6 text-lab-yellow-700" />
+          </div>
+          <h1 className="text-3xl md:text-4xl font-bold text-lab-black-900 mb-2">
+            Complete Your Profile
+          </h1>
+          <p className="text-lab-black-600 text-base max-w-lg mx-auto">
+            Help us get to know you better. Your profile information will help us serve you best.
+          </p>
+        </div>
+
+        {/* Main Card */}
+        <div className="card-quicklab bg-white shadow-lg border border-lab-black-100 max-w-xl mx-auto">
+          {error && (
+            <div className="mb-6 p-4 rounded-lg bg-red-50 border border-red-200 flex items-start gap-3">
+              <div className="w-5 h-5 rounded-full bg-red-200 flex items-center justify-center flex-shrink-0 mt-0.5">
+                <span className="text-red-700 text-xs font-bold">!</span>
+              </div>
+              <p className="text-red-700 text-sm">{error}</p>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Name Fields */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label
+                  htmlFor="firstName"
+                  className="block text-sm font-semibold text-lab-black-800"
+                >
+                  First Name <span className="text-red-500">*</span>
+                </label>
+                <div className="relative">
+                  <input
+                    id="firstName"
+                    name="firstName"
+                    type="text"
+                    value={fields.firstName}
+                    onChange={handleChange}
+                    required
+                    className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent transition-all"
+                    placeholder="John"
+                    autoFocus
+                  />
+                  <User className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label
+                  htmlFor="lastName"
+                  className="block text-sm font-semibold text-lab-black-800"
+                >
+                  Last Name <span className="text-red-500">*</span>
+                </label>
+                <div className="relative">
+                  <input
+                    id="lastName"
+                    name="lastName"
+                    type="text"
+                    value={fields.lastName}
+                    onChange={handleChange}
+                    required
+                    className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent transition-all"
+                    placeholder="Doe"
+                  />
+                  <User className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+                </div>
+              </div>
+            </div>
+
+            {/* Phone Number */}
+            <div className="space-y-2">
+              <label
+                htmlFor="phoneNumber"
+                className="block text-sm font-semibold text-lab-black-800"
+              >
+                Phone Number <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <input
+                  id="phoneNumber"
+                  name="phoneNumber"
+                  type="tel"
+                  value={fields.phoneNumber}
+                  onChange={handleChange}
+                  required
+                  maxLength={15}
+                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-lab-black-200 text-lab-black-900 placeholder-lab-black-400 focus:outline-none focus:ring-2 focus:ring-lab-yellow-400 focus:border-transparent transition-all"
+                  placeholder="+1 (555) 000-0000"
+                />
+                <Phone className="absolute left-3 top-3.5 w-5 h-5 text-lab-black-400" />
+              </div>
+            </div>
+
+            {/* Profile Picture */}
+            <div className="space-y-2">
+              <label
+                htmlFor="profilePicture"
+                className="block text-sm font-semibold text-lab-black-800"
+              >
+                Profile Picture{' '}
+                <span className="text-lab-black-500 font-normal text-xs">(optional)</span>
+              </label>
+              <div className="relative">
+                <input
+                  id="profilePicture"
+                  name="profilePicture"
+                  type="file"
+                  accept="image/*"
+                  onChange={handleChange}
+                  className="hidden"
+                />
+                <label
+                  htmlFor="profilePicture"
+                  className="flex items-center justify-center w-full px-4 py-6 border-2 border-dashed border-lab-yellow-400 rounded-lg cursor-pointer hover:bg-lab-yellow-50 transition-colors"
+                >
+                  <div className="text-center">
+                    <Upload className="w-8 h-8 text-lab-yellow-600 mx-auto mb-2" />
+                    <p className="text-sm font-medium text-lab-black-800">Click to upload image</p>
+                    <p className="text-xs text-lab-black-500 mt-1">PNG, JPG up to 5MB</p>
+                  </div>
+                </label>
+              </div>
+
+              {profilePreview && (
+                <div className="flex items-center gap-4 mt-4 p-4 rounded-lg bg-lab-black-50 border border-lab-black-200">
+                  <img
+                    src={profilePreview}
+                    alt="Profile preview"
+                    className="w-16 h-16 rounded-lg object-cover border-2 border-lab-yellow-400"
+                  />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-lab-black-900">Preview</p>
+                    <p className="text-xs text-lab-black-500">Click upload button to change</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setFields((f) => ({ ...f, profilePicture: null }));
+                      setProfilePreview(null);
+                    }}
+                    className="px-3 py-1 text-xs font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                  >
+                    Remove
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full btn-quicklab-primary py-3 font-semibold rounded-lg transition-all disabled:opacity-70 disabled:cursor-not-allowed hover:shadow-lg"
+            >
+              {loading ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loading />
+                  Saving Profile...
+                </span>
+              ) : (
+                'Complete Profile & Continue'
+              )}
+            </button>
+
+            {/* Help Text */}
+            <p className="text-xs text-lab-black-500 text-center">
+              This information will help us manage your lab more effectively.
+            </p>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index b01c1dc..641c56f 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -1,12 +1,62 @@
 import { Routes, Route } from 'react-router-dom';
-import NotFoundPage from '../components/ui/NotFoundPage';
 import Navbar from '../components/quicklab/Navbar';
 import QuickLabHomepage from '../pages/quicklab/Homepage';
+import LabAdminProfileComplete from '../pages/quicklab/LabAdminProfileComplete';
+import LabAdminAddLab from '../pages/quicklab/LabAdminAddLab';
+import LabAdminPreventGuard from './guards/LabAdminPreventGuard';
+import LabAdminSetupGuard from './guards/LabAdminSetupGuard';
+import ProtectedRoute from './guards/protectedRoutes';
+
 export default function QuickLabRoutes() {
   return (
     <>
       <Navbar />
       <Routes>
+        {/* Complete Profile - Prevent if profile already exists */}
+        <Route
+          path="/quick-lab/complete-profile"
+          element={
+            <ProtectedRoute allowedRoles={['lab_admin', 'lab_staff']}>
+              <LabAdminPreventGuard preventProfile={true}>
+                <LabAdminProfileComplete />
+              </LabAdminPreventGuard>
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Lab Admin Dashboard - Requires profile */}
+        <Route
+          path="/quick-lab/dashboard"
+          element={
+            <ProtectedRoute allowedRoles={['lab_admin', 'lab_staff']}>
+              <LabAdminSetupGuard requireProfile={true} requireLab={true}>
+                <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8">
+                  <div className="max-w-6xl mx-auto">
+                    <h1 className="text-4xl font-bold text-lab-black-900 mb-2">Lab Dashboard</h1>
+                    <p className="text-lab-black-600">Coming soon...</p>
+                  </div>
+                </div>
+              </LabAdminSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Add Lab - Requires profile, prevent if lab already exists */}
+        <Route
+          path="/quick-lab/add-lab"
+          element={
+            <ProtectedRoute allowedRoles={['lab_admin']}>
+              <LabAdminSetupGuard requireProfile={true} requireLab={false}>
+                <LabAdminPreventGuard preventLab={true}>
+                  <LabAdminAddLab />
+                </LabAdminPreventGuard>
+              </LabAdminSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Public homepage */}
+        <Route path="/" element={<QuickLabHomepage />} />
         <Route path="*" element={<QuickLabHomepage />} />
       </Routes>
     </>
diff --git a/client/src/routes/guards/LabAdminPreventGuard.jsx b/client/src/routes/guards/LabAdminPreventGuard.jsx
new file mode 100644
index 0000000..748990b
--- /dev/null
+++ b/client/src/routes/guards/LabAdminPreventGuard.jsx
@@ -0,0 +1,67 @@
+// src/routes/guards/LabAdminPreventGuard.jsx
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import Loading from '../../components/ui/Loading';
+import { useAuth } from '../../context/authContext';
+import { checkLabAdminProfileExists, checkLabExists } from '../../service/labAdminService';
+
+const LabAdminPreventGuard = ({ preventProfile = false, preventLab = false, children }) => {
+  const { isAuthenticated, user } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let mounted = true;
+    const runChecks = async () => {
+      if (!isAuthenticated || (user?.role !== 'lab_admin' && user?.role !== 'lab_staff')) {
+        navigate('/', { replace: true });
+        return;
+      }
+
+      try {
+        const [profileRes, labRes] = await Promise.all([
+          preventProfile ? checkLabAdminProfileExists() : {},
+          preventLab && user?.role === 'lab_admin' ? checkLabExists() : {},
+        ]);
+
+        if (!mounted) return;
+
+        if (preventProfile && profileRes.exists) {
+          toast.info('Profile already completed.');
+          navigate('/quick-lab/add-lab', {
+            replace: true,
+            state: { from: location },
+          });
+          return;
+        }
+
+        if (preventLab && user?.role === 'lab_admin' && labRes.exists) {
+          toast.info('Lab already added.');
+          navigate('/quick-lab/dashboard', {
+            replace: true,
+            state: { from: location },
+          });
+          return;
+        }
+
+        setLoading(false);
+      } catch (err) {
+        console.error('LabAdminPreventGuard check failed:', err);
+        navigate('/', { replace: true });
+      }
+    };
+
+    runChecks();
+    return () => {
+      mounted = false;
+    };
+  }, [preventProfile, preventLab, isAuthenticated, user, navigate, location]);
+
+  if (loading) return <Loading />;
+
+  return children;
+};
+
+export default LabAdminPreventGuard;
diff --git a/client/src/routes/guards/LabAdminSetupGuard.jsx b/client/src/routes/guards/LabAdminSetupGuard.jsx
new file mode 100644
index 0000000..3aa4ef3
--- /dev/null
+++ b/client/src/routes/guards/LabAdminSetupGuard.jsx
@@ -0,0 +1,67 @@
+// src/routes/guards/LabAdminSetupGuard.jsx
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import Loading from '../../components/ui/Loading';
+import { useAuth } from '../../context/authContext';
+import { checkLabAdminProfileExists, checkLabExists } from '../../service/labAdminService';
+
+const LabAdminSetupGuard = ({ requireProfile = true, requireLab = true, children }) => {
+  const { isAuthenticated, user } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let mounted = true;
+    const runChecks = async () => {
+      if (!isAuthenticated || (user?.role !== 'lab_admin' && user?.role !== 'lab_staff')) {
+        navigate('/', { replace: true });
+        return;
+      }
+
+      try {
+        const [profileRes, labRes] = await Promise.all([
+          requireProfile ? checkLabAdminProfileExists() : {},
+          requireLab && user?.role === 'lab_admin' ? checkLabExists() : {},
+        ]);
+
+        if (!mounted) return;
+
+        if (requireProfile && !profileRes.exists) {
+          toast.warning('Please complete your profile first.');
+          navigate('/quick-lab/complete-profile', {
+            replace: true,
+            state: { from: location },
+          });
+          return;
+        }
+
+        if (requireLab && user?.role === 'lab_admin' && !labRes.exists) {
+          toast.warning('Please add your lab details first.');
+          navigate('/quick-lab/add-lab', {
+            replace: true,
+            state: { from: location },
+          });
+          return;
+        }
+
+        setLoading(false);
+      } catch (err) {
+        console.error('LabAdminSetupGuard check failed:', err);
+        navigate('/', { replace: true });
+      }
+    };
+
+    runChecks();
+    return () => {
+      mounted = false;
+    };
+  }, [requireProfile, requireLab, isAuthenticated, user, navigate, location]);
+
+  if (loading) return <Loading />;
+
+  return children;
+};
+
+export default LabAdminSetupGuard;
diff --git a/client/src/service/labAdminService.js b/client/src/service/labAdminService.js
index 28d14f8..fc434a1 100644
--- a/client/src/service/labAdminService.js
+++ b/client/src/service/labAdminService.js
@@ -21,6 +21,20 @@ export const updateLabTest = (testId, updates) =>
   apiService.put(`/lab-admin/tests/${testId}`, updates);
 export const getLabInfo = () => apiService.get('/lab-admin/lab/info');
 
+/**
+ * Check if Lab Exists for current lab admin
+ */
+export const checkLabExists = async () => {
+  return await apiService.get('/lab-admin/lab/status');
+};
+
+/**
+ * Check if Lab Admin Profile Exists
+ */
+export const checkLabAdminProfileExists = async () => {
+  return await apiService.get('/lab-admin/profile/status');
+};
+
 export default {
   createLabAdminProfile,
   createLab,
@@ -31,4 +45,6 @@ export default {
   addLabTest,
   updateLabTest,
   getLabInfo,
+  checkLabExists,
+  checkLabAdminProfileExists,
 };
diff --git a/client/src/utility/getDashboardPath.js b/client/src/utility/getDashboardPath.js
index 06de3f5..a07a0e5 100644
--- a/client/src/utility/getDashboardPath.js
+++ b/client/src/utility/getDashboardPath.js
@@ -6,6 +6,9 @@ function getDashboardPath(role) {
       return '/doctor/dashboard';
     case 'admin':
       return '/admin/dashboard';
+    case 'lab_admin':
+    case 'lab_staff':
+      return '/quick-lab';
     default:
       return '/';
   }
diff --git a/server/Controllers/QuickLab/labAdminController.js b/server/Controllers/QuickLab/labAdminController.js
index cc9e962..8a8c46e 100644
--- a/server/Controllers/QuickLab/labAdminController.js
+++ b/server/Controllers/QuickLab/labAdminController.js
@@ -55,6 +55,36 @@ export const createLab = async (req, res) => {
     const { userId, profileId } = req.user;
     const labData = req.body;
 
+    // Rebuild nested fields from multipart form-data (dot-notation fallbacks)
+    const contact = {
+      phone:
+        labData.contact?.phone || labData['contact.phone'] || labData.contactPhone || labData.phone,
+      email:
+        labData.contact?.email || labData['contact.email'] || labData.contactEmail || labData.email,
+      website:
+        labData.contact?.website ||
+        labData['contact.website'] ||
+        labData.contactWebsite ||
+        labData.website,
+    };
+
+    const address = {
+      formattedAddress:
+        labData.address?.formattedAddress ||
+        labData['address.formattedAddress'] ||
+        labData.formattedAddress,
+      city: labData.address?.city || labData['address.city'] || labData.city,
+      state: labData.address?.state || labData['address.state'] || labData.state,
+      zipCode: labData.address?.zipCode || labData['address.zipCode'] || labData.zipCode,
+      country: labData.address?.country || labData['address.country'] || labData.country,
+    };
+
+    // Normalize numeric fee
+    const generalHomeCollectionFee =
+      labData.generalHomeCollectionFee !== undefined && labData.generalHomeCollectionFee !== ''
+        ? Number(labData.generalHomeCollectionFee)
+        : undefined;
+
     const labAdmin = await LabAdmin.findById(profileId);
     if (!labAdmin) {
       return res.status(404).json({ message: 'Lab admin profile not found' });
@@ -64,7 +94,7 @@ export const createLab = async (req, res) => {
       return res.status(400).json({ message: 'Lab admin can only manage one lab' });
     }
 
-    if (!labData.name || !labData.contact?.phone) {
+    if (!labData.name || !contact.phone) {
       return res.status(400).json({ message: 'Lab name and contact phone are required' });
     }
 
@@ -86,6 +116,9 @@ export const createLab = async (req, res) => {
 
     const lab = new Lab({
       ...labData,
+      contact,
+      address,
+      generalHomeCollectionFee,
       labAdminId: profileId,
     });
 
@@ -417,3 +450,66 @@ export const addTest = async (req, res) => {
     });
   }
 };
+
+// Check if Lab Admin Profile Exists
+export const checkLabAdminProfileExists = async (req, res) => {
+  try {
+    const { userId } = req.user;
+
+    if (!mongoose.Types.ObjectId.isValid(userId)) {
+      return res.status(400).json({ message: 'Invalid user ID format' });
+    }
+
+    const existingAdmin = await LabAdmin.findOne({ userId });
+
+    if (existingAdmin) {
+      return res.status(200).json({
+        exists: true,
+        message: 'Lab admin profile exists',
+      });
+    } else {
+      return res.status(200).json({
+        exists: false,
+        message: 'Lab admin profile does not exist',
+      });
+    }
+  } catch (error) {
+    console.error('Error checking lab admin profile:', error);
+    res.status(500).json({
+      message: 'Failed to check lab admin profile',
+      error: process.env.NODE_ENV === 'development' ? error.message : undefined,
+    });
+  }
+};
+
+// Check if Lab Exists for the Lab Admin
+export const checkLabExists = async (req, res) => {
+  try {
+    const { profileId } = req.user;
+
+    if (!mongoose.Types.ObjectId.isValid(profileId)) {
+      return res.status(400).json({ message: 'Invalid profile ID format' });
+    }
+
+    const labAdmin = await LabAdmin.findById(profileId);
+
+    if (labAdmin?.labId) {
+      return res.status(200).json({
+        exists: true,
+        labId: labAdmin.labId,
+        message: 'Lab already exists for this admin',
+      });
+    }
+
+    return res.status(200).json({
+      exists: false,
+      message: 'No lab found for this admin',
+    });
+  } catch (error) {
+    console.error('Error checking lab status:', error);
+    res.status(500).json({
+      message: 'Failed to check lab status',
+      error: process.env.NODE_ENV === 'development' ? error.message : undefined,
+    });
+  }
+};
diff --git a/server/Routes/QuickLab/labAdminRoutes.js b/server/Routes/QuickLab/labAdminRoutes.js
index 1c99cb0..c29ef2b 100644
--- a/server/Routes/QuickLab/labAdminRoutes.js
+++ b/server/Routes/QuickLab/labAdminRoutes.js
@@ -11,12 +11,21 @@ import {
   addTest,
   updateTest,
   getLabInfo,
+  checkLabExists,
+  checkLabAdminProfileExists,
 } from '../../Controllers/QuickLab/labAdminController.js';
 import upload from '../../Middleware/upload.js';
 
 const router = express.Router();
 
 router.post('/profile', authenticate, authorize('lab_admin'), createLabAdminProfile);
+router.get(
+  '/profile/status',
+  authenticate,
+  authorize('lab_admin', 'lab_staff'),
+  checkLabAdminProfileExists
+);
+router.get('/lab/status', authenticate, authorize('lab_admin'), checkLabExists);
 router.post(
   '/lab',
   authenticate,

From 636d8264ba822a35fd3bab0f63e95187d232b692 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 09:59:36 +0530
Subject: [PATCH 03/44] corrects the navbar login register functionality

---
 .../src/components/quicklab/DesktopNavbar.jsx | 43 +++++++++++++++----
 .../src/components/quicklab/MobileNavbar.jsx  | 34 ++++++++++++---
 2 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index e6438dc..a9ed042 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -1,8 +1,17 @@
 // DesktopNavbar.jsx
-import { Search } from 'lucide-react';
+import { Search, LogOut } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
 import DesktopFooter from './DesktopFooter';
 export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
+  const navigate = useNavigate();
+  const { isAuthenticated, logout } = useAuth();
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/', { replace: true });
+  };
   return (
     <nav className="hidden lg:block fixed top-0 left-0 right-0 z-50 bg-white dark:bg-black border-b border-slate-200 dark:border-slate-800 shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -36,13 +45,31 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
             {/* Dark Mode Toggle */}
             <DarkModeToggle />
 
-            {/* Login/Register Buttons */}
-            <button className="px-4 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors">
-              Login
-            </button>
-            <button className="px-4 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors">
-              Register
-            </button>
+            {/* Conditional: Login/Register OR Logout */}
+            {isAuthenticated ? (
+              <button
+                onClick={handleLogout}
+                className="flex items-center gap-2 px-4 py-2 text-slate-700 dark:text-slate-300 hover:text-red-600 dark:hover:text-red-400 font-medium transition-colors"
+              >
+                <LogOut className="h-5 w-5" />
+                Logout
+              </button>
+            ) : (
+              <>
+                <button
+                  onClick={() => navigate('/login')}
+                  className="px-4 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                >
+                  Login
+                </button>
+                <button
+                  onClick={() => navigate('/register')}
+                  className="px-4 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                >
+                  Register
+                </button>
+              </>
+            )}
           </div>
         </div>
       </div>
diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index f5768d9..7ffca0e 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -1,8 +1,17 @@
 // MobileNavbar.jsx
-import { Search, Home, BookOpen, User } from 'lucide-react';
+import { Search, Home, BookOpen, User, LogOut } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
 
 export default function MobileNavbar({ searchQuery, setSearchQuery }) {
+  const navigate = useNavigate();
+  const { isAuthenticated, logout } = useAuth();
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/', { replace: true });
+  };
   return (
     <>
       {/* Top Bar - Search Only */}
@@ -54,11 +63,24 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
             </span>
           </div>
 
-          {/* Login/Account */}
-          <button className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95">
-            <User className="h-6 w-6" />
-            <span className="text-xs font-medium">Account</span>
-          </button>
+          {/* Conditional: Login/Account OR Logout */}
+          {isAuthenticated ? (
+            <button
+              onClick={handleLogout}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-red-600 dark:hover:text-red-400 transition-colors active:scale-95"
+            >
+              <LogOut className="h-6 w-6" />
+              <span className="text-xs font-medium">Logout</span>
+            </button>
+          ) : (
+            <button
+              onClick={() => navigate('/login')}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+            >
+              <User className="h-6 w-6" />
+              <span className="text-xs font-medium">Account</span>
+            </button>
+          )}
         </div>
       </div>
 

From 69f5d4ab58fdd15181921e8b3fc595eaa2d78023 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 10:15:06 +0530
Subject: [PATCH 04/44] fixes checklabexists method in labadmincontroller

---
 server/Controllers/QuickLab/labAdminController.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/server/Controllers/QuickLab/labAdminController.js b/server/Controllers/QuickLab/labAdminController.js
index 8a8c46e..b812118 100644
--- a/server/Controllers/QuickLab/labAdminController.js
+++ b/server/Controllers/QuickLab/labAdminController.js
@@ -487,6 +487,14 @@ export const checkLabExists = async (req, res) => {
   try {
     const { profileId } = req.user;
 
+    // If no profile exists yet, return exists: false
+    if (!profileId) {
+      return res.status(200).json({
+        exists: false,
+        message: 'No lab admin profile found yet',
+      });
+    }
+
     if (!mongoose.Types.ObjectId.isValid(profileId)) {
       return res.status(400).json({ message: 'Invalid profile ID format' });
     }

From 7f981c1ccff6bab232f9646b3da724e621e57c51 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 10:33:23 +0530
Subject: [PATCH 05/44] feat: add lab staff setup and prevent guards for
 profile and lab assignment flow

---
 .../routes/guards/LabStaffPreventGuard.jsx    | 71 +++++++++++++++++++
 .../src/routes/guards/LabStaffSetupGuard.jsx  | 66 +++++++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 client/src/routes/guards/LabStaffPreventGuard.jsx
 create mode 100644 client/src/routes/guards/LabStaffSetupGuard.jsx

diff --git a/client/src/routes/guards/LabStaffPreventGuard.jsx b/client/src/routes/guards/LabStaffPreventGuard.jsx
new file mode 100644
index 0000000..41b2b34
--- /dev/null
+++ b/client/src/routes/guards/LabStaffPreventGuard.jsx
@@ -0,0 +1,71 @@
+// src/routes/guards/LabStaffPreventGuard.jsx
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../context/authContext';
+import { checkStaffProfileExists } from '../../service/labStaffService';
+import Loading from '../../components/ui/Loading';
+
+const LabStaffPreventGuard = ({ preventProfile = false, preventWaiting = false, children }) => {
+  const { isAuthenticated, user } = useAuth();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    if (checked) return; // Prevent re-running if already checked
+
+    const runChecks = async () => {
+      if (!isAuthenticated || user?.role !== 'lab_staff') {
+        if (mounted) {
+          setLoading(false);
+          setChecked(true);
+        }
+        return;
+      }
+
+      try {
+        const staffStatus = await checkStaffProfileExists();
+
+        if (!mounted) return;
+
+        // Prevent re-doing profile if already complete
+        if (preventProfile && staffStatus.exists) {
+          navigate('/quick-lab/staff-waiting', { replace: true });
+          return;
+        }
+
+        // Prevent accessing waiting page if already assigned to lab
+        if (preventWaiting && staffStatus.isAssignedToLab) {
+          navigate('/quick-lab/staff-dashboard', { replace: true });
+          return;
+        }
+
+        if (mounted) {
+          setLoading(false);
+          setChecked(true);
+        }
+      } catch (err) {
+        console.error('LabStaffPreventGuard check failed:', err);
+        if (mounted) {
+          setLoading(false);
+          setChecked(true);
+        }
+      }
+    };
+
+    runChecks();
+    return () => {
+      mounted = false;
+    };
+  }, [isAuthenticated, user?.role, preventProfile, preventWaiting, navigate, checked]);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return children;
+};
+
+export default LabStaffPreventGuard;
diff --git a/client/src/routes/guards/LabStaffSetupGuard.jsx b/client/src/routes/guards/LabStaffSetupGuard.jsx
new file mode 100644
index 0000000..6a86d8b
--- /dev/null
+++ b/client/src/routes/guards/LabStaffSetupGuard.jsx
@@ -0,0 +1,66 @@
+// src/routes/guards/LabStaffSetupGuard.jsx
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import Loading from '../../components/ui/Loading';
+import { useAuth } from '../../context/authContext';
+import { checkStaffProfileExists } from '../../service/labStaffService';
+
+const LabStaffSetupGuard = ({ requireProfile = true, requireLabAssignment = true, children }) => {
+  const { isAuthenticated, user } = useAuth();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    if (checked) return; // Prevent re-running if already checked
+
+    const runChecks = async () => {
+      if (!isAuthenticated || user?.role !== 'lab_staff') {
+        if (mounted) navigate('/', { replace: true });
+        return;
+      }
+
+      try {
+        const staffStatus = await checkStaffProfileExists();
+
+        if (!mounted) return;
+
+        if (requireProfile && !staffStatus.exists) {
+          toast.warning('Please complete your profile first.');
+          navigate('/quick-lab/staff-profile', { replace: true });
+          return;
+        }
+
+        if (requireLabAssignment && staffStatus.exists && !staffStatus.isAssignedToLab) {
+          toast.info('Waiting for lab assignment from your admin.');
+          navigate('/quick-lab/staff-waiting', { replace: true });
+          return;
+        }
+
+        if (mounted) {
+          setLoading(false);
+          setChecked(true);
+        }
+      } catch (err) {
+        console.error('LabStaffSetupGuard check failed:', err);
+        if (mounted) navigate('/', { replace: true });
+      }
+    };
+
+    runChecks();
+    return () => {
+      mounted = false;
+    };
+  }, [isAuthenticated, user?.role, requireProfile, requireLabAssignment, navigate, checked]);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return children;
+};
+
+export default LabStaffSetupGuard;

From 7696e5b3151a8819e8965f90e2640fef2751da13 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 10:33:30 +0530
Subject: [PATCH 06/44] feat: add lab staff pages (profile, waiting assignment,
 dashboard)

---
 .../src/pages/quicklab/LabStaffDashboard.jsx  | 170 ++++++++++
 .../quicklab/LabStaffProfileComplete.jsx      | 298 ++++++++++++++++++
 .../quicklab/LabStaffWaitingForAssignment.jsx | 142 +++++++++
 3 files changed, 610 insertions(+)
 create mode 100644 client/src/pages/quicklab/LabStaffDashboard.jsx
 create mode 100644 client/src/pages/quicklab/LabStaffProfileComplete.jsx
 create mode 100644 client/src/pages/quicklab/LabStaffWaitingForAssignment.jsx

diff --git a/client/src/pages/quicklab/LabStaffDashboard.jsx b/client/src/pages/quicklab/LabStaffDashboard.jsx
new file mode 100644
index 0000000..cc3428c
--- /dev/null
+++ b/client/src/pages/quicklab/LabStaffDashboard.jsx
@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import { useAuth } from '../../context/authContext';
+import '../../quicklab.css';
+import { CheckSquare, Clock, AlertCircle, Zap, Home, Phone, MoreVertical } from 'lucide-react';
+
+export default function LabStaffDashboard() {
+  const { user } = useAuth();
+  const [staffInfo] = useState({
+    firstName: 'John',
+    lastName: 'Doe',
+    role: 'Phlebotomist',
+  });
+
+  // Demo stats
+  const stats = [
+    { label: "Today's Tasks", value: 8, icon: CheckSquare },
+    { label: 'Pending Tasks', value: 3, icon: Clock },
+    { label: 'Home Collections', value: 2, icon: Home },
+  ];
+
+  // Demo upcoming assignments
+  const upcomingAssignments = [
+    {
+      id: 1,
+      type: 'Blood Collection',
+      patient: 'Patient Name',
+      time: '10:30 AM',
+      location: 'Home',
+      status: 'pending',
+    },
+    {
+      id: 2,
+      type: 'Sample Processing',
+      patient: 'Lab Counter',
+      time: '2:00 PM',
+      location: 'Lab',
+      status: 'pending',
+    },
+    {
+      id: 3,
+      type: 'Report Preparation',
+      patient: 'Sample ID: #12345',
+      time: '4:00 PM',
+      location: 'Lab',
+      status: 'in-progress',
+    },
+  ];
+
+  // Quick action buttons
+  const quickActions = [
+    { label: 'View My Tasks', icon: Zap, action: () => alert('View tasks') },
+    { label: 'Home Collections', icon: Home, action: () => alert('View home collections') },
+    { label: 'My Profile', icon: Phone, action: () => alert('View profile') },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8 pt-20">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-lab-black-900 mb-2">
+            Welcome, <span className="text-lab-yellow-600">{staffInfo.firstName}</span>
+          </h1>
+          <p className="text-lab-black-600">{staffInfo.role} • Ready for today's tasks</p>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          {stats.map((stat, idx) => {
+            const Icon = stat.icon;
+            return (
+              <div
+                key={idx}
+                className="card-quicklab bg-white border border-lab-black-100 hover:border-lab-yellow-400 transition-all"
+              >
+                <div className="flex items-start justify-between">
+                  <div>
+                    <p className="text-lab-black-600 text-sm font-medium mb-1">{stat.label}</p>
+                    <p className="text-3xl font-bold text-lab-black-900">{stat.value}</p>
+                  </div>
+                  <div className="w-12 h-12 rounded-lg bg-lab-yellow-100 flex items-center justify-center">
+                    <Icon className="w-6 h-6 text-lab-yellow-700" />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Quick Actions */}
+        <div className="mb-8">
+          <h2 className="text-2xl font-bold text-lab-black-900 mb-4">Quick Actions</h2>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {quickActions.map((action, idx) => {
+              const Icon = action.icon;
+              return (
+                <button
+                  key={idx}
+                  onClick={action.action}
+                  className="card-quicklab bg-white border border-lab-black-100 hover:border-lab-yellow-400 transition-all flex flex-col items-center justify-center p-4"
+                >
+                  <Icon className="w-6 h-6 text-lab-yellow-600 mb-2" />
+                  <span className="text-sm font-semibold text-lab-black-900 text-center">
+                    {action.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Upcoming Assignments */}
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-bold text-lab-black-900">Today's Assignments</h2>
+            <button className="text-lab-black-600 hover:text-lab-yellow-600 font-semibold">
+              See all →
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            {upcomingAssignments.map((assignment) => (
+              <div
+                key={assignment.id}
+                className="card-quicklab bg-white border-l-4 border-lab-yellow-500"
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <span className="inline-block px-3 py-1 bg-lab-yellow-500 text-lab-black-900 text-xs font-bold rounded">
+                    {assignment.type}
+                  </span>
+                  <button className="text-lab-black-400 hover:text-lab-black-900">
+                    <MoreVertical size={18} />
+                  </button>
+                </div>
+
+                <p className="font-semibold text-lab-black-900 mb-3">{assignment.patient}</p>
+
+                <div className="space-y-2 mb-4">
+                  <div className="flex items-center gap-2 text-lab-black-600">
+                    <Clock size={16} />
+                    <span>{assignment.time}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-lab-black-600">
+                    <Home size={16} />
+                    <span>{assignment.location}</span>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <span
+                    className={`text-xs font-bold px-3 py-1 rounded-full ${
+                      assignment.status === 'in-progress'
+                        ? 'bg-blue-100 text-blue-800'
+                        : 'bg-yellow-100 text-yellow-800'
+                    }`}
+                  >
+                    {assignment.status === 'in-progress' ? 'In Progress' : 'Pending'}
+                  </span>
+                  <button className="text-lab-yellow-600 hover:text-lab-yellow-800 font-semibold text-sm">
+                    {assignment.status === 'in-progress' ? 'Complete' : 'Start'}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/quicklab/LabStaffProfileComplete.jsx b/client/src/pages/quicklab/LabStaffProfileComplete.jsx
new file mode 100644
index 0000000..a895530
--- /dev/null
+++ b/client/src/pages/quicklab/LabStaffProfileComplete.jsx
@@ -0,0 +1,298 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { createStaffProfile } from '../../service/labStaffService';
+import '../../quicklab.css';
+import { Upload } from 'lucide-react';
+
+export default function LabStaffProfileComplete() {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [profilePicture, setProfilePicture] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    phoneNumber: '',
+    role: 'assistant',
+    qualifications: [],
+    experience: 0,
+  });
+  const [qualificationInput, setQualificationInput] = useState('');
+
+  const roles = ['technician', 'phlebotomist', 'assistant', 'sample_collector'];
+
+  const handleChange = (e) => {
+    const { name, value, type } = e.target;
+    if (type === 'file') {
+      const file = e.target.files[0];
+      if (file) {
+        setProfilePicture(file);
+        setPreviewUrl(URL.createObjectURL(file));
+      }
+    } else if (name === 'experience') {
+      setFormData({ ...formData, [name]: Number(value) });
+    } else {
+      setFormData({ ...formData, [name]: value });
+    }
+  };
+
+  const handleAddQualification = () => {
+    if (qualificationInput.trim()) {
+      setFormData({
+        ...formData,
+        qualifications: [...formData.qualifications, qualificationInput.trim()],
+      });
+      setQualificationInput('');
+    }
+  };
+
+  const handleRemoveQualification = (index) => {
+    setFormData({
+      ...formData,
+      qualifications: formData.qualifications.filter((_, i) => i !== index),
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!formData.firstName || !formData.lastName || !formData.phoneNumber) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // The createStaffProfile expects individual parameters: formData and profilePicture
+      await createStaffProfile(formData, profilePicture);
+      toast.success('Profile created successfully!');
+      navigate('/quick-lab/staff-waiting', { replace: true });
+    } catch (error) {
+      console.error('Error creating staff profile:', error);
+      toast.error(error.message || 'Failed to create profile');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8 pt-20">
+      <div className="max-w-2xl mx-auto">
+        <div className="card-quicklab bg-white">
+          <div className="mb-8">
+            <h1 className="text-4xl font-bold text-lab-black-900 mb-2">Complete Your Profile</h1>
+            <p className="text-lab-black-600">Help us get to know you better</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Profile Picture */}
+            <div>
+              <label
+                htmlFor="profilePicture"
+                className="block text-sm font-semibold text-lab-black-900 mb-3"
+              >
+                Profile Picture
+              </label>
+              <div className="border-2 border-dashed border-lab-yellow-300 rounded-lg p-6 bg-lab-yellow-50">
+                {previewUrl ? (
+                  <div className="text-center">
+                    <img
+                      src={previewUrl}
+                      alt="Preview"
+                      className="w-32 h-32 rounded-lg mx-auto mb-4 object-cover"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setProfilePicture(null);
+                        setPreviewUrl(null);
+                      }}
+                      className="btn-quicklab-secondary"
+                    >
+                      Change Photo
+                    </button>
+                  </div>
+                ) : (
+                  <label
+                    htmlFor="profilePicture"
+                    className="flex flex-col items-center cursor-pointer"
+                  >
+                    <Upload size={32} className="text-lab-yellow-600 mb-2" />
+                    <span className="text-lab-black-900 font-medium">Click to upload photo</span>
+                    <input
+                      id="profilePicture"
+                      type="file"
+                      name="profilePicture"
+                      accept="image/*"
+                      onChange={handleChange}
+                      style={{ display: 'none' }}
+                    />
+                  </label>
+                )}
+              </div>
+            </div>
+
+            {/* Name Fields */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label
+                  htmlFor="firstName"
+                  className="block text-sm font-semibold text-lab-black-900 mb-2"
+                >
+                  First Name *
+                </label>
+                <input
+                  id="firstName"
+                  type="text"
+                  name="firstName"
+                  value={formData.firstName}
+                  onChange={handleChange}
+                  placeholder="Your first name"
+                  className="w-full px-4 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+                  required
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="lastName"
+                  className="block text-sm font-semibold text-lab-black-900 mb-2"
+                >
+                  Last Name *
+                </label>
+                <input
+                  id="lastName"
+                  type="text"
+                  name="lastName"
+                  value={formData.lastName}
+                  onChange={handleChange}
+                  placeholder="Your last name"
+                  className="w-full px-4 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+                  required
+                />
+              </div>
+            </div>
+
+            {/* Phone Number */}
+            <div>
+              <label
+                htmlFor="phoneNumber"
+                className="block text-sm font-semibold text-lab-black-900 mb-2"
+              >
+                Phone Number *
+              </label>
+              <input
+                id="phoneNumber"
+                type="tel"
+                name="phoneNumber"
+                value={formData.phoneNumber}
+                onChange={handleChange}
+                placeholder="Your phone number"
+                className="w-full px-4 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+                required
+              />
+            </div>
+
+            {/* Role */}
+            <div>
+              <label htmlFor="role" className="block text-sm font-semibold text-lab-black-900 mb-2">
+                Role *
+              </label>
+              <select
+                name="role"
+                value={formData.role}
+                onChange={handleChange}
+                className="w-full px-4 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+              >
+                {roles.map((r) => (
+                  <option key={r} value={r}>
+                    {r.replace(/_/g, ' ').charAt(0).toUpperCase() + r.slice(1).replace(/_/g, ' ')}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Experience */}
+            <div>
+              <label
+                htmlFor="experience"
+                className="block text-sm font-semibold text-lab-black-900 mb-2"
+              >
+                Years of Experience
+              </label>
+              <input
+                id="experience"
+                type="number"
+                name="experience"
+                value={formData.experience}
+                onChange={handleChange}
+                placeholder="0"
+                min="0"
+                className="w-full px-4 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+              />
+            </div>
+
+            {/* Qualifications */}
+            <div>
+              <label
+                htmlFor="qualifications"
+                className="block text-sm font-semibold text-lab-black-900 mb-2"
+              >
+                Qualifications
+              </label>
+              <div className="flex gap-2 mb-3">
+                <input
+                  id="qualifications"
+                  type="text"
+                  value={qualificationInput}
+                  onChange={(e) => setQualificationInput(e.target.value)}
+                  placeholder="Add a qualification"
+                  className="flex-1 px-4 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+                  onKeyPress={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleAddQualification();
+                    }
+                  }}
+                />
+                <button
+                  type="button"
+                  onClick={handleAddQualification}
+                  className="btn-quicklab-secondary px-4 py-2"
+                >
+                  Add
+                </button>
+              </div>
+              {formData.qualifications.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {formData.qualifications.map((qual, index) => (
+                    <div key={index} className="badge-quicklab flex items-center gap-2">
+                      <span>{qual}</span>
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveQualification(index)}
+                        className="font-bold hover:text-red-600"
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full btn-quicklab-primary py-3 font-semibold disabled:opacity-50"
+            >
+              {loading ? 'Creating Profile...' : 'Complete Profile'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/quicklab/LabStaffWaitingForAssignment.jsx b/client/src/pages/quicklab/LabStaffWaitingForAssignment.jsx
new file mode 100644
index 0000000..b6faaef
--- /dev/null
+++ b/client/src/pages/quicklab/LabStaffWaitingForAssignment.jsx
@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { useAuth } from '../../context/authContext';
+import { checkStaffProfileExists } from '../../service/labStaffService';
+import '../../quicklab.css';
+import { Copy, CheckCircle, Clock } from 'lucide-react';
+
+export default function LabStaffWaitingForAssignment() {
+  const { user } = useAuth();
+  const [staffId, setStaffId] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const [isAssigned, setIsAssigned] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        const res = await checkStaffProfileExists();
+        setStaffId(res.staffId);
+        setIsAssigned(res.isAssignedToLab);
+        setLoading(false);
+
+        // Poll every 5 seconds to check if assigned
+        if (!res.isAssignedToLab) {
+          const interval = setInterval(async () => {
+            const updated = await checkStaffProfileExists();
+            if (updated.isAssignedToLab) {
+              setIsAssigned(true);
+              window.location.href = '/quick-lab/staff-dashboard';
+            }
+          }, 5000);
+
+          return () => clearInterval(interval);
+        }
+      } catch (error) {
+        console.error('Error checking staff status:', error);
+        setLoading(false);
+      }
+    };
+
+    checkStatus();
+  }, []);
+
+  const handleCopyId = () => {
+    if (staffId) {
+      navigator.clipboard.writeText(staffId);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white flex items-center justify-center p-4 pt-20">
+        <div className="card-quicklab bg-white text-center">
+          <p className="text-lab-black-600 font-semibold">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isAssigned) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white flex items-center justify-center p-4 pt-20">
+        <div className="card-quicklab bg-white max-w-md text-center">
+          <div className="mb-4">
+            <CheckCircle size={48} className="text-lab-yellow-500 mx-auto" />
+          </div>
+          <h2 className="text-2xl font-bold text-lab-black-900 mb-2">Assignment Confirmed!</h2>
+          <p className="text-lab-black-600">Redirecting to your dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8 pt-20">
+      <div className="max-w-md mx-auto">
+        <div className="card-quicklab bg-white">
+          <div className="text-center mb-8">
+            <Clock size={48} className="text-lab-yellow-500 mx-auto mb-4" />
+            <h1 className="text-3xl font-bold text-lab-black-900 mb-2">Waiting for Assignment</h1>
+            <p className="text-lab-black-600">Share your Staff ID with your Lab Admin</p>
+          </div>
+
+          <div className="bg-lab-yellow-50 border-2 border-lab-yellow-300 rounded-lg p-6 mb-6">
+            <p className="text-sm font-semibold text-lab-black-600 mb-3 text-center">
+              Your Staff ID
+            </p>
+            <div className="flex items-center justify-between bg-white border-2 border-lab-yellow-400 rounded-lg p-4">
+              <span className="font-mono text-lg font-bold text-lab-black-900 break-all">
+                {staffId}
+              </span>
+              <button
+                onClick={handleCopyId}
+                className="ml-2 p-2 hover:bg-lab-yellow-100 rounded-lg transition"
+                title="Copy ID"
+              >
+                {copied ? (
+                  <CheckCircle size={20} className="text-green-600" />
+                ) : (
+                  <Copy size={20} className="text-lab-yellow-600" />
+                )}
+              </button>
+            </div>
+            {copied && (
+              <p className="text-center text-sm text-green-600 font-medium mt-3">
+                Copied to clipboard!
+              </p>
+            )}
+          </div>
+
+          <div className="mb-8 p-4 bg-lab-black-50 rounded-lg">
+            <h3 className="font-bold text-lab-black-900 mb-3">What's Next?</h3>
+            <ol className="space-y-2 text-sm text-lab-black-700">
+              <li className="flex gap-3">
+                <span className="font-bold text-lab-yellow-600">1.</span>
+                <span>Copy your Staff ID using the button above</span>
+              </li>
+              <li className="flex gap-3">
+                <span className="font-bold text-lab-yellow-600">2.</span>
+                <span>Share this ID with your Lab Admin</span>
+              </li>
+              <li className="flex gap-3">
+                <span className="font-bold text-lab-yellow-600">3.</span>
+                <span>The Lab Admin will add you to their lab</span>
+              </li>
+              <li className="flex gap-3">
+                <span className="font-bold text-lab-yellow-600">4.</span>
+                <span>Once added, you'll be redirected to your dashboard</span>
+              </li>
+            </ol>
+          </div>
+
+          <div className="flex items-center justify-center gap-3 text-lab-black-600">
+            <div className="w-3 h-3 bg-lab-yellow-500 rounded-full animate-pulse"></div>
+            <span className="text-sm font-semibold">Waiting for assignment...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

From d14de41e715ed997d1b6068feb7583b37f9d6b96 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 10:33:35 +0530
Subject: [PATCH 07/44] feat: integrate lab staff routes with guards into
 quicklab routing

---
 client/src/routes/QuickLabRoutes.jsx | 81 +++++++++++++++++++++-------
 1 file changed, 63 insertions(+), 18 deletions(-)

diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index 641c56f..88a0016 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -3,8 +3,14 @@ import Navbar from '../components/quicklab/Navbar';
 import QuickLabHomepage from '../pages/quicklab/Homepage';
 import LabAdminProfileComplete from '../pages/quicklab/LabAdminProfileComplete';
 import LabAdminAddLab from '../pages/quicklab/LabAdminAddLab';
+import LabAdminDashboard from '../pages/quicklab/LabAdminDashboard';
+import LabStaffProfileComplete from '../pages/quicklab/LabStaffProfileComplete';
+import LabStaffWaitingForAssignment from '../pages/quicklab/LabStaffWaitingForAssignment';
+import LabStaffDashboard from '../pages/quicklab/LabStaffDashboard';
 import LabAdminPreventGuard from './guards/LabAdminPreventGuard';
 import LabAdminSetupGuard from './guards/LabAdminSetupGuard';
+import LabStaffPreventGuard from './guards/LabStaffPreventGuard';
+import LabStaffSetupGuard from './guards/LabStaffSetupGuard';
 import ProtectedRoute from './guards/protectedRoutes';
 
 export default function QuickLabRoutes() {
@@ -12,11 +18,13 @@ export default function QuickLabRoutes() {
     <>
       <Navbar />
       <Routes>
-        {/* Complete Profile - Prevent if profile already exists */}
+        {/* ============ LAB ADMIN ROUTES ============ */}
+
+        {/* Lab Admin Profile Completion */}
         <Route
           path="/quick-lab/complete-profile"
           element={
-            <ProtectedRoute allowedRoles={['lab_admin', 'lab_staff']}>
+            <ProtectedRoute allowedRoles={['lab_admin']}>
               <LabAdminPreventGuard preventProfile={true}>
                 <LabAdminProfileComplete />
               </LabAdminPreventGuard>
@@ -24,37 +32,74 @@ export default function QuickLabRoutes() {
           }
         />
 
-        {/* Lab Admin Dashboard - Requires profile */}
+        {/* Add Lab - Requires profile, prevent if lab already exists */}
         <Route
-          path="/quick-lab/dashboard"
+          path="/quick-lab/add-lab"
           element={
-            <ProtectedRoute allowedRoles={['lab_admin', 'lab_staff']}>
-              <LabAdminSetupGuard requireProfile={true} requireLab={true}>
-                <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8">
-                  <div className="max-w-6xl mx-auto">
-                    <h1 className="text-4xl font-bold text-lab-black-900 mb-2">Lab Dashboard</h1>
-                    <p className="text-lab-black-600">Coming soon...</p>
-                  </div>
-                </div>
+            <ProtectedRoute allowedRoles={['lab_admin']}>
+              <LabAdminSetupGuard requireProfile={true} requireLab={false}>
+                <LabAdminPreventGuard preventLab={true}>
+                  <LabAdminAddLab />
+                </LabAdminPreventGuard>
               </LabAdminSetupGuard>
             </ProtectedRoute>
           }
         />
 
-        {/* Add Lab - Requires profile, prevent if lab already exists */}
+        {/* Lab Admin Dashboard - Requires profile AND lab */}
         <Route
-          path="/quick-lab/add-lab"
+          path="/quick-lab/dashboard"
           element={
             <ProtectedRoute allowedRoles={['lab_admin']}>
-              <LabAdminSetupGuard requireProfile={true} requireLab={false}>
-                <LabAdminPreventGuard preventLab={true}>
-                  <LabAdminAddLab />
-                </LabAdminPreventGuard>
+              <LabAdminSetupGuard requireProfile={true} requireLab={true}>
+                <LabAdminDashboard />
               </LabAdminSetupGuard>
             </ProtectedRoute>
           }
         />
 
+        {/* ============ LAB STAFF ROUTES ============ */}
+
+        {/* Lab Staff Profile Completion */}
+        <Route
+          path="/quick-lab/staff-profile"
+          element={
+            <ProtectedRoute allowedRoles={['lab_staff']}>
+              <LabStaffPreventGuard preventProfile={true}>
+                <LabStaffProfileComplete />
+              </LabStaffPreventGuard>
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Lab Staff Waiting for Assignment */}
+        <Route
+          path="/quick-lab/staff-waiting"
+          element={
+            <ProtectedRoute allowedRoles={['lab_staff']}>
+              <LabStaffSetupGuard requireProfile={true} requireLabAssignment={false}>
+                <LabStaffPreventGuard preventWaiting={true}>
+                  <LabStaffWaitingForAssignment />
+                </LabStaffPreventGuard>
+              </LabStaffSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Lab Staff Dashboard - Requires profile AND lab assignment */}
+        <Route
+          path="/quick-lab/staff-dashboard"
+          element={
+            <ProtectedRoute allowedRoles={['lab_staff']}>
+              <LabStaffSetupGuard requireProfile={true} requireLabAssignment={true}>
+                <LabStaffDashboard />
+              </LabStaffSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
+        {/* ============ PUBLIC ROUTES ============ */}
+
         {/* Public homepage */}
         <Route path="/" element={<QuickLabHomepage />} />
         <Route path="*" element={<QuickLabHomepage />} />

From 164328636cc056c37addab40f345ab13ede639d3 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 10:33:40 +0530
Subject: [PATCH 08/44] feat: update dashboard routing for lab_staff role

---
 client/src/utility/getDashboardPath.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/utility/getDashboardPath.js b/client/src/utility/getDashboardPath.js
index a07a0e5..0407306 100644
--- a/client/src/utility/getDashboardPath.js
+++ b/client/src/utility/getDashboardPath.js
@@ -7,8 +7,9 @@ function getDashboardPath(role) {
     case 'admin':
       return '/admin/dashboard';
     case 'lab_admin':
+      return '/quick-lab/dashboard';
     case 'lab_staff':
-      return '/quick-lab';
+      return '/quick-lab/staff-dashboard';
     default:
       return '/';
   }

From a935e0b2f966f29d7ebde8dfac8910f426020a51 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 10:33:44 +0530
Subject: [PATCH 09/44] fix: prevent infinite redirect loops in lab admin
 guards with checked flag

---
 .../routes/guards/LabAdminPreventGuard.jsx    | 32 +++++++++----------
 .../src/routes/guards/LabAdminSetupGuard.jsx  | 32 +++++++++----------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/client/src/routes/guards/LabAdminPreventGuard.jsx b/client/src/routes/guards/LabAdminPreventGuard.jsx
index 748990b..3cb359f 100644
--- a/client/src/routes/guards/LabAdminPreventGuard.jsx
+++ b/client/src/routes/guards/LabAdminPreventGuard.jsx
@@ -1,6 +1,6 @@
 // src/routes/guards/LabAdminPreventGuard.jsx
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import Loading from '../../components/ui/Loading';
 import { useAuth } from '../../context/authContext';
@@ -9,47 +9,47 @@ import { checkLabAdminProfileExists, checkLabExists } from '../../service/labAdm
 const LabAdminPreventGuard = ({ preventProfile = false, preventLab = false, children }) => {
   const { isAuthenticated, user } = useAuth();
   const navigate = useNavigate();
-  const location = useLocation();
   const [loading, setLoading] = useState(true);
+  const [checked, setChecked] = useState(false);
 
   useEffect(() => {
     let mounted = true;
+
+    if (checked) return; // Prevent re-running if already checked
+
     const runChecks = async () => {
       if (!isAuthenticated || (user?.role !== 'lab_admin' && user?.role !== 'lab_staff')) {
-        navigate('/', { replace: true });
+        if (mounted) navigate('/', { replace: true });
         return;
       }
 
       try {
         const [profileRes, labRes] = await Promise.all([
-          preventProfile ? checkLabAdminProfileExists() : {},
-          preventLab && user?.role === 'lab_admin' ? checkLabExists() : {},
+          preventProfile ? checkLabAdminProfileExists() : Promise.resolve({}),
+          preventLab && user?.role === 'lab_admin' ? checkLabExists() : Promise.resolve({}),
         ]);
 
         if (!mounted) return;
 
         if (preventProfile && profileRes.exists) {
           toast.info('Profile already completed.');
-          navigate('/quick-lab/add-lab', {
-            replace: true,
-            state: { from: location },
-          });
+          navigate('/quick-lab/add-lab', { replace: true });
           return;
         }
 
         if (preventLab && user?.role === 'lab_admin' && labRes.exists) {
           toast.info('Lab already added.');
-          navigate('/quick-lab/dashboard', {
-            replace: true,
-            state: { from: location },
-          });
+          navigate('/quick-lab/dashboard', { replace: true });
           return;
         }
 
-        setLoading(false);
+        if (mounted) {
+          setLoading(false);
+          setChecked(true);
+        }
       } catch (err) {
         console.error('LabAdminPreventGuard check failed:', err);
-        navigate('/', { replace: true });
+        if (mounted) navigate('/', { replace: true });
       }
     };
 
@@ -57,7 +57,7 @@ const LabAdminPreventGuard = ({ preventProfile = false, preventLab = false, chil
     return () => {
       mounted = false;
     };
-  }, [preventProfile, preventLab, isAuthenticated, user, navigate, location]);
+  }, [isAuthenticated, user?.role, preventProfile, preventLab, navigate, checked]);
 
   if (loading) return <Loading />;
 
diff --git a/client/src/routes/guards/LabAdminSetupGuard.jsx b/client/src/routes/guards/LabAdminSetupGuard.jsx
index 3aa4ef3..02e3fbf 100644
--- a/client/src/routes/guards/LabAdminSetupGuard.jsx
+++ b/client/src/routes/guards/LabAdminSetupGuard.jsx
@@ -1,6 +1,6 @@
 // src/routes/guards/LabAdminSetupGuard.jsx
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import Loading from '../../components/ui/Loading';
 import { useAuth } from '../../context/authContext';
@@ -9,47 +9,47 @@ import { checkLabAdminProfileExists, checkLabExists } from '../../service/labAdm
 const LabAdminSetupGuard = ({ requireProfile = true, requireLab = true, children }) => {
   const { isAuthenticated, user } = useAuth();
   const navigate = useNavigate();
-  const location = useLocation();
   const [loading, setLoading] = useState(true);
+  const [checked, setChecked] = useState(false);
 
   useEffect(() => {
     let mounted = true;
+
+    if (checked) return; // Prevent re-running if already checked
+
     const runChecks = async () => {
       if (!isAuthenticated || (user?.role !== 'lab_admin' && user?.role !== 'lab_staff')) {
-        navigate('/', { replace: true });
+        if (mounted) navigate('/', { replace: true });
         return;
       }
 
       try {
         const [profileRes, labRes] = await Promise.all([
-          requireProfile ? checkLabAdminProfileExists() : {},
-          requireLab && user?.role === 'lab_admin' ? checkLabExists() : {},
+          requireProfile ? checkLabAdminProfileExists() : Promise.resolve({}),
+          requireLab && user?.role === 'lab_admin' ? checkLabExists() : Promise.resolve({}),
         ]);
 
         if (!mounted) return;
 
         if (requireProfile && !profileRes.exists) {
           toast.warning('Please complete your profile first.');
-          navigate('/quick-lab/complete-profile', {
-            replace: true,
-            state: { from: location },
-          });
+          navigate('/quick-lab/complete-profile', { replace: true });
           return;
         }
 
         if (requireLab && user?.role === 'lab_admin' && !labRes.exists) {
           toast.warning('Please add your lab details first.');
-          navigate('/quick-lab/add-lab', {
-            replace: true,
-            state: { from: location },
-          });
+          navigate('/quick-lab/add-lab', { replace: true });
           return;
         }
 
-        setLoading(false);
+        if (mounted) {
+          setLoading(false);
+          setChecked(true);
+        }
       } catch (err) {
         console.error('LabAdminSetupGuard check failed:', err);
-        navigate('/', { replace: true });
+        if (mounted) navigate('/', { replace: true });
       }
     };
 
@@ -57,7 +57,7 @@ const LabAdminSetupGuard = ({ requireProfile = true, requireLab = true, children
     return () => {
       mounted = false;
     };
-  }, [requireProfile, requireLab, isAuthenticated, user, navigate, location]);
+  }, [isAuthenticated, user?.role, requireProfile, requireLab, navigate, checked]);
 
   if (loading) return <Loading />;
 

From 6429ccf8dce3ea1d3cf50d87ddb30f06c128b3fa Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 10:34:31 +0530
Subject: [PATCH 10/44] feat: add lab admin dashboard page with stats and quick
 actions

---
 .../src/pages/quicklab/LabAdminDashboard.jsx  | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 client/src/pages/quicklab/LabAdminDashboard.jsx

diff --git a/client/src/pages/quicklab/LabAdminDashboard.jsx b/client/src/pages/quicklab/LabAdminDashboard.jsx
new file mode 100644
index 0000000..eb129c1
--- /dev/null
+++ b/client/src/pages/quicklab/LabAdminDashboard.jsx
@@ -0,0 +1,112 @@
+import { BarChart3, Users, TestTube, Calendar, Settings } from 'lucide-react';
+import '../../quicklab.css';
+
+export default function LabAdminDashboard() {
+  const stats = [
+    { label: 'Total Tests', value: '0', icon: TestTube, color: 'lab-yellow' },
+    { label: 'Staff Members', value: '0', icon: Users, color: 'lab-blue' },
+    { label: 'Appointments', value: '0', icon: Calendar, color: 'lab-yellow' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8 pt-20">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-lab-black-900 mb-2">Lab Dashboard</h1>
+          <p className="text-lab-black-600">Manage your lab, staff, and appointments</p>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          {stats.map((stat, idx) => {
+            const Icon = stat.icon;
+            return (
+              <div
+                key={idx}
+                className="card-quicklab bg-white border border-lab-black-100 hover:border-lab-yellow-400 transition-all"
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div>
+                    <p className="text-lab-black-600 text-sm font-medium mb-1">{stat.label}</p>
+                    <p className="text-3xl font-bold text-lab-black-900">{stat.value}</p>
+                  </div>
+                  <div className="w-12 h-12 rounded-lg bg-lab-yellow-100 flex items-center justify-center">
+                    <Icon className="w-6 h-6 text-lab-yellow-700" />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          {/* Manage Tests */}
+          <div className="card-quicklab bg-white border border-lab-black-100">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Manage Tests</h3>
+                <p className="text-lab-black-600 text-sm">Add, update, or remove test services</p>
+              </div>
+              <TestTube className="w-6 h-6 text-lab-yellow-600" />
+            </div>
+            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+              View Tests
+            </button>
+          </div>
+
+          {/* Manage Staff */}
+          <div className="card-quicklab bg-white border border-lab-black-100">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Manage Staff</h3>
+                <p className="text-lab-black-600 text-sm">Add or manage lab staff members</p>
+              </div>
+              <Users className="w-6 h-6 text-lab-yellow-600" />
+            </div>
+            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+              View Staff
+            </button>
+          </div>
+
+          {/* Appointments */}
+          <div className="card-quicklab bg-white border border-lab-black-100">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Appointments</h3>
+                <p className="text-lab-black-600 text-sm">Track and manage lab appointments</p>
+              </div>
+              <Calendar className="w-6 h-6 text-lab-yellow-600" />
+            </div>
+            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+              View Appointments
+            </button>
+          </div>
+
+          {/* Settings */}
+          <div className="card-quicklab bg-white border border-lab-black-100">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Lab Settings</h3>
+                <p className="text-lab-black-600 text-sm">Update lab information and settings</p>
+              </div>
+              <Settings className="w-6 h-6 text-lab-yellow-600" />
+            </div>
+            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+              Edit Settings
+            </button>
+          </div>
+        </div>
+
+        {/* Recent Activity */}
+        <div className="card-quicklab bg-white border border-lab-black-100">
+          <h3 className="text-lg font-bold text-lab-black-900 mb-4">Recent Activity</h3>
+          <div className="space-y-3">
+            <p className="text-lab-black-600 text-sm py-4 text-center">No recent activity yet</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

From 19c94442383fd13bba2d082526876b2574ecbf40 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 11:08:01 +0530
Subject: [PATCH 11/44] feat(quicklab): add LabAdminManageStaff page with
 add-panel for unassigned staff and in-lab search filter

---
 .../pages/quicklab/LabAdminManageStaff.jsx    | 304 ++++++++++++++++++
 1 file changed, 304 insertions(+)
 create mode 100644 client/src/pages/quicklab/LabAdminManageStaff.jsx

diff --git a/client/src/pages/quicklab/LabAdminManageStaff.jsx b/client/src/pages/quicklab/LabAdminManageStaff.jsx
new file mode 100644
index 0000000..eaf0d91
--- /dev/null
+++ b/client/src/pages/quicklab/LabAdminManageStaff.jsx
@@ -0,0 +1,304 @@
+import { useEffect, useMemo, useState } from 'react';
+import '../../quicklab.css';
+import { toast } from 'react-toastify';
+import { Search, Mail, IdCard, UserPlus, Users, Trash2, X } from 'lucide-react';
+import {
+  searchLabStaff,
+  addStaffToLab,
+  removeStaffFromLab,
+  getLabStaff,
+} from '../../service/labAdminService';
+
+export default function LabAdminManageStaff() {
+  const [query, setQuery] = useState({ email: '', staffId: '' });
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [listLoading, setListLoading] = useState(true);
+  const [staffList, setStaffList] = useState([]);
+  const [adding, setAdding] = useState(false);
+  const [removingIds, setRemovingIds] = useState({});
+  const [showAddPanel, setShowAddPanel] = useState(false);
+  const [labSearch, setLabSearch] = useState('');
+
+  const canSearch = useMemo(() => {
+    return (
+      (query.email && query.email.includes('@')) || (!!query.staffId && query.staffId.length >= 8)
+    );
+  }, [query]);
+
+  const filtered = useMemo(() => {
+    const q = labSearch.trim().toLowerCase();
+    if (!q) return staffList;
+    return staffList.filter((s) => {
+      const name = `${s.firstName || ''} ${s.lastName || ''}`.trim().toLowerCase();
+      const email = (s.userId?.email || '').toLowerCase();
+      const id = (s._id || '').toLowerCase();
+      return name.includes(q) || email.includes(q) || id.includes(q);
+    });
+  }, [labSearch, staffList]);
+
+  const loadStaffList = async () => {
+    try {
+      setListLoading(true);
+      const res = await getLabStaff();
+      setStaffList(res?.staff || []);
+    } catch (err) {
+      console.error(err);
+      toast.error(err?.message || 'Failed to load staff list');
+    } finally {
+      setListLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadStaffList();
+  }, []);
+
+  const handleSearch = async (e) => {
+    e?.preventDefault?.();
+    if (!canSearch) return;
+    try {
+      setSearchLoading(true);
+      setResult(null);
+      const params = {};
+      if (query.email) params.email = query.email.trim();
+      if (query.staffId) params.staffId = query.staffId.trim();
+      const res = await searchLabStaff(params);
+      setResult(res?.staff);
+      toast.success(res?.message || 'Staff found');
+    } catch (err) {
+      console.error(err);
+      setResult(null);
+      toast.error(err?.message || 'No staff found');
+    } finally {
+      setSearchLoading(false);
+    }
+  };
+
+  const handleAddStaff = async (staffId) => {
+    try {
+      setAdding(true);
+      await addStaffToLab(staffId);
+      toast.success('Staff added to your lab');
+      setResult(null);
+      setQuery({ email: '', staffId: '' });
+      setShowAddPanel(false);
+      await loadStaffList();
+    } catch (err) {
+      console.error(err);
+      toast.error(err?.response?.data?.message || 'Failed to add staff');
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  const handleRemoveStaff = async (staffId) => {
+    try {
+      setRemovingIds((s) => ({ ...s, [staffId]: true }));
+      await removeStaffFromLab(staffId);
+      toast.success('Staff removed');
+      await loadStaffList();
+    } catch (err) {
+      console.error(err);
+      toast.error(err?.response?.data?.message || 'Failed to remove staff');
+    } finally {
+      setRemovingIds((s) => ({ ...s, [staffId]: false }));
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8 pt-20">
+      <div className="max-w-6xl mx-auto space-y-8">
+        {/* Page Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl md:text-4xl font-bold text-lab-black-900">Manage Staff</h1>
+            <p className="text-lab-black-600">Search, add and manage your lab staff</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setShowAddPanel(true)}
+              className="btn-quicklab-primary px-4 py-2 rounded-lg font-semibold"
+            >
+              + Add Staff
+            </button>
+            <Users className="w-8 h-8 text-lab-yellow-600" />
+          </div>
+        </div>
+
+        {/* Add Staff Panel (search unassigned) */}
+        {showAddPanel && (
+          <div className="card-quicklab bg-white border border-lab-black-100">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="text-xl font-bold text-lab-black-900">Add Staff</h2>
+              <button
+                onClick={() => {
+                  setShowAddPanel(false);
+                  setResult(null);
+                  setQuery({ email: '', staffId: '' });
+                }}
+                className="text-lab-black-500 hover:text-lab-black-800"
+                title="Close"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <p className="text-sm text-lab-black-600 mb-4">
+              Search unassigned staff by email or Staff ID and add to your lab.
+            </p>
+            <form onSubmit={handleSearch} className="grid grid-cols-1 md:grid-cols-12 gap-4">
+              <div className="md:col-span-5">
+                <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                  By Email
+                </label>
+                <div className="relative">
+                  <Mail className="w-4 h-4 text-lab-black-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                  <input
+                    type="email"
+                    placeholder="e.g. staff@example.com"
+                    value={query.email}
+                    onChange={(e) =>
+                      setQuery((q) => ({ ...q, email: e.target.value, staffId: '' }))
+                    }
+                    className="w-full pl-10 pr-3 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+                  />
+                </div>
+              </div>
+
+              <div className="md:col-span-5">
+                <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                  Or Staff ID
+                </label>
+                <div className="relative">
+                  <IdCard className="w-4 h-4 text-lab-black-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                  <input
+                    type="text"
+                    placeholder="Mongo ObjectId"
+                    value={query.staffId}
+                    onChange={(e) =>
+                      setQuery((q) => ({ ...q, staffId: e.target.value, email: '' }))
+                    }
+                    className="w-full pl-10 pr-3 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+                  />
+                </div>
+              </div>
+
+              <div className="md:col-span-2 flex items-end">
+                <button
+                  type="submit"
+                  disabled={!canSearch || searchLoading}
+                  className="w-full btn-quicklab-primary py-2 font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  <Search className="w-4 h-4" /> {searchLoading ? 'Searching...' : 'Search'}
+                </button>
+              </div>
+            </form>
+
+            {/* Search Result */}
+            {result && (
+              <div className="mt-6 border-t border-lab-black-100 pt-6">
+                <h3 className="text-lg font-bold text-lab-black-900 mb-4">Result</h3>
+                <div className="flex items-center justify-between card-quicklab bg-white border border-lab-black-100">
+                  <div>
+                    <p className="font-semibold text-lab-black-900">
+                      {result.firstName} {result.lastName}
+                    </p>
+                    <p className="text-sm text-lab-black-600">{result.email}</p>
+                    <p className="text-sm text-lab-black-600 capitalize">
+                      Role: {result.role?.replace(/_/g, ' ')}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => handleAddStaff(result.id)}
+                    disabled={adding}
+                    className="btn-quicklab-secondary px-4 py-2 flex items-center gap-2 disabled:opacity-50"
+                  >
+                    <UserPlus className="w-4 h-4" /> {adding ? 'Adding...' : 'Add to Lab'}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Current Staff List */}
+        <div className="card-quicklab bg-white border border-lab-black-100">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-bold text-lab-black-900">Your Staff</h2>
+            <div className="flex items-center gap-3">
+              <div className="relative hidden md:block">
+                <Search className="w-4 h-4 text-lab-black-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                <input
+                  value={labSearch}
+                  onChange={(e) => setLabSearch(e.target.value)}
+                  placeholder="Search in your staff (name, email, ID)"
+                  className="w-80 pl-10 pr-3 py-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+                />
+              </div>
+              <span className="text-sm text-lab-black-600">{staffList.length} total</span>
+            </div>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-lab-black-100">
+              <thead className="bg-lab-black-50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-lab-black-600 uppercase tracking-wider">
+                    Name
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-lab-black-600 uppercase tracking-wider">
+                    Email
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-lab-black-600 uppercase tracking-wider">
+                    Role
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-lab-black-600 uppercase tracking-wider">
+                    Phone
+                  </th>
+                  <th className="px-4 py-3" />
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-lab-black-100">
+                {listLoading ? (
+                  <tr>
+                    <td colSpan={5} className="px-4 py-6 text-center text-lab-black-600">
+                      Loading staff...
+                    </td>
+                  </tr>
+                ) : filtered.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="px-4 py-6 text-center text-lab-black-600">
+                      No matching staff.
+                    </td>
+                  </tr>
+                ) : (
+                  filtered.map((s) => (
+                    <tr key={s._id} className="hover:bg-lab-yellow-50/50">
+                      <td className="px-4 py-3 text-lab-black-900 font-medium">
+                        {s.firstName} {s.lastName}
+                      </td>
+                      <td className="px-4 py-3 text-lab-black-700">{s.userId?.email || '-'}</td>
+                      <td className="px-4 py-3 text-lab-black-700 capitalize">
+                        {s.role?.replace(/_/g, ' ')}
+                      </td>
+                      <td className="px-4 py-3 text-lab-black-700">{s.phoneNumber || '-'}</td>
+                      <td className="px-4 py-3 text-right">
+                        <button
+                          onClick={() => handleRemoveStaff(s._id)}
+                          disabled={!!removingIds[s._id]}
+                          className="text-red-600 hover:text-red-700 font-semibold inline-flex items-center gap-2 disabled:opacity-50"
+                        >
+                          <Trash2 className="w-4 h-4" /> Remove
+                        </button>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

From 5937e3bf4255b830acf31a3f17e9a8c980d5109a Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 11:08:06 +0530
Subject: [PATCH 12/44] feat(routes): add /quick-lab/staff route for lab_admin
 with guards and import Manage Staff page

---
 client/src/routes/QuickLabRoutes.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index 88a0016..ebdf724 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -4,6 +4,7 @@ import QuickLabHomepage from '../pages/quicklab/Homepage';
 import LabAdminProfileComplete from '../pages/quicklab/LabAdminProfileComplete';
 import LabAdminAddLab from '../pages/quicklab/LabAdminAddLab';
 import LabAdminDashboard from '../pages/quicklab/LabAdminDashboard';
+import LabAdminManageStaff from '../pages/quicklab/LabAdminManageStaff';
 import LabStaffProfileComplete from '../pages/quicklab/LabStaffProfileComplete';
 import LabStaffWaitingForAssignment from '../pages/quicklab/LabStaffWaitingForAssignment';
 import LabStaffDashboard from '../pages/quicklab/LabStaffDashboard';
@@ -58,6 +59,18 @@ export default function QuickLabRoutes() {
           }
         />
 
+        {/* Lab Admin - Manage Staff */}
+        <Route
+          path="/quick-lab/staff"
+          element={
+            <ProtectedRoute allowedRoles={['lab_admin']}>
+              <LabAdminSetupGuard requireProfile={true} requireLab={true}>
+                <LabAdminManageStaff />
+              </LabAdminSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
         {/* ============ LAB STAFF ROUTES ============ */}
 
         {/* Lab Staff Profile Completion */}

From 524f65d6baaf440af5a7831af1f5d2e3a06c68b1 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 11:08:14 +0530
Subject: [PATCH 13/44] feat(dashboard): add Manage Staff navigation and
 placeholders for tests/appointments/settings

---
 .../src/pages/quicklab/LabAdminDashboard.jsx  | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/quicklab/LabAdminDashboard.jsx b/client/src/pages/quicklab/LabAdminDashboard.jsx
index eb129c1..b8a5fc0 100644
--- a/client/src/pages/quicklab/LabAdminDashboard.jsx
+++ b/client/src/pages/quicklab/LabAdminDashboard.jsx
@@ -1,7 +1,9 @@
 import { BarChart3, Users, TestTube, Calendar, Settings } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import '../../quicklab.css';
 
 export default function LabAdminDashboard() {
+  const navigate = useNavigate();
   const stats = [
     { label: 'Total Tests', value: '0', icon: TestTube, color: 'lab-yellow' },
     { label: 'Staff Members', value: '0', icon: Users, color: 'lab-blue' },
@@ -51,7 +53,10 @@ export default function LabAdminDashboard() {
               </div>
               <TestTube className="w-6 h-6 text-lab-yellow-600" />
             </div>
-            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+            <button
+              onClick={() => navigate('/quick-lab/tests')}
+              className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg"
+            >
               View Tests
             </button>
           </div>
@@ -65,7 +70,10 @@ export default function LabAdminDashboard() {
               </div>
               <Users className="w-6 h-6 text-lab-yellow-600" />
             </div>
-            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+            <button
+              onClick={() => navigate('/quick-lab/staff')}
+              className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg"
+            >
               View Staff
             </button>
           </div>
@@ -79,7 +87,10 @@ export default function LabAdminDashboard() {
               </div>
               <Calendar className="w-6 h-6 text-lab-yellow-600" />
             </div>
-            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+            <button
+              onClick={() => navigate('/quick-lab/appointments')}
+              className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg"
+            >
               View Appointments
             </button>
           </div>
@@ -93,7 +104,10 @@ export default function LabAdminDashboard() {
               </div>
               <Settings className="w-6 h-6 text-lab-yellow-600" />
             </div>
-            <button className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg">
+            <button
+              onClick={() => navigate('/quick-lab/settings')}
+              className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg"
+            >
               Edit Settings
             </button>
           </div>

From 2a830222e66a8117189ff84b68fe59a2f62e8143 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 11:08:20 +0530
Subject: [PATCH 14/44] feat(navbar): add lab_admin-only Staff shortcut in
 mobile navbar

---
 client/src/components/quicklab/MobileNavbar.jsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index 7ffca0e..a672264 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -1,12 +1,12 @@
 // MobileNavbar.jsx
-import { Search, Home, BookOpen, User, LogOut } from 'lucide-react';
+import { Search, Home, BookOpen, User, LogOut, Users } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
 
 export default function MobileNavbar({ searchQuery, setSearchQuery }) {
   const navigate = useNavigate();
-  const { isAuthenticated, logout } = useAuth();
+  const { isAuthenticated, logout, user } = useAuth();
 
   const handleLogout = async () => {
     await logout();
@@ -63,6 +63,17 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
             </span>
           </div>
 
+          {/* Lab Admin: Manage Staff */}
+          {isAuthenticated && user?.role === 'lab_admin' && (
+            <button
+              onClick={() => navigate('/quick-lab/staff')}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+            >
+              <Users className="h-6 w-6" />
+              <span className="text-xs font-medium">Staff</span>
+            </button>
+          )}
+
           {/* Conditional: Login/Account OR Logout */}
           {isAuthenticated ? (
             <button

From 949545f59bc058a165b594f73b09a12ad515c9c0 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 11:08:27 +0530
Subject: [PATCH 15/44] fix(navbar): switch desktop navbar to sticky to prevent
 content overlap

---
 .../src/components/quicklab/DesktopNavbar.jsx  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index a9ed042..d0b6937 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -1,19 +1,19 @@
 // DesktopNavbar.jsx
-import { Search, LogOut } from 'lucide-react';
+import { Search, LogOut, Users } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
 import DesktopFooter from './DesktopFooter';
 export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
   const navigate = useNavigate();
-  const { isAuthenticated, logout } = useAuth();
+  const { isAuthenticated, logout, user } = useAuth();
 
   const handleLogout = async () => {
     await logout();
     navigate('/', { replace: true });
   };
   return (
-    <nav className="hidden lg:block fixed top-0 left-0 right-0 z-50 bg-white dark:bg-black border-b border-slate-200 dark:border-slate-800 shadow-sm">
+    <nav className="hidden lg:block sticky top-0 z-50 bg-white dark:bg-black border-b border-slate-200 dark:border-slate-800 shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
@@ -45,6 +45,18 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
             {/* Dark Mode Toggle */}
             <DarkModeToggle />
 
+            {/* Lab Admin: Manage Staff shortcut */}
+            {isAuthenticated && user?.role === 'lab_admin' && (
+              <button
+                onClick={() => navigate('/quick-lab/staff')}
+                className="hidden md:inline-flex items-center gap-2 px-3 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                title="Manage Staff"
+              >
+                <Users className="h-5 w-5" />
+                Manage Staff
+              </button>
+            )}
+
             {/* Conditional: Login/Register OR Logout */}
             {isAuthenticated ? (
               <button

From dfd0d05d4325fd5f8230623e36c978794ec05dde Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Wed, 17 Dec 2025 11:10:09 +0530
Subject: [PATCH 16/44] fix(lab-admin): handle staff removal when not assigned
 and return clearer error messages

---
 server/Controllers/QuickLab/labAdminController.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/server/Controllers/QuickLab/labAdminController.js b/server/Controllers/QuickLab/labAdminController.js
index b812118..82d2f4c 100644
--- a/server/Controllers/QuickLab/labAdminController.js
+++ b/server/Controllers/QuickLab/labAdminController.js
@@ -260,6 +260,11 @@ export const removeStaffFromLab = async (req, res) => {
       return res.status(404).json({ message: 'Staff not found' });
     }
 
+    // If staff is not assigned to any lab, respond gracefully
+    if (!staff.labId) {
+      return res.status(400).json({ message: 'Staff is not assigned to any lab' });
+    }
+
     if (staff.labId.toString() !== labAdmin.labId.toString()) {
       return res.status(403).json({ message: 'Staff does not belong to your lab' });
     }

From 8bd065a005a0084f1a4b8a1728d2bdc28b61e603 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 14:48:32 +0530
Subject: [PATCH 17/44] feat(prescription): add labId field to tests for lab
 assignment

---
 server/models/Appointment/Prescription.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/server/models/Appointment/Prescription.js b/server/models/Appointment/Prescription.js
index 1df57b3..4755a84 100644
--- a/server/models/Appointment/Prescription.js
+++ b/server/models/Appointment/Prescription.js
@@ -32,6 +32,10 @@ const prescriptionSchema = new mongoose.Schema({
     {
       name: { type: String },
       instructions: { type: String },
+      labId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'Lab',
+      },
     },
   ],
   notes: { type: String },

From 1bf2bd24efa4dde5e59c8e25616062af2a5ed75d Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 14:48:54 +0530
Subject: [PATCH 18/44] feat(api): add getNearbyLabs endpoint to fetch labs in
 same city

---
 server/Controllers/publicController.js | 29 ++++++++++++++++++++++++++
 server/Routes/publicRoutes.js          |  4 ++++
 2 files changed, 33 insertions(+)

diff --git a/server/Controllers/publicController.js b/server/Controllers/publicController.js
index 0016d73..d8e4766 100644
--- a/server/Controllers/publicController.js
+++ b/server/Controllers/publicController.js
@@ -3,6 +3,7 @@
 import Clinic from '../models/Clinic/Clinic.js';
 import Schedule from '../models/Clinic/Schedule.js';
 import Doctor from '../models/Users/Doctor.js';
+import Lab from '../models/Lab/Lab.js';
 
 // Helper functions
 const getDayName = (date) =>
@@ -494,3 +495,31 @@ export const getSearchSuggestions = async (req, res) => {
     res.status(500).json({ success: false, error: error.message });
   }
 };
+
+// Get nearby labs by city
+export const getNearbyLabs = async (req, res) => {
+  try {
+    const { city } = req.query;
+
+    if (!city) {
+      return res.status(400).json({ success: false, message: 'City parameter is required' });
+    }
+
+    // Find labs in the same city
+    const labs = await Lab.find({
+      'address.city': { $regex: city, $options: 'i' },
+      isActive: { $ne: false }, // Exclude inactive labs if the field exists
+    })
+      .select('name address contact tests generalHomeCollectionFee')
+      .lean();
+
+    res.json({
+      success: true,
+      count: labs.length,
+      data: labs,
+    });
+  } catch (error) {
+    console.error('Error fetching nearby labs:', error);
+    res.status(500).json({ success: false, error: error.message });
+  }
+};
diff --git a/server/Routes/publicRoutes.js b/server/Routes/publicRoutes.js
index 1a1b427..55427e7 100644
--- a/server/Routes/publicRoutes.js
+++ b/server/Routes/publicRoutes.js
@@ -10,6 +10,7 @@ import {
   getSearchSuggestions,
   searchClinics,
   searchDoctors,
+  getNearbyLabs,
 } from '../Controllers/publicController.js';
 
 const router = express.Router();
@@ -27,4 +28,7 @@ router.get('/clinics/search', searchClinics);
 router.get('/clinics/:id', getClinicById);
 router.get('/clinics/:clinicId/doctors', getClinicDoctors);
 
+// Lab routes
+router.get('/labs/nearby', getNearbyLabs);
+
 export default router;

From e97ec1ed39b4c41c39d4c9a041b901b961cf1ce0 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 14:49:00 +0530
Subject: [PATCH 19/44] feat(service): add getNearbyLabs API call in
 prescription service

---
 client/src/service/prescriptionApiSevice.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/src/service/prescriptionApiSevice.js b/client/src/service/prescriptionApiSevice.js
index d3f90b3..3dc0050 100644
--- a/client/src/service/prescriptionApiSevice.js
+++ b/client/src/service/prescriptionApiSevice.js
@@ -50,6 +50,15 @@ export const updatePrescription = async (prescriptionId, updateData) => {
 export const getPatientAppointmentPrescription = async (appointmentId) => {
   return await apiService.get(`/prescriptions/patient/appointments/${appointmentId}`);
 };
+
+/**
+ * Get nearby labs by city
+ */
+export const getNearbyLabs = async (city) => {
+  return await apiService.get('/public/labs/nearby', {
+    params: { city },
+  });
+};
 export default {
   createPrescription,
   getPatientPrescriptions,

From 4763696f46b37c629b1ef543b32bfde83ffba108 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 14:49:08 +0530
Subject: [PATCH 20/44] feat(prescription): add lab selector for tests with
 nearby lab filtering by patient city

---
 .../src/pages/doctor/AppointmentDetails.jsx   | 80 ++++++++++++++++---
 1 file changed, 68 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/doctor/AppointmentDetails.jsx b/client/src/pages/doctor/AppointmentDetails.jsx
index 7420856..f6c41f8 100644
--- a/client/src/pages/doctor/AppointmentDetails.jsx
+++ b/client/src/pages/doctor/AppointmentDetails.jsx
@@ -24,6 +24,7 @@ import {
   createPrescription,
   getAppointmentPrescription,
   updatePrescription,
+  getNearbyLabs,
 } from '../../service/prescriptionApiSevice';
 import { getMedicineSuggestions } from '../../service/medicineApiService';
 
@@ -42,11 +43,13 @@ const AppointmentDetails = () => {
   const [prescriptionData, setPrescriptionData] = useState({
     diagnosis: '',
     medications: [{ name: '', dosage: '', frequency: '', duration: '', instructions: '' }],
-    tests: [{ name: '', instructions: '' }],
+    tests: [{ name: '', instructions: '', labId: '' }],
     notes: '',
     followUpDate: '',
   });
   const [savingPrescription, setSavingPrescription] = useState(false);
+  const [nearbyLabs, setNearbyLabs] = useState([]);
+  const [loadingLabs, setLoadingLabs] = useState(false);
   const useDebounce = (callback, delay) => {
     const timeoutRef = useRef(null);
 
@@ -105,6 +108,11 @@ const AppointmentDetails = () => {
         console.log(err);
       }
 
+      // Fetch nearby labs based on patient city
+      if (patientRes.patient?.address?.city) {
+        fetchNearbyLabs(patientRes.patient.address.city);
+      }
+
       setError(null);
     } catch (err) {
       setError('Failed to fetch appointment details');
@@ -114,6 +122,19 @@ const AppointmentDetails = () => {
     }
   };
 
+  const fetchNearbyLabs = async (city) => {
+    try {
+      setLoadingLabs(true);
+      const response = await getNearbyLabs(city);
+      setNearbyLabs(response.data || []);
+    } catch (err) {
+      console.error('Error fetching nearby labs:', err);
+      setNearbyLabs([]);
+    } finally {
+      setLoadingLabs(false);
+    }
+  };
+
   const handleStatusUpdate = async (newStatus) => {
     try {
       await updateAppointmentStatus(appointmentId, { status: newStatus });
@@ -203,7 +224,7 @@ const AppointmentDetails = () => {
   const addTest = () => {
     setPrescriptionData((prev) => ({
       ...prev,
-      tests: [...prev.tests, { name: '', instructions: '' }],
+      tests: [...prev.tests, { name: '', instructions: '', labId: '' }],
     }));
   };
 
@@ -790,9 +811,12 @@ const AppointmentDetails = () => {
                           {prescriptionData.tests.map((test, index) => (
                             <div
                               key={index}
-                              className="flex space-x-4 mb-4 p-4 border border-gray-200 rounded-lg bg-gray-50"
+                              className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 p-4 border border-gray-200 rounded-lg bg-gray-50"
                             >
-                              <div className="flex-1">
+                              <div>
+                                <label className="block text-xs font-medium text-gray-600 mb-1">
+                                  Test Name
+                                </label>
                                 <input
                                   type="text"
                                   placeholder="Test name"
@@ -801,7 +825,36 @@ const AppointmentDetails = () => {
                                   className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
                                 />
                               </div>
-                              <div className="flex-1">
+                              <div>
+                                <label className="block text-xs font-medium text-gray-600 mb-1">
+                                  Select Lab (Same City)
+                                </label>
+                                <select
+                                  value={test.labId}
+                                  onChange={(e) => updateTest(index, 'labId', e.target.value)}
+                                  className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 bg-white"
+                                  disabled={loadingLabs}
+                                >
+                                  <option value="">Select a lab (optional)</option>
+                                  {nearbyLabs.map((lab) => (
+                                    <option key={lab._id} value={lab._id}>
+                                      {lab.name} - {lab.address?.city}
+                                    </option>
+                                  ))}
+                                </select>
+                                {loadingLabs && (
+                                  <p className="text-xs text-gray-500 mt-1">Loading labs...</p>
+                                )}
+                                {!loadingLabs && nearbyLabs.length === 0 && (
+                                  <p className="text-xs text-gray-500 mt-1">
+                                    No labs found in patient's city
+                                  </p>
+                                )}
+                              </div>
+                              <div>
+                                <label className="block text-xs font-medium text-gray-600 mb-1">
+                                  Instructions
+                                </label>
                                 <input
                                   type="text"
                                   placeholder="Instructions (optional)"
@@ -813,13 +866,16 @@ const AppointmentDetails = () => {
                                 />
                               </div>
                               {prescriptionData.tests.length > 1 && (
-                                <button
-                                  type="button"
-                                  onClick={() => removeTest(index)}
-                                  className="p-2 text-red-600 hover:bg-red-50 rounded-md"
-                                >
-                                  <XMarkIcon className="w-4 h-4" />
-                                </button>
+                                <div className="md:col-span-3 flex justify-end">
+                                  <button
+                                    type="button"
+                                    onClick={() => removeTest(index)}
+                                    className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-md flex items-center space-x-1"
+                                  >
+                                    <XMarkIcon className="w-4 h-4" />
+                                    <span>Remove Test</span>
+                                  </button>
+                                </div>
                               )}
                             </div>
                           ))}

From cc5ae3028084d7213aac0f18f99cce7cb52d560f Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 15:15:20 +0530
Subject: [PATCH 21/44] feat(quicklab): add geolocation service with browser
 API and IP fallback

---
 client/src/service/geolocationService.js | 112 +++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 client/src/service/geolocationService.js

diff --git a/client/src/service/geolocationService.js b/client/src/service/geolocationService.js
new file mode 100644
index 0000000..4bbb127
--- /dev/null
+++ b/client/src/service/geolocationService.js
@@ -0,0 +1,112 @@
+// Geolocation service to detect user's city
+import apiService from './apiservice';
+
+/**
+ * Get user's city from browser geolocation API
+ */
+export const getCityFromGeolocation = () => {
+  return new Promise((resolve, reject) => {
+    if (!navigator.geolocation) {
+      reject(new Error('Geolocation not supported'));
+      return;
+    }
+
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        try {
+          const { latitude, longitude } = position.coords;
+          // Use reverse geocoding to get city from coordinates
+          const city = await reversGeocode(latitude, longitude);
+          resolve(city);
+        } catch (err) {
+          reject(err);
+        }
+      },
+      (error) => {
+        reject(error);
+      },
+      { timeout: 10000 }
+    );
+  });
+};
+
+/**
+ * Reverse geocode coordinates to city name using a free API
+ */
+const reversGeocode = async (lat, lon) => {
+  try {
+    const response = await fetch(
+      `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}&addressdetails=1`
+    );
+    const data = await response.json();
+    return data.address?.city || data.address?.town || data.address?.village || null;
+  } catch (err) {
+    console.error('Reverse geocoding failed:', err);
+    return null;
+  }
+};
+
+/**
+ * Get user's city from IP-based geolocation (fallback)
+ */
+export const getCityFromIP = async () => {
+  try {
+    const response = await fetch('https://ipapi.co/json/');
+    const data = await response.json();
+    return data.city || null;
+  } catch (err) {
+    console.error('IP-based geolocation failed:', err);
+    return null;
+  }
+};
+
+/**
+ * Get user's city with fallback mechanism
+ * First tries browser geolocation, then falls back to IP
+ */
+export const detectUserCity = async () => {
+  try {
+    // Try localStorage first for cached city
+    const cachedCity = localStorage.getItem('userCity');
+    if (cachedCity) {
+      return cachedCity;
+    }
+
+    // Try browser geolocation
+    try {
+      const city = await getCityFromGeolocation();
+      if (city) {
+        localStorage.setItem('userCity', city);
+        return city;
+      }
+    } catch (err) {
+      console.log('Browser geolocation failed, falling back to IP');
+    }
+
+    // Fallback to IP-based geolocation
+    const city = await getCityFromIP();
+    if (city) {
+      localStorage.setItem('userCity', city);
+      return city;
+    }
+
+    return null;
+  } catch (err) {
+    console.error('City detection failed:', err);
+    return null;
+  }
+};
+
+/**
+ * Clear cached city
+ */
+export const clearCachedCity = () => {
+  localStorage.removeItem('userCity');
+};
+
+export default {
+  detectUserCity,
+  getCityFromGeolocation,
+  getCityFromIP,
+  clearCachedCity,
+};

From 565dbc5c29e50e2b17ca3baf2a86d3660702976b Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 15:15:25 +0530
Subject: [PATCH 22/44] feat(quicklab): add lab service with search, details,
 and booking APIs

---
 client/src/service/labService.js | 44 ++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 client/src/service/labService.js

diff --git a/client/src/service/labService.js b/client/src/service/labService.js
new file mode 100644
index 0000000..f417edd
--- /dev/null
+++ b/client/src/service/labService.js
@@ -0,0 +1,44 @@
+import apiService from './apiservice';
+
+/**
+ * Search labs with filters
+ */
+export const searchLabs = async (params) => {
+  return await apiService.get('/public/labs/search', { params });
+};
+
+/**
+ * Get lab details by ID
+ */
+export const getLabById = async (labId) => {
+  return await apiService.get(`/public/labs/${labId}`);
+};
+
+/**
+ * Get nearby labs by city
+ */
+export const getNearbyLabs = async (city) => {
+  return await apiService.get('/public/labs/nearby', { params: { city } });
+};
+
+/**
+ * Book lab appointment (requires authentication)
+ */
+export const bookLabAppointment = async (appointmentData) => {
+  return await apiService.post('/lab-appointment/book', appointmentData);
+};
+
+/**
+ * Get patient's lab appointments
+ */
+export const getPatientLabAppointments = async () => {
+  return await apiService.get('/lab-appointment/patient');
+};
+
+export default {
+  searchLabs,
+  getLabById,
+  getNearbyLabs,
+  bookLabAppointment,
+  getPatientLabAppointments,
+};

From 7a23b54a31f96c1b32e636a559ab1f5546d100c5 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 15:15:31 +0530
Subject: [PATCH 23/44] feat(quicklab): add public API endpoints for lab search
 and details

---
 server/Controllers/publicController.js | 131 +++++++++++++++++++++++++
 server/Routes/publicRoutes.js          |   4 +
 2 files changed, 135 insertions(+)

diff --git a/server/Controllers/publicController.js b/server/Controllers/publicController.js
index d8e4766..55f5074 100644
--- a/server/Controllers/publicController.js
+++ b/server/Controllers/publicController.js
@@ -523,3 +523,134 @@ export const getNearbyLabs = async (req, res) => {
     res.status(500).json({ success: false, error: error.message });
   }
 };
+
+// Search labs with comprehensive filters
+export const searchLabs = async (req, res) => {
+  try {
+    const {
+      query, // search term for lab name or test name
+      city,
+      testCategory,
+      minPrice,
+      maxPrice,
+      homeCollection,
+      sort = 'rating_desc',
+      page = 1,
+      limit = 20,
+    } = req.query;
+
+    const skip = (page - 1) * limit;
+    const searchQuery = {};
+
+    // City filter (required for location-based search)
+    if (city) {
+      searchQuery['address.city'] = { $regex: city, $options: 'i' };
+    }
+
+    // Active labs only
+    searchQuery.isActive = { $ne: false };
+
+    // Search by lab name or test name
+    if (query && query.trim()) {
+      searchQuery.$or = [
+        { name: { $regex: query, $options: 'i' } },
+        { description: { $regex: query, $options: 'i' } },
+        { 'tests.testName': { $regex: query, $options: 'i' } },
+      ];
+    }
+
+    // Test category filter
+    if (testCategory) {
+      searchQuery['tests.category'] = testCategory;
+    }
+
+    // Home collection filter
+    if (homeCollection === 'true') {
+      searchQuery['tests.homeCollectionAvailable'] = true;
+    }
+
+    // Price range filter (on tests)
+    if (minPrice || maxPrice) {
+      const priceQuery = {};
+      if (minPrice) priceQuery.$gte = parseFloat(minPrice);
+      if (maxPrice) priceQuery.$lte = parseFloat(maxPrice);
+      searchQuery['tests.price'] = priceQuery;
+    }
+
+    // Sort options
+    let sortOption = {};
+    switch (sort) {
+      case 'rating_desc':
+        sortOption = { 'ratings.average': -1 };
+        break;
+      case 'rating_asc':
+        sortOption = { 'ratings.average': 1 };
+        break;
+      case 'name_asc':
+        sortOption = { name: 1 };
+        break;
+      case 'name_desc':
+        sortOption = { name: -1 };
+        break;
+      default:
+        sortOption = { 'ratings.average': -1 };
+    }
+
+    const [labs, total] = await Promise.all([
+      Lab.find(searchQuery)
+        .sort(sortOption)
+        .skip(skip)
+        .limit(parseInt(limit))
+        .select(
+          'name description address contact logo photos tests ratings openingHours generalHomeCollectionFee'
+        )
+        .lean(),
+      Lab.countDocuments(searchQuery),
+    ]);
+
+    res.json({
+      success: true,
+      data: labs,
+      pagination: {
+        page: parseInt(page),
+        limit: parseInt(limit),
+        total,
+        pages: Math.ceil(total / limit),
+      },
+      filters: {
+        city,
+        query,
+        testCategory,
+        minPrice,
+        maxPrice,
+        homeCollection,
+      },
+    });
+  } catch (error) {
+    console.error('Error searching labs:', error);
+    res.status(500).json({ success: false, error: error.message });
+  }
+};
+
+// Get single lab details by ID
+export const getLabById = async (req, res) => {
+  try {
+    const { labId } = req.params;
+
+    const lab = await Lab.findById(labId)
+      .populate('staff', 'firstName lastName role phoneNumber')
+      .lean();
+
+    if (!lab) {
+      return res.status(404).json({ success: false, message: 'Lab not found' });
+    }
+
+    res.json({
+      success: true,
+      data: lab,
+    });
+  } catch (error) {
+    console.error('Error fetching lab details:', error);
+    res.status(500).json({ success: false, error: error.message });
+  }
+};
diff --git a/server/Routes/publicRoutes.js b/server/Routes/publicRoutes.js
index 55427e7..2e6d6b2 100644
--- a/server/Routes/publicRoutes.js
+++ b/server/Routes/publicRoutes.js
@@ -11,6 +11,8 @@ import {
   searchClinics,
   searchDoctors,
   getNearbyLabs,
+  searchLabs,
+  getLabById,
 } from '../Controllers/publicController.js';
 
 const router = express.Router();
@@ -29,6 +31,8 @@ router.get('/clinics/:id', getClinicById);
 router.get('/clinics/:clinicId/doctors', getClinicDoctors);
 
 // Lab routes
+router.get('/labs/search', searchLabs);
 router.get('/labs/nearby', getNearbyLabs);
+router.get('/labs/:labId', getLabById);
 
 export default router;

From ce3609a77c31704de22d923064d32fa71a29a66b Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 15:15:38 +0530
Subject: [PATCH 24/44] feat(quicklab): add lab search results page with
 filters and dynamic categories

---
 .../src/pages/quicklab/LabSearchResults.jsx   | 505 ++++++++++++++++++
 1 file changed, 505 insertions(+)
 create mode 100644 client/src/pages/quicklab/LabSearchResults.jsx

diff --git a/client/src/pages/quicklab/LabSearchResults.jsx b/client/src/pages/quicklab/LabSearchResults.jsx
new file mode 100644
index 0000000..2c2ce83
--- /dev/null
+++ b/client/src/pages/quicklab/LabSearchResults.jsx
@@ -0,0 +1,505 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Search, MapPin, Filter, X, Star, Phone, Mail, Clock, Home } from 'lucide-react';
+import { searchLabs } from '../../service/labService';
+import { detectUserCity } from '../../service/geolocationService';
+import '../../quicklab.css';
+
+export default function LabSearchResults() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [labs, setLabs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [detectedCity, setDetectedCity] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+  const [showCityModal, setShowCityModal] = useState(false);
+  const [newCity, setNewCity] = useState('');
+
+  // Search and filter states
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('query') || '');
+  const [filters, setFilters] = useState({
+    city: searchParams.get('city') || '',
+    testCategory: searchParams.get('testCategory') || '',
+    minPrice: searchParams.get('minPrice') || '',
+    maxPrice: searchParams.get('maxPrice') || '',
+    homeCollection: searchParams.get('homeCollection') || '',
+    sort: searchParams.get('sort') || 'rating_desc',
+  });
+
+  const [pagination, setPagination] = useState({
+    page: 1,
+    limit: 20,
+    total: 0,
+    pages: 0,
+  });
+
+  // Extract unique test categories from current lab results
+  const availableTestCategories = () => {
+    const categoriesSet = new Set();
+    labs.forEach((lab) => {
+      if (lab.tests && Array.isArray(lab.tests)) {
+        lab.tests.forEach((test) => {
+          if (test.category) {
+            categoriesSet.add(test.category);
+          }
+        });
+      }
+    });
+    return Array.from(categoriesSet).sort();
+  };
+
+  useEffect(() => {
+    initializeSearch();
+  }, []);
+
+  useEffect(() => {
+    if (filters.city) {
+      performSearch();
+    }
+  }, [filters, searchQuery, pagination.page]);
+
+  const initializeSearch = async () => {
+    try {
+      // Get user's city if not already set
+      let city = filters.city;
+      if (!city) {
+        setLoading(true);
+        city = await detectUserCity();
+        if (city) {
+          setDetectedCity(city);
+          setFilters((prev) => ({ ...prev, city }));
+        } else {
+          setLoading(false);
+        }
+      } else {
+        setDetectedCity(city);
+      }
+    } catch (err) {
+      console.error('Failed to detect city:', err);
+      setLoading(false);
+    }
+  };
+
+  const performSearch = async () => {
+    try {
+      setLoading(true);
+      const params = {
+        query: searchQuery,
+        ...filters,
+        page: pagination.page,
+        limit: pagination.limit,
+      };
+
+      // Remove empty params
+      Object.keys(params).forEach((key) => {
+        if (!params[key]) delete params[key];
+      });
+
+      const response = await searchLabs(params);
+      setLabs(response.data || []);
+      setPagination((prev) => ({ ...prev, ...response.pagination }));
+    } catch (err) {
+      console.error('Search failed:', err);
+      setLabs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setPagination((prev) => ({ ...prev, page: 1 }));
+    updateURLParams();
+  };
+
+  const updateURLParams = () => {
+    const params = new URLSearchParams();
+    if (searchQuery) params.set('query', searchQuery);
+    if (filters.city) params.set('city', filters.city);
+    if (filters.testCategory) params.set('testCategory', filters.testCategory);
+    if (filters.minPrice) params.set('minPrice', filters.minPrice);
+    if (filters.maxPrice) params.set('maxPrice', filters.maxPrice);
+    if (filters.homeCollection) params.set('homeCollection', filters.homeCollection);
+    if (filters.sort) params.set('sort', filters.sort);
+    setSearchParams(params);
+  };
+
+  const handleFilterChange = (key, value) => {
+    setFilters((prev) => ({ ...prev, [key]: value }));
+    setPagination((prev) => ({ ...prev, page: 1 }));
+  };
+
+  const clearFilters = () => {
+    setFilters({
+      city: detectedCity,
+      testCategory: '',
+      minPrice: '',
+      maxPrice: '',
+      homeCollection: '',
+      sort: 'rating_desc',
+    });
+    setPagination((prev) => ({ ...prev, page: 1 }));
+  };
+
+  const handleLabClick = (labId) => {
+    navigate(`/quick-lab/lab/${labId}`);
+  };
+  const handleChangeLocation = () => {
+    setNewCity(filters.city || '');
+    setShowCityModal(true);
+  };
+
+  const handleSaveCity = () => {
+    if (newCity.trim()) {
+      setDetectedCity(newCity.trim());
+      setFilters((prev) => ({ ...prev, city: newCity.trim() }));
+      setPagination((prev) => ({ ...prev, page: 1 }));
+      setShowCityModal(false);
+    }
+  };
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white">
+      {/* Search Header */}
+      <div className="bg-white dark:bg-black border-b border-lab-black-100 sticky top-16 z-40">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <form onSubmit={handleSearch} className="flex gap-3">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-lab-black-400" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search for labs or tests..."
+                className="w-full pl-10 pr-4 py-3 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500 text-lab-black-900"
+              />
+            </div>
+            <button
+              type="button"
+              onClick={() => setShowFilters(!showFilters)}
+              className="btn-quicklab-secondary px-4 py-3 flex items-center gap-2"
+            >
+              <Filter className="w-5 h-5" />
+              Filters
+            </button>
+            <button type="submit" className="btn-quicklab-primary px-6 py-3">
+              Search
+            </button>
+          </form>
+
+          {/* Location Display */}
+          {detectedCity && (
+            <div className="flex items-center gap-2 mt-3 text-lab-black-600">
+              <MapPin className="w-4 h-4" />
+              <span className="text-sm">
+                Showing results in <strong>{detectedCity}</strong>
+              </span>
+              <button
+                onClick={handleChangeLocation}
+                className="text-sm text-lab-yellow-600 hover:underline ml-2"
+              >
+                Change location
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* City Change Modal */}
+      {showCityModal && (
+        <div
+          className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+          onClick={() => setShowCityModal(false)}
+        >
+          <div
+            className="bg-white dark:bg-slate-900 rounded-lg shadow-2xl max-w-md w-full p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-xl font-bold text-lab-black-900">Change Location</h3>
+              <button
+                onClick={() => setShowCityModal(false)}
+                className="text-lab-black-500 hover:text-lab-black-800"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-lab-black-700 mb-2">
+                Enter City Name
+              </label>
+              <input
+                type="text"
+                value={newCity}
+                onChange={(e) => setNewCity(e.target.value)}
+                onKeyPress={(e) => e.key === 'Enter' && handleSaveCity()}
+                placeholder="e.g., Mumbai, Delhi, Bangalore"
+                className="w-full px-4 py-2 border border-lab-black-300 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent"
+                autoFocus
+              />
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setShowCityModal(false)}
+                className="flex-1 px-4 py-2 border border-lab-black-300 rounded-lg text-lab-black-700 hover:bg-lab-black-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSaveCity}
+                className="flex-1 px-4 py-2 btn-quicklab-primary"
+                disabled={!newCity.trim()}
+              >
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Filters Sidebar */}
+      {showFilters && (
+        <div className="fixed inset-0 bg-black/50 z-50" onClick={() => setShowFilters(false)}>
+          <div
+            className="absolute right-0 top-0 bottom-0 w-80 bg-white dark:bg-black shadow-2xl p-6 overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <h3 className="text-xl font-bold text-lab-black-900">Filters</h3>
+              <button
+                onClick={() => setShowFilters(false)}
+                className="text-lab-black-500 hover:text-lab-black-800"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="space-y-6">
+              {/* City */}
+              <div>
+                <label className="block text-sm font-semibold text-lab-black-900 mb-2">City</label>
+                <input
+                  type="text"
+                  value={filters.city}
+                  onChange={(e) => handleFilterChange('city', e.target.value)}
+                  placeholder="Enter city"
+                  className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                />
+              </div>
+
+              {/* Test Category */}
+              <div>
+                <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                  Test Category
+                </label>
+                <select
+                  value={filters.testCategory}
+                  onChange={(e) => handleFilterChange('testCategory', e.target.value)}
+                  className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                >
+                  <option value="">All Categories</option>
+                  {availableTestCategories().map((category) => (
+                    <option key={category} value={category}>
+                      {category.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Price Range */}
+              <div>
+                <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                  Price Range
+                </label>
+                <div className="grid grid-cols-2 gap-2">
+                  <input
+                    type="number"
+                    value={filters.minPrice}
+                    onChange={(e) => handleFilterChange('minPrice', e.target.value)}
+                    placeholder="Min"
+                    className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                  />
+                  <input
+                    type="number"
+                    value={filters.maxPrice}
+                    onChange={(e) => handleFilterChange('maxPrice', e.target.value)}
+                    placeholder="Max"
+                    className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                  />
+                </div>
+              </div>
+
+              {/* Home Collection */}
+              <div>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={filters.homeCollection === 'true'}
+                    onChange={(e) =>
+                      handleFilterChange('homeCollection', e.target.checked ? 'true' : '')
+                    }
+                    className="w-4 h-4 text-lab-yellow-600 border-lab-black-300 rounded focus:ring-lab-yellow-500"
+                  />
+                  <span className="text-sm font-medium text-lab-black-900">
+                    Home Collection Available
+                  </span>
+                </label>
+              </div>
+
+              {/* Sort */}
+              <div>
+                <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                  Sort By
+                </label>
+                <select
+                  value={filters.sort}
+                  onChange={(e) => handleFilterChange('sort', e.target.value)}
+                  className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                >
+                  <option value="rating_desc">Highest Rated</option>
+                  <option value="rating_asc">Lowest Rated</option>
+                  <option value="name_asc">Name (A-Z)</option>
+                  <option value="name_desc">Name (Z-A)</option>
+                </select>
+              </div>
+
+              {/* Clear Filters */}
+              <button onClick={clearFilters} className="w-full btn-quicklab-secondary py-2">
+                Clear All Filters
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Results */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {loading ? (
+          <div className="text-center py-12">
+            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-lab-yellow-600" />
+            <p className="mt-4 text-lab-black-600">Searching labs...</p>
+          </div>
+        ) : labs.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-xl text-lab-black-600">No labs found</p>
+            <p className="text-lab-black-500 mt-2">Try adjusting your search criteria</p>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center justify-between mb-6">
+              <p className="text-lab-black-700">
+                Found <strong>{pagination.total}</strong> labs
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {labs.map((lab) => (
+                <div
+                  key={lab._id}
+                  onClick={() => handleLabClick(lab._id)}
+                  className="card-quicklab bg-white border border-lab-black-100 hover:shadow-lg transition-shadow cursor-pointer"
+                >
+                  {/* Lab Logo */}
+                  {lab.logo && (
+                    <img
+                      src={lab.logo}
+                      alt={lab.name}
+                      className="w-full h-48 object-cover rounded-t-lg"
+                    />
+                  )}
+
+                  <div className="p-4">
+                    <h3 className="text-lg font-bold text-lab-black-900 mb-2">{lab.name}</h3>
+
+                    {/* Rating */}
+                    {lab.ratings?.average > 0 && (
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="flex items-center gap-1">
+                          <Star className="w-4 h-4 fill-lab-yellow-500 text-lab-yellow-500" />
+                          <span className="text-sm font-semibold text-lab-black-900">
+                            {lab.ratings.average.toFixed(1)}
+                          </span>
+                        </div>
+                        <span className="text-xs text-lab-black-600">
+                          ({lab.ratings.count} reviews)
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Address */}
+                    {lab.address && (
+                      <div className="flex items-start gap-2 mb-2 text-sm text-lab-black-600">
+                        <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                        <span>
+                          {lab.address.city && `${lab.address.city}, `}
+                          {lab.address.state}
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Contact */}
+                    {lab.contact?.phone && (
+                      <div className="flex items-center gap-2 mb-2 text-sm text-lab-black-600">
+                        <Phone className="w-4 h-4" />
+                        <span>{lab.contact.phone}</span>
+                      </div>
+                    )}
+
+                    {/* Tests Count */}
+                    {lab.tests && lab.tests.length > 0 && (
+                      <div className="mt-3 pt-3 border-t border-lab-black-100">
+                        <p className="text-sm text-lab-black-700">
+                          <strong>{lab.tests.length}</strong> tests available
+                        </p>
+                      </div>
+                    )}
+
+                    {/* Home Collection Badge */}
+                    {lab.generalHomeCollectionFee !== undefined && (
+                      <div className="mt-2">
+                        <span className="inline-flex items-center gap-1 px-2 py-1 bg-lab-yellow-100 text-lab-yellow-800 text-xs font-medium rounded">
+                          <Home className="w-3 h-3" />
+                          Home Collection
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {pagination.pages > 1 && (
+              <div className="flex justify-center gap-2 mt-8">
+                <button
+                  onClick={() =>
+                    setPagination((prev) => ({ ...prev, page: Math.max(1, prev.page - 1) }))
+                  }
+                  disabled={pagination.page === 1}
+                  className="btn-quicklab-secondary px-4 py-2 disabled:opacity-50"
+                >
+                  Previous
+                </button>
+                <span className="flex items-center px-4 text-lab-black-700">
+                  Page {pagination.page} of {pagination.pages}
+                </span>
+                <button
+                  onClick={() =>
+                    setPagination((prev) => ({
+                      ...prev,
+                      page: Math.min(prev.pages, prev.page + 1),
+                    }))
+                  }
+                  disabled={pagination.page === pagination.pages}
+                  className="btn-quicklab-secondary px-4 py-2 disabled:opacity-50"
+                >
+                  Next
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

From 2bbc33ec068b78034c0c94bbfc1441fb20d95768 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 15:15:44 +0530
Subject: [PATCH 25/44] feat(quicklab): add lab details page with test
 selection and booking

---
 client/src/pages/quicklab/LabDetails.jsx | 610 +++++++++++++++++++++++
 1 file changed, 610 insertions(+)
 create mode 100644 client/src/pages/quicklab/LabDetails.jsx

diff --git a/client/src/pages/quicklab/LabDetails.jsx b/client/src/pages/quicklab/LabDetails.jsx
new file mode 100644
index 0000000..f7e0eb8
--- /dev/null
+++ b/client/src/pages/quicklab/LabDetails.jsx
@@ -0,0 +1,610 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+  MapPin,
+  Phone,
+  Mail,
+  Globe,
+  Star,
+  Clock,
+  Home,
+  ArrowLeft,
+  Calendar,
+  FileText,
+  CheckCircle,
+  AlertCircle,
+} from 'lucide-react';
+import { getLabById, bookLabAppointment } from '../../service/labService';
+import { getPatientPrescriptions } from '../../service/prescriptionApiSevice';
+import { useAuth } from '../../context/authContext';
+import { toast } from 'react-toastify';
+import '../../quicklab.css';
+
+export default function LabDetails() {
+  const { labId } = useParams();
+  const navigate = useNavigate();
+  const { user, isAuthenticated } = useAuth();
+
+  const [lab, setLab] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [recommendedTests, setRecommendedTests] = useState([]);
+  const [showBookingModal, setShowBookingModal] = useState(false);
+  const [selectedTests, setSelectedTests] = useState([]);
+  const [bookingData, setBookingData] = useState({
+    appointmentDate: '',
+    appointmentTime: '',
+    collectionType: 'lab_visit',
+    collectionAddress: '',
+    notes: '',
+  });
+  const [booking, setBooking] = useState(false);
+
+  useEffect(() => {
+    fetchLabDetails();
+    if (isAuthenticated && user?.role === 'patient') {
+      fetchRecommendedTests();
+    }
+  }, [labId, isAuthenticated, user]);
+
+  const fetchLabDetails = async () => {
+    try {
+      setLoading(true);
+      const response = await getLabById(labId);
+      setLab(response.data);
+    } catch (err) {
+      console.error('Failed to fetch lab details:', err);
+      toast.error('Failed to load lab details');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchRecommendedTests = async () => {
+    try {
+      const response = await getPatientPrescriptions();
+      if (response.prescriptions && response.prescriptions.length > 0) {
+        // Get tests from most recent prescriptions (last 30 days)
+        const thirtyDaysAgo = new Date();
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+
+        const recentPrescriptions = response.prescriptions.filter(
+          (p) => new Date(p.date) >= thirtyDaysAgo
+        );
+
+        const testsFromPrescriptions = recentPrescriptions.flatMap((p) =>
+          (p.tests || []).map((test) => ({
+            name: test.name,
+            instructions: test.instructions,
+            prescriptionDate: p.date,
+            doctorName: p.doctorId ? `${p.doctorId.firstName} ${p.doctorId.lastName}` : 'Unknown',
+          }))
+        );
+
+        setRecommendedTests(testsFromPrescriptions);
+      }
+    } catch (err) {
+      console.error('Failed to fetch prescriptions:', err);
+    }
+  };
+
+  const handleTestSelection = (test) => {
+    setSelectedTests((prev) => {
+      const exists = prev.find((t) => t._id === test._id);
+      if (exists) {
+        return prev.filter((t) => t._id !== test._id);
+      } else {
+        return [...prev, test];
+      }
+    });
+  };
+
+  const handleBookAppointment = () => {
+    if (!isAuthenticated) {
+      toast.error('Please login to book an appointment');
+      navigate('/login');
+      return;
+    }
+
+    if (user?.role !== 'patient') {
+      toast.error('Only patients can book lab appointments');
+      return;
+    }
+
+    if (selectedTests.length === 0) {
+      toast.error('Please select at least one test');
+      return;
+    }
+
+    setShowBookingModal(true);
+  };
+
+  const submitBooking = async (e) => {
+    e.preventDefault();
+
+    if (!bookingData.appointmentDate || !bookingData.appointmentTime) {
+      toast.error('Please select date and time');
+      return;
+    }
+
+    try {
+      setBooking(true);
+      await bookLabAppointment({
+        labId: labId,
+        tests: selectedTests.map((t) => t._id),
+        collectionType: bookingData.collectionType,
+        appointmentDate: bookingData.appointmentDate,
+        appointmentTime: bookingData.appointmentTime,
+        collectionAddress:
+          bookingData.collectionType === 'home_collection'
+            ? bookingData.collectionAddress
+            : undefined,
+        notes: bookingData.notes,
+      });
+
+      toast.success('Appointment booked successfully!');
+      setShowBookingModal(false);
+      setSelectedTests([]);
+      setBookingData({
+        appointmentDate: '',
+        appointmentTime: '',
+        collectionType: 'lab_visit',
+        collectionAddress: '',
+        notes: '',
+      });
+    } catch (err) {
+      console.error('Booking failed:', err);
+      toast.error(err.message || 'Failed to book appointment');
+    } finally {
+      setBooking(false);
+    }
+  };
+
+  const calculateTotal = () => {
+    const testsTotal = selectedTests.reduce((sum, test) => sum + (test.price || 0), 0);
+    const homeCollectionFee =
+      bookingData.collectionType === 'home_collection' && lab?.generalHomeCollectionFee
+        ? lab.generalHomeCollectionFee
+        : 0;
+    return testsTotal + homeCollectionFee;
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-lab-yellow-600" />
+          <p className="mt-4 text-lab-black-600">Loading lab details...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!lab) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-xl text-lab-black-900">Lab not found</p>
+          <button
+            onClick={() => navigate('/quick-lab')}
+            className="btn-quicklab-primary mt-4 px-6 py-2"
+          >
+            Back to Search
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Back Button */}
+        <button
+          onClick={() => navigate(-1)}
+          className="flex items-center gap-2 text-lab-black-600 hover:text-lab-black-900 mb-6"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          Back
+        </button>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Lab Details - Left Side */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Header Card */}
+            <div className="card-quicklab bg-white border border-lab-black-100">
+              {lab.logo && (
+                <img
+                  src={lab.logo}
+                  alt={lab.name}
+                  className="w-full h-64 object-cover rounded-t-lg"
+                />
+              )}
+
+              <div className="p-6">
+                <h1 className="text-3xl font-bold text-lab-black-900 mb-2">{lab.name}</h1>
+
+                {/* Rating */}
+                {lab.ratings?.average > 0 && (
+                  <div className="flex items-center gap-2 mb-4">
+                    <div className="flex items-center gap-1">
+                      <Star className="w-5 h-5 fill-lab-yellow-500 text-lab-yellow-500" />
+                      <span className="text-lg font-semibold text-lab-black-900">
+                        {lab.ratings.average.toFixed(1)}
+                      </span>
+                    </div>
+                    <span className="text-sm text-lab-black-600">
+                      ({lab.ratings.count} reviews)
+                    </span>
+                  </div>
+                )}
+
+                {lab.description && <p className="text-lab-black-700 mb-4">{lab.description}</p>}
+
+                {/* Contact Info */}
+                <div className="space-y-3 border-t border-lab-black-100 pt-4">
+                  {lab.address && (
+                    <div className="flex items-start gap-3">
+                      <MapPin className="w-5 h-5 text-lab-yellow-600 mt-0.5" />
+                      <div>
+                        <p className="font-medium text-lab-black-900">Address</p>
+                        <p className="text-lab-black-700">
+                          {lab.address.formattedAddress ||
+                            `${lab.address.city}, ${lab.address.state} ${lab.address.zipCode}`}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+
+                  {lab.contact?.phone && (
+                    <div className="flex items-center gap-3">
+                      <Phone className="w-5 h-5 text-lab-yellow-600" />
+                      <div>
+                        <p className="font-medium text-lab-black-900">Phone</p>
+                        <p className="text-lab-black-700">{lab.contact.phone}</p>
+                      </div>
+                    </div>
+                  )}
+
+                  {lab.contact?.email && (
+                    <div className="flex items-center gap-3">
+                      <Mail className="w-5 h-5 text-lab-yellow-600" />
+                      <div>
+                        <p className="font-medium text-lab-black-900">Email</p>
+                        <p className="text-lab-black-700">{lab.contact.email}</p>
+                      </div>
+                    </div>
+                  )}
+
+                  {lab.contact?.website && (
+                    <div className="flex items-center gap-3">
+                      <Globe className="w-5 h-5 text-lab-yellow-600" />
+                      <div>
+                        <p className="font-medium text-lab-black-900">Website</p>
+                        <a
+                          href={lab.contact.website}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-lab-yellow-600 hover:underline"
+                        >
+                          {lab.contact.website}
+                        </a>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Home Collection */}
+                {lab.generalHomeCollectionFee !== undefined && (
+                  <div className="mt-4 p-4 bg-lab-yellow-50 rounded-lg border border-lab-yellow-200">
+                    <div className="flex items-center gap-2">
+                      <Home className="w-5 h-5 text-lab-yellow-700" />
+                      <div>
+                        <p className="font-semibold text-lab-yellow-900">
+                          Home Collection Available
+                        </p>
+                        <p className="text-sm text-lab-yellow-700">
+                          Additional fee: ₹{lab.generalHomeCollectionFee}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Recommended Tests from Prescriptions */}
+            {recommendedTests.length > 0 && (
+              <div className="card-quicklab bg-white border border-lab-black-100">
+                <div className="p-6">
+                  <div className="flex items-center gap-2 mb-4">
+                    <FileText className="w-6 h-6 text-lab-yellow-600" />
+                    <h2 className="text-xl font-bold text-lab-black-900">
+                      Recommended Tests from Your Prescriptions
+                    </h2>
+                  </div>
+
+                  <div className="space-y-3">
+                    {recommendedTests.map((test, index) => (
+                      <div
+                        key={index}
+                        className="p-4 bg-lab-yellow-50 rounded-lg border border-lab-yellow-200"
+                      >
+                        <div className="flex items-start justify-between">
+                          <div>
+                            <p className="font-semibold text-lab-black-900">{test.name}</p>
+                            {test.instructions && (
+                              <p className="text-sm text-lab-black-600 mt-1">{test.instructions}</p>
+                            )}
+                            <p className="text-xs text-lab-black-500 mt-2">
+                              Prescribed by Dr. {test.doctorName} on{' '}
+                              {new Date(test.prescriptionDate).toLocaleDateString()}
+                            </p>
+                          </div>
+                          <AlertCircle className="w-5 h-5 text-lab-yellow-600 flex-shrink-0" />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Available Tests */}
+            <div className="card-quicklab bg-white border border-lab-black-100">
+              <div className="p-6">
+                <h2 className="text-xl font-bold text-lab-black-900 mb-4">Available Tests</h2>
+
+                {lab.tests && lab.tests.length > 0 ? (
+                  <div className="space-y-4">
+                    {lab.tests
+                      .filter((test) => test.isActive !== false)
+                      .map((test) => (
+                        <div
+                          key={test._id}
+                          className={`p-4 border rounded-lg transition-all cursor-pointer ${
+                            selectedTests.find((t) => t._id === test._id)
+                              ? 'border-lab-yellow-500 bg-lab-yellow-50'
+                              : 'border-lab-black-200 hover:border-lab-yellow-300'
+                          }`}
+                          onClick={() => handleTestSelection(test)}
+                        >
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-3">
+                                <h3 className="font-semibold text-lab-black-900">
+                                  {test.testName}
+                                </h3>
+                                {selectedTests.find((t) => t._id === test._id) && (
+                                  <CheckCircle className="w-5 h-5 text-lab-yellow-600" />
+                                )}
+                              </div>
+
+                              {test.testCode && (
+                                <p className="text-sm text-lab-black-600">Code: {test.testCode}</p>
+                              )}
+
+                              {test.description && (
+                                <p className="text-sm text-lab-black-700 mt-2">
+                                  {test.description}
+                                </p>
+                              )}
+
+                              <div className="flex flex-wrap gap-3 mt-3">
+                                {test.category && (
+                                  <span className="px-2 py-1 bg-lab-black-100 text-lab-black-700 text-xs rounded">
+                                    {test.category.replace(/_/g, ' ')}
+                                  </span>
+                                )}
+
+                                {test.homeCollectionAvailable && (
+                                  <span className="px-2 py-1 bg-lab-yellow-100 text-lab-yellow-800 text-xs rounded flex items-center gap-1">
+                                    <Home className="w-3 h-3" />
+                                    Home Collection
+                                  </span>
+                                )}
+
+                                {test.reportDeliveryTime && (
+                                  <span className="px-2 py-1 bg-lab-black-100 text-lab-black-700 text-xs rounded flex items-center gap-1">
+                                    <Clock className="w-3 h-3" />
+                                    {test.reportDeliveryTime}
+                                  </span>
+                                )}
+                              </div>
+
+                              {test.preparationInstructions && (
+                                <p className="text-xs text-lab-black-600 mt-2">
+                                  <strong>Preparation:</strong> {test.preparationInstructions}
+                                </p>
+                              )}
+                            </div>
+
+                            <div className="text-right ml-4">
+                              <p className="text-2xl font-bold text-lab-yellow-600">
+                                ₹{test.price}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                ) : (
+                  <p className="text-lab-black-600">No tests available</p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Booking Summary - Right Side */}
+          <div className="lg:col-span-1">
+            <div className="card-quicklab bg-white border border-lab-black-100 sticky top-24">
+              <div className="p-6">
+                <h3 className="text-xl font-bold text-lab-black-900 mb-4">Booking Summary</h3>
+
+                {selectedTests.length > 0 ? (
+                  <>
+                    <div className="space-y-3 mb-4">
+                      {selectedTests.map((test) => (
+                        <div key={test._id} className="flex justify-between text-sm">
+                          <span className="text-lab-black-700">{test.testName}</span>
+                          <span className="font-semibold text-lab-black-900">₹{test.price}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="border-t border-lab-black-100 pt-3 mb-4">
+                      <div className="flex justify-between text-lg font-bold">
+                        <span className="text-lab-black-900">Total</span>
+                        <span className="text-lab-yellow-600">₹{calculateTotal()}</span>
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={handleBookAppointment}
+                      disabled={!isAuthenticated || user?.role !== 'patient'}
+                      className="w-full btn-quicklab-primary py-3 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {!isAuthenticated
+                        ? 'Login to Book'
+                        : user?.role !== 'patient'
+                          ? 'Patients Only'
+                          : 'Book Appointment'}
+                    </button>
+
+                    {!isAuthenticated && (
+                      <p className="text-xs text-lab-black-600 text-center mt-2">
+                        Please login as a patient to book
+                      </p>
+                    )}
+                  </>
+                ) : (
+                  <p className="text-lab-black-600 text-center py-4">
+                    Select tests to book an appointment
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Booking Modal */}
+      {showBookingModal && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-lg shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+            <div className="p-6">
+              <h3 className="text-2xl font-bold text-lab-black-900 mb-4">Book Lab Appointment</h3>
+
+              <form onSubmit={submitBooking} className="space-y-4">
+                <div>
+                  <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                    Appointment Date
+                  </label>
+                  <input
+                    type="date"
+                    value={bookingData.appointmentDate}
+                    onChange={(e) =>
+                      setBookingData((prev) => ({ ...prev, appointmentDate: e.target.value }))
+                    }
+                    min={new Date().toISOString().split('T')[0]}
+                    required
+                    className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                    Appointment Time
+                  </label>
+                  <input
+                    type="time"
+                    value={bookingData.appointmentTime}
+                    onChange={(e) =>
+                      setBookingData((prev) => ({ ...prev, appointmentTime: e.target.value }))
+                    }
+                    required
+                    className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                    Collection Type
+                  </label>
+                  <select
+                    value={bookingData.collectionType}
+                    onChange={(e) =>
+                      setBookingData((prev) => ({ ...prev, collectionType: e.target.value }))
+                    }
+                    className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                  >
+                    <option value="lab_visit">Visit Lab</option>
+                    {lab.generalHomeCollectionFee !== undefined && (
+                      <option value="home_collection">
+                        Home Collection (+₹{lab.generalHomeCollectionFee})
+                      </option>
+                    )}
+                  </select>
+                </div>
+
+                {bookingData.collectionType === 'home_collection' && (
+                  <div>
+                    <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                      Collection Address
+                    </label>
+                    <textarea
+                      value={bookingData.collectionAddress}
+                      onChange={(e) =>
+                        setBookingData((prev) => ({ ...prev, collectionAddress: e.target.value }))
+                      }
+                      rows="2"
+                      required
+                      className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                      placeholder="Enter your complete address..."
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <label className="block text-sm font-semibold text-lab-black-900 mb-2">
+                    Additional Notes (Optional)
+                  </label>
+                  <textarea
+                    value={bookingData.notes}
+                    onChange={(e) => setBookingData((prev) => ({ ...prev, notes: e.target.value }))}
+                    rows="3"
+                    className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                    placeholder="Any special instructions..."
+                  />
+                </div>
+
+                <div className="border-t border-lab-black-100 pt-4">
+                  <div className="flex justify-between text-lg font-bold mb-4">
+                    <span className="text-lab-black-900">Total Amount</span>
+                    <span className="text-lab-yellow-600">₹{calculateTotal()}</span>
+                  </div>
+                </div>
+
+                <div className="flex gap-3">
+                  <button
+                    type="button"
+                    onClick={() => setShowBookingModal(false)}
+                    className="flex-1 btn-quicklab-secondary py-2"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={booking}
+                    className="flex-1 btn-quicklab-primary py-2 disabled:opacity-50"
+                  >
+                    {booking ? 'Booking...' : 'Confirm Booking'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

From 0d307654c64b4b2154500dcaf4e0a7d5844b9142 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 15:15:50 +0530
Subject: [PATCH 26/44] feat(quicklab): add search suggestions with
 autocomplete to navbar

---
 .../src/components/quicklab/DesktopNavbar.jsx | 184 +++++++++++++++++-
 .../src/components/quicklab/MobileNavbar.jsx  | 182 ++++++++++++++++-
 2 files changed, 356 insertions(+), 10 deletions(-)

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index d0b6937..2bacb91 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -1,23 +1,123 @@
 // DesktopNavbar.jsx
-import { Search, LogOut, Users } from 'lucide-react';
+import { Search, LogOut, Users, Building2, FlaskConical } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
 import DesktopFooter from './DesktopFooter';
+import { useState, useEffect, useRef } from 'react';
+import { searchLabs } from '../../service/labService';
+
 export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
   const navigate = useNavigate();
   const { isAuthenticated, logout, user } = useAuth();
+  const [suggestions, setSuggestions] = useState([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const searchRef = useRef(null);
+  const debounceTimeout = useRef(null);
 
   const handleLogout = async () => {
     await logout();
     navigate('/', { replace: true });
   };
+
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (searchRef.current && !searchRef.current.contains(event.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Fetch suggestions as user types
+  useEffect(() => {
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
+
+    if (searchQuery.trim().length < 2) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+
+    debounceTimeout.current = setTimeout(async () => {
+      try {
+        setLoading(true);
+        const response = await searchLabs({ query: searchQuery.trim(), limit: 5 });
+        const labs = response.data || [];
+
+        // Extract unique tests from labs
+        const testsMap = new Map();
+        labs.forEach((lab) => {
+          if (lab.tests) {
+            lab.tests.forEach((test) => {
+              if (
+                test.testName &&
+                test.testName.toLowerCase().includes(searchQuery.toLowerCase())
+              ) {
+                testsMap.set(test.testName, { ...test, labId: lab._id, labName: lab.name });
+              }
+            });
+          }
+        });
+
+        const uniqueTests = Array.from(testsMap.values()).slice(0, 5);
+
+        setSuggestions({
+          labs: labs.slice(0, 3),
+          tests: uniqueTests,
+        });
+        setShowSuggestions(true);
+      } catch (err) {
+        console.error('Failed to fetch suggestions:', err);
+        setSuggestions({ labs: [], tests: [] });
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+
+    return () => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+    };
+  }, [searchQuery]);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setShowSuggestions(false);
+    if (searchQuery.trim()) {
+      navigate(`/quick-lab/search?query=${encodeURIComponent(searchQuery.trim())}`);
+    } else {
+      navigate('/quick-lab/search');
+    }
+  };
+
+  const handleLabClick = (labId) => {
+    setShowSuggestions(false);
+    setSearchQuery('');
+    navigate(`/quick-lab/lab/${labId}`);
+  };
+
+  const handleTestClick = (test) => {
+    setShowSuggestions(false);
+    setSearchQuery('');
+    navigate(`/quick-lab/lab/${test.labId}`);
+  };
+
   return (
     <nav className="hidden lg:block sticky top-0 z-50 bg-white dark:bg-black border-b border-slate-200 dark:border-slate-800 shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
-          <div className="flex items-center space-x-2">
+          <div
+            className="flex items-center space-x-2 cursor-pointer"
+            onClick={() => navigate('/quick-lab')}
+          >
             <div className="text-2xl font-bold">
               <span className="text-slate-900 dark:text-slate-50">Quick</span>
               <span className="text-yellow-500 dark:text-yellow-400">Labs</span>
@@ -25,7 +125,7 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
           </div>
 
           {/* Search Bar */}
-          <div className="flex-1 max-w-xl mx-8">
+          <form onSubmit={handleSearch} className="flex-1 max-w-xl mx-8" ref={searchRef}>
             <div className="relative">
               <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                 <Search className="h-5 w-5 text-slate-500 dark:text-slate-400" />
@@ -34,11 +134,85 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
                 type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search labs..."
+                onFocus={() => searchQuery.trim().length >= 2 && setShowSuggestions(true)}
+                placeholder="Search labs or tests..."
                 className="block w-full pl-10 pr-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-50 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:border-transparent transition-all"
               />
+
+              {/* Suggestions Dropdown */}
+              {showSuggestions &&
+                (suggestions.labs?.length > 0 || suggestions.tests?.length > 0) && (
+                  <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg shadow-2xl max-h-96 overflow-y-auto z-50">
+                    {/* Labs Section */}
+                    {suggestions.labs?.length > 0 && (
+                      <div className="p-2">
+                        <p className="px-3 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">
+                          Labs
+                        </p>
+                        {suggestions.labs.map((lab) => (
+                          <button
+                            key={lab._id}
+                            type="button"
+                            onClick={() => handleLabClick(lab._id)}
+                            className="w-full text-left px-3 py-2 hover:bg-yellow-50 dark:hover:bg-slate-800 rounded-lg transition-colors"
+                          >
+                            <div className="flex items-start gap-3">
+                              <Building2 className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" />
+                              <div className="flex-1 min-w-0">
+                                <p className="font-semibold text-slate-900 dark:text-slate-100 truncate">
+                                  {lab.name}
+                                </p>
+                                {lab.address?.city && (
+                                  <p className="text-sm text-slate-600 dark:text-slate-400">
+                                    {lab.address.city}, {lab.address.state}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Tests Section */}
+                    {suggestions.tests?.length > 0 && (
+                      <div className="p-2 border-t border-slate-200 dark:border-slate-700">
+                        <p className="px-3 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">
+                          Tests
+                        </p>
+                        {suggestions.tests.map((test, index) => (
+                          <button
+                            key={`${test.labId}-${index}`}
+                            type="button"
+                            onClick={() => handleTestClick(test)}
+                            className="w-full text-left px-3 py-2 hover:bg-yellow-50 dark:hover:bg-slate-800 rounded-lg transition-colors"
+                          >
+                            <div className="flex items-start gap-3">
+                              <FlaskConical className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" />
+                              <div className="flex-1 min-w-0">
+                                <p className="font-semibold text-slate-900 dark:text-slate-100 truncate">
+                                  {test.testName}
+                                </p>
+                                <p className="text-sm text-slate-600 dark:text-slate-400">
+                                  at {test.labName} • ₹{test.price}
+                                </p>
+                              </div>
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Loading State */}
+                    {loading && (
+                      <div className="p-4 text-center text-sm text-slate-500 dark:text-slate-400">
+                        Searching...
+                      </div>
+                    )}
+                  </div>
+                )}
             </div>
-          </div>
+          </form>
 
           {/* Right Side Actions */}
           <div className="flex items-center space-x-4">
diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index a672264..f56c6f1 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -1,31 +1,130 @@
 // MobileNavbar.jsx
-import { Search, Home, BookOpen, User, LogOut, Users } from 'lucide-react';
+import { Search, Home, BookOpen, User, LogOut, Users, Building2, FlaskConical } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
+import { useState, useEffect, useRef } from 'react';
+import { searchLabs } from '../../service/labService';
 
 export default function MobileNavbar({ searchQuery, setSearchQuery }) {
   const navigate = useNavigate();
   const { isAuthenticated, logout, user } = useAuth();
+  const [suggestions, setSuggestions] = useState([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const searchRef = useRef(null);
+  const debounceTimeout = useRef(null);
 
   const handleLogout = async () => {
     await logout();
     navigate('/', { replace: true });
   };
+
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (searchRef.current && !searchRef.current.contains(event.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Fetch suggestions as user types
+  useEffect(() => {
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
+
+    if (searchQuery.trim().length < 2) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+
+    debounceTimeout.current = setTimeout(async () => {
+      try {
+        setLoading(true);
+        const response = await searchLabs({ query: searchQuery.trim(), limit: 5 });
+        const labs = response.data || [];
+
+        // Extract unique tests from labs
+        const testsMap = new Map();
+        labs.forEach((lab) => {
+          if (lab.tests) {
+            lab.tests.forEach((test) => {
+              if (
+                test.testName &&
+                test.testName.toLowerCase().includes(searchQuery.toLowerCase())
+              ) {
+                testsMap.set(test.testName, { ...test, labId: lab._id, labName: lab.name });
+              }
+            });
+          }
+        });
+
+        const uniqueTests = Array.from(testsMap.values()).slice(0, 5);
+
+        setSuggestions({
+          labs: labs.slice(0, 3),
+          tests: uniqueTests,
+        });
+        setShowSuggestions(true);
+      } catch (err) {
+        console.error('Failed to fetch suggestions:', err);
+        setSuggestions({ labs: [], tests: [] });
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+
+    return () => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+    };
+  }, [searchQuery]);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setShowSuggestions(false);
+    if (searchQuery.trim()) {
+      navigate(`/quick-lab/search?query=${encodeURIComponent(searchQuery.trim())}`);
+    } else {
+      navigate('/quick-lab/search');
+    }
+  };
+
+  const handleLabClick = (labId) => {
+    setShowSuggestions(false);
+    setSearchQuery('');
+    navigate(`/quick-lab/lab/${labId}`);
+  };
+
+  const handleTestClick = (test) => {
+    setShowSuggestions(false);
+    setSearchQuery('');
+    navigate(`/quick-lab/lab/${test.labId}`);
+  };
+
   return (
     <>
       {/* Top Bar - Search Only */}
       <div className="lg:hidden fixed top-0 left-0 right-0 z-50 bg-white dark:bg-black border-b border-slate-200 dark:border-slate-800 shadow-sm">
         <div className="px-4 py-3">
           {/* Logo */}
-          <div className="flex items-center space-x-3 mb-2">
+          <div
+            className="flex items-center space-x-3 mb-2 cursor-pointer"
+            onClick={() => navigate('/quick-lab')}
+          >
             <div className="text-xl font-bold whitespace-nowrap">
               <span className="text-slate-900 dark:text-slate-50">Quick</span>
               <span className="text-yellow-500 dark:text-yellow-400">Labs</span>
             </div>
           </div>
 
-          <div className="relative">
+          <form onSubmit={handleSearch} className="relative" ref={searchRef}>
             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
               <Search className="h-5 w-5 text-slate-500 dark:text-slate-400" />
             </div>
@@ -33,10 +132,83 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search labs..."
+              onFocus={() => searchQuery.trim().length >= 2 && setShowSuggestions(true)}
+              placeholder="Search labs or tests..."
               className="block w-full pl-10 pr-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-50 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:border-transparent transition-all"
             />
-          </div>
+
+            {/* Suggestions Dropdown */}
+            {showSuggestions && (suggestions.labs?.length > 0 || suggestions.tests?.length > 0) && (
+              <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg shadow-2xl max-h-80 overflow-y-auto z-50">
+                {/* Labs Section */}
+                {suggestions.labs?.length > 0 && (
+                  <div className="p-2">
+                    <p className="px-3 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">
+                      Labs
+                    </p>
+                    {suggestions.labs.map((lab) => (
+                      <button
+                        key={lab._id}
+                        type="button"
+                        onClick={() => handleLabClick(lab._id)}
+                        className="w-full text-left px-3 py-2 hover:bg-yellow-50 dark:hover:bg-slate-800 rounded-lg transition-colors active:scale-95"
+                      >
+                        <div className="flex items-start gap-3">
+                          <Building2 className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" />
+                          <div className="flex-1 min-w-0">
+                            <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm truncate">
+                              {lab.name}
+                            </p>
+                            {lab.address?.city && (
+                              <p className="text-xs text-slate-600 dark:text-slate-400">
+                                {lab.address.city}, {lab.address.state}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+                {/* Tests Section */}
+                {suggestions.tests?.length > 0 && (
+                  <div className="p-2 border-t border-slate-200 dark:border-slate-700">
+                    <p className="px-3 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">
+                      Tests
+                    </p>
+                    {suggestions.tests.map((test, index) => (
+                      <button
+                        key={`${test.labId}-${index}`}
+                        type="button"
+                        onClick={() => handleTestClick(test)}
+                        className="w-full text-left px-3 py-2 hover:bg-yellow-50 dark:hover:bg-slate-800 rounded-lg transition-colors active:scale-95"
+                      >
+                        <div className="flex items-start gap-3">
+                          <FlaskConical className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" />
+                          <div className="flex-1 min-w-0">
+                            <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm truncate">
+                              {test.testName}
+                            </p>
+                            <p className="text-xs text-slate-600 dark:text-slate-400">
+                              at {test.labName} • ₹{test.price}
+                            </p>
+                          </div>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+                {/* Loading State */}
+                {loading && (
+                  <div className="p-4 text-center text-sm text-slate-500 dark:text-slate-400">
+                    Searching...
+                  </div>
+                )}
+              </div>
+            )}
+          </form>
         </div>
       </div>
 

From 1c63098abaf204e8697ffa1145788028d5dcaa5c Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sat, 20 Dec 2025 15:15:55 +0530
Subject: [PATCH 27/44] feat(quicklab): add routes for search and lab details
 pages

---
 client/src/routes/QuickLabRoutes.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index ebdf724..6242d24 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -1,6 +1,8 @@
 import { Routes, Route } from 'react-router-dom';
 import Navbar from '../components/quicklab/Navbar';
 import QuickLabHomepage from '../pages/quicklab/Homepage';
+import LabSearchResults from '../pages/quicklab/LabSearchResults';
+import LabDetails from '../pages/quicklab/LabDetails';
 import LabAdminProfileComplete from '../pages/quicklab/LabAdminProfileComplete';
 import LabAdminAddLab from '../pages/quicklab/LabAdminAddLab';
 import LabAdminDashboard from '../pages/quicklab/LabAdminDashboard';
@@ -114,8 +116,13 @@ export default function QuickLabRoutes() {
         {/* ============ PUBLIC ROUTES ============ */}
 
         {/* Public homepage */}
-        <Route path="/" element={<QuickLabHomepage />} />
-        <Route path="*" element={<QuickLabHomepage />} />
+        <Route path="/quick-lab" element={<QuickLabHomepage />} />
+
+        {/* Lab Search Results */}
+        <Route path="/quick-lab/search" element={<LabSearchResults />} />
+
+        {/* Lab Details */}
+        <Route path="/quick-lab/lab/:labId" element={<LabDetails />} />
       </Routes>
     </>
   );

From 2a63c0b11fe99410153c49f4282650dfd999c932 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:09:16 +0530
Subject: [PATCH 28/44] fix(backend): convert sampleType to lowercase and
 remove dynamic import

- Convert sampleType to lowercase in addTest and updateTest functions
- Remove unnecessary dynamic Lab model import in addTest
- Fixes validation error when saving test data with capital letters
---
 server/Controllers/QuickLab/labAdminController.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/server/Controllers/QuickLab/labAdminController.js b/server/Controllers/QuickLab/labAdminController.js
index 82d2f4c..ac696a0 100644
--- a/server/Controllers/QuickLab/labAdminController.js
+++ b/server/Controllers/QuickLab/labAdminController.js
@@ -315,6 +315,11 @@ export const updateTest = async (req, res) => {
     const { testId } = req.params;
     const updates = req.body;
 
+    // Convert sampleType to lowercase if provided
+    if (updates.sampleType) {
+      updates.sampleType = updates.sampleType.toLowerCase();
+    }
+
     const labAdmin = await LabAdmin.findById(profileId);
     if (!labAdmin || !labAdmin.labId) {
       return res.status(400).json({ message: 'Lab admin not associated with any lab' });
@@ -427,7 +432,7 @@ export const addTest = async (req, res) => {
       description,
       price,
       preparationInstructions,
-      sampleType,
+      sampleType: sampleType ? sampleType.toLowerCase() : undefined,
       homeCollectionAvailable: canBeHomeCollected,
       homeCollectionFee: homeCollectionFee || 0,
       reportDeliveryTime,
@@ -436,7 +441,6 @@ export const addTest = async (req, res) => {
       isActive: true,
     };
 
-    const Lab = (await import('../models/Lab/Lab.js')).default;
     const lab = await Lab.findByIdAndUpdate(
       labAdmin.labId,
       { $push: { tests: testData } },

From a1f5734629ec74e7e9b46c4c59da91af3960a214 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:09:36 +0530
Subject: [PATCH 29/44] fix(backend): correct import paths for Lab models

- Fix LabAdmin import path from '../models/Users/' to '../../models/Lab/'
- Fix LabStaff import path from '../models/Users/' to '../../models/Lab/'
- Resolves 500 error in getLabAppointments endpoint
---
 server/Controllers/QuickLab/labAppointmentController.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/Controllers/QuickLab/labAppointmentController.js b/server/Controllers/QuickLab/labAppointmentController.js
index 64a3b2e..d4b3977 100644
--- a/server/Controllers/QuickLab/labAppointmentController.js
+++ b/server/Controllers/QuickLab/labAppointmentController.js
@@ -265,14 +265,14 @@ export const getLabAppointments = async (req, res) => {
     let labId;
 
     if (role === 'lab_admin') {
-      const LabAdmin = (await import('../models/Users/LabAdmin.js')).default;
+      const LabAdmin = (await import('../../models/Lab/LabAdmin.js')).default;
       const labAdmin = await LabAdmin.findById(profileId);
       if (!labAdmin || !labAdmin.labId) {
         return res.status(400).json({ message: 'Lab admin not associated with any lab' });
       }
       labId = labAdmin.labId;
     } else if (role === 'lab_staff') {
-      const LabStaff = (await import('../models/Users/LabStaff.js')).default;
+      const LabStaff = (await import('../../models/Lab/LabStaff.js')).default;
       const staff = await LabStaff.findById(profileId);
       if (!staff) {
         return res.status(404).json({ message: 'Staff not found' });

From 0cb83e6f268383616422f45ad8b72f339f059fa2 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:09:59 +0530
Subject: [PATCH 30/44] feat(quicklab): add structured address collection for
 lab appointments

- Replace single textarea with structured address fields
- Add fields: street, city, state, zipCode, country
- Default country to 'India'
- Fixes address not being saved to database issue
---
 client/src/pages/quicklab/LabDetails.jsx | 114 +++++++++++++++++++----
 1 file changed, 98 insertions(+), 16 deletions(-)

diff --git a/client/src/pages/quicklab/LabDetails.jsx b/client/src/pages/quicklab/LabDetails.jsx
index f7e0eb8..0bdeaee 100644
--- a/client/src/pages/quicklab/LabDetails.jsx
+++ b/client/src/pages/quicklab/LabDetails.jsx
@@ -34,7 +34,13 @@ export default function LabDetails() {
     appointmentDate: '',
     appointmentTime: '',
     collectionType: 'lab_visit',
-    collectionAddress: '',
+    collectionAddress: {
+      street: '',
+      city: '',
+      state: '',
+      zipCode: '',
+      country: 'India',
+    },
     notes: '',
   });
   const [booking, setBooking] = useState(false);
@@ -148,7 +154,13 @@ export default function LabDetails() {
         appointmentDate: '',
         appointmentTime: '',
         collectionType: 'lab_visit',
-        collectionAddress: '',
+        collectionAddress: {
+          street: '',
+          city: '',
+          state: '',
+          zipCode: '',
+          country: 'India',
+        },
         notes: '',
       });
     } catch (err) {
@@ -547,20 +559,90 @@ export default function LabDetails() {
                 </div>
 
                 {bookingData.collectionType === 'home_collection' && (
-                  <div>
-                    <label className="block text-sm font-semibold text-lab-black-900 mb-2">
-                      Collection Address
-                    </label>
-                    <textarea
-                      value={bookingData.collectionAddress}
-                      onChange={(e) =>
-                        setBookingData((prev) => ({ ...prev, collectionAddress: e.target.value }))
-                      }
-                      rows="2"
-                      required
-                      className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
-                      placeholder="Enter your complete address..."
-                    />
+                  <div className="space-y-3">
+                    <h4 className="text-sm font-semibold text-lab-black-900">Collection Address</h4>
+
+                    <div>
+                      <input
+                        type="text"
+                        value={bookingData.collectionAddress.street}
+                        onChange={(e) =>
+                          setBookingData((prev) => ({
+                            ...prev,
+                            collectionAddress: {
+                              ...prev.collectionAddress,
+                              street: e.target.value,
+                            },
+                          }))
+                        }
+                        required
+                        className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                        placeholder="Street Address *"
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                      <input
+                        type="text"
+                        value={bookingData.collectionAddress.city}
+                        onChange={(e) =>
+                          setBookingData((prev) => ({
+                            ...prev,
+                            collectionAddress: { ...prev.collectionAddress, city: e.target.value },
+                          }))
+                        }
+                        required
+                        className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                        placeholder="City *"
+                      />
+                      <input
+                        type="text"
+                        value={bookingData.collectionAddress.state}
+                        onChange={(e) =>
+                          setBookingData((prev) => ({
+                            ...prev,
+                            collectionAddress: { ...prev.collectionAddress, state: e.target.value },
+                          }))
+                        }
+                        required
+                        className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                        placeholder="State *"
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                      <input
+                        type="text"
+                        value={bookingData.collectionAddress.zipCode}
+                        onChange={(e) =>
+                          setBookingData((prev) => ({
+                            ...prev,
+                            collectionAddress: {
+                              ...prev.collectionAddress,
+                              zipCode: e.target.value,
+                            },
+                          }))
+                        }
+                        required
+                        className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                        placeholder="Zip Code *"
+                      />
+                      <input
+                        type="text"
+                        value={bookingData.collectionAddress.country}
+                        onChange={(e) =>
+                          setBookingData((prev) => ({
+                            ...prev,
+                            collectionAddress: {
+                              ...prev.collectionAddress,
+                              country: e.target.value,
+                            },
+                          }))
+                        }
+                        className="w-full p-2 border border-lab-black-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                        placeholder="Country"
+                      />
+                    </div>
                   </div>
                 )}
 

From 6c48cfd9f861088f0965c0ede1b827db67694931 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:10:29 +0530
Subject: [PATCH 31/44] feat(quicklab): add lab admin appointments management
 page

- Create comprehensive appointment management interface
- Features: search, filters (status/type/date), summary cards
- Staff assignment modal for home collection appointments
- Status update modal with all available statuses
- Display home collection addresses with proper formatting
- Full dark mode support with transition-colors
---
 .../pages/quicklab/LabAdminAppointments.jsx   | 604 ++++++++++++++++++
 1 file changed, 604 insertions(+)
 create mode 100644 client/src/pages/quicklab/LabAdminAppointments.jsx

diff --git a/client/src/pages/quicklab/LabAdminAppointments.jsx b/client/src/pages/quicklab/LabAdminAppointments.jsx
new file mode 100644
index 0000000..e7ae76b
--- /dev/null
+++ b/client/src/pages/quicklab/LabAdminAppointments.jsx
@@ -0,0 +1,604 @@
+import { useEffect, useState } from 'react';
+import {
+  Calendar,
+  Clock,
+  User,
+  MapPin,
+  Phone,
+  FileText,
+  Filter,
+  X,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Home,
+  Building2,
+  ChevronDown,
+  Search,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import {
+  getLabAppointments,
+  assignStaffForCollection,
+  updateLabAppointmentStatus,
+} from '../../service/labAppointmentService';
+import { getLabStaff } from '../../service/labAdminService';
+import '../../quicklab.css';
+
+export default function LabAdminAppointments() {
+  const [appointments, setAppointments] = useState([]);
+  const [filteredAppointments, setFilteredAppointments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [staff, setStaff] = useState([]);
+  const [showFilters, setShowFilters] = useState(false);
+  const [selectedAppointment, setSelectedAppointment] = useState(null);
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [showStatusModal, setShowStatusModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const [filters, setFilters] = useState({
+    status: '',
+    collectionType: '',
+    date: '',
+  });
+
+  const [summary, setSummary] = useState({
+    total: 0,
+    pending: 0,
+    confirmed: 0,
+    completed: 0,
+    cancelled: 0,
+    homeCollection: 0,
+    visitLab: 0,
+  });
+
+  const statusColors = {
+    pending:
+      'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',
+    confirmed:
+      'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400 border-blue-200 dark:border-blue-800',
+    sample_collected:
+      'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-400 border-purple-200 dark:border-purple-800',
+    processing:
+      'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-400 border-indigo-200 dark:border-indigo-800',
+    completed:
+      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 border-green-200 dark:border-green-800',
+    cancelled:
+      'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400 border-red-200 dark:border-red-800',
+  };
+
+  const statusOptions = [
+    { value: 'pending', label: 'Pending', icon: AlertCircle },
+    { value: 'confirmed', label: 'Confirmed', icon: CheckCircle },
+    { value: 'sample_collected', label: 'Sample Collected', icon: FileText },
+    { value: 'processing', label: 'Processing', icon: Clock },
+    { value: 'completed', label: 'Completed', icon: CheckCircle },
+    { value: 'cancelled', label: 'Cancelled', icon: XCircle },
+  ];
+
+  useEffect(() => {
+    fetchAppointments();
+    fetchStaff();
+  }, [filters.status, filters.collectionType, filters.date]);
+
+  useEffect(() => {
+    applyFilters();
+  }, [appointments, searchQuery]);
+
+  const fetchAppointments = async () => {
+    try {
+      setLoading(true);
+      const params = {};
+      if (filters.status) params.status = filters.status;
+      if (filters.collectionType) params.collectionType = filters.collectionType;
+      if (filters.date) params.date = filters.date;
+
+      const response = await getLabAppointments(params);
+      const data = response.data || response;
+      setAppointments(data.appointments || []);
+      calculateSummary(data.appointments || []);
+    } catch (error) {
+      console.error('Failed to fetch appointments:', error);
+      toast.error('Failed to load appointments');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchStaff = async () => {
+    try {
+      const response = await getLabStaff();
+      const data = response.data || response;
+      setStaff(data.staff || []);
+    } catch (error) {
+      console.error('Failed to fetch staff:', error);
+      toast.error('Failed to load staff list');
+    }
+  };
+
+  const calculateSummary = (appts) => {
+    const sum = {
+      total: appts.length,
+      pending: appts.filter((a) => a.status === 'pending').length,
+      confirmed: appts.filter((a) => a.status === 'confirmed').length,
+      completed: appts.filter((a) => a.status === 'completed').length,
+      cancelled: appts.filter((a) => a.status === 'cancelled').length,
+      homeCollection: appts.filter((a) => a.collectionType === 'home_collection').length,
+      visitLab: appts.filter((a) => a.collectionType === 'visit_lab').length,
+    };
+    setSummary(sum);
+  };
+
+  const applyFilters = () => {
+    let filtered = [...appointments];
+
+    // Search filter
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (apt) =>
+          apt.patientId?.firstName?.toLowerCase().includes(query) ||
+          apt.patientId?.lastName?.toLowerCase().includes(query) ||
+          apt.tests?.some((test) => test.testName?.toLowerCase().includes(query)) ||
+          apt._id?.toLowerCase().includes(query)
+      );
+    }
+
+    // Debug: Log first appointment with home collection
+    const homeCollectionApt = filtered.find((a) => a.collectionType === 'home_collection');
+    if (homeCollectionApt) {
+      console.log('Home Collection Appointment:', homeCollectionApt);
+      console.log('Collection Address:', homeCollectionApt.collectionAddress);
+    }
+
+    setFilteredAppointments(filtered);
+  };
+
+  const handleAssignStaff = async (staffId) => {
+    try {
+      await assignStaffForCollection(selectedAppointment._id, staffId);
+      toast.success('Staff assigned successfully');
+      setShowAssignModal(false);
+      fetchAppointments();
+    } catch (error) {
+      toast.error(error.response?.data?.message || 'Failed to assign staff');
+    }
+  };
+
+  const handleUpdateStatus = async (newStatus) => {
+    try {
+      await updateLabAppointmentStatus(selectedAppointment._id, newStatus);
+      toast.success('Status updated successfully');
+      setShowStatusModal(false);
+      fetchAppointments();
+    } catch (error) {
+      toast.error(error.response?.data?.message || 'Failed to update status');
+    }
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('en-IN', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
+  };
+
+  const formatTime = (timeString) => {
+    return new Date(`2000-01-01T${timeString}`).toLocaleTimeString('en-IN', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    });
+  };
+
+  const formatAddress = (addr) => {
+    if (!addr) return '';
+    const parts = [addr.street, addr.city, addr.state, addr.zipCode, addr.country].filter(Boolean);
+    return parts.join(', ');
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-white to-lab-black-50 dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 pt-20 transition-colors duration-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-lab-black-900 dark:text-lab-black-50 mb-2">
+            Appointment Management
+          </h1>
+          <p className="text-lab-black-600 dark:text-lab-black-400">
+            Manage and track all lab appointments
+          </p>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 mb-8">
+          <div className="bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 rounded-lg p-4 transition-colors">
+            <div className="text-2xl font-bold text-lab-black-900 dark:text-lab-black-50">
+              {summary.total}
+            </div>
+            <div className="text-sm text-lab-black-600 dark:text-lab-black-400">Total</div>
+          </div>
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 transition-colors">
+            <div className="text-2xl font-bold text-yellow-800 dark:text-yellow-400">
+              {summary.pending}
+            </div>
+            <div className="text-sm text-yellow-600 dark:text-yellow-500">Pending</div>
+          </div>
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 transition-colors">
+            <div className="text-2xl font-bold text-blue-800 dark:text-blue-400">
+              {summary.confirmed}
+            </div>
+            <div className="text-sm text-blue-600 dark:text-blue-500">Confirmed</div>
+          </div>
+          <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 transition-colors">
+            <div className="text-2xl font-bold text-green-800 dark:text-green-400">
+              {summary.completed}
+            </div>
+            <div className="text-sm text-green-600 dark:text-green-500">Completed</div>
+          </div>
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 transition-colors">
+            <div className="text-2xl font-bold text-red-800 dark:text-red-400">
+              {summary.cancelled}
+            </div>
+            <div className="text-sm text-red-600 dark:text-red-500">Cancelled</div>
+          </div>
+          <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4 transition-colors">
+            <div className="text-2xl font-bold text-purple-800 dark:text-purple-400">
+              {summary.homeCollection}
+            </div>
+            <div className="text-sm text-purple-600 dark:text-purple-500">Home</div>
+          </div>
+          <div className="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 transition-colors">
+            <div className="text-2xl font-bold text-indigo-800 dark:text-indigo-400">
+              {summary.visitLab}
+            </div>
+            <div className="text-sm text-indigo-600 dark:text-indigo-500">Lab Visit</div>
+          </div>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 rounded-lg p-4 mb-6 transition-colors">
+          <div className="flex flex-col md:flex-row gap-4">
+            {/* Search */}
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-lab-black-400 dark:text-lab-black-500" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search by patient name, test name, or appointment ID..."
+                className="w-full pl-10 pr-4 py-2 border border-lab-black-300 dark:border-lab-black-600 rounded-lg bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+              />
+            </div>
+
+            {/* Filter Buttons */}
+            <div className="flex gap-2">
+              <select
+                value={filters.status}
+                onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+                className="px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 transition-colors"
+              >
+                <option value="">All Status</option>
+                {statusOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+
+              <select
+                value={filters.collectionType}
+                onChange={(e) => setFilters({ ...filters, collectionType: e.target.value })}
+                className="px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 transition-colors"
+              >
+                <option value="">All Types</option>
+                <option value="home_collection">Home Collection</option>
+                <option value="visit_lab">Lab Visit</option>
+              </select>
+
+              <input
+                type="date"
+                value={filters.date}
+                onChange={(e) => setFilters({ ...filters, date: e.target.value })}
+                className="px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 transition-colors"
+              />
+
+              {(filters.status || filters.collectionType || filters.date) && (
+                <button
+                  onClick={() => setFilters({ status: '', collectionType: '', date: '' })}
+                  className="px-4 py-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 border border-red-300 dark:border-red-800 rounded-lg transition-colors"
+                >
+                  Clear
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Appointments List */}
+        {loading ? (
+          <div className="text-center py-12">
+            <div className="inline-block w-12 h-12 border-4 border-lab-yellow-500 border-t-transparent rounded-full animate-spin"></div>
+            <p className="mt-4 text-lab-black-600 dark:text-lab-black-400">
+              Loading appointments...
+            </p>
+          </div>
+        ) : filteredAppointments.length === 0 ? (
+          <div className="bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 rounded-lg p-12 text-center transition-colors">
+            <FileText className="w-16 h-16 text-lab-black-300 dark:text-lab-black-600 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-lab-black-900 dark:text-lab-black-50 mb-2">
+              No appointments found
+            </h3>
+            <p className="text-lab-black-600 dark:text-lab-black-400">
+              {searchQuery || filters.status || filters.collectionType || filters.date
+                ? 'Try adjusting your filters'
+                : 'No appointments have been booked yet'}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {filteredAppointments.map((appointment) => (
+              <div
+                key={appointment._id}
+                className="bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 rounded-lg p-6 hover:shadow-lg transition-all"
+              >
+                <div className="flex flex-col lg:flex-row gap-6">
+                  {/* Left: Patient & Appointment Info */}
+                  <div className="flex-1 space-y-4">
+                    {/* Status Badge */}
+                    <div className="flex items-center gap-3 flex-wrap">
+                      <span
+                        className={`px-3 py-1 rounded-full text-sm font-medium border ${statusColors[appointment.status]}`}
+                      >
+                        {appointment.status.replace(/_/g, ' ').toUpperCase()}
+                      </span>
+                      <span
+                        className={`px-3 py-1 rounded-full text-sm font-medium ${
+                          appointment.collectionType === 'home_collection'
+                            ? 'bg-purple-100 text-purple-800'
+                            : 'bg-indigo-100 text-indigo-800'
+                        }`}
+                      >
+                        {appointment.collectionType === 'home_collection' ? (
+                          <span className="flex items-center gap-1">
+                            <Home className="w-4 h-4" /> Home Collection
+                          </span>
+                        ) : (
+                          <span className="flex items-center gap-1">
+                            <Building2 className="w-4 h-4" /> Lab Visit
+                          </span>
+                        )}
+                      </span>
+                    </div>
+
+                    {/* Patient Info */}
+                    <div className="flex items-start gap-3">
+                      <User className="w-5 h-5 text-lab-black-500 mt-1 flex-shrink-0" />
+                      <div>
+                        <p className="font-semibold text-lab-black-900">
+                          {appointment.patientId?.firstName} {appointment.patientId?.lastName}
+                        </p>
+                        <p className="text-sm text-lab-black-600 flex items-center gap-2">
+                          <Phone className="w-4 h-4" />
+                          {appointment.patientId?.phoneNumber}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Date & Time */}
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="flex items-center gap-2 text-lab-black-700">
+                        <Calendar className="w-5 h-5 text-lab-yellow-600" />
+                        <span>{formatDate(appointment.appointmentDate)}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-lab-black-700">
+                        <Clock className="w-5 h-5 text-lab-yellow-600" />
+                        <span>{formatTime(appointment.appointmentTime)}</span>
+                      </div>
+                    </div>
+
+                    {/* Collection Address (for home collection) */}
+                    {appointment.collectionType === 'home_collection' &&
+                      appointment.collectionAddress && (
+                        <div className="flex items-start gap-2 text-lab-black-700 dark:text-lab-black-300 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 p-3 rounded-lg transition-colors">
+                          <MapPin className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" />
+                          <div className="text-sm">
+                            <div className="font-medium text-purple-900 dark:text-purple-300">
+                              Home Collection Address
+                            </div>
+                            <div className="text-lab-black-700 dark:text-lab-black-300">
+                              {formatAddress(appointment.collectionAddress)}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+
+                    {/* Debug: Show if home collection but no address */}
+                    {appointment.collectionType === 'home_collection' &&
+                      !appointment.collectionAddress && (
+                        <div className="flex items-start gap-2 text-orange-700 dark:text-orange-400 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 p-3 rounded-lg transition-colors">
+                          <AlertCircle className="w-5 h-5 text-orange-600 dark:text-orange-400 mt-0.5 flex-shrink-0" />
+                          <div className="text-sm">
+                            <div className="font-medium">No collection address provided</div>
+                            <div className="text-xs">Patient needs to provide their address</div>
+                          </div>
+                        </div>
+                      )}
+
+                    {/* Assigned Staff */}
+                    {appointment.assignedStaffId && (
+                      <div className="flex items-center gap-2 text-lab-black-700 bg-blue-50 p-3 rounded-lg">
+                        <User className="w-5 h-5 text-blue-600" />
+                        <span className="text-sm font-medium">
+                          Assigned to: {appointment.assignedStaffId.firstName}{' '}
+                          {appointment.assignedStaffId.lastName}
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Tests */}
+                    <div>
+                      <p className="text-sm font-semibold text-lab-black-900 mb-2">
+                        Tests Ordered:
+                      </p>
+                      <div className="flex flex-wrap gap-2">
+                        {appointment.tests?.map((test, idx) => (
+                          <div
+                            key={idx}
+                            className="px-3 py-1 bg-lab-yellow-50 border border-lab-yellow-200 rounded-lg text-sm"
+                          >
+                            <span className="font-medium">{test.testName}</span>
+                            <span className="text-lab-black-600 ml-2">₹{test.price}</span>
+                          </div>
+                        ))}
+                      </div>
+                      <p className="text-sm font-bold text-lab-black-900 mt-2">
+                        Total: ₹{appointment.totalAmount}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Right: Action Buttons */}
+                  <div className="flex lg:flex-col gap-2 lg:w-48">
+                    <button
+                      onClick={() => {
+                        setSelectedAppointment(appointment);
+                        setShowStatusModal(true);
+                      }}
+                      className="flex-1 lg:w-full px-4 py-2 bg-lab-yellow-500 hover:bg-lab-yellow-600 text-white rounded-lg transition-colors flex items-center justify-center gap-2"
+                    >
+                      <CheckCircle className="w-4 h-4" />
+                      Update Status
+                    </button>
+
+                    {appointment.collectionType === 'home_collection' &&
+                      !appointment.assignedStaffId && (
+                        <button
+                          onClick={() => {
+                            setSelectedAppointment(appointment);
+                            setShowAssignModal(true);
+                          }}
+                          className="flex-1 lg:w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors flex items-center justify-center gap-2"
+                        >
+                          <User className="w-4 h-4" />
+                          Assign Staff
+                        </button>
+                      )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Assign Staff Modal */}
+      {showAssignModal && selectedAppointment && (
+        <div
+          className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+          onClick={() => setShowAssignModal(false)}
+        >
+          <div
+            className="bg-white dark:bg-lab-black-800 rounded-lg shadow-2xl max-w-md w-full p-6 transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                Assign Staff Member
+              </h3>
+              <button
+                onClick={() => setShowAssignModal(false)}
+                className="text-lab-black-500 dark:text-lab-black-400 hover:text-lab-black-800 dark:hover:text-lab-black-200"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="space-y-3 max-h-96 overflow-y-auto">
+              {staff.filter((s) => s.isAvailableForHomeCollection).length === 0 ? (
+                <p className="text-center text-lab-black-600 dark:text-lab-black-400 py-4">
+                  No staff available for home collection
+                </p>
+              ) : (
+                staff
+                  .filter((s) => s.isAvailableForHomeCollection)
+                  .map((staffMember) => (
+                    <button
+                      key={staffMember._id}
+                      onClick={() => handleAssignStaff(staffMember._id)}
+                      className="w-full p-4 border border-lab-black-200 dark:border-lab-black-700 bg-white dark:bg-lab-black-900 rounded-lg hover:border-lab-yellow-500 hover:bg-lab-yellow-50 dark:hover:bg-lab-yellow-900/20 transition-all text-left"
+                    >
+                      <p className="font-semibold text-lab-black-900 dark:text-lab-black-50">
+                        {staffMember.firstName} {staffMember.lastName}
+                      </p>
+                      <p className="text-sm text-lab-black-600 dark:text-lab-black-400">
+                        {staffMember.phoneNumber}
+                      </p>
+                      {staffMember.specialization && (
+                        <p className="text-sm text-lab-black-500 dark:text-lab-black-500 mt-1">
+                          {staffMember.specialization}
+                        </p>
+                      )}
+                    </button>
+                  ))
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Update Status Modal */}
+      {showStatusModal && selectedAppointment && (
+        <div
+          className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+          onClick={() => setShowStatusModal(false)}
+        >
+          <div
+            className="bg-white dark:bg-lab-black-800 rounded-lg shadow-2xl max-w-md w-full p-6 transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                Update Appointment Status
+              </h3>
+              <button
+                onClick={() => setShowStatusModal(false)}
+                className="text-lab-black-500 dark:text-lab-black-400 hover:text-lab-black-800 dark:hover:text-lab-black-200"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            <p className="text-sm text-lab-black-600 dark:text-lab-black-400 mb-4">
+              Current status:{' '}
+              <span className="font-semibold">
+                {selectedAppointment.status.replace(/_/g, ' ').toUpperCase()}
+              </span>
+            </p>
+
+            <div className="space-y-2">
+              {statusOptions
+                .filter((opt) => opt.value !== selectedAppointment.status)
+                .map((option) => {
+                  const Icon = option.icon;
+                  return (
+                    <button
+                      key={option.value}
+                      onClick={() => handleUpdateStatus(option.value)}
+                      className="w-full p-3 border border-lab-black-200 dark:border-lab-black-700 bg-white dark:bg-lab-black-900 rounded-lg hover:border-lab-yellow-500 hover:bg-lab-yellow-50 dark:hover:bg-lab-yellow-900/20 transition-all text-left flex items-center gap-3"
+                    >
+                      <Icon className="w-5 h-5 text-lab-yellow-600 dark:text-lab-yellow-500" />
+                      <span className="font-medium text-lab-black-900 dark:text-lab-black-50">
+                        {option.label}
+                      </span>
+                    </button>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

From 8b611ca8d767e98b986e645acdf0c5291b229eec Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:10:38 +0530
Subject: [PATCH 32/44] feat(quicklab): add lab admin test management page

- Create CRUD interface for managing lab tests
- Features: search, add/edit modal, activate/deactivate tests
- Comprehensive form with all test fields (pricing, categories, sample types)
- Test categories: blood, urine, stool, imaging, ECG, other
- Grid view with test cards showing key details
- Full dark mode support
---
 .../pages/quicklab/LabAdminManageTests.jsx    | 608 ++++++++++++++++++
 1 file changed, 608 insertions(+)
 create mode 100644 client/src/pages/quicklab/LabAdminManageTests.jsx

diff --git a/client/src/pages/quicklab/LabAdminManageTests.jsx b/client/src/pages/quicklab/LabAdminManageTests.jsx
new file mode 100644
index 0000000..81795b2
--- /dev/null
+++ b/client/src/pages/quicklab/LabAdminManageTests.jsx
@@ -0,0 +1,608 @@
+import { useEffect, useState } from 'react';
+import {
+  Plus,
+  Edit,
+  Trash2,
+  Search,
+  X,
+  Save,
+  FlaskConical,
+  DollarSign,
+  Clock,
+  Home,
+  AlertCircle,
+  CheckCircle,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { getLabInfo, addLabTest, updateLabTest } from '../../service/labAdminService';
+import '../../quicklab.css';
+
+export default function LabAdminManageTests() {
+  const [tests, setTests] = useState([]);
+  const [filteredTests, setFilteredTests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showModal, setShowModal] = useState(false);
+  const [editingTest, setEditingTest] = useState(null);
+  const [formData, setFormData] = useState({
+    testName: '',
+    testLabel: '',
+    testCode: '',
+    description: '',
+    category: '',
+    price: '',
+    discountedPrice: '',
+    preparationInstructions: '',
+    sampleType: '',
+    reportDeliveryTime: '',
+    homeCollectionAvailable: false,
+    requiresEquipment: false,
+    equipmentDetails: '',
+    isActive: true,
+  });
+
+  const testCategories = [
+    { value: 'blood_test', label: 'Blood Test' },
+    { value: 'urine_test', label: 'Urine Test' },
+    { value: 'stool_test', label: 'Stool Test' },
+    { value: 'imaging', label: 'Imaging (X-Ray, CT, MRI)' },
+    { value: 'ecg', label: 'ECG' },
+    { value: 'other', label: 'Other' },
+  ];
+
+  const sampleTypes = ['Blood', 'Urine', 'Stool', 'Saliva', 'Swab', 'Tissue', 'Other'];
+
+  useEffect(() => {
+    fetchTests();
+  }, []);
+
+  useEffect(() => {
+    applyFilters();
+  }, [tests, searchQuery]);
+
+  const fetchTests = async () => {
+    try {
+      setLoading(true);
+      const response = await getLabInfo();
+      const data = response.data || response;
+      setTests(data.lab?.tests || []);
+    } catch (error) {
+      console.error('Failed to fetch tests:', error);
+      toast.error('Failed to load tests');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const applyFilters = () => {
+    let filtered = [...tests];
+
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (test) =>
+          test.testName?.toLowerCase().includes(query) ||
+          test.testCode?.toLowerCase().includes(query) ||
+          test.category?.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredTests(filtered);
+  };
+
+  const handleOpenModal = (test = null) => {
+    if (test) {
+      setEditingTest(test);
+      setFormData({
+        testName: test.testName || '',
+        testCode: test.testCode || '',
+        description: test.description || '',
+        category: test.category || '',
+        price: test.price || '',
+        discountedPrice: test.discountedPrice || '',
+        preparationInstructions: test.preparationInstructions || '',
+        sampleType: test.sampleType || '',
+        reportDeliveryTime: test.reportDeliveryTime || '',
+        homeCollectionAvailable: test.homeCollectionAvailable || false,
+        requiresEquipment: test.requiresEquipment || false,
+        equipmentDetails: test.equipmentDetails || '',
+        isActive: test.isActive !== false,
+      });
+    } else {
+      setEditingTest(null);
+      setFormData({
+        testName: '',
+        testCode: '',
+        description: '',
+        category: '',
+        price: '',
+        discountedPrice: '',
+        preparationInstructions: '',
+        sampleType: '',
+        reportDeliveryTime: '',
+        homeCollectionAvailable: false,
+        requiresEquipment: false,
+        equipmentDetails: '',
+        isActive: true,
+      });
+    }
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    setEditingTest(null);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    // Validation
+    if (!formData.testName || !formData.price || !formData.category) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+
+    try {
+      if (editingTest) {
+        await updateLabTest(editingTest._id, formData);
+        toast.success('Test updated successfully');
+      } else {
+        await addLabTest(formData);
+        toast.success('Test added successfully');
+      }
+      handleCloseModal();
+      fetchTests();
+    } catch (error) {
+      toast.error(error.response?.data?.message || 'Failed to save test');
+    }
+  };
+
+  const handleToggleActive = async (test) => {
+    try {
+      await updateLabTest(test._id, { isActive: !test.isActive });
+      toast.success(`Test ${!test.isActive ? 'activated' : 'deactivated'} successfully`);
+      fetchTests();
+    } catch (error) {
+      toast.error('Failed to update test status');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-white to-lab-black-50 dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 pt-20 transition-colors duration-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8 flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-lab-black-900 dark:text-lab-black-50 mb-2">
+              Manage Tests
+            </h1>
+            <p className="text-lab-black-600 dark:text-lab-black-400">
+              Add, edit, and manage lab tests offered by your lab
+            </p>
+          </div>
+          <button
+            onClick={() => handleOpenModal()}
+            className="btn-quicklab-primary px-6 py-3 flex items-center gap-2"
+          >
+            <Plus className="w-5 h-5" />
+            Add New Test
+          </button>
+        </div>
+
+        {/* Search Bar */}
+        <div className="bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 rounded-lg p-4 mb-6 transition-colors">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-lab-black-400 dark:text-lab-black-500" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search by test name, code, or category..."
+              className="w-full pl-10 pr-4 py-2 border border-lab-black-300 dark:border-lab-black-600 rounded-lg bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+            />
+          </div>
+        </div>
+
+        {/* Tests Grid */}
+        {loading ? (
+          <div className="text-center py-12">
+            <div className="inline-block w-12 h-12 border-4 border-lab-yellow-500 border-t-transparent rounded-full animate-spin"></div>
+            <p className="mt-4 text-lab-black-600 dark:text-lab-black-400">Loading tests...</p>
+          </div>
+        ) : filteredTests.length === 0 ? (
+          <div className="bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 rounded-lg p-12 text-center transition-colors">
+            <FlaskConical className="w-16 h-16 text-lab-black-300 dark:text-lab-black-600 mx-auto mb-4" />
+            <h3 className="text-xl font-semibold text-lab-black-900 dark:text-lab-black-50 mb-2">
+              No tests found
+            </h3>
+            <p className="text-lab-black-600 dark:text-lab-black-400 mb-4">
+              {searchQuery ? 'Try adjusting your search' : 'Start by adding your first test'}
+            </p>
+            {!searchQuery && (
+              <button
+                onClick={() => handleOpenModal()}
+                className="btn-quicklab-primary px-6 py-2 inline-flex items-center gap-2"
+              >
+                <Plus className="w-5 h-5" />
+                Add Test
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredTests.map((test) => (
+              <div
+                key={test._id}
+                className={`bg-white dark:bg-lab-black-800 border rounded-lg p-6 transition-all hover:shadow-lg ${
+                  test.isActive === false
+                    ? 'border-red-300 dark:border-red-800 opacity-60'
+                    : 'border-lab-black-200 dark:border-lab-black-700'
+                }`}
+              >
+                {/* Test Header */}
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex-1">
+                    <h3 className="text-lg font-bold text-lab-black-900 dark:text-lab-black-50 mb-1">
+                      {test.testName}
+                    </h3>
+                    {test.testCode && (
+                      <p className="text-sm text-lab-black-500 dark:text-lab-black-400">
+                        Code: {test.testCode}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => handleOpenModal(test)}
+                      className="p-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
+                      title="Edit Test"
+                    >
+                      <Edit className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => handleToggleActive(test)}
+                      className={`p-2 rounded-lg transition-colors ${
+                        test.isActive === false
+                          ? 'text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20'
+                          : 'text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20'
+                      }`}
+                      title={test.isActive === false ? 'Activate' : 'Deactivate'}
+                    >
+                      {test.isActive === false ? (
+                        <CheckCircle className="w-4 h-4" />
+                      ) : (
+                        <AlertCircle className="w-4 h-4" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Status Badge */}
+                {test.isActive === false && (
+                  <div className="mb-3">
+                    <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400 text-xs font-medium rounded-full">
+                      Inactive
+                    </span>
+                  </div>
+                )}
+
+                {/* Category */}
+                <div className="mb-3">
+                  <span className="px-3 py-1 bg-lab-yellow-100 dark:bg-lab-yellow-900/30 text-lab-yellow-800 dark:text-lab-yellow-400 text-sm font-medium rounded-full">
+                    {test.category?.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+                  </span>
+                </div>
+
+                {/* Description */}
+                {test.description && (
+                  <p className="text-sm text-lab-black-600 dark:text-lab-black-400 mb-4 line-clamp-2">
+                    {test.description}
+                  </p>
+                )}
+
+                {/* Price */}
+                <div className="flex items-center gap-2 mb-3">
+                  <DollarSign className="w-5 h-5 text-lab-yellow-600 dark:text-lab-yellow-500" />
+                  <span className="text-xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                    ₹{test.price}
+                  </span>
+                  {test.discountedPrice && test.discountedPrice < test.price && (
+                    <span className="text-sm text-lab-black-500 dark:text-lab-black-400 line-through">
+                      ₹{test.discountedPrice}
+                    </span>
+                  )}
+                </div>
+
+                {/* Details */}
+                <div className="space-y-2">
+                  {test.sampleType && (
+                    <div className="flex items-center gap-2 text-sm text-lab-black-600 dark:text-lab-black-400">
+                      <FlaskConical className="w-4 h-4" />
+                      <span>Sample: {test.sampleType}</span>
+                    </div>
+                  )}
+                  {test.reportDeliveryTime && (
+                    <div className="flex items-center gap-2 text-sm text-lab-black-600 dark:text-lab-black-400">
+                      <Clock className="w-4 h-4" />
+                      <span>Report: {test.reportDeliveryTime}</span>
+                    </div>
+                  )}
+                  {test.homeCollectionAvailable && (
+                    <div className="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
+                      <Home className="w-4 h-4" />
+                      <span>Home Collection Available</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Add/Edit Modal */}
+      {showModal && (
+        <div
+          className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+          onClick={handleCloseModal}
+        >
+          <div
+            className="bg-white dark:bg-lab-black-800 rounded-lg shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="sticky top-0 bg-white dark:bg-lab-black-800 border-b border-lab-black-200 dark:border-lab-black-700 px-6 py-4 flex items-center justify-between rounded-t-lg z-10">
+              <h2 className="text-2xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                {editingTest ? 'Edit Test' : 'Add New Test'}
+              </h2>
+              <button
+                onClick={handleCloseModal}
+                className="text-lab-black-500 dark:text-lab-black-400 hover:text-lab-black-800 dark:hover:text-lab-black-200"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            <form onSubmit={handleSubmit} className="p-6 space-y-6">
+              {/* Basic Information */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Test Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    name="testName"
+                    value={formData.testName}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Test Label (e.g., "Quick Check", "Comprehensive")
+                  </label>
+                  <input
+                    type="text"
+                    name="testLabel"
+                    value={formData.testLabel || ''}
+                    onChange={handleInputChange}
+                    placeholder="Optional label for display"
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Test Code
+                  </label>
+                  <input
+                    type="text"
+                    name="testCode"
+                    value={formData.testCode}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Category <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    name="category"
+                    value={formData.category}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  >
+                    <option value="">Select Category</option>
+                    {testCategories.map((cat) => (
+                      <option key={cat.value} value={cat.value}>
+                        {cat.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Sample Type
+                  </label>
+                  <select
+                    name="sampleType"
+                    value={formData.sampleType}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  >
+                    <option value="">Select Sample Type</option>
+                    {sampleTypes.map((type) => (
+                      <option key={type} value={type}>
+                        {type}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Price (₹) <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="number"
+                    name="price"
+                    value={formData.price}
+                    onChange={handleInputChange}
+                    required
+                    min="0"
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Discounted Price (₹)
+                  </label>
+                  <input
+                    type="number"
+                    name="discountedPrice"
+                    value={formData.discountedPrice}
+                    onChange={handleInputChange}
+                    min="0"
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                    Report Delivery Time
+                  </label>
+                  <input
+                    type="text"
+                    name="reportDeliveryTime"
+                    value={formData.reportDeliveryTime}
+                    onChange={handleInputChange}
+                    placeholder="e.g., 24 hours, 2-3 days"
+                    className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                  Description
+                </label>
+                <textarea
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                  rows="3"
+                  className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                />
+              </div>
+
+              {/* Preparation Instructions */}
+              <div>
+                <label className="block text-sm font-medium text-lab-black-900 dark:text-lab-black-50 mb-2">
+                  Preparation Instructions
+                </label>
+                <textarea
+                  name="preparationInstructions"
+                  value={formData.preparationInstructions}
+                  onChange={handleInputChange}
+                  rows="2"
+                  placeholder="e.g., Fasting required for 8-12 hours"
+                  className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                />
+              </div>
+
+              {/* Checkboxes */}
+              <div className="space-y-3">
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name="homeCollectionAvailable"
+                    checked={formData.homeCollectionAvailable}
+                    onChange={handleInputChange}
+                    className="w-5 h-5 text-lab-yellow-600 border-lab-black-300 dark:border-lab-black-600 rounded focus:ring-lab-yellow-500"
+                  />
+                  <span className="text-sm font-medium text-lab-black-900 dark:text-lab-black-50">
+                    Home Collection Available
+                  </span>
+                </label>
+
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name="requiresEquipment"
+                    checked={formData.requiresEquipment}
+                    onChange={handleInputChange}
+                    className="w-5 h-5 text-lab-yellow-600 border-lab-black-300 dark:border-lab-black-600 rounded focus:ring-lab-yellow-500"
+                  />
+                  <span className="text-sm font-medium text-lab-black-900 dark:text-lab-black-50">
+                    Requires Special Equipment
+                  </span>
+                </label>
+
+                {formData.requiresEquipment && (
+                  <div className="ml-8">
+                    <input
+                      type="text"
+                      name="equipmentDetails"
+                      value={formData.equipmentDetails}
+                      onChange={handleInputChange}
+                      placeholder="Specify equipment details"
+                      className="w-full px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 rounded-lg focus:ring-2 focus:ring-lab-yellow-500 focus:border-transparent transition-colors"
+                    />
+                  </div>
+                )}
+
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name="isActive"
+                    checked={formData.isActive}
+                    onChange={handleInputChange}
+                    className="w-5 h-5 text-lab-yellow-600 border-lab-black-300 dark:border-lab-black-600 rounded focus:ring-lab-yellow-500"
+                  />
+                  <span className="text-sm font-medium text-lab-black-900 dark:text-lab-black-50">
+                    Active (Available for booking)
+                  </span>
+                </label>
+              </div>
+
+              {/* Form Actions */}
+              <div className="flex gap-3 pt-4 border-t border-lab-black-200 dark:border-lab-black-700">
+                <button
+                  type="button"
+                  onClick={handleCloseModal}
+                  className="flex-1 px-6 py-3 border border-lab-black-300 dark:border-lab-black-600 bg-white dark:bg-lab-black-900 text-lab-black-700 dark:text-lab-black-300 rounded-lg hover:bg-lab-black-50 dark:hover:bg-lab-black-700 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 btn-quicklab-primary px-6 py-3 flex items-center justify-center gap-2"
+                >
+                  <Save className="w-5 h-5" />
+                  {editingTest ? 'Update Test' : 'Add Test'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

From 95ab1dafd076eaeb8167f7e81035e12d3b1460dc Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:10:46 +0530
Subject: [PATCH 33/44] feat(quicklab): add routes for appointments and test
 management

- Add /quick-lab/appointments route with LabAdminSetupGuard
- Add /quick-lab/tests route with LabAdminSetupGuard
- Both routes require profile and lab setup
- Import LabAdminAppointments and LabAdminManageTests components
---
 client/src/routes/QuickLabRoutes.jsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index 6242d24..e22eb10 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -7,6 +7,8 @@ import LabAdminProfileComplete from '../pages/quicklab/LabAdminProfileComplete';
 import LabAdminAddLab from '../pages/quicklab/LabAdminAddLab';
 import LabAdminDashboard from '../pages/quicklab/LabAdminDashboard';
 import LabAdminManageStaff from '../pages/quicklab/LabAdminManageStaff';
+import LabAdminAppointments from '../pages/quicklab/LabAdminAppointments';
+import LabAdminManageTests from '../pages/quicklab/LabAdminManageTests';
 import LabStaffProfileComplete from '../pages/quicklab/LabStaffProfileComplete';
 import LabStaffWaitingForAssignment from '../pages/quicklab/LabStaffWaitingForAssignment';
 import LabStaffDashboard from '../pages/quicklab/LabStaffDashboard';
@@ -73,6 +75,30 @@ export default function QuickLabRoutes() {
           }
         />
 
+        {/* Lab Admin - Appointments Management */}
+        <Route
+          path="/quick-lab/appointments"
+          element={
+            <ProtectedRoute allowedRoles={['lab_admin']}>
+              <LabAdminSetupGuard requireProfile={true} requireLab={true}>
+                <LabAdminAppointments />
+              </LabAdminSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Lab Admin - Manage Tests */}
+        <Route
+          path="/quick-lab/tests"
+          element={
+            <ProtectedRoute allowedRoles={['lab_admin']}>
+              <LabAdminSetupGuard requireProfile={true} requireLab={true}>
+                <LabAdminManageTests />
+              </LabAdminSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
         {/* ============ LAB STAFF ROUTES ============ */}
 
         {/* Lab Staff Profile Completion */}

From ddf859eaae765822aedee73805fa22117dd65f68 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:10:54 +0530
Subject: [PATCH 34/44] feat(quicklab): add lab admin navigation buttons to
 desktop navbar

- Add Appointments button with Calendar icon
- Add Tests button with TestTube icon
- Add Staff button (shortened from 'Manage Staff')
- All buttons visible only for lab_admin role
- Import Calendar and TestTube icons from lucide-react
---
 .../src/components/quicklab/DesktopNavbar.jsx | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index 2bacb91..998ac12 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -1,5 +1,5 @@
 // DesktopNavbar.jsx
-import { Search, LogOut, Users, Building2, FlaskConical } from 'lucide-react';
+import { Search, LogOut, Users, Building2, FlaskConical, Calendar, TestTube } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
@@ -219,6 +219,18 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
             {/* Dark Mode Toggle */}
             <DarkModeToggle />
 
+            {/* Lab Admin: Manage Appointments */}
+            {isAuthenticated && user?.role === 'lab_admin' && (
+              <button
+                onClick={() => navigate('/quick-lab/appointments')}
+                className="hidden md:inline-flex items-center gap-2 px-3 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                title="Manage Appointments"
+              >
+                <Calendar className="h-5 w-5" />
+                Appointments
+              </button>
+            )}
+
             {/* Lab Admin: Manage Staff shortcut */}
             {isAuthenticated && user?.role === 'lab_admin' && (
               <button
@@ -227,7 +239,19 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
                 title="Manage Staff"
               >
                 <Users className="h-5 w-5" />
-                Manage Staff
+                Staff
+              </button>
+            )}
+
+            {/* Lab Admin: Manage Tests */}
+            {isAuthenticated && user?.role === 'lab_admin' && (
+              <button
+                onClick={() => navigate('/quick-lab/tests')}
+                className="hidden md:inline-flex items-center gap-2 px-3 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                title="Manage Tests"
+              >
+                <TestTube className="h-5 w-5" />
+                Tests
               </button>
             )}
 

From c19339b41c84e8dbf7936cd8a15fd493b1aaae63 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:11:01 +0530
Subject: [PATCH 35/44] feat(quicklab): add lab admin navigation to mobile
 bottom navbar

- Add Appointments button (Appts) with Calendar icon
- Add Tests button with TestTube icon
- Add Staff button with Users icon
- All buttons in bottom navigation for lab_admin role
- Import Calendar and TestTube icons from lucide-react
---
 .../src/components/quicklab/MobileNavbar.jsx  | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index f56c6f1..fe9f7b1 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -1,5 +1,16 @@
 // MobileNavbar.jsx
-import { Search, Home, BookOpen, User, LogOut, Users, Building2, FlaskConical } from 'lucide-react';
+import {
+  Search,
+  Home,
+  BookOpen,
+  User,
+  LogOut,
+  Users,
+  Building2,
+  FlaskConical,
+  Calendar,
+  TestTube,
+} from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
@@ -235,6 +246,28 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
             </span>
           </div>
 
+          {/* Lab Admin: Manage Appointments */}
+          {isAuthenticated && user?.role === 'lab_admin' && (
+            <button
+              onClick={() => navigate('/quick-lab/appointments')}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+            >
+              <Calendar className="h-6 w-6" />
+              <span className="text-xs font-medium">Appts</span>
+            </button>
+          )}
+
+          {/* Lab Admin: Manage Tests */}
+          {isAuthenticated && user?.role === 'lab_admin' && (
+            <button
+              onClick={() => navigate('/quick-lab/tests')}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+            >
+              <TestTube className="h-6 w-6" />
+              <span className="text-xs font-medium">Tests</span>
+            </button>
+          )}
+
           {/* Lab Admin: Manage Staff */}
           {isAuthenticated && user?.role === 'lab_admin' && (
             <button

From d7c42801704730204cb4f9ba35ae5a0dd2d191a4 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 21 Dec 2025 20:11:09 +0530
Subject: [PATCH 36/44] feat(quicklab): add role-based redirects on homepage

- Redirect lab_admin and lab_staff to their dashboards automatically
- Use getDashboardPath utility for proper role routing
- Other roles (patient, doctor, admin) remain on homepage
- Import useAuth, useNavigate, and getDashboardPath
---
 client/src/pages/quicklab/Homepage.jsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/quicklab/Homepage.jsx b/client/src/pages/quicklab/Homepage.jsx
index da7d7f6..c213abb 100644
--- a/client/src/pages/quicklab/Homepage.jsx
+++ b/client/src/pages/quicklab/Homepage.jsx
@@ -1,5 +1,8 @@
 // QuickLabHomepage.jsx
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../context/authContext';
+import getDashboardPath from '../../utility/getDashboardPath';
 import '../../quicklab.css';
 import HeroSection from '../../components/quicklab/HomePage/HeroSection';
 import FeaturesSection from '../../components/quicklab/HomePage/FeaturesSection';
@@ -9,6 +12,20 @@ import PromiseSection from '../../components/quicklab/HomePage/PromiseSection';
 import DesktopFooter from '../../components/quicklab/DesktopFooter';
 
 const QuickLabHomepage = () => {
+  const { isAuthenticated, user } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      // Redirect lab_admin and lab_staff to their dashboards
+      if (user.role === 'lab_admin' || user.role === 'lab_staff') {
+        const dashboardPath = getDashboardPath(user.role);
+        navigate(dashboardPath, { replace: true });
+      }
+      // For other roles (patient, doctor, admin), stay on homepage
+    }
+  }, [isAuthenticated, user, navigate]);
+
   return (
     <div className="min-h-screen bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 transition-colors duration-300">
       <HeroSection />

From 69f82b12b3ada3b1b28a0bf2a6dc9da5a81accc0 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Mon, 22 Dec 2025 11:27:27 +0530
Subject: [PATCH 37/44] quicklab: add lab info update endpoint

---
 .../QuickLab/labAdminController.js            | 108 ++++++++++++++++++
 server/Routes/QuickLab/labAdminRoutes.js      |  11 ++
 2 files changed, 119 insertions(+)

diff --git a/server/Controllers/QuickLab/labAdminController.js b/server/Controllers/QuickLab/labAdminController.js
index ac696a0..beea2e8 100644
--- a/server/Controllers/QuickLab/labAdminController.js
+++ b/server/Controllers/QuickLab/labAdminController.js
@@ -370,6 +370,114 @@ export const getLabInfo = async (req, res) => {
   }
 };
 
+// Update lab info (basic details, contact, address, charges, logo/photos)
+export const updateLabInfo = async (req, res) => {
+  try {
+    const { profileId } = req.user;
+
+    const labAdmin = await LabAdmin.findById(profileId);
+    if (!labAdmin || !labAdmin.labId) {
+      return res.status(400).json({ message: 'Lab admin not associated with any lab' });
+    }
+
+    const lab = await Lab.findById(labAdmin.labId);
+    if (!lab) {
+      return res.status(404).json({ message: 'Lab not found' });
+    }
+
+    const body = req.body;
+
+    // Rebuild nested contact/address fields (form-data friendly)
+    const contact = {
+      phone: body.contact?.phone || body['contact.phone'] || body.contactPhone || body.phone,
+      email: body.contact?.email || body['contact.email'] || body.contactEmail || body.email,
+      website:
+        body.contact?.website || body['contact.website'] || body.contactWebsite || body.website,
+    };
+
+    const address = {
+      formattedAddress:
+        body.address?.formattedAddress ||
+        body['address.formattedAddress'] ||
+        body.formattedAddress ||
+        lab.address?.formattedAddress,
+      street: body.address?.street || body['address.street'] || body.street || lab.address?.street,
+      city: body.address?.city || body['address.city'] || body.city || lab.address?.city,
+      state: body.address?.state || body['address.state'] || body.state || lab.address?.state,
+      zipCode:
+        body.address?.zipCode || body['address.zipCode'] || body.zipCode || lab.address?.zipCode,
+      country:
+        body.address?.country || body['address.country'] || body.country || lab.address?.country,
+    };
+
+    let generalHomeCollectionFee = lab.generalHomeCollectionFee;
+    if (body.generalHomeCollectionFee !== undefined && body.generalHomeCollectionFee !== '') {
+      generalHomeCollectionFee = Number(body.generalHomeCollectionFee);
+    }
+
+    // Opening hours can come as JSON string from form-data
+    let openingHours = lab.openingHours;
+    if (body.openingHours) {
+      try {
+        openingHours =
+          typeof body.openingHours === 'string' ? JSON.parse(body.openingHours) : body.openingHours;
+      } catch (err) {
+        return res.status(400).json({ message: 'Invalid openingHours format' });
+      }
+    }
+
+    const updates = {
+      name: body.name || lab.name,
+      description: body.description !== undefined ? body.description : lab.description,
+      contact,
+      address,
+      generalHomeCollectionFee,
+      openingHours,
+    };
+
+    // Optional logo upload
+    if (req.files?.logo) {
+      const result = await uploadToCloudinary(req.files.logo[0].path);
+      updates.logo = result.url;
+    }
+
+    // Photos: keep existing ones (sent from client) + newly uploaded
+    let existingPhotos = lab.photos || [];
+    if (body.existingPhotos) {
+      if (Array.isArray(body.existingPhotos)) {
+        existingPhotos = body.existingPhotos.filter(Boolean);
+      } else if (typeof body.existingPhotos === 'string') {
+        existingPhotos = body.existingPhotos
+          .split(',')
+          .map((p) => p.trim())
+          .filter(Boolean);
+      }
+    }
+
+    if (req.files?.photos) {
+      const newPhotoUrls = await Promise.all(
+        req.files.photos.map(async (file) => {
+          const result = await uploadToCloudinary(file.path);
+          return result.url;
+        })
+      );
+      updates.photos = [...existingPhotos, ...newPhotoUrls];
+    } else {
+      updates.photos = existingPhotos;
+    }
+
+    const updatedLab = await Lab.findByIdAndUpdate(labAdmin.labId, updates, {
+      new: true,
+      runValidators: true,
+    });
+
+    res.json({ message: 'Lab info updated successfully', lab: updatedLab });
+  } catch (error) {
+    console.error('Error updating lab info:', error);
+    res.status(500).json({ message: 'Failed to update lab info' });
+  }
+};
+
 export const addTest = async (req, res) => {
   try {
     const { profileId } = req.user;
diff --git a/server/Routes/QuickLab/labAdminRoutes.js b/server/Routes/QuickLab/labAdminRoutes.js
index c29ef2b..77db630 100644
--- a/server/Routes/QuickLab/labAdminRoutes.js
+++ b/server/Routes/QuickLab/labAdminRoutes.js
@@ -11,6 +11,7 @@ import {
   addTest,
   updateTest,
   getLabInfo,
+  updateLabInfo,
   checkLabExists,
   checkLabAdminProfileExists,
 } from '../../Controllers/QuickLab/labAdminController.js';
@@ -49,5 +50,15 @@ router.put('/tests/:testId', authenticate, authorize('lab_admin'), updateTest);
 
 // Lab info
 router.get('/lab/info', authenticate, authorize('lab_admin'), getLabInfo);
+router.put(
+  '/lab/info',
+  authenticate,
+  authorize('lab_admin'),
+  upload.fields([
+    { name: 'logo', maxCount: 1 },
+    { name: 'photos', maxCount: 10 },
+  ]),
+  updateLabInfo
+);
 
 export default router;

From 444fe655e6722e52ad5a085f18a0f8e0cd6e2f16 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Mon, 22 Dec 2025 11:27:48 +0530
Subject: [PATCH 38/44] quicklab: add lab settings page and nav

---
 .../src/components/quicklab/DesktopNavbar.jsx |  23 +-
 .../src/components/quicklab/MobileNavbar.jsx  |  12 +
 .../pages/quicklab/LabAdminLabSettings.jsx    | 520 ++++++++++++++++++
 client/src/quicklab.css                       |  10 +
 client/src/routes/QuickLabRoutes.jsx          |  13 +
 client/src/service/labAdminService.js         |   7 +
 6 files changed, 584 insertions(+), 1 deletion(-)
 create mode 100644 client/src/pages/quicklab/LabAdminLabSettings.jsx

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index 998ac12..f5d448e 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -1,5 +1,14 @@
 // DesktopNavbar.jsx
-import { Search, LogOut, Users, Building2, FlaskConical, Calendar, TestTube } from 'lucide-react';
+import {
+  Search,
+  LogOut,
+  Users,
+  Building2,
+  FlaskConical,
+  Calendar,
+  TestTube,
+  Settings,
+} from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
 import DarkModeToggle from '../ui/DarkModeToggle';
@@ -255,6 +264,18 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
               </button>
             )}
 
+            {/* Lab Admin: Lab Settings */}
+            {isAuthenticated && user?.role === 'lab_admin' && (
+              <button
+                onClick={() => navigate('/quick-lab/lab-settings')}
+                className="hidden md:inline-flex items-center gap-2 px-3 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                title="Lab Settings"
+              >
+                <Settings className="h-5 w-5" />
+                Settings
+              </button>
+            )}
+
             {/* Conditional: Login/Register OR Logout */}
             {isAuthenticated ? (
               <button
diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index fe9f7b1..0e442f5 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -10,6 +10,7 @@ import {
   FlaskConical,
   Calendar,
   TestTube,
+  Settings,
 } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/authContext';
@@ -279,6 +280,17 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
             </button>
           )}
 
+          {/* Lab Admin: Lab Settings */}
+          {isAuthenticated && user?.role === 'lab_admin' && (
+            <button
+              onClick={() => navigate('/quick-lab/lab-settings')}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+            >
+              <Settings className="h-6 w-6" />
+              <span className="text-xs font-medium">Settings</span>
+            </button>
+          )}
+
           {/* Conditional: Login/Account OR Logout */}
           {isAuthenticated ? (
             <button
diff --git a/client/src/pages/quicklab/LabAdminLabSettings.jsx b/client/src/pages/quicklab/LabAdminLabSettings.jsx
new file mode 100644
index 0000000..3b8d2f2
--- /dev/null
+++ b/client/src/pages/quicklab/LabAdminLabSettings.jsx
@@ -0,0 +1,520 @@
+import { useEffect, useState } from 'react';
+import {
+  Building2,
+  Upload,
+  Save,
+  Image as ImageIcon,
+  Phone,
+  MapPin,
+  Globe,
+  Mail,
+  DollarSign,
+  Clock,
+  RefreshCw,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { getLabInfo, updateLabInfo } from '../../service/labAdminService';
+import '../../quicklab.css';
+
+export default function LabAdminLabSettings() {
+  const [lab, setLab] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [logoFile, setLogoFile] = useState(null);
+  const [newPhotos, setNewPhotos] = useState([]);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    phone: '',
+    email: '',
+    website: '',
+    formattedAddress: '',
+    street: '',
+    city: '',
+    state: '',
+    zipCode: '',
+    country: '',
+    generalHomeCollectionFee: '',
+    existingPhotos: [],
+  });
+
+  useEffect(() => {
+    loadLab();
+  }, []);
+
+  const loadLab = async () => {
+    try {
+      setLoading(true);
+      const response = await getLabInfo();
+      const data = response.data || response;
+      const labInfo = data.lab;
+      setLab(labInfo);
+      setFormData({
+        name: labInfo?.name || '',
+        description: labInfo?.description || '',
+        phone: labInfo?.contact?.phone || '',
+        email: labInfo?.contact?.email || '',
+        website: labInfo?.contact?.website || '',
+        formattedAddress: labInfo?.address?.formattedAddress || '',
+        street: labInfo?.address?.street || '',
+        city: labInfo?.address?.city || '',
+        state: labInfo?.address?.state || '',
+        zipCode: labInfo?.address?.zipCode || '',
+        country: labInfo?.address?.country || '',
+        generalHomeCollectionFee:
+          labInfo?.generalHomeCollectionFee !== undefined ? labInfo.generalHomeCollectionFee : '',
+        existingPhotos: labInfo?.photos || [],
+      });
+    } catch (error) {
+      console.error('Failed to load lab info:', error);
+      toast.error('Failed to load lab info');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInput = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleRemovePhoto = (url) => {
+    setFormData((prev) => ({
+      ...prev,
+      existingPhotos: prev.existingPhotos.filter((p) => p !== url),
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!formData.name) {
+      toast.error('Lab name is required');
+      return;
+    }
+    if (!formData.phone) {
+      toast.error('Contact phone is required');
+      return;
+    }
+
+    try {
+      setSaving(true);
+      const payload = {
+        name: formData.name,
+        description: formData.description,
+        contact: {
+          phone: formData.phone,
+          email: formData.email,
+          website: formData.website,
+        },
+        address: {
+          formattedAddress: formData.formattedAddress,
+          street: formData.street,
+          city: formData.city,
+          state: formData.state,
+          zipCode: formData.zipCode,
+          country: formData.country,
+        },
+        generalHomeCollectionFee: formData.generalHomeCollectionFee,
+        existingPhotos: formData.existingPhotos,
+      };
+
+      const response = await updateLabInfo(payload, logoFile, newPhotos);
+      const updated = response.data?.lab || response.lab;
+      setLab(updated);
+      setNewPhotos([]);
+      setLogoFile(null);
+      setFormData((prev) => ({
+        ...prev,
+        existingPhotos: updated?.photos || prev.existingPhotos,
+      }));
+      toast.success('Lab info updated');
+    } catch (error) {
+      console.error('Failed to update lab:', error);
+      toast.error(error?.response?.data?.message || 'Failed to update lab info');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatDate = (value) => {
+    if (!value) return '—';
+    return new Date(value).toLocaleString();
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 flex items-center justify-center">
+        <div className="card-quicklab p-6 flex items-center gap-3">
+          <RefreshCw className="w-5 h-5 animate-spin text-lab-yellow-600" />
+          <p className="text-lab-black-800 dark:text-lab-black-100">Loading lab settings...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 p-4 md:p-8 pt-20">
+      <div className="max-w-6xl mx-auto space-y-6">
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <p className="text-sm uppercase tracking-wide text-lab-black-500 dark:text-lab-black-300">
+              Lab Admin
+            </p>
+            <h1 className="text-3xl font-bold text-lab-black-900 dark:text-lab-black-50">
+              Lab Settings
+            </h1>
+            <p className="text-lab-black-600 dark:text-lab-black-300">
+              View and edit your lab profile, charges, and media
+            </p>
+          </div>
+          <button
+            onClick={handleSubmit}
+            disabled={saving}
+            className="btn-quicklab-primary inline-flex items-center gap-2 px-4 py-2 rounded-lg"
+          >
+            <Save className="w-4 h-4" />
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+
+        {/* Snapshot */}
+        {lab && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="card-quicklab flex items-center gap-3 p-4">
+              <Building2 className="w-10 h-10 text-lab-yellow-600" />
+              <div>
+                <p className="text-lab-black-500 dark:text-lab-black-300 text-sm">Lab name</p>
+                <p className="text-xl font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  {lab.name}
+                </p>
+              </div>
+            </div>
+            <div className="card-quicklab flex items-center gap-3 p-4">
+              <DollarSign className="w-10 h-10 text-lab-blue-600" />
+              <div>
+                <p className="text-lab-black-500 dark:text-lab-black-300 text-sm">
+                  Home collection fee
+                </p>
+                <p className="text-xl font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  {lab.generalHomeCollectionFee ? `₹${lab.generalHomeCollectionFee}` : 'Not set'}
+                </p>
+              </div>
+            </div>
+            <div className="card-quicklab flex items-center gap-3 p-4">
+              <Clock className="w-10 h-10 text-lab-black-700" />
+              <div>
+                <p className="text-lab-black-500 dark:text-lab-black-300 text-sm">Last updated</p>
+                <p className="text-lab-black-900 dark:text-lab-black-50 font-semibold text-sm">
+                  {formatDate(lab.updatedAt)}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <form onSubmit={handleSubmit} className="lg:col-span-2 space-y-4">
+            <div className="card-quicklab p-4 md:p-6 space-y-4">
+              <div className="flex items-center gap-2">
+                <Building2 className="w-5 h-5 text-lab-yellow-600" />
+                <h2 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  Basic details
+                </h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                    Lab name *
+                  </label>
+                  <input
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                    placeholder="Enter lab name"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300 flex items-center gap-1">
+                    <DollarSign className="w-4 h-4" /> Home collection fee (₹)
+                  </label>
+                  <input
+                    name="generalHomeCollectionFee"
+                    type="number"
+                    value={formData.generalHomeCollectionFee}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                    placeholder="0"
+                    min="0"
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                  About the lab
+                </label>
+                <textarea
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInput}
+                  className="input-quicklab min-h-[100px] bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                  placeholder="Short description, specialties, certifications"
+                />
+              </div>
+            </div>
+
+            <div className="card-quicklab p-4 md:p-6 space-y-4">
+              <div className="flex items-center gap-2">
+                <Phone className="w-5 h-5 text-lab-blue-600" />
+                <h2 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  Contact
+                </h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                    Phone *
+                  </label>
+                  <input
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                    placeholder="Primary contact number"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300 flex items-center gap-1">
+                    <Mail className="w-4 h-4" /> Email
+                  </label>
+                  <input
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                    placeholder="contact@lab.com"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300 flex items-center gap-1">
+                    <Globe className="w-4 h-4" /> Website
+                  </label>
+                  <input
+                    name="website"
+                    value={formData.website}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                    placeholder="https://"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="card-quicklab p-4 md:p-6 space-y-4">
+              <div className="flex items-center gap-2">
+                <MapPin className="w-5 h-5 text-lab-yellow-600" />
+                <h2 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  Address
+                </h2>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                  Formatted address
+                </label>
+                <input
+                  name="formattedAddress"
+                  value={formData.formattedAddress}
+                  onChange={handleInput}
+                  className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                  placeholder="Building, area"
+                />
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                    Street
+                  </label>
+                  <input
+                    name="street"
+                    value={formData.street}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">City</label>
+                  <input
+                    name="city"
+                    value={formData.city}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                    State
+                  </label>
+                  <input
+                    name="state"
+                    value={formData.state}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                    ZIP / PIN
+                  </label>
+                  <input
+                    name="zipCode"
+                    value={formData.zipCode}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                    Country
+                  </label>
+                  <input
+                    name="country"
+                    value={formData.country}
+                    onChange={handleInput}
+                    className="input-quicklab bg-white dark:bg-lab-black-800 border border-lab-black-200 dark:border-lab-black-700 text-lab-black-900 dark:text-lab-black-50"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="card-quicklab p-4 md:p-6 space-y-4">
+              <div className="flex items-center gap-2">
+                <ImageIcon className="w-5 h-5 text-lab-blue-600" />
+                <h2 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  Media
+                </h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300">Logo</label>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={(e) => setLogoFile(e.target.files?.[0] || null)}
+                    className="input-quicklab"
+                  />
+                  {lab?.logo && !logoFile && (
+                    <div className="flex items-center gap-3 mt-2">
+                      <img
+                        src={lab.logo}
+                        alt="Lab logo"
+                        className="w-14 h-14 rounded-lg object-cover"
+                      />
+                      <p className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                        Current logo
+                      </p>
+                    </div>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm text-lab-black-600 dark:text-lab-black-300 flex items-center gap-1">
+                    <Upload className="w-4 h-4" /> Add photos
+                  </label>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    onChange={(e) => setNewPhotos(Array.from(e.target.files || []))}
+                    className="input-quicklab"
+                  />
+                  {newPhotos.length > 0 && (
+                    <p className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                      {newPhotos.length} new photo(s) selected
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {formData.existingPhotos?.length > 0 && (
+                <div className="pt-2">
+                  <p className="text-sm font-medium text-lab-black-800 dark:text-lab-black-200 mb-2">
+                    Existing photos
+                  </p>
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                    {formData.existingPhotos.map((photo) => (
+                      <div key={photo} className="relative group">
+                        <img
+                          src={photo}
+                          alt="Lab"
+                          className="w-full h-28 object-cover rounded-lg border border-lab-black-100"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => handleRemovePhoto(photo)}
+                          className="absolute top-2 right-2 bg-white/90 dark:bg-black/70 text-red-600 text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </form>
+
+          <div className="space-y-4">
+            <div className="card-quicklab p-4 md:p-6 space-y-3">
+              <div className="flex items-center gap-2">
+                <Clock className="w-5 h-5 text-lab-yellow-600" />
+                <h3 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  Change log
+                </h3>
+              </div>
+              <div className="space-y-2 text-sm text-lab-black-700 dark:text-lab-black-200">
+                <div className="flex items-center justify-between">
+                  <span>Created</span>
+                  <span className="font-medium">{formatDate(lab?.createdAt)}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Last updated</span>
+                  <span className="font-medium">{formatDate(lab?.updatedAt)}</span>
+                </div>
+                <p className="text-xs text-lab-black-500 dark:text-lab-black-400 mt-2">
+                  Future updates will include detailed field-level change history.
+                </p>
+              </div>
+            </div>
+
+            <div className="card-quicklab p-4 md:p-6 space-y-3">
+              <div className="flex items-center gap-2">
+                <Building2 className="w-5 h-5 text-lab-blue-600" />
+                <h3 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                  At a glance
+                </h3>
+              </div>
+              <div className="space-y-2 text-sm text-lab-black-700 dark:text-lab-black-200">
+                <div className="flex items-center justify-between">
+                  <span>Tests offered</span>
+                  <span className="font-semibold">{lab?.tests?.length || 0}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Staff on roster</span>
+                  <span className="font-semibold">{lab?.staff?.length || 0}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Home collection enabled</span>
+                  <span className="font-semibold">
+                    {lab?.tests?.some((t) => t.homeCollectionAvailable) ? 'Yes' : 'No'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/quicklab.css b/client/src/quicklab.css
index 447f199..0fa18c7 100644
--- a/client/src/quicklab.css
+++ b/client/src/quicklab.css
@@ -45,6 +45,16 @@
     --color-lab-blue-500: #60a5fa;
     --color-lab-blue-600: #3b82f6;
   }
+
+  body {
+    background-color: var(--color-lab-black-50);
+    color: var(--color-lab-black-900);
+  }
+
+  .dark body {
+    background-color: var(--color-lab-black-900);
+    color: var(--color-lab-black-50);
+  }
 }
 
 /* Custom Component Classes */
diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index e22eb10..991dfe4 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -9,6 +9,7 @@ import LabAdminDashboard from '../pages/quicklab/LabAdminDashboard';
 import LabAdminManageStaff from '../pages/quicklab/LabAdminManageStaff';
 import LabAdminAppointments from '../pages/quicklab/LabAdminAppointments';
 import LabAdminManageTests from '../pages/quicklab/LabAdminManageTests';
+import LabAdminLabSettings from '../pages/quicklab/LabAdminLabSettings';
 import LabStaffProfileComplete from '../pages/quicklab/LabStaffProfileComplete';
 import LabStaffWaitingForAssignment from '../pages/quicklab/LabStaffWaitingForAssignment';
 import LabStaffDashboard from '../pages/quicklab/LabStaffDashboard';
@@ -99,6 +100,18 @@ export default function QuickLabRoutes() {
           }
         />
 
+        {/* Lab Admin - Lab settings */}
+        <Route
+          path="/quick-lab/lab-settings"
+          element={
+            <ProtectedRoute allowedRoles={['lab_admin']}>
+              <LabAdminSetupGuard requireProfile={true} requireLab={true}>
+                <LabAdminLabSettings />
+              </LabAdminSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
         {/* ============ LAB STAFF ROUTES ============ */}
 
         {/* Lab Staff Profile Completion */}
diff --git a/client/src/service/labAdminService.js b/client/src/service/labAdminService.js
index fc434a1..98b4114 100644
--- a/client/src/service/labAdminService.js
+++ b/client/src/service/labAdminService.js
@@ -20,6 +20,12 @@ export const addLabTest = (testData) => apiService.post('/lab-admin/tests', test
 export const updateLabTest = (testId, updates) =>
   apiService.put(`/lab-admin/tests/${testId}`, updates);
 export const getLabInfo = () => apiService.get('/lab-admin/lab/info');
+export const updateLabInfo = (labData, logoFile, photoFiles = []) => {
+  const formData = createFormDataFromObject(labData, { logo: logoFile, photos: photoFiles });
+  return apiService.put('/lab-admin/lab/info', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+};
 
 /**
  * Check if Lab Exists for current lab admin
@@ -45,6 +51,7 @@ export default {
   addLabTest,
   updateLabTest,
   getLabInfo,
+  updateLabInfo,
   checkLabExists,
   checkLabAdminProfileExists,
 };

From 5a1aadf410cdfff885c5b5f04d820801dfa2d940 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Mon, 22 Dec 2025 11:28:01 +0530
Subject: [PATCH 39/44] quicklab: enhance lab admin dashboard

---
 .../src/pages/quicklab/LabAdminDashboard.jsx  | 263 +++++++++++++++---
 1 file changed, 225 insertions(+), 38 deletions(-)

diff --git a/client/src/pages/quicklab/LabAdminDashboard.jsx b/client/src/pages/quicklab/LabAdminDashboard.jsx
index b8a5fc0..4b7fe62 100644
--- a/client/src/pages/quicklab/LabAdminDashboard.jsx
+++ b/client/src/pages/quicklab/LabAdminDashboard.jsx
@@ -1,22 +1,104 @@
-import { BarChart3, Users, TestTube, Calendar, Settings } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import {
+  Users,
+  TestTube,
+  Calendar,
+  Settings,
+  RefreshCw,
+  TrendingUp,
+  Clock,
+  CheckCircle,
+} from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
+import { getLabInfo, getLabStaff } from '../../service/labAdminService';
+import { getLabAppointments } from '../../service/labAppointmentService';
+import { toast } from 'react-toastify';
 import '../../quicklab.css';
 
 export default function LabAdminDashboard() {
   const navigate = useNavigate();
-  const stats = [
+  const [lab, setLab] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState([
     { label: 'Total Tests', value: '0', icon: TestTube, color: 'lab-yellow' },
     { label: 'Staff Members', value: '0', icon: Users, color: 'lab-blue' },
     { label: 'Appointments', value: '0', icon: Calendar, color: 'lab-yellow' },
-  ];
+  ]);
+
+  useEffect(() => {
+    loadDashboardData();
+  }, []);
+
+  const loadDashboardData = async () => {
+    try {
+      setLoading(true);
+      const [labRes, staffRes, apptRes] = await Promise.all([
+        getLabInfo(),
+        getLabStaff(),
+        getLabAppointments({ limit: 100 }),
+      ]);
+
+      const labData = labRes.data?.lab || labRes.lab;
+      const staffData = staffRes.data?.staff || staffRes.staff || [];
+      const apptData = apptRes.data?.appointments || apptRes.appointments || [];
+
+      setLab(labData);
+      setStats([
+        {
+          label: 'Total Tests',
+          value: String(labData?.tests?.length || 0),
+          icon: TestTube,
+          color: 'lab-yellow',
+        },
+        {
+          label: 'Staff Members',
+          value: String(staffData?.length || 0),
+          icon: Users,
+          color: 'lab-blue',
+        },
+        {
+          label: 'Total Appointments',
+          value: String(apptData?.length || 0),
+          icon: Calendar,
+          color: 'lab-yellow',
+        },
+      ]);
+    } catch (error) {
+      console.error('Failed to load dashboard data:', error);
+      toast.error('Failed to load dashboard data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRefresh = () => {
+    loadDashboardData();
+  };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white p-4 md:p-8 pt-20">
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 p-4 md:p-8 pt-20">
       <div className="max-w-7xl mx-auto">
         {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-lab-black-900 mb-2">Lab Dashboard</h1>
-          <p className="text-lab-black-600">Manage your lab, staff, and appointments</p>
+        <div className="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <p className="text-sm uppercase tracking-wide text-lab-black-500 dark:text-lab-black-300">
+              Welcome back
+            </p>
+            <h1 className="text-4xl font-bold text-lab-black-900 dark:text-lab-black-50 mb-2">
+              {lab?.name || 'Lab Dashboard'}
+            </h1>
+            <p className="text-lab-black-600 dark:text-lab-black-300">
+              Manage your lab, staff, and appointments
+            </p>
+          </div>
+          <button
+            onClick={handleRefresh}
+            disabled={loading}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-lab-yellow-500 hover:bg-lab-yellow-600 dark:bg-lab-yellow-600 dark:hover:bg-lab-yellow-700 text-lab-black-900 font-medium transition-all disabled:opacity-50"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            {loading ? 'Loading...' : 'Refresh'}
+          </button>
         </div>
 
         {/* Stats Grid */}
@@ -26,32 +108,44 @@ export default function LabAdminDashboard() {
             return (
               <div
                 key={idx}
-                className="card-quicklab bg-white border border-lab-black-100 hover:border-lab-yellow-400 transition-all"
+                className="card-quicklab border border-lab-black-100 dark:border-lab-black-700 hover:border-lab-yellow-400 dark:hover:border-lab-yellow-400 transition-all cursor-pointer group"
               >
                 <div className="flex items-start justify-between mb-4">
                   <div>
-                    <p className="text-lab-black-600 text-sm font-medium mb-1">{stat.label}</p>
-                    <p className="text-3xl font-bold text-lab-black-900">{stat.value}</p>
+                    <p className="text-lab-black-600 dark:text-lab-black-300 text-sm font-medium mb-1">
+                      {stat.label}
+                    </p>
+                    <p className="text-3xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                      {stat.value}
+                    </p>
                   </div>
-                  <div className="w-12 h-12 rounded-lg bg-lab-yellow-100 flex items-center justify-center">
-                    <Icon className="w-6 h-6 text-lab-yellow-700" />
+                  <div className="w-12 h-12 rounded-lg bg-lab-yellow-100 dark:bg-lab-yellow-900/30 flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <Icon className="w-6 h-6 text-lab-yellow-700 dark:text-lab-yellow-400" />
                   </div>
                 </div>
+                <div className="flex items-center gap-1 text-lab-yellow-600 dark:text-lab-yellow-400 text-sm font-medium">
+                  <TrendingUp className="w-4 h-4" />
+                  <span>View details</span>
+                </div>
               </div>
             );
           })}
         </div>
 
         {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
           {/* Manage Tests */}
-          <div className="card-quicklab bg-white border border-lab-black-100">
+          <div className="card-quicklab border border-lab-black-100 dark:border-lab-black-700 hover:border-lab-yellow-400 dark:hover:border-lab-yellow-400 transition-all group">
             <div className="flex items-start justify-between mb-4">
               <div>
-                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Manage Tests</h3>
-                <p className="text-lab-black-600 text-sm">Add, update, or remove test services</p>
+                <h3 className="text-lg font-bold text-lab-black-900 dark:text-lab-black-50 mb-1">
+                  Manage Tests
+                </h3>
+                <p className="text-lab-black-600 dark:text-lab-black-300 text-sm">
+                  Add, update, or remove test services
+                </p>
               </div>
-              <TestTube className="w-6 h-6 text-lab-yellow-600" />
+              <TestTube className="w-6 h-6 text-lab-yellow-600 dark:text-lab-yellow-400" />
             </div>
             <button
               onClick={() => navigate('/quick-lab/tests')}
@@ -62,13 +156,17 @@ export default function LabAdminDashboard() {
           </div>
 
           {/* Manage Staff */}
-          <div className="card-quicklab bg-white border border-lab-black-100">
+          <div className="card-quicklab border border-lab-black-100 dark:border-lab-black-700 hover:border-lab-yellow-400 dark:hover:border-lab-yellow-400 transition-all group">
             <div className="flex items-start justify-between mb-4">
               <div>
-                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Manage Staff</h3>
-                <p className="text-lab-black-600 text-sm">Add or manage lab staff members</p>
+                <h3 className="text-lg font-bold text-lab-black-900 dark:text-lab-black-50 mb-1">
+                  Manage Staff
+                </h3>
+                <p className="text-lab-black-600 dark:text-lab-black-300 text-sm">
+                  Add or manage lab staff members
+                </p>
               </div>
-              <Users className="w-6 h-6 text-lab-yellow-600" />
+              <Users className="w-6 h-6 text-lab-yellow-600 dark:text-lab-yellow-400" />
             </div>
             <button
               onClick={() => navigate('/quick-lab/staff')}
@@ -78,46 +176,135 @@ export default function LabAdminDashboard() {
             </button>
           </div>
 
-          {/* Appointments */}
-          <div className="card-quicklab bg-white border border-lab-black-100">
+          {/* Lab Settings */}
+          <div className="card-quicklab border border-lab-black-100 dark:border-lab-black-700 hover:border-lab-yellow-400 dark:hover:border-lab-yellow-400 transition-all group">
             <div className="flex items-start justify-between mb-4">
               <div>
-                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Appointments</h3>
-                <p className="text-lab-black-600 text-sm">Track and manage lab appointments</p>
+                <h3 className="text-lg font-bold text-lab-black-900 dark:text-lab-black-50 mb-1">
+                  Lab Settings
+                </h3>
+                <p className="text-lab-black-600 dark:text-lab-black-300 text-sm">
+                  Update profile, charges, and media
+                </p>
               </div>
-              <Calendar className="w-6 h-6 text-lab-yellow-600" />
+              <Settings className="w-6 h-6 text-lab-yellow-600 dark:text-lab-yellow-400" />
             </div>
             <button
-              onClick={() => navigate('/quick-lab/appointments')}
+              onClick={() => navigate('/quick-lab/lab-settings')}
               className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg"
             >
-              View Appointments
+              Open Settings
             </button>
           </div>
 
-          {/* Settings */}
-          <div className="card-quicklab bg-white border border-lab-black-100">
+          {/* Appointments */}
+          <div className="card-quicklab border border-lab-black-100 dark:border-lab-black-700 hover:border-lab-yellow-400 dark:hover:border-lab-yellow-400 transition-all group">
             <div className="flex items-start justify-between mb-4">
               <div>
-                <h3 className="text-lg font-bold text-lab-black-900 mb-1">Lab Settings</h3>
-                <p className="text-lab-black-600 text-sm">Update lab information and settings</p>
+                <h3 className="text-lg font-bold text-lab-black-900 dark:text-lab-black-50 mb-1">
+                  Appointments
+                </h3>
+                <p className="text-lab-black-600 dark:text-lab-black-300 text-sm">
+                  Track and manage lab appointments
+                </p>
               </div>
-              <Settings className="w-6 h-6 text-lab-yellow-600" />
+              <Calendar className="w-6 h-6 text-lab-yellow-600 dark:text-lab-yellow-400" />
             </div>
             <button
-              onClick={() => navigate('/quick-lab/settings')}
+              onClick={() => navigate('/quick-lab/appointments')}
               className="btn-quicklab-primary w-full py-2 rounded-lg font-medium transition-all hover:shadow-lg"
             >
-              Edit Settings
+              View Appointments
             </button>
           </div>
         </div>
 
+        {/* Lab Overview & Quick Stats */}
+        {lab && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+            {/* Lab Summary */}
+            <div className="lg:col-span-2 card-quicklab border border-lab-black-100 dark:border-lab-black-700 space-y-4">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded-lg bg-lab-yellow-100 dark:bg-lab-yellow-900/30 flex items-center justify-center">
+                  <Users className="w-6 h-6 text-lab-yellow-600 dark:text-lab-yellow-400" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                    Lab Overview
+                  </h3>
+                  <p className="text-lab-black-600 dark:text-lab-black-300 text-sm">{lab.name}</p>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4 pt-2 border-t border-lab-black-100 dark:border-lab-black-700">
+                <div>
+                  <p className="text-lab-black-600 dark:text-lab-black-300 text-sm mb-1">
+                    Location
+                  </p>
+                  <p className="font-semibold text-lab-black-900 dark:text-lab-black-50">
+                    {lab.address?.city || '—'}, {lab.address?.state || '—'}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-lab-black-600 dark:text-lab-black-300 text-sm mb-1">Contact</p>
+                  <p className="font-semibold text-lab-black-900 dark:text-lab-black-50">
+                    {lab.contact?.phone || '—'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Actions Card */}
+            <div className="card-quicklab border border-lab-black-100 dark:border-lab-black-700 space-y-3">
+              <h3 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                <Clock className="w-5 h-5 text-lab-yellow-600 dark:text-lab-yellow-400" />
+                Quick Access
+              </h3>
+              <div className="space-y-2">
+                <button
+                  onClick={() => navigate('/quick-lab/lab-settings')}
+                  className="w-full text-left px-3 py-2 rounded-lg hover:bg-lab-yellow-100 dark:hover:bg-lab-yellow-900/20 text-lab-black-900 dark:text-lab-black-50 font-medium transition-colors"
+                >
+                  ⚙️ Lab Settings
+                </button>
+                <button
+                  onClick={() => navigate('/quick-lab/appointments')}
+                  className="w-full text-left px-3 py-2 rounded-lg hover:bg-lab-yellow-100 dark:hover:bg-lab-yellow-900/20 text-lab-black-900 dark:text-lab-black-50 font-medium transition-colors"
+                >
+                  📅 View Appointments
+                </button>
+                <button
+                  onClick={() => navigate('/quick-lab/tests')}
+                  className="w-full text-left px-3 py-2 rounded-lg hover:bg-lab-yellow-100 dark:hover:bg-lab-yellow-900/20 text-lab-black-900 dark:text-lab-black-50 font-medium transition-colors"
+                >
+                  🧪 Manage Tests
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Recent Activity */}
-        <div className="card-quicklab bg-white border border-lab-black-100">
-          <h3 className="text-lg font-bold text-lab-black-900 mb-4">Recent Activity</h3>
+        <div className="card-quicklab border border-lab-black-100 dark:border-lab-black-700">
+          <div className="flex items-center gap-2 mb-4">
+            <CheckCircle className="w-5 h-5 text-lab-yellow-600 dark:text-lab-yellow-400" />
+            <h3 className="text-lg font-bold text-lab-black-900 dark:text-lab-black-50">
+              System Status
+            </h3>
+          </div>
           <div className="space-y-3">
-            <p className="text-lab-black-600 text-sm py-4 text-center">No recent activity yet</p>
+            <div className="flex items-center justify-between p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-900">
+              <span className="text-green-700 dark:text-green-400 font-medium">✓ Lab Profile</span>
+              <span className="text-sm text-green-600 dark:text-green-300">Active</span>
+            </div>
+            <div className="flex items-center justify-between p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-900">
+              <span className="text-blue-700 dark:text-blue-400 font-medium">
+                ✓ Database Connection
+              </span>
+              <span className="text-sm text-blue-600 dark:text-blue-300">Connected</span>
+            </div>
+            <p className="text-lab-black-600 dark:text-lab-black-300 text-sm pt-2">
+              All systems operational. Keep managing your lab efficiently!
+            </p>
           </div>
         </div>
       </div>

From 5c46be57796fa25480746abccbe42c736ee9a6e1 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 28 Dec 2025 11:08:39 +0530
Subject: [PATCH 40/44] adds appointment page for the lab staff

---
 .../src/components/quicklab/DesktopNavbar.jsx |  12 +
 .../src/components/quicklab/MobileNavbar.jsx  |  11 +
 .../pages/quicklab/LabStaffMyAppointments.jsx | 624 ++++++++++++++++++
 client/src/routes/QuickLabRoutes.jsx          |  13 +
 client/src/service/labStaffService.js         |  11 +
 .../QuickLab/labAppointmentController.js      |   2 +-
 .../QuickLab/labStaffController.js            | 102 ++-
 server/Routes/QuickLab/labStaffRoutes.js      |   8 +
 8 files changed, 781 insertions(+), 2 deletions(-)
 create mode 100644 client/src/pages/quicklab/LabStaffMyAppointments.jsx

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index f5d448e..363f339 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -276,6 +276,18 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
               </button>
             )}
 
+            {/* Lab Staff: My Appointments */}
+            {isAuthenticated && user?.role === 'lab_staff' && (
+              <button
+                onClick={() => navigate('/quick-lab/staff-appointments')}
+                className="hidden md:inline-flex items-center gap-2 px-3 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                title="My Appointments"
+              >
+                <Calendar className="h-5 w-5" />
+                My Appointments
+              </button>
+            )}
+
             {/* Conditional: Login/Register OR Logout */}
             {isAuthenticated ? (
               <button
diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index 0e442f5..38320c6 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -291,6 +291,17 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
             </button>
           )}
 
+          {/* Lab Staff: My Appointments */}
+          {isAuthenticated && user?.role === 'lab_staff' && (
+            <button
+              onClick={() => navigate('/quick-lab/staff-appointments')}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+            >
+              <Calendar className="h-6 w-6" />
+              <span className="text-xs font-medium">Appointments</span>
+            </button>
+          )}
+
           {/* Conditional: Login/Account OR Logout */}
           {isAuthenticated ? (
             <button
diff --git a/client/src/pages/quicklab/LabStaffMyAppointments.jsx b/client/src/pages/quicklab/LabStaffMyAppointments.jsx
new file mode 100644
index 0000000..46457b8
--- /dev/null
+++ b/client/src/pages/quicklab/LabStaffMyAppointments.jsx
@@ -0,0 +1,624 @@
+import { useEffect, useState } from 'react';
+import {
+  Calendar,
+  Clock,
+  User,
+  MapPin,
+  Phone,
+  Home,
+  Building2,
+  AlertCircle,
+  CheckCircle,
+  XCircle,
+  X,
+  RefreshCw,
+  ChevronRight,
+  TestTube,
+  Upload,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import {
+  getMyAssignments,
+  updateMyAssignmentStatus,
+  uploadReportAndComplete,
+} from '../../service/labStaffService';
+import '../../quicklab.css';
+
+export default function LabStaffMyAppointments() {
+  const [assignments, setAssignments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedAppointment, setSelectedAppointment] = useState(null);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [updatingStatus, setUpdatingStatus] = useState(false);
+  const [reportFile, setReportFile] = useState(null);
+  const [uploadingReport, setUploadingReport] = useState(false);
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [uploadNotes, setUploadNotes] = useState('');
+
+  const statusColors = {
+    pending:
+      'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',
+    confirmed:
+      'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400 border-blue-200 dark:border-blue-800',
+    sample_collected:
+      'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-400 border-purple-200 dark:border-purple-800',
+    processing:
+      'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-400 border-indigo-200 dark:border-indigo-800',
+    completed:
+      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 border-green-200 dark:border-green-800',
+    cancelled:
+      'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400 border-red-200 dark:border-red-800',
+  };
+
+  const statusLabels = {
+    pending: 'Pending',
+    confirmed: 'Confirmed',
+    sample_collected: 'Sample Collected',
+    processing: 'Processing',
+    completed: 'Completed',
+    cancelled: 'Cancelled',
+  };
+
+  useEffect(() => {
+    fetchAssignments();
+  }, []);
+
+  const fetchAssignments = async () => {
+    try {
+      setLoading(true);
+      const response = await getMyAssignments();
+      const data = response.data || response;
+      setAssignments(data.assignments || []);
+    } catch (error) {
+      console.error('Failed to fetch assignments:', error);
+      toast.error('Failed to load assignments');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getNextAllowedStatuses = (currentStatus) => {
+    const statusOrder = ['pending', 'confirmed', 'sample_collected', 'processing', 'completed'];
+    const currentIndex = statusOrder.indexOf(currentStatus);
+
+    if (currentStatus === 'cancelled' || currentStatus === 'completed') {
+      return [];
+    }
+
+    // Staff can move forward or stay in same status
+    return statusOrder.slice(currentIndex + 1, currentIndex + 3).filter((s) => s !== 'completed');
+  };
+
+  const handleStatusUpdate = async (appointmentId, newStatus) => {
+    try {
+      setUpdatingStatus(true);
+      await updateMyAssignmentStatus(appointmentId, newStatus);
+      toast.success('Status updated successfully');
+      fetchAssignments();
+      setShowDetailModal(false);
+    } catch (error) {
+      console.error('Failed to update status:', error);
+      toast.error(error?.response?.data?.message || 'Failed to update status');
+    } finally {
+      setUpdatingStatus(false);
+    }
+  };
+
+  const handleViewDetails = (appointment) => {
+    setSelectedAppointment(appointment);
+    setShowDetailModal(true);
+  };
+
+  const handleUploadReport = async (appointmentId) => {
+    if (!reportFile) {
+      toast.error('Please select a PDF file');
+      return;
+    }
+
+    if (!reportFile.name.toLowerCase().endsWith('.pdf')) {
+      toast.error('Only PDF files are allowed');
+      return;
+    }
+
+    try {
+      setUploadingReport(true);
+      await uploadReportAndComplete(appointmentId, reportFile, uploadNotes);
+      toast.success('Report uploaded and appointment marked as completed');
+      fetchAssignments();
+      setShowUploadModal(false);
+      setShowDetailModal(false);
+      setReportFile(null);
+      setUploadNotes('');
+    } catch (error) {
+      console.error('Failed to upload report:', error);
+      toast.error(error?.response?.data?.message || 'Failed to upload report');
+    } finally {
+      setUploadingReport(false);
+    }
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 flex items-center justify-center">
+        <div className="card-quicklab p-6 flex items-center gap-3">
+          <RefreshCw className="w-5 h-5 animate-spin text-lab-yellow-600" />
+          <p className="text-lab-black-800 dark:text-lab-black-100">Loading assignments...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 p-4 md:p-8 pt-20">
+        <div className="max-w-7xl mx-auto space-y-6">
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div>
+              <p className="text-sm uppercase tracking-wide text-lab-black-500 dark:text-lab-black-300">
+                Lab Staff
+              </p>
+              <h1 className="text-3xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                My Appointments
+              </h1>
+              <p className="text-lab-black-600 dark:text-lab-black-300">
+                View and manage your assigned appointments
+              </p>
+            </div>
+            <button
+              onClick={fetchAssignments}
+              className="btn-quicklab-primary inline-flex items-center gap-2 px-4 py-2 rounded-lg"
+            >
+              <RefreshCw className="w-4 h-4" />
+              Refresh
+            </button>
+          </div>
+
+          {/* Summary Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="card-quicklab p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+                  <Calendar className="w-5 h-5 text-blue-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-lab-black-500 dark:text-lab-black-300">Total</p>
+                  <p className="text-2xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                    {assignments.length}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="card-quicklab p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
+                  <Clock className="w-5 h-5 text-yellow-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-lab-black-500 dark:text-lab-black-300">Pending</p>
+                  <p className="text-2xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                    {assignments.filter((a) => a.status === 'pending').length}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="card-quicklab p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
+                  <TestTube className="w-5 h-5 text-purple-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-lab-black-500 dark:text-lab-black-300">Collected</p>
+                  <p className="text-2xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                    {
+                      assignments.filter(
+                        (a) => a.status === 'sample_collected' || a.status === 'processing'
+                      ).length
+                    }
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="card-quicklab p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
+                  <CheckCircle className="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <p className="text-sm text-lab-black-500 dark:text-lab-black-300">Completed</p>
+                  <p className="text-2xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                    {assignments.filter((a) => a.status === 'completed').length}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Appointments List */}
+          <div className="card-quicklab p-4 md:p-6 space-y-4">
+            <h2 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+              All Assignments
+            </h2>
+
+            {assignments.length === 0 ? (
+              <div className="text-center py-12">
+                <Calendar className="w-16 h-16 mx-auto text-lab-black-300 dark:text-lab-black-600 mb-4" />
+                <p className="text-lab-black-600 dark:text-lab-black-300">
+                  No assignments found. Check back later.
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {assignments.map((appointment) => (
+                  <div
+                    key={appointment._id}
+                    className="card-quicklab border border-lab-black-200 dark:border-lab-black-700 hover:border-lab-yellow-400 transition-all p-4"
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 space-y-3">
+                        {/* Header */}
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-full bg-lab-yellow-100 dark:bg-lab-yellow-900/30 flex items-center justify-center flex-shrink-0">
+                              <User className="w-5 h-5 text-lab-yellow-700" />
+                            </div>
+                            <div>
+                              <p className="font-semibold text-lab-black-900 dark:text-lab-black-50">
+                                {appointment.patientId?.firstName} {appointment.patientId?.lastName}
+                              </p>
+                              <p className="text-sm text-lab-black-600 dark:text-lab-black-400">
+                                {appointment.patientId?.phoneNumber}
+                              </p>
+                            </div>
+                          </div>
+                          <span
+                            className={`px-3 py-1 rounded-full text-xs font-semibold border ${statusColors[appointment.status]}`}
+                          >
+                            {statusLabels[appointment.status]}
+                          </span>
+                        </div>
+
+                        {/* Details */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+                          <div className="flex items-center gap-2 text-lab-black-700 dark:text-lab-black-200">
+                            <Calendar className="w-4 h-4 text-lab-black-500" />
+                            <span>{formatDate(appointment.appointmentDate)}</span>
+                          </div>
+                          <div className="flex items-center gap-2 text-lab-black-700 dark:text-lab-black-200">
+                            <Clock className="w-4 h-4 text-lab-black-500" />
+                            <span>{appointment.appointmentTime}</span>
+                          </div>
+                          <div className="flex items-center gap-2 text-lab-black-700 dark:text-lab-black-200">
+                            {appointment.collectionType === 'home_collection' ? (
+                              <Home className="w-4 h-4 text-lab-black-500" />
+                            ) : (
+                              <Building2 className="w-4 h-4 text-lab-black-500" />
+                            )}
+                            <span>
+                              {appointment.collectionType === 'home_collection'
+                                ? 'Home Collection'
+                                : 'Visit Lab'}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-2 text-lab-black-700 dark:text-lab-black-200">
+                            <TestTube className="w-4 h-4 text-lab-black-500" />
+                            <span>{appointment.tests?.length || 0} test(s)</span>
+                          </div>
+                        </div>
+
+                        {/* Address for home collection */}
+                        {appointment.collectionType === 'home_collection' &&
+                          appointment.collectionAddress && (
+                            <div className="flex items-start gap-2 text-sm bg-lab-yellow-50 dark:bg-lab-yellow-900/20 p-3 rounded-lg">
+                              <MapPin className="w-4 h-4 text-lab-yellow-600 mt-0.5 flex-shrink-0" />
+                              <span className="text-lab-black-700 dark:text-lab-black-200">
+                                {appointment.collectionAddress.street},{' '}
+                                {appointment.collectionAddress.city},{' '}
+                                {appointment.collectionAddress.state}{' '}
+                                {appointment.collectionAddress.zipCode}
+                              </span>
+                            </div>
+                          )}
+                      </div>
+
+                      {/* Actions */}
+                      <button
+                        onClick={() => handleViewDetails(appointment)}
+                        className="btn-quicklab-secondary px-3 py-2 text-sm rounded-lg flex items-center gap-2"
+                      >
+                        Details
+                        <ChevronRight className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Detail Modal */}
+      {showDetailModal && selectedAppointment && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-lab-black-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div className="sticky top-0 bg-white dark:bg-lab-black-800 border-b border-lab-black-200 dark:border-lab-black-700 p-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                Appointment Details
+              </h3>
+              <button
+                onClick={() => setShowDetailModal(false)}
+                className="text-lab-black-500 hover:text-lab-black-700 dark:hover:text-lab-black-300"
+              >
+                <XCircle className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-6">
+              {/* Patient Info */}
+              <div className="space-y-3">
+                <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                  <User className="w-5 h-5" /> Patient Information
+                </h4>
+                <div className="bg-lab-black-50 dark:bg-lab-black-900 p-4 rounded-lg space-y-2 text-sm">
+                  <p className="text-lab-black-700 dark:text-lab-black-200">
+                    <strong>Name:</strong> {selectedAppointment.patientId?.firstName}{' '}
+                    {selectedAppointment.patientId?.lastName}
+                  </p>
+                  <p className="text-lab-black-700 dark:text-lab-black-200">
+                    <strong>Phone:</strong> {selectedAppointment.patientId?.phoneNumber}
+                  </p>
+                  {selectedAppointment.patientId?.address && (
+                    <p className="text-lab-black-700 dark:text-lab-black-200">
+                      <strong>Address:</strong> {selectedAppointment.patientId.address.street},{' '}
+                      {selectedAppointment.patientId.address.city}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Tests */}
+              <div className="space-y-3">
+                <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                  <TestTube className="w-5 h-5" /> Tests
+                </h4>
+                <div className="space-y-2">
+                  {selectedAppointment.tests?.map((test, idx) => (
+                    <div
+                      key={idx}
+                      className="bg-lab-black-50 dark:bg-lab-black-900 p-3 rounded-lg flex justify-between items-center"
+                    >
+                      <div>
+                        <p className="font-medium text-lab-black-900 dark:text-lab-black-50">
+                          {test.testName}
+                        </p>
+                        {test.testCode && (
+                          <p className="text-sm text-lab-black-600 dark:text-lab-black-400">
+                            Code: {test.testCode}
+                          </p>
+                        )}
+                      </div>
+                      <p className="font-semibold text-lab-black-900 dark:text-lab-black-50">
+                        ₹{test.price}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Appointment Details */}
+              <div className="space-y-3">
+                <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                  <Calendar className="w-5 h-5" /> Appointment Details
+                </h4>
+                <div className="bg-lab-black-50 dark:bg-lab-black-900 p-4 rounded-lg space-y-2 text-sm">
+                  <p className="text-lab-black-700 dark:text-lab-black-200">
+                    <strong>Date:</strong> {formatDate(selectedAppointment.appointmentDate)}
+                  </p>
+                  <p className="text-lab-black-700 dark:text-lab-black-200">
+                    <strong>Time:</strong> {selectedAppointment.appointmentTime}
+                  </p>
+                  <p className="text-lab-black-700 dark:text-lab-black-200">
+                    <strong>Type:</strong>{' '}
+                    {selectedAppointment.collectionType === 'home_collection'
+                      ? 'Home Collection'
+                      : 'Visit Lab'}
+                  </p>
+                  <p className="text-lab-black-700 dark:text-lab-black-200">
+                    <strong>Status:</strong>{' '}
+                    <span
+                      className={`px-2 py-1 rounded text-xs font-semibold ${statusColors[selectedAppointment.status]}`}
+                    >
+                      {statusLabels[selectedAppointment.status]}
+                    </span>
+                  </p>
+                </div>
+              </div>
+
+              {/* Collection Address */}
+              {selectedAppointment.collectionType === 'home_collection' &&
+                selectedAppointment.collectionAddress && (
+                  <div className="space-y-3">
+                    <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                      <MapPin className="w-5 h-5" /> Collection Address
+                    </h4>
+                    <div className="bg-lab-yellow-50 dark:bg-lab-yellow-900/20 p-4 rounded-lg text-sm text-lab-black-700 dark:text-lab-black-200">
+                      <p>{selectedAppointment.collectionAddress.street}</p>
+                      <p>
+                        {selectedAppointment.collectionAddress.city},{' '}
+                        {selectedAppointment.collectionAddress.state}{' '}
+                        {selectedAppointment.collectionAddress.zipCode}
+                      </p>
+                      <p>{selectedAppointment.collectionAddress.country}</p>
+                    </div>
+                  </div>
+                )}
+
+              {/* Status Update Actions */}
+              {selectedAppointment.status !== 'completed' &&
+                selectedAppointment.status !== 'cancelled' && (
+                  <div className="space-y-3">
+                    <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                      <AlertCircle className="w-5 h-5" /> Update Status
+                    </h4>
+                    <div className="flex flex-wrap gap-2">
+                      {getNextAllowedStatuses(selectedAppointment.status).map((status) => (
+                        <button
+                          key={status}
+                          onClick={() => handleStatusUpdate(selectedAppointment._id, status)}
+                          disabled={updatingStatus}
+                          className="btn-quicklab-primary px-4 py-2 rounded-lg text-sm disabled:opacity-50"
+                        >
+                          {updatingStatus ? 'Updating...' : `Mark as ${statusLabels[status]}`}
+                        </button>
+                      ))}
+                    </div>
+                    <p className="text-xs text-lab-black-500 dark:text-lab-black-400">
+                      Note: You cannot move back to a previous status once updated.
+                    </p>
+                  </div>
+                )}
+
+              {/* Upload Report and Complete */}
+              {selectedAppointment.status === 'processing' && (
+                <div className="space-y-3 border-t border-lab-black-200 dark:border-lab-black-700 pt-4">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                    <CheckCircle className="w-5 h-5" /> Complete Appointment
+                  </h4>
+                  <p className="text-sm text-lab-black-600 dark:text-lab-black-400">
+                    Upload the lab report PDF to mark this appointment as completed.
+                  </p>
+                  <button
+                    onClick={() => setShowUploadModal(true)}
+                    className="btn-quicklab-primary px-4 py-2 rounded-lg flex items-center gap-2"
+                  >
+                    <Upload className="w-4 h-4" />
+                    Upload Report & Complete
+                  </button>
+                </div>
+              )}
+
+              {selectedAppointment.notes && (
+                <div className="space-y-3">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50">Notes</h4>
+                  <p className="text-sm text-lab-black-700 dark:text-lab-black-200 bg-lab-black-50 dark:bg-lab-black-900 p-4 rounded-lg">
+                    {selectedAppointment.notes}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Upload Report Modal */}
+      {showUploadModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-lab-black-800 rounded-lg max-w-md w-full p-6 space-y-4">
+            <div className="flex justify-between items-center">
+              <h3 className="text-xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                Upload Lab Report
+              </h3>
+              <button
+                onClick={() => {
+                  setShowUploadModal(false);
+                  setReportFile(null);
+                  setUploadNotes('');
+                }}
+                className="text-lab-black-500 hover:text-lab-black-700 dark:text-lab-black-400 dark:hover:text-lab-black-200"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-lab-black-700 dark:text-lab-black-300 mb-2">
+                  Select PDF Report
+                </label>
+                <input
+                  type="file"
+                  accept=".pdf"
+                  onChange={(e) => setReportFile(e.target.files[0])}
+                  className="block w-full text-sm text-lab-black-900 dark:text-lab-black-100
+                    file:mr-4 file:py-2 file:px-4
+                    file:rounded-lg file:border-0
+                    file:text-sm file:font-semibold
+                    file:bg-lab-yellow-500 file:text-white
+                    hover:file:bg-lab-yellow-600
+                    file:cursor-pointer cursor-pointer
+                    border border-lab-black-300 dark:border-lab-black-600 rounded-lg p-2
+                    bg-lab-black-50 dark:bg-lab-black-700"
+                />
+                {reportFile && (
+                  <p className="mt-2 text-sm text-lab-black-600 dark:text-lab-black-400">
+                    Selected: {reportFile.name}
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-lab-black-700 dark:text-lab-black-300 mb-2">
+                  Notes (Optional)
+                </label>
+                <textarea
+                  placeholder="Add any notes about the report..."
+                  className="w-full px-3 py-2 border border-lab-black-300 dark:border-lab-black-600 rounded-lg
+                    bg-lab-black-50 dark:bg-lab-black-700
+                    text-lab-black-900 dark:text-lab-black-100
+                    placeholder-lab-black-400 dark:placeholder-lab-black-500
+                    focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+                  rows="3"
+                  value={uploadNotes}
+                  onChange={(e) => setUploadNotes(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-3 pt-4 border-t border-lab-black-200 dark:border-lab-black-700">
+              <button
+                onClick={() => {
+                  setShowUploadModal(false);
+                  setReportFile(null);
+                  setUploadNotes('');
+                }}
+                className="flex-1 px-4 py-2 border border-lab-black-300 dark:border-lab-black-600 
+                  text-lab-black-700 dark:text-lab-black-300 rounded-lg hover:bg-lab-black-50 dark:hover:bg-lab-black-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleUploadReport(selectedAppointment?._id)}
+                disabled={!reportFile || uploadingReport}
+                className="flex-1 btn-quicklab-primary px-4 py-2 rounded-lg disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                {uploadingReport ? (
+                  <>
+                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                    Uploading...
+                  </>
+                ) : (
+                  <>
+                    <Upload className="w-4 h-4" />
+                    Upload & Complete
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index 991dfe4..7c5a423 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -13,6 +13,7 @@ import LabAdminLabSettings from '../pages/quicklab/LabAdminLabSettings';
 import LabStaffProfileComplete from '../pages/quicklab/LabStaffProfileComplete';
 import LabStaffWaitingForAssignment from '../pages/quicklab/LabStaffWaitingForAssignment';
 import LabStaffDashboard from '../pages/quicklab/LabStaffDashboard';
+import LabStaffMyAppointments from '../pages/quicklab/LabStaffMyAppointments';
 import LabAdminPreventGuard from './guards/LabAdminPreventGuard';
 import LabAdminSetupGuard from './guards/LabAdminSetupGuard';
 import LabStaffPreventGuard from './guards/LabStaffPreventGuard';
@@ -152,6 +153,18 @@ export default function QuickLabRoutes() {
           }
         />
 
+        {/* Lab Staff - My Appointments */}
+        <Route
+          path="/quick-lab/staff-appointments"
+          element={
+            <ProtectedRoute allowedRoles={['lab_staff']}>
+              <LabStaffSetupGuard requireProfile={true} requireLabAssignment={true}>
+                <LabStaffMyAppointments />
+              </LabStaffSetupGuard>
+            </ProtectedRoute>
+          }
+        />
+
         {/* ============ PUBLIC ROUTES ============ */}
 
         {/* Public homepage */}
diff --git a/client/src/service/labStaffService.js b/client/src/service/labStaffService.js
index 16ab6d1..c944379 100644
--- a/client/src/service/labStaffService.js
+++ b/client/src/service/labStaffService.js
@@ -31,6 +31,16 @@ export const updateMyAssignmentStatus = (appointmentId, status, notes) =>
   apiService.put(`/lab-staff/assignments/${appointmentId}/status`, { status, notes });
 export const completeAssignment = (appointmentId, notes) =>
   apiService.post(`/lab-staff/assignments/${appointmentId}/complete`, { notes });
+export const uploadReportAndComplete = (appointmentId, reportFile, notes) => {
+  const formData = new FormData();
+  formData.append('reportFile', reportFile);
+  if (notes) {
+    formData.append('notes', notes);
+  }
+  return apiService.post(`/lab-staff/assignments/${appointmentId}/upload-report`, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+};
 
 export default {
   createStaffProfile,
@@ -41,4 +51,5 @@ export default {
   getAssignmentDetails,
   updateMyAssignmentStatus,
   completeAssignment,
+  uploadReportAndComplete,
 };
diff --git a/server/Controllers/QuickLab/labAppointmentController.js b/server/Controllers/QuickLab/labAppointmentController.js
index d4b3977..5f34031 100644
--- a/server/Controllers/QuickLab/labAppointmentController.js
+++ b/server/Controllers/QuickLab/labAppointmentController.js
@@ -344,7 +344,7 @@ export const assignStaffForCollection = async (req, res) => {
       });
     }
 
-    const LabStaff = (await import('../models/Users/LabStaff.js')).default;
+    const LabStaff = (await import('../../models/Lab/LabStaff.js')).default;
     const staff = await LabStaff.findById(staffId);
     if (!staff) {
       return res.status(404).json({ message: 'Staff not found' });
diff --git a/server/Controllers/QuickLab/labStaffController.js b/server/Controllers/QuickLab/labStaffController.js
index 61648b3..0d605c7 100644
--- a/server/Controllers/QuickLab/labStaffController.js
+++ b/server/Controllers/QuickLab/labStaffController.js
@@ -1,7 +1,7 @@
-// controllers/labStaffController.js
 import mongoose from 'mongoose';
 import LabStaff from '../../models/Lab/LabStaff.js';
 import LabAppointment from '../../models/Lab/LabAppointment.js';
+import LabReport from '../../models/Lab/LabReport.js';
 import Lab from '../../models/Lab/Lab.js';
 import { uploadToCloudinary } from '../../services/uploadService.js';
 
@@ -246,6 +246,34 @@ export const updateMyAssignmentStatus = async (req, res) => {
       return res.status(403).json({ message: 'Unauthorized to update this assignment' });
     }
 
+    // Status progression rules - prevent going backwards
+    const statusOrder = ['pending', 'confirmed', 'sample_collected', 'processing', 'completed'];
+    const currentStatusIndex = statusOrder.indexOf(assignment.status);
+    const newStatusIndex = statusOrder.indexOf(status);
+
+    if (newStatusIndex < currentStatusIndex) {
+      return res.status(400).json({
+        message: 'Cannot move appointment to a previous status',
+      });
+    }
+
+    // Cancelled appointments cannot be changed
+    if (assignment.status === 'cancelled') {
+      return res.status(400).json({
+        message: 'Cannot update cancelled appointments',
+      });
+    }
+
+    // Once sample is collected or processing, cannot cancel
+    if (
+      status === 'cancelled' &&
+      ['sample_collected', 'processing', 'completed'].includes(assignment.status)
+    ) {
+      return res.status(400).json({
+        message: 'Cannot cancel appointments after sample collection',
+      });
+    }
+
     assignment.status = status;
     if (notes) {
       assignment.notes = notes;
@@ -304,3 +332,75 @@ export const completeAssignment = async (req, res) => {
     res.status(500).json({ message: 'Failed to complete assignment' });
   }
 };
+
+// Upload report and mark appointment as completed
+export const uploadReportAndComplete = async (req, res) => {
+  try {
+    const { profileId } = req.user;
+    const { appointmentId } = req.params;
+    const { notes } = req.body;
+
+    if (!req.file) {
+      return res.status(400).json({ message: 'Report PDF file is required' });
+    }
+
+    const staff = await LabStaff.findById(profileId);
+    if (!staff) {
+      return res.status(404).json({ message: 'Staff profile not found' });
+    }
+
+    const assignment = await LabAppointment.findById(appointmentId).populate('patientId labId');
+    if (!assignment) {
+      return res.status(404).json({ message: 'Assignment not found' });
+    }
+
+    if (assignment.assignedStaffId?.toString() !== profileId.toString()) {
+      return res.status(403).json({ message: 'Unauthorized to upload report for this assignment' });
+    }
+
+    // Upload PDF to Cloudinary
+    const uploadResult = await uploadToCloudinary(req.file.path, {
+      resource_type: 'raw',
+      folder: 'lab-reports',
+    });
+
+    // Create lab report
+    const labReport = new LabReport({
+      appointmentId: assignment._id,
+      patientId: assignment.patientId._id,
+      labId: assignment.labId._id,
+      reportFile: {
+        url: uploadResult.url,
+        fileName: req.file.originalname,
+        uploadedAt: new Date(),
+      },
+      reportDate: new Date(),
+    });
+
+    await labReport.save();
+
+    // Update appointment with report and mark as completed
+    assignment.reportId = labReport._id;
+    assignment.status = 'completed';
+    if (notes) {
+      assignment.notes = notes;
+    }
+    await assignment.save();
+
+    res.json({
+      message: 'Report uploaded and appointment marked as completed',
+      assignment: await assignment.populate([
+        { path: 'patientId', select: 'firstName lastName' },
+        { path: 'labId', select: 'name' },
+        { path: 'reportId' },
+      ]),
+      report: labReport,
+    });
+  } catch (error) {
+    console.error('Error uploading report:', error);
+    res.status(500).json({
+      message: 'Failed to upload report',
+      error: process.env.NODE_ENV === 'development' ? error.message : undefined,
+    });
+  }
+};
diff --git a/server/Routes/QuickLab/labStaffRoutes.js b/server/Routes/QuickLab/labStaffRoutes.js
index d830771..3c57b4a 100644
--- a/server/Routes/QuickLab/labStaffRoutes.js
+++ b/server/Routes/QuickLab/labStaffRoutes.js
@@ -10,6 +10,7 @@ import {
   getAssignmentDetails,
   updateMyAssignmentStatus,
   completeAssignment,
+  uploadReportAndComplete,
 } from '../../Controllers/QuickLab/labStaffController.js';
 import upload from '../../Middleware/upload.js';
 
@@ -53,5 +54,12 @@ router.post(
   authorize('lab_staff'),
   completeAssignment
 );
+router.post(
+  '/assignments/:appointmentId/upload-report',
+  authenticate,
+  authorize('lab_staff'),
+  upload.single('reportFile'),
+  uploadReportAndComplete
+);
 
 export default router;

From fac8e954f5e12d2ea0ca1541ac30a6f430f8d552 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 28 Dec 2025 11:24:20 +0530
Subject: [PATCH 41/44] Add patient lab appointments experience

---
 .../src/components/quicklab/DesktopNavbar.jsx |  12 +
 .../src/components/quicklab/MobileNavbar.jsx  |  11 +
 .../src/pages/patient/PatientAppointments.jsx | 469 ++++++++++++++++-
 .../pages/quicklab/PatientLabAppointments.jsx | 494 ++++++++++++++++++
 4 files changed, 971 insertions(+), 15 deletions(-)
 create mode 100644 client/src/pages/quicklab/PatientLabAppointments.jsx

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index 363f339..514114b 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -288,6 +288,18 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
               </button>
             )}
 
+            {/* Patient: Appointments (doctor & lab) */}
+            {isAuthenticated && user?.role === 'patient' && (
+              <button
+                onClick={() => navigate('/patient/appointments')}
+                className="hidden md:inline-flex items-center gap-2 px-3 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                title="My Appointments"
+              >
+                <Calendar className="h-5 w-5" />
+                My Appointments
+              </button>
+            )}
+
             {/* Conditional: Login/Register OR Logout */}
             {isAuthenticated ? (
               <button
diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index 38320c6..4efb036 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -302,6 +302,17 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
             </button>
           )}
 
+          {/* Patient: Appointments */}
+          {isAuthenticated && user?.role === 'patient' && (
+            <button
+              onClick={() => navigate('/patient/appointments')}
+              className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+            >
+              <Calendar className="h-6 w-6" />
+              <span className="text-xs font-medium">Appts</span>
+            </button>
+          )}
+
           {/* Conditional: Login/Account OR Logout */}
           {isAuthenticated ? (
             <button
diff --git a/client/src/pages/patient/PatientAppointments.jsx b/client/src/pages/patient/PatientAppointments.jsx
index e27529e..191b833 100644
--- a/client/src/pages/patient/PatientAppointments.jsx
+++ b/client/src/pages/patient/PatientAppointments.jsx
@@ -1,7 +1,23 @@
 import { useEffect, useMemo, useState } from 'react';
+import {
+  Home,
+  Building2,
+  Calendar,
+  Clock,
+  MapPin,
+  Phone,
+  TestTube,
+  AlertCircle,
+  XCircle,
+  CheckCircle,
+  User,
+  Download,
+  FileText,
+} from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { getPatientAppointments } from '../../service/appointmentApiService';
 import { getPatientAppointmentPrescription } from '../../service/prescriptionApiSevice';
+import { getPatientLabAppointments } from '../../service/labAppointmentService';
 import AppointmentTabs from '../../components/Patient/PatientAppointments/AppointmentTabs';
 import AppointmentHeader from '../../components/Patient/PatientAppointments/AppointmentHeader';
 import ErrorState from '../../components/Patient/PatientAppointments/ErrorState';
@@ -15,10 +31,20 @@ const PatientAppointments = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [filterStatus, setFilterStatus] = useState('all');
   const [activeTab, setActiveTab] = useState('upcoming');
+  const [labAppointments, setLabAppointments] = useState([]);
+  const [labLoading, setLabLoading] = useState(true);
+  const [labError, setLabError] = useState(null);
+  const [activeSection, setActiveSection] = useState('doctor');
+  const [labSearchTerm, setLabSearchTerm] = useState('');
+  const [labStatusFilter, setLabStatusFilter] = useState('all');
+  const [labCollectionFilter, setLabCollectionFilter] = useState('all');
+  const [selectedLabAppointment, setSelectedLabAppointment] = useState(null);
+  const [showLabModal, setShowLabModal] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
     fetchAppointments();
+    fetchLabAppointments();
   }, []);
 
   const fetchAppointments = async () => {
@@ -74,6 +100,50 @@ const PatientAppointments = () => {
     return filtered;
   }, [appointments, searchTerm, filterStatus]);
 
+  const labStatusColors = {
+    pending: 'bg-amber-100 text-amber-800',
+    confirmed: 'bg-blue-100 text-blue-800',
+    sample_collected: 'bg-purple-100 text-purple-800',
+    processing: 'bg-indigo-100 text-indigo-800',
+    completed: 'bg-green-100 text-green-800',
+    cancelled: 'bg-red-100 text-red-800',
+  };
+
+  const labFilteredAppointments = useMemo(() => {
+    const term = labSearchTerm.trim().toLowerCase();
+    return labAppointments.filter((appt) => {
+      if (labStatusFilter !== 'all' && appt.status !== labStatusFilter) return false;
+      if (labCollectionFilter !== 'all' && appt.collectionType !== labCollectionFilter)
+        return false;
+
+      if (term) {
+        const matchLab = appt.labId?.name?.toLowerCase().includes(term);
+        const matchTest = appt.tests?.some((t) => t.testName?.toLowerCase().includes(term));
+        return matchLab || matchTest;
+      }
+      return true;
+    });
+  }, [labAppointments, labCollectionFilter, labSearchTerm, labStatusFilter]);
+
+  const labUpcomingCount = labAppointments.filter(
+    (a) => a.status === 'pending' || a.status === 'confirmed' || a.status === 'sample_collected'
+  ).length;
+
+  const fetchLabAppointments = async () => {
+    try {
+      setLabLoading(true);
+      const response = await getPatientLabAppointments();
+      const data = response.data || response;
+      setLabAppointments(data.appointments || []);
+      setLabError(null);
+    } catch (err) {
+      setLabError('Failed to fetch lab appointments.');
+      console.error('Error fetching lab appointments:', err);
+    } finally {
+      setLabLoading(false);
+    }
+  };
+
   if (loading) {
     return <Loading />;
   }
@@ -84,22 +154,391 @@ const PatientAppointments = () => {
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
-        <AppointmentHeader
-          searchTerm={searchTerm}
-          setSearchTerm={setSearchTerm}
-          filterStatus={filterStatus}
-          setFilterStatus={setFilterStatus}
-        />
-
-        <AppointmentTabs
-          appointments={filteredAppointments}
-          prescriptionStatus={prescriptionStatus}
-          activeTab={activeTab}
-          setActiveTab={setActiveTab}
-          onAppointmentClick={(id) => navigate(`/patient/appointment/${id}`)}
-        />
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="md:w-64 space-y-4">
+            <div className="border border-gray-200 rounded-2xl bg-white shadow-sm p-4 space-y-3">
+              <h3 className="text-sm font-semibold text-gray-900">My Appointments</h3>
+              <button
+                onClick={() => setActiveSection('doctor')}
+                className={`w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg border transition ${
+                  activeSection === 'doctor'
+                    ? 'border-yellow-400 bg-yellow-50 text-yellow-800'
+                    : 'border-gray-200 bg-gray-50 hover:border-yellow-300 text-gray-800'
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <Calendar className="w-4 h-4" />
+                  <span className="text-sm font-medium">Doctor</span>
+                </div>
+                <span className="text-xs text-gray-600">{filteredAppointments.length}</span>
+              </button>
+              <button
+                onClick={() => setActiveSection('lab')}
+                className={`w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg border transition ${
+                  activeSection === 'lab'
+                    ? 'border-yellow-400 bg-yellow-50 text-yellow-800'
+                    : 'border-gray-200 bg-gray-50 hover:border-yellow-300 text-gray-800'
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <TestTube className="w-4 h-4" />
+                  <span className="text-sm font-medium">Lab</span>
+                </div>
+                <span className="text-xs text-gray-600">{labAppointments.length}</span>
+              </button>
+            </div>
+            <div className="border border-gray-200 rounded-2xl bg-white shadow-sm p-4">
+              <p className="text-sm text-gray-700 font-semibold">Upcoming</p>
+              <div className="mt-2 grid grid-cols-2 gap-2 text-sm text-gray-600">
+                <span>
+                  Doctor: {filteredAppointments.filter((a) => a.status !== 'completed').length}
+                </span>
+                <span>Lab: {labUpcomingCount}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex-1 space-y-6">
+            {activeSection === 'doctor' && (
+              <div className="space-y-4">
+                <AppointmentHeader
+                  searchTerm={searchTerm}
+                  setSearchTerm={setSearchTerm}
+                  filterStatus={filterStatus}
+                  setFilterStatus={setFilterStatus}
+                />
+
+                <AppointmentTabs
+                  appointments={filteredAppointments}
+                  prescriptionStatus={prescriptionStatus}
+                  activeTab={activeTab}
+                  setActiveTab={setActiveTab}
+                  onAppointmentClick={(id) => navigate(`/patient/appointment/${id}`)}
+                />
+              </div>
+            )}
+
+            {activeSection === 'lab' && (
+              <div className="space-y-4">
+                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+                  <div>
+                    <h2 className="text-xl font-semibold text-gray-900">Lab Appointments</h2>
+                    <p className="text-sm text-gray-600">
+                      Search, filter, and open any lab appointment to view full details.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="card-quicklab p-4 space-y-3">
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                    <input
+                      type="text"
+                      placeholder="Search by lab name or test"
+                      value={labSearchTerm}
+                      onChange={(e) => setLabSearchTerm(e.target.value)}
+                      className="w-full px-4 py-2 rounded-lg border border-gray-200 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-yellow-500"
+                    />
+                    <select
+                      value={labStatusFilter}
+                      onChange={(e) => setLabStatusFilter(e.target.value)}
+                      className="px-4 py-2 rounded-lg border border-gray-200 bg-white text-gray-900 focus:outline-none"
+                    >
+                      <option value="all">All statuses</option>
+                      <option value="pending">Pending</option>
+                      <option value="confirmed">Confirmed</option>
+                      <option value="sample_collected">Sample Collected</option>
+                      <option value="processing">Processing</option>
+                      <option value="completed">Completed</option>
+                      <option value="cancelled">Cancelled</option>
+                    </select>
+                    <select
+                      value={labCollectionFilter}
+                      onChange={(e) => setLabCollectionFilter(e.target.value)}
+                      className="px-4 py-2 rounded-lg border border-gray-200 bg-white text-gray-900 focus:outline-none"
+                    >
+                      <option value="all">All collection types</option>
+                      <option value="home_collection">Home Collection</option>
+                      <option value="visit_lab">Visit Lab</option>
+                    </select>
+                  </div>
+                </div>
+
+                {labLoading ? (
+                  <div className="border border-gray-200 rounded-xl p-4 shadow-sm bg-white text-sm text-gray-700">
+                    Loading lab appointments...
+                  </div>
+                ) : labError ? (
+                  <ErrorState message={labError} onRetry={fetchLabAppointments} />
+                ) : labFilteredAppointments.length === 0 ? (
+                  <div className="border border-gray-200 rounded-xl p-6 shadow-sm bg-white text-center space-y-2">
+                    <AlertCircle className="w-6 h-6 text-gray-400 mx-auto" />
+                    <p className="text-sm text-gray-700">No lab appointments match your filters.</p>
+                    <p className="text-xs text-gray-500">Try adjusting filters or search.</p>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {labFilteredAppointments.map((labAppt) => (
+                      <button
+                        key={labAppt._id}
+                        onClick={() => {
+                          setSelectedLabAppointment(labAppt);
+                          setShowLabModal(true);
+                        }}
+                        className="w-full text-left border border-gray-200 rounded-xl p-4 shadow-sm bg-white hover:border-yellow-400 transition flex flex-col gap-3"
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="space-y-1">
+                            <p className="font-semibold text-gray-900">
+                              {labAppt.labId?.name || 'Lab'}
+                            </p>
+                            <p className="text-sm text-gray-600 flex items-center gap-2">
+                              <Calendar className="w-4 h-4 text-gray-500" />
+                              {new Date(labAppt.appointmentDate).toLocaleDateString('en-US', {
+                                month: 'short',
+                                day: 'numeric',
+                                year: 'numeric',
+                              })}
+                              <span className="text-gray-400">•</span>
+                              {labAppt.appointmentTime}
+                            </p>
+                          </div>
+                          <span
+                            className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                              labStatusColors[labAppt.status] || 'bg-gray-100 text-gray-700'
+                            }`}
+                          >
+                            {labAppt.status.replace('_', ' ')}
+                          </span>
+                        </div>
+
+                        <div className="flex items-center gap-2 text-sm text-gray-700">
+                          {labAppt.collectionType === 'home_collection' ? (
+                            <Home className="w-4 h-4 text-gray-500" />
+                          ) : (
+                            <Building2 className="w-4 h-4 text-gray-500" />
+                          )}
+                          <span>
+                            {labAppt.collectionType === 'home_collection'
+                              ? 'Home collection'
+                              : 'Visit lab'}{' '}
+                            • {labAppt.tests?.length || 0} tests
+                          </span>
+                        </div>
+
+                        <div className="flex flex-wrap gap-2 text-xs text-gray-600">
+                          <span className="px-2 py-1 bg-gray-100 rounded">
+                            Payment: {labAppt.paymentStatus || 'pending'}
+                          </span>
+                          {labAppt.reportId?.reportFile?.url && (
+                            <span className="px-2 py-1 bg-green-100 text-green-800 rounded inline-flex items-center gap-1">
+                              <CheckCircle className="w-3 h-3" /> Report ready
+                            </span>
+                          )}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
       </div>
+
+      {showLabModal && selectedLabAppointment && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+            <div className="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+              <div className="space-y-1">
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {selectedLabAppointment.labId?.name || 'Lab Appointment'}
+                </h3>
+                <div className="flex flex-wrap items-center gap-2 text-sm">
+                  <span
+                    className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                      labStatusColors[selectedLabAppointment.status] || 'bg-gray-100 text-gray-700'
+                    }`}
+                  >
+                    {selectedLabAppointment.status.replace('_', ' ')}
+                  </span>
+                  <span className="px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-700">
+                    {selectedLabAppointment.collectionType === 'home_collection'
+                      ? 'Home collection'
+                      : 'Visit lab'}
+                  </span>
+                  <span className="px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-700">
+                    Payment: {selectedLabAppointment.paymentStatus || 'pending'}
+                  </span>
+                </div>
+              </div>
+              <button
+                onClick={() => setShowLabModal(false)}
+                className="text-gray-500 hover:text-gray-800"
+              >
+                <XCircle className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="border border-gray-200 rounded-lg p-4 space-y-2">
+                  <h4 className="font-semibold text-gray-900 flex items-center gap-2">
+                    <Calendar className="w-5 h-5" /> Schedule
+                  </h4>
+                  <p className="text-sm text-gray-700 flex items-center gap-2">
+                    <Calendar className="w-4 h-4 text-gray-500" />
+                    {new Date(selectedLabAppointment.appointmentDate).toLocaleDateString('en-US', {
+                      weekday: 'short',
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    })}
+                  </p>
+                  <p className="text-sm text-gray-700 flex items-center gap-2">
+                    <Clock className="w-4 h-4 text-gray-500" />{' '}
+                    {selectedLabAppointment.appointmentTime}
+                  </p>
+                  <p className="text-sm text-gray-700 flex items-center gap-2">
+                    <TestTube className="w-4 h-4 text-gray-500" />{' '}
+                    {selectedLabAppointment.tests?.length || 0} tests
+                  </p>
+                </div>
+
+                <div className="border border-gray-200 rounded-lg p-4 space-y-2">
+                  <h4 className="font-semibold text-gray-900 flex items-center gap-2">
+                    <Building2 className="w-5 h-5" /> Lab details
+                  </h4>
+                  <p className="text-sm text-gray-700">{selectedLabAppointment.labId?.name}</p>
+                  {selectedLabAppointment.labId?.address && (
+                    <p className="text-sm text-gray-700 flex items-start gap-2">
+                      <MapPin className="w-4 h-4 text-yellow-600 mt-0.5" />
+                      <span>
+                        {selectedLabAppointment.labId.address.street},{' '}
+                        {selectedLabAppointment.labId.address.city},{' '}
+                        {selectedLabAppointment.labId.address.state}{' '}
+                        {selectedLabAppointment.labId.address.zipCode}
+                      </span>
+                    </p>
+                  )}
+                  {selectedLabAppointment.labId?.contact?.phone && (
+                    <p className="text-sm text-gray-700 flex items-center gap-2">
+                      <Phone className="w-4 h-4 text-yellow-600" />{' '}
+                      {selectedLabAppointment.labId.contact.phone}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="border border-gray-200 rounded-lg p-4 space-y-2">
+                  <h4 className="font-semibold text-gray-900 flex items-center gap-2">
+                    {selectedLabAppointment.collectionType === 'home_collection' ? (
+                      <Home className="w-5 h-5" />
+                    ) : (
+                      <Building2 className="w-5 h-5" />
+                    )}
+                    {selectedLabAppointment.collectionType === 'home_collection'
+                      ? 'Home collection address'
+                      : 'Visit lab'}
+                  </h4>
+                  {selectedLabAppointment.collectionType === 'home_collection' &&
+                  selectedLabAppointment.collectionAddress ? (
+                    <p className="text-sm text-gray-700 flex items-start gap-2">
+                      <MapPin className="w-4 h-4 text-yellow-600 mt-0.5" />
+                      <span>
+                        {selectedLabAppointment.collectionAddress.street},{' '}
+                        {selectedLabAppointment.collectionAddress.city},{' '}
+                        {selectedLabAppointment.collectionAddress.state}{' '}
+                        {selectedLabAppointment.collectionAddress.zipCode}
+                      </span>
+                    </p>
+                  ) : (
+                    <p className="text-sm text-gray-700">Please arrive 10 minutes early.</p>
+                  )}
+                </div>
+
+                <div className="border border-gray-200 rounded-lg p-4 space-y-2">
+                  <h4 className="font-semibold text-gray-900 flex items-center gap-2">
+                    <User className="w-5 h-5" /> Assigned staff
+                  </h4>
+                  {selectedLabAppointment.assignedStaffId ? (
+                    <>
+                      <p className="text-sm text-gray-800 font-medium">
+                        {selectedLabAppointment.assignedStaffId.firstName}{' '}
+                        {selectedLabAppointment.assignedStaffId.lastName}
+                      </p>
+                      {selectedLabAppointment.assignedStaffId.phoneNumber && (
+                        <p className="text-sm text-gray-700 flex items-center gap-2">
+                          <Phone className="w-4 h-4 text-yellow-600" />
+                          {selectedLabAppointment.assignedStaffId.phoneNumber}
+                        </p>
+                      )}
+                    </>
+                  ) : (
+                    <p className="text-sm text-gray-700">
+                      Staff assignment will show once confirmed.
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="border border-gray-200 rounded-lg p-4 space-y-3">
+                <h4 className="font-semibold text-gray-900 flex items-center gap-2">
+                  <TestTube className="w-5 h-5" /> Tests
+                </h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {selectedLabAppointment.tests?.map((test, idx) => (
+                    <div
+                      key={idx}
+                      className="bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center justify-between"
+                    >
+                      <div>
+                        <p className="font-medium text-gray-900">{test.testName}</p>
+                        {test.testCode && (
+                          <p className="text-xs text-gray-600">Code: {test.testCode}</p>
+                        )}
+                      </div>
+                      <p className="font-semibold text-gray-900">₹{test.price}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="border border-gray-200 rounded-lg p-4 space-y-2">
+                  <h4 className="font-semibold text-gray-900 flex items-center gap-2">
+                    <FileText className="w-5 h-5" /> Notes
+                  </h4>
+                  <p className="text-sm text-gray-700">
+                    {selectedLabAppointment.notes || 'No additional notes'}
+                  </p>
+                </div>
+
+                <div className="border border-gray-200 rounded-lg p-4 space-y-2">
+                  <h4 className="font-semibold text-gray-900 flex items-center gap-2">
+                    <CheckCircle className="w-5 h-5" /> Report
+                  </h4>
+                  {selectedLabAppointment.reportId?.reportFile?.url ? (
+                    <a
+                      href={selectedLabAppointment.reportId.reportFile.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-yellow-500 text-white hover:bg-yellow-600"
+                    >
+                      <Download className="w-4 h-4" /> Download report
+                    </a>
+                  ) : (
+                    <p className="text-sm text-gray-700">
+                      Report will be available after completion.
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/client/src/pages/quicklab/PatientLabAppointments.jsx b/client/src/pages/quicklab/PatientLabAppointments.jsx
new file mode 100644
index 0000000..2f60314
--- /dev/null
+++ b/client/src/pages/quicklab/PatientLabAppointments.jsx
@@ -0,0 +1,494 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Calendar,
+  Clock,
+  MapPin,
+  Phone,
+  Home,
+  Building2,
+  CheckCircle,
+  AlertCircle,
+  XCircle,
+  TestTube,
+  FileText,
+  User,
+  Download,
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { getPatientLabAppointments } from '../../service/labAppointmentService';
+import '../../quicklab.css';
+
+export default function PatientLabAppointments() {
+  const [appointments, setAppointments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filters, setFilters] = useState({ status: 'all', collectionType: 'all' });
+  const [selectedAppointment, setSelectedAppointment] = useState(null);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+
+  const statusColors = {
+    pending:
+      'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',
+    confirmed:
+      'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400 border-blue-200 dark:border-blue-800',
+    sample_collected:
+      'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-400 border-purple-200 dark:border-purple-800',
+    processing:
+      'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-400 border-indigo-200 dark:border-indigo-800',
+    completed:
+      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400 border-green-200 dark:border-green-800',
+    cancelled:
+      'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400 border-red-200 dark:border-red-800',
+  };
+
+  const statusLabels = {
+    pending: 'Pending',
+    confirmed: 'Confirmed',
+    sample_collected: 'Sample Collected',
+    processing: 'Processing',
+    completed: 'Completed',
+    cancelled: 'Cancelled',
+  };
+
+  useEffect(() => {
+    fetchAppointments();
+  }, []);
+
+  const fetchAppointments = async () => {
+    try {
+      setLoading(true);
+      const response = await getPatientLabAppointments();
+      const data = response.data || response;
+      setAppointments(data.appointments || []);
+      setError(null);
+    } catch (err) {
+      console.error('Failed to fetch lab appointments:', err);
+      setError('Failed to load lab appointments');
+      toast.error('Failed to load lab appointments');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredAppointments = useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return appointments.filter((appt) => {
+      if (filters.status !== 'all' && appt.status !== filters.status) return false;
+      if (filters.collectionType !== 'all' && appt.collectionType !== filters.collectionType)
+        return false;
+
+      if (term) {
+        const matchesLab = appt.labId?.name?.toLowerCase().includes(term);
+        const matchesTest = appt.tests?.some((t) => t.testName?.toLowerCase().includes(term));
+        return matchesLab || matchesTest;
+      }
+      return true;
+    });
+  }, [appointments, filters, searchTerm]);
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const upcomingCount = appointments.filter(
+    (a) => a.status === 'pending' || a.status === 'confirmed' || a.status === 'sample_collected'
+  ).length;
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 flex items-center justify-center">
+        <div className="card-quicklab p-6 flex items-center gap-3">
+          <Clock className="w-5 h-5 animate-spin text-lab-yellow-600" />
+          <p className="text-lab-black-800 dark:text-lab-black-100">
+            Loading your lab appointments...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 flex items-center justify-center">
+        <div className="card-quicklab p-6 space-y-3 text-center">
+          <AlertCircle className="w-6 h-6 text-red-500 mx-auto" />
+          <p className="text-lab-black-800 dark:text-lab-black-50">{error}</p>
+          <button onClick={fetchAppointments} className="btn-quicklab-primary px-4 py-2 rounded-lg">
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-lab-yellow-50 via-lab-black-50 to-white dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900 p-4 md:p-8 pt-20">
+      <div className="max-w-6xl mx-auto space-y-6">
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div className="space-y-1">
+            <p className="text-sm uppercase tracking-wide text-lab-black-500 dark:text-lab-black-300">
+              My Lab Appointments
+            </p>
+            <h1 className="text-3xl font-bold text-lab-black-900 dark:text-lab-black-50">
+              Track tests & reports
+            </h1>
+            <p className="text-lab-black-600 dark:text-lab-black-300">
+              View collection details, assigned staff, and download your reports.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-3 w-full md:w-auto">
+            <div className="card-quicklab p-3 text-center">
+              <p className="text-xs text-lab-black-500 dark:text-lab-black-400">Total</p>
+              <p className="text-xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                {appointments.length}
+              </p>
+            </div>
+            <div className="card-quicklab p-3 text-center">
+              <p className="text-xs text-lab-black-500 dark:text-lab-black-400">Upcoming</p>
+              <p className="text-xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                {upcomingCount}
+              </p>
+            </div>
+            <div className="card-quicklab p-3 text-center">
+              <p className="text-xs text-lab-black-500 dark:text-lab-black-400">Completed</p>
+              <p className="text-xl font-bold text-lab-black-900 dark:text-lab-black-50">
+                {appointments.filter((a) => a.status === 'completed').length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="card-quicklab p-4 flex flex-col md:flex-row gap-3 md:items-center md:justify-between">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Search by lab name or test"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-4 py-2 rounded-lg border border-lab-black-200 dark:border-lab-black-700 bg-white dark:bg-lab-black-800 text-lab-black-900 dark:text-lab-black-50 focus:outline-none focus:ring-2 focus:ring-lab-yellow-500"
+            />
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <select
+              value={filters.status}
+              onChange={(e) => setFilters((prev) => ({ ...prev, status: e.target.value }))}
+              className="px-3 py-2 rounded-lg border border-lab-black-200 dark:border-lab-black-700 bg-white dark:bg-lab-black-800 text-lab-black-900 dark:text-lab-black-50 focus:outline-none"
+            >
+              <option value="all">All statuses</option>
+              <option value="pending">Pending</option>
+              <option value="confirmed">Confirmed</option>
+              <option value="sample_collected">Sample Collected</option>
+              <option value="processing">Processing</option>
+              <option value="completed">Completed</option>
+              <option value="cancelled">Cancelled</option>
+            </select>
+
+            <select
+              value={filters.collectionType}
+              onChange={(e) => setFilters((prev) => ({ ...prev, collectionType: e.target.value }))}
+              className="px-3 py-2 rounded-lg border border-lab-black-200 dark:border-lab-black-700 bg-white dark:bg-lab-black-800 text-lab-black-900 dark:text-lab-black-50 focus:outline-none"
+            >
+              <option value="all">All collection types</option>
+              <option value="home_collection">Home Collection</option>
+              <option value="visit_lab">Visit Lab</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Appointments list */}
+        {filteredAppointments.length === 0 ? (
+          <div className="card-quicklab p-8 text-center space-y-2">
+            <AlertCircle className="w-6 h-6 text-lab-black-400 dark:text-lab-black-500 mx-auto" />
+            <p className="text-lab-black-700 dark:text-lab-black-200">No lab appointments found</p>
+            <p className="text-sm text-lab-black-500 dark:text-lab-black-400">
+              Try clearing filters or book a new test.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filteredAppointments.map((appointment) => (
+              <div
+                key={appointment._id}
+                className="card-quicklab border border-lab-black-200 dark:border-lab-black-700 hover:border-lab-yellow-400 transition-all p-4"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 space-y-2">
+                    <div className="flex flex-wrap items-center gap-3">
+                      <p className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                        {appointment.labId?.name || 'Lab'}
+                      </p>
+                      <span
+                        className={`px-3 py-1 rounded-full text-xs font-semibold border ${statusColors[appointment.status]}`}
+                      >
+                        {statusLabels[appointment.status]}
+                      </span>
+                      <span className="px-2 py-1 rounded-full text-xs bg-lab-black-100 dark:bg-lab-black-800 text-lab-black-700 dark:text-lab-black-200">
+                        {appointment.collectionType === 'home_collection'
+                          ? 'Home collection'
+                          : 'Visit lab'}
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-sm text-lab-black-700 dark:text-lab-black-300">
+                      <div className="flex items-center gap-2">
+                        <Calendar className="w-4 h-4 text-lab-black-500" />
+                        <span>{formatDate(appointment.appointmentDate)}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Clock className="w-4 h-4 text-lab-black-500" />
+                        <span>{appointment.appointmentTime}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <TestTube className="w-4 h-4 text-lab-black-500" />
+                        <span>{appointment.tests?.length || 0} test(s)</span>
+                      </div>
+                    </div>
+
+                    {appointment.collectionType === 'home_collection' &&
+                      appointment.collectionAddress && (
+                        <div className="flex items-start gap-2 text-sm text-lab-black-700 dark:text-lab-black-300">
+                          <MapPin className="w-4 h-4 text-lab-yellow-600 mt-0.5 flex-shrink-0" />
+                          <span>
+                            {appointment.collectionAddress.street},{' '}
+                            {appointment.collectionAddress.city},
+                            {appointment.collectionAddress.state}{' '}
+                            {appointment.collectionAddress.zipCode}
+                          </span>
+                        </div>
+                      )}
+                  </div>
+
+                  <div className="flex flex-col items-end gap-2">
+                    <p className="text-sm text-lab-black-600 dark:text-lab-black-400">
+                      Total: <span className="font-semibold">₹{appointment.totalAmount}</span>
+                    </p>
+                    <p className="text-xs text-lab-black-500 dark:text-lab-black-400">
+                      Payment: {appointment.paymentStatus || 'pending'}
+                    </p>
+                    <button
+                      onClick={() => {
+                        setSelectedAppointment(appointment);
+                        setShowDetailModal(true);
+                      }}
+                      className="btn-quicklab-secondary px-3 py-2 text-sm rounded-lg"
+                    >
+                      View details
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Detail Modal */}
+      {showDetailModal && selectedAppointment && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-lab-black-800 rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+            <div className="sticky top-0 bg-white dark:bg-lab-black-800 border-b border-lab-black-200 dark:border-lab-black-700 p-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-lab-black-900 dark:text-lab-black-50">
+                {selectedAppointment.labId?.name || 'Lab Appointment'}
+              </h3>
+              <button
+                onClick={() => setShowDetailModal(false)}
+                className="text-lab-black-500 hover:text-lab-black-700 dark:hover:text-lab-black-300"
+              >
+                <XCircle className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-6">
+              <div className="flex flex-wrap items-center gap-3">
+                <span
+                  className={`px-3 py-1 rounded-full text-xs font-semibold border ${statusColors[selectedAppointment.status]}`}
+                >
+                  {statusLabels[selectedAppointment.status]}
+                </span>
+                <span className="px-3 py-1 rounded-full text-xs bg-lab-black-100 dark:bg-lab-black-800 text-lab-black-700 dark:text-lab-black-200">
+                  {selectedAppointment.collectionType === 'home_collection'
+                    ? 'Home collection'
+                    : 'Visit lab'}
+                </span>
+                <span className="px-3 py-1 rounded-full text-xs bg-lab-black-100 dark:bg-lab-black-800 text-lab-black-700 dark:text-lab-black-200">
+                  Payment: {selectedAppointment.paymentStatus || 'pending'}
+                </span>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="card-quicklab p-4 space-y-2">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                    <Calendar className="w-5 h-5" /> Schedule
+                  </h4>
+                  <p className="text-sm text-lab-black-700 dark:text-lab-black-200 flex items-center gap-2">
+                    <Calendar className="w-4 h-4 text-lab-black-500" />{' '}
+                    {formatDate(selectedAppointment.appointmentDate)}
+                  </p>
+                  <p className="text-sm text-lab-black-700 dark:text-lab-black-200 flex items-center gap-2">
+                    <Clock className="w-4 h-4 text-lab-black-500" />{' '}
+                    {selectedAppointment.appointmentTime}
+                  </p>
+                  <p className="text-sm text-lab-black-700 dark:text-lab-black-200 flex items-center gap-2">
+                    <TestTube className="w-4 h-4 text-lab-black-500" />{' '}
+                    {selectedAppointment.tests?.length || 0} tests
+                  </p>
+                </div>
+
+                <div className="card-quicklab p-4 space-y-2">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                    <Building2 className="w-5 h-5" /> Lab details
+                  </h4>
+                  <p className="text-sm text-lab-black-700 dark:text-lab-black-200">
+                    {selectedAppointment.labId?.name}
+                  </p>
+                  {selectedAppointment.labId?.address && (
+                    <p className="text-sm text-lab-black-700 dark:text-lab-black-200 flex items-start gap-2">
+                      <MapPin className="w-4 h-4 text-lab-yellow-600 mt-0.5" />
+                      <span>
+                        {selectedAppointment.labId.address.street},{' '}
+                        {selectedAppointment.labId.address.city},
+                        {selectedAppointment.labId.address.state}{' '}
+                        {selectedAppointment.labId.address.zipCode}
+                      </span>
+                    </p>
+                  )}
+                  {selectedAppointment.labId?.contact?.phone && (
+                    <p className="text-sm text-lab-black-700 dark:text-lab-black-200 flex items-center gap-2">
+                      <Phone className="w-4 h-4 text-lab-yellow-600" />{' '}
+                      {selectedAppointment.labId.contact.phone}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Collection Address / Staff */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="card-quicklab p-4 space-y-2">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                    {selectedAppointment.collectionType === 'home_collection' ? (
+                      <Home className="w-5 h-5" />
+                    ) : (
+                      <Building2 className="w-5 h-5" />
+                    )}
+                    {selectedAppointment.collectionType === 'home_collection'
+                      ? 'Home collection address'
+                      : 'Visit lab'}
+                  </h4>
+                  {selectedAppointment.collectionType === 'home_collection' &&
+                  selectedAppointment.collectionAddress ? (
+                    <p className="text-sm text-lab-black-700 dark:text-lab-black-200 flex items-start gap-2">
+                      <MapPin className="w-4 h-4 text-lab-yellow-600 mt-0.5" />
+                      <span>
+                        {selectedAppointment.collectionAddress.street},{' '}
+                        {selectedAppointment.collectionAddress.city},
+                        {selectedAppointment.collectionAddress.state}{' '}
+                        {selectedAppointment.collectionAddress.zipCode}
+                      </span>
+                    </p>
+                  ) : (
+                    <p className="text-sm text-lab-black-700 dark:text-lab-black-200">
+                      Please arrive 10 minutes before the scheduled time.
+                    </p>
+                  )}
+                </div>
+
+                <div className="card-quicklab p-4 space-y-2">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                    <User className="w-5 h-5" /> Assigned staff
+                  </h4>
+                  {selectedAppointment.assignedStaffId ? (
+                    <>
+                      <p className="text-sm text-lab-black-700 dark:text-lab-black-200 font-medium">
+                        {selectedAppointment.assignedStaffId.firstName}{' '}
+                        {selectedAppointment.assignedStaffId.lastName}
+                      </p>
+                      {selectedAppointment.assignedStaffId.phoneNumber && (
+                        <p className="text-sm text-lab-black-700 dark:text-lab-black-200 flex items-center gap-2">
+                          <Phone className="w-4 h-4 text-lab-yellow-600" />
+                          {selectedAppointment.assignedStaffId.phoneNumber}
+                        </p>
+                      )}
+                    </>
+                  ) : (
+                    <p className="text-sm text-lab-black-600 dark:text-lab-black-300">
+                      Staff assignment will appear once confirmed.
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Tests list */}
+              <div className="card-quicklab p-4 space-y-3">
+                <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                  <TestTube className="w-5 h-5" /> Tests
+                </h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {selectedAppointment.tests?.map((test, idx) => (
+                    <div
+                      key={idx}
+                      className="bg-lab-black-50 dark:bg-lab-black-900 p-3 rounded-lg flex items-center justify-between"
+                    >
+                      <div>
+                        <p className="font-medium text-lab-black-900 dark:text-lab-black-50">
+                          {test.testName}
+                        </p>
+                        {test.testCode && (
+                          <p className="text-xs text-lab-black-600 dark:text-lab-black-400">
+                            Code: {test.testCode}
+                          </p>
+                        )}
+                      </div>
+                      <p className="font-semibold text-lab-black-900 dark:text-lab-black-50">
+                        ₹{test.price}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Notes & Report */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="card-quicklab p-4 space-y-2">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                    <FileText className="w-5 h-5" /> Notes
+                  </h4>
+                  <p className="text-sm text-lab-black-700 dark:text-lab-black-200">
+                    {selectedAppointment.notes || 'No additional notes'}
+                  </p>
+                </div>
+
+                <div className="card-quicklab p-4 space-y-2">
+                  <h4 className="font-semibold text-lab-black-900 dark:text-lab-black-50 flex items-center gap-2">
+                    <CheckCircle className="w-5 h-5" /> Report
+                  </h4>
+                  {selectedAppointment.reportId?.reportFile?.url ? (
+                    <a
+                      href={selectedAppointment.reportId.reportFile.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="inline-flex items-center gap-2 px-4 py-2 rounded-lg btn-quicklab-primary"
+                    >
+                      <Download className="w-4 h-4" /> Download report
+                    </a>
+                  ) : (
+                    <p className="text-sm text-lab-black-700 dark:text-lab-black-200">
+                      Report will be available after completion.
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

From 55be65418dca2041e9ac6b01725db6734782c495 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 28 Dec 2025 11:40:32 +0530
Subject: [PATCH 42/44] QuickClinic nav: add compact Explore dropdown linking
 to Quick Med and Quick Lab (public + patient, desktop + mobile)

---
 .../Patient/PatientDesktopNavbar.jsx          | 45 +++++++++++++++++++
 .../Patient/PatientMobileNavigation.jsx       | 32 ++++++++++++-
 .../src/components/public/DesktopNavbar.jsx   | 44 ++++++++++++++++++
 .../src/components/public/MobileBottomBar.jsx | 33 +++++++++++++-
 4 files changed, 152 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Patient/PatientDesktopNavbar.jsx b/client/src/components/Patient/PatientDesktopNavbar.jsx
index 811e962..594da2e 100644
--- a/client/src/components/Patient/PatientDesktopNavbar.jsx
+++ b/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')}
diff --git a/client/src/components/Patient/PatientMobileNavigation.jsx b/client/src/components/Patient/PatientMobileNavigation.jsx
index d724053..113e7aa 100644
--- a/client/src/components/Patient/PatientMobileNavigation.jsx
+++ b/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 */}
diff --git a/client/src/components/public/DesktopNavbar.jsx b/client/src/components/public/DesktopNavbar.jsx
index 6b53556..05f650e 100644
--- a/client/src/components/public/DesktopNavbar.jsx
+++ b/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"
diff --git a/client/src/components/public/MobileBottomBar.jsx b/client/src/components/public/MobileBottomBar.jsx
index 577b41b..1611d6b 100644
--- a/client/src/components/public/MobileBottomBar.jsx
+++ b/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"

From 911568f9c4276dc4a1cecf9b359151411878e55d Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 28 Dec 2025 11:50:35 +0530
Subject: [PATCH 43/44] Add Explore nav: QuickLab & QuickMed cross-links for
 patients/public (desktop & mobile)

---
 .../src/components/quicklab/DesktopNavbar.jsx | 49 +++++++++++++++++
 .../src/components/quicklab/MobileNavbar.jsx  | 38 ++++++++++++-
 client/src/components/quickmed/Navbar.jsx     | 53 +++++++++++++++++++
 3 files changed, 139 insertions(+), 1 deletion(-)

diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index 514114b..e137123 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -118,6 +118,20 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
     navigate(`/quick-lab/lab/${test.labId}`);
   };
 
+  // Explore dropdown state
+  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="hidden lg:block sticky top-0 z-50 bg-white dark:bg-black border-b border-slate-200 dark:border-slate-800 shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -228,6 +242,41 @@ export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
             {/* Dark Mode Toggle */}
             <DarkModeToggle />
 
+            {/* Explore Dropdown (Quick Clinic / Quick Med) for patients & public */}
+            {(!isAuthenticated || user?.role === 'patient') && (
+              <div className="relative" ref={exploreRef}>
+                <button
+                  onClick={() => setIsExploreOpen((v) => !v)}
+                  className="hidden md:inline-flex items-center gap-2 px-3 py-2 text-slate-700 dark:text-slate-300 hover:text-yellow-600 dark:hover:text-yellow-400 font-medium transition-colors"
+                  title="Explore"
+                >
+                  Explore
+                </button>
+                {isExploreOpen && (
+                  <div className="absolute right-0 mt-2 w-40 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg py-2">
+                    <button
+                      onClick={() => {
+                        setIsExploreOpen(false);
+                        navigate('/');
+                      }}
+                      className="block w-full text-left px-4 py-2 text-slate-700 dark:text-slate-300 hover:bg-yellow-50 dark:hover:bg-slate-800"
+                    >
+                      Quick Clinic
+                    </button>
+                    <button
+                      onClick={() => {
+                        setIsExploreOpen(false);
+                        navigate('/quick-med');
+                      }}
+                      className="block w-full text-left px-4 py-2 text-slate-700 dark:text-slate-300 hover:bg-yellow-50 dark:hover:bg-slate-800"
+                    >
+                      Quick Med
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+
             {/* Lab Admin: Manage Appointments */}
             {isAuthenticated && user?.role === 'lab_admin' && (
               <button
diff --git a/client/src/components/quicklab/MobileNavbar.jsx b/client/src/components/quicklab/MobileNavbar.jsx
index 4efb036..5279401 100644
--- a/client/src/components/quicklab/MobileNavbar.jsx
+++ b/client/src/components/quicklab/MobileNavbar.jsx
@@ -24,6 +24,7 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
   const [suggestions, setSuggestions] = useState([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [isExploreOpen, setIsExploreOpen] = useState(false);
   const searchRef = useRef(null);
   const debounceTimeout = useRef(null);
 
@@ -226,7 +227,7 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
 
       {/* Bottom Navigation Bar */}
       <div className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-black border-t border-slate-200 dark:border-slate-800 shadow-lg">
-        <div className="flex items-center justify-around h-16 px-2">
+        <div className="flex items-center justify-around h-16 px-2 relative">
           {/* Home/Labs */}
           <button className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95">
             <Home className="h-6 w-6" />
@@ -247,6 +248,41 @@ export default function MobileNavbar({ searchQuery, setSearchQuery }) {
             </span>
           </div>
 
+          {/* Explore toggle for patients & public */}
+          {(!isAuthenticated || user?.role === 'patient') && (
+            <>
+              <button
+                onClick={() => setIsExploreOpen((v) => !v)}
+                className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-500 dark:text-slate-400 hover:text-yellow-600 dark:hover:text-yellow-400 transition-colors active:scale-95"
+              >
+                <BookOpen className="h-6 w-6" />
+                <span className="text-xs font-medium">Explore</span>
+              </button>
+              {isExploreOpen && (
+                <div className="absolute bottom-16 right-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg py-2 w-40">
+                  <button
+                    onClick={() => {
+                      setIsExploreOpen(false);
+                      navigate('/');
+                    }}
+                    className="block w-full text-left px-4 py-2 text-slate-700 dark:text-slate-300 hover:bg-yellow-50 dark:hover:bg-slate-800"
+                  >
+                    Quick Clinic
+                  </button>
+                  <button
+                    onClick={() => {
+                      setIsExploreOpen(false);
+                      navigate('/quick-med');
+                    }}
+                    className="block w-full text-left px-4 py-2 text-slate-700 dark:text-slate-300 hover:bg-yellow-50 dark:hover:bg-slate-800"
+                  >
+                    Quick Med
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+
           {/* Lab Admin: Manage Appointments */}
           {isAuthenticated && user?.role === 'lab_admin' && (
             <button
diff --git a/client/src/components/quickmed/Navbar.jsx b/client/src/components/quickmed/Navbar.jsx
index f0c060f..7f08a54 100644
--- a/client/src/components/quickmed/Navbar.jsx
+++ b/client/src/components/quickmed/Navbar.jsx
@@ -11,6 +11,8 @@ const Navbar = () => {
   const [isLoading, setIsLoading] = useState(false);
   const searchRef = useRef(null);
   const navigate = useNavigate();
+  const [isExploreOpen, setIsExploreOpen] = useState(false);
+  const exploreRef = useRef(null);
   // Handle search input changes
   const handleSearchChange = async (e) => {
     const value = e.target.value;
@@ -47,6 +49,9 @@ const Navbar = () => {
       if (searchRef.current && !searchRef.current.contains(event.target)) {
         setShowSuggestions(false);
       }
+      if (exploreRef.current && !exploreRef.current.contains(event.target)) {
+        setIsExploreOpen(false);
+      }
     };
 
     document.addEventListener('mousedown', handleClickOutside);
@@ -117,6 +122,39 @@ const Navbar = () => {
 
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-4">
+            {/* Explore Dropdown (patients & public) */}
+            {(!isAuthenticated || user?.role === 'patient') && (
+              <div className="relative" ref={exploreRef}>
+                <button
+                  onClick={() => setIsExploreOpen((v) => !v)}
+                  className="px-3 py-2 text-[var(--color-med-text)] hover:text-[var(--color-med-green-600)] font-medium"
+                >
+                  Explore
+                </button>
+                {isExploreOpen && (
+                  <div className="absolute right-0 mt-2 w-40 bg-[var(--color-med-surface)] border border-[var(--color-med-border)] rounded-lg shadow-lg py-2">
+                    <button
+                      onClick={() => {
+                        setIsExploreOpen(false);
+                        navigate('/');
+                      }}
+                      className="block w-full text-left px-4 py-2 text-[var(--color-med-text)] hover:bg-[var(--color-med-green-50)] dark:hover:bg-[var(--color-med-green-900)]"
+                    >
+                      Quick Clinic
+                    </button>
+                    <button
+                      onClick={() => {
+                        setIsExploreOpen(false);
+                        navigate('/quick-lab');
+                      }}
+                      className="block w-full text-left px-4 py-2 text-[var(--color-med-text)] hover:bg-[var(--color-med-green-50)] dark:hover:bg-[var(--color-med-green-900)]"
+                    >
+                      Quick Lab
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
             <DarkModeToggle />
           </div>
 
@@ -185,6 +223,21 @@ const Navbar = () => {
                 </div>
               )}
             </div>
+            {/* Explore quick links */}
+            <div className="grid grid-cols-2 gap-3 px-4 pb-4">
+              <button
+                onClick={() => navigate('/')}
+                className="px-3 py-2 rounded-lg border border-[var(--color-med-border)] bg-[var(--color-med-surface)] text-[var(--color-med-text)]"
+              >
+                Quick Clinic
+              </button>
+              <button
+                onClick={() => navigate('/quick-lab')}
+                className="px-3 py-2 rounded-lg border border-[var(--color-med-border)] bg-[var(--color-med-surface)] text-[var(--color-med-text)]"
+              >
+                Quick Lab
+              </button>
+            </div>
           </div>
         </div>
       )}

From 4e1c0af4b4b62bd0b6ec7c7b4ca1345ae44c172b Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Sun, 28 Dec 2025 11:52:07 +0530
Subject: [PATCH 44/44] adds quicklab option in template

---
 .github/PULL_REQUEST_TEMPLATE.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index cdaadd1..d6fc66c 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,6 +2,7 @@
 
 - [ ] QuickClinic
 - [ ] QuickMed
+- [ ] QuickLab
 
 ## Change Type