Welcome page and tables frontend( not complete)

client/src/App.css

@@ -22,8 +22,8 @@
 }
 
 body {
-  background-color: #96aefb;
-  background: linear-gradient(to right, #dab8fc, #afc2ff);
+  background-color:#ffffff;
+  /* background: linear-gradient(to right, #dab8fc, #afc2ff); */
   display: flex;
   align-items: center;
   justify-content: center;

client/src/App.js

@@ -5,6 +5,8 @@ import AuthPage from "./Pages/Login";
 import HomePage from "./Pages/HomePage";
 import ForgetPwPage from "./Pages/ForgetPw"; 
 import ResetPwPage from "./Pages/ResetPw";
+import FilterPage from "./Pages/FilterPage";
+import WelcomeWithFilter from "./Pages/WelcomeWithFilter";
  import "react-toastify/dist/ReactToastify.css";
 
 function App() {
@@ -12,10 +14,12 @@ function App() {
       <Router>
         <Routes>
           <Route path="/" element={<Welcome />}></Route>
+          <Route path="/Welcom" element={<WelcomeWithFilter />} />
           <Route path="/AuthpPage" element={<AuthPage />}></Route>
           <Route path="/Home" element={<HomePage />}></Route>
           <Route path="/ForgetPw" element={<ForgetPwPage />}></Route>
           <Route path="/ResetPw/:token" element={<ResetPwPage />}></Route>
+          <Route path="/Filter" element={<FilterPage />} />
         </Routes>
       </Router>
   );

client/src/Pages/FilterPage.css

@@ -0,0 +1,53 @@
+.filter-container {
+    text-align: center;
+    margin-top: 30px;
+  }
+  
+  .filter-form select,
+  .filter-form button {
+    margin: 10px;
+    padding: 8px;
+  }
+  
+  .table-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .table-container table {
+    width: 80%;
+    border-collapse: collapse;
+  }
+  
+  .table-container th,
+  .table-container td {
+    border: 1px solid #ddd;
+    padding: 8px;
+  }
+  
+  .table-container th {
+    background-color: maroon;
+    color: white;
+  }
+  
+  .active-button {
+    background-color: #800000; /* Highlight color */
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+  }
+  
+  button {
+    margin: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    background-color: #ddd;
+    border: 1px solid #ccc;
+  }
+  
+  button:hover {
+    background-color: #ccc;
+  }
+  

client/src/Pages/FilterPage.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import "./FilterPage.css";
+
+const FilterPage = ({ onApplyFilter }) => {
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [formData, setFormData] = useState({
+    scheme: "",
+    year: "",
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleApplyFilter = () => {
+    if (!formData.scheme || !formData.year) {
+      alert("Please select both Scheme and Year before applying the filter.");
+      return;
+    }
+    if (!selectedOption) {
+      alert("Please select either 'Course' or 'Faculty' before applying the filter.");
+      return;
+    }
+    onApplyFilter(); // Trigger the table display
+  };
+
+  const handleSelectOption = (option) => {
+    setSelectedOption(option);
+  };
+
+  return (
+    <div className="filter-container">
+      <div className="filter-form">
+        <select
+          name="scheme"
+          value={formData.scheme}
+          onChange={handleInputChange}
+        >
+          <option value="">Select Scheme</option>
+          <option value="Scheme1">Scheme 1</option>
+          <option value="Scheme2">Scheme 2</option>
+        </select>
+        <select
+          name="year"
+          value={formData.year}
+          onChange={handleInputChange}
+        >
+          <option value="">Select Year</option>
+          <option value="1">1st Year</option>
+          <option value="2">2nd Year</option>
+        </select>
+        <button
+          className={selectedOption === "Faculty" ? "active-button" : ""}
+          onClick={() => handleSelectOption("Faculty")}
+        >
+          Faculty
+        </button>
+        <button
+          className={selectedOption === "Course" ? "active-button" : ""}
+          onClick={() => handleSelectOption("Course")}
+        >
+          Course
+        </button>
+        <button onClick={handleApplyFilter}>Apply Filter</button>
+      </div>
+    </div>
+  );
+};
+
+export default FilterPage;

client/src/Pages/Welcom.css

@@ -0,0 +1,27 @@
+.welcom-container {
+    text-align: center;
+    margin-top: 50px;
+  }
+  
+  .welcom-message h1 {
+    font-size: 2rem;
+    margin-bottom: 10px;
+  }
+  
+  .welcom-message p {
+    font-size: 1.2rem;
+    color: #555;
+  }
+  
+  .next-button {
+    padding: 10px 20px;
+    background-color: maroon;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .next-button:hover {
+    background-color: darkred;
+  }
+  

client/src/Pages/Welcom.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import "./Welcom.css";
+
+const Welcom = () => {
+  const navigate = useNavigate();
+
+  const goToFilterPage = () => {
+    navigate("/Filter");
+  };
+
+  return (
+    <div className="welcom-container">
+      <div className="welcom-message">
+        <h1>Welcome, John Doe</h1>
+        <p>You’re signed in as DEC/EIC</p>
+      </div>
+      <button className="next-button" onClick={goToFilterPage}>
+        Proceed
+      </button>
+    </div>
+  );
+};
+
+export default Welcom;

client/src/Pages/WelcomeWithFilter.css

@@ -0,0 +1,126 @@
+.welcome-with-filter-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    font-family: "Arial", sans-serif;
+    background-color: #ffffff;
+  }
+  
+  /* Filter Section (Top) */
+  .filter-section {
+    display: flex;
+    padding: 10px 20px;
+    background-color: #800000; /* Dark red background */
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap; /* Makes the items wrap if screen width is small */
+  }
+  
+  .filter-section select,
+  .filter-section button {
+    flex: 1; /* Fields will take up equal space */
+    max-width: 200px; /* Ensures fields don't get too wide */
+    padding: 8px 12px;
+    border-radius: 5px;
+    border: none;
+    font-size: 14px;
+    text-align: center;
+  }
+  
+  .filter-section select {
+    background-color: #fff;
+    color: #333;
+    transition: border 0.3s ease;
+  }
+  
+  .filter-section select:focus {
+    border: 2px solid #b22222; /* Highlighted border on focus */
+  }
+  
+  .filter-section button {
+    background-color: #b22222;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+  
+  .filter-section button:hover,
+  .filter-section button:focus {
+    background-color: #a50000; /* Darker red for hover/active state */
+    transform: scale(1.05); /* Subtle enlargement */
+  }
+  
+  /* Welcome Section */
+  .welcome-section {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+  }
+  
+  .welcome-content {
+    flex: 1;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+  }
+  
+  .welcome-message h1 {
+    font-size: 32px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+  }
+  
+  .welcome-message p {
+    font-size: 18px;
+    color: #555;
+  }
+  
+  .image-container {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+  }
+  
+  .welcome-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  /* Table Styling */
+  .table-container {
+    width: 90%;
+    margin: 20px auto;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  
+  table th,
+  table td {
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: center;
+    font-size: 14px;
+  }
+  
+  table th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+  }
+  
+  table tr:hover {
+    background-color: #f9f9f9;
+  }
+  

client/src/Pages/WelcomeWithFilter.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import FilterPage from "./FilterPage";
+import "./WelcomeWithFilter.css";
+
+const WelcomeWithFilter = () => {
+  const [showTable, setShowTable] = useState(false); // State to toggle between table and welcome content
+
+  const handleApplyFilter = () => {
+    setShowTable(true); // Show table and replace the welcome content
+  };
+
+  return (
+    <div className="welcome-with-filter-container">
+      {/* Filter Section */}
+      <div className="filter-section">
+        <FilterPage onApplyFilter={handleApplyFilter} />
+      </div>
+
+      {/* Lower Section */}
+      <div className="welcome-section">
+        {showTable ? (
+          // Show the table when 'Apply Filter' is clicked
+          <div className="table-container">
+            <table>
+              <thead>
+                <tr>
+                  <th>Course ID</th>
+                  <th>Course Name</th>
+                  <th>Availability</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Array.from({ length: 10 }).map((_, index) => (
+                  <tr key={index}>
+                    <td>Course-{index + 1}</td>
+                    <td>Sample Course</td>
+                    <td>Available</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          // Show the welcome content by default
+          <div className="welcome-content">
+            <div className="welcome-message">
+              <h1>Welcome, John Doe</h1>
+              <p>You’re signed in as DEC/EIC</p>
+            </div>
+            <div className="image-container">
+              <img
+                src="Somaiya.jpg"
+                alt="Welcome Illustration"
+                className="welcome-image"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WelcomeWithFilter;