KI-AGENT: Anrufhistorie für Telefonie ergänzen

frontend/pages/communication/phone.vue

@@ -1,7 +1,9 @@
 <script setup>
 const {
   loading,
+  callHistoryLoading,
   config,
+  callHistory,
   selectedExtension,
   dialTarget,
   activeSession,
@@ -16,12 +18,53 @@ const {
   canStartCall,
   canHangup,
   loadTelephony,
+  loadCallHistory,
   registerSip,
   stopSip,
   startCall,
   hangupCall,
 } = useTelephonySoftphone()
 
+const callStatusLabel = (status) => ({
+  ringing: "Klingelt",
+  dialing: "Wählt",
+  active: "Aktiv",
+  completed: "Beendet",
+  missed: "Verpasst",
+  rejected: "Abgelehnt",
+  canceled: "Abgebrochen",
+  failed: "Fehlgeschlagen",
+}[status] || status || "Unbekannt")
+
+const callStatusColor = (status) => ({
+  completed: "success",
+  active: "primary",
+  ringing: "primary",
+  dialing: "primary",
+  missed: "warning",
+  rejected: "neutral",
+  canceled: "neutral",
+  failed: "error",
+}[status] || "neutral")
+
+const formatCallTime = (value) => {
+  if (!value) return "-"
+  return new Date(value).toLocaleString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+const formatDuration = (seconds) => {
+  if (!seconds) return "-"
+
+  const minutes = Math.floor(seconds / 60)
+  const rest = seconds % 60
+  return `${minutes}:${String(rest).padStart(2, "0")} Min.`
+}
+
 onMounted(loadTelephony)
 </script>
 
@@ -178,6 +221,84 @@ onMounted(loadTelephony)
           </div>
         </div>
       </UCard>
+
+      <UCard>
+        <template #header>
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 class="text-base font-semibold text-gray-950">
+                Anrufhistorie
+              </h2>
+              <p class="mt-1 text-sm text-gray-500">
+                Letzte Telefonie-Ereignisse dieses Mandanten.
+              </p>
+            </div>
+            <UButton
+              icon="i-heroicons-arrow-path"
+              variant="ghost"
+              :loading="callHistoryLoading"
+              @click="loadCallHistory"
+            >
+              Aktualisieren
+            </UButton>
+          </div>
+        </template>
+
+        <div v-if="callHistory.length" class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200 text-sm">
+            <thead class="text-left text-xs font-medium uppercase tracking-wide text-gray-500">
+              <tr>
+                <th class="px-3 py-2">Zeit</th>
+                <th class="px-3 py-2">Richtung</th>
+                <th class="px-3 py-2">Teilnehmer</th>
+                <th class="px-3 py-2">Nebenstelle</th>
+                <th class="px-3 py-2">Status</th>
+                <th class="px-3 py-2 text-right">Dauer</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+              <tr
+                v-for="call in callHistory"
+                :key="call.id"
+                class="bg-white"
+              >
+                <td class="whitespace-nowrap px-3 py-3 text-gray-600">
+                  {{ formatCallTime(call.startedAt) }}
+                </td>
+                <td class="whitespace-nowrap px-3 py-3">
+                  <UIcon
+                    :name="call.direction === 'incoming' ? 'i-heroicons-phone-arrow-down-left' : 'i-heroicons-phone-arrow-up-right'"
+                    class="h-5 w-5 text-gray-500"
+                  />
+                </td>
+                <td class="px-3 py-3">
+                  <div class="font-medium text-gray-950">
+                    {{ call.remoteDisplayName || call.remoteNumber || "Unbekannt" }}
+                  </div>
+                  <div v-if="call.remoteDisplayName && call.remoteNumber && call.remoteDisplayName !== call.remoteNumber" class="text-xs text-gray-500">
+                    {{ call.remoteNumber }}
+                  </div>
+                </td>
+                <td class="whitespace-nowrap px-3 py-3 font-mono text-gray-700">
+                  {{ call.localExtension || "-" }}
+                </td>
+                <td class="whitespace-nowrap px-3 py-3">
+                  <UBadge :color="callStatusColor(call.status)" variant="soft">
+                    {{ callStatusLabel(call.status) }}
+                  </UBadge>
+                </td>
+                <td class="whitespace-nowrap px-3 py-3 text-right text-gray-600">
+                  {{ formatDuration(call.durationSeconds) }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-else class="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-6 text-center text-sm text-gray-500">
+          Noch keine Anrufe in der Historie.
+        </div>
+      </UCard>
     </div>
   </div>
 </template>