@serve.zone/catalog 1.0.1

package/ts_web/elements/sz-network-domains-view.ts

@@ -0,0 +1,273 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-stat-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-network-domains-view': SzNetworkDomainsView;
+  }
+}
+
+export interface IDomainRecord {
+  domain: string;
+  provider: string;
+  serviceCount: number;
+  certificateStatus: 'valid' | 'expiring' | 'expired' | 'pending';
+  expiresIn?: string;
+}
+
+@customElement('sz-network-domains-view')
+export class SzNetworkDomainsView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-network-domains-view
+        .domains=${[
+          { domain: 'bleu.de', provider: 'cloudflare', serviceCount: 2, certificateStatus: 'valid', expiresIn: '52 days' },
+          { domain: 'task.vc', provider: 'cloudflare', serviceCount: 1, certificateStatus: 'valid', expiresIn: '52 days' },
+          { domain: 'example.com', provider: 'cloudflare', serviceCount: 0, certificateStatus: 'expiring', expiresIn: '7 days' },
+        ]}
+        .stats=${{ total: 3, valid: 2, expiring: 1, expired: 0 }}
+      ></sz-network-domains-view>
+    </div>
+  `;
+
+  @property({ type: Array })
+  public accessor domains: IDomainRecord[] = [];
+
+  @property({ type: Object })
+  public accessor stats: { total: number; valid: number; expiring: number; expired: number } = {
+    total: 0,
+    valid: 0,
+    expiring: 0,
+    expired: 0,
+  };
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+
+      .description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .sync-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        cursor: pointer;
+        transition: all 200ms ease;
+      }
+
+      .sync-button:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+        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')};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .table-header {
+        display: grid;
+        grid-template-columns: 2fr 1fr 80px 100px 100px 80px;
+        gap: 16px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .table-row {
+        display: grid;
+        grid-template-columns: 2fr 1fr 80px 100px 100px 80px;
+        gap: 16px;
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        align-items: center;
+        transition: background 200ms ease;
+      }
+
+      .table-row:last-child {
+        border-bottom: none;
+      }
+
+      .table-row:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+      }
+
+      .domain-name {
+        font-weight: 500;
+      }
+
+      .provider {
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .status-badge.valid {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .status-badge.expiring {
+        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
+        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
+      }
+
+      .status-badge.expired,
+      .status-badge.pending {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .expires {
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .view-button {
+        padding: 6px 12px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 4px;
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        cursor: pointer;
+        transition: all 200ms ease;
+      }
+
+      .view-button:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+      }
+
+      .empty-state {
+        padding: 48px 24px;
+        text-align: center;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="header">
+        <span class="description">Manage domains and SSL certificates</span>
+        <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>
+
+      <div class="table-container">
+        <div class="table-header">
+          <span>Domain</span>
+          <span>Provider</span>
+          <span>Services</span>
+          <span>Certificate</span>
+          <span>Expires</span>
+          <span>Actions</span>
+        </div>
+        ${this.domains.length > 0 ? this.domains.map(domain => html`
+          <div class="table-row">
+            <span class="domain-name">${domain.domain}</span>
+            <span class="provider">${domain.provider}</span>
+            <span>${domain.serviceCount}</span>
+            <span><span class="status-badge ${domain.certificateStatus}">${domain.certificateStatus}</span></span>
+            <span class="expires">${domain.expiresIn || '-'}</span>
+            <span>
+              <button class="view-button" @click=${() => this.handleView(domain)}>View</button>
+            </span>
+          </div>
+        `) : html`
+          <div class="empty-state">No domains configured</div>
+        `}
+      </div>
+    `;
+  }
+
+  private handleSync() {
+    this.dispatchEvent(new CustomEvent('sync', { bubbles: true, composed: true }));
+  }
+
+  private handleView(domain: IDomainRecord) {
+    this.dispatchEvent(new CustomEvent('view', { detail: domain, bubbles: true, composed: true }));
+  }
+}