From ef5e275db7ba339b0eb3917311f77259c03b364d Mon Sep 17 00:00:00 2001
From: MEDPlat Developer <developer@medplat.com>
Date: Thu, 5 Mar 2026 21:33:04 +0530
Subject: [PATCH] Add new navigation dashboard component for better user
 navigation

- Created new dashboard component with card-based navigation
- Added navigation dashboard controller with mock statistics
- Integrated dashboard into existing routing and navigation
- Added responsive CSS styling for mobile compatibility
- Updated navbar brand to link to new dashboard

Change type: Add a new feature
Files affected: medplat-ui (frontend)
Description: Add a new dashboard component for better user navigation
---
 medplat-ui/app/common/views/layout.html       |   2 +-
 medplat-ui/app/config.lazyload.js             |   1 +
 medplat-ui/app/config.router.js               |  11 ++
 .../navigation-dashboard.controller.js        |  52 +++++++
 .../app/dashboard/navigation-dashboard.css    | 146 ++++++++++++++++++
 .../dashboard/views/navigation-dashboard.html | 141 +++++++++++++++++
 medplat-ui/index.html                         |   2 +
 7 files changed, 354 insertions(+), 1 deletion(-)
 create mode 100644 medplat-ui/app/dashboard/navigation-dashboard.controller.js
 create mode 100644 medplat-ui/app/dashboard/navigation-dashboard.css
 create mode 100644 medplat-ui/app/dashboard/views/navigation-dashboard.html

diff --git a/medplat-ui/app/common/views/layout.html b/medplat-ui/app/common/views/layout.html
index 9bd806d24..544a13ea5 100644
--- a/medplat-ui/app/common/views/layout.html
+++ b/medplat-ui/app/common/views/layout.html
@@ -1,5 +1,5 @@
 <nav aria-labelledby="nav" class="navbar navbar-expand-sm fixed-top cst-navbar">
-    <a class="navbar-brand" href="javascript:void(0)" ui-sref="techo.dashboard.webtasks">
+    <a class="navbar-brand" href="javascript:void(0)" ui-sref="techo.dashboard.navigation">
         <img alt="image" class="argus-logo" src="img/medplat.png" style="height: 35px;">
     </a>
     <ul class="breadcrumbs">
diff --git a/medplat-ui/app/config.lazyload.js b/medplat-ui/app/config.lazyload.js
index 71e061d19..7fd17b705 100644
--- a/medplat-ui/app/config.lazyload.js
+++ b/medplat-ui/app/config.lazyload.js
@@ -421,6 +421,7 @@
             'report-offline.constant': ['app/manage/reportoffline/constants/report-offline.constant.js'],
             'dashboardpoc.controller': ['app/manage/dashboard/controllers/dashboard.controller.js'],
             'dashboardpoc.constant': ['app/manage/dashboard/constants/dashboard.constant.js'],
+            'navigation-dashboard.controller': ['app/dashboard/navigation-dashboard.controller.js'],
             'mobile-feature-management.controller': ["app/manage/mobileFeatureManagement/controllers/mobile-feature-management.controller.js"],
             'mobile-feature.modal.controller': ["app/manage/mobileFeatureManagement/controllers/mobile-feature.modal.controller.js"],
             'mobile-menu-management.controller': ["app/manage/mobileMenuManagement/controllers/mobile-menu-management.controller.js"],
diff --git a/medplat-ui/app/config.router.js b/medplat-ui/app/config.router.js
index a68e0b45e..341ca4e47 100644
--- a/medplat-ui/app/config.router.js
+++ b/medplat-ui/app/config.router.js
@@ -144,6 +144,17 @@
                     abstract: true,
                     template: '<ui-view></ui-view>'
                 })
+                .state('techo.dashboard.navigation', {
+                    url: '/navigation',
+                    title: 'Navigation Dashboard',
+                    templateUrl: 'app/dashboard/views/navigation-dashboard.html',
+                    controller: 'NavigationDashboardController as dashboardCtrl',
+                    resolve: load([
+                        'navigation-dashboard.controller',
+                        'bootstrap',
+                        'generalutil.service'
+                    ])
+                })
                 .state('techo.admin', {
                     url: "/admin",
                     abstract: true,
diff --git a/medplat-ui/app/dashboard/navigation-dashboard.controller.js b/medplat-ui/app/dashboard/navigation-dashboard.controller.js
new file mode 100644
index 000000000..93a2e8b98
--- /dev/null
+++ b/medplat-ui/app/dashboard/navigation-dashboard.controller.js
@@ -0,0 +1,52 @@
+(function () {
+    'use strict';
+
+    angular.module('imtecho')
+        .controller('NavigationDashboardController', NavigationDashboardController);
+
+    NavigationDashboardController.$inject = ['$scope', '$state', 'GeneralUtilService'];
+
+    function NavigationDashboardController($scope, $state, GeneralUtilService) {
+        var dashboardCtrl = this;
+
+        // Initialize dashboard data
+        dashboardCtrl.activeUsers = 0;
+        dashboardCtrl.pendingTasks = 0;
+        dashboardCtrl.todayActivities = 0;
+
+        // Initialize the controller
+        function init() {
+            loadDashboardData();
+        }
+
+        // Load dashboard statistics
+        function loadDashboardData() {
+            // Mock data for demonstration - replace with actual API calls
+            dashboardCtrl.activeUsers = 1247;
+            dashboardCtrl.pendingTasks = 38;
+            dashboardCtrl.todayActivities = 156;
+
+            // In a real implementation, you would make API calls like:
+            // GeneralUtilService.getDashboardStats().then(function(response) {
+            //     dashboardCtrl.activeUsers = response.activeUsers;
+            //     dashboardCtrl.pendingTasks = response.pendingTasks;
+            //     dashboardCtrl.todayActivities = response.todayActivities;
+            // });
+        }
+
+        // Navigate to specific module
+        dashboardCtrl.navigateToModule = function(moduleState) {
+            if (moduleState) {
+                $state.go(moduleState);
+            }
+        };
+
+        // Refresh dashboard data
+        dashboardCtrl.refresh = function() {
+            loadDashboardData();
+        };
+
+        // Initialize on load
+        init();
+    }
+})();
diff --git a/medplat-ui/app/dashboard/navigation-dashboard.css b/medplat-ui/app/dashboard/navigation-dashboard.css
new file mode 100644
index 000000000..a029f7b0d
--- /dev/null
+++ b/medplat-ui/app/dashboard/navigation-dashboard.css
@@ -0,0 +1,146 @@
+/* Navigation Dashboard Styles */
+.dashboard-cards {
+    margin-bottom: 30px;
+}
+
+.dashboard-card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid #e0e0e0;
+    min-height: 140px;
+    display: flex;
+    align-items: center;
+}
+
+.dashboard-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    border-color: #007bff;
+}
+
+.dashboard-card .card-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #007bff, #0056b3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+    flex-shrink: 0;
+}
+
+.dashboard-card .card-icon i {
+    color: #fff;
+    font-size: 24px;
+}
+
+.dashboard-card .card-content h3 {
+    margin: 0 0 5px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.dashboard-card .card-content p {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.4;
+}
+
+/* Quick Stats Styles */
+.quick-stats {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 20px;
+    margin-top: 20px;
+}
+
+.quick-stats h3 {
+    margin: 0 0 20px 0;
+    color: #333;
+    font-size: 18px;
+}
+
+.stat-box {
+    background: #fff;
+    border-radius: 6px;
+    padding: 15px;
+    text-align: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border-left: 4px solid #007bff;
+}
+
+.stat-box h4 {
+    margin: 0 0 10px 0;
+    font-size: 14px;
+    color: #666;
+    font-weight: 500;
+}
+
+.stat-number {
+    font-size: 24px;
+    font-weight: 700;
+    color: #007bff;
+    display: block;
+}
+
+.stat-number.health-good {
+    color: #28a745;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .dashboard-card {
+        margin-bottom: 15px;
+        min-height: 120px;
+    }
+    
+    .dashboard-card .card-icon {
+        width: 50px;
+        height: 50px;
+    }
+    
+    .dashboard-card .card-icon i {
+        font-size: 20px;
+    }
+    
+    .dashboard-card .card-content h3 {
+        font-size: 15px;
+    }
+    
+    .dashboard-card .card-content p {
+        font-size: 13px;
+    }
+    
+    .stat-box {
+        margin-bottom: 15px;
+    }
+}
+
+/* Animation for dashboard cards */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.dashboard-card {
+    animation: fadeInUp 0.5s ease-out;
+}
+
+.dashboard-card:nth-child(1) { animation-delay: 0.1s; }
+.dashboard-card:nth-child(2) { animation-delay: 0.2s; }
+.dashboard-card:nth-child(3) { animation-delay: 0.3s; }
+.dashboard-card:nth-child(4) { animation-delay: 0.4s; }
diff --git a/medplat-ui/app/dashboard/views/navigation-dashboard.html b/medplat-ui/app/dashboard/views/navigation-dashboard.html
new file mode 100644
index 000000000..27b54c603
--- /dev/null
+++ b/medplat-ui/app/dashboard/views/navigation-dashboard.html
@@ -0,0 +1,141 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-12">
+            <h2 class="page-title">Navigation Dashboard</h2>
+        </div>
+    </div>
+    
+    <div class="row dashboard-cards">
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.dashboard.webtasks">
+                <div class="card-icon">
+                    <i class="fa fa-tasks"></i>
+                </div>
+                <div class="card-content">
+                    <h3>Web Tasks</h3>
+                    <p>Manage and view web tasks</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.dashboard.fhs">
+                <div class="card-icon">
+                    <i class="fa fa-heartbeat"></i>
+                </div>
+                <div class="card-content">
+                    <h3>FHS Dashboard</h3>
+                    <p>Field Health System overview</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.manage.lmsdashboard">
+                <div class="card-icon">
+                    <i class="fa fa-graduation-cap"></i>
+                </div>
+                <div class="card-content">
+                    <h3>LMS Dashboard</h3>
+                    <p>Learning Management System</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.dashboard.callcenter">
+                <div class="card-icon">
+                    <i class="fa fa-phone"></i>
+                </div>
+                <div class="card-content">
+                    <h3>Call Center</h3>
+                    <p>Call Center operations</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="row dashboard-cards">
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.manage.districtperformancedashboard">
+                <div class="card-icon">
+                    <i class="fa fa-chart-bar"></i>
+                </div>
+                <div class="card-content">
+                    <h3>District Performance</h3>
+                    <p>View district statistics</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.dashboard.cccverification">
+                <div class="card-icon">
+                    <i class="fa fa-shield-alt"></i>
+                </div>
+                <div class="card-content">
+                    <h3>Command Center</h3>
+                    <p>Command & Control Center</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.training.dashboardDetails">
+                <div class="card-icon">
+                    <i class="fa fa-chalkboard-teacher"></i>
+                </div>
+                <div class="card-content">
+                    <h3>Training Dashboard</h3>
+                    <p>Training analytics and reports</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="col-md-3 col-sm-6">
+            <div class="dashboard-card" ui-sref="techo.admin.users">
+                <div class="card-icon">
+                    <i class="fa fa-users"></i>
+                </div>
+                <div class="card-content">
+                    <h3>User Management</h3>
+                    <p>Manage users and roles</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="row">
+        <div class="col-md-12">
+            <div class="quick-stats">
+                <h3>Quick Overview</h3>
+                <div class="row">
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h4>Active Users</h4>
+                            <span class="stat-number">{{dashboardCtrl.activeUsers}}</span>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h4>Pending Tasks</h4>
+                            <span class="stat-number">{{dashboardCtrl.pendingTasks}}</span>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h4>Today's Activities</h4>
+                            <span class="stat-number">{{dashboardCtrl.todayActivities}}</span>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stat-box">
+                            <h4>System Health</h4>
+                            <span class="stat-number health-good">Good</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/medplat-ui/index.html b/medplat-ui/index.html
index d4ea6165a..ccc40787e 100644
--- a/medplat-ui/index.html
+++ b/medplat-ui/index.html
@@ -48,6 +48,8 @@
   <link href="styles/css/scroll.css" rel="stylesheet" type="text/css" />
   <!--Responsive CSS-->
   <link href="styles/css/responsive.css" rel="stylesheet" type="text/css" />
+  <!-- Navigation Dashboard CSS -->
+  <link href="app/dashboard/navigation-dashboard.css" rel="stylesheet" type="text/css" />
   <link href="bower_components/AngularJS-Toaster/toaster.min.css" rel="stylesheet" type="text/css" />
   <!--SCRIPTS-->