11308636_DCIT_Assignment1

App.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import './App.css';
+import { BrowserRouter, Route, Routes,} from 'react-router-dom';
+import LandingPage from './pages/LandingPage';
+import LoginPage from './pages/LoginPage';
+import Header from './components/Header';
+import Dashboard from './pages/Dashboard';
+import Homepage from './pages/Homepage';
+import ReportGradePage from './pages/ReportGradePage';
+import InstructorContactPage from './pages/InstructorContact';
+import HelpAndSupport from './pages/HelpAndSupport';
+function App() {
+  return (
+    <div>
+    <Header />
+    <BrowserRouter>
+        <div className='mt-100px'>       
+          <Routes>
+            <Route index element={<LandingPage />} />
+            <Route path="/home" element={<Homepage />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/dashboard" element={<Dashboard />}/>
+            <Route path='/grade-report' element={<ReportGradePage />} />
+            <Route path="/instructor-contact" element={<InstructorContactPage />} />
+            <Route path="/helpandsupport" element={<HelpAndSupport />} />
+            </Routes>
+        </div>
+
+    </BrowserRouter>
+    </div>
+
+  );
+}
+
+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();
+});

components/Header.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import logo from '../images/cslogo.png'; 
+
+function Header() {
+  return (
+    <header>
+      <div className="logo-container">
+        <img src={logo} alt="University Logo" className="logo" />
+        <span className="department-name">DEPARTMENT OF<br></br>COMPUTER SCIENCE</span>
+      </div>
+      <nav className='flex justify-end'>
+        <ul>
+          <li><a href="/home">Home</a></li>
+          <li><a href="/dashboard">Dashboard</a></li>
+          <li><a href="/login">Login</a></li>          
+          <li><a href="/grade-report">Missing Grade</a></li>
+          <li><a href="/instructor-contact">Instractor contact</a></li>
+          <li><a href="/helpandsupport">HelpandSupport</a></li>
+        </ul>
+      </nav>
+    </header>
+  );
+}
+
+export default Header;

components/Sidebar.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react';
+import { Helmet } from 'react-helmet-async';
+
+function Sidebar() {
+  useEffect(() => {
+    const scriptModule = document.createElement('script');
+    scriptModule.type = 'module';
+    scriptModule.src = 'https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js';
+
+    const scriptNoModule = document.createElement('script');
+    scriptNoModule.setAttribute('nomodule', '');
+    scriptNoModule.src = 'https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js';
+
+    document.head.appendChild(scriptModule);
+    document.head.appendChild(scriptNoModule);
+
+    return () => {
+      document.head.removeChild(scriptModule);
+      document.head.removeChild(scriptNoModule);
+    };
+  }, []);
+
+  return (
+    <div className="sidebar">
+      <div className="dots">
+        <img src='images/dots.png' alt='dots' />
+      </div>
+      <div className="profile">
+        <ion-icon name="person-outline"></ion-icon>
+      </div>
+      <ul>
+        <span>Analytics</span>
+        <li>
+          <a href="#">
+            <ion-icon name="home-outline"></ion-icon><p>Dashboard</p>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <ion-icon name="pie-chart-sharp"></ion-icon><p>Reports</p>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <ion-icon name="insights"></ion-icon> <p>Insights</p>
+          </a>
+        </li>
+      </ul>
+      <ul>
+        <span>Content</span>
+        <li className="noti">
+          <a href="#">
+            <ion-icon name="notification-outline"></ion-icon><p>Notification </p>
+          </a>
+        </li>
+        <li className="likes">
+          <ion-icon name="heart-outline"></ion-icon> <p>Likes</p>
+        </li>
+        <li>
+          <ion-icon name="wallet-outline"></ion-icon> <p>Wallets</p>
+        </li>
+      </ul>
+      <ul>
+        <span>Custom</span>
+        <li className="switch-theme">
+          <a href="#">
+            <ion-icon name="loug-out-outline"></ion-icon><p>Logout</p>
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default Sidebar;

index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

pages/Dashboard.jsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+
+const Dashboard = () => {
+  const [selectedYear, setSelectedYear] = useState(null);
+
+  const handleYearChange = (year) => {
+    setSelectedYear(year);
+  };
+
+  const GPABox = () => (
+    <div className="bg-blue-200 p-4 rounded-md mb-4">
+      <h2 className="text-xl font-bold mb-2">Current GPA</h2>
+      <p className="text-3xl font-bold">3.9</p>
+    </div>
+  );
+
+  const SubjectsAndGrades = ({ year }) => {
+    const semesters = ['Semester 1', 'Semester 2'];
+
+    const level100Courses = [
+      'UGRC 150 Critical Thinking and Practical Reasoning',
+      'MATH 121 Algebra and Trigonometry',
+      'MATH 123 Vectors and Geometry',
+      'DCIT 101 Introduction to Computer Science',
+      'DCIT 103 Office Productivity Tools',
+      'STAT 111 Introduction to Statistics and Probability I',
+    ];
+
+    const level200Courses = [
+      'UGRC 110 Academic Writing I',
+      'UGRC 131-136 Understanding Human Society',
+      'MATH 122 Calculus I',
+      'MATH 126 Algebra and Geometry',
+      'STAT 112 Introduction to Statistics and Probability II',
+      'DCIT 104 Programming',
+      'DCIT 102 Computer Hardware Fund. and Circuits',
+    ];
+
+    const level300Courses = [
+      'UGRC 210 Academic Writing II',
+      'DCIT 201 Programming I',
+      'DCIT 203 Digital and Logic Systems Design',
+      'DCIT 205 Multi Media and Web Design',
+      'DCIT 207 Computer Architecture & Organisation',
+      'DCIT 209 E-Business Architectures',
+    ];
+
+    const level400Courses = [
+      'UGRC 220 Introduction to African Studies',
+      'DCIT 202 Mobile Application Development',
+      'DCIT 204 Data Structures & Algorithm I',
+      'DCIT 206 Systems Administration',
+      'DCIT 208 Software Engineering',
+      'DCIT 212 Numerical and Computational Methods',
+    ];
+
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen" style={{ backgroundImage: 'url("path/to/im3.jpg")', backgroundSize: 'cover' }}>
+        <div className='flex'>
+       <div className="mb-8">
+        <h2 className="text-2xl font-bold mb-4">{`Year ${year} Subjects and Grades`}</h2>
+        {semesters.map((semester, index) => (
+          <div key={index} className="mb-6">
+            <h3 className="text-xl font-bold mb-2">{semester}</h3>
+            <table className="w-full border-collapse border border-gray-300">
+              <thead>
+                <tr>
+                  <th className="p-2 border border-gray-300">Course</th>
+                  <th className="p-2 border border-gray-300">Grade</th>
+                </tr>
+              </thead>
+              <tbody>
+                {year === '100' && level100Courses.map((course, i) => (
+                  <tr key={i}>
+                    <td className="p-2 border border-gray-300">{course}</td>
+                    <td className="p-2 border border-gray-300">A</td> 
+                  </tr>
+                ))}
+                {year === '200' && level200Courses.map((course, i) => (
+                  <tr key={i}>
+                    <td className="p-2 border border-gray-300">{course}</td>
+                    <td className="p-2 border border-gray-300">B</td> 
+                  </tr>
+                ))}
+                {year === '300' && level300Courses.map((course, i) => (
+                  <tr key={i}>
+                    <td className="p-2 border border-gray-300">{course}</td>
+                    <td className="p-2 border border-gray-300">B+</td> 
+                  </tr>
+                ))}
+                {year === '400' && level400Courses.map((course, i) => (
+                  <tr key={i}>
+                    <td className="p-2 border border-gray-300">{course}</td>
+                    <td className="p-2 border border-gray-300">A</td> 
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <p className="mt-2 font-bold">Total CGPA: {3.6}</p> 
+          </div>
+        ))}
+      </div>
+        </div> 
+        </div>
+
+
+    );
+  };
+
+  const LineChart = () => (
+    <div className="mt-8">
+      <h2 className="text-2xl font-bold mb-4">Grade Progress Chart</h2>
+      <div className="bg-gray-300 p-4 rounded-md">Chart for grades</div>
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-slate-700">
+      <h1 className="text-4xl font-bold mb-8 mt-0">Student Dashboard</h1>
+      <GPABox />
+      <h4  className="text-4xl font-bold mb-8 mt-0">Grade Report</h4>
+      <div className="mt-8 mb-4">
+        <label htmlFor="yearSelect" className="mr-2">
+          Select Year:
+        </label>
+        <select
+          id="yearSelect"
+          onChange={(e) => handleYearChange(e.target.value)}
+          className="p-2 border border-gray-300 rounded"
+        >
+
+          <option value="">Select Year</option>
+          <option value="100">Year 100</option>
+          <option value="200">Year 200</option>
+          <option value="300">Year 300</option>
+          <option value="400">Year 400</option>
+        </select>
+      </div>
+      {selectedYear && <SubjectsAndGrades year={selectedYear} />}
+      <LineChart />
+    </div>
+  );
+};
+
+export default Dashboard;

pages/HelpAndSupport.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+const HelpAndSupport= () => {
+  const faqItems = [
+    { id: 1, question: 'How to report a missing grade?', answer: 'Lorem ipsum dolor sit amet, ...' },
+    { id: 2, question: 'How can I contact technical support?', answer: 'Lorem ipsum dolor sit amet, ...' },
+  ];
+
+  const submitSupportRequest = (formData) => {
+    console.log('Submitting support request:', formData);
+  };
+
+  return (
+    <div>
+      <h1>Help and Support Page</h1>
+      <section>
+        <h2>Frequently Asked Questions</h2>
+        <ul>
+          {faqItems.map((faq) => (
+            <li key={faq.id}>
+              <strong>{faq.question}</strong>
+              <p>{faq.answer}</p>
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section>
+        <h2>Contact Technical Support</h2>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            submitSupportRequest({ /* Form data */ });
+          }}
+        >
+          <label>
+            Name:
+            <input type="text" name="name" />
+          </label>
+          <label>
+            Email:
+            <input type="email" name="email" />
+          </label>
+          <label>
+            Message:
+            <textarea name="message" />
+          </label>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </div>
+  );
+};
+
+export default HelpAndSupport;