feat(elements): standardize dashboard and detail views on dees tile and stats grid components

ts_web/elements/sz-status-grid-cluster.ts

@@ -7,8 +7,7 @@ import {
   property,
   type TemplateResult,
 } from '@design.estate/dees-element';
-
-import './sz-stat-card.js';
+import type { IStatsTile } from '@design.estate/dees-catalog';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -54,54 +53,51 @@ export class SzStatusGridCluster extends DeesElement {
       :host {
         display: block;
       }
-
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-        align-items: stretch;
-      }
-
-      .grid > * {
-        height: 100%;
-      }
-
-      @media (min-width: 768px) {
-        .grid {
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'total',
+        title: 'Total Services',
+        value: this.stats.totalServices,
+        type: 'number',
+        icon: 'lucide:server',
+      },
+      {
+        id: 'running',
+        title: 'Running',
+        value: this.stats.running,
+        type: 'number',
+        icon: 'lucide:check',
+        color: '#22c55e',
+      },
+      {
+        id: 'stopped',
+        title: 'Stopped',
+        value: this.stats.stopped,
+        type: 'number',
+        icon: 'lucide:circleStop',
+        color: this.stats.stopped > 0 ? '#f59e0b' : undefined,
+      },
+      {
+        id: 'docker',
+        title: 'Docker',
+        value: this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:container',
+        color: this.stats.dockerStatus === 'running' ? '#22c55e' : '#ef4444',
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
-      <div class="grid">
-        <sz-stat-card
-          label="Total Services"
-          value="${this.stats.totalServices}"
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Running"
-          value="${this.stats.running}"
-          icon="check"
-          variant="success"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Stopped"
-          value="${this.stats.stopped}"
-          icon="stop"
-          variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Docker"
-          value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
-          icon="container"
-          variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
-          valueBadge
-        ></sz-stat-card>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
     `;
   }
 }