KI-AGENT: Anrufbuttons und Telefoniejournal erweitern

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>