ui: the generated dashboard takes the shape of what each tile holds (#7412)

components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/bg-BG/shell.json

@@ -46,7 +46,9 @@
     "dashboard": {
       "title": "Табло",
       "overview": "Преглед на публикуваните приложения.",
-      "kpis": "Ключови показатели"
+      "kpis": "Ключови показатели",
+      "viewAll": "Виж всички",
+      "viewAllOf": "Отваряне на справка {{name}}"
     },
     "inbox": {
       "refresh": "Обнови",

components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/i18n/en-US/shell.json

@@ -46,7 +46,9 @@
     "dashboard": {
       "title": "Dashboard",
       "overview": "Overview of your published applications.",
-      "kpis": "Key Indicators"
+      "kpis": "Key Indicators",
+      "viewAll": "View all",
+      "viewAllOf": "Open the {{name}} report"
     },
     "inbox": {
       "refresh": "Refresh",

components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/layout/appShell.js

@@ -94,7 +94,11 @@ document.addEventListener('alpine:init', () => {
     // a built-in shell section, or an entity route /<Entity>[/create | /:id/edit]. The last crumb
     // is the current page (no route); earlier crumbs link back.
     get breadcrumbTrail() {
-      if (this.isDashboard) return [];
+      // The dashboard names itself like every other page: the home icon ahead of it is the route,
+      // this crumb is the label - the page itself carries no heading of its own.
+      if (this.isDashboard) {
+        return [{ label: window.T ? T('application-core:shell.nav.dashboard', 'Dashboard') : 'Dashboard', route: null }];
+      }
       const segments = this.currentPath.split('/').filter(Boolean);
       const top = segments[0];
       const crumbs = [];

components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/stores/reports.js

@@ -98,6 +98,10 @@ document.addEventListener('alpine:init', () => {
           if (def.description) it.description = def.description;
           if (def.dashboard === false) it.dashboard = false;
           if (def.tId) it.tId = def.tId;
+          // The report's chart type (line / pie / bar / ...), when it declares one. The dashboard
+          // reads it to pick the tile shape: a chart preview is a padded, borderless card like the
+          // reference's chart cards, a row preview the bordered full-bleed table card.
+          if (def.chart) it.chart = def.chart;
           if (def.descriptionTId) it.descriptionTId = def.descriptionTId;
           // A report-attached KPI widget: the dashboard shows a compact KPI tile (count / single
           // aggregate value / top-N list) instead of the report's iframe preview tile.

components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/report-file/index.html.template

@@ -136,7 +136,14 @@
         </div>
       </div>
 
-      <div x-show="state === 'default'" class="vbox gap-2 p-4 flex-1 overflow-auto">
+      <!-- The dashboard embeds this page in a tile (?preview=1) whose card already frames the rows,
+           so preview drops this page's own gutter and the table's box and grid lines - the reference's
+           dashboard table card is flush and borderless, while the report page itself keeps all three.
+           The container's data-border is read ONCE when the directive initializes (it just adds
+           `border rounded-md`), so the preview branch sets those classes directly rather than binding
+           the attribute and racing Alpine's directive order; data-borders is a pure CSS hook and does
+           bind. -->
+      <div x-show="state === 'default'" class="vbox gap-2 flex-1 overflow-auto" :class="preview ? '' : 'p-4'">
 #if($chart)
 ## Native Harmonia chart directive for this report's chart type (a generation-time constant).
 #if($chart == "line")#set($chartDirective = "x-h-chart-line")#elseif($chart == "pie")#set($chartDirective = "x-h-chart-pie")#elseif($chart == "doughnut")#set($chartDirective = "x-h-chart-doughnut")#elseif($chart == "polarArea")#set($chartDirective = "x-h-chart-polar-area")#elseif($chart == "radar")#set($chartDirective = "x-h-chart-radar")#else#set($chartDirective = "x-h-chart-bar")#end
@@ -146,8 +153,8 @@
         </div>
         <div x-show="view === 'table'" class="vbox gap-2">
 #end
-        <div x-h-table-container.scroll data-border="true">
-          <table x-h-table data-borders="both">
+        <div x-h-table-container.scroll :class="preview ? '' : 'border rounded-md'">
+          <table x-h-table :data-borders="preview ? null : 'both'">
             <thead x-h-table-header>
               <tr x-h-table-row>
                 <template x-for="(col, i) in columns" :key="i"><th x-h-table-head scope="col" :class="alignClass(col)" x-text="col"></th></template>