From 3102bcff775acc32352cd2c437f63e4f51d2db65 Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Tue, 31 Mar 2026 23:01:19 +0000
Subject: [PATCH] feat: clickable dashlet cards with detail drill-down

---
 .../src/views/dashlets/smart-assistant.js     | 74 +++++++++++++++----
 1 file changed, 58 insertions(+), 16 deletions(-)

diff --git a/files/client/custom/modules/smart-assistant/src/views/dashlets/smart-assistant.js b/files/client/custom/modules/smart-assistant/src/views/dashlets/smart-assistant.js
index cf32bfd..fc6628a 100644
--- a/files/client/custom/modules/smart-assistant/src/views/dashlets/smart-assistant.js
+++ b/files/client/custom/modules/smart-assistant/src/views/dashlets/smart-assistant.js
@@ -11,32 +11,48 @@ define('modules/smart-assistant/views/dashlets/smart-assistant', ['view'], funct
         templateContent: '' +
             '<div style="direction: rtl; text-align: right; padding: 8px;">' +
             '<div class="sa-dashlet-cards" style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;"></div>' +
-            '<div class="sa-dashlet-alerts" style="max-height: 200px; overflow-y: auto;"></div>' +
+            '<div class="sa-dashlet-detail" style="max-height: 250px; overflow-y: auto;"></div>' +
             '</div>',
 
+        events: {
+            'click .sa-card': function (e) {
+                var type = $(e.currentTarget).data('type');
+                this.showDetail(type);
+            },
+        },
+
         afterRender: function () {
+            this._alerts = [];
+            this._summary = {};
+            this._activeType = null;
             this.loadSummary();
         },
 
         loadSummary: function () {
             var self = this;
             Espo.Ajax.getRequest('SmartAssistant/action/summary').then(function (response) {
-                self.renderCards(response.summary || {});
-                self.renderAlerts(response.alerts || []);
+                self._summary = response.summary || {};
+                self._alerts = response.alerts || [];
+                self.renderCards(self._summary);
+                self.showDetail(self._activeType);
             }).catch(function () {});
         },
 
         renderCards: function (summary) {
             var cards = [
-                {label: 'תיקים פתוחים', value: summary.totalOpenCases || 0, color: '#1565c0', bg: '#e3f2fd', icon: 'fa-folder-open'},
-                {label: 'משימות באיחור', value: summary.totalOverdueTasks || 0, color: '#c62828', bg: '#ffcdd2', icon: 'fa-exclamation-circle'},
-                {label: 'דיונים השבוע', value: summary.upcomingHearings7d || 0, color: '#e65100', bg: '#fff3e0', icon: 'fa-gavel'},
-                {label: 'דורשים תשומת לב', value: summary.casesNeedingAttention || 0, color: '#f9a825', bg: '#fff9c4', icon: 'fa-bell'},
+                {type: 'open', label: 'תיקים פתוחים', value: summary.totalOpenCases || 0, color: '#1565c0', bg: '#e3f2fd', icon: 'fa-folder-open'},
+                {type: 'overdue', label: 'משימות באיחור', value: summary.totalOverdueTasks || 0, color: '#c62828', bg: '#ffcdd2', icon: 'fa-exclamation-circle'},
+                {type: 'hearings', label: 'דיונים השבוע', value: summary.upcomingHearings7d || 0, color: '#e65100', bg: '#fff3e0', icon: 'fa-gavel'},
+                {type: 'attention', label: 'דורשים תשומת לב', value: summary.casesNeedingAttention || 0, color: '#f9a825', bg: '#fff9c4', icon: 'fa-bell'},
             ];
 
+            var self = this;
             var html = '';
             cards.forEach(function (c) {
-                html += '<div style="flex: 1; min-width: 80px; background: ' + c.bg + '; padding: 10px; border-radius: 8px; text-align: center;">' +
+                var active = self._activeType === c.type;
+                var border = active ? '2px solid ' + c.color : '2px solid transparent';
+                var cursor = c.value > 0 ? 'pointer' : 'default';
+                html += '<div class="sa-card" data-type="' + c.type + '" style="flex: 1; min-width: 80px; background: ' + c.bg + '; padding: 10px; border-radius: 8px; text-align: center; cursor: ' + cursor + '; border: ' + border + '; transition: border 0.2s;">' +
                     '<div style="font-size: 22px; font-weight: bold; color: ' + c.color + ';">' + c.value + '</div>' +
                     '<div style="font-size: 11px; color: ' + c.color + ';"><span class="fas ' + c.icon + '"></span> ' + c.label + '</div>' +
                     '</div>';
@@ -45,10 +61,34 @@ define('modules/smart-assistant/views/dashlets/smart-assistant', ['view'], funct
             this.$el.find('.sa-dashlet-cards').html(html);
         },
 
-        renderAlerts: function (alerts) {
-            var $alerts = this.$el.find('.sa-dashlet-alerts');
-            if (alerts.length === 0) {
-                $alerts.html('<div style="text-align: center; color: #4caf50; padding: 12px;">אין התראות</div>');
+        showDetail: function (type) {
+            var $detail = this.$el.find('.sa-dashlet-detail');
+
+            if (!type || type === this._activeType && $detail.html()) {
+                this._activeType = null;
+                $detail.html('');
+                this.renderCards(this._summary);
+                return;
+            }
+
+            this._activeType = type;
+            this.renderCards(this._summary);
+
+            var alerts = this._alerts;
+            var items = [];
+
+            if (type === 'overdue') {
+                items = alerts.filter(function (a) { return a.type === 'overdue_task'; });
+            } else if (type === 'hearings') {
+                items = alerts.filter(function (a) { return a.type === 'hearing_no_prep'; });
+            } else if (type === 'attention') {
+                items = alerts.filter(function (a) { return a.severity === 'critical' || a.severity === 'warning'; });
+            } else if (type === 'open') {
+                items = alerts.filter(function (a) { return a.type === 'inactive_case' || a.type === 'unassigned_case'; });
+            }
+
+            if (items.length === 0) {
+                $detail.html('<div style="text-align: center; color: #999; padding: 12px; font-size: 12px;">אין פריטים להצגה</div>');
                 return;
             }
 
@@ -56,17 +96,19 @@ define('modules/smart-assistant/views/dashlets/smart-assistant', ['view'], funct
             var severityIcons = {critical: 'fa-exclamation-circle', warning: 'fa-exclamation-triangle', info: 'fa-info-circle'};
 
             var html = '';
-            alerts.slice(0, 10).forEach(function (a) {
+            items.forEach(function (a) {
                 var color = severityColors[a.severity] || '#333';
                 var icon = severityIcons[a.severity] || 'fa-circle';
+                var link = a.caseId ? '<a href="#Case/view/' + a.caseId + '" style="color: ' + color + '; text-decoration: none;">' : '<span>';
+                var linkEnd = a.caseId ? '</a>' : '</span>';
 
-                html += '<div style="padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 12px; color: ' + color + ';">' +
+                html += '<div style="padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 12px; color: ' + color + ';">' +
                     '<span class="fas ' + icon + '" style="margin-left: 6px;"></span>' +
-                    '<span>' + Espo.Utils.escapeString(a.message) + '</span>' +
+                    link + Espo.Utils.escapeString(a.message) + linkEnd +
                     '</div>';
             });
 
-            $alerts.html(html);
+            $detail.html(html);
         },
 
         actionRefresh: function () {