Dashboard frontend refactor: student profile modularization, notifications upgrade, and database pages

docs/notification-enhancement-scope.md

@@ -0,0 +1,14 @@
+# Notification Enhancement Scope Decision
+
+## Decision
+Starred notifications and advanced filtering/sorting are treated as enhancement features beyond baseline UC coverage.
+
+## UC Catalog Handling
+- Baseline UC remains: view notifications, read/unread toggle, delete.
+- Enhancement feature status: retained as optional UX improvements.
+- No blocking dependency for Assignment 7 requirement-driven completion.
+
+## Rationale
+- Assignment 7 focuses on missing/partial/incorrect UC-BR-WF items.
+- Notification enhancement does not block core workflow correctness.
+- Keeping enhancements separate avoids scope creep while preserving future roadmap value.

docs/role-permission-matrix.md

@@ -0,0 +1,25 @@
+# Role Permission Matrix for Database Dashboard
+
+## Scope
+This matrix documents role-based access for Assignment 7 database sprint workflows.
+
+## Modules and Roles
+
+| Capability | Student | Faculty | Staff | Acadadmin |
+|---|---|---|---|---|
+| Access Database module | Yes (if module access enabled) | Yes (if module access enabled) | Yes (if module access enabled) | Yes |
+| View Issues list | Yes | Yes | Yes | Yes |
+| Create Issue | Yes | Yes | Yes | Yes |
+| Edit own open Issue | Yes | Yes | Yes | Yes |
+| Edit closed Issue | No | No | No | No |
+| Support Issue (non-owner) | Yes | Yes | Yes | Yes |
+| Support own Issue | No | No | No | No |
+| Submit/Update own Feedback | Yes | Yes | Yes | Yes |
+| View top feedback entries | Yes | Yes | Yes | Yes |
+| Search users (q length >= 3) | Yes | Yes | Yes | Yes |
+
+## Enforcement Points
+- Backend issue support owner-block is enforced in globals API and legacy endpoint.
+- Closed issue edit block is enforced in backend update handlers.
+- Search minimum length is validated in both frontend and backend.
+- Role and accessible module payload validation is enforced in frontend auth bootstrap.

src/Modules/Dashboard/Dashboard.module.css

@@ -6,10 +6,9 @@
 }
 
 .fusionCaretCircleIcon {
-  font-size: 2rem;
-  @media (min-width: mantine-breakpoint-md) {
-    font-size: 1.5rem;
-  }
+  width: 24px;
+  height: 24px;
+  color: #228be6;
 }
 
 .fusionCaretIcon {
@@ -30,42 +29,169 @@
   flex-shrink: 1;
   max-width: 80vw;
   overflow-x: auto;
-  overflow-y: hidden;
-  scroll-behavior: smooth;
+  -ms-overflow-style: none;
 }
 
-/* Enhanced tab list scrolling styles */
-.fusionTabsList {
-  display: flex;
-  flex-wrap: nowrap;
+.fusionTabsContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.selectinputs {
+  background-color: #15abff20;
+  border-color: #15abff4d;
+}
+
+.selectinputs::placeholder {
+  color: #15abff;
+  font-weight: 600;
+}
+
+.selectoptions:hover {
+  background-color: #15abff10; 
+}
+
+.tabsContainer {
+  flex: 1;
+  overflow: hidden;
+  margin: 0 4px;
+}
+
+.activeTab {
+  color: #228be6 !important;
+  border-color: #228be6 !important;
+}
+
+
+.tabsWrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  position: relative;
+  padding: 0 4px;
+}
+
+.tabsScrollArea {
   overflow-x: auto;
-  overflow-y: hidden;
-  scroll-behavior: smooth;
-  gap: 4px;
+  scrollbar-width: none; 
+  -ms-overflow-style: none; 
+  max-width: calc(100% - 70px); 
+  white-space: nowrap;
+}
+
+.tabsScrollArea::-webkit-scrollbar {
+  display: none; 
+}
+
+.navigationButton {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  width: 32px;
+  height: 32px;
   padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1;
 }
 
-.fusionTabItem {
+.tabsList {
+  display: inline-flex;
+  white-space: nowrap;
+  flex-wrap: nowrap;
   min-width: fit-content;
+  border-bottom: 1px solid #e9ecef;
+  gap: 8px;
+  padding: 0 4px;
+}
+
+.tabsList [role="tab"] {
   white-space: nowrap;
   flex-shrink: 0;
+}
+
+.activeTab {
+  color: #228be6 !important;
+  border-color: #228be6 !important;
+}
+
+
+@media (max-width: 1200px) {
+  .tabsScrollArea {
+    max-width: calc(100% - 80px);
+  }
+}
+
+@media (max-width: 768px) {
+  .tabsWrapper {
+    gap: 4px;
+    padding: 0 2px;
+  }
+
+  .tabsScrollArea {
+    max-width: calc(100% - 70px);
+    min-width: 150px;
+  }
+
+  .navigationButton {
+    width: 28px;
+    height: 28px;
+    padding: 2px;
+  }
+
+  .fusionCaretCircleIcon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .tabsList {
+    gap: 4px;
+    padding: 0 2px;
+  }
+
+  .notificationActions {
+    margin-top: 10px;
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 480px) {
+  .tabsScrollArea {
+    max-width: calc(100% - 60px);
+    min-width: 120px;
+  }
+
+  .navigationButton {
+    width: 24px;
+    height: 24px;
+  }
+
+  .fusionCaretCircleIcon {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+
+.notificationItem {
+  position: relative;
   transition: all 0.2s ease;
 }
 
-.fusionTabItem:hover {
-  transform: translateY(-1px);
+.notificationItem:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.selectinputs {
-    background-color: #15abff20;
-    border-color: #15abff4d;
+.starButton {
+  transition: transform 0.2s ease;
 }
 
-.selectinputs::placeholder {
-    color: #15abff;
-    font-weight: 600;
+.starButton:hover {
+  transform: scale(1.1);
 }
 
-.selectoptions:hover {
-  background-color: #15abff10; /* Transparent blue hover background */
+.starredNotification {
+  background-color: transparent;
 }