fix(desktop): corrige tela de desativacao e adiciona botao Verificar novamente
All checks were successful
CI/CD Web + Desktop / Detect changes (push) Successful in 4s
CI/CD Web + Desktop / Deploy (VPS Linux) (push) Successful in 3m30s
CI/CD Web + Desktop / Deploy Convex functions (push) Has been skipped
Quality Checks / Lint, Test and Build (push) Successful in 3m56s

- 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>
This commit is contained in:
rever-tecnologia 2025-12-18 11:09:17 -03:00
parent 70cba99424
commit a5bab2cc33
4 changed files with 119 additions and 46 deletions

View file

@ -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 ( return (
<div className="min-h-screen grid place-items-center bg-neutral-950 p-6"> <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"> <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"> <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 <ShieldAlert className="size-4" /> Acesso bloqueado
</span> </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"> <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. envio de informações ficam indisponíveis.
</p> </p>
{companyName ? ( {companyName ? (
@ -29,12 +47,25 @@ export function DeactivationScreen({ companyName }: { companyName?: string | nul
</ul> </ul>
</div> </div>
<div className="flex flex-col items-center gap-3">
<a <a
href="mailto:suporte@rever.com.br" 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 <Mail className="size-4" /> Falar com o suporte
</a> </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> </div>
</div> </div>

View file

@ -18,9 +18,10 @@ type MachineStateMonitorProps = {
machineId: string machineId: string
onDeactivated?: () => void onDeactivated?: () => void
onTokenRevoked?: () => void onTokenRevoked?: () => void
onReactivated?: () => void
} }
function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked }: MachineStateMonitorProps) { function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked, onReactivated }: MachineStateMonitorProps) {
const machineState = useQuery(api.machines.getMachineState, { const machineState = useQuery(api.machines.getMachineState, {
machineId: machineId as Id<"machines">, machineId: machineId as Id<"machines">,
}) })
@ -65,6 +66,12 @@ function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked }:
onDeactivated?.() 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 // Detecta mudança de token válido para inválido
if (previousHasValidToken.current === true && machineState.hasValidToken === false) { if (previousHasValidToken.current === true && machineState.hasValidToken === false) {
console.log("[MachineStateMonitor] Token foi revogado (reset)") console.log("[MachineStateMonitor] Token foi revogado (reset)")
@ -74,7 +81,7 @@ function MachineStateMonitorInner({ machineId, onDeactivated, onTokenRevoked }:
// Atualiza refs // Atualiza refs
previousIsActive.current = machineState.isActive previousIsActive.current = machineState.isActive
previousHasValidToken.current = machineState.hasValidToken previousHasValidToken.current = machineState.hasValidToken
}, [machineState, onDeactivated, onTokenRevoked]) }, [machineState, onDeactivated, onTokenRevoked, onReactivated])
// Este componente nao renderiza nada // Este componente nao renderiza nada
return null return null

View file

@ -12,6 +12,8 @@ import { cn } from "./lib/utils"
import { ChatApp } from "./chat" import { ChatApp } from "./chat"
import { DeactivationScreen } from "./components/DeactivationScreen" import { DeactivationScreen } from "./components/DeactivationScreen"
import { MachineStateMonitor } from "./components/MachineStateMonitor" 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" import type { SessionStartedEvent, UnreadUpdateEvent, NewMessageEvent, SessionEndedEvent } from "./chat/types"
// URL do Convex para subscription em tempo real // URL do Convex para subscription em tempo real
@ -724,12 +726,36 @@ useEffect(() => {
} }
}, [token]) // eslint-disable-line react-hooks/exhaustive-deps }, [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(() => { const handleMachineDeactivated = useCallback(() => {
console.log("[App] Máquina foi desativada - mostrando tela de bloqueio") console.log("[App] Máquina foi desativada - mostrando tela de bloqueio")
setIsMachineActive(false) 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 () => { const handleTokenRevoked = useCallback(async () => {
console.log("[App] Token foi revogado - voltando para tela de registro") console.log("[App] Token foi revogado - voltando para tela de registro")
if (store) { if (store) {
@ -1582,20 +1608,31 @@ const resolvedAppUrl = useMemo(() => {
) )
} }
return ( // Monitor sempre ativo quando há token e machineId
<div className="min-h-screen grid place-items-center bg-slate-50 p-6"> const machineMonitor = token && config?.machineId && convexClient ? (
{/* Monitor de estado da maquina em tempo real via Convex */}
{token && config?.machineId && convexClient && (
<MachineStateMonitor <MachineStateMonitor
client={convexClient} client={convexClient}
machineId={config.machineId} machineId={config.machineId}
onDeactivated={handleMachineDeactivated} onDeactivated={handleMachineDeactivated}
onTokenRevoked={handleTokenRevoked} onTokenRevoked={handleTokenRevoked}
onReactivated={handleMachineReactivated}
/> />
)} ) : null
{token && !isMachineActive ? (
<DeactivationScreen companyName={companyName} /> // 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="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"> <div className="mb-6 flex flex-col items-center gap-4 text-center">
<img <img
@ -1816,8 +1853,6 @@ const resolvedAppUrl = useMemo(() => {
</div> </div>
)} )}
</div> </div>
)}
</div> </div>
) )
} }

View file

@ -61,16 +61,16 @@ const ACTION_TYPE_LABELS: Record<string, { label: string; icon: typeof Mail }> =
SEND_EMAIL: { label: "Enviar e-mail", icon: Mail }, SEND_EMAIL: { label: "Enviar e-mail", icon: Mail },
SET_PRIORITY: { label: "Alterar prioridade", icon: ArrowRight }, SET_PRIORITY: { label: "Alterar prioridade", icon: ArrowRight },
MOVE_QUEUE: { label: "Mover para fila", icon: ArrowRight }, MOVE_QUEUE: { label: "Mover para fila", icon: ArrowRight },
ASSIGN_TO: { label: "Atribuir responsavel", icon: UserCheck }, ASSIGN_TO: { label: "Atribuir responsável", icon: UserCheck },
ADD_INTERNAL_COMMENT: { label: "Comentario interno", icon: MessageSquare }, ADD_INTERNAL_COMMENT: { label: "Comentário interno", icon: MessageSquare },
APPLY_CHECKLIST_TEMPLATE: { label: "Aplicar checklist", icon: ListChecks }, APPLY_CHECKLIST_TEMPLATE: { label: "Aplicar checklist", icon: ListChecks },
SET_CHAT_ENABLED: { label: "Chat habilitado", icon: ToggleRight }, 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> = { const PRIORITY_LABELS: Record<string, string> = {
LOW: "Baixa", LOW: "Baixa",
MEDIUM: "Media", MEDIUM: "Média",
HIGH: "Alta", HIGH: "Alta",
URGENT: "Urgente", URGENT: "Urgente",
} }
@ -93,7 +93,7 @@ function ActionDetails({ action }: { action: ActionApplied }) {
<div className="space-y-2 text-sm"> <div className="space-y-2 text-sm">
{details.recipients && Array.isArray(details.recipients) && ( {details.recipients && Array.isArray(details.recipients) && (
<div> <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"> <div className="mt-1 flex flex-wrap gap-1">
{(details.recipients as string[]).map((email, i) => ( {(details.recipients as string[]).map((email, i) => (
<Badge key={i} variant="outline" className="text-xs font-mono"> <Badge key={i} variant="outline" className="text-xs font-mono">
@ -147,14 +147,14 @@ function ActionDetails({ action }: { action: ActionApplied }) {
{action.type === "ASSIGN_TO" && ( {action.type === "ASSIGN_TO" && (
<div className="text-sm"> <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> <span className="text-slate-900 font-medium">{String(details.assigneeName ?? "—")}</span>
</div> </div>
)} )}
{action.type === "SET_FORM_TEMPLATE" && ( {action.type === "SET_FORM_TEMPLATE" && (
<div className="text-sm"> <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> <span className="text-slate-900">{String(details.formTemplateLabel ?? details.formTemplate ?? "—")}</span>
</div> </div>
)} )}
@ -170,7 +170,7 @@ function ActionDetails({ action }: { action: ActionApplied }) {
{action.type === "ADD_INTERNAL_COMMENT" && ( {action.type === "ADD_INTERNAL_COMMENT" && (
<div className="text-sm text-slate-600"> <div className="text-sm text-slate-600">
Comentario interno adicionado ao ticket Comentário interno adicionado ao ticket
</div> </div>
)} )}
@ -199,7 +199,7 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {
{run.ticket ? ( {run.ticket ? (
<div className="text-sm space-y-1"> <div className="text-sm space-y-1">
<div> <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> <span className="font-mono font-semibold">#{run.ticket.reference}</span>
</div> </div>
<div> <div>
@ -208,22 +208,22 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {
</div> </div>
</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> </div>
{/* Info da Execucao */} {/* Info da Execução */}
<div className="space-y-2"> <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 className="text-sm space-y-1">
<div> <div>
<span className="text-slate-500">Evento:</span>{" "} <span className="text-slate-500">Evento:</span>{" "}
<span className="text-slate-900">{EVENT_LABELS[run.eventType] ?? run.eventType}</span> <span className="text-slate-900">{EVENT_LABELS[run.eventType] ?? run.eventType}</span>
</div> </div>
<div> <div>
<span className="text-slate-500">Condicoes:</span>{" "} <span className="text-slate-500">Condições:</span>{" "}
<Badge variant={run.matched ? "secondary" : "outline"}> <Badge variant={run.matched ? "secondary" : "outline"}>
{run.matched ? "Atendidas" : "Nao atendidas"} {run.matched ? "Atendidas" : "Não atendidas"}
</Badge> </Badge>
</div> </div>
{run.error && ( {run.error && (
@ -236,11 +236,11 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {
</div> </div>
</div> </div>
{/* Acoes Aplicadas */} {/* Ações Aplicadas */}
{hasActions && ( {hasActions && (
<div className="mt-4 space-y-2"> <div className="mt-4 space-y-2">
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500"> <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
Acoes aplicadas ({run.actionsApplied!.length}) Ações aplicadas ({run.actionsApplied!.length})
</h4> </h4>
<div className="grid gap-2 md:grid-cols-2"> <div className="grid gap-2 md:grid-cols-2">
{run.actionsApplied!.map((action, i) => ( {run.actionsApplied!.map((action, i) => (
@ -252,7 +252,7 @@ function ExpandedDetails({ run }: { run: AutomationRunRow }) {
{!hasActions && run.status === "SUCCESS" && ( {!hasActions && run.status === "SUCCESS" && (
<div className="mt-4"> <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>
)} )}
</div> </div>
@ -389,7 +389,7 @@ export function AutomationRunsDialog({
const eventLabel = EVENT_LABELS[run.eventType] ?? run.eventType const eventLabel = EVENT_LABELS[run.eventType] ?? run.eventType
const actionsCount = run.actionsApplied?.length ?? 0 const actionsCount = run.actionsApplied?.length ?? 0
const actionsLabel = 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 createdAtLabel = formatDateTime(run.createdAt)
const details = const details =
run.status === "ERROR" run.status === "ERROR"
@ -397,10 +397,10 @@ export function AutomationRunsDialog({
: run.status === "SKIPPED" : run.status === "SKIPPED"
? run.matched ? run.matched
? "Ignorada" ? "Ignorada"
: "Condicoes nao atendidas" : "Condições não atendidas"
: actionsCount > 0 : actionsCount > 0
? actionsLabel ? actionsLabel
: "Sem alteracoes" : "Sem alterações"
const isExpanded = expandedId === run.id const isExpanded = expandedId === run.id
const toggleExpand = () => setExpandedId(isExpanded ? null : run.id) const toggleExpand = () => setExpandedId(isExpanded ? null : run.id)