fix(desktop): corrige tela de desativacao e adiciona botao Verificar novamente

- Corrige erro gramatical: "Dispositivo desativada" -> "Dispositivo desativado" - Adiciona botao "Verificar novamente" na tela de desativacao - Adiciona callback onReactivated no MachineStateMonitor - Corrige fundo escuro para cobrir toda a tela quando desativado - Corrige acentuacoes faltantes no historico de automacoes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 11:09:17 -03:00 · 2025-12-18 11:09:17 -03:00 · a5bab2cc33
commit a5bab2cc33
parent 70cba99424
4 changed files with 119 additions and 46 deletions
--- a/apps/desktop/src/components/DeactivationScreen.tsx
+++ b/apps/desktop/src/components/DeactivationScreen.tsx
@ -1,6 +1,24 @@
-import { ShieldAlert, Mail } from "lucide-react"
+import { ShieldAlert, Mail, RefreshCw } from "lucide-react"
+import { useState } from "react"
+
+type DeactivationScreenProps = {
+  companyName?: string | null
+  onRetry?: () => Promise<void> | void
+}
+
+export function DeactivationScreen({ companyName, onRetry }: DeactivationScreenProps) {
+  const [isRetrying, setIsRetrying] = useState(false)
+
+  const handleRetry = async () => {
+    if (isRetrying || !onRetry) return
+    setIsRetrying(true)
+    try {
+      await onRetry()
+    } finally {
+      setIsRetrying(false)
+    }
+  }

-export function DeactivationScreen({ companyName }: { companyName?: string | null }) {
  return (
    <div className="min-h-screen grid place-items-center bg-neutral-950 p-6">
      <div className="flex w-full max-w-[720px] flex-col items-center gap-6 rounded-2xl border border-slate-200 bg-white px-8 py-10 shadow-sm">
@ -8,9 +26,9 @@ export function DeactivationScreen({ companyName }: { companyName?: string | nul
          <span className="inline-flex items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3 py-1 text-xs font-semibold text-rose-700">
            <ShieldAlert className="size-4" /> Acesso bloqueado
          </span>
-          <h1 className="text-2xl font-semibold text-neutral-900">Dispositivo desativada</h1>
+          <h1 className="text-2xl font-semibold text-neutral-900">Dispositivo desativado</h1>
          <p className="max-w-md text-sm text-neutral-600">
-            Esta dispositivo foi desativada temporariamente pelos administradores. Enquanto isso, o acesso ao portal e o
+            Este dispositivo foi desativado temporariamente pelos administradores. Enquanto isso, o acesso ao portal e o
            envio de informações ficam indisponíveis.
          </p>
          {companyName ? (
@ -29,12 +47,25 @@ export function DeactivationScreen({ companyName }: { companyName?: string | nul
            </ul>
          </div>

+          <div className="flex flex-col items-center gap-3">
            <a
              href="mailto:suporte@rever.com.br"
-            className="mx-auto inline-flex items-center gap-2 rounded-full border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-black/90"
+              className="inline-flex items-center gap-2 rounded-full border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-black/90"
            >
              <Mail className="size-4" /> Falar com o suporte
            </a>
+            {onRetry && (
+              <button
+                type="button"
+                onClick={handleRetry}
+                disabled={isRetrying}
+                className="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-neutral-700 transition hover:bg-slate-50 disabled:opacity-50"
+              >
+                <RefreshCw className={`size-4 ${isRetrying ? "animate-spin" : ""}`} />
+                {isRetrying ? "Verificando..." : "Verificar novamente"}
+              </button>
+            )}
+          </div>
        </div>
      </div>
    </div>
--- a/apps/desktop/src/components/MachineStateMonitor.tsx
+++ b/apps/desktop/src/components/MachineStateMonitor.tsx
@ -18,9 +18,10 @@ type MachineStateMonitorProps = {
  machineId: string
  onDeactivated?: () => void
  onTokenRevoked?: () => void
+  onReactivated?: () => void
 }

-function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked }: MachineStateMonitorProps) {
+function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked, onReactivated }: MachineStateMonitorProps) {
  const machineState = useQuery(api.machines.getMachineState, {
    machineId: machineId as Id<"machines">,
  })
@ -65,6 +66,12 @@ function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked }:
      onDeactivated?.()
    }

+    // Detecta mudança de inativo para ativo (reativação)
+    if (previousIsActive.current === false && machineState.isActive === true) {
+      console.log("[MachineStateMonitor] Máquina foi reativada")
+      onReactivated?.()
+    }
+
    // Detecta mudança de token válido para inválido
    if (previousHasValidToken.current === true && machineState.hasValidToken === false) {
      console.log("[MachineStateMonitor] Token foi revogado (reset)")
@ -74,7 +81,7 @@ function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked }:
    // Atualiza refs
    previousIsActive.current = machineState.isActive
    previousHasValidToken.current = machineState.hasValidToken
-  }, [machineState, onDeactivated, onTokenRevoked])
+  }, [machineState, onDeactivated, onTokenRevoked, onReactivated])

  // Este componente nao renderiza nada
  return null
--- a/apps/desktop/src/main.tsx
+++ b/apps/desktop/src/main.tsx
@ -12,6 +12,8 @@ import { cn } from "./lib/utils"
 import { ChatApp } from "./chat"
 import { DeactivationScreen } from "./components/DeactivationScreen"
 import { MachineStateMonitor } from "./components/MachineStateMonitor"
+import { api } from "./convex/_generated/api"
+import type { Id } from "./convex/_generated/dataModel"
 import type { SessionStartedEvent, UnreadUpdateEvent, NewMessageEvent, SessionEndedEvent } from "./chat/types"

 // URL do Convex para subscription em tempo real
@ -724,12 +726,36 @@ useEffect(() => {
  }
 }, [token]) // eslint-disable-line react-hooks/exhaustive-deps

-// Callbacks para quando a máquina for desativada ou resetada
+// Callbacks para quando a máquina for desativada, resetada ou reativada
 const handleMachineDeactivated = useCallback(() => {
  console.log("[App] Máquina foi desativada - mostrando tela de bloqueio")
  setIsMachineActive(false)
 }, [])

+const handleMachineReactivated = useCallback(() => {
+  console.log("[App] Máquina foi reativada - liberando acesso")
+  setIsMachineActive(true)
+}, [])
+
+// Callback para o botão "Verificar novamente" na tela de desativação
+// Usa o convexClient diretamente para fazer uma query manual
+const handleRetryCheck = useCallback(async () => {
+  if (!convexClient || !config?.machineId) return
+  console.log("[App] Verificando estado da máquina manualmente...")
+  try {
+    const state = await convexClient.query(api.machines.getMachineState, {
+      machineId: config.machineId as Id<"machines">,
+    })
+    console.log("[App] Estado da máquina:", state)
+    if (state?.isActive) {
+      console.log("[App] Máquina ativa - liberando acesso")
+      setIsMachineActive(true)
+    }
+  } catch (err) {
+    console.error("[App] Erro ao verificar estado:", err)
+  }
+}, [convexClient, config?.machineId])
+
 const handleTokenRevoked = useCallback(async () => {
  console.log("[App] Token foi revogado - voltando para tela de registro")
  if (store) {
@ -1582,20 +1608,31 @@ const resolvedAppUrl = useMemo(() => {
    )
  }

-  return (
-    <div className="min-h-screen grid place-items-center bg-slate-50 p-6">
-      {/* Monitor de estado da maquina em tempo real via Convex */}
-      {token && config?.machineId && convexClient && (
+  // Monitor sempre ativo quando há token e machineId
+  const machineMonitor = token && config?.machineId && convexClient ? (
    <MachineStateMonitor
      client={convexClient}
      machineId={config.machineId}
      onDeactivated={handleMachineDeactivated}
      onTokenRevoked={handleTokenRevoked}
+      onReactivated={handleMachineReactivated}
    />
-      )}
-      {token && !isMachineActive ? (
-        <DeactivationScreen companyName={companyName} />
-      ) : (
+  ) : null
+
+  // Tela de desativação (renderizada separadamente para evitar container com fundo claro)
+  if (token && !isMachineActive) {
+    return (
+      <>
+        {machineMonitor}
+        <DeactivationScreen companyName={companyName} onRetry={handleRetryCheck} />
+      </>
+    )
+  }
+
+  return (
+    <div className="min-h-screen grid place-items-center bg-slate-50 p-6">
+      {/* Monitor de estado da maquina em tempo real via Convex */}
+      {machineMonitor}
      <div className="w-full max-w-[720px] rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <div className="mb-6 flex flex-col items-center gap-4 text-center">
          <img
@ -1816,8 +1853,6 @@ const resolvedAppUrl = useMemo(() => {
          </div>
        )}
      </div>
-      )}
-
    </div>
  )
 }
--- a/src/components/automations/automation-runs-dialog.tsx
+++ b/src/components/automations/automation-runs-dialog.tsx
@ -61,16 +61,16 @@ const ACTION_TYPE_LABELS: Record<string, { label: string; icon: typeof Mail }> =
  SEND_EMAIL: { label: "Enviar e-mail", icon: Mail },
  SET_PRIORITY: { label: "Alterar prioridade", icon: ArrowRight },
  MOVE_QUEUE: { label: "Mover para fila", icon: ArrowRight },
-  ASSIGN_TO: { label: "Atribuir responsavel", icon: UserCheck },
-  ADD_INTERNAL_COMMENT: { label: "Comentario interno", icon: MessageSquare },
+  ASSIGN_TO: { label: "Atribuir responsável", icon: UserCheck },
+  ADD_INTERNAL_COMMENT: { label: "Comentário interno", icon: MessageSquare },
  APPLY_CHECKLIST_TEMPLATE: { label: "Aplicar checklist", icon: ListChecks },
  SET_CHAT_ENABLED: { label: "Chat habilitado", icon: ToggleRight },
-  SET_FORM_TEMPLATE: { label: "Aplicar formulario", icon: FileText },
+  SET_FORM_TEMPLATE: { label: "Aplicar formulário", icon: FileText },
 }

 const PRIORITY_LABELS: Record<string, string> = {
  LOW: "Baixa",
-  MEDIUM: "Media",
+  MEDIUM: "Média",
  HIGH: "Alta",
  URGENT: "Urgente",
 }
@ -93,7 +93,7 @@ function ActionDetails({ action }: { action: ActionApplied }) {
        <div className="space-y-2 text-sm">
          {details.recipients && Array.isArray(details.recipients) && (
            <div>
-              <span className="text-slate-500">Destinatarios:</span>
+              <span className="text-slate-500">Destinatários:</span>
              <div className="mt-1 flex flex-wrap gap-1">
                {(details.recipients as string[]).map((email, i) => (
                  <Badge key={i} variant="outline" className="text-xs font-mono">
@ -147,14 +147,14 @@ function ActionDetails({ action }: { action: ActionApplied }) {

      {action.type === "ASSIGN_TO" && (
        <div className="text-sm">
-          <span className="text-slate-500">Responsavel:</span>{" "}
+          <span className="text-slate-500">Responsável:</span>{" "}
          <span className="text-slate-900 font-medium">{String(details.assigneeName ?? "—")}</span>
        </div>
      )}

      {action.type === "SET_FORM_TEMPLATE" && (
        <div className="text-sm">
-          <span className="text-slate-500">Formulario:</span>{" "}
+          <span className="text-slate-500">Formulário:</span>{" "}
          <span className="text-slate-900">{String(details.formTemplateLabel ?? details.formTemplate ?? "—")}</span>
        </div>
      )}
@ -170,7 +170,7 @@ function ActionDetails({ action }: { action: ActionApplied }) {

      {action.type === "ADD_INTERNAL_COMMENT" && (
        <div className="text-sm text-slate-600">
-          Comentario interno adicionado ao ticket
+          Comentário interno adicionado ao ticket
        </div>
      )}

@ -199,7 +199,7 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {
          {run.ticket ? (
            <div className="text-sm space-y-1">
              <div>
-                <span className="text-slate-500">Referencia:</span>{" "}
+                <span className="text-slate-500">Referência:</span>{" "}
                <span className="font-mono font-semibold">#{run.ticket.reference}</span>
              </div>
              <div>
@ -208,22 +208,22 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {
              </div>
            </div>
          ) : (
-            <p className="text-sm text-slate-400">Ticket nao disponivel</p>
+            <p className="text-sm text-slate-400">Ticket não disponível</p>
          )}
        </div>

-        {/* Info da Execucao */}
+        {/* Info da Execução */}
        <div className="space-y-2">
-          <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Execucao</h4>
+          <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Execução</h4>
          <div className="text-sm space-y-1">
            <div>
              <span className="text-slate-500">Evento:</span>{" "}
              <span className="text-slate-900">{EVENT_LABELS[run.eventType] ?? run.eventType}</span>
            </div>
            <div>
-              <span className="text-slate-500">Condicoes:</span>{" "}
+              <span className="text-slate-500">Condições:</span>{" "}
              <Badge variant={run.matched ? "secondary" : "outline"}>
-                {run.matched ? "Atendidas" : "Nao atendidas"}
+                {run.matched ? "Atendidas" : "Não atendidas"}
              </Badge>
            </div>
            {run.error && (
@ -236,11 +236,11 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {
        </div>
      </div>

-      {/* Acoes Aplicadas */}
+      {/* Ações Aplicadas */}
      {hasActions && (
        <div className="mt-4 space-y-2">
          <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
-            Acoes aplicadas ({run.actionsApplied!.length})
+            Ações aplicadas ({run.actionsApplied!.length})
          </h4>
          <div className="grid gap-2 md:grid-cols-2">
            {run.actionsApplied!.map((action, i) => (
@ -252,7 +252,7 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {

      {!hasActions && run.status === "SUCCESS" && (
        <div className="mt-4">
-          <p className="text-sm text-slate-500">Nenhuma acao foi aplicada nesta execucao.</p>
+          <p className="text-sm text-slate-500">Nenhuma ação foi aplicada nesta execução.</p>
        </div>
      )}
    </div>
@ -389,7 +389,7 @@ export function AutomationRunsDialog({
                  const eventLabel = EVENT_LABELS[run.eventType] ?? run.eventType
                  const actionsCount = run.actionsApplied?.length ?? 0
                  const actionsLabel =
-                    actionsCount === 1 ? "Aplicou 1 acao" : `Aplicou ${actionsCount} acoes`
+                    actionsCount === 1 ? "Aplicou 1 ação" : `Aplicou ${actionsCount} ações`
                  const createdAtLabel = formatDateTime(run.createdAt)
                  const details =
                    run.status === "ERROR"
@ -397,10 +397,10 @@ export function AutomationRunsDialog({
                      : run.status === "SKIPPED"
                        ? run.matched
                          ? "Ignorada"
-                          : "Condicoes nao atendidas"
+                          : "Condições não atendidas"
                        : actionsCount > 0
                          ? actionsLabel
-                          : "Sem alteracoes"
+                          : "Sem alterações"

                  const isExpanded = expandedId === run.id
                  const toggleExpand = () => setExpandedId(isExpanded ? null : run.id)