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

ts_web/elements/sz-network-domains-view.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 {
@@ -91,19 +90,11 @@ export class SzNetworkDomainsView extends DeesElement {
         border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
       }
 
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
+      dees-statsgrid {
+        display: block;
         margin-bottom: 24px;
       }
 
-      @media (min-width: 768px) {
-        .stats-grid {
-          grid-template-columns: repeat(4, 1fr);
-        }
-      }
-
       .table-container {
         background: ${cssManager.bdTheme('#ffffff', '#09090b')};
         border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
@@ -205,6 +196,42 @@ export class SzNetworkDomainsView extends DeesElement {
     `,
   ];
 
+  private get tiles(): IStatsTile[] {
+    return [
+      {
+        id: 'total',
+        title: 'Total Domains',
+        value: this.stats.total,
+        type: 'number',
+        icon: 'lucide:globe',
+      },
+      {
+        id: 'valid',
+        title: 'Valid Certificates',
+        value: this.stats.valid,
+        type: 'number',
+        icon: 'lucide:shieldCheck',
+        color: '#22c55e',
+      },
+      {
+        id: 'expiring',
+        title: 'Expiring Soon',
+        value: this.stats.expiring,
+        type: 'number',
+        icon: 'lucide:shieldAlert',
+        color: this.stats.expiring > 0 ? '#f59e0b' : undefined,
+      },
+      {
+        id: 'expired',
+        title: 'Expired/Pending',
+        value: this.stats.expired,
+        type: 'number',
+        icon: 'lucide:circleOff',
+        color: this.stats.expired > 0 ? '#ef4444' : undefined,
+      },
+    ];
+  }
+
   public render(): TemplateResult {
     return html`
       <div class="header">
@@ -212,31 +239,10 @@ export class SzNetworkDomainsView extends DeesElement {
         <button class="sync-button" @click=${() => this.handleSync()}>Sync Cloudflare</button>
       </div>
 
-      <div class="stats-grid">
-        <sz-stat-card
-          label="Total Domains"
-          value="${this.stats.total}"
-          icon="server"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Valid Certificates"
-          value="${this.stats.valid}"
-          icon="check"
-          variant="success"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Expiring Soon"
-          value="${this.stats.expiring}"
-          icon="stop"
-          variant="${this.stats.expiring > 0 ? 'warning' : 'default'}"
-        ></sz-stat-card>
-        <sz-stat-card
-          label="Expired/Pending"
-          value="${this.stats.expired}"
-          icon="stop"
-          variant="${this.stats.expired > 0 ? 'error' : 'default'}"
-        ></sz-stat-card>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
 
       <div class="table-container">
         <div class="table-header">