UI-Komponenten & Block-Templates

Standardisierte Bausteine auf Basis von Nuxt UI und Tailwind CSS v4. Verwende diese Komponenten für alle neuen Views und Dashboards.

Zum Dashboard

1. Seitenkopf (<AppPageHeader>)

Block-Template

Rendert Breadcrumbs, Titel, Beschreibung und Aktionsknöpfe (z. B. Vendor-Links und Sync-Buttons).

<AppPageHeader
  title="Managed Firewall"
  description="Status aller UTM-Systeme und Firmware-Updates."
  :breadcrumbs="[{ label: 'Firewall' }]"
  vendor-url="https://portal.securepoint.cloud/"
  vendor-label="Securepoint Portal"
  :sync-loading="syncing"
  @sync="syncData"
/>

Direkte Verwendung von <UBreadcrumb> (Nuxt UI):

<UBreadcrumb :items="[
  { label: 'Portal', to: '/', icon: 'i-heroicons-home' },
  { label: 'Kunden', to: '/clients' },
  { label: 'Musterfirma GmbH' }
]" />

2. KPI Kacheln (<AppKpiCard>)

Metrik-Karten

ESET Lizenzen

142Aktiv zugewiesen

Offene Warnungen

4Reboot erforderlich

Kritische Angriffe

1Sofort handeln

Zusatzmodul

Todo

0Nicht gebucht

<AppKpiCard title="ESET Lizenzen" :value="142" subtitle="Aktiv" status="normal" :loading="loading" />
<AppKpiCard title="Offene Warnungen" :value="4" subtitle="Reboot" status="warning" />
<AppKpiCard title="Kritische Angriffe" :value="1" subtitle="Handeln" status="critical" />
<AppKpiCard title="Feature" :value="0" status="disabled" />

3. Status-Badges (<AppStatusBadge>)

Pills mit Ping

Aktiv / OKWarnungKritischer FehlerUnbekannt

<AppStatusBadge status="ok" label="Aktiv" />
<AppStatusBadge status="warning" label="Warnung" />
<AppStatusBadge status="critical" label="Störung" />

4. Tabellen-Karten (<AppTableCard>)

Container

Aktuelle Systemprobleme (Demo)

Kunde	Gerät	Problem	Status
Musterkunde GmbH	srv-dc-01	Reboot ausstehend (> 30 Tage)	Warnung
Beispiel AG	workstation-04	Trojaner blockiert	Kritisch

5. Standard Nuxt UI Buttons (<UButton>)

Nuxt UI