From 26e2d7187c42d7ae48237b803ef8a8f8102d1a27 Mon Sep 17 00:00:00 2001
From: Awais Mohammad <awaismadad@gmail.com>
Date: Fri, 8 Dec 2023 14:02:21 +0500
Subject: [PATCH 1/3] menu added  for confirmation of tutor

---
 .../ContentArea/Tutor/Modal.css               | 22 +++++++
 .../ContentArea/Tutor/Tutor.css               | 65 +++++++++++++++++--
 .../ContentArea/Tutor/Tutor.jsx               | 32 ++++++++-
 3 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css

diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css
new file mode 100644
index 00000000..e39bd6bb
--- /dev/null
+++ b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css
@@ -0,0 +1,22 @@
+/* Modal.css */
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .modal-content {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
index c552b142..de0e3240 100644
--- a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
+++ b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
@@ -1,3 +1,5 @@
+/* Tutor.css */
+
 .card {
   border: 1px solid #5e4949;
   border-radius: 8px;
@@ -9,20 +11,16 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   margin: 10px;
-
-  /* now small the space between cards */
   margin-bottom: 50px;
   margin-top: 10px;
-
 }
 
 .cards-container {
   display: flex;
-  flex-wrap: wrap; /* Allow cards to wrap to the next line if there isn't enough space */
-  justify-content: space-between; /* Distribute cards evenly */
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
-
 .card:hover {
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
 } 
@@ -58,3 +56,58 @@ h3 {
 .course-description {
   font-size: 14px;
 }
+
+.selected-tutor {
+  text-align: center;
+}
+
+.confirm-tutor-button button {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.confirm-tutor-button button:hover {
+  background-color: #45a049;
+}
+
+.become-tutor-form {
+  text-align: center;
+  margin: 20px;
+}
+
+.become-tutor-form form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.become-tutor-form label {
+  margin-top: 10px;
+}
+
+.become-tutor-form input {
+  padding: 8px;
+  margin-top: 5px;
+  width: 200px;
+}
+
+.become-tutor-form button {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.become-tutor-form button:hover {
+  background-color: #45a049;
+}
+
+.tutor-container {
+  text-align: center;
+}
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
index 989cfb1b..55fa5b25 100644
--- a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
+++ b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
@@ -1,7 +1,8 @@
-// Import the necessary React components and CSS file
+// Tutor.js
 
 import React, { useState } from "react";
 import "./Tutor.css";
+import "./Modal.css";
 
 function TutorCard({ tutor, onSelectTutor }) {
   return (
@@ -25,9 +26,20 @@ function TutorCard({ tutor, onSelectTutor }) {
   );
 }
 
+function Modal({ onClose, children }) {
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
 function Tutor() {
   const [isHireTutor, setIsHireTutor] = useState(true);
   const [selectedTutor, setSelectedTutor] = useState(null);
+  const [showConfirmationMenu, setShowConfirmationMenu] = useState(false);
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -49,7 +61,11 @@ function Tutor() {
 
   const handleConfirmTutor = () => {
     // Perform confirmation logic here
-    console.log("Tutor confirmed:", selectedTutor);
+    setShowConfirmationMenu(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowConfirmationMenu(false);
   };
 
   const handleFormChange = (e) => {
@@ -80,7 +96,6 @@ function Tutor() {
 
   return (
     <div className="tutor-container">
-
       {isHireTutor ? (
         <div className="available-tutors">
           <div className="cards-container">
@@ -101,6 +116,17 @@ function Tutor() {
               <div className="confirm-tutor-button">
                 <button onClick={handleConfirmTutor}>Confirm Tutor</button>
               </div>
+              {showConfirmationMenu && (
+                <Modal onClose={handleCloseModal}>
+                  <div>
+                    <h3>Confirmation Details</h3>
+                    <p>Course Fee: $XXX</p>
+                    <p>Qualification: {selectedTutor.qualification}</p>
+                    {/* Add any other details you want to display */}
+                    <button onClick={handleCloseModal}>Close</button>
+                  </div>
+                </Modal>
+              )}
             </div>
           )}
         </div>

From 9634b08c61ec1b79cfa8bdf2fa836f06bdf061c9 Mon Sep 17 00:00:00 2001
From: Awais Mohammad <awaismadad@gmail.com>
Date: Fri, 8 Dec 2023 14:12:07 +0500
Subject: [PATCH 2/3] added some more info

---
 .../ContentArea/Tutor/Tutor.jsx               | 76 +++++++++++++++++--
 1 file changed, 70 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
index 55fa5b25..f927c488 100644
--- a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
+++ b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
@@ -68,6 +68,12 @@ function Tutor() {
     setShowConfirmationMenu(false);
   };
 
+  const handleNextStep = () => {
+    // Handle logic for the next step in the confirmation process
+    // For example, you could navigate to a payment step
+    console.log("Moving to the next step...");
+  };
+
   const handleFormChange = (e) => {
     setFormData({
       ...formData,
@@ -88,10 +94,50 @@ function Tutor() {
   };
 
   const availableTutors = [
-    { id: 1, name: "Awais Mohammad", subject: "Math", experience: "5 years" },
-    { id: 2, name: "Waqar Amin", subject: "Science", experience: "3 years" },
-    { id: 3, name: "Muhammad Aqib", subject: "English", experience: "4 years" },
-    { id: 4, name: "Muhammad Karim", subject: "Chemistry", experience: "3.5 years" },
+    {
+      id: 1,
+      name: "Awais Mohammad",
+      subject: "Math",
+      experience: "5 years",
+      qualification: "Ph.D. in Mathematics",
+      availability: {
+        days: "Mon, Wed, Fri",
+        time: "10:00 AM - 2:00 PM",
+      },
+    },
+    {
+      id: 2,
+      name: "Waqar Amin",
+      subject: "Science",
+      experience: "3 years",
+      qualification: "M.Sc. in Physics",
+      availability: {
+        days: "Tue, Thu",
+        time: "2:00 PM - 6:00 PM",
+      },
+    },
+    {
+      id: 3,
+      name: "Muhammad Aqib",
+      subject: "English",
+      experience: "4 years",
+      qualification: "MA in English Literature",
+      availability: {
+        days: "Mon, Wed, Fri",
+        time: "3:00 PM - 7:00 PM",
+      },
+    },
+    {
+      id: 4,
+      name: "Muhammad Karim",
+      subject: "Chemistry",
+      experience: "3.5 years",
+      qualification: "M.Sc. in Chemistry",
+      availability: {
+        days: "Tue, Thu",
+        time: "10:00 AM - 1:00 PM",
+      },
+    },
   ];
 
   return (
@@ -122,8 +168,26 @@ function Tutor() {
                     <h3>Confirmation Details</h3>
                     <p>Course Fee: $XXX</p>
                     <p>Qualification: {selectedTutor.qualification}</p>
-                    {/* Add any other details you want to display */}
-                    <button onClick={handleCloseModal}>Close</button>
+
+                    {/* Step 1: Availability */}
+                    <div>
+                      <h3>Tutor Availability</h3>
+                      <p>Days: {selectedTutor.availability.days}</p>
+                      <p>Time: {selectedTutor.availability.time}</p>
+                    </div>
+
+                    {/* Step 2: Payment Options */}
+                    <div>
+                      <h3>Payment Options</h3>
+                      <p>Choose a payment method:</p>
+                      {/* Add payment options here */}
+                    </div>
+
+                    {/* Navigation Buttons */}
+                    <div>
+                      <button onClick={handleCloseModal}>Close</button>
+                      <button onClick={handleNextStep}>Next</button>
+                    </div>
                   </div>
                 </Modal>
               )}

From 8f4a4f4a6e14d919a5091e60bd6bfb79a40c96ec Mon Sep 17 00:00:00 2001
From: Awais Mohammad <awaismadad@gmail.com>
Date: Fri, 8 Dec 2023 15:02:04 +0500
Subject: [PATCH 3/3] added some more info

---
 .../ContentArea/Tutor/Tutor.css               |  1 +
 .../ContentArea/Tutor/Tutor.jsx               | 50 ++++++++++++-------
 2 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
index de0e3240..b8a92612 100644
--- a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
+++ b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
@@ -111,3 +111,4 @@ h3 {
 .tutor-container {
   text-align: center;
 }
+
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
index f927c488..17462472 100644
--- a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
+++ b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
@@ -47,6 +47,8 @@ function Tutor() {
     experience: "",
   });
 
+  const [confirmationStep, setConfirmationStep] = useState(1);
+
   const handleHireTutor = () => {
     setIsHireTutor(true);
   };
@@ -66,12 +68,34 @@ function Tutor() {
 
   const handleCloseModal = () => {
     setShowConfirmationMenu(false);
+    setConfirmationStep(1); // Reset confirmation step when closing modal
   };
 
   const handleNextStep = () => {
-    // Handle logic for the next step in the confirmation process
-    // For example, you could navigate to a payment step
-    console.log("Moving to the next step...");
+    setConfirmationStep((prevStep) => prevStep + 1);
+  };
+
+  const renderConfirmationStep = () => {
+    switch (confirmationStep) {
+      case 1:
+        return (
+          <div>
+            <h3>Tutor Availability</h3>
+            <p>Days: {selectedTutor.availability.days}</p>
+            <p>Time: {selectedTutor.availability.time}</p>
+          </div>
+        );
+      case 2:
+        return (
+          <div>
+            <h3>Payment Options</h3>
+            <p>Choose a payment method:</p>
+            {/* Add payment options here */}
+          </div>
+        );
+      default:
+        return null;
+    }
   };
 
   const handleFormChange = (e) => {
@@ -169,24 +193,14 @@ function Tutor() {
                     <p>Course Fee: $XXX</p>
                     <p>Qualification: {selectedTutor.qualification}</p>
 
-                    {/* Step 1: Availability */}
-                    <div>
-                      <h3>Tutor Availability</h3>
-                      <p>Days: {selectedTutor.availability.days}</p>
-                      <p>Time: {selectedTutor.availability.time}</p>
-                    </div>
-
-                    {/* Step 2: Payment Options */}
-                    <div>
-                      <h3>Payment Options</h3>
-                      <p>Choose a payment method:</p>
-                      {/* Add payment options here */}
-                    </div>
+                    {renderConfirmationStep()}
 
                     {/* Navigation Buttons */}
-                    <div>
+                    <div className="confirm-tutor-button">
                       <button onClick={handleCloseModal}>Close</button>
-                      <button onClick={handleNextStep}>Next</button>
+                      {confirmationStep < 2 && (
+                        <button onClick={handleNextStep}>Next</button>
+                      )}
                     </div>
                   </div>
                 </Modal>