From 78872a003a483327bedef342f57f888a5b172db9 Mon Sep 17 00:00:00 2001
From: Rodrigo Borba <rodrigobm10@me.com>
Date: Sun, 4 Jan 2026 16:00:28 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20Implementa=20funil=20de=20CRM=20com=20g?=
 =?UTF-8?q?era=C3=A7=C3=A3o=20de=20dados=20e=20visualiza=C3=A7=C3=A3o=20de?=
 =?UTF-8?q?=20timeline=20na=20interface.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../conversation/ConversationHeader.vue       |   6 +-
 .../conversation/CrmInsightsSidebar.vue       |   9 +
 .../conversation/crm/FunnelTimeline.vue       | 160 ++++++++++++++++++
 .../i18n/locale/en/conversation.json          |  14 ++
 .../i18n/locale/pt_BR/conversation.json       |  14 ++
 app/services/crm_insights/generate_service.rb |  24 ++-
 tmp_test_crm_funnel.rb                        |  47 +++++
 tmp_update_conversations.rb                   |  39 +++++
 8 files changed, 307 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/crm/FunnelTimeline.vue
 create mode 100644 tmp_test_crm_funnel.rb
 create mode 100644 tmp_update_conversations.rb

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 9eff2b0..190feba 100755
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -166,12 +166,10 @@ const toggleCrmInsights = () => {
       />
       <Button
         v-tooltip.top="t('CONVERSATION.CRM_INSIGHTS.TOGGLE')"
-        ghost
-        slate
-        sm
         icon="i-lucide-brain"
+        class="bg-green-50 text-green-600 hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 border border-green-200 dark:border-green-800 !p-2 !h-10 !w-10 !text-xl"
         :class="{
-          'bg-n-alpha-2': isCrmInsightsOpen,
+          'ring-2 ring-green-500 ring-offset-1': isCrmInsightsOpen,
         }"
         @click="toggleCrmInsights"
       />
diff --git a/app/javascript/dashboard/components/widgets/conversation/CrmInsightsSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/CrmInsightsSidebar.vue
index 5d08705..d3845fc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CrmInsightsSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CrmInsightsSidebar.vue
@@ -14,6 +14,7 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
+import FunnelTimeline from './crm/FunnelTimeline.vue';
 
 const props = defineProps({
   currentChat: {
@@ -154,6 +155,7 @@ const priceSensitivity = computed(
 );
 const confidence = computed(() => structuredData.value?.confidence);
 const nba = computed(() => structuredData.value?.nba || {});
+const funnelData = computed(() => structuredData.value?.funnel || {});
 const generatedAt = computed(() => structuredData.value?.generated_at);
 const agentTip = computed(() => structuredData.value?.agent_tip);
 
@@ -537,6 +539,13 @@ watch(
         </div>
 
         <div class="grid gap-3">
+          <div
+            v-if="funnelData?.stage"
+            class="rounded-xl border border-n-weak overflow-hidden bg-n-alpha-1"
+          >
+            <FunnelTimeline :funnel-data="funnelData" />
+          </div>
+
           <div v-if="intent" class="rounded-xl border border-n-weak p-3">
             <div class="text-xs font-medium text-n-slate-9">
               {{ t('CONVERSATION.CRM_INSIGHTS.CARDS.INTENT') }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/crm/FunnelTimeline.vue b/app/javascript/dashboard/components/widgets/conversation/crm/FunnelTimeline.vue
new file mode 100644
index 0000000..14b7107
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/crm/FunnelTimeline.vue
@@ -0,0 +1,160 @@
+<script>
+export default {
+  props: {
+    funnelData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      steps: [
+        { key: 'info' },
+        { key: 'price' },
+        { key: 'availability' },
+        { key: 'confirmation' },
+        { key: 'closed' },
+      ],
+    };
+  },
+  computed: {
+    stage() {
+      return this.funnelData?.stage;
+    },
+    confidence() {
+      return this.funnelData?.confidence;
+    },
+    reason() {
+      return this.funnelData?.reason;
+    },
+    isClosedWon() {
+      return this.stage === 'closed_won';
+    },
+    isClosedLost() {
+      return this.stage === 'closed_lost';
+    },
+    currentStepKey() {
+      if (this.isClosedWon || this.isClosedLost) return 'closed';
+      return this.stage;
+    },
+    currentStepIndex() {
+      return this.steps.findIndex(s => s.key === this.currentStepKey);
+    },
+    currentStepLabel() {
+      if (this.isClosedWon) {
+        return this.$t('CONVERSATION.CRM_INSIGHTS.FUNNEL.STEPS.CLOSED_WON');
+      }
+      if (this.isClosedLost) {
+        return this.$t('CONVERSATION.CRM_INSIGHTS.FUNNEL.STEPS.CLOSED_LOST');
+      }
+
+      const stepKey = this.stage ? this.stage.toUpperCase() : '';
+      return stepKey
+        ? this.$t(`CONVERSATION.CRM_INSIGHTS.FUNNEL.STEPS.${stepKey}`)
+        : this.stage;
+    },
+    statusColorClass() {
+      if (this.isClosedWon) return 'bg-green-500';
+      if (this.isClosedLost) return 'bg-slate-400';
+      return 'bg-woot-500';
+    },
+  },
+  methods: {
+    getStepLabel(stepKey) {
+      return this.$t(
+        `CONVERSATION.CRM_INSIGHTS.FUNNEL.STEPS.${stepKey.toUpperCase()}`
+      );
+    },
+    getStepClasses(stepKey, stepIndex) {
+      if (stepKey === this.currentStepKey) {
+        return this.getStepSpecificColor(stepKey);
+      }
+
+      if (this.currentStepIndex > stepIndex) {
+        return this.getStepSpecificColor(stepKey);
+      }
+
+      // Future Steps
+      return 'bg-slate-100 border-slate-200 dark:bg-slate-800 dark:border-slate-700';
+    },
+    getStepSpecificColor(stepKey) {
+      const colors = {
+        info: 'bg-blue-400 border-blue-400',
+        price: 'bg-indigo-400 border-indigo-400',
+        availability: 'bg-violet-400 border-violet-400',
+        confirmation: 'bg-purple-400 border-purple-400',
+        closed: this.isClosedWon
+          ? 'bg-green-500 border-green-500'
+          : 'bg-slate-400 border-slate-400',
+      };
+      return colors[stepKey] || 'bg-woot-500 border-woot-500';
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="px-4 py-3 border-b border-slate-100 dark:border-slate-800 bg-green-50/50 dark:bg-green-900/10"
+  >
+    <div class="flex items-center justify-between mb-2">
+      <span
+        class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider"
+      >
+        {{ $t('CONVERSATION.CRM_INSIGHTS.FUNNEL.TITLE') }}
+      </span>
+      <span
+        v-if="confidence"
+        class="text-[10px] text-slate-400 bg-white/50 dark:bg-slate-800 px-1.5 py-0.5 rounded border border-slate-100 dark:border-slate-700"
+      >
+        {{
+          $t('CONVERSATION.CRM_INSIGHTS.FUNNEL.TRUST', {
+            percentage: Math.round(confidence * 100),
+          })
+        }}
+      </span>
+    </div>
+
+    <!-- Timeline Steps -->
+    <div class="flex items-center justify-between relative mb-3 mt-1">
+      <!-- Connecting Line -->
+      <div
+        class="absolute top-1/2 left-0 w-full h-0.5 bg-slate-100 dark:bg-slate-800 -z-0"
+      />
+
+      <!-- Steps -->
+      <div
+        v-for="(step, index) in steps"
+        :key="step.key"
+        v-tooltip.top="getStepLabel(step.key)"
+        class="relative z-10 flex flex-col items-center group cursor-help"
+      >
+        <div
+          class="w-3 h-3 rounded-full border-2 transition-all duration-300"
+          :class="getStepClasses(step.key, index)"
+        />
+      </div>
+    </div>
+
+    <!-- Current Stage Info -->
+    <div
+      class="bg-slate-50 dark:bg-slate-800/50 rounded-md p-2.5 border border-slate-100 dark:border-slate-700/50"
+    >
+      <div class="flex items-center gap-2 mb-1">
+        <div class="w-2 h-2 rounded-full" :class="statusColorClass" />
+        <span class="text-xs font-bold text-slate-700 dark:text-slate-200">
+          {{ currentStepLabel }}
+        </span>
+      </div>
+      <p
+        v-if="reason"
+        class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed"
+      >
+        {{ reason }}
+      </p>
+      <div class="mt-2 text-[10px] text-slate-400 italic">
+        {{ $t('CONVERSATION.CRM_INSIGHTS.FUNNEL.DISCLAIMER') }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index c7b7c78..d7e85e8 100755
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -160,6 +160,20 @@
         "TITLE": "History",
         "SHOW": "View history",
         "HIDE": "Hide history"
+      },
+      "FUNNEL": {
+        "TITLE": "Sales Funnel",
+        "TRUST": "{percentage}% trust",
+        "DISCLAIMER": "* Stage automatically inferred by AI",
+        "STEPS": {
+          "INFO": "Info",
+          "PRICE": "Price",
+          "AVAILABILITY": "Availability",
+          "CONFIRMATION": "Confirmation",
+          "CLOSED": "Closed",
+          "CLOSED_WON": "Closed (Won)",
+          "CLOSED_LOST": "Closed (Lost)"
+        }
       }
     },
     "RESOLVE_DROPDOWN": {
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
index ed78d30..7078e70 100755
--- a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
@@ -160,6 +160,20 @@
         "TITLE": "Historico",
         "SHOW": "Ver historico",
         "HIDE": "Ocultar historico"
+      },
+      "FUNNEL": {
+        "TITLE": "Funil de Vendas",
+        "TRUST": "{percentage}% confiança",
+        "DISCLAIMER": "* Estágio inferido automaticamente pela IA",
+        "STEPS": {
+          "INFO": "Info",
+          "PRICE": "Preço",
+          "AVAILABILITY": "Disponibilidade",
+          "CONFIRMATION": "Confirmação",
+          "CLOSED": "Fim",
+          "CLOSED_WON": "Fechado (Ganho)",
+          "CLOSED_LOST": "Fechado (Perdido)"
+        }
       }
     },
     "RESOLVE_DROPDOWN": {
diff --git a/app/services/crm_insights/generate_service.rb b/app/services/crm_insights/generate_service.rb
index f9852d4..a7b4fb9 100644
--- a/app/services/crm_insights/generate_service.rb
+++ b/app/services/crm_insights/generate_service.rb
@@ -60,10 +60,30 @@ module CrmInsights
             "frictions": [],
             "commercial_status": "",
             "customer_potential": "",
-            "agent_tip": ""
+            "agent_tip": "",
+            "funnel": {
+              "stage": "info", // enum: info, price, availability, confirmation, closed_won, closed_lost
+              "confidence": 0.0, // float 0-1
+              "reason": "justificativa curta",
+              "evidence_message_ids": [], // IDs das mensagens que justificam o estagio
+              "updated_at": "ISO8601" // data atual se houve mudanca, ou manter anterior
+            }
           }
         }
 
+        REGRAS FUNIL DE VENDAS (CRITICO):
+        1. Analise APENAS o historico fornecido abaixo para definir o estagio.
+        2. Estagios:
+           - info: pede informacoes gerais. (Confianca minima: qualquer)
+           - price: discute valores. (Confianca minima: 0.6)
+           - availability: pergunta sobre datas/vagas. (Confianca minima: 0.6)
+           - confirmation: sinaliza reserva/pagamento. (Confianca minima: 0.75)
+           - closed_won: confirmou reserva explicitamente ("ja paguei", "reservado"). (Confianca minima: 0.85)
+           - closed_lost: desistiu explicitamente ("nao vou querer", "fica pra proxima"). (Confianca minima: 0.85)
+        3. Se nao houver mensagens NOVAS suficientes para mudar de estagio com confianca, mantenha o estagio anterior (se fornecido no JSON anterior) ou retorne "info" se for o inicio.
+        4. NUNCA avance para closed_won/lost sem evidencia explicita de fechamento ou perda.
+        5. "evidence_message_ids" eh OBRIGATORIO. Se estiver vazio, o estagio deve ser considerado invalido ou "info".
+
         Contexto:
         - Canal: #{channel_name}
         - Conversa ID: #{@conversation.id}
@@ -99,7 +119,7 @@ module CrmInsights
         • Duvidas recorrentes sobre formas de pagamento
         • Questionamentos frequentes sobre horario de check-in
 
-        Status comercial atual: 🟢 Alta chance de conversao
+        Status comercial atual: 🟢 Alta chance de conversao (Estagio: Disponibilidade)
 
         Potencial do cliente:
         • Perfil recorrente
diff --git a/tmp_test_crm_funnel.rb b/tmp_test_crm_funnel.rb
new file mode 100644
index 0000000..95a53c9
--- /dev/null
+++ b/tmp_test_crm_funnel.rb
@@ -0,0 +1,47 @@
+# Script to create a test conversation for CRM Funnel
+
+# 1. Create Contact and Conversation
+inbox = Inbox.first
+account = inbox.account
+puts "Using Inbox ##{inbox.id} (#{inbox.channel_type}) and Account ##{account.id}"
+
+contact = Contact.create!(name: 'Cliente Teste Funil', phone_number: "+55119#{rand(10_000_000..99_999_999)}", account: account)
+puts "Created Contact ##{contact.id}"
+
+# Ensure ContactInbox exists
+ci = ContactInbox.find_or_create_by!(contact: contact, inbox: inbox) do |c|
+  c.source_id = contact.phone_number # valid for phone-based channels, might need adjustment for others
+end
+puts "Created/Found ContactInbox ##{ci.id}"
+
+conv = Conversation.create!(contact: contact, inbox: inbox, contact_inbox: ci, account: account, status: :open)
+puts "Created Conversation ##{conv.id}"
+
+# 2. Add Messages (Booking Flow)
+conv.messages.create!(content: 'Oi, gostaria de saber o preço da suíte com hidro para sábado.', message_type: :incoming, account: account,
+                      inbox: inbox, sender: contact)
+conv.messages.create!(content: 'Olá! A suíte está 400 reais.', message_type: :outgoing, account: account, inbox: inbox)
+conv.messages.create!(content: 'Entendi. Tem disponibilidade?', message_type: :incoming, account: account, inbox: inbox, sender: contact)
+
+# 3. Create CRM Insight with Funnel Data
+data = {
+  'summary_text' => 'Cliente interessado em suíte com hidro para sábado. Perguntou preço e disponibilidade.',
+  'funnel' => {
+    'stage' => 'availability',
+    'confidence' => 0.85,
+    'reason' => 'Cliente perguntou explicitamente sobre disponibilidade após receber o preço.',
+    'evidence_message_ids' => conv.messages.pluck(:id),
+    'updated_at' => Time.current.iso8601
+  },
+  'intent' => 'Reserva',
+  'urgency' => 'high',
+  'commercial_status' => 'Interessado',
+  'preferences' => ['Suite Hidro'],
+  'contact_pattern' => { 'time_range' => 'Noite', 'days' => ['Sabado'] } # Adding more data for rich UI
+}
+
+conv.crm_insights.create!(account_id: 1, contact_id: conv.contact_id, structured_data: data, status: :success, generated_at: Time.current)
+
+puts '========================================'
+puts "SUCCESS! Open Conversation ##{conv.id} to test the Funnel UI."
+puts '========================================'
diff --git a/tmp_update_conversations.rb b/tmp_update_conversations.rb
new file mode 100644
index 0000000..f72868c
--- /dev/null
+++ b/tmp_update_conversations.rb
@@ -0,0 +1,39 @@
+# Script to update existing test conversations with Funnel Data
+[7, 8, 9, 10, 11, 12, 13, 14, 15].each do |id|
+  conv = Conversation.find_by(id: id)
+  next unless conv
+
+  puts "Updating Conversation ##{id}..."
+
+  # Find or create insight
+  insight = conv.crm_insights.first
+  insight ||= conv.crm_insights.create!(
+    account_id: conv.account_id,
+    contact_id: conv.contact_id,
+    status: :success,
+    generated_at: Time.current,
+    structured_data: {}
+  )
+
+  data = insight.structured_data || {}
+
+  # Helper to mock messages if none exist (unlikely for these test ones but safe)
+  msg_ids = conv.messages.pluck(:id)
+
+  data['funnel'] = {
+    'stage' => 'availability',
+    'confidence' => 0.85,
+    'reason' => 'Cliente demostrou interesse e perguntou disponibilidade (Simulação).',
+    'evidence_message_ids' => msg_ids,
+    'updated_at' => Time.current.iso8601
+  }
+
+  # Ensure other requisite fields for the sidebar to look 'normal'
+  data['summary_text'] = 'Resumo automático para teste do funil (Dados Injetados Manualmente).'
+  data['intent'] = 'Reserva Rapida'
+  data['urgency'] = 'high'
+  data['commercial_status'] = 'Interessado'
+
+  insight.update!(structured_data: data)
+  puts "Conversation ##{id} UPDATED successfully."
+end