From cfeac891fbf430956490310eed3d65cc2d2acb69 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Mon, 6 Jul 2026 19:39:41 +0200
Subject: [PATCH] =?UTF-8?q?feat(wa-inbox):=20bot=C3=A3o=20liga/desliga=20d?=
 =?UTF-8?q?a=20Secret=C3=A1ria=20por=20sess=C3=A3o=20na=20thin=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Botão Power na thin sidebar do /wa-inbox age SÓ na sessão/número aberto (verde=on,
vermelho pulsante=off). Abre modal com textarea de motivo (obrigatório p/ desligar),
histórico de quem ligou/desligou e aviso de rate-limit (1x/hora). secSessionPowerApi
+ SessaoSecretariaPower.tsx.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/SessaoSecretariaPower.tsx      | 134 ++++++++++++++++++
 .../views/newwhats/components/ThinSidebar.tsx |   3 +
 .../views/newwhats/services/secretariaApi.ts  |  16 +++
 3 files changed, 153 insertions(+)
 create mode 100644 frontend/views/newwhats/components/SessaoSecretariaPower.tsx

diff --git a/frontend/views/newwhats/components/SessaoSecretariaPower.tsx b/frontend/views/newwhats/components/SessaoSecretariaPower.tsx
new file mode 100644
index 0000000..91ae9fa
--- /dev/null
+++ b/frontend/views/newwhats/components/SessaoSecretariaPower.tsx
@@ -0,0 +1,134 @@
+// Liga/desliga a Secretária IA APENAS desta sessão (instância aberta no /wa-inbox).
+// Rate-limit 1x/hora, motivo obrigatório ao desligar, histórico de quem apertou.
+// Fica na thin sidebar; abre um modal com o textarea de motivo + histórico.
+import React, { useState, useEffect, useCallback } from 'react';
+import { Power, X, Loader2, History, AlertTriangle } from 'lucide-react';
+import { secSessionPowerApi, SessionPower } from '../services/secretariaApi';
+
+const userName = (() => {
+  try { return JSON.parse(localStorage.getItem('SCOREODONTO_USER_DATA') || '{}')?.nome || 'Usuário'; }
+  catch { return 'Usuário'; }
+})();
+
+const fmt = (iso?: string | null) => {
+  if (!iso) return '';
+  try { return new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }); }
+  catch { return ''; }
+};
+
+export const SessaoSecretariaPower: React.FC<{ instanceId: string | null }> = ({ instanceId }) => {
+  const [sp, setSp] = useState<SessionPower | null>(null);
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [erro, setErro] = useState<string | null>(null);
+
+  const carregar = useCallback(async () => {
+    if (!instanceId) return;
+    try { setSp(await secSessionPowerApi.get(instanceId)); } catch { /* silencioso */ }
+  }, [instanceId]);
+
+  useEffect(() => { carregar(); }, [carregar]);
+
+  if (!instanceId) return null;
+  const enabled = sp ? sp.enabled : true;
+
+  const toggle = async () => {
+    if (!sp?.can_toggle) return;
+    const proximo = !enabled;
+    if (proximo === false && !reason.trim()) { setErro('Escreva o motivo para desligar.'); return; }
+    setBusy(true); setErro(null);
+    try {
+      await secSessionPowerApi.set(instanceId, proximo, reason.trim(), userName);
+      setReason('');
+      await carregar();
+    } catch (e: any) {
+      setErro(e?.message || 'Não foi possível alterar.');
+      await carregar();
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <>
+      <button
+        title={enabled ? 'Secretária IA ligada nesta sessão — clique para gerenciar' : 'Secretária IA DESLIGADA nesta sessão'}
+        onClick={() => { setErro(null); setOpen(true); }}
+        className={`w-10 h-10 mb-2 rounded-full flex items-center justify-center transition-colors ${
+          enabled ? 'text-emerald-600 hover:bg-[#d9dbdf]/60' : 'text-white bg-red-600 hover:bg-red-700 animate-pulse'
+        }`}
+      >
+        <Power className="w-5 h-5" />
+      </button>
+
+      {open && (
+        <div className="fixed inset-0 bg-black/60 z-[80] flex items-center justify-center backdrop-blur-md p-4" onClick={() => setOpen(false)}>
+          <div className="bg-white w-full max-w-md rounded-[1.5rem] shadow-2xl border border-gray-100 flex flex-col max-h-[90vh] overflow-hidden" onClick={(e) => e.stopPropagation()}>
+            <div className="px-6 py-5 border-b border-gray-50 flex items-center justify-between bg-gradient-to-br from-gray-50 to-white">
+              <div className="flex items-center gap-3">
+                <div className={`p-2 rounded-xl ${enabled ? 'bg-emerald-500' : 'bg-red-600'} shadow`}><Power size={18} className="text-white" /></div>
+                <div>
+                  <h2 className="text-base font-black text-gray-900 uppercase tracking-tighter leading-none">Secretária desta sessão</h2>
+                  <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-1">{enabled ? 'Ligada' : 'Desligada'} · só este número</p>
+                </div>
+              </div>
+              <button onClick={() => setOpen(false)} className="p-2 hover:bg-gray-100 rounded-xl text-gray-400"><X size={20} /></button>
+            </div>
+
+            {erro && <div className="px-6 py-2 text-xs font-bold bg-red-50 text-red-600">{erro}</div>}
+
+            <div className="p-6 space-y-4 overflow-y-auto">
+              {!enabled && sp?.reason && (
+                <div className="text-xs bg-red-50 text-red-700 rounded-xl p-3">
+                  <span className="font-black">Desligada.</span> Motivo: {sp.reason}
+                  {sp.changed_by && <div className="text-red-400 mt-1">por {sp.changed_by} · {fmt(sp.changed_at)}</div>}
+                </div>
+              )}
+
+              {/* Motivo (só ao desligar) */}
+              {enabled && (
+                <div>
+                  <label className="text-[10px] font-black text-gray-400 uppercase tracking-widest block mb-1.5">Motivo para desligar</label>
+                  <textarea value={reason} onChange={(e) => setReason(e.target.value)} rows={3}
+                    placeholder="Ex.: revisando as respostas da IA; horário de pico; treinamento…"
+                    className="w-full bg-gray-50 border-2 border-transparent focus:border-red-500 rounded-xl px-3 py-2 text-sm outline-none resize-y" />
+                </div>
+              )}
+
+              {/* Rate-limit */}
+              {!sp?.can_toggle && (
+                <p className="text-[11px] text-amber-600 font-bold flex items-center gap-1.5"><AlertTriangle size={13} /> Só é possível alternar 1x por hora. Disponível às {fmt(sp?.next_toggle_at)}.</p>
+              )}
+
+              <button onClick={toggle} disabled={busy || !sp?.can_toggle}
+                className={`w-full py-2.5 rounded-xl text-sm font-black uppercase tracking-wide flex items-center justify-center gap-2 disabled:opacity-40 ${
+                  enabled ? 'bg-red-600 hover:bg-red-700 text-white' : 'bg-emerald-600 hover:bg-emerald-700 text-white'
+                }`}>
+                {busy ? <Loader2 size={16} className="animate-spin" /> : <Power size={16} />}
+                {enabled ? 'Desligar nesta sessão' : 'Ligar nesta sessão'}
+              </button>
+
+              {/* Histórico */}
+              {!!sp?.history?.length && (
+                <div>
+                  <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest flex items-center gap-1.5 mb-2"><History size={12} /> Histórico</p>
+                  <div className="space-y-1.5 max-h-40 overflow-y-auto">
+                    {sp.history.map((h, i) => (
+                      <div key={i} className="text-[11px] flex items-start gap-2">
+                        <span className={`mt-1 w-1.5 h-1.5 rounded-full shrink-0 ${h.enabled ? 'bg-emerald-500' : 'bg-red-500'}`} />
+                        <div className="min-w-0">
+                          <span className="font-bold text-gray-700">{h.enabled ? 'Ligou' : 'Desligou'}</span>
+                          <span className="text-gray-400"> · {h.by || '—'} · {fmt(h.at)}</span>
+                          {!h.enabled && h.reason && <div className="text-gray-500 leading-snug">{h.reason}</div>}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/frontend/views/newwhats/components/ThinSidebar.tsx b/frontend/views/newwhats/components/ThinSidebar.tsx
index d4c688e..8371c20 100644
--- a/frontend/views/newwhats/components/ThinSidebar.tsx
+++ b/frontend/views/newwhats/components/ThinSidebar.tsx
@@ -7,6 +7,7 @@ import {
     BrainCircuit,
 } from 'lucide-react';
 import { getAvatarProxyUrl } from '../utils/inboxUtils';
+import { SessaoSecretariaPower } from './SessaoSecretariaPower';
 
 export type TabType = 'chats' | 'broadcasts' | 'groups' | 'settings';
 
@@ -64,6 +65,8 @@ export default function ThinSidebar({ activeTab, setActiveTab, activeInstance, o
 
             {/* Bottom Icons */}
             <div className="w-full flex flex-col items-center pb-2">
+                {/* Liga/desliga a Secretária IA APENAS desta sessão (número atual) */}
+                <SessaoSecretariaPower instanceId={activeInstance?.instance ?? null} />
                 {/* Configurações — abre o painel na área central (aba 'settings') */}
                 {renderIcon('settings', Settings, 'Configurações')}
 
diff --git a/frontend/views/newwhats/services/secretariaApi.ts b/frontend/views/newwhats/services/secretariaApi.ts
index 46bad08..05104a5 100644
--- a/frontend/views/newwhats/services/secretariaApi.ts
+++ b/frontend/views/newwhats/services/secretariaApi.ts
@@ -90,6 +90,22 @@ export const secPowerApi = {
   set: (enabled: boolean) => api.post<{ enabled: boolean }>(`${BASE}/power`, { enabled }).then((r) => r.data),
 }
 
+// Liga/desliga a Secretária POR SESSÃO (instância atual do /wa-inbox).
+export interface SessionPower {
+  enabled: boolean
+  reason: string | null
+  changed_by: string | null
+  changed_at: string | null
+  can_toggle: boolean
+  next_toggle_at: string | null
+  history: { enabled: boolean; reason: string | null; by: string | null; at: string }[]
+}
+export const secSessionPowerApi = {
+  get: (instanceId: string) => api.get<SessionPower>(`${BASE}/session-power`, { params: { instance_id: instanceId } }).then((r) => r.data),
+  set: (instanceId: string, enabled: boolean, reason: string, by: string) =>
+    api.post<{ ok: boolean; enabled: boolean }>(`${BASE}/session-power`, { instance_id: instanceId, enabled, reason, by }).then((r) => r.data),
+}
+
 // ─── Agents ───────────────────────────────────────────────────────────────────
 
 export const secAgentApi = {