11137631_DCIT205_Assignment1

App.js

@@ -0,0 +1,60 @@
+
+import LandingPage from './pages/Landingpage';
+//import Home from './Home';
+import Navbar from './navbar';
+//import Home from './Home';
+
+import { BrowserRouter as Router , Route, Switch } from 'react-router-dom/cjs/react-router-dom.min';
+import LoginPage from './pages/LoginPage';
+import Dashbaoard from './pages/dasboard';
+import GradeReport from './pages/GradeReport';
+import MissingGradeform from './pages/MissingGrade form';
+import InstructorContact from './pages/InstructorContact';
+import Help from './pages/Help'
+import './index.css';
+
+
+
+
+
+
+
+function App() {
+
+  const pageStyle = {
+    //backgroundColor:'#2ecc71', 
+    minHeight: '100vh', 
+
+
+   } ;
+  return(
+  <Router> 
+    <div className='App' style={pageStyle}>
+      <Navbar/>
+
+
+         <div className='content'>
+        <Switch>
+          <Route exact path='/'><LandingPage/></Route>
+
+          <Route path='/La'> <LoginPage/></Route >
+
+           <Route path='/Db'> <Dashbaoard/></Route>
+<Route path='/Gd'><GradeReport/></Route>
+<Route path='/MGF'><MissingGradeform/></Route>
+<Route path='/IC'><InstructorContact/></Route>
+<Route path='/HP'><Help/></Route>
+        </Switch>
+
+
+         </div>
+
+
+
+</div>
+    </Router>
+
+  )
+}
+
+export default App;

App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

GradeReport.css

@@ -0,0 +1,15 @@
+
+
+.grade-report-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px;
+  }
+
+  .filter-container,
+  .grade-list-container {
+    width: 45%;
+  }
+
+
+

Help.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+function Help() {
+  return (
+    <div>
+        <h>Help page</h>
+    </div>
+  )
+}
+
+export default Help

InstructorContact.js

@@ -0,0 +1,101 @@
+
+import { Link } from 'react-router-dom';
+import React, { useState } from 'react';
+import './InstructorContactPage.css'; 
+import 'tailwindcss/tailwind.css';
+
+function InstructorContact() {
+  const [selectedInstructor, setSelectedInstructor] = useState(null);
+  const [emailSubject, setEmailSubject] = useState('');
+  const [emailBody, setEmailBody] = useState('');
+  const [confirmationMessage, setConfirmationMessage] = useState('');
+
+  const instructors = [
+    { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
+    { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },
+    { id: 3, name: 'Bob Johnson', email: 'bob.johnson@example.com' },
+    // Add more instructors as needed
+  ];
+
+  const handleInstructorSelect = (instructor) => {
+    setSelectedInstructor(instructor);
+  };
+
+  const handleEmailChange = (e) => {
+    setEmailSubject(e.target.value);
+  };
+
+  const handleBodyChange = (e) => {
+    setEmailBody(e.target.value);
+  };
+
+  const handleSendEmail = () => {
+    // Perform any email sending logic (mock-up)
+    setConfirmationMessage(`Email sent to ${selectedInstructor.name} successfully!`);
+  };
+
+  return (
+    <div className="instructor-contact-page-container">
+      <div className="instructor-list-container">
+        <h1 className="text-4xl font-bold mb-4">Instructor Contact List</h1>
+        <ul>
+          {instructors.map((instructor) => (
+            <li
+              key={instructor.id}
+              className={`cursor-pointer p-2 border border-gray-300 rounded-md ${
+                selectedInstructor && selectedInstructor.id === instructor.id
+                  ? 'bg-blue-500 text-white'
+                  : ''
+              }`}
+              onClick={() => handleInstructorSelect(instructor)}
+            >
+              {instructor.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+      {selectedInstructor && (
+        <div className="email-form-container">
+          <h2 className="text-2xl font-bold mb-4">{`Contact ${selectedInstructor.name}`}</h2>
+          <form className="w-full max-w-md">
+            <div className="mb-4">
+              <label htmlFor="emailSubject" className="block text-gray-700 text-sm font-bold mb-2">
+                Subject:
+              </label>
+              <input
+                type="text"
+                id="emailSubject"
+                value={emailSubject}
+                onChange={handleEmailChange}
+                className="w-full p-2 border border-gray-300 rounded-md"
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label htmlFor="emailBody" className="block text-gray-700 text-sm font-bold mb-2">
+                Email Body:
+              </label>
+              <textarea
+                id="emailBody"
+                value={emailBody}
+                onChange={handleBodyChange}
+                className="w-full p-2 border border-gray-300 rounded-md"
+                required
+              ></textarea>
+            </div>
+            <button
+              type="button"
+              onClick={handleSendEmail}
+              className="bg-green-500 text-white p-2 rounded-md hover:bg-green-600 focus:outline-none focus:shadow-outline-green active:bg-green-800"
+            >
+              Send Email
+            </button>
+          </form>
+          {confirmationMessage && <p className="text-green-600 mt-4">{confirmationMessage}</p>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default InstructorContact;

Landingpage.js

@@ -0,0 +1,35 @@
+// LandingPage.js
+
+import React from 'react';
+import "tailwindcss/tailwind.css";
+import './home.css'
+
+const LandingPage = () => {
+  return (
+    <div className="bg-gray-100 min-h-screen flex items-center justify-center">
+    <div className="max-w-2xl p-8 bg-white shadow-md rounded-md">
+      <h1 className="text-4xl font-bold mb-4">Missing Grade System</h1>
+      <p className="text-gray-600 mb-6">
+        Welcome to the Missing Grade System, a platform designed to track and manage missing grades efficiently.
+      </p>
+      <h2 className="text-2xl font-bold mb-4">Overview</h2>
+      <p className="text-gray-600 mb-6">
+        The Missing Grade System aims to streamline the process of identifying and addressing missing grades in educational institutions. It provides a centralized platform for teachers, students, and administrators to collaborate and resolve missing grade issues.
+      </p>
+      <h2 className="text-2xl font-bold mb-4">Reason for Creation</h2>
+      <p className="text-gray-600 mb-6">
+        The primary goal behind creating this system is to enhance communication and transparency regarding missing grades. By offering a user-friendly interface, it simplifies the tracking of missing grades, reducing administrative burden and ensuring timely resolution.
+      </p>
+      <h2 className="text-2xl font-bold mb-4">Features</h2>
+      <ul className="list-disc list-inside text-gray-600">
+        <li>Efficient tracking of missing grades.</li>
+        <li>Real-time notifications for teachers and students.</li>
+        <li>Collaborative tools for communication between stakeholders.</li>
+        <li>Automated reminders for pending grade submissions.</li>
+      </ul>
+    </div>
+  </div>
+  );
+};
+
+export default LandingPage;

LoginPage.js

@@ -0,0 +1,62 @@
+
+
+import { Link } from 'react-router-dom';
+import React, { useState, createContext, useContext} from 'react';
+
+import './login.css';
+
+const LoginPage = () => {
+
+  const [studentId, setStudentId] = useState('');
+  const [pin, setPin] = useState('');
+  const [error, setError] = useState('');
+
+  const handleLogin = () => {
+
+    if (studentId === '12345' && pin === '1234') {
+
+    } else {
+      setError('Invalid Student ID or PIN');
+    }
+  }; 
+
+  return (
+    <div className="bg-gray-100 min-h-screen flex items-center justify-center">
+      <div className="max-w-md p-8 bg-white shadow-md rounded-md">
+        <h1 className="text-4xl font-bold mb-8">Student Login</h1>
+        {error && <p className="text-red-500 mb-4">{error}</p>}
+        <form>
+          <div className="mb-4">
+            <label htmlFor="studentId" className="block text-gray-600 mb-2">Student ID</label>
+            <input
+              type="text"
+              id="studentId"
+              className="w-full p-2 border border-gray-300 rounded-md"
+              value={studentId}
+              onChange={(e) => setStudentId(e.target.value)}
+            />
+          </div>
+          <div className="mb-4">
+            <label htmlFor="pin" className="block text-gray-600 mb-2">PIN</label>
+            <input
+              type="password"
+              id="pin"
+              className="w-full p-2 border border-gray-300 rounded-md"
+              value={pin}
+              onChange={(e) => setPin(e.target.value)}
+            />
+          </div>
+          <button
+            type="button" // Change to "submit" in a real form
+            className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600"
+            onClick={handleLogin}
+          >
+            Login
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;