feat(ivr): dropdown de destino (fila/outro IVR) numa opção de menu, com bloqueio de ciclo (PHASE 67)

Mesmo gap que Rotas de Entrada já tinha resolvido na PHASE 62: uma opção dentro de um menu de IVR só sabia apontar pra ramal (bridge fixo). Novo IvrMenuOption.destinationType (EXTENSION/QUEUE/IVR) decide a action de cada branch em buildIvrDialplanExtensions, mesmo padrão de buildInboundRouteXml — QUEUE vira answer+callcenter, IVR vira transfer pro IVR_ENTRY_DESTINATION do menu alvo (efetivamente um sub-menu). Sem CALL_GROUP aqui de propósito: diferente de InboundRoute (resolvido a cada chamada), o dialplan de um IVR é compilado uma vez ao salvar — "quem está no grupo agora" ficaria desatualizado até a próxima edição. "Outro IVR" cria a primeira forma de um menu apontar pra outro (uma InboundRoute nunca é ela mesma um menu, nunca formava ciclo antes). assertNoIvrCycle monta o grafo com todos os menus do tenant antes de compilar e rejeita qualquer save que criaria um ciclo, em create e update. Os dois editores de IVR (form clássico e o editor visual de nós) ganharam o mesmo par de dropdowns "Tipo"/"Destino" já usado em Rotas de Entrada. Testado ponta a ponta com Playwright, tenant/fila/2 menus de IVR reais criados na hora: menu com opção Fila e menu com opção Outro IVR apontando pro primeiro, os dois persistindo certo depois de reload completo. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BFaBaBSQGhyXGEgtTYZGV8
2026-08-31 09:41:22 -03:00
parent 97ef8a6ba8
commit 432cd55adb
12 changed files with 427 additions and 78 deletions
--- a/apps/frontend/src/app/app/telefonia/ivr/actions.ts
+++ b/apps/frontend/src/app/app/telefonia/ivr/actions.ts
@@ -3,7 +3,7 @@
 import { revalidatePath } from "next/cache";
 import { requireSession } from "@/lib/session";
 import { apiFetch, ApiError, API_BASE_URL } from "@/lib/api";
-import type { IvrMenu } from "@/lib/callcenter-types";
+import type { IvrMenu, IvrOptionDestinationType } from "@/lib/callcenter-types";

 function extractErrorMessage(err: unknown): string {
  if (err instanceof ApiError) {
@@ -21,7 +21,9 @@ function extractErrorMessage(err: unknown): string {

 export interface IvrMenuOptionInput {
  digit: string;
+  destinationType?: IvrOptionDestinationType;
  destinationNumber: string;
+  destinationContext?: string;
  label?: string;
  positionX?: number;
  positionY?: number;
--- a/apps/frontend/src/app/app/telefonia/ivr/ivr-flow-editor.tsx
+++ b/apps/frontend/src/app/app/telefonia/ivr/ivr-flow-editor.tsx
@@ -19,14 +19,23 @@ import "@xyflow/react/dist/style.css";
 import { PhoneIncoming, Plus, Save, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input, Select } from "@/components/ui/input";
-import { ALLOWED_IVR_DIGITS, type IvrMenu } from "@/lib/callcenter-types";
+import {
+  ALLOWED_IVR_DIGITS,
+  IVR_ENTRY_DESTINATION,
+  IVR_OPTION_DESTINATION_TYPES,
+  IVR_OPTION_DESTINATION_TYPE_LABELS,
+  type IvrMenu,
+  type IvrOptionDestinationType,
+  type Queue,
+} from "@/lib/callcenter-types";
 import type { Extension } from "@/lib/extension-types";
 import { updateIvrMenuOptions, type IvrMenuOptionInput } from "./actions";

 interface OptionState {
  key: string;
  digit: string;
-  destinationNumber: string;
+  destinationType: IvrOptionDestinationType;
+  destinationValue: string;
  label: string;
  positionX: number | null;
  positionY: number | null;
@@ -37,6 +46,8 @@ interface EntryNodeData extends Record<string, unknown> {}
 interface OptionNodeData extends Record<string, unknown> {
  option: OptionState;
  extensions: Extension[];
+  queues: Queue[];
+  menus: IvrMenu[];
  usedDigits: string[];
  onChange: (key: string, patch: Partial<OptionState>) => void;
  onRemove: (key: string) => void;
@@ -56,7 +67,7 @@ function EntryNode(_props: NodeProps<Node<EntryNodeData, "entry">>) {
 }

 function OptionNode({ data }: NodeProps<Node<OptionNodeData, "option">>) {
-  const { option, extensions, usedDigits, onChange, onRemove } = data;
+  const { option, extensions, queues, menus, usedDigits, onChange, onRemove } = data;
  return (
    <div className="w-[230px] space-y-2 rounded-lg border border-border bg-surface px-3 py-3 shadow-panel">
      <Handle type="target" position={Position.Top} />
@@ -85,16 +96,40 @@ function OptionNode({ data }: NodeProps<Node<OptionNodeData, "option">>) {
      </div>
      <Select
        className="nodrag"
-        value={option.destinationNumber}
-        onChange={(e) => onChange(option.key, { destinationNumber: e.target.value })}
+        value={option.destinationType}
+        onChange={(e) => onChange(option.key, { destinationType: e.target.value as IvrOptionDestinationType, destinationValue: "" })}
      >
-        <option value="">Selecione um ramal…</option>
-        {extensions.map((ext) => (
-          <option key={ext.id} value={ext.number}>
-            {ext.number} — {ext.name}
+        {IVR_OPTION_DESTINATION_TYPES.map((t) => (
+          <option key={t} value={t}>
+            {IVR_OPTION_DESTINATION_TYPE_LABELS[t]}
          </option>
        ))}
      </Select>
+      <Select
+        className="nodrag"
+        value={option.destinationValue}
+        onChange={(e) => onChange(option.key, { destinationValue: e.target.value })}
+      >
+        <option value="">Selecione…</option>
+        {option.destinationType === "EXTENSION" &&
+          extensions.map((ext) => (
+            <option key={ext.id} value={ext.number}>
+              {ext.number} — {ext.name}
+            </option>
+          ))}
+        {option.destinationType === "QUEUE" &&
+          queues.map((q) => (
+            <option key={q.id} value={q.id}>
+              {q.name}
+            </option>
+          ))}
+        {option.destinationType === "IVR" &&
+          menus.map((m) => (
+            <option key={m.id} value={m.id}>
+              {m.name}
+            </option>
+          ))}
+      </Select>
      <Input
        className="nodrag"
        value={option.label}
@@ -114,6 +149,8 @@ function layoutNodes(
  options: OptionState[],
  entryPosition: { x: number; y: number } | null,
  extensions: Extension[],
+  queues: Queue[],
+  menus: IvrMenu[],
  onChange: OptionNodeData["onChange"],
  onRemove: OptionNodeData["onRemove"],
 ) {
@@ -129,7 +166,7 @@ function layoutNodes(
    id: option.key,
    type: "option",
    position: option.positionX != null && option.positionY != null ? { x: option.positionX, y: option.positionY } : { x: i * COLUMN_WIDTH, y: 160 },
-    data: { option, extensions, usedDigits, onChange, onRemove },
+    data: { option, extensions, queues, menus, usedDigits, onChange, onRemove },
    draggable: true,
  }));
  const edges: Edge[] = options.map((option) => ({
@@ -155,18 +192,29 @@ function nextKey(): string {
 * direto os campos (dígito/ramal/descrição); salvar recompila o
 * dialplan no backend exatamente como o formulário antigo fazia.
 */
-export function IvrFlowEditor({ menu, extensions }: { menu: IvrMenu; extensions: Extension[] }) {
+export function IvrFlowEditor({
+  menu,
+  extensions,
+  queues,
+  menus,
+}: {
+  menu: IvrMenu;
+  extensions: Extension[];
+  queues: Queue[];
+  menus: IvrMenu[];
+}) {
  const initialOptions = useMemo<OptionState[]>(
    () =>
      menu.options.map((o) => ({
        key: o.id,
        digit: o.digit,
-        destinationNumber: o.destinationNumber,
+        destinationType: o.destinationType,
+        destinationValue: o.destinationType === "IVR" ? (menus.find((m) => m.context === o.destinationContext)?.id ?? "") : o.destinationNumber,
        label: o.label ?? "",
        positionX: o.positionX,
        positionY: o.positionY,
      })),
-    [menu.options],
+    [menu.options, menus],
  );
  const initialEntryPosition = useMemo(
    () => (menu.entryPositionX != null && menu.entryPositionY != null ? { x: menu.entryPositionX, y: menu.entryPositionY } : null),
@@ -188,9 +236,9 @@ export function IvrFlowEditor({ menu, extensions }: { menu: IvrMenu; extensions:
  }, []);

  const { nodes: initialNodes, edges: initialEdges } = useMemo(
-    () => layoutNodes(options, initialEntryPosition, extensions, onChange, onRemove),
+    () => layoutNodes(options, initialEntryPosition, extensions, queues, menus, onChange, onRemove),
    // eslint-disable-next-line react-hooks/exhaustive-deps -- initialEntryPosition só serve pro layout inicial (posição arrastada depois vive em `nodes`, nunca recomputada daqui)
-    [options, extensions, onChange, onRemove],
+    [options, extensions, queues, menus, onChange, onRemove],
  );
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -212,7 +260,10 @@ export function IvrFlowEditor({ menu, extensions }: { menu: IvrMenu; extensions:
    setSaved(false);
    const usedDigits = new Set(options.map((o) => o.digit));
    const nextDigit = ALLOWED_IVR_DIGITS.find((d) => !usedDigits.has(d)) ?? "1";
-    setOptions((prev) => [...prev, { key: nextKey(), digit: nextDigit, destinationNumber: "", label: "", positionX: null, positionY: null }]);
+    setOptions((prev) => [
+      ...prev,
+      { key: nextKey(), digit: nextDigit, destinationType: "EXTENSION", destinationValue: "", label: "", positionX: null, positionY: null },
+    ]);
  }

  function onSave() {
@@ -221,8 +272,8 @@ export function IvrFlowEditor({ menu, extensions }: { menu: IvrMenu; extensions:
      setError("O menu precisa de pelo menos uma opção.");
      return;
    }
-    if (options.some((o) => !o.destinationNumber.trim())) {
-      setError("Toda opção precisa de um ramal de destino selecionado.");
+    if (options.some((o) => !o.destinationValue.trim())) {
+      setError("Toda opção precisa de um destino selecionado.");
      return;
    }
    const digits = options.map((o) => o.digit);
@@ -236,12 +287,24 @@ export function IvrFlowEditor({ menu, extensions }: { menu: IvrMenu; extensions:
    // pelo react-flow é o estado de nós, nunca `data.option` de volta.
    const payload: IvrMenuOptionInput[] = options.map((o) => {
      const node = nodes.find((n) => n.id === o.key);
+      const position = { positionX: node?.position.x, positionY: node?.position.y };
+      if (o.destinationType === "IVR") {
+        const target = menus.find((m) => m.id === o.destinationValue);
+        return {
+          digit: o.digit,
+          destinationType: "IVR",
+          destinationNumber: IVR_ENTRY_DESTINATION,
+          destinationContext: target?.context ?? "default",
+          label: o.label.trim() || undefined,
+          ...position,
+        };
+      }
      return {
        digit: o.digit,
-        destinationNumber: o.destinationNumber.trim(),
+        destinationType: o.destinationType,
+        destinationNumber: o.destinationValue.trim(),
        label: o.label.trim() || undefined,
-        positionX: node?.position.x,
-        positionY: node?.position.y,
+        ...position,
      };
    });
    const entryNode = nodes.find((n) => n.id === ENTRY_NODE_ID);
--- a/apps/frontend/src/app/app/telefonia/ivr/ivr-view.tsx
+++ b/apps/frontend/src/app/app/telefonia/ivr/ivr-view.tsx
@@ -8,7 +8,15 @@ import { Button } from "@/components/ui/button";
 import { Input, Select, FieldLabel } from "@/components/ui/input";
 import { Pill } from "@/components/ui/pill";
 import { EmptyState } from "@/components/ui/table";
-import { ALLOWED_IVR_DIGITS, IVR_ENTRY_DESTINATION, type IvrMenu } from "@/lib/callcenter-types";
+import {
+  ALLOWED_IVR_DIGITS,
+  IVR_ENTRY_DESTINATION,
+  IVR_OPTION_DESTINATION_TYPES,
+  IVR_OPTION_DESTINATION_TYPE_LABELS,
+  type IvrMenu,
+  type IvrOptionDestinationType,
+  type Queue,
+} from "@/lib/callcenter-types";
 import type { Extension } from "@/lib/extension-types";
 import { createIvrMenu, deleteIvrMenu, deleteIvrMenuPrompt, uploadIvrMenuPrompt, type IvrMenuOptionInput } from "./actions";
 import { IvrFlowEditor } from "./ivr-flow-editor";
@@ -27,7 +35,7 @@ function slugifyContext(name: string): string {
  );
 }

-export function IvrView({ menus, extensions }: { menus: IvrMenu[]; extensions: Extension[] }) {
+export function IvrView({ menus, extensions, queues }: { menus: IvrMenu[]; extensions: Extension[]; queues: Queue[] }) {
  const [showForm, setShowForm] = useState(false);

  return (
@@ -47,7 +55,15 @@ export function IvrView({ menus, extensions }: { menus: IvrMenu[]; extensions: E
        </Button>
      </div>

-      {showForm && <NewIvrMenuForm extensions={extensions} existingContexts={menus.map((m) => m.context)} onDone={() => setShowForm(false)} />}
+      {showForm && (
+        <NewIvrMenuForm
+          extensions={extensions}
+          queues={queues}
+          menus={menus}
+          existingContexts={menus.map((m) => m.context)}
+          onDone={() => setShowForm(false)}
+        />
+      )}

      <Panel>
        <PanelHeader title="Menus cadastrados" description={`${menus.length} menu(s) neste tenant`} />
@@ -70,7 +86,12 @@ export function IvrView({ menus, extensions }: { menus: IvrMenu[]; extensions: E
                  <span className="text-foreground">{IVR_ENTRY_DESTINATION}</span>
                </p>
                <PromptControl menu={menu} />
-                <IvrFlowEditor menu={menu} extensions={extensions} />
+                <IvrFlowEditor
+                  menu={menu}
+                  extensions={extensions}
+                  queues={queues}
+                  menus={menus.filter((m) => m.id !== menu.id)}
+                />
              </li>
            ))}
          </ul>
@@ -143,23 +164,28 @@ function PromptControl({ menu }: { menu: IvrMenu }) {

 interface OptionRow {
  digit: string;
-  destinationNumber: string;
+  destinationType: IvrOptionDestinationType;
+  destinationValue: string;
  label: string;
 }

 function NewIvrMenuForm({
  extensions,
+  queues,
+  menus,
  existingContexts,
  onDone,
 }: {
  extensions: Extension[];
+  queues: Queue[];
+  menus: IvrMenu[];
  existingContexts: string[];
  onDone: () => void;
 }) {
  const [name, setName] = useState("");
  const [context, setContext] = useState("");
  const [contextTouched, setContextTouched] = useState(false);
-  const [options, setOptions] = useState<OptionRow[]>([{ digit: "1", destinationNumber: "", label: "" }]);
+  const [options, setOptions] = useState<OptionRow[]>([{ digit: "1", destinationType: "EXTENSION", destinationValue: "", label: "" }]);
  const [error, setError] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

@@ -172,7 +198,7 @@ function NewIvrMenuForm({

  function addOption() {
    const nextDigit = ALLOWED_IVR_DIGITS.find((d) => !usedDigits.has(d)) ?? "1";
-    setOptions((prev) => [...prev, { digit: nextDigit, destinationNumber: "", label: "" }]);
+    setOptions((prev) => [...prev, { digit: nextDigit, destinationType: "EXTENSION", destinationValue: "", label: "" }]);
  }

  function removeOption(index: number) {
@@ -190,8 +216,8 @@ function NewIvrMenuForm({
      setError(`Já existe um menu com o contexto "${effectiveContext}" — escolha outro nome.`);
      return;
    }
-    if (options.length === 0 || options.some((o) => !o.destinationNumber.trim())) {
-      setError("Toda opção precisa de um dígito e um ramal de destino.");
+    if (options.length === 0 || options.some((o) => !o.destinationValue.trim())) {
+      setError("Toda opção precisa de um dígito e um destino selecionado.");
      return;
    }
    const digits = options.map((o) => o.digit);
@@ -200,11 +226,24 @@ function NewIvrMenuForm({
      return;
    }

-    const payloadOptions: IvrMenuOptionInput[] = options.map((o) => ({
-      digit: o.digit,
-      destinationNumber: o.destinationNumber.trim(),
-      label: o.label.trim() || undefined,
-    }));
+    const payloadOptions: IvrMenuOptionInput[] = options.map((o) => {
+      if (o.destinationType === "IVR") {
+        const target = menus.find((m) => m.id === o.destinationValue);
+        return {
+          digit: o.digit,
+          destinationType: "IVR",
+          destinationNumber: IVR_ENTRY_DESTINATION,
+          destinationContext: target?.context ?? "default",
+          label: o.label.trim() || undefined,
+        };
+      }
+      return {
+        digit: o.digit,
+        destinationType: o.destinationType,
+        destinationNumber: o.destinationValue.trim(),
+        label: o.label.trim() || undefined,
+      };
+    });

    startTransition(async () => {
      const result = await createIvrMenu({ name: name.trim(), context: effectiveContext, options: payloadOptions });
@@ -247,7 +286,7 @@ function NewIvrMenuForm({
            </Button>
          </div>
          {options.map((opt, i) => (
-            <div key={i} className="grid grid-cols-1 gap-3 rounded-md border border-border p-3 sm:grid-cols-[6rem_1fr_1fr_auto]">
+            <div key={i} className="grid grid-cols-1 gap-3 rounded-md border border-border p-3 sm:grid-cols-[5rem_7rem_1fr_1fr_auto]">
              <div>
                <FieldLabel htmlFor={`ivr-opt-${i}-digit`}>Dígito</FieldLabel>
                <Select
@@ -264,21 +303,52 @@ function NewIvrMenuForm({
                </Select>
              </div>
              <div>
-                <FieldLabel htmlFor={`ivr-opt-${i}-dest`}>Ramal de destino</FieldLabel>
+                <FieldLabel htmlFor={`ivr-opt-${i}-type`}>Tipo</FieldLabel>
                <Select
-                  id={`ivr-opt-${i}-dest`}
-                  value={opt.destinationNumber}
-                  onChange={(e) => updateOption(i, { destinationNumber: e.target.value })}
+                  id={`ivr-opt-${i}-type`}
+                  value={opt.destinationType}
+                  onChange={(e) => updateOption(i, { destinationType: e.target.value as IvrOptionDestinationType, destinationValue: "" })}
                  disabled={pending}
                >
-                  <option value="">Selecione um ramal…</option>
-                  {extensions.map((ext) => (
-                    <option key={ext.id} value={ext.number}>
-                      {ext.number} — {ext.name}
+                  {IVR_OPTION_DESTINATION_TYPES.map((t) => (
+                    <option key={t} value={t}>
+                      {IVR_OPTION_DESTINATION_TYPE_LABELS[t]}
                    </option>
                  ))}
                </Select>
              </div>
+              <div>
+                <FieldLabel htmlFor={`ivr-opt-${i}-dest`}>Destino</FieldLabel>
+                <Select
+                  id={`ivr-opt-${i}-dest`}
+                  value={opt.destinationValue}
+                  onChange={(e) => updateOption(i, { destinationValue: e.target.value })}
+                  disabled={pending}
+                >
+                  <option value="">Selecione…</option>
+                  {opt.destinationType === "EXTENSION" &&
+                    extensions.map((ext) => (
+                      <option key={ext.id} value={ext.number}>
+                        {ext.number} — {ext.name}
+                      </option>
+                    ))}
+                  {opt.destinationType === "QUEUE" &&
+                    queues.map((q) => (
+                      <option key={q.id} value={q.id}>
+                        {q.name}
+                      </option>
+                    ))}
+                  {opt.destinationType === "IVR" &&
+                    menus.map((m) => (
+                      <option key={m.id} value={m.id}>
+                        {m.name}
+                      </option>
+                    ))}
+                </Select>
+                {opt.destinationType === "IVR" && menus.length === 0 && (
+                  <p className="mt-1 text-xs text-muted-foreground">Crie outro menu de IVR primeiro pra poder apontar pra ele.</p>
+                )}
+              </div>
              <div>
                <FieldLabel htmlFor={`ivr-opt-${i}-label`}>Descrição (opcional)</FieldLabel>
                <Input
--- a/apps/frontend/src/app/app/telefonia/ivr/page.tsx
+++ b/apps/frontend/src/app/app/telefonia/ivr/page.tsx
@@ -1,14 +1,15 @@
 import { requireSession } from "@/lib/session";
 import { apiFetch } from "@/lib/api";
-import type { IvrMenu } from "@/lib/callcenter-types";
+import type { IvrMenu, Queue } from "@/lib/callcenter-types";
 import type { Extension } from "@/lib/extension-types";
 import { IvrView } from "./ivr-view";

 export default async function IvrPage() {
  const session = await requireSession();
-  const [menus, extensions] = await Promise.all([
+  const [menus, extensions, queues] = await Promise.all([
    apiFetch<IvrMenu[]>("/ivr-menus", session.accessToken),
    apiFetch<Extension[]>("/extensions", session.accessToken),
+    apiFetch<Queue[]>("/queues", session.accessToken),
  ]);
-  return <IvrView menus={menus} extensions={extensions} />;
+  return <IvrView menus={menus} extensions={extensions} queues={queues} />;
 }
--- a/apps/frontend/src/lib/callcenter-types.ts
+++ b/apps/frontend/src/lib/callcenter-types.ts
@@ -74,9 +74,19 @@ export const ALLOWED_IVR_DIGITS = ["1", "2", "3", "4", "5", "6", "7", "8", "9",
 * aponta pra um IvrMenu usa isso como destinationNumber (packages/telephony). */
 export const IVR_ENTRY_DESTINATION = "ivr_entry";

+export const IVR_OPTION_DESTINATION_TYPES = ["EXTENSION", "QUEUE", "IVR"] as const;
+export type IvrOptionDestinationType = (typeof IVR_OPTION_DESTINATION_TYPES)[number];
+
+export const IVR_OPTION_DESTINATION_TYPE_LABELS: Record<IvrOptionDestinationType, string> = {
+  EXTENSION: "Ramal",
+  QUEUE: "Fila",
+  IVR: "Outro IVR",
+};
+
 export interface IvrMenuOption {
  id: string;
  digit: string;
+  destinationType: IvrOptionDestinationType;
  destinationNumber: string;
  destinationContext: string;
  label: string | null;