From ad2de9d44c256293f2ebe0cbcd954e128a1e83de Mon Sep 17 00:00:00 2001
From: little-smsm <somaiahassen1@gmail.com>
Date: Wed, 16 Apr 2025 13:57:01 +0200
Subject: [PATCH] style: Enhance Dashboard UI with improved button
 functionality and design

- Updated CSS for the view-all buttons, refining styles for better visual appeal and user interaction.
- Modified HTML to include click event handlers for navigation to students, lessons management, and subscription details.
- Improved button layout and hover effects for enhanced user experience and accessibility.
- Ensured consistent styling across dashboard components to align with overall application design.
---
 .../admin/dashboard/dashboard.component.css   | 27 ++++++++++++-------
 .../admin/dashboard/dashboard.component.html  |  8 +++---
 .../admin/dashboard/dashboard.component.ts    | 27 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.css b/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.css
index fbbb087..477e313 100644
--- a/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.css
+++ b/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.css
@@ -455,25 +455,32 @@
     background: none;
     border: none;
     color: var(--medium-purple);
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 600;
-    cursor: pointer;
-    padding: 8px 16px;
-    border-radius: 6px;
+    padding: 8px 12px;
+    border-radius: 8px;
     transition: all 0.3s ease;
-    display: inline-flex;
+    display: flex;
     align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    background-color: rgba(169, 181, 223, 0.08);
 }
 
 .view-all-btn i {
-    margin-left: 8px;
-    font-size: 12px;
+    margin-left: 10px;
+    font-size: 14px;
     transition: transform 0.3s ease;
 }
 
 .view-all-btn:hover {
-    color: var(--dark-purple);
-    background-color: rgba(169, 181, 223, 0.1);
+    background-color: var(--medium-purple);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(120, 134, 199, 0.2);
 }
 
 .view-all-btn:hover i {
@@ -482,7 +489,7 @@
 
 .view-all-btn:focus {
     outline: none;
-    box-shadow: 0 0 0 2px rgba(120, 134, 199, 0.3);
+    box-shadow: 0 0 0 3px rgba(120, 134, 199, 0.3);
 }
 
 /* Data Grid */
diff --git a/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.html b/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.html
index 7469f34..c21695d 100644
--- a/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.html
+++ b/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.html
@@ -95,7 +95,7 @@ <h3><i class="fa-solid fa-graduation-cap"></i> Students Distribution</h3>
                     </div>
                 </div>
                 <div class="card-footer">
-                    <button class="view-all-btn">View all students <i class="fa-solid fa-arrow-right"></i></button>
+                    <button class="view-all-btn" (click)="viewAllStudents()">View all students <i class="fa-solid fa-arrow-right"></i></button>
                 </div>
             </section>
 
@@ -142,7 +142,7 @@ <h3><i class="fa-solid fa-person-chalkboard"></i> Lessons by Grade</h3>
                     </div>
                 </div>
                 <div class="card-footer">
-                    <button class="view-all-btn">Manage lessons <i class="fa-solid fa-arrow-right"></i></button>
+                    <button class="view-all-btn" (click)="manageLessons()">Manage lessons <i class="fa-solid fa-arrow-right"></i></button>
                 </div>
             </section>
         </div>
@@ -192,7 +192,7 @@ <h3><i class="fa-solid fa-calendar-check"></i> Yearly Subscriptions</h3>
                     </div>
                 </div>
                 <div class="card-footer">
-                    <button class="view-all-btn">View subscription details <i class="fa-solid fa-arrow-right"></i></button>
+                    <button class="view-all-btn" (click)="viewSubscriptionDetails()">View subscription details <i class="fa-solid fa-arrow-right"></i></button>
                 </div>
             </section>
 
@@ -239,7 +239,7 @@ <h3><i class="fa-solid fa-calendar-days"></i> Monthly Subscriptions</h3>
                     </div>
                 </div>
                 <div class="card-footer">
-                    <button class="view-all-btn">View subscription details <i class="fa-solid fa-arrow-right"></i></button>
+                    <button class="view-all-btn" (click)="viewSubscriptionDetails()">View subscription details <i class="fa-solid fa-arrow-right"></i></button>
                 </div>
             </section>
         </div>
diff --git a/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.ts b/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.ts
index 551fd4d..4e4937e 100644
--- a/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.ts
+++ b/frontend/learnify-frontend/src/app/admin/dashboard/dashboard.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -10,7 +11,10 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
 })
 export class DashboardComponent implements OnInit, AfterViewInit {
   
-  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: Object,
+    private router: Router
+  ) {}
 
   ngOnInit(): void {
     // Initialize any data or services here
@@ -23,6 +27,27 @@ export class DashboardComponent implements OnInit, AfterViewInit {
     }
   }
 
+  /**
+   * Navigate to the students page
+   */
+  viewAllStudents(): void {
+    this.router.navigate(['/admin/students']);
+  }
+
+  /**
+   * Navigate to the lessons management page
+   */
+  manageLessons(): void {
+    this.router.navigate(['/admin/dashboard/lessons-management']);
+  }
+
+  /**
+   * Navigate to the subscriptions page
+   */
+  viewSubscriptionDetails(): void {
+    this.router.navigate(['/admin/dashboard/subscriptions-list']);
+  }
+
   /**
    * Animates the counter elements to count up to their target values
    */