Add DoctorProfilePage with doctor details and booking option

client/src/App.js

@@ -12,8 +12,8 @@ import Register from "./pages/Register";
 import EmergencyPanel from "./components/EmergencyPanel";
 import ForgotPassword from "./pages/ForgotPassword";
 import ProtectedRoute from "./components/ProtectedRoute";
-import AdminDashboardPage from './pages/AdminDashboardPage';
-
+import AdminDashboardPage from "./pages/AdminDashboardPage";
+import DoctorProfilePage from "./pages/DoctorProfilePage"; // ✅ New Import
 
 function App() {
   const [darkMode, setDarkMode] = useState(false);
@@ -32,14 +32,22 @@ function App() {
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/login" element={<Login />} />
-        <Route path="register" element={<Register />} />
+        <Route path="/register" element={<Register />} />
         <Route path="/services/pharmacy" element={<PharmacyPage />} />
         <Route path="/services/labs-diagnostics" element={<LabsPage />} />
         <Route path="/services/checkup" element={<CheckupPage />} />
         <Route path="/services/surgery" element={<SurgeryPage />} />
+        <Route path="/doctors/:id" element={<DoctorProfilePage />} /> {/* ✅ New Route */}
         <Route path="*" element={<NotFoundPage />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
-        <Route path="/admin" element={<ProtectedRoute adminOnly={true}><AdminDashboardPage /></ProtectedRoute>}/>
+        <Route
+          path="/admin"
+          element={
+            <ProtectedRoute adminOnly={true}>
+              <AdminDashboardPage />
+            </ProtectedRoute>
+          }
+        />
       </Routes>
 
       {/* Fixed Emergency Button */}
@@ -59,4 +67,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

client/src/pages/DoctorProfilePage.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { useParams, Link } from "react-router-dom";
+import "../components/styles.css";
+
+function DoctorProfilePage() {
+  // Grab doctor ID from the URL
+  const { id } = useParams();
+
+  // Later you will fetch doctor details from API/backend using id
+  const doctor = {
+    id,
+    name: "Dr. Priya Sharma",
+    specialization: "Cardiologist",
+    experience: 12,
+    availability: "Mon - Fri, 10AM - 2PM",
+    slots: ["10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM"]
+  };
+
+  return (
+    <div className="container mt-5">
+      <div className="card shadow-lg p-4">
+        <h2>{doctor.name}</h2>
+        <p><strong>Specialization:</strong> {doctor.specialization}</p>
+        <p><strong>Experience:</strong> {doctor.experience} years</p>
+
+        <h4>Availability</h4>
+        <p>{doctor.availability}</p>
+
+        <h4>Consultation Slots</h4>
+        <ul>
+          {doctor.slots.map((slot, index) => (
+            <li key={index}>{slot}</li>
+          ))}
+        </ul>
+
+        <Link to={`/book/${doctor.id}`} className="btn btn-primary">
+          Book Appointment
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default DoctorProfilePage;