From 9bd8b45588f695af968ce8699fa0896b02cad967 Mon Sep 17 00:00:00 2001
From: Thomas Peterson <info@thomas-peterson.de>
Date: Sun, 7 Jun 2026 10:45:13 +0200
Subject: [PATCH] UI: Einloggen-als-Mitarbeiterliste im Screenshot-Layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aufgeklappte Firmen-Mitarbeiterliste: Spalten Mitarbeiter · E-Mail · Telefon ·
Position · Aktionen; „Einloggen als" als orange umrandeter Button mit Login-Icon.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/CompaniesView.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/CompaniesView.vue b/frontend/src/views/CompaniesView.vue
index e75c82a..340758d 100644
--- a/frontend/src/views/CompaniesView.vue
+++ b/frontend/src/views/CompaniesView.vue
@@ -141,16 +141,19 @@ onMounted(load)
               <td></td>
               <td colspan="7">
                 <table class="subtbl">
-                  <thead><tr><th>Mitarbeiter</th><th>E-Mail</th><th>Position</th><th></th></tr></thead>
+                  <thead><tr><th>Mitarbeiter</th><th>E-Mail</th><th>Telefon</th><th>Position</th><th class="right">Aktionen</th></tr></thead>
                   <tbody>
-                    <tr v-if="!loginable(c).length"><td colspan="4" class="muted sm">Keine einloggbaren Mitarbeiter.</td></tr>
+                    <tr v-if="!loginable(c).length"><td colspan="5" class="muted sm">Keine einloggbaren Mitarbeiter.</td></tr>
                     <tr v-for="e in loginable(c)" :key="e.id">
                       <td><strong>{{ e.firstName }} {{ e.lastName }}</strong></td>
                       <td class="muted">{{ e.email || '–' }}</td>
+                      <td class="muted">{{ e.phone || '–' }}</td>
                       <td>{{ e.position || '–' }}</td>
                       <td class="right">
-                        <button class="btn btn-ghost btn-sm orange" :disabled="busy !== ''"
-                                @click="loginAs(e.id)">⤷ Einloggen als</button>
+                        <button class="btn-loginas" :disabled="busy !== ''" @click="loginAs(e.id)">
+                          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3" /></svg>
+                          Einloggen als
+                        </button>
                       </td>
                     </tr>
                   </tbody>
@@ -204,5 +207,13 @@ onMounted(load)
 .subrow > td { background: #fbfbfb; padding: 0 1rem 1rem !important; border-bottom: 1px solid #f4f4f4 !important; }
 .subtbl { width: 100%; border-collapse: collapse; }
 .subtbl th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .6rem .7rem; }
-.subtbl td { padding: .55rem .7rem; border-top: 1px solid #f0f0f0; }
+.subtbl th.right { text-align: right; }
+.subtbl td { padding: .6rem .7rem; border-top: 1px solid #f0f0f0; vertical-align: middle; }
+.btn-loginas {
+  display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem;
+  border: 1px solid var(--psc-orange); background: #fff; color: var(--psc-orange-dark);
+  border-radius: 8px; font-weight: 600; font-size: .82rem; cursor: pointer; font-family: var(--font);
+}
+.btn-loginas:hover { background: var(--psc-orange-soft); }
+.btn-loginas:disabled { opacity: .55; cursor: default; }
 </style>