showing docs details dynamically on all doctors page

backend/src/controllers/user.controller.js

@@ -50,7 +50,7 @@ export const getUserDetails = asyncHandler(async (req, res, next) => {
 });
 
 //! Getting details for the doctro
-export const getdoctorDetails = asyncHandler(async (req, res, next) => {
+export const getDoctorDetails = asyncHandler(async (req, res, next) => {
     const user = req.doctor;
 
     res

backend/src/docs.json

@@ -0,0 +1,70 @@
+[
+  {
+    "firstName": "John",
+    "lastName": "Doe",
+    "email": "[email protected]",
+    "phone": "1234567890",
+    "password": "password123",
+    "address": {
+      "country": "USA",
+      "city": "New York",
+      "pincode": "10001"
+    },
+    "gender": "Male",
+    "department": {
+      "name": "Cardiology",
+      "description": "Specializes in heart-related issues."
+    },
+    "specializations": [
+      {
+        "name": "Heart Surgery",
+        "description": "Expert in performing heart surgeries."
+      }
+    ],
+    "qualifications": ["MD", "FACC", "FAHA"],
+    "experience": "15 years",
+    "availabelSlots": {
+      "days": ["Monday", "Wednesday", "Friday"],
+      "hours": "9:00 AM - 5:00 PM"
+    },
+    "languagesKnown": ["English", "Spanish"],
+    "appointmentCharges": "200 USD",
+    "docAvatar": "https://example.com/john-doe-avatar.jpg"
+  },
+  {
+    "firstName": "Jane",
+    "lastName": "Smith",
+    "email": "[email protected]",
+    "phone": "0987654321",
+    "password": "password456",
+    "address": {
+      "country": "USA",
+      "city": "Los Angeles",
+      "pincode": "90001"
+    },
+    "gender": "Female",
+    "department": {
+      "name": "Dermatology",
+      "description": "Specializes in skin-related issues."
+    },
+    "specializations": [
+      {
+        "name": "Acne Treatment",
+        "description": "Expert in acne treatment procedures."
+      },
+      {
+        "name": "Skin Cancer Diagnosis",
+        "description": "Skilled in diagnosing skin cancer."
+      }
+    ],
+    "qualifications": ["MD", "AAD"],
+    "experience": "12 years",
+    "availabelSlots": {
+      "days": ["Tuesday", "Thursday", "Saturday"],
+      "hours": "10:00 AM - 6:00 PM"
+    },
+    "languagesKnown": ["English", "French"],
+    "appointmentCharges": "250 USD",
+    "docAvatar": "https://example.com/jane-smith-avatar.jpg"
+  }
+]

backend/src/routes/user.routes.js

@@ -13,7 +13,7 @@ router.post("/patient/register", patientRegister);
 router.post("/login", login);
 router.post("/admin/addnew", isAdminAuthenticated, addNewAdmin);
 router.post("/doctor/addnew", isAdminAuthenticated, upload.single("docAvatar"), addNewDoctor);
-router.get("/doctors", getAllDoctors);
+router.get("/doctors/getall", getAllDoctors);
 router.get("/admin/me", isAdminAuthenticated, getUserDetails);
 router.get("/patient/me", isPatientAuthenticated, getUserDetails);
 router.get("/doctor/me", isDoctorAuthenticated, getDoctorDetails);

frontend/src/components/Doctors.jsx

@@ -1,64 +1,7 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAddressCard,
-  faLocationDot,
-  faVideoCamera,
-  faHospital,
-} from "@fortawesome/free-solid-svg-icons";
 
-const Doctors = ({ doctor }) => {
-  return (
-    <section className="bg-light_theme rounded-lg shadow-lg mx-auto my-4 p-6 sm:max-w-md sm:mx-4 md:max-w-lg lg:max-w-xl">
-      <div className="flex items-center mb-4">
-        <img
-          src="https://wallpapercave.com/wp/wp2555019.jpg"
-          alt="doctor name"
-          className="w-24 h-24 rounded-full object-cover border-2 border-main_theme"
-        />
-        <div className="ml-4">
-          <p className="font-bold text-main_theme">Name: {doctor.name}</p>
-          <p className="text-main_theme">
-            Qualification: {doctor.qualification}
-          </p>
-        </div>
-      </div>
-      <p className="mb-2">
-        <span className="font-bold text-main_theme">
-          Experience (in Years):{" "}
-        </span>
-        {doctor.experience}
-      </p>
-      <p className="mb-4">
-        <span className="font-bold text-main_theme">Main Role: </span>
-        {doctor.title}
-      </p>
-      <div className="mb-4">
-        <p className="font-bold text-main_theme">Pay Now - </p>
-        <b className="text-cart_orange">Rs. {doctor.fees}</b>
-      </div>
-      <div className="flex items-center mb-2">
-        <FontAwesomeIcon icon={faAddressCard} className="text-main_theme" />
-        <p className="ml-2">{doctor.languages}</p>
-      </div>
-      <div className="flex items-center mb-4">
-        <FontAwesomeIcon icon={faLocationDot} className="text-main_theme" />
-        <p className="ml-2">{doctor.location}</p>
-      </div>
-      <div className="bg-pastel_blue p-4 rounded-md mb-4 text-center">
-        <p>Available Tomorrow</p>
-        <p>Available within 5-10 Minutes</p>
-      </div>
-      <div className="flex justify-between space-x-2">
-        <button className="bg-cart_orange text-white py-2 px-4 rounded-md flex items-center hover:bg-orange-600 space-x-2">
-          <FontAwesomeIcon icon={faVideoCamera} /> <span>Book Appointment</span>
-        </button>
-        <button className="bg-main_theme text-white py-2 px-4 rounded-md flex items-center hover:bg-teal-700 space-x-2">
-          <FontAwesomeIcon icon={faHospital} /> <span>Book Hospital Visit</span>
-        </button>
-      </div>
-    </section>
-  );
+const Doctors = () => {
+  return <div>Doctors</div>;
 };
 
 export default Doctors;

frontend/src/components/DoctorsCard.jsx

@@ -0,0 +1,94 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { FaHospital, FaVideo } from "react-icons/fa";
+import hero from "/new_hero.png";
+import langIcon from "/language.webp";
+
+const DoctorsCard = ({ doctor }) => {
+  return (
+    <>
+      <section className="border-2 border-dark_theme rounded-md shadow-lg py-1 px-1">
+        <div className="flex gap-4 px-4 py-3 ">
+          <img
+            src={hero}
+            alt="hero"
+            className="w-20 h-20 px-1 py-1 object-cover bg-main_theme/20 backdrop-blur-md rounded-full border border-dark_theme mt-2"
+          />
+          <div className="doc-details overflow-hidden w-fit">
+            <h2 className="font-semibold text-lg tracking-wider text-dark_theme">
+              Dr. {doctor.firstName} {doctor.lastName}
+            </h2>
+            <h3 className="text-main_theme text-sm font-medium tracking-tight uppercase">
+              {doctor.department.name}
+            </h3>
+            <h3 className="text-main_theme text-sm font-medium uppercase">
+              {doctor.experience} EXP.
+            </h3>
+            <p className="text-text_grey/80 truncate overflow-hidden">
+              {doctor.qualifications.join(", ")}
+            </p>
+            {/* Appointment fees for above mediumm screens */}
+            <div className="hidden mt-2 md:flex gap-4 items-center w-full">
+              <div>
+                <p className=" text-sm text-text_grey/80 font-medium">
+                  You pay
+                </p>
+                <p className="text-dark_theme font-medium">
+                  Rs {doctor.appointmentCharges}
+                </p>
+              </div>
+              {/* Cashback */}
+              <div className=" border-l-2 border-text_grey/50 px-4">
+                <p className=" text-xs text-cart_orange font-light">
+                  MEDIHUB CASHBACK
+                </p>
+                <p className="text-cart_orange font-normal">Rs 51</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Appointment fees for smaller screen*/}
+        <div className="mt-2 mb-4 flex  md:hidden gap-4 items-center justify-center w-full">
+          <div>
+            <p className=" text-sm text-text_grey/80 font-medium">You pay</p>
+            <p className="text-dark_theme font-medium">
+              Rs {doctor.appointmentCharges}
+            </p>
+          </div>
+
+          {/* Cashback */}
+          <div className=" border-l-2 border-text_grey/50 px-4">
+            <p className=" text-xs text-cart_orange font-light">
+              MEDIHUB CASHBACK
+            </p>
+            <p className="text-cart_orange font-normal">Rs 51</p>
+          </div>
+        </div>
+
+        {/* Languages */}
+        <div className="flex items-center px-8 mb-4">
+          <img src={langIcon} alt="voice" className="mr-2 md:mr-0" />
+          <p className="text-sm text-text_grey/70 font-medium md:px-4 tracking-tighter">
+            {doctor.languagesKnown.join(", ")}
+          </p>
+        </div>
+
+        {/* Ctas */}
+        <div className="ctas grid grid-cols-1 md:grid-cols-2 gap-1">
+          <NavLink className="bg-dark_theme/95 hover:bg-dark_theme text-text px-4 py-4 rounded border-none font-medium text-sm tracking-tighter flex items-center justify-center md:justify-normal">
+            <FaVideo className="mr-2 text-text size-4" />
+            Book Digital Consult
+          </NavLink>
+          <NavLink className="bg-light_theme/85 hover:bg-light_theme text-dark_theme px-3 py-3 rounded border-none font-semibold text-md tracking-tighter flex items-center justify-center md:justify-normal">
+            <FaHospital className="mr-2 text-dark_theme size-5" />
+            Book Hospital Visit
+          </NavLink>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default DoctorsCard;

frontend/src/components/Navbar.jsx

@@ -59,7 +59,7 @@ function Navbar() {
   ];
 
   return (
-    <div className={"w-full h-16 bg-light_theme/20 fixed top-0 z-50 shadow-md"}>
+    <div className={"w-full h-16 bg-light_theme/20  top-0 z-50 shadow-md"}>
       <div className="max-w-7xl mx-auto flex items-center justify-between lg:px-6 md:px-4 px-3 py-1  h-full">
         {/* logo */}
         <div className="flex items-center gap-3">
@@ -120,9 +120,9 @@ function Navbar() {
 
         <div className="hidden md:flex gap-3 items-center relative">
           <NavLink to={"/cartpage"}>
-            <IoCartOutline className="text-dark_theme size-10 hidden md:block  mr-1" />
-            <div className="absolute bottom-6 left-5 border border-main_theme rounded-full cursor-pointer z-50 bg-main_theme/90 text-light_theme">
-              <span className="px-2 py-2 text-sm font-medium">7</span>
+            <IoCartOutline className="text-dark_theme size-8 hidden md:block mr-1" />
+            <div className="absolute bottom-4 left-4 border border-main_theme rounded-full cursor-pointer z-50 bg-main_theme/90 text-light_theme">
+              <span className="px-2 py-2 text-xs font-medium">7</span>
             </div>
           </NavLink>
 

frontend/src/pages/AllDoctors.jsx

@@ -1,74 +1,37 @@
-import React from 'react';
-import Navbar from '../components/Navbar';
-import Doctors from '../components/Doctors'; 
-import '../components/app.css'
-
+import React, { useState, useEffect } from "react";
+import { axios } from "../import-export/ImportExport";
+import DoctorsCard from "../components/DoctorsCard";
 
 function AllDoctors() {
-    const doctorsData = [
-        {
-          name: 'Nirmal Kolte',
-          qualification: 'MBBS, MD - General Medicine',
-          title: 'Cardiologist',
-          experience:"8 Years",
-          languages: 'English, Hindi',
-          location: 'Mumbai',
-          fees: 500,
-          imageUrl: 'https://example.com/doctor-images/nirmal-kolte.jpg',
-        },
-        {
-          name: 'Priya Sharma',
-          qualification: 'BDS - Dentistry',
-          title: 'Dentist',
-          experience:'2 Years',
-          languages: 'English, Marathi',
-          location: 'Pune',
-          fees:1000,
-          imageUrl: 'https://example.com/doctor-images/priya-sharma.jpg',
-        },
-        {
-          name: 'Akhil Kapoor',
-          qualification: 'MD - Pediatrics',
-          title: 'Pediatrician',
-          experience:'3 Years',
-          languages: 'English, Tamil',
-          location: 'Chennai',
-          fees:500,
-          imageUrl: 'https://example.com/doctor-images/akhil-kapoor.jpg', 
-        },
-        {
-            name: 'Akhil Kapoor',
-            qualification: 'MD - Pediatrics',
-            title: 'Pediatrician',
-            experience:'6 Years',
-            languages: 'English, Tamil',
-            location: 'Chennai',
-            fees:500,
-            imageUrl: 'https://example.com/doctor-images/akhil-kapoor.jpg',
-          },
-          {
-            name: 'Nirmal Kolte',
-            qualification: 'MBBS, MD - General Medicine',
-            title: 'Cardiologist',
-            experience:"8 Years",
-            languages: 'English, Hindi',
-            location: 'Mumbai',
-            fees: 500,
-            imageUrl: 'https://example.com/doctor-images/nirmal-kolte.jpg',
-          }
-      ];
-      return (
-        <>
-          {/* <Navbar />  */}
-          <div className="all-doctors-container">
-            <div className="doctor-cards">
-              {doctorsData.map((doctor) => (
-                <Doctors key={doctor.name} doctor={doctor} />
-              ))}
-            </div>
-          </div>
-        </>
-      );    
+  const [doctors, setDoctors] = useState([]);
+
+  useEffect(() => {
+    const fetchDoctors = async () => {
+      try {
+        const response = await axios.get("/user/doctors/getall");
+        console.log(response.data); // Check the structure of the response data
+        setDoctors(response.data.data); // Assuming response.data.data contains the list of doctors
+      } catch (error) {
+        console.error("Error fetching doctors:", error);
+      }
+    };
+
+    fetchDoctors();
+  }, []);
+
+  return (
+    <div className="w-full my-20">
+      <section className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-x-10 gap-y-4 items-center md:items-start justify-center md:justify-between h-full px-3 py-1">
+        {/* Search doctors component */}
+        {/* code here */}
+
+        {/* Doctors components */}
+        {doctors.map((doctor) => (
+          <DoctorsCard key={doctor._id} doctor={doctor} />
+        ))}
+      </section>
+    </div>
+  );
 }
 
 export default AllDoctors;