From 4863ab499a427637b56865ac5f19c86294382891 Mon Sep 17 00:00:00 2001
From: Waqar Amin <vacaramin86@gmail.com>
Date: Mon, 11 Dec 2023 00:51:27 +0500
Subject: [PATCH] Notifications added to teachers dashboard

---
 backend/Migrations/001_initial.up.sql         | 20 +++-
 .../Notifications/Notifications.css           | 93 +++++++++++++------
 .../Notifications/Notifications.jsx           | 61 ++++++++++--
 3 files changed, 136 insertions(+), 38 deletions(-)

diff --git a/backend/Migrations/001_initial.up.sql b/backend/Migrations/001_initial.up.sql
index 8908e8ec..97ce03ca 100644
--- a/backend/Migrations/001_initial.up.sql
+++ b/backend/Migrations/001_initial.up.sql
@@ -9,7 +9,9 @@ CREATE TABLE IF NOT EXISTS users (
     dob TIMESTAMPTZ,
     created_at TIMESTAMPTZ DEFAULT NOW(),
     updated_at TIMESTAMPTZ DEFAULT NOW(),
-    role VARCHAR(10) -- Add the role column
+    role VARCHAR(10), -- Add the role column
+    about VARCHAR(255)
+    
 );
 
 -- Create the "students" table
@@ -157,6 +159,22 @@ VALUES
         '1990-01-01',
         'student'
     ),
+    (
+        'awaismadad@gmail.com',
+        '$2a$10$RoehRLxjbt1jHUT2j9Gihu6QYeRRa3xuycKs0GGDxpEb3dJFzo6ga',
+        'female',
+        'Awais Madad',
+        '1995-03-15',
+        'tutor'
+    ),
+    (
+        'awaismadad12@gmail.com',
+        '$2a$10$RoehRLxjbt1jHUT2j9Gihu6QYeRRa3xuycKs0GGDxpEb3dJFzo6ga',
+        'female',
+        'Awais Madad',
+        '1995-03-15',
+        'tutor'
+    ),
     (
         'awaismadad@gmail.com',
         '$2a$10$RoehRLxjbt1jHUT2j9Gihu6QYeRRa3xuycKs0GGDxpEb3dJFzo6ga',
diff --git a/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.css b/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.css
index 4fde9333..d2f5b651 100644
--- a/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.css
+++ b/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.css
@@ -1,28 +1,67 @@
-.notifications-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 20px;
-    padding: 20px;
-    width: 90%;
-  }
+.home-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  padding: 20px;
+  width: 90%;
+}
+
 .box {
-    background-color: #f2f2f2;
-    border-radius: 8px;
-    padding: 15px;
-  }
-  
-  .box-title {
-    background-color: #243047;
-    color: #fff;
-    padding: 10px;
-    border-radius: 8px 8px 0 0;
-    margin: 0;
-    width: 101%;
-    position: relative;
-    top: -15px;
-    left: -15px;
-    z-index: 1;
-  }
-  .notifications-box {
-    grid-column: span 2;
-  }
\ No newline at end of file
+  background-color: #f2f2f2;
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.box-title {
+  background-color: #243047;
+  color: #fff;
+  padding: 10px;
+  border-radius: 8px 8px 0 0;
+  margin: 0;
+  width: 100%;
+  position: relative;
+  top: -15px;
+  left: -15px;
+  z-index: 1;
+}
+
+.box-content {
+  margin-top: 20px;
+  text-align: left;
+}
+
+/* Updated styles for notifications */
+.notification-row {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 10px;
+  transition: background-color 0.3s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.notification-row:hover {
+  background-color: #f7f7f7;
+}
+
+.notification-text {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.notification-status {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.notification-date {
+  color: #666;
+}
+
+.notifications-box {
+  grid-column: span 2;
+}
\ No newline at end of file
diff --git a/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.jsx b/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.jsx
index 2ad4f62a..5fa2cd0f 100644
--- a/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.jsx
+++ b/frontend/src/Components/TeacherDashboard/ContentArea/Notifications/Notifications.jsx
@@ -1,18 +1,59 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
 import './Notifications.css';
 
 const Notifications = () => {
-
+    const [notifications, setNotifications] = useState([]);
+    const [loading, setLoading] = useState(true);
+  
+    useEffect(() => {
+      const apiUrl = `http://localhost:4000/notification/getnotifications`;
+  
+      axios
+        .get(apiUrl, {
+          withCredentials: true,
+          headers: {
+            "Content-Type": "application/json", // Adjust content type as needed
+          },
+        })
+        .then((response) => {
+          console.log("Get Notification", response);
+          setNotifications(response.data.EnrollmentController);
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error("Error fetching notifications:", error);
+          setLoading(false);
+          setNotifications([]);
+        });
+    }, []);
+  
     return (
-        <div className="notifications-container">
-        <div className="box notifications-box">
-            <h1 className="box-title">Notifications</h1>
-            <div className="box-content">
-            <h3>Notification Details</h3>
-            <p>These are the details of the notifications.</p>
+      <div className="box notifications-box">
+      <h1 className="box-title">Notifications</h1>
+      <div className="box-content">
+        {loading ? (
+          <p>Loading notifications...</p>
+        ) : notifications.length === 0 ? (
+          <p>No notifications available.</p>
+        ) : (
+          notifications.map((notification, index) => (
+            <div key={notification.created_at} className="notification-row">
+              <div className="notification-text">
+                <h3>{notification.message}</h3>
+              </div>
+              <div className="notification-status">{notification.status}</div>
+              <div className="notification-date">
+                {notification.created_at
+                  ? new Date(notification.created_at).toLocaleString()
+                  : "N/A"}
+              </div>
             </div>
-        </div>
-        </div>
+          ))
+        )}
+      </div>
+    </div>
+
     );
 }