#87 attendance page

devU-client/src/components/authenticatedRouter.tsx

@@ -22,7 +22,8 @@ import InstructorSubmissionspage from "./pages/submissions/InstructorSubmissions
 import SubmissionFileView from './pages/submissions/submissionFileView'
 import UserCoursesListPage from "./pages/listPages/courses/coursesListPage";
 import JoinCoursePage from "./pages/listPages/joinwithcodepage";
-
+import InstructorAttendancePage from './pages/Attendence/InstructorAttendancePage';
+import matchingTable from './pages/Multiplechoice/matchingTable';
 import WebhookURLForm from './pages/webhookURLForm'
 
 const AuthenticatedRouter = () => (
@@ -47,6 +48,10 @@ const AuthenticatedRouter = () => (
         <Route exact path='/course/:courseId/assignment/:assignmentId/createCAG' component={ContainerAutoGraderForm} />
         <Route exact path='/course/:courseId/assignment/:assignmentId/createProblem' component={AssignmentProblemFormPage} />
         <Route exact path='/course/:courseId/webhooks' component={WebhookURLForm} />
+        <Route exact path="/course/:courseId/attendance/instructor" component={InstructorAttendancePage} />
+
+        <Route path="/matchingTable" component={matchingTable} />
+
 
         <Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId'
             component={SubmissionDetailPage} />

devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import Modal from 'components/shared/layouts/modal';
+import './attendancePage.scss';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const InstructorAttendanceModal: React.FC<Props> = ({ open, onClose }) => {
+  const [course, setCourse] = useState('');
+  const [date, setDate] = useState('');
+  const [code, setCode] = useState('');
+  const [duration, setDuration] = useState('15');
+  const [description, setDescription] = useState('');
+
+  const handleGenerateCode = () => {
+    const randomCode = Math.random().toString(36).substring(2, 7).toUpperCase();
+    setCode(randomCode);
+  };
+
+  const handleSubmit = () => {
+    const attendanceData = { course, date, code, duration, description };
+    console.log('Submitting attendance:', attendanceData);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title="Create Attendance"
+      open={open}
+      onClose={onClose}
+      buttonAction={handleSubmit}
+    >
+      <div className="assignment-form">
+        <div className="formRow">
+          <label>Course:</label>
+          <select value={course} onChange={(e) => setCourse(e.target.value)} required>
+            <option value="" disabled>Select course</option>
+            <option value="CSE 312">CSE 312: Web Applications</option>
+            <option value="CSE 443">CSE 443: Software Engineering</option>
+            <option value="CSE 331">CSE 331: Algorithms and Complexity</option>
+          </select>
+        </div>
+
+        <div className="formRow">
+          <label>Session Date:</label>
+          <input
+            type="date"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="formRow">
+          <label>Attendance Code:</label>
+          <div className="code-input-row">
+            <input
+              type="text"
+              value={code}
+              onChange={(e) => setCode(e.target.value.toUpperCase())}
+              placeholder="Enter or generate a code"
+              required
+            />
+            <button type="button" className="btnPrimary" onClick={handleGenerateCode}>
+              Generate
+            </button>
+          </div>
+        </div>
+
+        <div className="formRow">
+          <label>Duration (minutes):</label>
+          <input
+            type="number"
+            min="1"
+            value={duration}
+            onChange={(e) => setDuration(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="formRow">
+          <label>Description (optional):</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Details for this session"
+            rows={3}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default InstructorAttendanceModal;

devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import PageWrapper from 'components/shared/layouts/pageWrapper';
+import InstructorAttendanceModal from './InstructorAttendanceModal';
+
+const InstructorAttendancePage = () => {
+  const [modalOpen, setModalOpen] = useState(true);
+
+  return (
+    <PageWrapper>
+      <div style={{ padding: '2rem' }}>
+        <h2 style={{ marginBottom: '1rem' }}>Instructor Attendance</h2>
+        <InstructorAttendanceModal open={modalOpen} onClose={() => setModalOpen(false)} />
+      </div>
+    </PageWrapper>
+  );
+};
+
+export default InstructorAttendancePage;

devU-client/src/components/pages/Attendence/attendancePage.scss

@@ -0,0 +1,138 @@
+@import 'variables';
+
+
+
+
+h2 {
+  text-align: center;
+}
+
+p {
+  text-align: center;
+  margin-left: 0;
+}
+
+.pageWrapper {
+  padding: 0 100px;
+}
+
+
+.form {
+  background-color: $list-item-background;
+  border-radius: 20px;
+  padding: 30px;
+  width: 50%;
+  height: fit-content;
+}
+
+.form>h2 {
+  margin-top: 0;
+}
+
+.datepickerContainer {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.header {
+  color: $text-color;
+  display: flex;
+  align-items: center;
+}
+
+
+.fileName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fileRemovalButton {
+  background: none;
+  border: none;
+  color: $text-color;
+  cursor: pointer;
+  font-size: 0.9em;
+
+
+  &:hover {
+    text-decoration: dashed;
+    color: red;
+  }
+}
+
+.formRow {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 15px;
+
+  label {
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  input, select, textarea {
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    font-family: inherit;
+    font-size: 0.95rem;
+  }
+}
+
+.code-input-row {
+  display: flex;
+  gap: 10px;
+
+  input {
+    flex: 1;
+  }
+
+  .btnPrimary {
+    white-space: nowrap;
+    padding: 8px 15px;
+    font-weight: 600;
+  }
+}
+
+
+@media (max-width: 1115px) {
+  .pageWrapper {
+    padding: 0 50px;
+  }
+}
+
+@media (max-width: 1015px) {
+  .pageWrapper {
+    padding: 0 100px;
+  }
+
+  .flex {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .form {
+    width: 100%;
+  }
+}
+
+@media (max-width: 670px) {
+  .pageWrapper {
+    padding: 0 50px;
+  }
+}
+
+@media (max-width: 560px) {
+  .datepickerContainer {
+    flex-direction: column;
+    gap: 15px;
+  }
+}