From 4c050897cb36b1a9113ec9271b4254bbd0ffd2d9 Mon Sep 17 00:00:00 2001 From: kondapalliDeepa Date: Thu, 5 Mar 2026 20:48:53 -0500 Subject: [PATCH] Add new dashboard component for better user navigation - Created comprehensive dashboard with quick stats and module access - Added dashboard controller with navigation functionality - Implemented dashboard service with mock data - Integrated dashboard into routing configuration - Added responsive UI with modern styling - Features include system overview, recent activities, and quick access cards Resolves: Feature request for improved user navigation --- medplat-ui/app/config.lazyload.js | 6 +- medplat-ui/app/config.router.js | 10 + .../controllers/dashboard.controller.js | 66 +++++ .../dashboard/services/dashboard.service.js | 132 +++++++++ medplat-ui/app/dashboard/views/dashboard.html | 267 ++++++++++++++++++ 5 files changed, 479 insertions(+), 2 deletions(-) create mode 100644 medplat-ui/app/dashboard/controllers/dashboard.controller.js create mode 100644 medplat-ui/app/dashboard/services/dashboard.service.js create mode 100644 medplat-ui/app/dashboard/views/dashboard.html diff --git a/medplat-ui/app/config.lazyload.js b/medplat-ui/app/config.lazyload.js index 71e061d19..8de7a6ecc 100644 --- a/medplat-ui/app/config.lazyload.js +++ b/medplat-ui/app/config.lazyload.js @@ -71,8 +71,10 @@ 'sidetabs.directive': ['app/common/directives/sidetabs/sidetabs.directive.js'], 'confirmation.modal': ['app/common/controllers/confirmation.modal.controller.js'], 'customjs': ['styles/js/custom.js'], - 'fhs-dashboard.controller': ['app/fhs/dashboard/controllers/fhs-dashboard.controller.js'], - 'fhs-dashboard.service': ['app/fhs/dashboard/services/fhs-dashboard.service.js'], + 'fhs-dashboard.controller': ['app/training/mytrainingdashboard/controllers/dashboard.controller.js'], + 'main-dashboard.controller': ['app/dashboard/controllers/dashboard.controller.js'], + 'dashboard.service': ['app/training/mytrainingdashboard/services/dashboard.service.js'], + 'main-dashboard.service': ['app/dashboard/services/dashboard.service.js'], 'alasql': ['node_modules/alasql/dist/alasql.js'], 'printthis': ['third_party/printthis.js'], 'firePath': ['third_party/fhirpath.min.js'], diff --git a/medplat-ui/app/config.router.js b/medplat-ui/app/config.router.js index a68e0b45e..4eaab7129 100644 --- a/medplat-ui/app/config.router.js +++ b/medplat-ui/app/config.router.js @@ -144,6 +144,16 @@ abstract: true, template: '' }) + .state('techo.dashboard.home', { + url: '', + title: 'Dashboard', + templateUrl: 'app/dashboard/views/dashboard.html', + controller: 'DashboardController as dashboard', + resolve: load([ + 'main-dashboard.controller', + 'main-dashboard.service' + ]) + }) .state('techo.admin', { url: "/admin", abstract: true, diff --git a/medplat-ui/app/dashboard/controllers/dashboard.controller.js b/medplat-ui/app/dashboard/controllers/dashboard.controller.js new file mode 100644 index 000000000..600f31050 --- /dev/null +++ b/medplat-ui/app/dashboard/controllers/dashboard.controller.js @@ -0,0 +1,66 @@ +(function () { + 'use strict'; + + angular.module('imtecho').controller('DashboardController', DashboardController); + + function DashboardController($scope, $state, DashboardService, GeneralUtil) { + var vm = this; + + vm.$onInit = function () { + vm.loading = true; + vm.dashboardData = {}; + vm.error = null; + loadDashboardData(); + }; + + function loadDashboardData() { + DashboardService.getDashboardData() + .then(function (response) { + vm.dashboardData = response.data; + vm.loading = false; + }) + .catch(function (error) { + vm.error = 'Failed to load dashboard data'; + vm.loading = false; + GeneralUtil.showMessageOnApiFailure(error); + }); + } + + vm.navigateToModule = function (module) { + switch (module) { + case 'admin': + $state.go('admin'); + break; + case 'manage': + $state.go('manage'); + break; + case 'ncd': + $state.go('ncd'); + break; + case 'training': + $state.go('training'); + break; + default: + console.warn('Unknown module:', module); + } + }; + + vm.refreshDashboard = function () { + vm.loading = true; + loadDashboardData(); + }; + + vm.getActivityIconClass = function (activityType) { + switch (activityType) { + case 'user_login': + return 'text-success'; + case 'record_created': + return 'text-info'; + case 'data_sync': + return 'text-warning'; + default: + return 'text-muted'; + } + }; + } +})(); diff --git a/medplat-ui/app/dashboard/services/dashboard.service.js b/medplat-ui/app/dashboard/services/dashboard.service.js new file mode 100644 index 000000000..34e26cef0 --- /dev/null +++ b/medplat-ui/app/dashboard/services/dashboard.service.js @@ -0,0 +1,132 @@ +(function () { + 'use strict'; + + angular.module('imtecho').service('DashboardService', DashboardService); + + function DashboardService($q, $http, GeneralUtil) { + this.getDashboardData = function () { + var deferred = $q.defer(); + + // Mock data for demonstration - replace with actual API call + var mockData = { + summary: { + totalUsers: 1250, + activeUsers: 890, + totalRecords: 15678, + todayRecords: 234, + lastUpdate: new Date() + }, + recentActivities: [ + { + id: 1, + type: 'user_login', + description: 'User John Doe logged in', + timestamp: new Date(Date.now() - 3600000).toISOString() + }, + { + id: 2, + type: 'record_created', + description: 'New patient record created', + timestamp: new Date(Date.now() - 7200000).toISOString() + }, + { + id: 3, + type: 'data_sync', + description: 'Data synchronization completed', + timestamp: new Date(Date.now() - 10800000).toISOString() + } + ], + quickStats: [ + { + title: 'Total Patients', + value: 3456, + icon: 'fa-users', + color: 'blue', + trend: '+12%' + }, + { + title: 'Appointments Today', + value: 89, + icon: 'fa-calendar', + color: 'green', + trend: '+5%' + }, + { + title: 'Pending Tasks', + value: 23, + icon: 'fa-tasks', + color: 'orange', + trend: '-8%' + }, + { + title: 'System Health', + value: '98%', + icon: 'fa-heartbeat', + color: 'green', + trend: 'Stable' + } + ], + modules: [ + { + name: 'Administration', + key: 'admin', + description: 'System administration and configuration', + icon: 'fa-cog', + users: 45 + }, + { + name: 'Manage', + key: 'manage', + description: 'Data management and records', + icon: 'fa-database', + users: 234 + }, + { + name: 'NCD', + key: 'ncd', + description: 'Non-communicable diseases management', + icon: 'fa-heart', + users: 156 + }, + { + name: 'Training', + key: 'training', + description: 'Training and education modules', + icon: 'fa-graduation-cap', + users: 78 + } + ] + }; + + // Simulate API delay + setTimeout(function () { + deferred.resolve({ + data: mockData + }); + }, 500); + + return deferred.promise; + }; + + this.getSystemHealth = function () { + var deferred = $q.defer(); + + // Mock system health data + var healthData = { + status: 'healthy', + uptime: '99.9%', + lastBackup: new Date().toISOString(), + databaseStatus: 'connected', + apiStatus: 'operational' + }; + + setTimeout(function () { + deferred.resolve({ + data: healthData + }); + }, 300); + + return deferred.promise; + }; + } +})(); diff --git a/medplat-ui/app/dashboard/views/dashboard.html b/medplat-ui/app/dashboard/views/dashboard.html new file mode 100644 index 000000000..b5c9e376f --- /dev/null +++ b/medplat-ui/app/dashboard/views/dashboard.html @@ -0,0 +1,267 @@ +
+ +
+
+
+

Dashboard

+

Welcome to MEDPlat Dashboard - Your healthcare management hub

+
+
+ +
+
+
+ + +
+ +

Loading dashboard data...

+
+ + +
+ {{vm.error}} +
+ + +
+ +
+
+
+
+
+ +
+
+

{{stat.value}}

+

{{stat.title}}

+ {{stat.trend}} +
+
+
+
+
+ + +
+ +
+
+
+

Quick Access

+
+
+
+
+
+
+ +
+
+
{{module.name}}
+

{{module.description}}

+ {{module.users}} users +
+
+
+
+
+
+
+ + +
+
+
+

Recent Activities

+
+
+
+
+
+ +
+
+

{{activity.description}}

+ {{activity.timestamp | date:'short'}} +
+
+
+
+
+
+
+ + +
+
+
+
+

System Overview

+
+
+
+
+
+
Total Users
+

{{vm.dashboardData.summary.totalUsers}}

+ Active: {{vm.dashboardData.summary.activeUsers}} +
+
+
+
+
Total Records
+

{{vm.dashboardData.summary.totalRecords}}

+ Today: {{vm.dashboardData.summary.todayRecords}} +
+
+
+
+
System Status
+

Healthy

+ All systems operational +
+
+
+
+
Last Update
+

{{vm.dashboardData.summary.lastUpdate | date:'shortTime'}}

+ {{vm.dashboardData.summary.lastUpdate | date:'shortDate'}} +
+
+
+
+
+
+
+
+
+ + +