From 4c0aced82368ff683b5893bc404523efda9a9b86 Mon Sep 17 00:00:00 2001
From: Thomas Peterson <info@thomas-peterson.de>
Date: Thu, 4 Jun 2026 19:31:38 +0200
Subject: [PATCH] =?UTF-8?q?UI:=20Logo=20=E2=80=9E(=20vcard4=20reseller=20)?=
 =?UTF-8?q?"=20+=20KPI-Kacheln=20mit=20Farb-Icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BrandLogo-Komponente (Klammer-Wortmarke im Markenlook) in Sidebar + Login.
- Dashboard-KPIs im Referenz-Stil: farbiger Kreis-Icon (orange/grün/blau/grau)
  + Zahl + Label.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/BrandLogo.vue    | 21 ++++++++++
 frontend/src/layouts/DashboardLayout.vue |  3 +-
 frontend/src/views/DashboardView.vue     | 49 ++++++++++++++++--------
 frontend/src/views/LoginView.vue         |  3 +-
 4 files changed, 59 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/BrandLogo.vue

diff --git a/frontend/src/components/BrandLogo.vue b/frontend/src/components/BrandLogo.vue
new file mode 100644
index 0000000..3db3d76
--- /dev/null
+++ b/frontend/src/components/BrandLogo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// Produkt-Wortmarke „( vcard4 reseller )" im Markenlook.
+withDefaults(defineProps<{ size?: string }>(), { size: '1.25rem' })
+</script>
+
+<template>
+  <span class="blogo" :style="{ fontSize: size }">
+    <span class="blogo__br">(</span><span class="blogo__a">vcard</span><span class="blogo__hl">4</span><span class="blogo__b">reseller</span><span class="blogo__br">)</span>
+  </span>
+</template>
+
+<style scoped>
+.blogo {
+  display: inline-flex; align-items: baseline; font-weight: 800;
+  letter-spacing: -0.01em; line-height: 1; white-space: nowrap; user-select: none;
+}
+.blogo__br { color: var(--psc-orange); font-weight: 900; margin: 0 .12em; }
+.blogo__a { color: var(--dark); }
+.blogo__hl { color: var(--psc-orange); }
+.blogo__b { color: var(--psc-orange); margin-left: .22em; }
+</style>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index c4addfe..7cc091a 100644
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { RouterLink, RouterView, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import BrandLogo from '@/components/BrandLogo.vue'
 
 const auth = useAuthStore()
 const router = useRouter()
@@ -52,7 +53,7 @@ async function stopImpersonation() {
   <div class="shell">
     <aside class="sidebar">
       <div class="sidebar__brand">
-        <span class="brand-logo">vcard4<span class="tag">reseller</span></span>
+        <BrandLogo size="1.3rem" />
       </div>
       <nav class="sidebar__nav">
         <RouterLink v-for="item in nav" :key="item.to" :to="item.to" class="navlink"
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index db3cb1b..fae13de 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -5,14 +5,21 @@ import { useAuthStore } from '@/stores/auth'
 
 const auth = useAuthStore()
 
-interface Stat { label: string; value: number | string; to: string }
+interface Stat { label: string; value: number | string; to: string; icon: string; tone: string }
 const stats = ref<Stat[]>([])
 const loading = ref(true)
 
+const ICON = {
+  reseller: 'M3 21h18M5 21V7l8-4v18M19 21V11l-6-3',
+  company: 'M3 7h18v13H3zM8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2',
+  people: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+  pin: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+  globe: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z',
+}
+
 async function count(resource: string): Promise<number> {
   try {
-    const c = await list(resource, { itemsPerPage: 1 })
-    return c.totalItems
+    return (await list(resource, { itemsPerPage: 1 })).totalItems
   } catch {
     return 0
   }
@@ -21,15 +28,15 @@ async function count(resource: string): Promise<number> {
 onMounted(async () => {
   const result: Stat[] = []
   if (auth.isPlatformAdmin) {
-    result.push({ label: 'Reseller', value: await count('resellers'), to: '/app/resellers' })
+    result.push({ label: 'Reseller', value: await count('resellers'), to: '/app/resellers', icon: ICON.reseller, tone: 'orange' })
   }
   if (auth.isResellerAdmin || auth.isPlatformAdmin) {
-    result.push({ label: 'Firmen', value: await count('companies'), to: '/app/companies' })
+    result.push({ label: 'Firmen', value: await count('companies'), to: '/app/companies', icon: ICON.company, tone: 'blue' })
   }
-  result.push({ label: 'Mitarbeiter', value: await count('employees'), to: '/app/employees' })
+  result.push({ label: 'Mitarbeiter', value: await count('employees'), to: '/app/employees', icon: ICON.people, tone: 'orange' })
   if (auth.isCompanyAdmin || auth.isResellerAdmin) {
-    result.push({ label: 'Standorte', value: await count('locations'), to: '/app/locations' })
-    result.push({ label: 'Domains', value: await count('domains'), to: '/app/domains' })
+    result.push({ label: 'Standorte', value: await count('locations'), to: '/app/locations', icon: ICON.pin, tone: 'green' })
+    result.push({ label: 'Domains', value: await count('domains'), to: '/app/domains', icon: ICON.globe, tone: 'gray' })
   }
   stats.value = result
   loading.value = false
@@ -39,21 +46,33 @@ onMounted(async () => {
 <template>
   <section>
     <h1 style="margin-bottom:.3rem">Dashboard</h1>
-    <p class="muted" style="margin-top:0">Willkommen zurück, {{ auth.user?.email }}.</p>
+    <p class="muted" style="margin-top:0">Willkommen zurück, {{ auth.user?.name || auth.user?.email }}.</p>
 
     <div class="stats">
       <RouterLink v-for="s in stats" :key="s.label" :to="s.to" class="card stat">
-        <span class="stat__value">{{ loading ? '…' : s.value }}</span>
-        <span class="stat__label">{{ s.label }}</span>
+        <span class="stat__icon" :class="'tone-' + s.tone">
+          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"
+               stroke-linecap="round" stroke-linejoin="round"><path :d="s.icon" /></svg>
+        </span>
+        <span class="stat__body">
+          <span class="stat__value">{{ loading ? '…' : s.value }}</span>
+          <span class="stat__label">{{ s.label }}</span>
+        </span>
       </RouterLink>
     </div>
   </section>
 </template>
 
 <style scoped>
-.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
-.stat { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .25rem; color: var(--text); }
+.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
+.stat { padding: 1.3rem 1.4rem; display: flex; align-items: center; gap: 1rem; color: var(--text); }
 .stat:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); transition: all .15s ease; }
-.stat__value { font-size: 2.2rem; font-weight: 700; color: var(--psc-orange-dark); }
-.stat__label { color: var(--muted); font-weight: 600; }
+.stat__icon { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+.tone-orange { background: var(--psc-orange-soft); color: var(--psc-orange); }
+.tone-green { background: #e7f6ec; color: var(--success); }
+.tone-blue { background: #e8f0fe; color: #2b6cb0; }
+.tone-gray { background: #f0f0f0; color: #7a7a7a; }
+.stat__body { display: flex; flex-direction: column; line-height: 1.1; }
+.stat__value { font-size: 2rem; font-weight: 700; color: var(--dark); }
+.stat__label { color: var(--muted); font-weight: 600; margin-top: .15rem; }
 </style>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 460a59a..9a45ea5 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import BrandLogo from '@/components/BrandLogo.vue'
 
 const email = ref('')
 const password = ref('')
@@ -29,7 +30,7 @@ async function submit() {
   <div class="login-bg">
     <div class="card login">
       <div class="login__brand">
-        <span class="brand-logo">vcard4<span class="tag">reseller</span></span>
+        <BrandLogo size="1.5rem" />
       </div>
       <h2>Anmelden</h2>
       <p class="muted">Zugang zur Verwaltungsoberfläche</p>