arav/appointment_to_examiner
1
0
Fork 0
forked from CSI-KJSCE/appointment_to_examiner
Code Pull Requests Activity

frontend changes

Browse Source
This commit is contained in:
ayoitshasya
2025-01-27 03:06:39 +05:30
parent 785025944f
commit 0e0f686c70
19 changed files with 523 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/App.css
View File

@@ -24,9 +24,6 @@
body { body {
background-color:#ffffff; background-color:#ffffff;
/* background: linear-gradient(to right, #dab8fc, #afc2ff); */ /* background: linear-gradient(to right, #dab8fc, #afc2ff); */
display: flex;
align-items: center;
justify-content: center;
height: 100vh; height: 100vh;
} }
body h1{ body h1{
@@ -486,3 +483,10 @@ height:auto !important;
} }
} }
.LoginPage {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

4
client/src/App.js
View File

@@ -15,11 +15,8 @@ import CourseTable from "./Pages/CourseTable";
import GenerateCSV from "./Pages/GenerateCSV"; import GenerateCSV from "./Pages/GenerateCSV";
import ConsolidatedTable from "./Pages/ConsolidatedTable"; import ConsolidatedTable from "./Pages/ConsolidatedTable";
function App() { function App() {
return ( return (
<Router>
{/* <Navbar /> */}
<Routes> <Routes>
<Route path="/" element={<AuthPage />}></Route> <Route path="/" element={<AuthPage />}></Route>
<Route path="/generate-csv" element={<GenerateCSV />} /> <Route path="/generate-csv" element={<GenerateCSV />} />
@@ -34,7 +31,6 @@ function App() {
<Route path="/courses" element={<CourseTable />} /> <Route path="/courses" element={<CourseTable />} />
<Route path="/consolidated" element={<ConsolidatedTable />} /> <Route path="/consolidated" element={<ConsolidatedTable />} />
</Routes> </Routes>
</Router>
); );
} }

264
client/src/Pages/ConsolidatedTable.jsx
View File

@@ -1,8 +1,84 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import axios from "axios"; import axios from "axios";
import * as XLSX from "xlsx-js-style"; import * as XLSX from "xlsx-js-style";
import { sendEmail } from "../api"; import { sendEmail, createExcelBook } from "../api";
import { createExcelBook } from "../api"; import Navbar from "./Navbar";
const styles = {
header: {
background: '#003366',
color: 'white',
padding: '20px 0',
textAlign: 'center',
fontSize: '24px',
marginBottom: '0',
},
buttonRow: {
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
padding: '10px 0',
margin: '0',
backgroundColor: '#003366',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
},
button: {
padding: '10px 20px',
borderRadius: '5px',
color: 'white',
border: 'none',
cursor: 'pointer',
fontSize: '16px',
flex: '1',
},
bulkDownloadButton: {
backgroundColor: '#3fb5a3',
},
downloadButton: {
backgroundColor: '#28a745',
},
emailButton: {
backgroundColor: '#ff6f61',
},
tableContainer: {
maxHeight: "70vh",
overflowY: "auto",
border: "1px solid #ccc",
padding: "10px",
borderRadius: "5px",
backgroundColor: "#f9f9f9",
marginBottom: "20px",
},
table: {
width: "100%",
marginTop: "20px",
borderCollapse: "collapse",
},
th: {
backgroundColor: "#333",
color: "white",
padding: "10px 15px",
},
td: {
padding: "10px",
textAlign: "left",
borderBottom: "1px solid #ddd",
},
paginationContainer: {
textAlign: "center",
marginTop: "20px",
},
paginationButton: {
padding: "10px 15px",
backgroundColor: "#007bff",
color: "white",
borderRadius: "5px",
border: "none",
},
main: {
width: "100%",
}
};
const ConsolidatedTable = () => { const ConsolidatedTable = () => {
const [data, setData] = useState([]); const [data, setData] = useState([]);
@@ -63,7 +139,7 @@ const ConsolidatedTable = () => {
}; };
const handleSendEmail = async (teacher, teacherData) => { const handleSendEmail = async (teacher, teacherData) => {
const facultyId = teacherData[0].facultyId; // This assumes all rows for a teacher have the same facultyId const facultyId = teacherData[0].facultyId;
try { try {
const response = await axios.get( const response = await axios.get(
`http://localhost:8080/api/faculty/${facultyId}` `http://localhost:8080/api/faculty/${facultyId}`
@@ -87,15 +163,15 @@ const ConsolidatedTable = () => {
formData.append("file", file); formData.append("file", file);
try { try {
const response = await sendEmail(formData); const emailResponse = await sendEmail(formData);
alert(`Email sent successfully to ${facultyEmail}`); alert(`Email sent successfully to ${facultyEmail}`);
console.log("Response from server:", response); console.log("Response from server:", emailResponse);
} catch (error) { } catch (emailError) {
console.error("Error sending email:", error); console.error("Error sending email:", emailError);
alert("Failed to send email."); alert("Failed to send email.");
} }
} catch (error) { } catch (facultyError) {
console.error("Error fetching Faculty data:", error); console.error("Error fetching Faculty data:", facultyError);
alert("Failed to fetch faculty data."); alert("Failed to fetch faculty data.");
} }
}; };
@@ -110,66 +186,35 @@ const ConsolidatedTable = () => {
}; };
return ( return (
<div> <>
<h1 style={{ textAlign: "center" }}> <Navbar/>
<div style={styles.main}>
<h1 style={styles.header}>
Faculty Tables with Download Options Faculty Tables with Download Options
</h1> </h1>
<div style={{ marginBottom: "20px", textAlign: "center" }}> <div style={styles.buttonRow}>
<button <button
onClick={bulkDownload} onClick={bulkDownload}
className="btn btn-primary" style={{ ...styles.button, ...styles.bulkDownloadButton }}
style={{
padding: "10px 15px",
backgroundColor: "#17a2b8",
color: "white",
textDecoration: "none",
borderRadius: "5px",
marginRight: "10px",
}}
> >
Bulk Download All Tables Bulk Download All Tables
</button> </button>
<button <button
onClick={() => createExcelFile(data, "Consolidated Table")} onClick={() => createExcelFile(data, "Consolidated Table")}
className="btn btn-primary" style={{ ...styles.button, ...styles.downloadButton }}
style={{
padding: "10px 15px",
backgroundColor: "#28a745",
color: "white",
textDecoration: "none",
borderRadius: "5px",
}}
> >
Download Consolidated Table Download Consolidated Table
</button> </button>
<button <button
onClick={sendEmailsToAllTeachers} onClick={sendEmailsToAllTeachers}
className="btn btn-danger" style={{ ...styles.button, ...styles.emailButton }}
style={{
padding: "10px 15px",
backgroundColor: "#dc3545",
color: "white",
textDecoration: "none",
borderRadius: "5px",
marginLeft: "10px",
}}
> >
Send Emails to All Teachers Send Emails to All Teachers
</button> </button>
</div> </div>
<div <div style={styles.tableContainer}>
style={{
maxHeight: "70vh",
overflowY: "auto",
border: "1px solid #ccc",
padding: "10px",
borderRadius: "5px",
backgroundColor: "#f9f9f9",
}}
>
{currentTeachers.map((teacher, index) => { {currentTeachers.map((teacher, index) => {
const teacherData = data.filter((row) => row.Name === teacher); const teacherData = data.filter((row) => row.Name === teacher);
return ( return (
@@ -180,93 +225,71 @@ const ConsolidatedTable = () => {
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
cursor: "pointer", cursor: "pointer",
backgroundColor: "#ffffff",
color: "white",
padding: "10px", padding: "10px",
borderRadius: "5px", borderRadius: "5px",
backgroundColor: "#ffffff",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
}} }}
onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)} onClick={() => setExpandedTeacher(expandedTeacher === teacher ? null : teacher)}
> >
<h2 style={{color:'black', margin: 0 }}>{teacher}'s Table</h2> <h2 style={{ color: "black", margin: 0, fontSize: "1.5rem", }}>{teacher}'s Table</h2>
<div> <div>
<button <button
onClick={() => createExcelFile(teacherData, teacher)} onClick={() => createExcelFile(teacherData, teacher)}
className="btn btn-primary" style={{ ...styles.button, backgroundColor: "#007bff" }}
style={{
padding: "10px 15px",
backgroundColor: "#007bff",
color: "black",
textDecoration: "none",
borderRadius: "5px",
marginRight: "10px",
}}
> >
Download {teacher}'s Table Download {teacher}'s Table
</button> </button>
<button <button
onClick={() => handleSendEmail(teacher, teacherData)} onClick={() => handleSendEmail(teacher, teacherData)}
className="btn btn-secondary" style={{ ...styles.button, backgroundColor: "#6c757d" }}
style={{
padding: "10px 15px",
backgroundColor: "#6c757d",
color: "white",
textDecoration: "none",
borderRadius: "5px",
}}
> >
Send {teacher}'s CSV via Email Send {teacher}'s XSL via Email
</button> </button>
</div> </div>
</div> </div>
{expandedTeacher === teacher && ( {expandedTeacher === teacher && (
<table <table style={styles.table}>
border="1"
style={{
width: "100%",
textAlign: "left",
marginTop: "20px",
}}
>
<thead> <thead>
<tr> <tr>
<th>Semester</th> <th style={styles.th}>Semester</th>
<th>Course Code</th> <th style={styles.th}>Course Code</th>
<th>Course Name</th> <th style={styles.th}>Course Name</th>
<th>Exam Type</th> <th style={styles.th}>Exam Type</th>
<th>Year</th> <th style={styles.th}>Year</th>
<th>Marks</th> <th style={styles.th}>Marks</th>
<th>Name</th> <th style={styles.th}>Name</th>
<th>Affiliation/College</th> <th style={styles.th}>Affiliation/College</th>
<th>Highest Qualification</th> <th style={styles.th}>Highest Qualification</th>
<th>Career Experience</th> <th style={styles.th}>Career Experience</th>
<th>Oral/Practical</th> <th style={styles.th}>Oral/Practical</th>
<th>Assessment</th> <th style={styles.th}>Assessment</th>
<th>Reassessment</th> <th style={styles.th}>Reassessment</th>
<th>Paper Setting</th> <th style={styles.th}>Paper Setting</th>
<th>Moderation</th> <th style={styles.th}>Moderation</th>
<th>PwD Paper Setting</th> <th style={styles.th}>PwD Paper Setting</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{teacherData.map((row, idx) => ( {teacherData.map((row, idx) => (
<tr key={idx}> <tr key={idx}>
<td>{row.semester}</td> <td style={styles.td}>{row.semester}</td>
<td>{row.courseCode}</td> <td style={styles.td}>{row.courseCode}</td>
<td>{row.courseName}</td> <td style={styles.td}>{row.courseName}</td>
<td>{row.examType}</td> <td style={styles.td}>{row.examType}</td>
<td>{row.year}</td> <td style={styles.td}>{row.year}</td>
<td>{row.marks}</td> <td style={styles.td}>{row.marks}</td>
<td>{row.Name}</td> <td style={styles.td}>{row.Name}</td>
<td>{row.affiliation}</td> <td style={styles.td}>{row.affiliation}</td>
<td>{row.qualification}</td> <td style={styles.td}>{row.qualification}</td>
<td>{row.experience}</td> <td style={styles.td}>{row.experience}</td>
<td>{row.oralPractical}</td> <td style={styles.td}>{row.oralPractical}</td>
<td>{row.assessment}</td> <td style={styles.td}>{row.assessment}</td>
<td>{row.reassessment}</td> <td style={styles.td}>{row.reassessment}</td>
<td>{row.paperSetting}</td> <td style={styles.td}>{row.paperSetting}</td>
<td>{row.moderation}</td> <td style={styles.td}>{row.moderation}</td>
<td>{row.pwdPaperSetting}</td> <td style={styles.td}>{row.pwdPaperSetting}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@@ -278,18 +301,11 @@ const ConsolidatedTable = () => {
</div> </div>
{/* Pagination controls */} {/* Pagination controls */}
<div style={{ textAlign: "center", marginTop: "20px" }}> <div style={styles.paginationContainer}>
<button <button
onClick={handlePrevPage} onClick={handlePrevPage}
disabled={currentPage === 1} disabled={currentPage === 1}
style={{ style={{ ...styles.paginationButton, backgroundColor: currentPage === 1 ? "#ccc" : "#007bff" }}
padding: "10px 15px",
marginRight: "10px",
backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
color: "white",
borderRadius: "5px",
border: "none",
}}
> >
Previous Previous
</button> </button>
@@ -299,19 +315,13 @@ const ConsolidatedTable = () => {
<button <button
onClick={handleNextPage} onClick={handleNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
style={{ style={{ ...styles.paginationButton, backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff" }}
padding: "10px 15px",
marginLeft: "10px",
backgroundColor: currentPage === totalPages ? "#ccc" : "#007bff",
color: "white",
borderRadius: "5px",
border: "none",
}}
> >
Next Next
</button> </button>
</div> </div>
</div> </div>
</>
); );
}; };

171
client/src/Pages/CourseForm.css
View File

@@ -1,130 +1,99 @@
/* CourseForm.css */ /* General container styles */
.form-container { .courseFormContainer {
max-width: 600px; display: flex ;
margin: 50px auto; justify-content: center ;
padding: 20px; align-items: center ;
border: 1px solid #ccc; padding: 20px ;
border-radius: 10px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
h2 { .courseFormFormContainer {
text-align: center; background: #f4f4f4 ;
color: #333; padding: 20px ;
margin-bottom: 20px; border-radius: 8px ;
font-size: 1.8rem; box-shadow: 0 4px 8px rgba(0,0,0,0.1) ;
width: 100% ;
max-width: 960px ;
} }
form { .courseFormHeader {
display: flex; text-align: center ;
flex-direction: column; color: #333 ;
gap: 15px; grid-column: 1 / -1 ; /* Spans the entire width */
} }
label { .courseForm {
font-size: 1rem; display: grid ;
font-weight: bold; grid-template-columns: repeat(3, 1fr) ; /* Creates three columns */
color: #555; grid-gap: 20px ;
display: flex; align-items: start ;
flex-direction: column;
} }
input[type="text"] { .courseFormLabel {
padding: 10px; display: block ;
font-size: 1rem; color: #666 ;
border: 1px solid #ccc; font-weight: bold ;
border-radius: 5px;
background-color: #fff;
transition: border-color 0.3s ease;
} }
input[type="text"]:focus { .courseFormInput, .courseFormSelect, .courseFormButton {
border-color: #007bff; width: 100% ;
outline: none; padding: 8px ;
margin-top: 5px ;
border: 1px solid #ddd ;
border-radius: 4px ;
box-sizing: border-box ; /* Makes sure the padding doesn't affect the final width */
} }
button { .courseFormReadOnly {
padding: 10px 15px; background: #eee ;
font-size: 1rem; color: #666 ;
font-weight: bold;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
} }
button:hover { .courseFormButton {
background-color: #0056b3; padding: 10px 20px ;
background-color: #a71515 ;
color: white ;
border: none ;
border-radius: 4px ;
cursor: pointer ;
} }
button:active { .courseFormButton:hover {
background-color: #003d7a; background-color: #e14a4a ;
} }
button[type="submit"] { .courseFormErrorMessage {
align-self: center; color: red ;
width: 50%; font-size: 12px ;
grid-column: 1 / -1 ; /* Spans the entire width */
} }
.suggestions { .courseFormErrorInput, .courseFormErrorSelect {
list-style-type: none; border-color: red ;
margin: 0;
padding: 0;
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
background: #fff;
position: absolute;
width: 100%;
z-index: 10;
} }
.suggestions li { /* Adjusting list styles for better grid integration */
padding: 8px; .courseFormSuggestions, .courseFormTempList {
cursor: pointer; list-style: none ;
padding: 0 ;
width: 100% ;
position: absolute ;
z-index: 1000 ;
} }
.suggestions li:hover { .courseFormSuggestionsItem, .courseFormTempListItem {
background-color: #f0f0f0; padding: 8px ;
background-color: #fff ;
border: 1px solid #ddd ;
cursor: pointer ;
} }
.error-message { .courseFormSuggestionsItem:hover, .courseFormTempListItem:hover {
color: red; background-color: #f0f0f0 ;
font-size: 12px;
} }
.error input { .courseFormRemoveFacultyBtn {
border-color: red; background: none ;
} border: none ;
color: red ;
cursor: pointer ;
@media (max-width: 768px) {
.form-container {
margin: 20px;
padding: 15px;
}
h2 {
font-size: 1.5rem;
}
button[type="submit"] {
width: 100%;
}
}
.remove-faculty-btn {
padding: 0px 0px;
background: none;
border: none;
color: red;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}
.remove-faculty-btn:hover {
color: darkred;
} }

180
client/src/Pages/CourseForm.jsx
View File

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
import { useLocation, useParams, useNavigate } from "react-router-dom"; import { useLocation, useParams, useNavigate } from "react-router-dom";
import { fetchFaculties, saveAppointment, updateCourseStatus } from "../api"; import { fetchFaculties, saveAppointment, updateCourseStatus } from "../api";
import "./CourseForm.css"; import "./CourseForm.css";
import "./Navbar.jsx";
import Navbar from "./Navbar.jsx";
const CourseForm = () => { const CourseForm = () => {
const { id } = useParams(); const { id } = useParams();
@@ -146,30 +148,76 @@ const CourseForm = () => {
}; };
return ( return (
<div className="form-container"> <>
<h2>Course Info</h2> <Navbar />
<form onSubmit={handleSubmit}> <div className="container">
<label> <div className="courseFormContainer">
<div className="courseFormFormContainer">
<h2 className="courseFormHeader">Course Info</h2>
<form className="courseForm" onSubmit={handleSubmit}>
<div>
<label className="courseFormLabel">
Course ID: Course ID:
<input type="text" value={course?.courseId || id} readOnly /> <input type="text" className="courseFormInput courseFormReadOnly" value={course?.courseId || id} readOnly />
</label> </label>
<label> </div>
<div>
<label className="courseFormLabel">
Course Name: Course Name:
<input type="text" value={course?.name || ""} readOnly /> <input type="text" className="courseFormInput courseFormReadOnly" value={course?.name || ""} readOnly />
</label> </label>
{[ </div>
{ name: "oralsPracticals", label: "Orals/Practicals" }, <div className={errors.examPeriod ? "courseFormErrorSelect" : ""}>
<label className="courseFormLabel">Exam Period:</label>
<select
className="courseFormSelect"
value={examPeriod.year}
onChange={(e) => setExamPeriod({ ...examPeriod, year: e.target.value })}
>
<option value="">Year</option>
{[2025, 2026, 2027].map(year => (
<option key={year} value={year}>{year}</option>
))}
</select>
<select
className="courseFormSelect"
value={examPeriod.startMonth}
onChange={(e) => setExamPeriod({ ...examPeriod, startMonth: e.target.value })}
>
<option value="">Start Month</option>
{["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]
.map(month => (
<option key={month} value={month}>{month}</option>
))}
</select>
<select
className="courseFormSelect"
value={examPeriod.endMonth}
onChange={(e) => setExamPeriod({ ...examPeriod, endMonth: e.target.value })}
>
<option value="">End Month</option>
{["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]
.map(month => (
<option key={month} value={month}>{month}</option>
))}
</select>
{errors.examPeriod && <span className="courseFormErrorMessage">{errors.examPeriod}</span>}
</div>
{[{ name: "oralsPracticals", label: "Orals/Practicals" },
{ name: "assessment", label: "Assessment" }, { name: "assessment", label: "Assessment" },
{ name: "reassessment", label: "Reassessment" }, { name: "reassessment", label: "Reassessment" },
{ name: "paperSetting", label: "Paper Setting" }, { name: "paperSetting", label: "Paper Setting" },
{ name: "moderation", label: "Moderation" }, { name: "moderation", label: "Moderation" },
{ name: "pwdPaperSetter", label: "PwD Paper Setter" }, { name: "pwdPaperSetter", label: "PwD Paper Setter" }]
].map(({ name, label }) => ( .map(({ name, label }) => (
<div key={name} className={errors[name] ? "error" : ""}> <div key={name} className={errors[name] ? "courseFormErrorInput" : ""}>
<label> <label className="courseFormLabel">
{label}: {label}:
<input <input
type="text" type="text"
className="courseFormInput"
name={name} name={name}
value={formData[name]} value={formData[name]}
onChange={handleInputChange} onChange={handleInputChange}
@@ -177,41 +225,33 @@ const CourseForm = () => {
/> />
<button <button
type="button" type="button"
className="courseFormButton"
onClick={() => handleAddFaculty(name)} onClick={() => handleAddFaculty(name)}
disabled={!formData[name].trim()} disabled={!formData[name].trim()}
> >
Add Add
</button> </button>
<ul <ul className="courseFormSuggestions" id={`suggestions-${name}`}
className="suggestions" style={{ display: (suggestions[name] || []).length > 0 ? "block" : "none" }}>
id={`suggestions-${name}`}
style={{
display:
(suggestions[name] || []).length > 0 ? "block" : "none",
}}
>
{(suggestions[name] || []).map((faculty) => ( {(suggestions[name] || []).map((faculty) => (
<li <li className="courseFormSuggestionsItem" key={faculty.facultyId} onClick={() => {
key={faculty.facultyId}
onClick={() => {
setFormData({ ...formData, [name]: faculty.name }); setFormData({ ...formData, [name]: faculty.name });
setSuggestions((prev) => ({ ...prev, [name]: [] })); setSuggestions((prev) => ({ ...prev, [name]: [] }));
}} }}>
>
{faculty.name} {faculty.name}
</li> </li>
))} ))}
</ul> </ul>
</label> </label>
{tempAssignments[name].length > 0 && ( {tempAssignments[name].length > 0 && (
<ul className="temp-list"> <ul className="courseFormTempList">
{tempAssignments[name].map((faculty, index) => ( {tempAssignments[name].map((faculty, index) => (
<li key={index}> <li className="courseFormTempListItem" key={index}>
{faculty.name} {faculty.name}
<button <button
type="button" type="button"
className="courseFormRemoveFacultyBtn"
onClick={() => handleRemoveFaculty(name, index)} onClick={() => handleRemoveFaculty(name, index)}
className="remove-faculty-btn"
> >
&#10005; &#10005;
</button> </button>
@@ -219,83 +259,19 @@ const CourseForm = () => {
))} ))}
</ul> </ul>
)} )}
{errors[name] && ( {errors[name] && <span className="courseFormErrorMessage">{errors[name]}</span>}
<span className="error-message">{errors[name]}</span>
)}
</div> </div>
))} ))}
<div className={errors.examPeriod ? "error" : ""}>
<label>Exam Period:</label> <button type="submit" className="courseFormButton" style={{ gridColumn: "1 / -1" }}>Submit</button>
<select
value={examPeriod.year}
onChange={(e) => setExamPeriod({ ...examPeriod, year: e.target.value })}
>
<option value="">Year</option>
{[2025, 2026, 2027].map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
<select
value={examPeriod.startMonth}
onChange={(e) =>
setExamPeriod({ ...examPeriod, startMonth: e.target.value })
}
>
<option value="">Start Month</option>
{[
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
].map((month) => (
<option key={month} value={month}>
{month}
</option>
))}
</select>
<select
value={examPeriod.endMonth}
onChange={(e) =>
setExamPeriod({ ...examPeriod, endMonth: e.target.value })
}
>
<option value="">End Month</option>
{[
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
].map((month) => (
<option key={month} value={month}>
{month}
</option>
))}
</select>
{errors.examPeriod && (
<span className="error-message">{errors.examPeriod}</span>
)}
</div>
<button type="submit">Submit</button>
</form> </form>
</div> </div>
</div>
</div>
</>
); );
}; };

2
client/src/Pages/CourseTable.css
View File

@@ -1,7 +1,7 @@
/* CourseTable.css */ /* CourseTable.css */
.course-table { .course-table {
width: 80%; width: 90vw;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
background-color: #f9f9f9; background-color: #f9f9f9;

4
client/src/Pages/CourseTable.jsx
View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import "./CourseTable.css"; import "./CourseTable.css";
import { fetchCourses } from "../api"; import { fetchCourses } from "../api";
import Navbar from "./Navbar";
const CourseTable = () => { const CourseTable = () => {
const { state } = useLocation(); const { state } = useLocation();
@@ -49,6 +50,8 @@ const CourseTable = () => {
}; };
return ( return (
<>
<Navbar/>
<table className="course-table"> <table className="course-table">
<thead> <thead>
<tr> <tr>
@@ -73,6 +76,7 @@ const CourseTable = () => {
)} )}
</tbody> </tbody>
</table> </table>
</>
); );
}; };

4
client/src/Pages/FacultyForm.jsx
View File

@@ -1,11 +1,14 @@
import React from "react"; import React from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import "./FacultyForm.css"; import "./FacultyForm.css";
import Navbar from "./Navbar";
const FacultyForm = () => { const FacultyForm = () => {
const { id } = useParams(); // Get the faculty ID from the URL params const { id } = useParams(); // Get the faculty ID from the URL params
return ( return (
<>
<Navbar />
<div className="form-container"> <div className="form-container">
<h2>Faculty Info</h2> <h2>Faculty Info</h2>
<form> <form>
@@ -24,6 +27,7 @@ const FacultyForm = () => {
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
</div> </div>
</>
); );
}; };

4
client/src/Pages/FilterPage.jsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import "./FilterPage.css"; import "./FilterPage.css";
import { fetchCourses } from "../api"; import { fetchCourses } from "../api";
import Navbar from "./Navbar";
const FilterPage = () => { const FilterPage = () => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@@ -59,6 +60,8 @@ const FilterPage = () => {
}; };
return ( return (
<>
<Navbar/>
<div className="filter-container"> <div className="filter-container">
<div className="filter-form"> <div className="filter-form">
<select <select
@@ -103,6 +106,7 @@ const FilterPage = () => {
<button onClick={handleApplyFilter}>Apply Filter</button> <button onClick={handleApplyFilter}>Apply Filter</button>
</div> </div>
</div> </div>
</>
); );
}; };

1
client/src/Pages/Login.jsx
View File

@@ -3,6 +3,7 @@ import { Container, Col, Row } from "react-bootstrap";
import { FcGoogle } from "react-icons/fc"; import { FcGoogle } from "react-icons/fc";
import axios from "axios"; import axios from "axios";
import md5 from "md5"; import md5 from "md5";
import { ToastContainer, toast } from "react-toastify"; import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";

69
client/src/Pages/Navbar.css
View File

@@ -1,44 +1,57 @@
.navbar { .navbar {
background-color: #800000; /* Maroon background */ background-color: #800000; /* Maroon background */
height: 50px; /* Navbar height */ height: 50px; /* Increased navbar height */
width: 100%; /* Full width */ width: 100%; /* Full width */
display: flex; /* Flexbox for alignment */ display: flex; /* Use flexbox for layout */
justify-content: flex-end; /* Align items to the right */ justify-content: space-between; /* Space between items */
align-items: center; /* Center vertically */ align-items: center; /* Align items vertically */
padding: 0 20px; /* Horizontal padding for spacing */ padding: 0 20px; /* Horizontal padding */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
position: fixed; /* Fix the navbar to the top */ position: fixed; /* Fixed position */
top: 0; top: 0;
z-index: 1000; /* Place above other elements */ z-index: 1000;
} }
.navbar { .mb-10 {
box-sizing: border-box; /* Include padding and border in the height calculation */ margin-bottom: 20px;
} }
* { .navbar-container{
margin: 0; display: flex;
padding: 1000; align-items: center;
box-sizing: border-box; justify-content: space-between;
width: 100%;
} }
.navbar select,
.navbar input {
height: auto;
margin: 0;
padding: 5px 10px;
font-size: 16px; /* Ensure consistent font size */
}
/* User Icon */
.user-icon { .user-icon {
font-size: 30px; /* Icon size */ font-size: 30px; /* Size of user icon */
color: #fff; /* White color for the icon */ color: #fff; /* Color of the icon */
cursor: pointer; /* Pointer cursor on hover */ margin-left: 20px; /* Space after the icon before the buttons */
transition: color 0.3s ease-in-out; /* Smooth hover effect */ cursor: pointer; /* Cursor type */
transition: color 0.3s ease-in-out; /* Transition for hover effect */
} }
.user-icon:hover { .user-icon:hover {
color: #ffcccc; /* Light pink on hover */ color: #ffcccc; /* Color on hover */
}
.button-container {
display: flex; /* Flexbox for buttons */
gap: 20px; /* Gap between buttons */
}
.button-container button {
background-color: #c00000; /* Button color */
color: white; /* Text color */
border: none; /* No border */
cursor: pointer; /* Cursor type */
font-size: 12px; /* Font size */
white-space: nowrap; /* Prevent text wrapping */
transition: background-color 0.3s; /* Smooth transition for hover */
padding: 6px 10px;
}
.button-container button:hover {
background-color: #ffcccc; /* Hover color */
} }

27
client/src/Pages/Navbar.jsx
View File

@@ -1,25 +1,24 @@
import React from "react"; import React from "react";
import { FaUserCircle } from "react-icons/fa"; import { FaUserCircle } from "react-icons/fa";
import { useNavigate } from "react-router-dom"; // Import for navigation import { NavLink } from "react-router-dom"; // Import NavLink for navigation
import "./Navbar.css"; // Navbar-specific styles import "./Navbar.css"; // Navbar-specific styles
const Navbar = () => { const Navbar = () => {
const navigate = useNavigate(); // Hook for navigation
const goToConsolidatedPage = () => {
navigate("/consolidated"); // Route to the consolidated page
};
return ( return (
<header className="navbar"> <header className="navbar mb-10">
<div className="navbar-container"> <div className="navbar-container">
<FaUserCircle className="user-icon" /> <FaUserCircle className="user-icon" />
<button <div className="button-container">
className="consolidated-button" <NavLink to="/consolidated" className="consolidated-button">
onClick={goToConsolidatedPage} Faculty Form
> </NavLink>
Go to Consolidated Page <NavLink to="/course-form" className="course-form-button">
</button> Course Form
</NavLink>
</div>
<div>
</div>
</div> </div>
</header> </header>
); );

42
client/src/Pages/Welcom.jsx
View File

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

48
client/src/Pages/Welcome.jsx
View File

@@ -1,28 +1,28 @@
import React from "react"; // import React from "react";
import { useNavigate } from "react-router-dom"; // import { useNavigate } from "react-router-dom";
const Welcome = () => { // const Welcome = () => {
const navigate = useNavigate(); // const navigate = useNavigate();
const handleRedirect = () => { // const handleRedirect = () => {
navigate("/AuthpPage"); // navigate("/AuthpPage");
}; // };
return ( // return (
<div className="container text-center mt-5"> // <div className="container text-center mt-5">
<div className="row justify-content-center"> // <div className="row justify-content-center">
<div className="col-md-6"> // <div className="col-md-6">
<h1 className="mb-4">Welcome Page</h1> // <h1 className="mb-4">Welcome Page</h1>
<button // <button
onClick={handleRedirect} // onClick={handleRedirect}
className="btn btn-primary btn-lg" // className="btn btn-primary btn-lg"
> // >
SIGN IN / SIGN UP // SIGN IN / SIGN UP
</button> // </button>
</div> // </div>
</div> // </div>
</div> // </div>
); // );
}; // };
export default Welcome; // export default Welcome;

2
client/src/Pages/WelcomeWithFilter.jsx
View File

@@ -22,8 +22,6 @@ const WelcomeWithFilter = () => {
return ( return (
<div className="welcome-with-filter-container"> <div className="welcome-with-filter-container">
{/* Navbar */}
<Navbar />
{/* Filter Section */} {/* Filter Section */}
<div className="filter-section"> <div className="filter-section">

1
client/src/index.css
View File

@@ -14,4 +14,5 @@ code {
#root{ #root{
width: 100vw; width: 100vw;
height: 100vh;
} }

8
client/src/index.js
View File

@@ -1,15 +1,17 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; // import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './Pages/Navbar.jsx';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <BrowserRouter>
<App /> <App />
</React.StrictMode> </BrowserRouter>
); );
reportWebVitals(); reportWebVitals();