KI-AGENT: Anrufbuttons und Telefoniejournal erweitern

frontend/components/EntityShowSubInformation.vue

@@ -60,6 +60,22 @@ const renderDatapointValue = (datapoint) => {
   return `${value}${datapoint.unit ? datapoint.unit : ""}`
 }
 
+const isTelephonyDatapoint = (datapoint) => {
+  if (datapoint.telephonyCall) return true
+
+  const key = String(datapoint.key || "").toLowerCase()
+  return [
+    "phone",
+    "tel",
+    "mobile",
+    "mobiletel",
+    "phonemobile",
+    "phonehome",
+    "fixed_tel",
+    "mobile_tel",
+  ].some((part) => key.includes(part))
+}
+
 </script>
 
 <template>
@@ -84,6 +100,12 @@ const renderDatapointValue = (datapoint) => {
           <td>{{datapoint.label}}:</td>
           <td>
             <component v-if="datapoint.component" :is="datapoint.component" :row="props.item" :in-show="true"></component>
+            <div v-else-if="isTelephonyDatapoint(datapoint) && getDatapointValue(datapoint)" class="flex flex-wrap items-center gap-2">
+              <TelephonyCallButton
+                  :number="getDatapointValue(datapoint)"
+                  :label="renderDatapointValue(datapoint)"
+              />
+            </div>
             <div v-else>
               <span>{{ renderDatapointValue(datapoint) }}</span>
             </div>

frontend/components/TelephonyCallButton.vue

@@ -0,0 +1,51 @@
+<script setup>
+const props = defineProps({
+  number: {
+    type: [String, Number],
+    default: ""
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: String,
+    default: "xs"
+  },
+  variant: {
+    type: String,
+    default: "soft"
+  }
+})
+
+const router = useRouter()
+
+const normalizedNumber = computed(() => String(props.number || "").trim())
+const displayLabel = computed(() => props.label || normalizedNumber.value)
+const canCall = computed(() => normalizedNumber.value.length > 0)
+
+const openSoftphone = async () => {
+  if (!canCall.value) return
+
+  await router.push({
+    path: "/communication/phone",
+    query: {
+      call: normalizedNumber.value,
+      name: props.label || undefined
+    }
+  })
+}
+</script>
+
+<template>
+  <UButton
+    icon="i-heroicons-phone"
+    color="primary"
+    :size="size"
+    :variant="variant"
+    :disabled="!canCall"
+    @click="openSoftphone"
+  >
+    {{ displayLabel }}
+  </UButton>
+</template>

frontend/composables/useTelephonySoftphone.js

@@ -90,11 +90,16 @@ export const useTelephonySoftphone = () => {
     || session?.outgoingInviteRequest?.message?.callId
     || null
 
-  const loadCallHistory = async () => {
+  const loadCallHistory = async (filters = {}) => {
     callHistoryLoading.value = true
 
     try {
-      callHistory.value = await $api("/api/telephony/calls?limit=20")
+      callHistory.value = await $api("/api/telephony/calls", {
+        params: {
+          limit: 50,
+          ...filters,
+        }
+      })
     } catch (error) {
       addSipEvent(`Anrufhistorie konnte nicht geladen werden: ${error?.message || "Unbekannter Fehler"}`)
     } finally {

frontend/pages/communication/phone.vue

@@ -25,6 +25,29 @@ const {
   hangupCall,
 } = useTelephonySoftphone()
 
+const route = useRoute()
+
+const historyFilters = reactive({
+  direction: "all",
+  status: "all",
+  search: ""
+})
+
+const directionOptions = [
+  { label: "Alle Richtungen", value: "all" },
+  { label: "Eingehend", value: "incoming" },
+  { label: "Ausgehend", value: "outgoing" }
+]
+
+const statusOptions = [
+  { label: "Alle Status", value: "all" },
+  { label: "Aktiv", value: "active" },
+  { label: "Beendet", value: "completed" },
+  { label: "Verpasst", value: "missed" },
+  { label: "Fehlgeschlagen", value: "failed" },
+  { label: "Abgebrochen", value: "canceled" }
+]
+
 const callStatusLabel = (status) => ({
   ringing: "Klingelt",
   dialing: "Wählt",
@@ -65,7 +88,31 @@ const formatDuration = (seconds) => {
   return `${minutes}:${String(rest).padStart(2, "0")} Min.`
 }
 
-onMounted(loadTelephony)
+const historyFilterParams = () => ({
+  direction: historyFilters.direction !== "all" ? historyFilters.direction : undefined,
+  status: historyFilters.status !== "all" ? historyFilters.status : undefined,
+  search: historyFilters.search?.trim() || undefined
+})
+
+const loadFilteredCallHistory = () => loadCallHistory(historyFilterParams())
+
+const setDialTargetFromQuery = () => {
+  if (route.query.call) {
+    dialTarget.value = String(route.query.call)
+  }
+}
+
+const callFromHistory = (call) => {
+  if (!call?.remoteNumber) return
+  dialTarget.value = call.remoteNumber
+}
+
+onMounted(async () => {
+  setDialTargetFromQuery()
+  await loadTelephony()
+})
+
+watch(() => route.query.call, setDialTargetFromQuery)
 </script>
 
 <template>
@@ -94,11 +141,11 @@ onMounted(loadTelephony)
             Aktualisieren
           </UButton>
           <UButton
-            to="/communication/phone-setup"
+            to="/settings/telephony"
             icon="i-heroicons-cog-6-tooth"
             variant="outline"
           >
-            Telefonie-Setup
+            Einstellungen
           </UButton>
           <UButton
             to="/communication/chat"
@@ -118,7 +165,7 @@ onMounted(loadTelephony)
                 FEDEO Softphone
               </h2>
               <p class="mt-1 text-sm text-gray-500">
-                Registrierung und Anrufe über den lokalen Asterisk.
+                Registrierung und Anrufe über den angebundenen Asterisk.
               </p>
             </div>
             <UBadge
@@ -180,7 +227,7 @@ onMounted(loadTelephony)
               <UInput
                 v-model="dialTarget"
                 icon="i-heroicons-hashtag"
-                placeholder="Ziel, z. B. 600 oder 1002"
+                placeholder="Zielnummer oder Nebenstelle"
                 :disabled="!sipRegistered || Boolean(activeSession)"
               />
               <UButton
@@ -233,17 +280,42 @@ onMounted(loadTelephony)
                 Anrufhistorie
               </h2>
               <p class="mt-1 text-sm text-gray-500">
-                Letzte Telefonie-Ereignisse dieses Mandanten.
+                Anrufe dieses Mandanten mit Rückruf und Filter.
               </p>
             </div>
-            <UButton
-              icon="i-heroicons-arrow-path"
-              variant="ghost"
-              :loading="callHistoryLoading"
-              @click="loadCallHistory"
-            >
-              Aktualisieren
-            </UButton>
+            <div class="flex flex-wrap gap-2">
+              <UInput
+                v-model="historyFilters.search"
+                icon="i-heroicons-magnifying-glass"
+                placeholder="Suchen"
+                class="w-44"
+                @keyup.enter="loadFilteredCallHistory"
+              />
+              <USelectMenu
+                v-model="historyFilters.direction"
+                :items="directionOptions"
+                label-key="label"
+                value-key="value"
+                class="w-40"
+                @update:model-value="loadFilteredCallHistory"
+              />
+              <USelectMenu
+                v-model="historyFilters.status"
+                :items="statusOptions"
+                label-key="label"
+                value-key="value"
+                class="w-40"
+                @update:model-value="loadFilteredCallHistory"
+              />
+              <UButton
+                icon="i-heroicons-arrow-path"
+                variant="ghost"
+                :loading="callHistoryLoading"
+                @click="loadFilteredCallHistory"
+              >
+                Aktualisieren
+              </UButton>
+            </div>
           </div>
         </template>
 
@@ -257,6 +329,7 @@ onMounted(loadTelephony)
                 <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>
+                <th class="px-3 py-2 text-right">Aktion</th>
               </tr>
             </thead>
             <tbody class="divide-y divide-gray-100">
@@ -293,6 +366,17 @@ onMounted(loadTelephony)
                 <td class="whitespace-nowrap px-3 py-3 text-right text-gray-600">
                   {{ formatDuration(call.durationSeconds) }}
                 </td>
+                <td class="whitespace-nowrap px-3 py-3 text-right">
+                  <UButton
+                    v-if="call.remoteNumber"
+                    icon="i-heroicons-phone"
+                    size="xs"
+                    variant="soft"
+                    @click="callFromHistory(call)"
+                  >
+                    Rückruf
+                  </UButton>
+                </td>
               </tr>
             </tbody>
           </table>